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

"use client"

import { useIntl } from "react-intl"

import { Typography } from "@scandic-hotels/design-system/Typography"

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

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

export default function SignupPromoMobile() {
  return (
    <div
      data-footer-spacing-signup
      className={styles.memberDiscountBannerMobile}
    >
      <Typography variant="Body/Supporting text (caption)/smRegular">
        <p>
          <Message />
        </p>
      </Typography>
    </div>
  )
}

function Message() {
  const intl = useIntl()
  const config = useBookingFlowConfig()

  switch (config.variant) {
    case "partner-sas":
      return intl.formatMessage({
        id: "signup.toGetTheScandicMemberPrice",
        defaultMessage: "Enter ID or join to get the Scandic Friends price.",
      })
    case "scandic":
      return intl.formatMessage({
        id: "signup.joinOrLoginForMemberPricing",
        defaultMessage: "Join or log in while booking for member pricing.",
      })
    default:
      const _exhaustiveCheck: never = config.variant
      throw new Error(`Unknown variant: ${config.variant}`)
  }
}