web/packages/booking-flow/lib/components/SignupPromo/Desktop.tsx

"use client"

import { useIntl } from "react-intl"

import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { useBookingFlowConfig } from "../../bookingFlowConfig/bookingFlowConfigContext"

import styles from "./signupPromo.module.css"

type SignupPromoProps = {
  memberPrice: {
    amount: number
    currency: string
  }
  badgeContent?: string
  isEnterDetailsPage?: boolean
}

export default function SignupPromoDesktop({
  memberPrice,
  badgeContent,
  isEnterDetailsPage = false,
}: SignupPromoProps) {
  const intl = useIntl()
  if (!memberPrice) {
    return null
  }
  const { amount, currency } = memberPrice
  const price = formatPrice(intl, amount, currency)

  return memberPrice ? (
    <div
      className={styles.memberDiscountBannerDesktop}
      data-testid="signup-promo-desktop"
    >
      {badgeContent && <span className={styles.badge}>{badgeContent}</span>}
      <Typography variant="Body/Supporting text (caption)/smRegular">
        <p>
          <Message price={price} isEnterDetailsPage={isEnterDetailsPage} />
        </p>
      </Typography>
    </div>
  ) : null
}

function Message({
  price,
  isEnterDetailsPage,
}: {
  price: string
  isEnterDetailsPage: boolean
}) {
  const intl = useIntl()
  const config = useBookingFlowConfig()

  if (config.variant === "partner-sas") {
    return intl.formatMessage(
      {
        id: "signup.toGetTheScandicMemberPriceWithValue",
        defaultMessage:
          "To get the Scandic member price <span>{price}</span>, enter your ID or join while booking.",
      },
      {
        span: (str) => (
          <Typography
            variant="Body/Supporting text (caption)/smBold"
            className={styles.red}
          >
            <span>{str}</span>
          </Typography>
        ),
        price,
      }
    )
  }

  if (isEnterDetailsPage) {
    return intl.formatMessage(
      {
        id: "signup.toGetTheMemberRoomPrice",
        defaultMessage:
          "To get the member room price <span>{price}</span>, log in or join when completing the booking.",
      },
      {
        span: (str) => (
          <Typography
            variant="Body/Supporting text (caption)/smBold"
            className={styles.red}
          >
            <span>{str}</span>
          </Typography>
        ),
        price,
      }
    )
  }

  return intl.formatMessage(
    {
      id: "signup.toGetTheMemberPrice",
      defaultMessage:
        "To get the member price <span>{price}</span>, log in or join when completing the booking.",
    },
    {
      span: (str) => (
        <Typography
          variant="Body/Supporting text (caption)/smBold"
          className={styles.red}
        >
          <span>{str}</span>
        </Typography>
      ),
      price,
    }
  )
}