"use client" import Image from "next/image" import { useRouter } from "next/navigation" 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<{ success: boolean; redirectUrl?: string }> }) { const router = useRouter() let [isPending, startTransition] = useTransition() const intl = useIntl() const form = useForm({ defaultValues: { dateOfBirth: initialDateOfBirth, termsAndConditions: false, }, }) const handleSubmit = form.handleSubmit((data) => { startTransition(async () => { if (!data.dateOfBirth || !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 dateOfBirth = form.watch("dateOfBirth") const termsAndConditions = form.watch("termsAndConditions") const disableSubmit = !dateOfBirth || !termsAndConditions return (
{"Scandic {intl.formatMessage({ id: "Link your accounts" })}
{intl.formatMessage({ id: "Birth date", })}
{intl.formatMessage({ id: "We require this additional information in order to match your Scandic account with your EuroBonus account.", })}
{intl.formatMessage({ id: "I accept the terms and conditions" })} {intl.formatMessage( { id: "By linking your accounts you accept the Scandic Friends & SAS Terms and Conditions. You will be connected throughout the duration of your employment or until further notice, and you can opt out at any time.", }, { sasScandicTermsAndConditionsLink: (str) => ( {str} ), } )}
) }