⚡ 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 -->

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,9 +13,10 @@ import {
 } from '@chakra-ui/react'
 import { ChangePlanForm } from './ChangePlanForm'
 
-type ChangePlanModalProps = {
+export type ChangePlanModalProps = {
   type?: string
   isOpen: boolean
+  excludedPlans?: ('STARTER' | 'PRO')[]
   onClose: () => void
 }
 
@@ -23,11 +24,16 @@ 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/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 ||