fix: phone-number-input (#12266)

apps/web/playwright/fixtures/regularBookings.ts

@@ -73,10 +73,10 @@ const fillQuestion = async (eventTypePage: Page, questionType: string, customLoc
     },
     multiselect: async () => {
       if (customLocators.shouldChangeMultiSelectLocator) {
-        await eventTypePage.locator("form svg").nth(1).click();
+        await eventTypePage.getByLabel("multi-select-dropdown").click();
         await eventTypePage.getByTestId("select-option-Option 1").click();
       } else {
-        await eventTypePage.locator("form svg").last().click();
+        await eventTypePage.getByLabel("multi-select-dropdown").last().click();
         await eventTypePage.getByTestId("select-option-Option 1").click();
       }
     },
@@ -88,10 +88,10 @@ const fillQuestion = async (eventTypePage: Page, questionType: string, customLoc
     },
     select: async () => {
       if (customLocators.shouldChangeSelectLocator) {
-        await eventTypePage.locator("form svg").nth(1).click();
+        await eventTypePage.getByLabel("select-dropdown").first().click();
         await eventTypePage.getByTestId("select-option-Option 1").click();
       } else {
-        await eventTypePage.locator("form svg").last().click();
+        await eventTypePage.getByLabel("select-dropdown").last().click();
         await eventTypePage.getByTestId("select-option-Option 1").click();
       }
     },
@@ -138,11 +138,12 @@ const fillAllQuestions = async (eventTypePage: Page, questions: string[], option
           await eventTypePage.getByPlaceholder("Textarea test").fill("This is a sample text for textarea.");
           break;
         case "select":
-          await eventTypePage.locator("form svg").last().click();
+          await eventTypePage.getByLabel("select-dropdown").last().click();
           await eventTypePage.getByTestId("select-option-Option 1").click();
           break;
         case "multiselect":
-          await eventTypePage.locator("form svg").nth(4).click();
+          // select-dropdown
+          await eventTypePage.getByLabel("multi-select-dropdown").click();
           await eventTypePage.getByTestId("select-option-Option 1").click();
           break;
         case "number":

apps/web/public/static/locales/en/common.json

@@ -2121,6 +2121,7 @@
   "manage_availability_schedules":"Manage availability schedules",
   "lock_timezone_toggle_on_booking_page": "Lock timezone on booking page",
   "description_lock_timezone_toggle_on_booking_page" : "To lock the timezone on booking page, useful for in-person events.",
+  "number_in_international_format": "Please enter number in international format.",
   "install_calendar":"Install Calendar",
   "branded_subdomain": "Branded Subdomain",
   "branded_subdomain_description": "Get your own branded subdomain, such as acme.cal.com",

packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx

@@ -166,6 +166,7 @@ const MultiSelectWidget = ({
 
   return (
     <Select
+      aria-label="multi-select-dropdown"
       className="mb-2"
       onChange={(items) => {
         setValue(items?.map((item) => item.value));
@@ -193,6 +194,7 @@ function SelectWidget({ listValues, setValue, value, ...remainingProps }: Select
 
   return (
     <Select
+      aria-label="select-dropdown"
       className="data-testid-select mb-2"
       onChange={(item) => {
         if (!item) {

packages/features/form-builder/Components.tsx

@@ -20,6 +20,7 @@ import {
   CheckboxField,
 } from "@calcom/ui";
 import { UserPlus, X } from "@calcom/ui/components/icon";
+import InfoBadge from "@calcom/web/components/ui/InfoBadge";
 
 import { ComponentForField } from "./FormBuilderField";
 import { propsTypes } from "./propsTypes";
@@ -395,6 +396,7 @@ export const Components: Record<FieldType, Component> = {
         }
       }, [options, setValue, value]);
 
+      const { t } = useLocale();
       return (
         <div>
           <div>
@@ -418,17 +420,25 @@ export const Components: Record<FieldType, Component> = {
                         checked={value?.value === option.value}
                       />
                       <span className="text-emphasis me-2 ms-2 text-sm">{option.label ?? ""}</span>
+                      <span>
+                        {option.value === "phone" && (
+                          <InfoBadge content={t("number_in_international_format")} />
+                        )}
+                      </span>
                     </label>
                   );
                 })
               ) : (
                 // Show option itself as label because there is just one option
                 <>
-                  <Label>
+                  <Label className="flex">
                     {options[0].label}
                     {!readOnly && optionsInputs[options[0].value]?.required ? (
                       <span className="text-default mb-1 ml-1 text-sm font-medium">*</span>
                     ) : null}
+                    {options[0].value === "phone" && (
+                      <InfoBadge content={t("number_in_international_format")} />
+                    )}
                   </Label>
                 </>
               )}

packages/features/form-builder/FormBuilderField.tsx

@@ -7,6 +7,7 @@ import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Label } from "@calcom/ui";
 import { Info } from "@calcom/ui/components/icon";
+import InfoBadge from "@calcom/web/components/ui/InfoBadge";
 
 import { Components, isValidValueProp } from "./Components";
 import { fieldTypesConfigMap } from "./fieldTypes";
@@ -126,6 +127,8 @@ const WithLabel = ({
   readOnly: boolean;
   children: React.ReactNode;
 }) => {
+  const { t } = useLocale();
+
   return (
     <div>
       {/* multiemail doesnt show label initially. It is shown on clicking CTA */}
@@ -133,11 +136,12 @@ const WithLabel = ({
       {/* Component itself managing it's label should remove these checks */}
       {field.type !== "boolean" && field.type !== "multiemail" && field.label && (
         <div className="mb-2 flex items-center">
-          <Label className="!mb-0">
+          <Label className="!mb-0 flex">
             <span>{field.label}</span>
             <span className="text-emphasis -mb-1 ml-1 text-sm font-medium leading-none">
               {!readOnly && field.required ? "*" : ""}
             </span>
+            {field.type === "phone" && <InfoBadge content={t("number_in_international_format")} />}
           </Label>
         </div>
       )}