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/Packages.tsx
+++ b/resources/js/pages/marketing/Packages.tsx
@@ -1,20 +1,23 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, FormEvent } from 'react';
 import { Head, Link, usePage } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
 import type { TFunction } from 'i18next';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
+import { Input } from '@/components/ui/input';
 import { cn } from '@/lib/utils';
 import MarketingLayout from '@/layouts/mainWebsite';
 import { useAnalytics } from '@/hooks/useAnalytics';
 import { useCtaExperiment } from '@/hooks/useCtaExperiment';
-import { ArrowRight, ShoppingCart, Check, X, Users, Image, Shield, Star, Sparkles } from 'lucide-react';
+import { ArrowRight, ShoppingCart, Check, X, Users, Image, Shield, Star, Sparkles, CheckCircle2, XCircle } from 'lucide-react';
+import { previewCoupon as requestCouponPreview } from '@/lib/coupons';
+import type { CouponPreviewResponse } from '@/types/coupon';

 interface Package {
  id: number;
@@ -52,6 +55,10 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
  const [open, setOpen] = useState(false);
  const [selectedPackage, setSelectedPackage] = useState<Package | null>(null);
  const [currentStep, setCurrentStep] = useState<'overview' | 'deep' | 'testimonials'>('overview');
+  const [couponCode, setCouponCode] = useState('');
+  const [couponPreview, setCouponPreview] = useState<CouponPreviewResponse | null>(null);
+  const [couponError, setCouponError] = useState<string | null>(null);
+  const [couponLoading, setCouponLoading] = useState(false);
  const { props } = usePage();
  const { auth } = props as any;
  const { t } = useTranslation('marketing');
@@ -75,6 +82,19 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
    }
  }, [endcustomerPackages, resellerPackages]);

+  useEffect(() => {
+    const couponParam = new URLSearchParams(window.location.search).get('coupon');
+    if (couponParam) {
+      setCouponCode(couponParam.toUpperCase());
+    }
+  }, []);
+
+  useEffect(() => {
+    setCouponPreview(null);
+    setCouponError(null);
+    setCouponLoading(false);
+  }, [selectedPackage?.id]);
+
  const testimonials = [
    { name: tCommon('testimonials.anna.name'), text: t('packages.testimonials.anna'), rating: 5 },
    { name: tCommon('testimonials.max.name'), text: t('packages.testimonials.max'), rating: 5 },
@@ -125,6 +145,11 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
    ? isHighlightedPackage(selectedPackage, selectedVariant)
    : false;

+  const appliedCouponCode = couponPreview?.coupon.code ?? null;
+  const purchaseUrl = selectedPackage
+    ? `/purchase-wizard/${selectedPackage.id}${appliedCouponCode ? `?coupon=${appliedCouponCode}` : ''}`
+    : '#';
+
  const { trackEvent } = useAnalytics();

  const handleCardClick = (pkg: Package, variant: 'endcustomer' | 'reseller') => {
@@ -148,6 +173,40 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
    });
  };

+  const handleCouponSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!selectedPackage) {
+      return;
+    }
+
+    const trimmed = couponCode.trim();
+    if (!trimmed) {
+      setCouponPreview(null);
+      setCouponError(t('coupon.errors.required'));
+      return;
+    }
+
+    setCouponLoading(true);
+    setCouponError(null);
+
+    try {
+      const preview = await requestCouponPreview(selectedPackage.id, trimmed);
+      setCouponPreview(preview);
+    } catch (error) {
+      setCouponPreview(null);
+      setCouponError(error instanceof Error ? error.message : t('coupon.errors.generic'));
+    } finally {
+      setCouponLoading(false);
+    }
+  };
+
+  const handleRemoveCoupon = () => {
+    setCouponPreview(null);
+    setCouponError(null);
+    setCouponCode('');
+  };
+
  // nextStep entfernt, da Tabs nun parallel sind

 const getFeatureIcon = (feature: string) => {
@@ -795,6 +854,52 @@ function PackageCard({
                                  <ArrowRight className="h-4 w-4" />
                                </button>
                              )}
+                              <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>
+                              )}
+                              {couponPreview && (
+                                <div className="rounded-lg border bg-muted/20 p-3 text-sm">
+                                  <div className="flex items-center gap-2 text-emerald-600">
+                                    <CheckCircle2 className="h-4 w-4" />
+                                    <span>{t('coupon.applied', { code: couponPreview.coupon.code, amount: couponPreview.pricing.formatted.discount })}</span>
+                                  </div>
+                                  <div className="mt-2 space-y-1">
+                                    <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.total')}</span>
+                                      <span>{couponPreview.pricing.formatted.total}</span>
+                                    </div>
+                                  </div>
+                                </div>
+                              )}
                              <Button
                                asChild
                                className={cn(
@@ -804,12 +909,18 @@ function PackageCard({
                                )}
                            >
                              <Link
-                                href={`/purchase-wizard/${selectedPackage.id}`}
+                                href={purchaseUrl}
                                onClick={() => {
                                  if (selectedPackage) {
                                    handleCtaClick(selectedPackage, selectedVariant);
+                                    localStorage.setItem('preferred_package', JSON.stringify(selectedPackage));
+                                  }
+
+                                  if (appliedCouponCode) {
+                                    localStorage.setItem('preferred_coupon_code', appliedCouponCode);
+                                  } else {
+                                    localStorage.removeItem('preferred_coupon_code');
                                  }
-                                  localStorage.setItem('preferred_package', JSON.stringify(selectedPackage));
                                }}
                              >
                                  {t('packages.to_order')}
--- 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">