Merged in feat/link-employment-route (pull request #2012)

feat(LOY-229): New Link Employment page

* feat(LOY-229): Ship Link Employment page

* fix(LOY-229): review fixes

* fix(LOY-229): update Button component props for better styling consistency

* fix(LOY-229): update ButtonLink href to use linkEmployment route


Approved-by: Christian Andolf

apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment/page.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import Image from "next/image"
+import { useState } from "react"
+import { Checkbox as AriaCheckbox } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { employeeBenefits } from "@/constants/routes/dtmc"
+
+import ButtonLink from "@/components/ButtonLink"
+import useLang from "@/hooks/useLang"
+
+import styles from "./linkEmploymentPage.module.css"
+
+export default function LinkEmploymentPage() {
+  const lang = useLang()
+  const intl = useIntl()
+  const [isChecked, setIsChecked] = useState(false)
+  const linkMyEmploymentText = intl.formatMessage({
+    defaultMessage: "Link my employment",
+  })
+
+  return (
+    <div className={styles.pageWrapper}>
+      <Image
+        src="/_static/img/Scandic_Computer_Coffee.png"
+        alt=""
+        fill
+        className={styles.backgroundImage}
+        priority
+      />
+
+      <div className={styles.contentContainer}>
+        <nav className={styles.nav}>
+          <ButtonLink href={employeeBenefits[lang]} variant="Text">
+            <MaterialIcon
+              icon="chevron_left"
+              size={20}
+              className={styles.backArrow}
+            />
+            <span className={styles.navBackText}>
+              {intl.formatMessage({
+                defaultMessage: "Go back",
+              })}
+            </span>
+          </ButtonLink>
+          <div className={styles.logoContainer}>
+            <ScandicLogoIcon
+              color="Icon/Interactive/Accent"
+              height="20px"
+              width="94px"
+            />
+          </div>
+        </nav>
+
+        <main className={styles.mainContent}>
+          <div className={styles.card}>
+            <Typography variant="Title/Subtitle/lg">
+              <h1 className={styles.heading}>
+                {intl.formatMessage({
+                  defaultMessage: "Link your employment to access benefits",
+                })}
+              </h1>
+            </Typography>
+
+            <div className={styles.formElements}>
+              <div className={styles.checkboxContainer}>
+                <AriaCheckbox
+                  isSelected={isChecked}
+                  onChange={setIsChecked}
+                  className={styles.checkboxWrapper}
+                >
+                  {({ isSelected: isAriaSelected }) => (
+                    <>
+                      <span className={styles.checkbox}>
+                        {isAriaSelected && (
+                          <MaterialIcon icon="check" color="Icon/Inverted" />
+                        )}
+                      </span>
+                      <Typography variant="Body/Paragraph/mdRegular">
+                        <span>
+                          {intl.formatMessage({
+                            defaultMessage: "I accept the terms and conditions",
+                          })}
+                        </span>
+                      </Typography>
+                    </>
+                  )}
+                </AriaCheckbox>
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <p className={styles.termsTextFull}>
+                    {intl.formatMessage(
+                      {
+                        defaultMessage:
+                          "By accepting the {termsLink}, I agree to link my employment to access benefits. The connection will remain active during my employment or until I opt out by sending an email to Scandic's customer service.",
+                      },
+                      {
+                        termsLink: (
+                          // TODO: Update with actual URL for terms and conditions.
+                          <a href={"#"} className={styles.link}>
+                            {intl.formatMessage({
+                              defaultMessage:
+                                "Scandic Family Terms and Conditions",
+                            })}
+                          </a>
+                        ),
+                      }
+                    )}
+                  </p>
+                </Typography>
+              </div>
+
+              {isChecked ? (
+                <ButtonLink
+                  href={"#"} // TODO: Udpate with actual URL for linking employment.
+                >
+                  {linkMyEmploymentText}
+                </ButtonLink>
+              ) : (
+                <Button
+                  variant="Primary"
+                  typography="Body/Paragraph/mdRegular"
+                  isDisabled
+                >
+                  {linkMyEmploymentText}
+                </Button>
+              )}
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}