Merged in feat/SW-1370/Guarantee-my-stay-ancillaries (pull request #1545)

Feat/SW-1370/Guarantee my stay ancillaries

* feat(SW-1370): guarantee for ancillaries

* feat(SW-1370): remove console log

* feat(SW-1370): add translations

* feat(SW-1370): small fix

* feat(SW-1370): fix must be guaranteed

* feat(SW-1370): fix logic and comments pr

* feat(SW-1370): fix comments pr

* feat(SW-1370): fix comments pr

* feat(SW-1370): add translation

* feat(SW-1370): add translation and fix pr comment

* feat(SW-1370): fix pr comment

* feat(SW-1370): fix encoding path refId issue

* feat(SW-1370): refactor AddAncillaryStore usage and introduce context provider

* feat(SW-1370): refactor

* feat(SW-1370): refactor ancillaries

* feat(SW-1370): fix merge


Approved-by: Simon.Emanuelsson

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/index.tsx

@@ -1,16 +1,15 @@
 "use client"
-import { useState } from "react"
 import { useIntl } from "react-intl"
 
-import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
-
 import { Carousel } from "@/components/Carousel"
-import { AncillaryCard } from "@/components/TempDesignSystem/AncillaryCard"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { AddAncillaryProvider } from "@/providers/AddAncillaryProvider"
 
 import AddAncillaryFlowModal from "./AddAncillaryFlow/AddAncillaryFlowModal"
+import AncillaryFlowModalWrapper from "./AddAncillaryFlow/AncillaryFlowModalWrapper"
+import WrappedAncillaryCard from "./AddAncillaryFlow/WrappedAncillaryCard"
 import { AddedAncillaries } from "./AddedAncillaries"
-import AncillaryGridModal from "./AncillaryGridModal"
+import ViewAllAncillaries from "./ViewAllAncillaries"
 
 import styles from "./ancillaries.module.css"
 
@@ -20,110 +19,89 @@ import type {
   Ancillary,
 } from "@/types/components/myPages/myStay/ancillaries"
 
-export function Ancillaries({ ancillaries, booking, user }: AncillariesProps) {
+export function Ancillaries({
+  ancillaries,
+  booking,
+  user,
+  savedCreditCards,
+  refId,
+}: AncillariesProps) {
   const intl = useIntl()
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(
-    () => {
-      return ancillaries?.[0]?.categoryName ?? null
-    }
-  )
-
-  const { setSelectedAncillary, setConfirmationNumber, setOpenedFrom } =
-    useAddAncillaryStore()
-  const [isModalOpen, setModalOpen] = useState(false)
 
   if (!ancillaries?.length) {
     return null
   }
 
-  function mergeAncillaries(
+  function filterPoints(ancillaries: Ancillaries) {
+    return ancillaries.map((ancillary) => {
+      return {
+        ...ancillary,
+        ancillaryContent: ancillary.ancillaryContent.map(
+          ({ points, ...ancillary }) => ({
+            ...ancillary,
+            points: user ? points : undefined,
+          })
+        ),
+      }
+    })
+  }
+
+  function generateUniqueAncillaries(
     ancillaries: Ancillaries
   ): Ancillary["ancillaryContent"] {
     const uniqueAncillaries = new Map(
-      ancillaries
-        .flatMap((category) => category.ancillaryContent)
-        .map((ancillary) => [ancillary.id, ancillary])
+      ancillaries.flatMap((a) =>
+        a.ancillaryContent.map((ancillary) => [ancillary.id, ancillary])
+      )
     )
     return [...uniqueAncillaries.values()]
   }
-
-  const allAncillaries = mergeAncillaries(ancillaries)
-
-  const handleCardClick = (
-    ancillary: Ancillary["ancillaryContent"][number]
-  ) => {
-    if (booking?.confirmationNumber) {
-      setConfirmationNumber(booking.confirmationNumber)
-    }
-    setSelectedAncillary(ancillary)
-    setOpenedFrom("list")
-    setModalOpen(true)
-  }
+  const allAncillaries = filterPoints(ancillaries)
+  const uniqueAncillaries = generateUniqueAncillaries(allAncillaries)
 
   return (
-    <div className={styles.container}>
-      <div className={styles.title}>
-        <Title as="h5">{intl.formatMessage({ id: "Upgrade your stay" })}</Title>
-        <AncillaryGridModal
-          ancillaries={ancillaries}
-          selectedCategory={selectedCategory}
-          setSelectedCategory={setSelectedCategory}
-          handleCardClick={handleCardClick}
-        />
+    <AddAncillaryProvider booking={booking} ancillaries={allAncillaries}>
+      <div className={styles.container}>
+        <div className={styles.title}>
+          <Title as="h5">
+            {intl.formatMessage({ id: "Upgrade your stay" })}
+          </Title>
+          <ViewAllAncillaries />
+        </div>
+
+        <div className={styles.ancillaries}>
+          {uniqueAncillaries.slice(0, 4).map((ancillary) => (
+            <WrappedAncillaryCard ancillary={ancillary} key={ancillary.id} />
+          ))}
+        </div>
+
+        <div className={styles.mobileAncillaries}>
+          <Carousel>
+            <Carousel.Content className={styles.carouselContainer}>
+              {uniqueAncillaries.map((ancillary) => {
+                return (
+                  <Carousel.Item key={ancillary.id}>
+                    <WrappedAncillaryCard ancillary={ancillary} />
+                  </Carousel.Item>
+                )
+              })}
+            </Carousel.Content>
+            <Carousel.Previous className={styles.navigationButton} />
+            <Carousel.Next className={styles.navigationButton} />
+            <Carousel.Dots />
+          </Carousel>
+        </div>
+
+        <AddedAncillaries booking={booking} ancillaries={uniqueAncillaries} />
+        <AncillaryFlowModalWrapper>
+          <AddAncillaryFlowModal
+            user={user}
+            booking={booking}
+            refId={refId}
+            savedCreditCards={savedCreditCards}
+          />
+        </AncillaryFlowModalWrapper>
       </div>
-
-      <div className={styles.ancillaries}>
-        {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, 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>
-
-      <AddedAncillaries booking={booking} ancillaries={allAncillaries} />
-
-      <AddAncillaryFlowModal
-        user={user}
-        isOpen={isModalOpen}
-        onClose={() => setModalOpen(false)}
-        booking={booking}
-      />
-    </div>
+    </AddAncillaryProvider>
   )
 }