From 0b8e3edc15580b67b77426bb022dc7f63c6a2b43 Mon Sep 17 00:00:00 2001 From: Christian Andolf Date: Tue, 17 Jun 2025 10:48:19 +0200 Subject: [PATCH] fix: now parses phone number before submitting on edit profile and signup --- .../components/Forms/Edit/Profile/index.tsx | 12 ++++++++--- .../components/Forms/Signup/index.tsx | 7 +++++-- .../EnterDetails/Payment/PaymentClient.tsx | 21 +++++-------------- apps/scandic-web/utils/phone.ts | 16 ++++++++++++++ 4 files changed, 35 insertions(+), 21 deletions(-) create mode 100644 apps/scandic-web/utils/phone.ts diff --git a/apps/scandic-web/components/Forms/Edit/Profile/index.tsx b/apps/scandic-web/components/Forms/Edit/Profile/index.tsx index ca2f63262..4b3da1ff0 100644 --- a/apps/scandic-web/components/Forms/Edit/Profile/index.tsx +++ b/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) { diff --git a/apps/scandic-web/components/Forms/Signup/index.tsx b/apps/scandic-web/components/Forms/Signup/index.tsx index 754c39f0c..930bbed70 100644 --- a/apps/scandic-web/components/Forms/Signup/index.tsx +++ b/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 ( diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx index 2ab7b28b5..8b5882c91 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx +++ b/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, diff --git a/apps/scandic-web/utils/phone.ts b/apps/scandic-web/utils/phone.ts new file mode 100644 index 000000000..351a1425b --- /dev/null +++ b/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 +}