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)

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/index.tsx

@@ -4,8 +4,7 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Caption from "@scandic-hotels/design-system/Caption"
-
-import Counter from "../Counter"
+import Stepper from "@scandic-hotels/design-system/Stepper"
 
 import styles from "./adult-selector.module.css"
 
@@ -42,7 +41,7 @@ export default function AdultSelector({
       <Caption color="uiTextHighContrast" type="bold">
         {adultsLabel}
       </Caption>
-      <Counter
+      <Stepper
         count={currentAdults}
         handleOnDecrease={decreaseAdultsCount}
         handleOnIncrease={increaseAdultsCount}

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -4,8 +4,8 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Caption from "@scandic-hotels/design-system/Caption"
+import Stepper from "@scandic-hotels/design-system/Stepper"
 
-import Counter from "../Counter"
 import ChildInfoSelector from "./ChildInfoSelector"
 
 import styles from "./child-selector.module.css"
@@ -58,7 +58,7 @@ export default function ChildSelector({
         <Caption color="uiTextHighContrast" type="bold">
           {childrenLabel}
         </Caption>
-        <Counter
+        <Stepper
           count={currentChildren.length}
           handleOnDecrease={() => {
             decreaseChildrenCount(roomIndex)

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Counter/counter.module.css

@@ -1,14 +0,0 @@
-.counterContainer {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 20px;
-  color: var(--Text-Interactive-Default);
-}
-.counterBtn {
-  width: 40px;
-  height: 40px;
-}
-.counterBtn:not([disabled]) {
-  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
-}

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Counter/index.tsx

@@ -1,47 +0,0 @@
-"use client"
-
-import { IconButton } from "@scandic-hotels/design-system/IconButton"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import styles from "./counter.module.css"
-
-type CounterProps = {
-  count: number
-  handleOnIncrease: () => void
-  handleOnDecrease: () => void
-  disableIncrease: boolean
-  disableDecrease: boolean
-}
-
-export default function Counter({
-  count,
-  handleOnIncrease,
-  handleOnDecrease,
-  disableIncrease,
-  disableDecrease,
-}: CounterProps) {
-  return (
-    <div className={styles.counterContainer}>
-      <IconButton
-        className={styles.counterBtn}
-        onPress={handleOnDecrease}
-        variant="Elevated"
-        isDisabled={disableDecrease}
-      >
-        <MaterialIcon icon="remove" color="CurrentColor" />
-      </IconButton>
-      <Typography variant="Body/Paragraph/mdRegular">
-        <p>{count}</p>
-      </Typography>
-      <IconButton
-        className={styles.counterBtn}
-        onPress={handleOnIncrease}
-        variant="Elevated"
-        isDisabled={disableIncrease}
-      >
-        <MaterialIcon icon="add" color="CurrentColor" />
-      </IconButton>
-    </div>
-  )
-}