Merged in feat/remove-date-input-from-sas-link-flow (pull request #1328)

Remove date input from SAS link flow Approved-by: Linus Flood
2025-02-13 13:30:46 +00:00
parent d6f32bef7c
commit 419d21b3d0
9 changed files with 82 additions and 71 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
@@ -1,60 +1,54 @@
 "use client"

 import Image from "next/image"
-import { useRouter } from "next/navigation"
+import { useParams, useRouter } from "next/navigation"
 import { type ReactNode, useTransition } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"

+import { profileEdit } from "@/constants/routes/myPages"
+
+import { ArrowRightIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
-import DateSelect from "@/components/TempDesignSystem/Form/Date"
+import Label from "@/components/TempDesignSystem/Form/Label"
 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"

+import type { LangParams } from "@/types/params"
+
 type LinkAccountForm = {
-  dateOfBirth: string | null
  termsAndConditions: boolean
 }
 export function LinkAccountForm({
-  initialDateOfBirth,
-  onSubmit,
+  userDateOfBirth,
 }: {
-  initialDateOfBirth: string | null
-  onSubmit: (
-    dateOfBirth: string
-  ) => Promise<{ success: boolean; redirectUrl?: string }>
+  userDateOfBirth: string | null
 }) {
  const router = useRouter()
+  const params = useParams<LangParams>()
  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
+      if (!data.termsAndConditions) return

-      const result = await onSubmit(data.dateOfBirth)
-      if (!result.success || !result.redirectUrl) {
-        throw new Error("Unable to redirect")
-      }
-
-      router.push(result.redirectUrl)
+      const url = `/${params.lang}/sas-x-scandic/login?intent=link`
+      router.push(url)
    })
  })

-  const dateOfBirth = form.watch("dateOfBirth")
  const termsAndConditions = form.watch("termsAndConditions")
-  const disableSubmit = !dateOfBirth || !termsAndConditions
+  const disableSubmit = !userDateOfBirth || !termsAndConditions

  return (
    <FormProvider {...form}>
@@ -70,27 +64,36 @@ export function LinkAccountForm({
            {intl.formatMessage({ id: "Link your accounts" })}
          </Title>
        </div>
-        <div className={styles.dateSelect}>
-          <Body>
-            {intl.formatMessage({
-              id: "Birth date",
-            })}
+        <div className={styles.dateOfBirth}>
+          <Body textTransform="bold">
+            {userDateOfBirth
+              ? intl.formatMessage(
+                  {
+                    id: "Birth date: {dateOfBirth, date, ::MMMM d yyyy}",
+                  },
+                  {
+                    dateOfBirth: new Date(userDateOfBirth),
+                  }
+                )
+              : intl.formatMessage({ id: "Birth date is missing" })}
          </Body>
-          <DateSelect
-            name="dateOfBirth"
-            registerOptions={{
-              required: {
-                value: true,
-                message: intl.formatMessage({ id: "Birth date is required" }),
-              },
-            }}
-          />
+          <Label size="small" className={styles.dateOfBirthDescription}>
+            {intl.formatMessage({
+              id: "We require your birth date in order to link your Scandic account with your SAS EuroBonus account. Please check that it is correct.",
+            })}
+          </Label>
+          <Link
+            href={profileEdit[params.lang]}
+            className={styles.dateOfBirthLink}
+            color="peach80"
+            variant="underscored"
+          >
+            {intl.formatMessage({
+              id: "Edit your personal details",
+            })}
+            <ArrowRightIcon color="peach80" height={18} width={18} />
+          </Link>
        </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"
@@ -101,6 +104,7 @@ export function LinkAccountForm({
                  id: "You must accept the terms and conditions",
                }),
              },
+              disabled: !userDateOfBirth,
            }}
          >
            <Body>
--- a/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/link-sas.module.css
+++ b/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/link-sas.module.css
@@ -6,11 +6,23 @@
  margin-top: var(--Spacing-x3);
 }

-.dateSelect {
+.dateOfBirth {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x1);
  width: 100%;
+  background-color: var(--Main-Brand-WarmWhite);
+  padding: var(--Spacing-x2) var(--Spacing-x3);
+}
+
+.dateOfBirthLink {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+}
+
+.dateOfBirthDescription {
+  color: var(--UI-Text-High-contrast);
 }

 .termsAndConditions {
--- a/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/page.tsx
+++ b/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/page.tsx
@@ -14,33 +14,16 @@ export default async function SASxScandicLinkPage({
 }: PageArgs<LangParams>) {
  const profile = await getProfileSafely()

-  // TODO actually check if profile is already linked
+  // TODO check if already linked
  const alreadyLinked = false

-  async function handleLinkAccount(dateOfBirth: string) {
-    "use server"
-
-    if (dateOfBirth !== profile?.dateOfBirth) {
-      // TODO update users date of birth here
-      console.log("updating date of birth")
-    }
-
-    return {
-      redirectUrl: `/${params.lang}/sas-x-scandic/login?intent=link`,
-      success: true,
-    }
-  }
-
  if (alreadyLinked) {
    redirect(`/${params.lang}/sas-x-scandic/error?errorCode=alreadyLinked`)
  }

  return (
    <SASModal>
-      <LinkAccountForm
-        initialDateOfBirth={profile?.dateOfBirth ?? null}
-        onSubmit={handleLinkAccount}
-      />
+      <LinkAccountForm userDateOfBirth={profile?.dateOfBirth ?? null} />
    </SASModal>
  )
 }