⚡ Auto continue bot on whatsApp if starting block is input (#849)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
### Summary by CodeRabbit

**New Features:**
- Added WhatsApp integration feature to the Pro plan.

**Refactor:**
- Introduced the ability to exclude specific plans from being displayed
in the Change Plan Modal.
- Renamed the function `isProPlan` to `hasProPerks`, enhancing code
readability and maintainability.
- Updated the `EmbedButton` component to handle a new `lockTagPlan`
property and use the `modal` function instead of the `Modal` component.

**Chore:**
- Removed the `whatsAppPhoneNumberId` field from the `Typebot` model
across various files, simplifying the data structure of the model.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: baptisteArno

apps/builder/src/components/UnlockPlanAlertInfo.tsx

@@ -8,19 +8,23 @@ import {
   useDisclosure,
 } from '@chakra-ui/react'
 import React from 'react'
-import { ChangePlanModal } from '@/features/billing/components/ChangePlanModal'
+import {
+  ChangePlanModal,
+  ChangePlanModalProps,
+} from '@/features/billing/components/ChangePlanModal'
 import { useI18n } from '@/locales'
 
 type Props = {
   contentLabel: React.ReactNode
   buttonLabel?: string
-  type?: string
-} & AlertProps
+} & AlertProps &
+  Pick<ChangePlanModalProps, 'type' | 'excludedPlans'>
 
 export const UnlockPlanAlertInfo = ({
   contentLabel,
   buttonLabel,
   type,
+  excludedPlans,
   ...props
 }: Props) => {
   const t = useI18n()
@@ -45,7 +49,12 @@ export const UnlockPlanAlertInfo = ({
       >
         {buttonLabel ?? t('billing.upgradeAlert.buttonDefaultLabel')}
       </Button>
-      <ChangePlanModal isOpen={isOpen} onClose={onClose} type={type} />
+      <ChangePlanModal
+        isOpen={isOpen}
+        onClose={onClose}
+        type={type}
+        excludedPlans={excludedPlans}
+      />
     </Alert>
   )
 }

apps/builder/src/features/analytics/components/AnalyticsGraphContainer.tsx

@@ -82,6 +82,7 @@ export const AnalyticsGraphContainer = ({ stats }: { stats?: Stats }) => {
         onClose={onClose}
         isOpen={isOpen}
         type={t('billing.limitMessage.analytics')}
+        excludedPlans={['STARTER']}
       />
       <StatsCards stats={stats} pos="absolute" />
     </Flex>

apps/builder/src/features/billing/components/ChangePlanForm.tsx

@@ -16,9 +16,10 @@ import { StripeClimateLogo } from './StripeClimateLogo'
 
 type Props = {
   workspace: Workspace
+  excludedPlans?: ('STARTER' | 'PRO')[]
 }
 
-export const ChangePlanForm = ({ workspace }: Props) => {
+export const ChangePlanForm = ({ workspace, excludedPlans }: Props) => {
   const scopedT = useScopedI18n('billing')
 
   const { user } = useUser()
@@ -133,27 +134,31 @@ export const ChangePlanForm = ({ workspace }: Props) => {
             </HStack>
           </HStack>
           <HStack alignItems="stretch" spacing="4" w="full">
-            <StarterPlanPricingCard
-              workspace={workspace}
-              currentSubscription={{ isYearly: data.subscription?.isYearly }}
-              onPayClick={(props) =>
-                handlePayClick({ ...props, plan: Plan.STARTER })
-              }
-              isYearly={isYearly}
-              isLoading={isUpdatingSubscription}
-              currency={data.subscription?.currency}
-            />
+            {excludedPlans?.includes('STARTER') ? null : (
+              <StarterPlanPricingCard
+                workspace={workspace}
+                currentSubscription={{ isYearly: data.subscription?.isYearly }}
+                onPayClick={(props) =>
+                  handlePayClick({ ...props, plan: Plan.STARTER })
+                }
+                isYearly={isYearly}
+                isLoading={isUpdatingSubscription}
+                currency={data.subscription?.currency}
+              />
+            )}
 
-            <ProPlanPricingCard
-              workspace={workspace}
-              currentSubscription={{ isYearly: data.subscription?.isYearly }}
-              onPayClick={(props) =>
-                handlePayClick({ ...props, plan: Plan.PRO })
-              }
-              isYearly={isYearly}
-              isLoading={isUpdatingSubscription}
-              currency={data.subscription?.currency}
-            />
+            {excludedPlans?.includes('PRO') ? null : (
+              <ProPlanPricingCard
+                workspace={workspace}
+                currentSubscription={{ isYearly: data.subscription?.isYearly }}
+                onPayClick={(props) =>
+                  handlePayClick({ ...props, plan: Plan.PRO })
+                }
+                isYearly={isYearly}
+                isLoading={isUpdatingSubscription}
+                currency={data.subscription?.currency}
+              />
+            )}
           </HStack>
         </Stack>
       )}

apps/builder/src/features/billing/components/ChangePlanModal.tsx

@@ -13,21 +13,27 @@ import {
 } from '@chakra-ui/react'
 import { ChangePlanForm } from './ChangePlanForm'
 
-type ChangePlanModalProps = {
+export type ChangePlanModalProps = {
   type?: string
   isOpen: boolean
+  excludedPlans?: ('STARTER' | 'PRO')[]
   onClose: () => void
 }
 
 export const ChangePlanModal = ({
   onClose,
   isOpen,
   type,
+  excludedPlans,
 }: ChangePlanModalProps) => {
   const t = useI18n()
   const { workspace } = useWorkspace()
   return (
-    <Modal isOpen={isOpen} onClose={onClose} size="2xl">
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size={excludedPlans ? 'lg' : '2xl'}
+    >
       <ModalOverlay />
       <ModalContent>
         <ModalBody as={Stack} spacing="6" pt="10">
@@ -36,7 +42,12 @@ export const ChangePlanModal = ({
               {t('billing.upgradeLimitLabel', { type: type })}
             </AlertInfo>
           )}
-          {workspace && <ChangePlanForm workspace={workspace} />}
+          {workspace && (
+            <ChangePlanForm
+              workspace={workspace}
+              excludedPlans={excludedPlans}
+            />
+          )}
         </ModalBody>
 
         <ModalFooter>

apps/builder/src/features/billing/components/ProPlanPricingCard.tsx

@@ -200,6 +200,7 @@ export const ProPlanPricingCard = ({
                 </Text>
                 <MoreInfoTooltip>{scopedT('chatsTooltip')}</MoreInfoTooltip>
               </HStack>,
+              scopedT('pro.whatsAppIntegration'),
               scopedT('pro.customDomains'),
               scopedT('pro.analytics'),
             ]}

apps/builder/src/features/billing/components/UpgradeButton.tsx

@@ -5,9 +5,16 @@ import { isNotDefined } from '@typebot.io/lib'
 import { ChangePlanModal } from './ChangePlanModal'
 import { useI18n } from '@/locales'
 
-type Props = { limitReachedType?: string } & ButtonProps
+type Props = {
+  limitReachedType?: string
+  excludedPlans?: ('STARTER' | 'PRO')[]
+} & ButtonProps
 
-export const UpgradeButton = ({ limitReachedType, ...props }: Props) => {
+export const UpgradeButton = ({
+  limitReachedType,
+  excludedPlans,
+  ...props
+}: Props) => {
   const t = useI18n()
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { workspace } = useWorkspace()
@@ -23,6 +30,7 @@ export const UpgradeButton = ({ limitReachedType, ...props }: Props) => {
         isOpen={isOpen}
         onClose={onClose}
         type={limitReachedType}
+        excludedPlans={excludedPlans}
       />
     </Button>
   )

apps/builder/src/features/billing/helpers/isProPlan.ts renamed to apps/builder/src/features/billing/helpers/hasProPerks.ts

@@ -1,7 +1,7 @@
 import { isDefined } from '@typebot.io/lib'
 import { Workspace, Plan } from '@typebot.io/prisma'
 
-export const isProPlan = (workspace?: Pick<Workspace, 'plan'>) =>
+export const hasProPerks = (workspace?: Pick<Workspace, 'plan'>) =>
   isDefined(workspace) &&
   (workspace.plan === Plan.PRO ||
     workspace.plan === Plan.LIFETIME ||

apps/builder/src/features/graph/components/edges/DropOffEdge.tsx

@@ -11,7 +11,7 @@ import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import React, { useMemo } from 'react'
 import { useEndpoints } from '../../providers/EndpointsProvider'
 import { useGroupsCoordinates } from '../../providers/GroupsCoordinateProvider'
-import { isProPlan } from '@/features/billing/helpers/isProPlan'
+import { hasProPerks } from '@/features/billing/helpers/hasProPerks'
 import { computeDropOffPath } from '../../helpers/computeDropOffPath'
 import { computeSourceCoordinates } from '../../helpers/computeSourceCoordinates'
 import { TotalAnswersInBlock } from '@typebot.io/schemas/features/analytics'
@@ -64,7 +64,7 @@ export const DropOffEdge = ({
     [blockId, totalAnswersInBlocks]
   )
 
-  const isWorkspaceProPlan = isProPlan(workspace)
+  const isWorkspaceProPlan = hasProPerks(workspace)
 
   const { totalDroppedUser, dropOffRate } = useMemo(() => {
     if (!publishedTypebot || currentBlock?.total === undefined)

apps/builder/src/features/publish/components/SharePage.tsx

@@ -20,7 +20,7 @@ import { integrationsList } from './embeds/EmbedButton'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { LockTag } from '@/features/billing/components/LockTag'
 import { UpgradeButton } from '@/features/billing/components/UpgradeButton'
-import { isProPlan } from '@/features/billing/helpers/isProPlan'
+import { hasProPerks } from '@/features/billing/helpers/hasProPerks'
 import { CustomDomainsDropdown } from '@/features/customDomains/components/CustomDomainsDropdown'
 import { TypebotHeader } from '@/features/editor/components/TypebotHeader'
 import { parseDefaultPublicId } from '../helpers/parseDefaultPublicId'
@@ -130,14 +130,15 @@ export const SharePage = () => {
             {isNotDefined(typebot?.customDomain) &&
             env.NEXT_PUBLIC_VERCEL_VIEWER_PROJECT_NAME ? (
               <>
-                {isProPlan(workspace) ? (
+                {hasProPerks(workspace) ? (
                   <CustomDomainsDropdown
                     onCustomDomainSelect={handleCustomDomainChange}
                   />
                 ) : (
                   <UpgradeButton
                     colorScheme="gray"
                     limitReachedType={t('billing.limitMessage.customDomain')}
+                    excludedPlans={[Plan.STARTER]}
                   >
                     <Text mr="2">Add my domain</Text>{' '}
                     <LockTag plan={Plan.PRO} />