🚸 (js) Improve phone number parsing

packages/emails/package.json

@@ -6,8 +6,8 @@
   "types": "./src/index.ts",
   "scripts": {
     "preview": "concurrently \"pnpm run watch\" \"sleep 5 && pnpm run serve\" -n \"watch,serve\" -c \"bgBlue.bold,bgMagenta.bold\"",
-    "watch": "tsx watch ./preview.tsx --clear-screen=false",
+    "watch": "tsx watch ./src/preview.tsx --clear-screen=false",
-    "serve": "http-server dist -a localhost -p 3223 -o",
+    "serve": "http-server dist -a localhost -p 3223 -o -c-1",
     "lint": "eslint \"src/**/*.ts*\""
   },
   "keywords": [],

packages/emails/src/emails/DefaultBotNotificationEmail.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Head, Text, Button } from '../components'
 import {
   Mjml,
@@ -25,12 +24,11 @@ export const DefaultBotNotificationEmail = ({
     <MjmlBody width={600}>
       <MjmlSection padding="32px" cssClass="smooth" border="1px solid #e2e8f0">
         <MjmlColumn>
-          <Text padding="0">Your typebot has collected a new response! 🥳</Text>
+          {Object.keys(answers).map((key, index) => {
-          {Object.keys(answers).map((key) => {
             const isEmail = emailRegex.test(answers[key])
 
             return (
-              <Text key={key}>
+              <Text key={key} paddingTop={index === 0 ? 0 : undefined}>
                 <b>{key}</b>:{' '}
                 {isEmail ? (
                   <a href={`mailto:${answers[key]}`}>{answers[key]}</a>

packages/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx

@@ -25,10 +25,31 @@ export const PhoneInput = (props: PhoneInputProps) => {
 
   const handleInput = (inputValue: string | undefined) => {
     setInputValue(inputValue as string)
-    const matchedCountry = phoneCountries.find(
+    if (
-      (country) =>
+      (inputValue === '' || inputValue === '+') &&
-        country.dial_code === inputValue &&
+      selectedCountryCode() !== 'INT'
-        country.code !== selectedCountryCode()
+    )
+      setSelectedCountryCode('INT')
+    const matchedCountry =
+      inputValue?.startsWith('+') &&
+      inputValue.length > 2 &&
+      phoneCountries.reduce<typeof phoneCountries[number] | null>(
+        (matchedCountry, country) => {
+          if (
+            !country?.dial_code ||
+            (matchedCountry !== null && !matchedCountry.dial_code)
+          ) {
+            return matchedCountry
+          }
+          if (
+            inputValue?.startsWith(country.dial_code) &&
+            country.dial_code.length > (matchedCountry?.dial_code.length ?? 0)
+          ) {
+            return country
+          }
+          return matchedCountry
+        },
+        null
       )
     if (matchedCountry) setSelectedCountryCode(matchedCountry.code)
   }

packages/react/package.json

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

packages/utils/phoneCountries.ts

@@ -1481,4 +1481,4 @@ export const phoneCountries = [
     code: 'ZW',
     dial_code: '+263',
   },
-]
+] as const