coupon code system eingeführt. coupons werden vom super admin gemanaged. coupons werden mit paddle synchronisiert und dort validiert. plus: einige mobil-optimierungen im tenant admin pwa.

2025-11-09 20:26:50 +01:00
parent f3c44be76d
commit 082b78cd43
80 changed files with 4855 additions and 435 deletions
--- a/resources/js/pages/marketing/checkout/steps/PaymentStep.tsx
+++ b/resources/js/pages/marketing/checkout/steps/PaymentStep.tsx
@@ -1,9 +1,13 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
-import { LoaderCircle } from 'lucide-react';
+import { LoaderCircle, CheckCircle2, XCircle } from 'lucide-react';
 import { useCheckoutWizard } from '../WizardContext';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import { previewCoupon as requestCouponPreview } from '@/lib/coupons';
+import type { CouponPreviewResponse } from '@/types/coupon';

 type PaymentStatus = 'idle' | 'processing' | 'ready' | 'error';

@@ -108,8 +112,26 @@ export const PaymentStep: React.FC = () => {
  const [message, setMessage] = useState<string>('');
  const [initialised, setInitialised] = useState(false);
  const [inlineActive, setInlineActive] = useState(false);
+  const [couponCode, setCouponCode] = useState<string>(() => {
+    if (typeof window === 'undefined') {
+      return '';
+    }
+
+    const params = new URLSearchParams(window.location.search);
+    const fromQuery = params.get('coupon');
+    if (fromQuery) {
+      return fromQuery;
+    }
+
+    return localStorage.getItem('preferred_coupon_code') ?? '';
+  });
+  const [couponPreview, setCouponPreview] = useState<CouponPreviewResponse | null>(null);
+  const [couponError, setCouponError] = useState<string | null>(null);
+  const [couponNotice, setCouponNotice] = useState<string | null>(null);
+  const [couponLoading, setCouponLoading] = useState(false);
  const paddleRef = useRef<typeof window.Paddle | null>(null);
  const eventCallbackRef = useRef<(event: any) => void>();
+  const hasAutoAppliedCoupon = useRef(false);
  const checkoutContainerClass = 'paddle-checkout-container';

  const paddleLocale = useMemo(() => {
@@ -118,6 +140,84 @@ export const PaymentStep: React.FC = () => {
  }, [i18n.language]);

  const isFree = useMemo(() => (selectedPackage ? Number(selectedPackage.price) <= 0 : false), [selectedPackage]);
+  const hasCoupon = Boolean(couponPreview);
+
+  const applyCoupon = useCallback(async (code: string) => {
+    if (!selectedPackage) {
+      return;
+    }
+
+    const trimmed = code.trim();
+
+    if (!trimmed) {
+      setCouponError(t('coupon.errors.required'));
+      setCouponPreview(null);
+      setCouponNotice(null);
+      return;
+    }
+
+    setCouponLoading(true);
+    setCouponError(null);
+    setCouponNotice(null);
+
+    try {
+      const preview = await requestCouponPreview(selectedPackage.id, trimmed);
+      setCouponPreview(preview);
+      setCouponNotice(
+        t('coupon.applied', {
+          code: preview.coupon.code,
+          amount: preview.pricing.formatted.discount,
+        })
+      );
+      if (typeof window !== 'undefined') {
+        localStorage.setItem('preferred_coupon_code', preview.coupon.code);
+      }
+    } catch (error) {
+      setCouponPreview(null);
+      setCouponNotice(null);
+      setCouponError(error instanceof Error ? error.message : t('coupon.errors.generic'));
+    } finally {
+      setCouponLoading(false);
+    }
+  }, [selectedPackage, t]);
+
+  useEffect(() => {
+    if (hasAutoAppliedCoupon.current) {
+      return;
+    }
+
+    if (couponCode && selectedPackage) {
+      hasAutoAppliedCoupon.current = true;
+      applyCoupon(couponCode);
+    }
+  }, [applyCoupon, couponCode, selectedPackage]);
+
+  useEffect(() => {
+    setCouponPreview(null);
+    setCouponNotice(null);
+    setCouponError(null);
+    hasAutoAppliedCoupon.current = false;
+  }, [selectedPackage?.id]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const params = new URLSearchParams(window.location.search);
+    const queryCoupon = params.get('coupon');
+    if (queryCoupon) {
+      const normalized = queryCoupon.toUpperCase();
+      setCouponCode((current) => current || normalized);
+      localStorage.setItem('preferred_coupon_code', normalized);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && couponCode) {
+      localStorage.setItem('preferred_coupon_code', couponCode);
+    }
+  }, [couponCode]);

  const handleFreeActivation = async () => {
    setPaymentCompleted(true);
@@ -209,6 +309,7 @@ export const PaymentStep: React.FC = () => {
        body: JSON.stringify({
          package_id: selectedPackage.id,
          locale: paddleLocale,
+          coupon_code: couponPreview?.coupon.code ?? undefined,
        }),
      });

@@ -348,6 +449,26 @@ export const PaymentStep: React.FC = () => {
    setPaymentCompleted(false);
  }, [selectedPackage?.id, setPaymentCompleted]);

+  const handleCouponSubmit = useCallback((event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!selectedPackage) {
+      return;
+    }
+
+    applyCoupon(couponCode);
+  }, [applyCoupon, couponCode, selectedPackage]);
+
+  const handleRemoveCoupon = useCallback(() => {
+    setCouponPreview(null);
+    setCouponNotice(null);
+    setCouponError(null);
+    setCouponCode('');
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem('preferred_coupon_code');
+    }
+  }, []);
+
  if (!selectedPackage) {
    return (
      <Alert variant="destructive">
@@ -377,6 +498,63 @@ export const PaymentStep: React.FC = () => {
    <div className="space-y-4">
      <div className="rounded-lg border bg-card p-6 shadow-sm">
        <div className="space-y-4">
+          <div className="space-y-3">
+            <form className="flex flex-col gap-2 sm:flex-row" onSubmit={handleCouponSubmit}>
+              <Input
+                value={couponCode}
+                onChange={(event) => setCouponCode(event.target.value.toUpperCase())}
+                placeholder={t('coupon.placeholder')}
+                className="flex-1"
+              />
+              <div className="flex gap-2">
+                <Button type="submit" disabled={couponLoading || !couponCode.trim()}>
+                  {couponLoading ? t('checkout.payment_step.status_processing_title') : t('coupon.apply')}
+                </Button>
+                {couponPreview && (
+                  <Button type="button" variant="outline" onClick={handleRemoveCoupon}>
+                    {t('coupon.remove')}
+                  </Button>
+                )}
+              </div>
+            </form>
+            {couponError && (
+              <div className="flex items-center gap-2 text-sm text-destructive">
+                <XCircle className="h-4 w-4" />
+                <span>{couponError}</span>
+              </div>
+            )}
+            {couponNotice && (
+              <div className="flex items-center gap-2 text-sm text-emerald-600">
+                <CheckCircle2 className="h-4 w-4" />
+                <span>{couponNotice}</span>
+              </div>
+            )}
+            {couponPreview && (
+              <div className="rounded-lg border bg-muted/20 p-4 text-sm">
+                <p className="mb-3 font-medium text-muted-foreground">{t('coupon.summary_title')}</p>
+                <div className="space-y-2">
+                  <div className="flex justify-between">
+                    <span>{t('coupon.fields.subtotal')}</span>
+                    <span>{couponPreview.pricing.formatted.subtotal}</span>
+                  </div>
+                  <div className="flex justify-between text-emerald-600">
+                    <span>{t('coupon.fields.discount')}</span>
+                    <span>{couponPreview.pricing.formatted.discount}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>{t('coupon.fields.tax')}</span>
+                    <span>{couponPreview.pricing.formatted.tax}</span>
+                  </div>
+                  <Separator />
+                  <div className="flex justify-between font-semibold">
+                    <span>{t('coupon.fields.total')}</span>
+                    <span>{couponPreview.pricing.formatted.total}</span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
          {!inlineActive && (
            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
              <p className="text-sm text-muted-foreground">