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/AllAncillariesModal/input.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { useState } from "react"
+import { useIntl } from "react-intl"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Modal from "@scandic-hotels/design-system/Modal"
+
+import SelectAncillaryStep from "./SelectAncillaryStep"
+
+import styles from "./allAncillariesModal.module.css"
+
+export default function AllAncillariesModal() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const intl = useIntl()
+
+  const modalTitle = intl.formatMessage({
+    id: "ancillaries.upgradeYourStay",
+    defaultMessage: "Upgrade your stay",
+  })
+  return (
+    <div>
+      <Button
+        variant="Text"
+        size="Small"
+        color="Primary"
+        onPress={() => setIsOpen(true)}
+      >
+        {intl.formatMessage({
+          id: "common.seeAll",
+          defaultMessage: "See all",
+        })}
+        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
+      </Button>
+      <Modal isOpen={isOpen} onToggle={setIsOpen} title={modalTitle}>
+        <div className={styles.modalWrapper}>
+          <SelectAncillaryStep onClose={() => setIsOpen(false)} />
+        </div>
+      </Modal>
+    </div>
+  )
+}