"use client" import Image from "next/image" 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 Label from "@/components/TempDesignSystem/Form/Label" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./link-sas.module.css" import type { LangParams } from "@/types/params" type LinkAccountForm = { termsAndConditions: boolean } export function LinkAccountForm({ userDateOfBirth, }: { userDateOfBirth: string | null }) { const router = useRouter() const params = useParams() let [isPending, startTransition] = useTransition() const intl = useIntl() const form = useForm({ defaultValues: { termsAndConditions: false, }, }) const handleSubmit = form.handleSubmit((data) => { startTransition(async () => { if (!data.termsAndConditions) return const url = `/${params.lang}/sas-x-scandic/login?intent=link` router.push(url) }) }) const termsAndConditions = form.watch("termsAndConditions") const disableSubmit = !userDateOfBirth || !termsAndConditions return (
{"Scandic {intl.formatMessage({ id: "Link your accounts" })}
{userDateOfBirth ? intl.formatMessage( { id: "Birth date: {dateOfBirth, date, ::MMMM d yyyy}", }, { dateOfBirth: new Date(userDateOfBirth), } ) : intl.formatMessage({ id: "Birth date is missing" })} {intl.formatMessage({ id: "Edit your personal details", })}
{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} ), } )}
) }