Merged in feat/SW-1676-modify-contact-details-my-stay-anonymous (pull request #1468)

Feat/SW-1676 modify contact details my stay anonymous * feat(SW-1676): Modify guest details step 1 * feat(SW-1676) Integration to api to update guest details * feat(SW-1676) Reuse of old modal * feat(SW-1676) updated modify guest * feat(SW-1676) cleanup * feat(SW-1676) updated myStayReturnRoute to sessionStorage Approved-by: Niclas Edenvin
2025-03-07 13:41:25 +00:00
parent 2c7d72c540
commit 2509794d0c
33 changed files with 528 additions and 251 deletions
--- a/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx
@@ -0,0 +1,93 @@
+"use client"
+import { useEffect } from "react"
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import CountrySelect from "@/components/TempDesignSystem/Form/Country"
+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"
+
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+
+interface ModifyContactProps {
+  guest: BookingConfirmation["booking"]["guest"]
+  isFirstStep: boolean
+}
+
+export default function ModifyContact({
+  guest,
+  isFirstStep,
+}: ModifyContactProps) {
+  const intl = useIntl()
+  const { getValues, setValue } = useFormContext()
+
+  useEffect(() => {
+    setValue("firstName", guest.firstName ?? "")
+    setValue("lastName", guest.lastName ?? "")
+    setValue("email", guest.email ?? "")
+    setValue("phoneNumber", guest.phoneNumber ?? "")
+    setValue("countryCode", guest.countryCode ?? "")
+  }, [guest, setValue])
+
+  return (
+    <>
+      {isFirstStep ? (
+        <div className={styles.container}>
+          <div className={`${styles.row} ${styles.gridEqual}`}>
+            <Input
+              label={intl.formatMessage({ id: "First name" })}
+              maxLength={30}
+              name="firstName"
+              disabled={!!guest.firstName}
+            />
+            <Input
+              label={intl.formatMessage({ id: "Last name" })}
+              maxLength={30}
+              name="lastName"
+              disabled={!!guest.lastName}
+            />
+          </div>
+          <div className={styles.row}>
+            <CountrySelect
+              label={intl.formatMessage({ id: "Country" })}
+              name="countryCode"
+            />
+          </div>
+          <div className={styles.row}>
+            <Input
+              label={intl.formatMessage({ id: "Email" })}
+              name="email"
+              type="email"
+              registerOptions={{ required: true }}
+            />
+          </div>
+          <div className={styles.row}>
+            <Phone
+              label={intl.formatMessage({ id: "Phone number" })}
+              name="phoneNumber"
+              registerOptions={{ required: true }}
+            />
+          </div>
+        </div>
+      ) : (
+        <>
+          <Body color="uiTextHighContrast">
+            {intl.formatMessage({
+              id: "Are you sure you want to change your guest details?",
+            })}
+          </Body>
+          <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>
+          </div>
+        </>
+      )}
+    </>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/modifyContact.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/modifyContact.module.css
@@ -0,0 +1,31 @@
+.container {
+  background-color: var(--Base-Background-Primary-Normal);
+  padding: var(--Spacing-x2) var(--Spacing-x1) var(--Spacing-x3);
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.row {
+  display: grid;
+  gap: var(--Spacing-x2);
+  margin-bottom: var(--Spacing-x2);
+  width: 100%;
+}
+
+.row {
+  grid-template-columns: 1fr;
+}
+
+.row:last-child {
+  margin-bottom: 0;
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    width: 700px;
+    max-width: 100%;
+    padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x3);
+  }
+  .gridEqual {
+    grid-template-columns: 1fr 1fr;
+  }
+}