scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: allow any type of phone number

Browse Source
This commit is contained in:
Simon Emanuelsson
2025-05-22 17:21:13 +02:00
committed by Michael Zetterberg
parent 79e669020a
commit 9580281421
22 changed files with 400 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx
View File

@@ -1,5 +1,6 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { parsePhoneNumberFromString } from "libphonenumber-js"
import { useCallback, useEffect, useMemo } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
@@ -52,6 +53,14 @@ export default function Details() {
[idx, rooms]
)
const initialPhoneNumber = initialData.phoneNumber
const parsedInitialPhoneNumber = initialPhoneNumber
? parsePhoneNumberFromString(initialPhoneNumber)
: undefined
let initialPhoneNumberCC = initialData.phoneNumberCC
if (parsedInitialPhoneNumber && !initialPhoneNumberCC) {
initialPhoneNumberCC = parsedInitialPhoneNumber.country ?? ""
}
const methods = useForm({
defaultValues: {
countryCode: initialData.countryCode,
@@ -60,7 +69,10 @@ export default function Details() {
join: initialData.join,
lastName: initialData.lastName,
membershipNo: initialData.membershipNo,
phoneNumber: initialData.phoneNumber,
phoneNumber: parsedInitialPhoneNumber?.isValid()
? parsedInitialPhoneNumber?.number
: initialPhoneNumber,
phoneNumberCC: initialPhoneNumberCC,
specialRequest: {
comment: room.specialRequest.comment,
},
@@ -89,7 +101,7 @@ export default function Details() {
}
}, [handleSubmit, isValid, setIncomplete, updateDetails])
useEffect(updateDetailsStore, [methods.formState.isValid, updateDetailsStore])
useEffect(updateDetailsStore, [updateDetailsStore])
// Trigger validation of the room manually when another room changes its data.
// Only do it if the field has a value, to avoid error states before the user

1
apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/schema.ts
View File

@@ -50,6 +50,7 @@ export function getMultiroomDetailsSchema(
multiroomErrors.PHONE_REQUIRED,
multiroomErrors.PHONE_REQUESTED
),
phoneNumberCC: z.string(),
membershipNo: z
.string()
.optional()

22
apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx
View File

@@ -1,5 +1,6 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { parsePhoneNumberFromString } from "libphonenumber-js"
import { useCallback, useEffect } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
@@ -10,8 +11,6 @@ import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import PhoneCountryCode from "@/components/TempDesignSystem/Form/Phone/CountryCode"
import PhoneNumber from "@/components/TempDesignSystem/Form/Phone/Number"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { useRoomContext } from "@/contexts/Details/Room"
@@ -45,6 +44,14 @@ export default function Details({ user }: DetailsProps) {
const memberRate = "member" in room.roomRate ? room.roomRate.member : null
const initialPhoneNumber = user?.phoneNumber || initialData.phoneNumber
const parsedInitialPhoneNumber = initialPhoneNumber
? parsePhoneNumberFromString(initialPhoneNumber)
: undefined
let initialPhoneNumberCC = initialData.phoneNumberCC
if (parsedInitialPhoneNumber && !initialPhoneNumberCC) {
initialPhoneNumberCC = parsedInitialPhoneNumber.country ?? ""
}
const methods = useForm({
defaultValues: {
countryCode: user?.address?.countryCode || initialData.countryCode,
@@ -55,7 +62,10 @@ export default function Details({ user }: DetailsProps) {
join: initialData.join,
lastName: user?.lastName || initialData.lastName,
membershipNo: initialData.membershipNo,
phoneNumber: user?.phoneNumber || initialData.phoneNumber,
phoneNumber: parsedInitialPhoneNumber?.isValid()
? parsedInitialPhoneNumber?.number
: initialPhoneNumber,
phoneNumberCC: initialPhoneNumberCC,
zipCode: "zipCode" in initialData ? initialData.zipCode : undefined,
specialRequest: {
comment: room.specialRequest.comment,
@@ -92,7 +102,7 @@ export default function Details({ user }: DetailsProps) {
}
}, [handleSubmit, isValid, onSubmit, setIncomplete])
useEffect(updateDetailsStore, [methods.formState.isValid, updateDetailsStore])
useEffect(updateDetailsStore, [updateDetailsStore])
return (
<FormProvider {...methods}>
@@ -161,10 +171,6 @@ export default function Details({ user }: DetailsProps) {
readOnly={!!user}
registerOptions={{ required: true, onBlur: updateDetailsStore }}
/>
<div>
<PhoneCountryCode />
<PhoneNumber />
</div>
{user ? null : (
<div className={styles.fullWidth}>
<Signup

2
apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/schema.ts
View File

@@ -42,6 +42,7 @@ export const baseDetailsSchema = z.object({
roomOneErrors.PHONE_REQUIRED,
roomOneErrors.PHONE_REQUESTED
),
phoneNumberCC: z.string(),
specialRequest: specialRequestSchema,
})
@@ -99,6 +100,7 @@ export const signedInDetailsSchema = z.object({
lastName: z.string().default(""),
membershipNo: z.string().default(""),
phoneNumber: z.string().default(""),
phoneNumberCC: z.string().default(""),
join: z
.boolean()
.optional()

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

@@ -2,6 +2,7 @@
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"
@@ -389,6 +390,23 @@ export default function PaymentClient({
} else {
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
}
return {
adults: room.adults,
bookingCode: room.roomRate.bookingCode,
@@ -403,7 +421,7 @@ export default function PaymentClient({
firstName: room.guest.firstName,
lastName: room.guest.lastName,
membershipNumber: room.guest.membershipNo,
phoneNumber: room.guest.phoneNumber,
phoneNumber,
// Only allowed for room one
...(idx === 0 && {
dateOfBirth:

4
apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx
View File

@@ -4,8 +4,8 @@ import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DeprecatedPhone from "@/components/TempDesignSystem/Form/DeprecatedPhone"
import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./modifyContact.module.css"
@@ -73,7 +73,7 @@ export default function ModifyContact({
/>
</div>
<div className={styles.row}>
<Phone
<DeprecatedPhone
label={intl.formatMessage({
defaultMessage: "Phone number",
})}