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

Merged in fix/clear-guest-form (pull request #3168)

Browse Source 
fix(STAY-120): Avoid prefilling edit guest details form in MyStay

* fix: Avoid prefilling edit guest details form in MyStay

fix: Avoid prefilling edit guest details form in MyStay


Approved-by: Erik Tiekstra
Approved-by: Elin Svedin
Approved-by: Linus Flood
This commit is contained in:
Christel Westerberg
2025-11-19 08:11:26 +00:00
parent 01901ab02e
commit a6a259c739
4 changed files with 62 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx
View File

@@ -7,6 +7,7 @@ import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages"
import { formatPhoneNumber } from "@scandic-hotels/common/utils/phone"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Modal from "@scandic-hotels/design-system/Modal"
import { ModalContentWithActions } from "@scandic-hotels/design-system/Modal/ModalContentWithActions"
@@ -62,10 +63,14 @@ export default function GuestDetails({
defaultValues: {
firstName: guest.firstName,
lastName: guest.lastName,
email: guest.email,
phoneNumber: guest.phoneNumber,
email: "",
phoneNumber: "",
// Default country code to guest country code since we don't have anything better to default to
phoneNumberCC: guest.countryCode.toLowerCase(),
countryCode: guest.countryCode,
},
mode: "all",
reValidateMode: "onChange",
})
const isFirstStep = currentStep === MODAL_STEPS.INITIAL
@@ -116,7 +121,7 @@ export default function GuestDetails({
refId,
guest: {
email: data.email,
phoneNumber: data.phoneNumber,
phoneNumber: formatPhoneNumber(data.phoneNumber, data.phoneNumberCC),
countryCode: data.countryCode,
},
language: lang,

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

@@ -1,12 +1,14 @@
"use client"
import { useEffect } from "react"
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import { getDefaultCountryFromLang } from "@scandic-hotels/common/utils/phone"
import Body from "@scandic-hotels/design-system/Body"
import {
formatPhoneNumber,
getDefaultCountryFromLang,
} from "@scandic-hotels/common/utils/phone"
import CountrySelect from "@scandic-hotels/design-system/Form/Country"
import Phone from "@scandic-hotels/design-system/Form/Phone"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Input from "@/components/TempDesignSystem/Form/Input"
import useLang from "@/hooks/useLang"
@@ -30,17 +32,13 @@ export default function ModifyContact({
const lang = useLang()
const {
getValues,
setValue,
formState: { errors },
} = useFormContext()
useEffect(() => {
setValue("firstName", guest.firstName ?? "")
setValue("lastName", guest.lastName ?? "")
setValue("email", guest.email ?? "")
setValue("phoneNumber", guest.phoneNumber ?? "")
setValue("countryCode", guest.countryCode ?? "")
}, [guest, setValue])
const phoneNumber = formatPhoneNumber(
getValues("phoneNumber"),
getValues("phoneNumberCC")
)
return (
<>
@@ -115,19 +113,27 @@ export default function ModifyContact({
</div>
) : (
<>
<Body color="uiTextHighContrast">
{intl.formatMessage({
id: "myStay.modifyContact.confirmationMessage",
defaultMessage:
"Are you sure you want to change your guest details?",
})}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "myStay.modifyContact.confirmationMessage",
defaultMessage:
"Are you sure you want to change your guest details?",
})}
</p>
</Typography>
<div className={styles.container}>
<Body color="uiTextHighContrast" textTransform="bold">
{getValues("firstName")} {getValues("lastName")}
</Body>
<Body color="uiTextHighContrast">{getValues("email")}</Body>
<Body color="uiTextHighContrast">{getValues("phoneNumber")}</Body>
<Typography variant="Body/Paragraph/mdBold">
<p>
{getValues("firstName")} {getValues("lastName")}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>{getValues("email")}</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>{phoneNumber}</p>
</Typography>
</div>
</>
)}

21
apps/scandic-web/types/components/hotelReservation/myStay/modifyContact.ts
View File

@@ -1,10 +1,27 @@
import { z } from "zod"
import { phoneValidator } from "@scandic-hotels/common/utils/zod/phoneValidator"
export const editGuestDetailsErrors = {
EMAIL_REQUIRED: "EMAIL_REQUIRED",
EMAIL_INVALID: "EMAIL_INVALID",
PHONE_REQUIRED: "PHONE_REQUIRED",
PHONE_REQUESTED: "PHONE_REQUESTED",
} as const
export const modifyContactSchema = z.object({
firstName: z.string(),
lastName: z.string(),
email: z.string().email(),
phoneNumber: z.string(),
email: z
.string()
.min(1, editGuestDetailsErrors.EMAIL_REQUIRED)
.email(editGuestDetailsErrors.EMAIL_INVALID),
phoneNumber: phoneValidator(
editGuestDetailsErrors.PHONE_REQUIRED,
editGuestDetailsErrors.PHONE_REQUESTED
),
phoneNumberCC: z.string(),
countryCode: z.string(),
})

6
apps/scandic-web/utils/getErrorMessage.ts
View File

@@ -12,6 +12,8 @@ import { ancillaryError } from "@/components/HotelReservation/MyStay/Ancillaries
import type { IntlShape } from "react-intl"
import { editGuestDetailsErrors } from "@/types/components/hotelReservation/myStay/modifyContact"
export function getErrorMessage(intl: IntlShape, errorCode?: string) {
switch (errorCode) {
case ancillaryError.MIN_QUANTITY_NOT_REACHED:
@@ -72,11 +74,13 @@ export function getErrorMessage(intl: IntlShape, errorCode?: string) {
case multiroomErrors.EMAIL_REQUIRED:
case roomOneErrors.EMAIL_REQUIRED:
case signupErrors.EMAIL_REQUIRED:
case editGuestDetailsErrors.EMAIL_REQUIRED:
return intl.formatMessage({
id: "error.emailRequired",
defaultMessage: "Email address is required",
})
case signupErrors.EMAIL_INVALID:
case editGuestDetailsErrors.EMAIL_INVALID:
return intl.formatMessage({
id: "error.emailInvalid",
defaultMessage: "Email address is invalid",
@@ -93,6 +97,7 @@ export function getErrorMessage(intl: IntlShape, errorCode?: string) {
case multiroomErrors.PHONE_REQUIRED:
case roomOneErrors.PHONE_REQUIRED:
case editProfileErrors.PHONE_REQUIRED:
case editGuestDetailsErrors.PHONE_REQUIRED:
return intl.formatMessage({
id: "error.phoneRequired",
defaultMessage: "Phone is required",
@@ -107,6 +112,7 @@ export function getErrorMessage(intl: IntlShape, errorCode?: string) {
case multiroomErrors.PHONE_REQUESTED:
case roomOneErrors.PHONE_REQUESTED:
case editProfileErrors.PHONE_REQUESTED:
case editGuestDetailsErrors.PHONE_REQUESTED:
return intl.formatMessage({
id: "error.phoneRequested",
defaultMessage: "Please enter a valid phone number",