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/AncillaryGridModal/ancillaryGridModal.module.css
+++ b/components/HotelReservation/MyStay/Ancillaries/AncillaryGridModal/ancillaryGridModal.module.css
@@ -0,0 +1,52 @@
+.modalTrigger {
+  display: none;
+}
+
+.modalContent {
+  width: 100%;
+}
+
+.tabs {
+  display: flex;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x3) 0;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(251px, 1fr));
+  gap: var(--Spacing-x2);
+  height: 470px;
+  overflow-y: auto;
+  padding-right: var(--Spacing-x-one-and-half);
+  margin-top: var(--Spacing-x2);
+}
+
+.chip {
+  border-radius: 28px;
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  border: none;
+  cursor: pointer;
+  background: var(--Base-Surface-Subtle-Normal);
+}
+
+.chip.selected {
+  background: var(--Base-Text-High-contrast);
+}
+
+@media screen and (min-width: 768px) {
+  .modalContent {
+    width: 600px;
+  }
+}
+
+@media screen and (min-width: 1052px) {
+  .modalContent {
+    width: 833px;
+  }
+
+  .modalTrigger {
+    display: block;
+  }
+}
--- a/components/HotelReservation/MyStay/Ancillaries/AncillaryGridModal/index.tsx
+++ b/components/HotelReservation/MyStay/Ancillaries/AncillaryGridModal/index.tsx
@@ -0,0 +1,91 @@
+import { useIntl } from "react-intl"
+
+import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
+
+import { ChevronRightSmallIcon } from "@/components/Icons"
+import Modal from "@/components/Modal"
+import { AncillaryCard } from "@/components/TempDesignSystem/AncillaryCard"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import styles from "./ancillaryGridModal.module.css"
+
+import type {
+  Ancillary,
+  AncillaryGridModalProps,
+} from "@/types/components/myPages/myStay/ancillaries"
+
+export default function AncillaryGridModal({
+  ancillaries,
+  selectedCategory,
+  setSelectedCategory,
+  handleCardClick,
+}: AncillaryGridModalProps) {
+  const intl = useIntl()
+  const { isGridOpen, setGridIsOpen, setOpenedFrom } = useAddAncillaryStore()
+
+  const handleClick = (ancillary: Ancillary["ancillaryContent"][number]) => {
+    handleCardClick(ancillary)
+    setOpenedFrom("grid")
+    setGridIsOpen(false)
+  }
+
+  return (
+    <div className={styles.modalTrigger}>
+      <Button
+        theme="base"
+        variant="icon"
+        intent="text"
+        size="small"
+        onClick={() => setGridIsOpen(true)}
+      >
+        {intl.formatMessage({ id: "View all" })}
+        <ChevronRightSmallIcon
+          width={20}
+          height={20}
+          color="baseButtonTextOnFillNormal"
+        />
+      </Button>
+      <Modal
+        isOpen={isGridOpen}
+        onToggle={() => setGridIsOpen(!isGridOpen)}
+        title={intl.formatMessage({ id: "Upgrade your stay" })}
+      >
+        <div className={styles.modalContent}>
+          <div className={styles.tabs}>
+            {ancillaries.map((category) => (
+              <button
+                key={category.categoryName}
+                className={`${styles.chip} ${category.categoryName === selectedCategory ? styles.selected : ""}`}
+                onClick={() => setSelectedCategory(category.categoryName)}
+              >
+                <Body
+                  color={
+                    category.categoryName === selectedCategory
+                      ? "pale"
+                      : "baseTextHighContrast"
+                  }
+                >
+                  {category.categoryName}
+                </Body>
+              </button>
+            ))}
+          </div>
+
+          <div className={styles.grid}>
+            {ancillaries
+              .find((category) => category.categoryName === selectedCategory)
+              ?.ancillaryContent.map(({ description, ...ancillary }) => (
+                <div
+                  key={ancillary.id}
+                  onClick={() => handleClick({ description, ...ancillary })}
+                >
+                  <AncillaryCard key={ancillary.id} ancillary={ancillary} />
+                </div>
+              ))}
+          </div>
+        </div>
+      </Modal>
+    </div>
+  )
+}