From 5a34f6bfa7be6451f4cc33458cffc114210276e3 Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Wed, 29 Jan 2025 15:40:59 +0100
Subject: [PATCH] Disable variables for the country code in the form phone
 field (#9897)

Fixes
https://discord.com/channels/1130383047699738754/1333820080651501691

We disable the variable picker for the country code for now. We'll
implement a proper solution later.
---
 .../components/FormPhoneFieldInput.tsx        |  7 ++-
 .../FormPhoneFieldInput.stories.tsx           | 51 +++++++++++++++++--
 2 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormPhoneFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormPhoneFieldInput.tsx
index 86f34a2f3..16ce72255 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormPhoneFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormPhoneFieldInput.tsx
@@ -38,14 +38,14 @@ export const FormPhoneFieldInput = ({
     onPersist({
       primaryPhoneCountryCode: newCountry,
       primaryPhoneCallingCode: newCallingCode,
-      primaryPhoneNumber: defaultValue?.primaryPhoneNumber || '',
+      primaryPhoneNumber: defaultValue?.primaryPhoneNumber ?? '',
     });
   };
 
   const handleNumberChange = (number: string | number | null) => {
     onPersist({
-      primaryPhoneCountryCode: defaultValue?.primaryPhoneCountryCode || '',
-      primaryPhoneCallingCode: defaultValue?.primaryPhoneCallingCode || '',
+      primaryPhoneCountryCode: defaultValue?.primaryPhoneCountryCode ?? '',
+      primaryPhoneCallingCode: defaultValue?.primaryPhoneCallingCode ?? '',
       primaryPhoneNumber: number ? `${number}` : '',
     });
   };
@@ -58,7 +58,6 @@ export const FormPhoneFieldInput = ({
           selectedCountryCode={defaultValue?.primaryPhoneCountryCode || ''}
           onPersist={handleCountryChange}
           readonly={readonly}
-          VariablePicker={VariablePicker}
         />
         <FormNumberFieldInput
           label="Phone Number"
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormPhoneFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormPhoneFieldInput.stories.tsx
index 601dfa47c..71e83adb4 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormPhoneFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormPhoneFieldInput.stories.tsx
@@ -104,9 +104,9 @@ export const SelectEmptyCountryCode: Story = {
   },
 };
 
-export const WithVariables: Story = {
+export const WithVariablesAsDefaultValues: Story = {
   args: {
-    label: 'Enter phone...',
+    label: 'Phone',
     defaultValue: {
       primaryPhoneCountryCode: '{{a.countryCode}}',
       primaryPhoneNumber: '{{a.phoneNumber}}',
@@ -124,7 +124,7 @@ export const WithVariables: Story = {
 
     const variablePickers = await canvas.findAllByText('VariablePicker');
 
-    expect(variablePickers).toHaveLength(2);
+    expect(variablePickers).toHaveLength(1);
 
     for (const variablePicker of variablePickers) {
       expect(variablePicker).toBeVisible();
@@ -132,9 +132,52 @@ export const WithVariables: Story = {
   },
 };
 
+export const SelectingVariables: Story = {
+  args: {
+    label: 'Phone',
+    VariablePicker: ({ onVariableSelect }) => {
+      return (
+        <button
+          onClick={() => {
+            onVariableSelect('{{test}}');
+          }}
+        >
+          Add variable
+        </button>
+      );
+    },
+    onPersist: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const countryCodeDefaultValue = await canvas.findByText('No country');
+    expect(countryCodeDefaultValue).toBeVisible();
+
+    const phoneNumberDefaultValue =
+      await canvas.findByPlaceholderText('Enter phone number');
+    expect(phoneNumberDefaultValue).toHaveDisplayValue('');
+
+    const phoneNumberVariablePicker = await canvas.findByText('Add variable');
+
+    await userEvent.click(phoneNumberVariablePicker);
+
+    const phoneNumberVariable = await canvas.findByText('test');
+    expect(phoneNumberVariable).toBeVisible();
+
+    await waitFor(() => {
+      expect(args.onPersist).toHaveBeenCalledWith({
+        primaryPhoneNumber: '{{test}}',
+        primaryPhoneCountryCode: '',
+        primaryPhoneCallingCode: '',
+      });
+    });
+  },
+};
+
 export const Disabled: Story = {
   args: {
-    label: 'Enter phone...',
+    label: 'Phone',
     readonly: true,
     VariablePicker: () => <div>VariablePicker</div>,
   },