✨ Add WhatsApp integration beta test (#722)

Related to #401

apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings.tsx

@@ -120,6 +120,7 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
             currentCredentialsId={options.credentialsId}
             onCredentialsSelect={updateCredentials}
             onCreateNewClick={onOpen}
+            credentialsName="Stripe account"
           />
         )}
       </Stack>

apps/builder/src/features/blocks/inputs/payment/payment.spec.ts

@@ -21,8 +21,7 @@ test.describe('Payment input block', () => {
 
     await page.goto(`/typebots/${typebotId}/edit`)
     await page.click('text=Configure...')
-    await page.getByRole('button', { name: 'Select an account' }).click()
-    await page.click('text=Connect new')
+    await page.getByRole('button', { name: 'Add Stripe account' }).click()
     await page.fill('[placeholder="Typebot"]', 'My Stripe Account')
     await page.fill('[placeholder="sk_test_..."]', env.STRIPE_SECRET_KEY ?? '')
     await page.fill('[placeholder="sk_live_..."]', env.STRIPE_SECRET_KEY ?? '')

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettings.tsx

@@ -115,6 +115,7 @@ export const GoogleSheetsSettings = ({
           currentCredentialsId={options?.credentialsId}
           onCredentialsSelect={handleCredentialsIdChange}
           onCreateNewClick={handleCreateNewClick}
+          credentialsName="Sheets account"
         />
       )}
       <GoogleSheetConnectModal

apps/builder/src/features/blocks/integrations/googleSheets/googleSheets.spec.ts

@@ -149,7 +149,7 @@ test.describe.parallel('Google sheets integration', () => {
 
 const fillInSpreadsheetInfo = async (page: Page) => {
   await page.click('text=Configure...')
-  await page.click('text=Select an account')
+  await page.click('text=Select Sheets account')
   await page.click('text=pro-user@email.com')
 
   await page.fill('input[placeholder="Search for spreadsheet"]', 'CR')

apps/builder/src/features/blocks/integrations/openai/components/OpenAISettings.tsx

@@ -53,6 +53,7 @@ export const OpenAISettings = ({ options, onOptionsChange }: Props) => {
           currentCredentialsId={options?.credentialsId}
           onCredentialsSelect={updateCredentialsId}
           onCreateNewClick={onOpen}
+          credentialsName="OpenAI account"
         />
       )}
       <OpenAICredentialsModal

apps/builder/src/features/blocks/integrations/openai/openai.spec.ts

@@ -18,8 +18,7 @@ test('should be configurable', async ({ page }) => {
   ])
   await page.goto(`/typebots/${typebotId}/edit`)
   await page.getByText('Configure...').click()
-  await page.getByRole('button', { name: 'Select an account' }).click()
-  await page.getByRole('menuitem', { name: 'Connect new' }).click()
+  await page.getByRole('button', { name: 'Add OpenAI account' }).click()
   await expect(page.getByRole('button', { name: 'Create' })).toBeDisabled()
   await page.getByPlaceholder('My account').fill('My account')
   await page.getByPlaceholder('sk-...').fill('sk-test')

apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailSettings.tsx

@@ -121,6 +121,7 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
             defaultCredentialLabel={env.NEXT_PUBLIC_SMTP_FROM?.match(
               /<(.*)>/
             )?.pop()}
+            credentialsName="SMTP account"
           />
         )}
       </Stack>

apps/builder/src/features/blocks/logic/setVariable/components/SetVariableContent.tsx

@@ -69,5 +69,13 @@ const Expression = ({
         </Text>
       )
     }
+    case 'Contact name':
+    case 'Phone number':
+      return (
+        <Text as="span">
+          {variableName} ={' '}
+          <Tag colorScheme="purple">WhatsApp.{options.type}</Tag>
+        </Text>
+      )
   }
 }

apps/builder/src/features/blocks/logic/setVariable/components/SetVariableSettings.tsx

@@ -10,6 +10,7 @@ import React from 'react'
 import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 import { Select } from '@/components/inputs/Select'
+import { WhatsAppLogo } from '@/components/logos/WhatsAppLogo'
 
 type Props = {
   options: SetVariableOptions
@@ -47,7 +48,14 @@ export const SetVariableSettings = ({ options, onOptionsChange }: Props) => {
         </Text>
         <Select
           selectedItem={options.type ?? 'Custom'}
-          items={setVarTypes}
+          items={setVarTypes.map((type) => ({
+            label: type,
+            value: type,
+            icon:
+              type === 'Contact name' || type === 'Phone number' ? (
+                <WhatsAppLogo />
+              ) : undefined,
+          }))}
           onSelect={updateValueType}
         />
         <SetVariableValue options={options} onOptionsChange={onOptionsChange} />
@@ -150,6 +158,8 @@ const SetVariableValue = ({
         </Alert>
       )
     }
+    case 'Contact name':
+    case 'Phone number':
     case 'Random ID':
     case 'Now':
     case 'Today':