whatsapp broadcast

frontend/src/features/whatsapp/CustomerWhatsAppInbox.tsx

@@ -109,8 +109,26 @@ export function CustomerWhatsAppInbox({ account, onBack }: { account: WhatsAppAc
   const [reactFor, setReactFor] = useState<string | null>(null)
   const [emojiOpen, setEmojiOpen] = useState(false)
   const chatEndRef = useRef<HTMLDivElement | null>(null)
-  const line = account.primary_phone?.display_phone || account.name
-  const canSend = account.messaging_status === 'active' && account.usable
+  const [deliveryAccount, setDeliveryAccount] = useState(account)
+  const [appSecret, setAppSecret] = useState('')
+  const [deliveryBusy, setDeliveryBusy] = useState(false)
+  const line = deliveryAccount.primary_phone?.display_phone || deliveryAccount.name
+  const canSend = deliveryAccount.messaging_status === 'active' && deliveryAccount.usable
+  const repliesLive = deliveryAccount.webhooks_status === 'active'
+
+  async function saveDelivery(event: FormEvent) {
+    event.preventDefault()
+    setDeliveryBusy(true)
+    setError('')
+    try {
+      setDeliveryAccount(await whatsappApi.enableDelivery(account.id, appSecret.trim()))
+      setAppSecret('')
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : 'Replies could not be turned on')
+    } finally {
+      setDeliveryBusy(false)
+    }
+  }
 
   async function loadMessages() {
     setMessages(await whatsappApi.messages(account.id))
@@ -272,7 +290,17 @@ export function CustomerWhatsAppInbox({ account, onBack }: { account: WhatsAppAc
           <button type="button" className="wa-ghost" onClick={() => void loadMessages()}><RefreshCw size={14} /> Refresh</button>
         </div>
       </div>
-      {!canSend && <p className="wa-biz-notice">{account.last_error || 'You can read messages already delivered here. Sending stays off until Meta connects this number.'}</p>}
+      {!canSend && <p className="wa-biz-notice">{deliveryAccount.last_error || 'You can read messages already delivered here. Sending stays off until Meta connects this number.'}</p>}
+      {canSend && !repliesLive && (
+        <form className="wa-biz-notice" onSubmit={(event) => void saveDelivery(event)}>
+          <p>WhatsApp accepted messages from this number, but delivery updates and replies are still going to the Meta app that created the token. Paste that app’s App secret so they arrive here. In Meta: the app → App settings → Basic → App secret.</p>
+          <label className="explorer-input">
+            <strong>App secret</strong>
+            <input type="password" value={appSecret} onChange={(event) => setAppSecret(event.target.value)} autoComplete="off" required />
+          </label>
+          <button className="primary-button" type="submit" disabled={deliveryBusy}>Turn on replies</button>
+        </form>
+      )}
       <div className="wa-inbox">
         <aside className="wa-list">
           <div className="wa-list-head">