⚡ (whatsapp) Improve whatsApp management and media collection

Closes #796

apps/builder/src/features/publish/components/embeds/modals/WhatsAppModal/WhatsAppCredentialsModal.tsx

@@ -43,6 +43,7 @@ import { env } from '@typebot.io/env'
 import { isEmpty, isNotEmpty } from '@typebot.io/lib/utils'
 import { getViewerUrl } from '@typebot.io/lib/getViewerUrl'
 import React, { useState } from 'react'
+import { createId } from '@paralleldrive/cuid2'
 
 const steps = [
   { title: 'Requirements' },
@@ -57,6 +58,8 @@ type Props = {
   onNewCredentials: (id: string) => void
 }
 
+const credentialsId = createId()
+
 export const WhatsAppCredentialsModal = ({
   isOpen,
   onClose,
@@ -115,6 +118,7 @@ export const WhatsAppCredentialsModal = ({
     if (!workspace) return
     mutate({
       credentials: {
+        id: credentialsId,
         type: 'whatsApp',
         workspaceId: workspace.id,
         name: phoneNumberName,
@@ -269,7 +273,7 @@ export const WhatsAppCredentialsModal = ({
             <Webhook
               appId={tokenInfoData?.appId}
               verificationToken={verificationToken}
-              phoneNumberId={phoneNumberId}
+              credentialsId={credentialsId}
             />
           )}
         </ModalBody>
@@ -442,18 +446,16 @@ const PhoneNumber = ({
 const Webhook = ({
   appId,
   verificationToken,
-  phoneNumberId,
+  credentialsId,
 }: {
   appId?: string
   verificationToken: string
-  phoneNumberId: string
+  credentialsId: string
 }) => {
   const { workspace } = useWorkspace()
   const webhookUrl = `${
     env.NEXT_PUBLIC_VIEWER_INTERNAL_URL ?? getViewerUrl()
-  }/api/v1/workspaces/${
-    workspace?.id
-  }/whatsapp/phoneNumbers/${phoneNumberId}/webhook`
+  }/api/v1/workspaces/${workspace?.id}/whatsapp/${credentialsId}/webhook`
 
   return (
     <Stack spacing={6}>

apps/builder/src/features/publish/components/embeds/modals/WhatsAppModal/WhatsAppModal.tsx

@@ -30,7 +30,6 @@ import { PublishButton } from '../../../PublishButton'
 import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
 import { trpc } from '@/lib/trpc'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
-import { isDefined } from '@typebot.io/lib/utils'
 import { TableList } from '@/components/TableList'
 import { Comparison, LogicalOperator } from '@typebot.io/schemas'
 import { DropdownList } from '@/components/DropdownList'
@@ -51,18 +50,25 @@ export const WhatsAppModal = ({ isOpen, onClose }: ModalProps): JSX.Element => {
 
   const { data: phoneNumberData } = trpc.whatsApp.getPhoneNumber.useQuery(
     {
-      credentialsId: whatsAppSettings?.credentialsId as string,
+      credentialsId: typebot?.whatsAppCredentialsId as string,
     },
     {
-      enabled: !!whatsAppSettings?.credentialsId,
+      enabled: !!typebot?.whatsAppCredentialsId,
     }
   )
 
   const toggleEnableWhatsApp = (isChecked: boolean) => {
-    if (!phoneNumberData?.id) return
+    if (!phoneNumberData?.id || !typebot) return
     updateTypebot({
-      updates: { whatsAppPhoneNumberId: isChecked ? phoneNumberData.id : null },
-      save: true,
+      updates: {
+        settings: {
+          ...typebot.settings,
+          whatsApp: {
+            ...typebot.settings.whatsApp,
+            isEnabled: isChecked,
+          },
+        },
+      },
     })
   }
 
@@ -70,13 +76,7 @@ export const WhatsAppModal = ({ isOpen, onClose }: ModalProps): JSX.Element => {
     if (!typebot) return
     updateTypebot({
       updates: {
-        settings: {
-          ...typebot.settings,
-          whatsApp: {
-            ...typebot.settings.whatsApp,
-            credentialsId,
-          },
-        },
+        whatsAppCredentialsId: credentialsId,
       },
     })
   }
@@ -148,7 +148,9 @@ export const WhatsAppModal = ({ isOpen, onClose }: ModalProps): JSX.Element => {
                     <CredentialsDropdown
                       type="whatsApp"
                       workspaceId={workspace.id}
-                      currentCredentialsId={whatsAppSettings?.credentialsId}
+                      currentCredentialsId={
+                        typebot?.whatsAppCredentialsId ?? undefined
+                      }
                       onCredentialsSelect={updateCredentialsId}
                       onCreateNewClick={onOpen}
                       credentialsName="WA phone number"
@@ -158,7 +160,7 @@ export const WhatsAppModal = ({ isOpen, onClose }: ModalProps): JSX.Element => {
                 )}
               </HStack>
             </ListItem>
-            {typebot?.settings.whatsApp?.credentialsId && (
+            {typebot?.whatsAppCredentialsId && (
               <>
                 <ListItem>
                   <Accordion allowToggle>
@@ -196,22 +198,22 @@ export const WhatsAppModal = ({ isOpen, onClose }: ModalProps): JSX.Element => {
                   </Accordion>
                 </ListItem>
 
-                <ListItem>
-                  <HStack>
-                    <Text>Publish your bot:</Text>
-                    <PublishButton size="sm" isMoreMenuDisabled />
-                  </HStack>
-                </ListItem>
                 <ListItem>
                   <SwitchWithLabel
                     label="Enable WhatsApp integration"
                     initialValue={
-                      isDefined(typebot?.whatsAppPhoneNumberId) ? true : false
+                      typebot?.settings.whatsApp?.isEnabled ?? false
                     }
                     onCheckChange={toggleEnableWhatsApp}
                     justifyContent="flex-start"
                   />
                 </ListItem>
+                <ListItem>
+                  <HStack>
+                    <Text>Publish your bot:</Text>
+                    <PublishButton size="sm" isMoreMenuDisabled />
+                  </HStack>
+                </ListItem>
                 {phoneNumberData?.id && (
                   <ListItem>
                     <TextLink