From 6d455a3861d5160219c6a7a08a47828e7ddebf50 Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Tue, 22 Feb 2022 16:00:32 +0100 Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E2=9C=A8=20Add=20default=20cou?= =?UTF-8?q?ntry=20code=20phone?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CountryCodeSelect.tsx | 235 ++++++++++++++++++ .../PhoneNumberSettingsBody.tsx | 18 +- .../bodies/PhoneNumberSettingsBody/index.tsx | 1 + .../inputs/TextForm/TextInputContent.tsx | 5 +- packages/models/src/typebot/steps/inputs.ts | 1 + 5 files changed, 255 insertions(+), 5 deletions(-) create mode 100644 apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody/CountryCodeSelect.tsx rename apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/{ => PhoneNumberSettingsBody}/PhoneNumberSettingsBody.tsx (78%) create mode 100644 apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody/index.tsx diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody/CountryCodeSelect.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody/CountryCodeSelect.tsx new file mode 100644 index 000000000..efcc48a20 --- /dev/null +++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody/CountryCodeSelect.tsx @@ -0,0 +1,235 @@ +import { Select } from '@chakra-ui/react' +import React, { ChangeEvent } from 'react' + +type Props = { + countryCode?: string + onSelect: (countryCode: string) => void +} + +export const CountryCodeSelect = ({ countryCode, onSelect }: Props) => { + const handleOnChange = (e: ChangeEvent) => { + onSelect(e.target.value) + } + return ( + + ) +} diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody/PhoneNumberSettingsBody.tsx similarity index 78% rename from apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody.tsx rename to apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody/PhoneNumberSettingsBody.tsx index 4927a62d0..f1b136467 100644 --- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody.tsx +++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody/PhoneNumberSettingsBody.tsx @@ -2,12 +2,13 @@ import { FormLabel, Stack } from '@chakra-ui/react' import { DebouncedInput } from 'components/shared/DebouncedInput' import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton' import { VariableSearchInput } from 'components/shared/VariableSearchInput' -import { EmailInputOptions, Variable } from 'models' +import { PhoneNumberInputOptions, Variable } from 'models' import React from 'react' +import { CountryCodeSelect } from './CountryCodeSelect' type PhoneNumberSettingsBodyProps = { - options: EmailInputOptions - onOptionsChange: (options: EmailInputOptions) => void + options: PhoneNumberInputOptions + onOptionsChange: (options: PhoneNumberInputOptions) => void } export const PhoneNumberSettingsBody = ({ @@ -22,6 +23,8 @@ export const PhoneNumberSettingsBody = ({ onOptionsChange({ ...options, variableId: variable?.id }) const handleRetryMessageChange = (retryMessageContent: string) => onOptionsChange({ ...options, retryMessageContent }) + const handleDefaultCountryChange = (defaultCountryCode: string) => + onOptionsChange({ ...options, defaultCountryCode }) return ( @@ -45,6 +48,15 @@ export const PhoneNumberSettingsBody = ({ onChange={handleButtonLabelChange} /> + + + Default country: + + + Retry message: diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody/index.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody/index.tsx new file mode 100644 index 000000000..c5b326936 --- /dev/null +++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody/index.tsx @@ -0,0 +1 @@ +export { PhoneNumberSettingsBody } from './PhoneNumberSettingsBody' diff --git a/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextInputContent.tsx b/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextInputContent.tsx index 1f21a2000..6929b1f0d 100644 --- a/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextInputContent.tsx +++ b/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextInputContent.tsx @@ -13,7 +13,7 @@ import React, { useEffect, useRef, } from 'react' -import PhoneInput, { Value } from 'react-phone-number-input' +import PhoneInput, { Value, Country } from 'react-phone-number-input' type TextInputProps = { step: @@ -113,8 +113,9 @@ export const TextInput = ({ step, defaultValue, onChange }: TextInputProps) => { onChange={handlePhoneNumberChange} defaultValue={defaultValue} placeholder={ - step.options?.labels?.placeholder ?? 'Your phone number...' + step.options.labels.placeholder ?? 'Your phone number...' } + defaultCountry={step.options.defaultCountryCode as Country} /> ) } diff --git a/packages/models/src/typebot/steps/inputs.ts b/packages/models/src/typebot/steps/inputs.ts index 1439bd206..2b57bc57d 100644 --- a/packages/models/src/typebot/steps/inputs.ts +++ b/packages/models/src/typebot/steps/inputs.ts @@ -100,6 +100,7 @@ export type UrlInputOptions = OptionBase & { export type PhoneNumberInputOptions = OptionBase & { labels: { placeholder: string; button: string } retryMessageContent: string + defaultCountryCode?: string } export type TextInputOptions = OptionBase &