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