diff --git a/apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts b/apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts index e7adbaceafd..ad5cb9ae964 100644 --- a/apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts +++ b/apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts @@ -29,4 +29,4 @@ export const parseReactBotProps = ({ typebot, apiHost }: BotProps) => { return `${typebotLine} ${apiHostLine}` } -export const typebotImportUrl = `https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0.10/dist/web.js` +export const typebotImportUrl = `https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0.13/dist/web.js` diff --git a/packages/js/package.json b/packages/js/package.json index d92e21d57cf..c23e06ac139 100644 --- a/packages/js/package.json +++ b/packages/js/package.json @@ -1,6 +1,6 @@ { "name": "@typebot.io/js", - "version": "0.0.12", + "version": "0.0.13", "description": "Javascript library to display typebots on your website", "type": "module", "main": "dist/index.js", diff --git a/packages/js/src/assets/index.css b/packages/js/src/assets/index.css index a849e710b13..5423a4b7f16 100644 --- a/packages/js/src/assets/index.css +++ b/packages/js/src/assets/index.css @@ -222,3 +222,8 @@ textarea { background-color: var(--typebot-host-bubble-bg-color); color: var(--typebot-host-bubble-color); } + +.typebot-country-select { + color: var(--typebot-input-color); + background-color: var(--typebot-input-bg-color); +} diff --git a/packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx b/packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx index df38cde025f..32955b4ffe1 100644 --- a/packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx +++ b/packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx @@ -4,6 +4,7 @@ import { InputSubmitContent } from '@/types' import { isMobile } from '@/utils/isMobileSignal' import type { PhoneNumberInputBlock } from 'models' import { createSignal, For, onMount } from 'solid-js' +import { isEmpty } from 'utils' import { phoneCountries } from 'utils/phoneCountries' type PhoneInputProps = { @@ -14,7 +15,12 @@ type PhoneInputProps = { } export const PhoneInput = (props: PhoneInputProps) => { - const [selectedCountryCode, setSelectedCountryCode] = createSignal('INT') + // eslint-disable-next-line solid/reactivity + const defaultCountryCode = props.block.options.defaultCountryCode + + const [selectedCountryCode, setSelectedCountryCode] = createSignal( + isEmpty(defaultCountryCode) ? 'INT' : defaultCountryCode + ) const [inputValue, setInputValue] = createSignal(props.defaultValue ?? '') let inputRef: HTMLInputElement | undefined @@ -32,7 +38,15 @@ export const PhoneInput = (props: PhoneInputProps) => { inputValue() !== '' && inputRef?.reportValidity() const submit = () => { - if (checkIfInputIsValid()) props.onSubmit({ value: inputValue() }) + const selectedCountryDialCode = phoneCountries.find( + (country) => country.code === selectedCountryCode() + )?.dial_code + if (checkIfInputIsValid()) + props.onSubmit({ + value: inputValue().startsWith('+') + ? inputValue() + : `${selectedCountryDialCode ?? ''}${inputValue()}`, + }) } const submitWhenEnter = (e: KeyboardEvent) => { @@ -62,7 +76,7 @@ export const PhoneInput = (props: PhoneInputProps) => {