feat(SW-614): Add mustBeGuaranteed flag and update content based on this

2024-10-23 13:22:49 +02:00
parent 6523e2329b
commit a690750c36
12 changed files with 144 additions and 12 deletions
--- a/components/HotelReservation/EnterDetails/Payment/index.tsx
+++ b/components/HotelReservation/EnterDetails/Payment/index.tsx
@@ -30,6 +30,7 @@ import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
 import useLang from "@/hooks/useLang"

+import GuaranteeDetails from "./GuaranteeDetails"
 import PaymentOption from "./PaymentOption"
 import { PaymentFormData, paymentSchema } from "./schema"

@@ -48,6 +49,7 @@ export default function Payment({
  hotelId,
  otherPaymentOptions,
  savedCreditCards,
+  mustBeGuaranteed,
 }: PaymentProps) {
  const router = useRouter()
  const lang = useLang()
@@ -169,12 +171,26 @@ export default function Payment({
    return <LoadingSpinner />
  }

+  const paymentVerb = mustBeGuaranteed
+    ? intl.formatMessage({ id: "guaranteeing" })
+    : intl.formatMessage({ id: "paying" })
+
  return (
    <FormProvider {...methods}>
      <form
        className={styles.paymentContainer}
        onSubmit={methods.handleSubmit(handleSubmit)}
      >
+        {mustBeGuaranteed ? (
+          <section className={styles.section}>
+            <Body>
+              {intl.formatMessage({
+                id: "To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.",
+              })}
+            </Body>
+            <GuaranteeDetails />
+          </section>
+        ) : null}
        {savedCreditCards?.length ? (
          <section className={styles.section}>
            <Body color="uiTextHighContrast" textTransform="bold">
@@ -238,6 +254,7 @@ export default function Payment({
                  id: "booking.terms",
                },
                {
+                  paymentVerb,
                  termsLink: (str) => (
                    <Link
                      className={styles.link}