136 lines
4.1 KiB
TypeScript
136 lines
4.1 KiB
TypeScript
import React from 'react';
|
|
import { YStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { MobileSheet } from './Sheet';
|
|
import { CTAButton } from './Primitives';
|
|
|
|
type Translator = (key: string, defaultValue?: string) => string;
|
|
|
|
type LegalConsentSheetProps = {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onConfirm: (consents: { acceptedTerms: boolean; acceptedWaiver: boolean }) => Promise<void> | void;
|
|
busy?: boolean;
|
|
requireTerms?: boolean;
|
|
requireWaiver?: boolean;
|
|
copy?: {
|
|
title?: string;
|
|
description?: string;
|
|
checkboxTerms?: string;
|
|
checkboxWaiver?: string;
|
|
errorTerms?: string;
|
|
errorWaiver?: string;
|
|
confirm?: string;
|
|
cancel?: string;
|
|
};
|
|
t: Translator;
|
|
};
|
|
|
|
export function LegalConsentSheet({
|
|
open,
|
|
onClose,
|
|
onConfirm,
|
|
busy = false,
|
|
requireTerms = true,
|
|
requireWaiver = true,
|
|
copy,
|
|
t,
|
|
}: LegalConsentSheetProps) {
|
|
const [acceptedTerms, setAcceptedTerms] = React.useState(false);
|
|
const [acceptedWaiver, setAcceptedWaiver] = React.useState(false);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
|
|
React.useEffect(() => {
|
|
if (open) {
|
|
setAcceptedTerms(false);
|
|
setAcceptedWaiver(false);
|
|
setError(null);
|
|
}
|
|
}, [open]);
|
|
|
|
async function handleConfirm() {
|
|
if (requireTerms && !acceptedTerms) {
|
|
setError(copy?.errorTerms ?? t('events.legalConsent.errorTerms', 'Please confirm the terms.'));
|
|
return;
|
|
}
|
|
|
|
if (requireWaiver && !acceptedWaiver) {
|
|
setError(copy?.errorWaiver ?? t('events.legalConsent.errorWaiver', 'Please confirm the waiver.'));
|
|
return;
|
|
}
|
|
|
|
setError(null);
|
|
await onConfirm({
|
|
acceptedTerms: requireTerms ? acceptedTerms : true,
|
|
acceptedWaiver: requireWaiver ? acceptedWaiver : true,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<MobileSheet
|
|
open={open}
|
|
onClose={onClose}
|
|
title={copy?.title ?? t('events.legalConsent.title', 'Before purchase')}
|
|
footer={
|
|
<YStack space="$2">
|
|
{error ? (
|
|
<Text fontSize="$sm" color="#b91c1c">
|
|
{error}
|
|
</Text>
|
|
) : null}
|
|
<CTAButton
|
|
label={copy?.confirm ?? t('events.legalConsent.confirm', 'Continue to checkout')}
|
|
onPress={handleConfirm}
|
|
loading={busy}
|
|
disabled={busy}
|
|
/>
|
|
<CTAButton
|
|
label={copy?.cancel ?? t('events.legalConsent.cancel', 'Cancel')}
|
|
tone="ghost"
|
|
onPress={onClose}
|
|
disabled={busy}
|
|
/>
|
|
</YStack>
|
|
}
|
|
>
|
|
<YStack space="$2">
|
|
<Text fontSize="$sm" color="#111827">
|
|
{copy?.description ?? t('events.legalConsent.description', 'Please confirm the legal notes before buying an add-on.')}
|
|
</Text>
|
|
{requireTerms ? (
|
|
<label style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
|
|
<input
|
|
type="checkbox"
|
|
checked={acceptedTerms}
|
|
onChange={(event) => setAcceptedTerms(event.target.checked)}
|
|
style={{ marginTop: 4, width: 16, height: 16 }}
|
|
/>
|
|
<Text fontSize="$sm" color="#111827">
|
|
{copy?.checkboxTerms ?? t(
|
|
'events.legalConsent.checkboxTerms',
|
|
'I have read and accept the Terms & Conditions, Privacy Policy, and Right of Withdrawal.',
|
|
)}
|
|
</Text>
|
|
</label>
|
|
) : null}
|
|
{requireWaiver ? (
|
|
<label style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
|
|
<input
|
|
type="checkbox"
|
|
checked={acceptedWaiver}
|
|
onChange={(event) => setAcceptedWaiver(event.target.checked)}
|
|
style={{ marginTop: 4, width: 16, height: 16 }}
|
|
/>
|
|
<Text fontSize="$sm" color="#111827">
|
|
{copy?.checkboxWaiver ?? t(
|
|
'events.legalConsent.checkboxWaiver',
|
|
'I expressly request immediate provision of the digital service and understand my right of withdrawal expires once fulfilled.',
|
|
)}
|
|
</Text>
|
|
</label>
|
|
) : null}
|
|
</YStack>
|
|
</MobileSheet>
|
|
);
|
|
}
|