fix: phone-number-input (#12266)
This commit is contained in:
parent
2094d59856
commit
4524d722f6
|
@ -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":
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
)}
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
|
Loading…
Reference in New Issue
Block a user