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/Description/description.module.css

@@ -1,17 +1,17 @@
 .price {
   display: flex;
-  gap: var(--Space-x2);
+  gap: var(--Space-x05);
   align-items: center;
 }
 
 .contentContainer {
   display: flex;
   flex-direction: column;
+  gap: var(--Space-x1);
 }
 
 .description {
   display: flex;
-  margin: var(--Space-x2) 0;
 }
 
 .pointsDivider {
@@ -30,6 +30,15 @@
   height: var(--Space-x4);
 }
 
+.image {
+  aspect-ratio: 2 / 1;
+  border-radius: var(--Corner-radius-md);
+  object-fit: cover;
+  width: 100%;
+  height: auto;
+  margin-bottom: var(--Space-x15);
+}
+
 @media screen and (min-width: 768px) {
   .breakfastPriceList {
     flex-direction: row;

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

@@ -2,6 +2,7 @@ import { useIntl } from "react-intl"
 
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import {
@@ -27,11 +28,18 @@ export default function Description() {
 
   return (
     <div className={styles.contentContainer}>
+      <Image
+        src={selectedAncillary.imageUrl}
+        width={400}
+        height={200}
+        alt={selectedAncillary.title}
+        className={styles.image}
+      />
       <div className={styles.price}>
-        <Typography variant="Body/Paragraph/mdBold">
-          {isBreakfast ? (
-            <BreakfastPriceList />
-          ) : (
+        {isBreakfast ? (
+          <BreakfastPriceList />
+        ) : (
+          <Typography variant="Body/Paragraph/mdBold">
             <p>
               {formatPrice(
                 intl,
@@ -39,26 +47,37 @@ export default function Description() {
                 selectedAncillary.price.currency
               )}
             </p>
-          )}
-        </Typography>
+          </Typography>
+        )}
+
         {selectedAncillary.points && (
-          <div className={styles.pointsDivider}>
-            <Divider variant="vertical" />
-            <Typography variant="Body/Paragraph/mdBold">
-              <p>
-                {intl.formatMessage(
-                  {
-                    id: "common.numberOfPoints",
-                    defaultMessage:
-                      "{points, plural, one {# point} other {# points}}",
-                  },
-                  {
-                    points: selectedAncillary.points,
-                  }
-                )}
-              </p>
-            </Typography>
-          </div>
+          <Typography variant="Body/Paragraph/mdBold">
+            <p>
+              {intl.formatMessage(
+                {
+                  id: "common.orNumberOfPoints",
+                  defaultMessage:
+                    "or {points, plural, one {# point} other {# points}}",
+                },
+                {
+                  points: selectedAncillary.points,
+                }
+              )}
+            </p>
+          </Typography>
+        )}
+        {selectedAncillary.requiresQuantity && (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p>
+              {intl.formatMessage(
+                {
+                  id: "addAncillaryFlowModal.perUnit",
+                  defaultMessage: "/per {unit}",
+                },
+                { unit: selectedAncillary.unitName }
+              )}
+            </p>
+          </Typography>
         )}
       </div>
       <div className={styles.description}>