web/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx

"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 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 { Typography } from "@scandic-hotels/design-system/Typography"

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) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setIsOpen(true)
    }
  }, [join])

  useEffect(() => {
    trigger("membershipNo").then((isValid) => {
      const { isDirty } = getFieldState("membershipNo")
      updatePriceForMembershipNo(membershipNo, isValid)
      if (isValid && isDirty && !!membershipNo) {
        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" />
          <Typography variant="Title/smLowCase">
            <h3 className={styles.title}>
              {intl.formatMessage({
                id: "enterDetails.memberPriceModal.title",
                defaultMessage: "Member room price activated",
              })}
            </h3>
          </Typography>

          {memberPrice && (
            <span className={styles.newPrice}>
              <Typography variant="Body/Paragraph/mdRegular">
                <p>
                  {intl.formatMessage({
                    id: "enterDetails.memberPriceModal.newPriceLabel",
                    defaultMessage: "The new price is",
                  })}
                </p>
              </Typography>
              <Typography
                variant="Title/Subtitle/md"
                className={styles.redPrice}
              >
                <p>
                  {formatPrice(
                    intl,
                    memberPrice.pricePerStay ?? 0,
                    memberPrice.currency ?? CurrencyEnum.Unknown
                  )}
                </p>
              </Typography>
            </span>
          )}
        </div>
        <Button intent="primary" theme="base" onClick={() => setIsOpen(false)}>
          {intl.formatMessage({
            id: "enterDetails.memberPriceModal.okButtonLabel",
            defaultMessage: "OK",
          })}
        </Button>
      </div>
    </Modal>
  )
}