Merged in feat/SW-1676-modify-contact-details-my-stay-anonymous (pull request #1468)

Feat/SW-1676 modify contact details my stay anonymous

* feat(SW-1676): Modify guest details step 1

* feat(SW-1676) Integration to api to update guest details

* feat(SW-1676) Reuse of old modal

* feat(SW-1676) updated modify guest

* feat(SW-1676) cleanup

* feat(SW-1676) updated myStayReturnRoute to sessionStorage


Approved-by: Niclas Edenvin

apps/scandic-web/components/Modal/index.tsx

@@ -21,6 +21,7 @@ import {
   type ModalProps,
 } from "./modal"
 import { fade, slideInOut } from "./motionVariants"
+import { modalContentVariants } from "./variants"
 
 import styles from "./modal.module.css"
 
@@ -36,9 +37,15 @@ function InnerModal({
   children,
   title,
   subtitle,
+  withActions,
+  hideHeader,
 }: PropsWithChildren<InnerModalProps>) {
   const intl = useIntl()
 
+  const contentClassNames = modalContentVariants({
+    withActions: withActions,
+  })
+
   function modalStateHandler(newAnimationState: AnimationState) {
     setAnimation((currentAnimationState) =>
       newAnimationState === AnimationStateEnum.hidden &&
@@ -79,27 +86,34 @@ function InnerModal({
         >
           {({ close }) => (
             <>
-              <header
-                className={`${styles.header} ${!subtitle ? styles.verticalCenter : ""}`}
-              >
-                <div>
-                  {title && (
-                    <Subtitle type="one" color="uiTextHighContrast">
-                      {title}
-                    </Subtitle>
-                  )}
-                  {subtitle && (
-                    <Preamble asChild>
-                      <span>{subtitle}</span>
-                    </Preamble>
-                  )}
-                </div>
+              {!hideHeader && (
+                <header
+                  className={`${styles.header} ${!subtitle ? styles.verticalCenter : ""}`}
+                >
+                  <div>
+                    {title && (
+                      <Subtitle type="one" color="uiTextHighContrast">
+                        {title}
+                      </Subtitle>
+                    )}
+                    {subtitle && (
+                      <Preamble asChild>
+                        <span>{subtitle}</span>
+                      </Preamble>
+                    )}
+                  </div>
 
-                <button onClick={close} type="button" className={styles.close}>
-                  <CloseLargeIcon color="uiTextMediumContrast" />
-                </button>
-              </header>
-              <section className={styles.content}>{children}</section>
+                  <button
+                    onClick={close}
+                    type="button"
+                    className={styles.close}
+                  >
+                    <CloseLargeIcon color="uiTextMediumContrast" />
+                  </button>
+                </header>
+              )}
+
+              <section className={contentClassNames}>{children}</section>
             </>
           )}
         </Dialog>
@@ -116,6 +130,8 @@ export default function Modal({
   title,
   subtitle,
   children,
+  withActions = false,
+  hideHeader = false,
 }: PropsWithChildren<ModalProps>) {
   const [animation, setAnimation] = useState<AnimationState>(
     AnimationStateEnum.visible
@@ -142,6 +158,8 @@ export default function Modal({
         isOpen={isOpen}
         title={title}
         subtitle={subtitle}
+        withActions={withActions}
+        hideHeader={hideHeader}
       >
         {children}
       </InnerModal>
@@ -163,6 +181,7 @@ export default function Modal({
         setAnimation={setAnimation}
         title={title}
         subtitle={subtitle}
+        withActions={withActions}
       >
         {children}
       </InnerModal>