Merged in feature/sas-login (pull request #1256)

First steps towards the SAS partnership * otp flow now pretends to do the linking * Update LinkAccountForm header * Update redirect times * Clean up comments * Set maxAge on sas cookies * make all SAS routes protected * Merge remote-tracking branch 'refs/remotes/origin/feature/sas-login' into feature/sas-login * Require auth for sas link flow * Fix resend otp * Add error support to OneTimePasswordForm * Add Sentry to SAS error boundary * Move SAS_REQUEST_OTP_STATE_STORAGE_COOKIE_NAME * Add missing translations * Merge branch 'master' of bitbucket.org:scandic-swap/web into feature/sas-login * Merge branch 'feature/sas-login' of bitbucket.org:scandic-swap/web into feature/sas-login * Add TooManyCodesError component * Refactor GenericError to support new errors * Add FailedAttemptsError * remove removed component <VWOScript/> * Merge branch 'feature/sas-login' of bitbucket.org:scandic-swap/web into feature/sas-login * remove local cookie-bot reference * Fix sas campaign logo scaling * feature toggle the SAS stuff * Merge branch 'feature/sas-login' of bitbucket.org:scandic-swap/web into feature/sas-login * fix: use env vars for SAS endpoints Approved-by: Linus Flood
2025-02-05 14:43:14 +00:00
parent e3b1bfc414
commit 46ebbbba8f
62 changed files with 2606 additions and 89 deletions
--- a/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx
+++ b/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx
@@ -0,0 +1,136 @@
+"use client"
+
+import Image from "next/image"
+import { type ReactNode, useTransition } from "react"
+import { FormProvider, useForm } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
+import DateSelect from "@/components/TempDesignSystem/Form/Date"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import styles from "./link-sas.module.css"
+
+type LinkAccountForm = {
+  dateOfBirth: string | null
+  termsAndConditions: boolean
+}
+export function LinkAccountForm({
+  initialDateOfBirth,
+  onSubmit,
+}: {
+  initialDateOfBirth: string | null
+  onSubmit: (dateOfBirth: string) => Promise<void>
+}) {
+  let [isPending, startTransition] = useTransition()
+  const intl = useIntl()
+  const form = useForm<LinkAccountForm>({
+    defaultValues: {
+      dateOfBirth: initialDateOfBirth,
+      termsAndConditions: false,
+    },
+  })
+
+  const handleSubmit = form.handleSubmit((data) => {
+    startTransition(async () => {
+      if (!data.dateOfBirth || !data.termsAndConditions) return
+
+      await onSubmit(data.dateOfBirth)
+    })
+  })
+
+  const dateOfBirth = form.watch("dateOfBirth")
+  const termsAndConditions = form.watch("termsAndConditions")
+  const disableSubmit = !dateOfBirth || !termsAndConditions
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit} className={styles.form}>
+        <div className={styles.titles}>
+          <Image
+            alt={"Scandic ❤️ SAS"}
+            height={25}
+            width={182}
+            src="/_static/img/partner/sas/sas-campaign-logo.png"
+          />
+          <Title level="h3" textTransform="regular">
+            {intl.formatMessage({ id: "Link your accounts" })}
+          </Title>
+        </div>
+        <div className={styles.dateSelect}>
+          <Body>
+            {intl.formatMessage({
+              id: "Birth date",
+            })}
+          </Body>
+          <DateSelect
+            name="dateOfBirth"
+            registerOptions={{
+              required: {
+                value: true,
+                message: intl.formatMessage({ id: "Birth date is required" }),
+              },
+            }}
+          />
+        </div>
+        <Caption textAlign="left">
+          {intl.formatMessage({
+            id: "We require this additional information in order to match your Scandic account with your EuroBonus account.",
+          })}
+        </Caption>
+        <div className={styles.termsAndConditions}>
+          <Checkbox
+            name="termsAndConditions"
+            registerOptions={{
+              required: {
+                value: true,
+                message: intl.formatMessage({
+                  id: "You must accept the terms and conditions",
+                }),
+              },
+            }}
+          >
+            <Body>
+              {intl.formatMessage({ id: "I accept the terms and conditions" })}
+            </Body>
+          </Checkbox>
+          <Body className={styles.termsDescription}>
+            {intl.formatMessage<ReactNode>(
+              {
+                id: "By linking your accounts you accept the <sasScandicTermsAndConditionsLink>Scandic Friends & SAS Terms and Conditions</sasScandicTermsAndConditionsLink>. You will be connected throughout the duration of your employment or until further notice, and you can opt out at any time.",
+              },
+              {
+                sasScandicTermsAndConditionsLink: (str) => (
+                  <Link
+                    // TODO correct link
+                    href={"#"}
+                    weight="bold"
+                    variant="default"
+                    textDecoration="underline"
+                  >
+                    {str}
+                  </Link>
+                ),
+              }
+            )}
+          </Body>
+        </div>
+        <div className={styles.ctaContainer}>
+          <Button
+            theme="base"
+            fullWidth
+            className={styles.ctaButton}
+            type="submit"
+            disabled={isPending || disableSubmit}
+          >
+            {intl.formatMessage({ id: "Link my accounts" })}
+          </Button>
+        </div>
+      </form>
+    </FormProvider>
+  )
+}