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

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

import Divider from "@/components/TempDesignSystem/Divider"
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 === "Points")
    .reduce((acc, curr) => acc + curr.totalPrice, 0)

  const moneyString =
    totalPriceInMoney > 0 ? `${totalPriceInMoney} ${currency}` : ""
  const pointsString =
    totalPriceInPoints > 0
      ? `${totalPriceInPoints} ${intl.formatMessage({ id: "Points" })}`
      : ""
  const plusString = moneyString && pointsString ? " + " : ""

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

        <Divider color="subtle" />
        <dl className={styles.dl}>
          <Typography>
            <dt>{intl.formatMessage({ id: "Total including VAT" })}</dt>
          </Typography>
          <Typography>
            <dd>{`${moneyString}${plusString}${pointsString}`}</dd>
          </Typography>

          {totalPriceInMoney > 0 && (
            <>
              <Typography>
                <dt className={styles.tertiary}>
                  {intl.formatMessage({ id: "Total excluding VAT" })}
                </dt>
              </Typography>
              <Typography>
                <dd
                  className={styles.tertiary}
                >{`${totalPriceInMoneyExclVat} ${currency}`}</dd>
              </Typography>
            </>
          )}

          {totalPriceInMoney > 0 && (
            <>
              <Typography>
                <dt className={styles.tertiary}>
                  {intl.formatMessage({ id: "VAT" })}
                </dt>
              </Typography>
              <Typography>
                <dd className={styles.tertiary}>{`${totalVat} ${currency}`}</dd>
              </Typography>
            </>
          )}
        </dl>
      </div>
    </div>
  )
}