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.
This commit is contained in:
Codex Agent
@@ -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')}
|
||||
|
||||
Reference in New Issue
Block a user