Merged in feat/my-stay-masking (pull request #2116)

Mask values on my-stay and receipt pages SW-2788

* Mask values on my-stay and receipt pages


Approved-by: Joakim Jäderberg

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/my-stay/page.tsx

@@ -34,6 +34,7 @@ import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
 import { setLang } from "@/i18n/serverContext"
 import MyStayProvider from "@/providers/MyStay"
+import * as maskValue from "@/utils/maskValue"
 import { parseRefId } from "@/utils/refId"
 import { isValidSession } from "@/utils/session"
 import { getCurrentWebUrl } from "@/utils/url"
@@ -42,6 +43,8 @@ import styles from "./page.module.css"
 
 import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 import type { LangParams, PageArgs } from "@/types/params"
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+import type { SafeUser } from "@/types/user"
 
 export default async function MyStay({
   params,
@@ -174,9 +177,31 @@ export default async function MyStay({
 
     promoUrl.searchParams.set("hotel", hotel.operaId)
 
+    const maskedBookingConfirmation = {
+      ...bookingConfirmation,
+      booking: {
+        ...bookingConfirmation.booking,
+        guest: {
+          ...bookingConfirmation.booking.guest,
+          email: maskValue.email(bookingConfirmation.booking.guest.email),
+          phoneNumber: maskValue.phone(
+            bookingConfirmation.booking.guest.phoneNumber ?? ""
+          ),
+        },
+      },
+    } satisfies BookingConfirmation
+
+    const maskedUser = user
+      ? ({
+          ...user,
+          email: maskValue.email(user.email),
+          phoneNumber: maskValue.phone(user.phoneNumber ?? ""),
+        } satisfies SafeUser)
+      : null
+
     return (
       <MyStayProvider
-        bookingConfirmation={bookingConfirmation}
+        bookingConfirmation={maskedBookingConfirmation}
         breakfastPackages={breakfastPackages}
         lang={params.lang}
         linkedReservationsPromise={linkedReservationsPromise}
@@ -205,13 +230,13 @@ export default async function MyStay({
               <Ancillaries
                 ancillariesPromise={ancillaryPackagesPromise}
                 packages={breakfastPackages}
-                user={user}
+                user={maskedUser}
                 savedCreditCards={savedCreditCards}
               />
             )}
 
-            <SingleRoom user={user} />
-            <MultiRoom user={user} />
+            <SingleRoom user={maskedUser} />
+            <MultiRoom user={maskedUser} />
 
             <BookingSummary hotel={hotel} />
             <Promo

apps/scandic-web/app/[lang]/webview/hotelreservation/my-stay/page.tsx

@@ -34,6 +34,7 @@ import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
 import { setLang } from "@/i18n/serverContext"
 import MyStayProvider from "@/providers/MyStay"
+import * as maskValue from "@/utils/maskValue"
 import { parseRefId } from "@/utils/refId"
 import { isValidSession } from "@/utils/session"
 import { getCurrentWebUrl } from "@/utils/url"
@@ -42,6 +43,8 @@ import styles from "./page.module.css"
 
 import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 import type { LangParams, PageArgs } from "@/types/params"
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+import type { SafeUser } from "@/types/user"
 
 export default async function MyStay({
   params,
@@ -175,11 +178,33 @@ export default async function MyStay({
       ? new URL(getCurrentWebUrl({ path: "/", lang }))
       : new URL(`${baseUrl}/${lang}/`)
 
+    const maskedBookingConfirmation = {
+      ...bookingConfirmation,
+      booking: {
+        ...bookingConfirmation.booking,
+        guest: {
+          ...bookingConfirmation.booking.guest,
+          email: maskValue.email(bookingConfirmation.booking.guest.email),
+          phoneNumber: maskValue.phone(
+            bookingConfirmation.booking.guest.phoneNumber ?? ""
+          ),
+        },
+      },
+    } satisfies BookingConfirmation
+
+    const maskedUser = user
+      ? ({
+          ...user,
+          email: maskValue.email(user.email),
+          phoneNumber: maskValue.phone(user.phoneNumber ?? ""),
+        } satisfies SafeUser)
+      : null
+
     promoUrl.searchParams.set("hotel", hotel.operaId)
 
     return (
       <MyStayProvider
-        bookingConfirmation={bookingConfirmation}
+        bookingConfirmation={maskedBookingConfirmation}
         breakfastPackages={breakfastPackages}
         lang={params.lang}
         linkedReservationsPromise={linkedReservationsPromise}
@@ -208,13 +233,13 @@ export default async function MyStay({
               <Ancillaries
                 ancillariesPromise={ancillaryPackagesPromise}
                 packages={breakfastPackages}
-                user={user}
+                user={maskedUser}
                 savedCreditCards={savedCreditCards}
               />
             )}
 
-            <SingleRoom user={user} />
-            <MultiRoom user={user} />
+            <SingleRoom user={maskedUser} />
+            <MultiRoom user={maskedUser} />
 
             <BookingSummary hotel={hotel} />
             <Promo

apps/scandic-web/components/HotelReservation/MyStay/Receipt/index.tsx

@@ -14,6 +14,7 @@ import {
 
 import { auth } from "@/auth"
 import { getIntl } from "@/i18n"
+import * as maskValue from "@/utils/maskValue"
 import { parseRefId } from "@/utils/refId"
 import { isValidSession } from "@/utils/session"
 
@@ -30,6 +31,7 @@ import Total from "./Total"
 import styles from "./receipt.module.css"
 
 import { CurrencyEnum } from "@/types/enums/currency"
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
 
 export async function Receipt({ refId }: { refId: string }) {
   const { confirmationNumber, lastName } = parseRefId(refId)
@@ -77,7 +79,7 @@ export async function Receipt({ refId }: { refId: string }) {
     return notFound()
   }
 
-  const { booking, hotel, room } = bookingConfirmation
+  const { hotel, room, booking } = bookingConfirmation
   const user = await getProfileSafely()
   const intl = await getIntl()
 
@@ -98,6 +100,22 @@ export async function Receipt({ refId }: { refId: string }) {
           booking.packages.find((p) => p.currency !== CurrencyEnum.POINTS)
             ?.currency)
 
+    const maskedBookingConfirmation = {
+      ...bookingConfirmation,
+      booking: {
+        ...bookingConfirmation.booking,
+        guest: {
+          ...bookingConfirmation.booking.guest,
+          email: maskValue.email(bookingConfirmation.booking.guest.email),
+          phoneNumber: maskValue.phone(
+            bookingConfirmation.booking.guest.phoneNumber ?? ""
+          ),
+        },
+      },
+    } satisfies BookingConfirmation
+
+    const { booking: maskedBooking } = maskedBookingConfirmation
+
     return (
       <main className={styles.main}>
         <div>
@@ -127,39 +145,39 @@ export async function Receipt({ refId }: { refId: string }) {
             <div className={styles.rightColumn}>
               <Typography variant="Body/Supporting text (caption)/smRegular">
                 {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                <div>{`${booking.guest.firstName} ${booking.guest.lastName}`}</div>
+                <div>{`${maskedBooking.guest.firstName} ${maskedBooking.guest.lastName}`}</div>
               </Typography>
-              {booking.guest.membershipNumber && (
+              {maskedBooking.guest.membershipNumber && (
                 <Typography variant="Body/Supporting text (caption)/smRegular">
                   {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                   <div>{`${intl.formatMessage({
                     defaultMessage: "Member",
-                  })} ${booking.guest.membershipNumber}`}</div>
+                  })} ${maskedBooking.guest.membershipNumber}`}</div>
                 </Typography>
               )}
               <Typography variant="Body/Supporting text (caption)/smRegular">
                 <div className={`${styles.tertiary} ${styles.addressMargin}`}>
-                  {booking.guest.email}
+                  {maskedBooking.guest.email}
                 </div>
               </Typography>
               <Typography variant="Body/Supporting text (caption)/smRegular">
                 <div className={styles.tertiary}>
-                  {booking.guest.phoneNumber}
+                  {maskedBooking.guest.phoneNumber}
                 </div>
               </Typography>
             </div>
           </div>
         </div>
-        <Total booking={booking} currency={currency} />
+        <Total booking={maskedBooking} currency={currency} />
         <Specification
           ancillaryPackages={ancillaryPackages}
-          booking={booking}
+          booking={maskedBooking}
           currency={currency}
         />
 
         <hr className={styles.divider} />
 
-        <Footer booking={booking} room={room} />
+        <Footer booking={maskedBooking} room={room} />
       </main>
     )
   }