150 lines
4.9 KiB
TypeScript
150 lines
4.9 KiB
TypeScript
"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<LangParams>()
|
|
let [isPending, startTransition] = useTransition()
|
|
const intl = useIntl()
|
|
const form = useForm<LinkAccountForm>({
|
|
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 (
|
|
<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.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>
|
|
<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>
|
|
<div className={styles.termsAndConditions}>
|
|
<Checkbox
|
|
name="termsAndConditions"
|
|
registerOptions={{
|
|
required: {
|
|
value: true,
|
|
message: intl.formatMessage({
|
|
id: "You must accept the terms and conditions",
|
|
}),
|
|
},
|
|
disabled: !userDateOfBirth,
|
|
}}
|
|
>
|
|
<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>
|
|
)
|
|
}
|