completed addon checkout in mobile event admin

resources/js/admin/mobile/EventRecapPage.tsx

@@ -26,6 +26,7 @@ import { MobileShell } from './components/MobileShell';
 import { MobileCard, CTAButton, PillBadge } from './components/Primitives';
 import { adminPath } from '../constants';
 import { selectAddonKeyForScope } from './addons';
+import { LegalConsentSheet } from './components/LegalConsentSheet';
 
 export default function MobileEventRecapPage() {
   const { slug } = useParams<{ slug?: string }>();
@@ -42,6 +43,9 @@ export default function MobileEventRecapPage() {
   const [busy, setBusy] = React.useState(false);
   const [archiveBusy, setArchiveBusy] = React.useState(false);
   const [checkoutBusy, setCheckoutBusy] = React.useState(false);
+  const [consentOpen, setConsentOpen] = React.useState(false);
+  const [consentBusy, setConsentBusy] = React.useState(false);
+  const [consentAddonKey, setConsentAddonKey] = React.useState<string | null>(null);
 
   const load = React.useCallback(async () => {
     if (!slug) return;
@@ -131,18 +135,27 @@ export default function MobileEventRecapPage() {
     }
   }
 
-  async function checkoutAddon() {
+  function startAddonCheckout() {
     if (!slug) return;
     const addonKey = selectAddonKeyForScope(addons, 'gallery');
+    setConsentAddonKey(addonKey);
+    setConsentOpen(true);
+  }
+
+  async function confirmAddonCheckout(consents: { acceptedTerms: boolean; acceptedWaiver: boolean }) {
+    if (!slug || !consentAddonKey) return;
     const currentUrl = typeof window !== 'undefined' ? `${window.location.origin}${adminPath(`/mobile/events/${slug}/recap`)}` : '';
     const successUrl = `${currentUrl}?addon_success=1`;
     setCheckoutBusy(true);
+    setConsentBusy(true);
     try {
       const checkout = await createEventAddonCheckout(slug, {
-        addon_key: addonKey,
+        addon_key: consentAddonKey,
         quantity: 1,
         success_url: successUrl,
         cancel_url: currentUrl,
+        accepted_terms: consents.acceptedTerms,
+        accepted_waiver: consents.acceptedWaiver,
       });
       if (checkout.checkout_url) {
         window.location.href = checkout.checkout_url;
@@ -155,6 +168,9 @@ export default function MobileEventRecapPage() {
       }
     } finally {
       setCheckoutBusy(false);
+      setConsentBusy(false);
+      setConsentOpen(false);
+      setConsentAddonKey(null);
     }
   }
 
@@ -285,7 +301,7 @@ export default function MobileEventRecapPage() {
             <CTAButton
               label={t('events.recap.extendGallery', 'Galerie verlängern')}
               onPress={() => {
-                void checkoutAddon();
+                startAddonCheckout();
               }}
               loading={checkoutBusy}
             />
@@ -338,6 +354,17 @@ export default function MobileEventRecapPage() {
           </MobileCard>
         </YStack>
       ) : null}
+      <LegalConsentSheet
+        open={consentOpen}
+        onClose={() => {
+          if (consentBusy) return;
+          setConsentOpen(false);
+          setConsentAddonKey(null);
+        }}
+        onConfirm={confirmAddonCheckout}
+        busy={consentBusy}
+        t={t}
+      />
     </MobileShell>
   );
 }