146 lines
4.6 KiB
TypeScript
146 lines
4.6 KiB
TypeScript
"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<LinkAccountForm>({
|
|
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 (
|
|
<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>
|
|
)
|
|
}
|