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 { useIntl } from "react-intl"
import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages" 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 { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Modal from "@scandic-hotels/design-system/Modal" import Modal from "@scandic-hotels/design-system/Modal"
import { ModalContentWithActions } from "@scandic-hotels/design-system/Modal/ModalContentWithActions" import { ModalContentWithActions } from "@scandic-hotels/design-system/Modal/ModalContentWithActions"
@@ -62,10 +63,14 @@ export default function GuestDetails({
defaultValues: { defaultValues: {
firstName: guest.firstName, firstName: guest.firstName,
lastName: guest.lastName, lastName: guest.lastName,
email: guest.email, email: "",
phoneNumber: guest.phoneNumber, 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, countryCode: guest.countryCode,
}, },
mode: "all",
reValidateMode: "onChange",
}) })
const isFirstStep = currentStep === MODAL_STEPS.INITIAL const isFirstStep = currentStep === MODAL_STEPS.INITIAL
@@ -116,7 +121,7 @@ export default function GuestDetails({
refId, refId,
guest: { guest: {
email: data.email, email: data.email,
phoneNumber: data.phoneNumber, phoneNumber: formatPhoneNumber(data.phoneNumber, data.phoneNumberCC),
countryCode: data.countryCode, countryCode: data.countryCode,
}, },
language: lang, language: lang,

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

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

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

@@ -1,10 +1,27 @@
import { z } from "zod" 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({ export const modifyContactSchema = z.object({
firstName: z.string(), firstName: z.string(),
lastName: z.string(), lastName: z.string(),
email: z.string().email(), email: z
phoneNumber: z.string(), .string()
.min(1, editGuestDetailsErrors.EMAIL_REQUIRED)
.email(editGuestDetailsErrors.EMAIL_INVALID),
phoneNumber: phoneValidator(
editGuestDetailsErrors.PHONE_REQUIRED,
editGuestDetailsErrors.PHONE_REQUESTED
),
phoneNumberCC: z.string(),
countryCode: 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 type { IntlShape } from "react-intl"
import { editGuestDetailsErrors } from "@/types/components/hotelReservation/myStay/modifyContact"
export function getErrorMessage(intl: IntlShape, errorCode?: string) { export function getErrorMessage(intl: IntlShape, errorCode?: string) {
switch (errorCode) { switch (errorCode) {
case ancillaryError.MIN_QUANTITY_NOT_REACHED: case ancillaryError.MIN_QUANTITY_NOT_REACHED:
@@ -72,11 +74,13 @@ export function getErrorMessage(intl: IntlShape, errorCode?: string) {
case multiroomErrors.EMAIL_REQUIRED: case multiroomErrors.EMAIL_REQUIRED:
case roomOneErrors.EMAIL_REQUIRED: case roomOneErrors.EMAIL_REQUIRED:
case signupErrors.EMAIL_REQUIRED: case signupErrors.EMAIL_REQUIRED:
case editGuestDetailsErrors.EMAIL_REQUIRED:
return intl.formatMessage({ return intl.formatMessage({
id: "error.emailRequired", id: "error.emailRequired",
defaultMessage: "Email address is required", defaultMessage: "Email address is required",
}) })
case signupErrors.EMAIL_INVALID: case signupErrors.EMAIL_INVALID:
case editGuestDetailsErrors.EMAIL_INVALID:
return intl.formatMessage({ return intl.formatMessage({
id: "error.emailInvalid", id: "error.emailInvalid",
defaultMessage: "Email address is invalid", defaultMessage: "Email address is invalid",
@@ -93,6 +97,7 @@ export function getErrorMessage(intl: IntlShape, errorCode?: string) {
case multiroomErrors.PHONE_REQUIRED: case multiroomErrors.PHONE_REQUIRED:
case roomOneErrors.PHONE_REQUIRED: case roomOneErrors.PHONE_REQUIRED:
case editProfileErrors.PHONE_REQUIRED: case editProfileErrors.PHONE_REQUIRED:
case editGuestDetailsErrors.PHONE_REQUIRED:
return intl.formatMessage({ return intl.formatMessage({
id: "error.phoneRequired", id: "error.phoneRequired",
defaultMessage: "Phone is required", defaultMessage: "Phone is required",
@@ -107,6 +112,7 @@ export function getErrorMessage(intl: IntlShape, errorCode?: string) {
case multiroomErrors.PHONE_REQUESTED: case multiroomErrors.PHONE_REQUESTED:
case roomOneErrors.PHONE_REQUESTED: case roomOneErrors.PHONE_REQUESTED:
case editProfileErrors.PHONE_REQUESTED: case editProfileErrors.PHONE_REQUESTED:
case editGuestDetailsErrors.PHONE_REQUESTED:
return intl.formatMessage({ return intl.formatMessage({
id: "error.phoneRequested", id: "error.phoneRequested",
defaultMessage: "Please enter a valid phone number", defaultMessage: "Please enter a valid phone number",