Merged in fix/handle-single-ancillaries (pull request #3231)

Fix(STAY-128): Handle single ancillaries

* fix: refactor ancillaries flow

* fix: add logic to determine if an ancillary requires quantity

* fix: breakout ancillary description to its own component

* fix: cleanup

* fix: cleanup


Approved-by: Bianca Widstam
Approved-by: Erik Tiekstra

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

@@ -0,0 +1,45 @@
+import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
+
+import { AncillaryCard } from "@/components/TempDesignSystem/AncillaryCard"
+import { trackViewAncillary } from "@/utils/tracking/myStay"
+
+import type { SelectedAncillary } from "@/types/components/myPages/myStay/ancillaries"
+
+interface WrappedAncillaryProps {
+  ancillary: SelectedAncillary
+  onClose?: () => void
+}
+
+export default function WrappedAncillaryCard({
+  onClose,
+  ancillary,
+}: WrappedAncillaryProps) {
+  const { description, ...ancillaryWithoutDescription } = ancillary
+  const { selectAncillary, booking } = useAddAncillaryStore((state) => ({
+    selectAncillary: state.selectAncillary,
+    booking: state.booking,
+  }))
+
+  function clickAncillary() {
+    if (typeof onClose === "function") {
+      onClose()
+    }
+    selectAncillary(ancillary)
+    trackViewAncillary(ancillary, booking)
+  }
+
+  return (
+    <div
+      tabIndex={0}
+      role="button"
+      onClick={clickAncillary}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          clickAncillary()
+        }
+      }}
+    >
+      <AncillaryCard ancillary={ancillaryWithoutDescription} />
+    </div>
+  )
+}