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>
</>
)}