Merged in chore/move-enter-details (pull request #2778)

Chore/move enter details Approved-by: Anton Gunnarsson
2025-09-11 07:16:24 +00:00
parent 15711cb3a4
commit 7dee6d5083
238 changed files with 1656 additions and 1602 deletions
--- a/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useFormContext, useWatch } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+import Body from "@scandic-hotels/design-system/Body"
+import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
+import Modal from "@scandic-hotels/design-system/Modal"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import Title from "@scandic-hotels/design-system/Title"
+
+import { useRoomContext } from "../../../../contexts/EnterDetails/RoomContext"
+
+import styles from "./modal.module.css"
+
+export default function MemberPriceModal() {
+  const {
+    actions: { updatePriceForMembershipNo },
+    room,
+  } = useRoomContext()
+  const memberRate = "member" in room.roomRate ? room.roomRate.member : null
+  const intl = useIntl()
+  const [isOpen, setIsOpen] = useState(false)
+  const { getFieldState, trigger } = useFormContext()
+
+  const [join, membershipNo] = useWatch({ name: ["join", "membershipNo"] })
+
+  useEffect(() => {
+    if (join) {
+      setIsOpen(true)
+    }
+  }, [join])
+
+  useEffect(() => {
+    trigger("membershipNo").then((isValid) => {
+      const { isDirty } = getFieldState("membershipNo")
+      updatePriceForMembershipNo(membershipNo, isValid)
+      if (isValid && isDirty) {
+        setIsOpen(true)
+      }
+    })
+  }, [getFieldState, membershipNo, trigger, updatePriceForMembershipNo])
+
+  if (!memberRate) {
+    return null
+  }
+
+  const memberPrice = memberRate?.localPrice ?? memberRate?.requestedPrice
+
+  return (
+    <Modal isOpen={isOpen} onToggle={() => setIsOpen(false)}>
+      <div className={styles.modalContent}>
+        <div className={styles.innerModalContent}>
+          <MagicWandIcon width="265px" />
+          <Title as="h3" level="h1" textTransform="regular">
+            {intl.formatMessage({
+              defaultMessage: "Member room 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>
+  )
+}
--- a/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/modal.module.css
+++ b/packages/booking-flow/lib/components/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;
+  }
+}