Merged in feat/SW-1276-implement-design (pull request #1348)

Feat/SW-1276 implement design * feat(SW-1276) UI implementation Desktop part 1 for MyStay * feat(SW-1276) UI implementation Desktop part 2 for MyStay * feat(SW-1276) UI implementation Mobile part 1 for MyStay * refactor: move files from MyStay/MyStay to MyStay * feat(SW-1276) Sidepeek implementation * feat(SW-1276): Refactoring * feat(SW-1276) UI implementation Mobile part 2 for MyStay * feat(SW-1276): translations * feat(SW-1276) fixed skeleton * feat(SW-1276): Added missing translations * feat(SW-1276): Removed console log * feat(SW-1276) fixed translations * feat(SW-1276): Added translations * feat(SW-1276) fix dynamic ID:s * feat(SW-1276) removed createElement * feat(SW-1276): Fixed build errors * feat(SW-1276): Updated label * feat(SW-1276): Rewrite SummaryCard Approved-by: Niclas Edenvin
2025-02-18 14:20:54 +00:00
parent 90fee1b0c4
commit 8616e4ab76
56 changed files with 4163 additions and 227 deletions
--- a/components/HotelReservation/MyStay/Room/GuestDetails.tsx
+++ b/components/HotelReservation/MyStay/Room/GuestDetails.tsx
@@ -0,0 +1,97 @@
+import { useIntl } from "react-intl"
+
+import { DiamondIcon, EditIcon } from "@/components/Icons"
+import MembershipLevelIcon from "@/components/Levels/Icon"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import styles from "./room.module.css"
+
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+import type { User } from "@/types/user"
+
+export default function GuestDetails({
+  user,
+  booking,
+  isMobile = false,
+}: {
+  user: User | null
+  booking: BookingConfirmation["booking"]
+  isMobile?: boolean
+}) {
+  const intl = useIntl()
+  const containerClass = isMobile
+    ? styles.guestDetailsMobile
+    : styles.guestDetailsDesktop
+
+  return (
+    <div className={containerClass}>
+      {user?.membership && (
+        <div className={styles.userDetails}>
+          <div className={styles.row}>
+            <div className={styles.rowTitle}>
+              <Caption
+                type="bold"
+                color="burgundy"
+                textTransform="uppercase"
+                textAlign="center"
+              >
+                {intl.formatMessage({ id: "Your member tier" })}
+              </Caption>
+            </div>
+            <MembershipLevelIcon
+              level={user.membership.membershipLevel}
+              color="red"
+              height={isMobile ? "40" : "20"}
+              width={isMobile ? "80" : "40"}
+            />
+          </div>
+          <div className={styles.totalPoints}>
+            {isMobile && (
+              <div className={styles.totalPointsIcon}>
+                <DiamondIcon color="uiTextHighContrast" />
+              </div>
+            )}
+            <Caption
+              type="bold"
+              color="uiTextHighContrast"
+              textTransform="uppercase"
+            >
+              {intl.formatMessage({ id: "Total points" })}
+            </Caption>
+
+            <Body color="uiTextHighContrast" className={styles.totalPointsText}>
+              {user.membership.currentPoints}
+            </Body>
+          </div>
+        </div>
+      )}
+      <div className={styles.guest}>
+        <Body textTransform="bold" color="uiTextHighContrast">
+          {booking.guest.firstName} {booking.guest.lastName}
+        </Body>
+        {user?.membership && (
+          <Body color="uiTextHighContrast">
+            {intl.formatMessage({ id: "Member no." })}{" "}
+            {user.membership.membershipNumber}
+          </Body>
+        )}
+        <Caption color="uiTextHighContrast">{booking.guest.email}</Caption>
+        <Caption color="uiTextHighContrast">
+          {booking.guest.phoneNumber}
+        </Caption>
+      </div>
+      <Button
+        variant="icon"
+        color="burgundy"
+        intent={isMobile ? "secondary" : "text"}
+      >
+        <EditIcon color="burgundy" width={20} height={20} />
+        <Caption color="burgundy">
+          {intl.formatMessage({ id: "Modify guest details" })}
+        </Caption>
+      </Button>
+    </div>
+  )
+}