🐛 (phone) Fix phone number parsing and default country

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/[email protected].10/dist/web.js`
+export const typebotImportUrl = `https://cdn.jsdelivr.net/npm/@typebot.io/[email protected].13/dist/web.js`

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",

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);
+}

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) => {
       <div class="flex flex-1">
         <select
           onChange={selectNewCountryCode}
-          class="w-12 pl-2 focus:outline-none"
+          class="w-12 pl-2 focus:outline-none rounded-lg typebot-country-select"
         >
           <option selected>
             {

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",