feat(SW-1063): add member price modal

2024-12-04 16:40:45 +01:00
parent a1a36e80d5
commit 42bb71cf2f
20 changed files with 446 additions and 8 deletions
--- a/components/HotelReservation/EnterDetails/Details/MemberPriceModal/index.tsx
+++ b/components/HotelReservation/EnterDetails/Details/MemberPriceModal/index.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
+import { MagicWandIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import Modal from "../../Modal"
+
+import styles from "./modal.module.css"
+
+import type { Dispatch, SetStateAction } from "react"
+
+export default function MemberPriceModal({
+  isOpen,
+  setIsOpen,
+}: {
+  isOpen: boolean
+  setIsOpen: Dispatch<SetStateAction<boolean>>
+}) {
+  const memberRate = useEnterDetailsStore((state) => state.roomRate.memberRate)
+  const intl = useIntl()
+
+  const memberPrice = memberRate?.localPrice ?? memberRate?.requestedPrice
+
+  return (
+    <Modal isOpen={isOpen} onToggle={setIsOpen}>
+      <div className={styles.modalContent}>
+        <div className={styles.innerModalContent}>
+          <MagicWandIcon width="265px" />
+          <Title as="h3" level="h1" textTransform="regular">
+            {intl.formatMessage({
+              id: "Member price activated",
+            })}
+          </Title>
+
+          {memberPrice && (
+            <span className={styles.newPrice}>
+              <Body>
+                {intl.formatMessage({
+                  id: "The new price is",
+                })}
+              </Body>
+              <Subtitle type="two" color="red">
+                {intl.formatNumber(memberPrice.pricePerStay, {
+                  currency: memberPrice.currency,
+                  style: "currency",
+                })}
+              </Subtitle>
+            </span>
+          )}
+        </div>
+        <Button intent="primary" theme="base" onClick={() => setIsOpen(false)}>
+          OK
+        </Button>
+      </div>
+    </Modal>
+  )
+}
--- a/components/HotelReservation/EnterDetails/Details/MemberPriceModal/modal.module.css
+++ b/components/HotelReservation/EnterDetails/Details/MemberPriceModal/modal.module.css
@@ -0,0 +1,24 @@
+.modalContent {
+  display: grid;
+  gap: var(--Spacing-x3);
+  width: 100%;
+}
+
+.innerModalContent {
+  display: grid;
+  gap: var(--Spacing-x2);
+  align-items: center;
+  justify-items: center;
+}
+
+.newPrice {
+  display: flex;
+  gap: var(--Spacing-x1);
+  align-items: center;
+}
+
+@media screen and (min-width: 768px) {
+  .modalContent {
+    width: 352px;
+  }
+}