Merged in feat/SW-1281-ancillaries-add-flow (pull request #1399)

Feat/SW-1281 ancillaries add flow * feat(SW-1546): update design * feat(SW-1546): show points only if logged in * feat(SW-1546): always show points * feat(SW-1281): ancillary add flow initial * feat(SW-1546): add api call * feat(SW-1281): refactor naming and break out components * feat(SW-1281): handle back button * feat(SW-1281): make mobile cards clickable * feat(SW-1281): refactor spread ancillaries * feat(SW-1281): add deliverytimes * feat(SW-1281): rebase master * feat(SW-1281): add design for logged in or not * feat(SW-1281): add design * feat(SW-1281): add mobile design * feat(SW-1281): fix carousel * feat(SW-1281): show deliverytime only if ancillary has not been added * feat(SW-1281): add design * feat(SW-1281): add translations * feat(SW-1281): add translations * feat(SW-1281): add translations * feat(SW-1281): base dates on check in date only * feat(SW-1281): fix show correct toast when no valid data * feat(SW-1281): hande logic if deliverytime is not required * feat(SW-1281): fix max width for mobile * feat(SW-1281): refactor after pr comment Approved-by: Niclas Edenvin Approved-by: Linus Flood
2025-02-26 07:20:45 +00:00
parent 341f0c54ed
commit 541b91e34c
32 changed files with 1208 additions and 129 deletions
--- a/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/ConfirmationStep/index.tsx
+++ b/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/ConfirmationStep/index.tsx
@@ -0,0 +1,120 @@
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import {
+  bookingTermsAndConditions,
+  privacyPolicy,
+} from "@/constants/currentWebHrefs"
+import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
+
+import { CreditCard } from "@/components/Icons"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import useLang from "@/hooks/useLang"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./confirmationStep.module.css"
+
+export default function ConfirmationStep() {
+  const { watch } = useFormContext()
+  const { selectedAncillary } = useAddAncillaryStore()
+  const intl = useIntl()
+  const lang = useLang()
+
+  const quantityWithPoints = watch("quantityWithPoints")
+  const quantityWithCard = watch("quantityWithCard")
+
+  if (!selectedAncillary) {
+    return null
+  }
+
+  const totalPrice = quantityWithCard
+    ? selectedAncillary.price.total * quantityWithCard
+    : null
+
+  const totalPoints =
+    quantityWithPoints && selectedAncillary.points
+      ? selectedAncillary.points * quantityWithPoints
+      : null
+
+  return (
+    <div className={styles.modalContent}>
+      <header>
+        <Subtitle type="two">
+          {intl.formatMessage({
+            id: "Reserve with Card",
+          })}
+        </Subtitle>
+      </header>
+      <Body>
+        {intl.formatMessage({
+          id: "Payment will be made on check-in. The card will be only used to guarantee the ancillary in case of no-show.",
+        })}
+      </Body>
+      <div className={styles.card}>
+        <CreditCard color="black" />
+        <Body textTransform="bold">{"MasterCard"}</Body>
+        <Body color="uiTextMediumContrast">{"**** 1234"}</Body>
+      </div>
+      <Checkbox name="termsAndConditions" registerOptions={{ required: true }}>
+        <Caption>
+          {intl.formatMessage<React.ReactNode>(
+            {
+              id: "Yes, I accept the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. There you can learn more about what data we process, your rights and where to turn if you have questions.",
+            },
+            {
+              termsAndConditionsLink: (str) => (
+                <Link
+                  className={styles.link}
+                  variant="underscored"
+                  href={bookingTermsAndConditions[lang]}
+                  target="_blank"
+                >
+                  {str}
+                </Link>
+              ),
+              privacyPolicyLink: (str) => (
+                <Link
+                  className={styles.link}
+                  variant="underscored"
+                  href={privacyPolicy[lang]}
+                  target="_blank"
+                >
+                  {str}
+                </Link>
+              ),
+            }
+          )}
+        </Caption>
+      </Checkbox>
+
+      <div className={styles.price}>
+        <Caption>
+          {intl.formatMessage<React.ReactNode>(
+            { id: "<b>Total price</b> (incl VAT)" },
+            { b: (str) => <b>{str}</b> }
+          )}
+        </Caption>
+        {totalPrice !== null && (
+          <Body textTransform="bold" color="uiTextHighContrast">
+            {formatPrice(intl, totalPrice, selectedAncillary.price.currency)}
+          </Body>
+        )}
+        {totalPoints !== null && (
+          <div>
+            <div>
+              <Divider variant="vertical" color="subtle" />
+            </div>
+            <Body textTransform="bold" color="uiTextHighContrast">
+              {totalPoints} {intl.formatMessage({ id: "points" })}
+            </Body>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}