Merged in feat/sw-1602-preliminary-receipt (pull request #1595)

feat/sw-1602 preliminary receipt

* feat(sw-1602): create page for preliminary receipt

* Add link to my stay page


Approved-by: Pontus Dreij

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

@@ -0,0 +1,85 @@
+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>
+  )
+}

apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/total.module.css

@@ -0,0 +1,37 @@
+.tertiary {
+  color: var(--Text-Tertiary);
+}
+
+.title {
+  color: var(--Text-Tertiary);
+  font-weight: var(--Body-Supporting-text-Font-weight-2);
+  font-size: var(--Body-Supporting-text-Size);
+  margin-right: var(--Spacing-x-half);
+}
+
+.titleSubtext {
+  color: var(--Text-Tertiary);
+  font-size: var(--Body-Supporting-text-Size);
+}
+
+.totalContainer {
+  border: 1px solid var(--Border-Divider-Subtle);
+  border-radius: var(--Spacing-x1);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) var(--Spacing-x2)
+    var(--Spacing-x2);
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--Spacing-x-one-and-half);
+  display: flex;
+}
+
+.dl {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: var(--Spacing-x-half);
+  padding: 8px 0;
+}
+
+.dl dd {
+  text-align: right;
+}