Merged in feat/SW-755-price-change-non-happy (pull request #957)

Feat/SW-755 price change non happy * fix(SW-755): dont show field error if checkbox has no children * feat(SW-755): Price change route + dialog WIP * fix(SW-755): minor refactoring * fix(SW-755): added logging to price change route * fix(SW-755): remove redundant search param logic * fix(SW-755): moved enum cast to zod instead * fix(SW-755): move prop type to types folder * fix(SW-755): Added suspense to Payment and refactored payment options hook * fix(SW-755): seperated terms and conditions copy from the checkbox label * fix(SW-755): add currency format and fixed wrong translation * fix(SW-755): change from undefined to null * fix(SW-755): added extra type safety to payment options Approved-by: Christian Andolf Approved-by: Simon.Emanuelsson
2024-11-26 09:06:41 +00:00
parent 9fc65b6e53
commit 70000afe1f
22 changed files with 577 additions and 217 deletions
--- a/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx
+++ b/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx
@@ -0,0 +1,73 @@
+import { Dialog, Modal, ModalOverlay } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { InfoCircleIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import styles from "./priceChangeDialog.module.css"
+
+import { PriceChangeDialogProps } from "@/types/components/hotelReservation/enterDetails/priceChangeDialog"
+
+export default function PriceChangeDialog({
+  isOpen,
+  oldPrice,
+  newPrice,
+  currency,
+  onCancel,
+  onAccept,
+}: PriceChangeDialogProps) {
+  const intl = useIntl()
+  const title = intl.formatMessage({ id: "The price has increased" })
+
+  return (
+    <ModalOverlay
+      className={styles.overlay}
+      isOpen={isOpen}
+      isKeyboardDismissDisabled
+    >
+      <Modal className={styles.modal}>
+        <Dialog aria-label={title} className={styles.dialog}>
+          <header className={styles.header}>
+            <div className={styles.titleContainer}>
+              <InfoCircleIcon height={48} width={48} color="burgundy" />
+              <Title
+                level="h1"
+                as="h3"
+                textAlign="center"
+                textTransform="regular"
+              >
+                {title}
+              </Title>
+            </div>
+            <Body textAlign="center">
+              {intl.formatMessage({
+                id: "The price has increased since you selected your room.",
+              })}
+              <br />
+              {intl.formatMessage({
+                id: "You can still book the room but you need to confirm that you accept the new price",
+              })}
+              <br />
+              <span className={styles.oldPrice}>
+                {intl.formatNumber(oldPrice, { style: "currency", currency })}
+              </span>{" "}
+              <strong className={styles.newPrice}>
+                {intl.formatNumber(newPrice, { style: "currency", currency })}
+              </strong>
+            </Body>
+          </header>
+          <footer className={styles.footer}>
+            <Button intent="secondary" onClick={onCancel}>
+              {intl.formatMessage({ id: "Cancel" })}
+            </Button>
+            <Button onClick={onAccept}>
+              {intl.formatMessage({ id: "Accept new price" })}
+            </Button>
+          </footer>
+        </Dialog>
+      </Modal>
+    </ModalOverlay>
+  )
+}
--- a/components/HotelReservation/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css
+++ b/components/HotelReservation/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css
@@ -0,0 +1,85 @@
+@keyframes modal-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+.overlay {
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  height: var(--visual-viewport-height);
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 100;
+
+  &[data-entering] {
+    animation: modal-fade 200ms;
+  }
+
+  &[data-exiting] {
+    animation: modal-fade 150ms reverse ease-in;
+  }
+}
+
+.modal {
+  &[data-entering] {
+    animation: slide-up 200ms;
+  }
+  &[data-exiting] {
+    animation: slide-up 200ms reverse ease-in-out;
+  }
+}
+
+.dialog {
+  background-color: var(--Scandic-Brand-Pale-Peach);
+  border-radius: var(--Corner-radius-Medium);
+  box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x5) var(--Spacing-x4);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+  gap: var(--Spacing-x2);
+}
+
+.oldPrice {
+  text-decoration: line-through;
+}
+
+.newPrice {
+  font-size: 1.2em;
+}