Merged in fix/sw-1897-member-price-modal (pull request #1856)

fix(sw-1897): show member price modal immediately * fix(sw-1897): show member price modal immediately * Make checkbox fully controlled * Remove action in the store that wasn't used Approved-by: Hrishikesh Vaipurkar
2025-04-25 09:55:24 +00:00
parent 0011cbe8d2
commit 3a958c4dd1
8 changed files with 87 additions and 66 deletions
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/MemberPriceModal/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/MemberPriceModal/index.tsx
@@ -0,0 +1,74 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
+
+import Modal from "@/components/Modal"
+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 { useRoomContext } from "@/contexts/Details/Room"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./modal.module.css"
+
+import type { Dispatch, SetStateAction } from "react"
+
+import { CurrencyEnum } from "@/types/enums/currency"
+
+export default function MemberPriceModal({
+  isOpen,
+  setIsOpen,
+}: {
+  isOpen: boolean
+  setIsOpen: Dispatch<SetStateAction<boolean>>
+}) {
+  const { room } = useRoomContext()
+  const memberRate = "member" in room.roomRate ? room.roomRate.member : null
+  const intl = useIntl()
+
+  if (!memberRate) {
+    return null
+  }
+
+  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({
+              defaultMessage: "Member price activated",
+            })}
+          </Title>
+
+          {memberPrice && (
+            <span className={styles.newPrice}>
+              <Body>
+                {intl.formatMessage({
+                  defaultMessage: "The new price is",
+                })}
+              </Body>
+              <Subtitle type="two" color="red">
+                {formatPrice(
+                  intl,
+                  memberPrice.pricePerStay ?? 0,
+                  memberPrice.currency ?? CurrencyEnum.Unknown
+                )}
+              </Subtitle>
+            </span>
+          )}
+        </div>
+        <Button intent="primary" theme="base" onClick={() => setIsOpen(false)}>
+          {intl.formatMessage({
+            defaultMessage: "OK",
+          })}
+        </Button>
+      </div>
+    </Modal>
+  )
+}