800dc5c3c1
feat(SW-3225): Move ParkingInformation to design-system * Inline ParkingInformation types to remove trpc dependency * Move ParkingInformation to design-system * Move numberFormatting to common package * Add deps to external * Fix imports and i18n script * Add common as dependency * Merge branch 'master' into feat/sw-3225-move-parking-information-to-booking-flow Approved-by: Linus Flood
91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
"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 { 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 Modal from "@/components/Modal"
|
|
import { useRoomContext } from "@/contexts/Details/Room"
|
|
|
|
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>
|
|
)
|
|
}
|