web/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/index.tsx

import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { getIntl } from "@/i18n"

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

import type { TotalProps } from "@/types/components/hotelReservation/myStay/receipt"

export default async function Total({ booking, currency }: TotalProps) {
  const intl = await getIntl()

  const totalPriceInMoney = booking.totalPrice
  const totalPriceInMoneyExclVat = booking.totalPriceExVat
  const totalVat = booking.vatAmount
  const totalPriceInPoints = booking.ancillaries
    .filter((a) => a.currency === CurrencyEnum.POINTS)
    .reduce((acc, curr) => acc + curr.totalPrice, 0)

  const moneyString =
    totalPriceInMoney > 0 ? `${totalPriceInMoney} ${currency}` : ""
  const pointsString =
    totalPriceInPoints > 0
      ? intl.formatMessage(
          {
            id: "common.numberOfPoints",
            defaultMessage: "{points, plural, one {# point} other {# points}}",
          },
          { points: totalPriceInPoints }
        )
      : ""
  const plusString = moneyString && pointsString ? " + " : ""

  return (
    <div>
      {/****** Total ********/}
      <div className={styles.totalContainer}>
        <Typography>
          <div>
            <span className={styles.title}>
              {intl.formatMessage({
                id: "receipt.preliminaryReceipt",
                defaultMessage: "Preliminary receipt",
              })}
            </span>
            <span className={styles.titleSubtext}>
              {intl.formatMessage({
                id: "myStay.receipt.finalVatBreakdownInfo",
                defaultMessage:
                  "Final VAT breakdown will be provided at check-out.",
              })}
            </span>
          </div>
        </Typography>

        <Divider />
        <dl className={styles.dl}>
          <Typography>
            <dt>
              {intl.formatMessage({
                id: "receipt.totalIncludingVat",
                defaultMessage: "Total including VAT",
              })}
            </dt>
          </Typography>
          <Typography>
            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
            <dd>{`${moneyString}${plusString}${pointsString}`}</dd>
          </Typography>

          {totalPriceInMoney > 0 && (
            <>
              <Typography>
                <dt className={styles.tertiary}>
                  {intl.formatMessage({
                    id: "receipt.totalExcludingVat",
                    defaultMessage: "Total excluding VAT",
                  })}
                </dt>
              </Typography>
              <Typography>
                <dd className={styles.tertiary}>
                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                  {`${totalPriceInMoneyExclVat} ${currency}`}
                </dd>
              </Typography>
            </>
          )}

          {totalPriceInMoney > 0 && (
            <>
              <Typography>
                <dt className={styles.tertiary}>
                  {intl.formatMessage({
                    id: "common.vat",
                    defaultMessage: "VAT",
                  })}
                </dt>
              </Typography>
              <Typography>
                <dd className={styles.tertiary}>
                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                  {`${totalVat} ${currency}`}
                </dd>
              </Typography>
            </>
          )}
        </dl>
      </div>
    </div>
  )
}