🚸 (whatsapp) Improve upgrade plan for whatsapp notice

apps/builder/src/features/publish/components/embeds/EmbedButton.tsx

@@ -43,7 +43,6 @@ import { ParentModalProvider } from '@/features/graph/providers/ParentModalProvi
 import { isWhatsAppAvailable } from '@/features/telemetry/posthog'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { hasProPerks } from '@/features/billing/helpers/hasProPerks'
-import { ChangePlanModal } from '@/features/billing/components/ChangePlanModal'
 import { LockTag } from '@/features/billing/components/LockTag'
 import { Plan } from '@typebot.io/prisma'
 
@@ -106,18 +105,9 @@ export const integrationsList = [
             logo={<WhatsAppLogo height={100} width="70px" />}
             label="WhatsApp"
             lockTagPlan={hasProPerks(workspace) ? undefined : 'PRO'}
-            modal={({ onClose, isOpen }) =>
-              hasProPerks(workspace) ? (
-                <WhatsAppModal isOpen={isOpen} onClose={onClose} {...props} />
-              ) : (
-                <ChangePlanModal
-                  isOpen={isOpen}
-                  onClose={onClose}
-                  excludedPlans={['STARTER']}
-                  type="deploy on WhatsApp"
-                />
-              )
-            }
+            modal={({ onClose, isOpen }) => (
+              <WhatsAppModal isOpen={isOpen} onClose={onClose} {...props} />
+            )}
             {...props}
           />
         </ParentModalProvider>

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

@@ -397,12 +397,15 @@ const PhoneNumber = ({
       <HStack>
         <Text>
           Go to your{' '}
-          <TextLink
+          <Button
+            as={Link}
             href={`https://developers.facebook.com/apps/${appId}/whatsapp-business/wa-dev-console`}
             isExternal
+            rightIcon={<ExternalLinkIcon />}
+            size="sm"
           >
-            WhatsApp Dev Console
-          </TextLink>
+            WhatsApp Dev Console{' '}
+          </Button>
         </Text>
       </HStack>
     </ListItem>

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

@@ -39,6 +39,9 @@ import { NumberInput } from '@/components/inputs'
 import { defaultSessionExpiryTimeout } from '@typebot.io/schemas/features/whatsapp'
 import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
 import { isDefined } from '@typebot.io/lib/utils'
+import { hasProPerks } from '@/features/billing/helpers/hasProPerks'
+import { UnlockPlanAlertInfo } from '@/components/UnlockPlanAlertInfo'
+import { PlanTag } from '@/features/billing/components/PlanTag'
 
 export const WhatsAppModal = ({ isOpen, onClose }: ModalProps): JSX.Element => {
   const { typebot, updateTypebot, isPublished } = useTypebot()
@@ -175,6 +178,12 @@ export const WhatsAppModal = ({ isOpen, onClose }: ModalProps): JSX.Element => {
         </ModalHeader>
         <ModalCloseButton />
         <ModalBody as={Stack} spacing="6">
+          {!hasProPerks(workspace) && (
+            <UnlockPlanAlertInfo excludedPlans={['STARTER']}>
+              Upgrade your workspace to <PlanTag plan="PRO" /> to be able to
+              enable WhatsApp integration.
+            </UnlockPlanAlertInfo>
+          )}
           {!isPublished && phoneNumberData?.id && (
             <AlertInfo>You have modifications that can be published.</AlertInfo>
           )}
@@ -269,6 +278,7 @@ export const WhatsAppModal = ({ isOpen, onClose }: ModalProps): JSX.Element => {
 
                 <ListItem>
                   <SwitchWithLabel
+                    isDisabled={!hasProPerks(workspace)}
                     label="Enable WhatsApp integration"
                     initialValue={
                       typebot?.settings.whatsApp?.isEnabled ?? false