Merged in fix/STAY-133 (pull request #3313)

Fix/STAY-133 * fix: Add static summary buttons row on add ancillary flow * fix: refactor handling of modals * fix: refactor file structure for add ancillary flow * Merged in chore/replace-deprecated-body (pull request #3300) Replace deprecated <Body> with <Typography> * chore: replace deprecated body component * refactor: replace Body component with Typography across various components * merge Approved-by: Bianca Widstam Approved-by: Matilda Landström Approved-by: Bianca Widstam Approved-by: Matilda Landström
2025-12-11 07:29:36 +00:00
parent 5bcbc23732
commit cd8b30f2ec
35 changed files with 208 additions and 214 deletions
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/index.tsx
@@ -0,0 +1,47 @@
+import Modal from "@scandic-hotels/design-system/Modal"
+
+import {
+  AncillaryStepEnum,
+  useAddAncillaryStore,
+} from "@/stores/my-stay/add-ancillary-flow"
+
+import Description from "../Description"
+import Steps from "../Steps"
+import Summary from "./Summary"
+
+import styles from "./addAncillaryModal.module.css"
+
+import type { StepsProps } from "@/types/components/myPages/myStay/ancillaries"
+
+export default function AddAncillaryModal({
+  error,
+  savedCreditCards,
+  user,
+}: StepsProps) {
+  const { isOpen, closeModal, selectedAncillaryTitle, currentStep } =
+    useAddAncillaryStore((state) => ({
+      isOpen: state.isOpen,
+      closeModal: state.closeModal,
+      selectedAncillaryTitle: state.selectedAncillary?.title,
+      currentStep: state.currentStep,
+    }))
+  return (
+    <Modal
+      isOpen={isOpen}
+      onToggle={closeModal}
+      title={selectedAncillaryTitle}
+      withActions
+      contentClassName={styles.modalContent}
+      className={styles.modal}
+    >
+      <div className={styles.modalScrollable}>
+        <Description />
+        <Steps user={user} savedCreditCards={savedCreditCards} error={error} />
+      </div>
+
+      <Summary
+        isConfirmation={currentStep === AncillaryStepEnum.confirmation}
+      />
+    </Modal>
+  )
+}