🚸 (whatsapp) Improve upgrade plan for whatsapp notice

apps/builder/src/components/UnlockPlanAlertInfo.tsx

@@ -15,13 +15,11 @@ import {
 import { useI18n } from '@/locales'
 
 type Props = {
-  contentLabel: React.ReactNode
   buttonLabel?: string
 } & AlertProps &
   Pick<ChangePlanModalProps, 'type' | 'excludedPlans'>
 
 export const UnlockPlanAlertInfo = ({
-  contentLabel,
   buttonLabel,
   type,
   excludedPlans,
@@ -39,7 +37,7 @@ export const UnlockPlanAlertInfo = ({
     >
       <HStack>
         <AlertIcon />
-        <Text>{contentLabel}</Text>
+        <Text>{props.children}</Text>
       </HStack>
       <Button
         colorScheme={props.status === 'warning' ? 'orange' : 'blue'}

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 }) =>
+            modal={({ onClose, isOpen }) => (
-              hasProPerks(workspace) ? (
+              <WhatsAppModal isOpen={isOpen} onClose={onClose} {...props} />
-                <WhatsAppModal isOpen={isOpen} onClose={onClose} {...props} />
+            )}
-              ) : (
-                <ChangePlanModal
-                  isOpen={isOpen}
-                  onClose={onClose}
-                  excludedPlans={['STARTER']}
-                  type="deploy on WhatsApp"
-                />
-              )
-            }
             {...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
+            WhatsApp Dev Console{' '}
-          </TextLink>
+          </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

apps/builder/src/features/results/components/UsageAlertBanners.tsx

@@ -38,18 +38,11 @@ export const UsageAlertBanners = ({ workspace }: Props) => {
     <>
       {chatsLimitPercentage > ALERT_CHATS_PERCENT_THRESHOLD && (
         <Flex p="4">
-          <UnlockPlanAlertInfo
+          <UnlockPlanAlertInfo status="warning" buttonLabel="Upgrade">
-            status="warning"
+            Your workspace collected <strong>{chatsLimitPercentage}%</strong> of
-            contentLabel={
+            your total chats limit this month. Upgrade your plan to continue
-              <>
+            chatting with your customers beyond this limit.
-                Your workspace collected{' '}
+          </UnlockPlanAlertInfo>
-                <strong>{chatsLimitPercentage}%</strong> of your total chats
-                limit this month. Upgrade your plan to continue chatting with
-                your customers beyond this limit.
-              </>
-            }
-            buttonLabel="Upgrade"
-          />
         </Flex>
       )}
     </>

apps/builder/src/features/typebot/api/updateTypebot.ts

@@ -119,12 +119,12 @@ export const updateTypebot = authenticatedProcedure
       }
 
       if (
-        typebot.whatsAppCredentialsId &&
+        typebot.settings?.whatsApp?.isEnabled &&
         !hasProPerks(existingTypebot.workspace)
       ) {
         throw new TRPCError({
           code: 'BAD_REQUEST',
-          message: 'WhatsApp is only available for Pro workspaces',
+          message: 'WhatsApp can be enabled only on a Pro workspaces',
         })
       }
 

apps/builder/src/features/workspace/components/MembersList.tsx

@@ -103,7 +103,9 @@ export const MembersList = () => {
   return (
     <Stack w="full" spacing={3}>
       {!canInviteNewMember && (
-        <UnlockPlanAlertInfo contentLabel={scopedT('unlockBanner.label')} />
+        <UnlockPlanAlertInfo>
+          {scopedT('unlockBanner.label')}
+        </UnlockPlanAlertInfo>
       )}
       {isDefined(seatsLimit) && (
         <Heading fontSize="2xl">

apps/builder/src/pages/api/stripe/webhook.ts

@@ -191,13 +191,18 @@ const webhookHandler = async (req: NextApiRequest, res: NextApiResponse) => {
             await prisma.typebot.updateMany({
               where: { id: typebot.id },
               data: {
-                whatsAppCredentialsId: null,
                 settings: {
                   ...settings,
                   general: {
                     ...settings.general,
                     isBrandingEnabled: true,
                   },
+                  whatsApp: settings.whatsApp
+                    ? {
+                        ...settings.whatsApp,
+                        isEnabled: false,
+                      }
+                    : undefined,
                 },
               },
             })