feat: SW-2028 Updated Guarantee notification

apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx

@@ -125,3 +125,23 @@ export default function ConfirmBooking({
     </div>
   )
 }
+
+export function ConfirmBookingRedemption() {
+  const intl = useIntl()
+  return (
+    <div className={styles.container}>
+      <div className={styles.guaranteeContainer}>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
+            {intl.formatMessage({
+              id: "When you confirm the booking the room will be guaranteed for late arrival. If you fail to arrive without cancelling in advance or if you cancel after 18:00 local time, you will be charged for one reward night.",
+            })}
+          </p>
+        </Typography>
+      </div>
+      <div className={styles.checkboxContainer}>
+        <TermsAndConditions />
+      </div>
+    </div>
+  )
+}

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx

@@ -12,6 +12,7 @@ import {
   BookingStatusEnum,
   PAYMENT_METHOD_TITLES,
   PaymentMethodEnum,
+  REDEMPTION,
 } from "@/constants/booking"
 import {
   bookingConfirmation,
@@ -31,7 +32,7 @@ import useLang from "@/hooks/useLang"
 import { trackPaymentEvent } from "@/utils/tracking"
 
 import { bedTypeMap } from "../../utils"
-import ConfirmBooking from "../Confirm"
+import ConfirmBooking, { ConfirmBookingRedemption } from "../Confirm"
 import PriceChangeDialog from "../PriceChangeDialog"
 import GuaranteeDetails from "./GuaranteeDetails"
 import { hasFlexibleRate, hasPrepaidRate, isPaymentMethodEnum } from "./helpers"
@@ -408,7 +409,9 @@ export default function PaymentClient({
           onSubmit={methods.handleSubmit(handleSubmit)}
           id={formId}
         >
-          {hasOnlyFlexRates && !bookingMustBeGuaranteed ? (
+          {booking.searchType === REDEMPTION ? (
+            <ConfirmBookingRedemption />
+          ) : hasOnlyFlexRates && !bookingMustBeGuaranteed ? (
             <ConfirmBooking savedCreditCards={savedCreditCards} />
           ) : (
             <>

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/PriceDetailsTable/index.tsx

@@ -108,6 +108,11 @@ export default function PriceDetailsTable({
   const duration = ` ${dt(fromDate).locale(lang).format("ddd, D MMM")}
           -
           ${dt(toDate).locale(lang).format("ddd, D MMM")} (${nights})`
+  const noVatCurrencies = [
+    CurrencyEnum.CC,
+    CurrencyEnum.POINTS,
+    CurrencyEnum.Voucher,
+  ]
   return (
     <table className={styles.priceDetailsTable}>
       {rooms.map((room, idx) => {
@@ -133,7 +138,8 @@ export default function PriceDetailsTable({
           "corporateCheque" in room.roomRate
             ? room.roomRate.corporateCheque
             : undefined
-        if (!price) {
+        const redemptionPrice = "redemption" in room.roomRate ? room.roomRate.redemption : undefined
+        if (!price && !voucherPrice && !chequePrice && !redemptionPrice) {
           return null
         }
         return (
@@ -211,6 +217,19 @@ export default function PriceDetailsTable({
                   )}
                 />
               )}
+              {redemptionPrice && (
+                <Row
+                  bold
+                  label={intl.formatMessage({ id: "Room charge" })}
+                  value={formatPrice(
+                    intl,
+                    redemptionPrice.localPrice.pointsPerStay,
+                    CurrencyEnum.POINTS,
+                    redemptionPrice.localPrice.additionalPricePerStay,
+                    redemptionPrice.localPrice.currency ?? undefined
+                  )}
+                />
+              )}
             </TableSection>
 
             {room.breakfast ? (
@@ -264,19 +283,25 @@ export default function PriceDetailsTable({
       })}
       <TableSection>
         <TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
-        {totalPrice.local.currency !== CurrencyEnum.Voucher &&
-        totalPrice.local.currency !== CurrencyEnum.CC ? (
-          <>
-            <Row
-              label={intl.formatMessage({ id: "Price excluding VAT" })}
-              value={formatPrice(intl, priceExclVat, totalPrice.local.currency)}
-            />
-            <Row
-              label={intl.formatMessage({ id: "VAT {vat}%" }, { vat })}
-              value={formatPrice(intl, vatAmount, totalPrice.local.currency)}
-            />
-          </>
-        ) : null}
+        {
+          // @ts-expect-error Currency type is string instead of CurrencyEnum. Change also impacts packages
+          !noVatCurrencies.includes(totalPrice.local.currency) ? (
+            <>
+              <Row
+                label={intl.formatMessage({ id: "Price excluding VAT" })}
+                value={formatPrice(
+                  intl,
+                  priceExclVat,
+                  totalPrice.local.currency
+                )}
+              />
+              <Row
+                label={intl.formatMessage({ id: "VAT {vat}%" }, { vat })}
+                value={formatPrice(intl, vatAmount, totalPrice.local.currency)}
+              />
+            </>
+          ) : null
+        }
         <tr className={styles.row}>
           <td>
             <Body textTransform="bold">
@@ -295,7 +320,7 @@ export default function PriceDetailsTable({
             </Body>
           </td>
         </tr>
-        {totalPrice.local.regularPrice && (
+        {totalPrice.local.regularPrice ? (
           <tr className={styles.row}>
             <td></td>
             <td className={styles.price}>
@@ -308,7 +333,7 @@ export default function PriceDetailsTable({
               </Caption>
             </td>
           </tr>
-        )}
+        ) : null}
         {bookingCode && totalPrice.local.regularPrice && (
           <tr className={styles.row}>
             <td>

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx

@@ -3,7 +3,6 @@ import { useRouter } from "next/navigation"
 import { useState, useTransition } from "react"
 import { useIntl } from "react-intl"
 
-import { REDEMPTION } from "@/constants/booking"
 import { dt } from "@/lib/dt"
 import { useRatesStore } from "@/stores/select-rate"
 
@@ -46,7 +45,6 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
     searchParams,
   } = useRatesStore((state) => ({
     bookingCode: state.booking.bookingCode,
-    isRedemption: state.booking.searchType === REDEMPTION,
     bookingRooms: state.booking.rooms,
     dates: {
       checkInDate: state.booking.fromDate,