feat: refactor of my stay

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/CustomerSupportModal/customerSupport.module.css

@@ -0,0 +1,30 @@
+.links {
+  display: grid;
+  gap: var(--Space-x05);
+}
+
+.link {
+  align-items: center;
+  background: var(--Surface-Feedback-Information);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: var(--Corner-radius-Medium);
+  color: var(--Text-Interactive-Default);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+  padding: var(--Space-x3);
+  /* text-decoration: none; */
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
+}
+
+@media screen and (min-width: 768px) {
+  .links {
+    gap: var(--Space-x3);
+    grid-template-columns: 1fr 1fr;
+  }
+}

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/CustomerSupportModal/index.tsx

@@ -0,0 +1,78 @@
+"use client"
+import Link from "next/link"
+import { Dialog } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import Modal from "@/components/HotelReservation/MyStay/ReferenceCard/Modal"
+
+import styles from "./customerSupport.module.css"
+
+export default function CustomerSupportModal() {
+  const intl = useIntl()
+  const { email, phone } = useMyStayStore((state) => ({
+    email: state.hotel.contactInformation.email,
+    phone: state.hotel.contactInformation.phoneNumber,
+  }))
+
+  const title = intl.formatMessage({ defaultMessage: "Customer service" })
+  const contact = intl.formatMessage(
+    {
+      defaultMessage:
+        "Please call {phone} or email us at {email} for assistance with your order.",
+    },
+    { email, phone }
+  )
+
+  return (
+    <Modal>
+      <Dialog>
+        {({ close }) => (
+          <Modal.Content>
+            <Modal.Content.Header handleClose={close} title={title}>
+              <Typography variant="Body/Paragraph/mdRegular">
+                <p>{contact}</p>
+              </Typography>
+            </Modal.Content.Header>
+            <Modal.Content.Body>
+              <div className={styles.links}>
+                <Link className={styles.link} href={`tel:${phone}`}>
+                  <MaterialIcon color="Icon/Interactive/Default" icon="call" />
+                  <Typography variant="Title/Subtitle/md">
+                    <span>
+                      {intl.formatMessage({
+                        defaultMessage: "Make a call",
+                      })}
+                    </span>
+                  </Typography>
+                </Link>
+                <Link className={styles.link} href={`mailto:${email}`}>
+                  <MaterialIcon color="Icon/Interactive/Default" icon="mail" />
+                  <Typography variant="Title/Subtitle/md">
+                    <span>
+                      {intl.formatMessage({
+                        defaultMessage: "Send an email",
+                      })}
+                    </span>
+                  </Typography>
+                </Link>
+              </div>
+            </Modal.Content.Body>
+            <Modal.Content.Footer>
+              <Modal.Content.Footer.Secondary onClick={close}>
+                {intl.formatMessage({ defaultMessage: "Back" })}
+              </Modal.Content.Footer.Secondary>
+              <Modal.Content.Footer.Primary intent="secondary" onClick={close}>
+                {intl.formatMessage({ defaultMessage: "Close" })}
+              </Modal.Content.Footer.Primary>
+            </Modal.Content.Footer>
+          </Modal.Content>
+        )}
+      </Dialog>
+    </Modal>
+  )
+}