101 lines
3.5 KiB
TypeScript
101 lines
3.5 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;
|
|
requireWaiver?: boolean;
|
|
t: Translator;
|
|
};
|
|
|
|
export function LegalConsentSheet({ open, onClose, onConfirm, busy = false, requireWaiver = true, 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 (!acceptedTerms) {
|
|
setError(t('events.legalConsent.errorTerms', 'Please confirm the terms.'));
|
|
return;
|
|
}
|
|
|
|
if (requireWaiver && !acceptedWaiver) {
|
|
setError(t('events.legalConsent.errorWaiver', 'Please confirm the waiver.'));
|
|
return;
|
|
}
|
|
|
|
setError(null);
|
|
await onConfirm({ acceptedTerms, acceptedWaiver: requireWaiver ? acceptedWaiver : true });
|
|
}
|
|
|
|
return (
|
|
<MobileSheet
|
|
open={open}
|
|
onClose={onClose}
|
|
title={t('events.legalConsent.title', 'Before purchase')}
|
|
footer={
|
|
<YStack space="$2">
|
|
{error ? (
|
|
<Text fontSize="$sm" color="#b91c1c">
|
|
{error}
|
|
</Text>
|
|
) : null}
|
|
<CTAButton label={t('events.legalConsent.confirm', 'Continue to checkout')} onPress={handleConfirm} loading={busy} disabled={busy} />
|
|
<CTAButton label={t('events.legalConsent.cancel', 'Cancel')} tone="ghost" onPress={onClose} disabled={busy} />
|
|
</YStack>
|
|
}
|
|
>
|
|
<YStack space="$2">
|
|
<Text fontSize="$sm" color="#111827">
|
|
{t('events.legalConsent.description', 'Please confirm the legal notes before buying an add-on.')}
|
|
</Text>
|
|
<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">
|
|
{t(
|
|
'events.legalConsent.checkboxTerms',
|
|
'I have read and accept the Terms & Conditions, Privacy Policy, and Right of Withdrawal.',
|
|
)}
|
|
</Text>
|
|
</label>
|
|
{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">
|
|
{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>
|
|
);
|
|
}
|