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

components/HotelReservation/MyStay/Ancillaries/index.tsx

@@ -2,14 +2,15 @@
 import { useState } from "react"
 import { useIntl } from "react-intl"
 
+import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
+
 import { Carousel } from "@/components/Carousel"
-import { ChevronRightSmallIcon } from "@/components/Icons"
-import Modal from "@/components/Modal"
 import { AncillaryCard } from "@/components/TempDesignSystem/AncillaryCard"
-import Button from "@/components/TempDesignSystem/Button"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
+import AddAncillaryFlowModal from "./AddAncillaryFlow/AddAncillaryFlowModal"
+import AncillaryGridModal from "./AncillaryGridModal"
+
 import styles from "./ancillaries.module.css"
 
 import type {
@@ -18,7 +19,7 @@ import type {
   Ancillary,
 } from "@/types/components/myPages/myStay/ancillaries"
 
-export function Ancillaries({ ancillaries }: AncillariesProps) {
+export function Ancillaries({ ancillaries, booking, user }: AncillariesProps) {
   const intl = useIntl()
   const [selectedCategory, setSelectedCategory] = useState<string | null>(
     () => {
@@ -26,6 +27,10 @@ export function Ancillaries({ ancillaries }: AncillariesProps) {
     }
   )
 
+  const { setSelectedAncillary, setConfirmationNumber, setOpenedFrom } =
+    useAddAncillaryStore()
+  const [isModalOpen, setModalOpen] = useState(false)
+
   if (!ancillaries?.length) {
     return null
   }
@@ -43,78 +48,79 @@ export function Ancillaries({ ancillaries }: AncillariesProps) {
 
   const allAncillaries = mergeAncillaries(ancillaries)
 
+  const handleCardClick = (
+    ancillary: Ancillary["ancillaryContent"][number]
+  ) => {
+    if (booking?.confirmationNumber) {
+      setConfirmationNumber(booking.confirmationNumber)
+    }
+    setSelectedAncillary(ancillary)
+    setOpenedFrom("list")
+    setModalOpen(true)
+  }
+
   return (
     <div className={styles.container}>
       <div className={styles.title}>
         <Title as="h5">{intl.formatMessage({ id: "Upgrade your stay" })}</Title>
-        <div className={styles.modal}>
-          <Modal
-            trigger={
-              <Button theme="base" variant="icon" intent="text" size="small">
-                {intl.formatMessage({ id: "View all" })}
-                <ChevronRightSmallIcon
-                  width={20}
-                  height={20}
-                  color="baseButtonTextOnFillNormal"
-                />
-              </Button>
-            }
-            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)}
-                  >
-                    <Caption
-                      color={
-                        category.categoryName === selectedCategory
-                          ? "pale"
-                          : "baseTextHighContrast"
-                      }
-                    >
-                      {category.categoryName}
-                    </Caption>
-                  </button>
-                ))}
-              </div>
-
-              <div className={styles.grid}>
-                {ancillaries
-                  .find(
-                    (category) => category.categoryName === selectedCategory
-                  )
-                  ?.ancillaryContent.map(({ description, ...ancillary }) => (
-                    <AncillaryCard key={ancillary.id} ancillary={ancillary} />
-                  ))}
-              </div>
-            </div>
-          </Modal>
-        </div>
+        <AncillaryGridModal
+          ancillaries={ancillaries}
+          selectedCategory={selectedCategory}
+          setSelectedCategory={setSelectedCategory}
+          handleCardClick={handleCardClick}
+        />
       </div>
 
       <div className={styles.ancillaries}>
-        {allAncillaries.slice(0, 4).map(({ description, ...ancillary }) => (
-          <AncillaryCard key={ancillary.id} ancillary={ancillary} />
-        ))}
+        {allAncillaries
+          .slice(0, 4)
+          .map(({ description, points, ...ancillary }) => {
+            const ancillaryData = !!user ? { points, ...ancillary } : ancillary
+
+            return (
+              <div
+                key={ancillary.id}
+                onClick={() =>
+                  handleCardClick({ description, points, ...ancillary })
+                }
+              >
+                <AncillaryCard key={ancillary.id} ancillary={ancillaryData} />
+              </div>
+            )
+          })}
       </div>
+
       <div className={styles.mobileAncillaries}>
         <Carousel>
           <Carousel.Content className={styles.carouselContainer}>
-            {allAncillaries.map(({ description, ...ancillary }) => (
-              <Carousel.Item key={ancillary.id}>
-                <AncillaryCard key={ancillary.id} ancillary={ancillary} />
-              </Carousel.Item>
-            ))}
+            {allAncillaries.map(({ description, points, ...ancillary }) => {
+              const ancillaryData = !!user
+                ? { points, ...ancillary }
+                : ancillary
+              return (
+                <Carousel.Item
+                  key={ancillary.id}
+                  onClick={() =>
+                    handleCardClick({ description, points, ...ancillary })
+                  }
+                >
+                  <AncillaryCard key={ancillary.id} ancillary={ancillaryData} />
+                </Carousel.Item>
+              )
+            })}
           </Carousel.Content>
           <Carousel.Previous className={styles.navigationButton} />
           <Carousel.Next className={styles.navigationButton} />
           <Carousel.Dots />
         </Carousel>
       </div>
+
+      <AddAncillaryFlowModal
+        user={user}
+        isOpen={isModalOpen}
+        onClose={() => setModalOpen(false)}
+        booking={booking}
+      />
     </div>
   )
 }