Merged in fix/parse-phonenumber-before-submit (pull request #2376)

fix: now parses phone number before submitting on edit profile and signup

Approved-by: Linus Flood

apps/scandic-web/components/Forms/Edit/Profile/index.tsx

@@ -5,7 +5,11 @@ import { useEffect, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { type Lang, langToApiLang } from "@/constants/languages"
+import {
+  getDefaultCountryFromLang,
+  type Lang,
+  langToApiLang,
+} from "@/constants/languages"
 import { logout } from "@/constants/routes/handleAuth"
 import { profile } from "@/constants/routes/myPages"
 import { trpc } from "@/lib/trpc/client"
@@ -17,6 +21,7 @@ import Button from "@/components/TempDesignSystem/Button"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import usePhoneNumberParsing from "@/hooks/usePhoneNumberParsing"
+import { formatPhoneNumber } from "@/utils/phone"
 
 import FormContent from "./FormContent"
 import { type EditProfileSchema, editProfileSchema } from "./schema"
@@ -57,7 +62,7 @@ export default function Form({ user }: EditFormProps) {
       email: user.email,
       language: user.language ?? langToApiLang[lang],
       phoneNumber: phoneNumber,
-      phoneNumberCC: phoneNumberCC,
+      phoneNumberCC: phoneNumberCC || getDefaultCountryFromLang(lang),
       password: "",
       newPassword: "",
       retypeNewPassword: "",
@@ -71,7 +76,8 @@ export default function Form({ user }: EditFormProps) {
 
   async function handleSubmit(data: EditProfileSchema) {
     const isPasswordChanged = !!data.newPassword
-    const response = await editProfile(data)
+    const phoneNumber = formatPhoneNumber(data.phoneNumber, data.phoneNumberCC)
+    const response = await editProfile({ ...data, phoneNumber })
     switch (response.status) {
       case Status.error:
         if (response.issues?.length) {

apps/scandic-web/components/Forms/Signup/index.tsx

@@ -9,6 +9,7 @@ import { useIntl } from "react-intl"
 import { Button } from "@scandic-hotels/design-system/Button"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { getDefaultCountryFromLang } from "@/constants/languages"
 import {
   membershipTermsAndConditions,
   privacyPolicy,
@@ -25,6 +26,7 @@ import Link from "@/components/TempDesignSystem/Link"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useFormTracking } from "@/components/TrackingSDK/hooks"
 import useLang from "@/hooks/useLang"
+import { formatPhoneNumber } from "@/utils/phone"
 
 import { type SignUpSchema, signUpSchema } from "./schema"
 
@@ -73,7 +75,7 @@ export default function SignupForm({ title }: SignUpFormProps) {
       lastName: "",
       email: "",
       phoneNumber: "",
-      phoneNumberCC: "",
+      phoneNumberCC: getDefaultCountryFromLang(lang),
       dateOfBirth: "",
       address: {
         countryCode: "",
@@ -94,7 +96,8 @@ export default function SignupForm({ title }: SignUpFormProps) {
   useFormTracking("signup", subscribe, control)
 
   async function onSubmit(data: SignUpSchema) {
-    signup.mutate({ ...data, language: lang })
+    const phoneNumber = formatPhoneNumber(data.phoneNumber, data.phoneNumberCC)
+    signup.mutate({ ...data, phoneNumber, language: lang })
   }
 
   return (

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx

@@ -2,7 +2,6 @@
 
 import { zodResolver } from "@hookform/resolvers/zod"
 import { cx } from "class-variance-authority"
-import { type CountryCode, parsePhoneNumberFromString } from "libphonenumber-js"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { useCallback, useEffect, useState } from "react"
 import { Label } from "react-aria-components"
@@ -33,6 +32,7 @@ import { useAvailablePaymentOptions } from "@/hooks/booking/useAvailablePaymentO
 import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
 import useLang from "@/hooks/useLang"
 import useStickyPosition from "@/hooks/useStickyPosition"
+import { formatPhoneNumber } from "@/utils/phone"
 import { trackPaymentEvent } from "@/utils/tracking"
 import { trackEvent } from "@/utils/tracking/base"
 import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay"
@@ -391,21 +391,10 @@ export default function PaymentClient({
             rateCode = booking.rooms[idx].rateCode
           }
 
-          let phoneNumber = room.guest.phoneNumber
-          const phoneNumberCC =
-            room.guest.phoneNumberCC.toUpperCase() as CountryCode
-          let parsedPhonenumber
-          if (phoneNumberCC) {
-            parsedPhonenumber = parsePhoneNumberFromString(
-              phoneNumber,
-              phoneNumberCC
-            )
-          } else {
-            parsedPhonenumber = parsePhoneNumberFromString(phoneNumber)
-          }
-          if (parsedPhonenumber?.isValid()) {
-            phoneNumber = parsedPhonenumber.number
-          }
+          const phoneNumber = formatPhoneNumber(
+            room.guest.phoneNumber,
+            room.guest.phoneNumberCC
+          )
 
           return {
             adults: room.adults,

apps/scandic-web/utils/phone.ts

@@ -0,0 +1,16 @@
+import parsePhoneNumberFromString, { type CountryCode } from "libphonenumber-js"
+
+export function formatPhoneNumber(phoneNumber: string, phoneNumberCC: string) {
+  const parsedPhonenumber = phoneNumberCC.length
+    ? parsePhoneNumberFromString(
+        phoneNumber,
+        phoneNumberCC.toUpperCase() as CountryCode
+      )
+    : parsePhoneNumberFromString(phoneNumber)
+
+  if (parsedPhonenumber?.isValid()) {
+    return parsedPhonenumber.number
+  }
+
+  return phoneNumber
+}