completed addon checkout in mobile event admin

resources/js/admin/mobile/components/LegalConsentSheet.tsx

@@ -0,0 +1,100 @@
+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>
+  );
+}