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/design-system/lib/components/Stepper/index.tsx

@@ -0,0 +1,58 @@
+import { IconButton } from '../IconButton'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { Tooltip } from '../Tooltip'
+import { Typography } from '../Typography'
+
+import styles from './stepper.module.css'
+
+type StepperProps = {
+  count: number
+  handleOnIncrease: () => void
+  handleOnDecrease: () => void
+  disableIncrease: boolean
+  disableDecrease: boolean
+  disabledMessage?: string
+}
+
+export default function Stepper({
+  count,
+  handleOnIncrease,
+  handleOnDecrease,
+  disableIncrease,
+  disableDecrease,
+  disabledMessage,
+}: StepperProps) {
+  return (
+    <div className={styles.counterContainer}>
+      <IconButton
+        className={styles.counterBtn}
+        onPress={handleOnDecrease}
+        variant="Elevated"
+        isDisabled={disableDecrease}
+      >
+        <MaterialIcon icon="remove" color="CurrentColor" />
+      </IconButton>
+      <div className={styles.countDisplay}>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>{count}</p>
+        </Typography>
+      </div>
+      <Tooltip
+        text={disabledMessage}
+        isVisible={Boolean(disabledMessage && disableIncrease)}
+        position="top"
+        arrow="right"
+        isTouchable
+      >
+        <IconButton
+          className={styles.counterBtn}
+          onPress={handleOnIncrease}
+          variant="Elevated"
+          isDisabled={disableIncrease}
+        >
+          <MaterialIcon icon="add" color="CurrentColor" />
+        </IconButton>
+      </Tooltip>
+    </div>
+  )
+}

packages/design-system/lib/components/Stepper/stepper.module.css

@@ -0,0 +1,19 @@
+.counterContainer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--Space-x1);
+  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);
+}
+
+.countDisplay {
+  width: 20px;
+  text-align: center;
+}