🚸 (phone) Improve phone input behavior and validation

Now accepting landline phone numbers. Consistent select UI on every browser. Auto focus on country select.

apps/viewer/package.json

@@ -23,11 +23,11 @@
     "db": "workspace:*",
     "google-spreadsheet": "3.3.0",
     "got": "12.5.3",
+    "libphonenumber-js": "^1.10.21",
     "next": "13.1.6",
     "nextjs-cors": "^2.1.2",
     "nodemailer": "6.9.1",
     "openai": "^3.2.1",
-    "phone": "^3.1.34",
     "qs": "6.11.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/viewer/src/features/blocks/inputs/phone/api/utils/formatPhoneNumber.ts

@@ -1,4 +1,4 @@
-import phone from 'phone'
+import { parsePhoneNumber } from 'libphonenumber-js'
 
 export const formatPhoneNumber = (phoneNumber: string) =>
-  phone(phoneNumber).phoneNumber
+  parsePhoneNumber(phoneNumber).formatInternational()

apps/viewer/src/features/blocks/inputs/phone/api/utils/validatePhoneNumber.ts

@@ -1,4 +1,4 @@
-import { phone } from 'phone'
+import { isValidPhoneNumber } from 'libphonenumber-js'
 
 export const validatePhoneNumber = (phoneNumber: string) =>
-  phone(phoneNumber).isValid
+  isValidPhoneNumber(phoneNumber)

apps/viewer/src/features/chat/api/utils/continueBotFlow.ts

@@ -50,13 +50,13 @@ export const continueBotFlow =
         message: 'Current block is not an input block',
       })
 
+    if (reply && !isReplyValid(reply, block)) return parseRetryMessage(block)
+
     const formattedReply = formatReply(reply, block.type)
 
     if (!formattedReply && !canSkip(block.type)) {
       return parseRetryMessage(block)
     }
-    if (formattedReply && !isReplyValid(formattedReply, block))
-      return parseRetryMessage(block)
 
     const newSessionState = await processAndSaveAnswer(
       state,