Merged in fix/STAY-135 (pull request #3368)

Fix/STAY-135 & STAY-127

* fix: make quantity and delivery separate steps in mobile

* fix: update design for delivery step in ancillary flow

* fix: add error state for missing time

* fix: only allow points or cash payment for ancillaries

* fix: break out stepper to design system

* fix: update design of select quantity step in add ancillaries flow

* fix: add error states for quantity

* fix: handle insufficient points case

* fix: update stepper to include optional disabledMessage tooltip

* fix: handle validations

* fix: change name to camel case


Approved-by: Bianca Widstam
Approved-by: Chuma Mcphoy (We Ahead)

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

@@ -1,12 +1,29 @@
-import { useMediaQuery } from "usehooks-ts"
+import {
+  AncillaryStepEnum,
+  useAddAncillaryStore,
+} from "@/stores/my-stay/add-ancillary-flow"
 
-import Desktop from "./Desktop"
-import Mobile from "./Mobile"
+import ConfirmationStep from "./ConfirmationStep"
+import DeliveryMethodStep from "./DeliveryDetailsStep"
+import SelectQuantityStep from "./SelectQuantityStep"
 
 import type { StepsProps } from "@/types/components/myPages/myStay/ancillaries"
 
-export default function Steps(props: StepsProps) {
-  const isMobile = useMediaQuery("(max-width: 767px)")
+export default function Steps({ user, savedCreditCards, error }: StepsProps) {
+  const currentStep = useAddAncillaryStore((state) => state.currentStep)
 
-  return isMobile ? <Mobile {...props} /> : <Desktop {...props} />
+  switch (currentStep) {
+    case AncillaryStepEnum.selectQuantity:
+      return <SelectQuantityStep user={user} />
+    case AncillaryStepEnum.selectDelivery:
+      return <DeliveryMethodStep />
+    case AncillaryStepEnum.confirmation:
+      return (
+        <ConfirmationStep
+          savedCreditCards={savedCreditCards}
+          user={user}
+          error={error}
+        />
+      )
+  }
 }