refactor: subdivide monolithic order wizard into clean modular step components

shop/components/wizard/step-summary.tsx

@@ -0,0 +1,275 @@
+'use client'
+
+import React from 'react'
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
+import { Separator } from '@/components/ui/separator'
+import { Button } from '@/components/ui/button'
+import { ShieldCheck, Building2, Calendar, Loader2 } from 'lucide-react'
+import * as Icons from 'lucide-react'
+import { Category, Product, EndCustomer, Profile } from '@/lib/types'
+
+interface StepSummaryProps {
+  finalItemsToShow: any[]
+  visibleCategories: Category[]
+  products: Product[]
+  oneTimeTotal: number
+  monthlyTotal: number
+  oneTimeNet: number
+  oneTimeTax: number
+  oneTimeGross: number
+  monthlyNet: number
+  monthlyTax: number
+  monthlyGross: number
+  updatePriceModifier: { label?: string }
+  selectedEndCustomer: EndCustomer | null
+  customerData: Partial<Profile>
+  lastLicenseDate: string
+  handleSubmit: () => Promise<void>
+  isSubmitting: boolean
+  initialOrder: any
+  prevStep: () => void
+}
+
+function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) {
+  const LucideIcon = icon ? (Icons as any)[icon] : null
+  if (!LucideIcon) return <Icons.HelpCircle className={className} />
+  return <LucideIcon className={className} />
+}
+
+export function StepSummary({
+  finalItemsToShow,
+  visibleCategories,
+  products,
+  oneTimeTotal,
+  monthlyTotal,
+  oneTimeNet,
+  oneTimeTax,
+  oneTimeGross,
+  monthlyNet,
+  monthlyTax,
+  monthlyGross,
+  updatePriceModifier,
+  selectedEndCustomer,
+  customerData,
+  lastLicenseDate,
+  handleSubmit,
+  isSubmitting,
+  initialOrder,
+  prevStep,
+}: StepSummaryProps) {
+  return (
+    <Card className="glass-dark border-primary/30 max-w-2xl mx-auto shadow-primary/10 shadow-2xl">
+      <CardHeader>
+        <div className="w-20 h-20 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4 border border-primary/50">
+          <ShieldCheck className="w-10 h-10 text-primary" />
+        </div>
+        <CardTitle className="text-3xl text-white">Anfrage prüfen</CardTitle>
+        <CardDescription className="text-slate-300">
+          Fast fertig! Bitte überprüfen Sie Ihre Auswahl.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6 text-left">
+        <div className="p-4 rounded-lg bg-white/5 space-y-6">
+          {finalItemsToShow.map((item, itemIdx) => (
+            <div key={itemIdx} className="space-y-3 border-b border-white/10 pb-4 last:border-0 last:pb-0">
+              <div className="flex justify-between items-center bg-white/5 p-2 rounded">
+                <span className="text-white font-bold text-sm">Kasse: {item.deviceName}</span>
+                <span className="text-xs text-slate-400 capitalize">{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}</span>
+              </div>
+
+              {visibleCategories.map(cat => {
+                const sel = item.selections[cat.id]
+                const selectedProds: Product[] = []
+                if (cat.allow_multiselect && sel?.productIds) {
+                  sel.productIds.forEach((pId: string) => {
+                    const p = products.find(prod => prod.id === pId)
+                    if (p) selectedProds.push(p)
+                  })
+                } else if (sel?.productId) {
+                  const p = products.find(prod => prod.id === sel.productId)
+                  if (p) selectedProds.push(p)
+                }
+
+                if (selectedProds.length === 0) return null
+
+                const sortedProds = [...selectedProds].sort((a, b) => a.base_price - b.base_price)
+                const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0
+
+                return (
+                  <div key={cat.id} className="space-y-1 pl-2">
+                    <div className="text-slate-400 font-semibold text-xs flex items-center gap-1">
+                      <CategoryIcon icon={cat.icon} className="w-3.5 h-3.5 text-primary" />
+                      <span>{cat.name}</span>
+                    </div>
+                    {sortedProds.map((prod, idx) => {
+                      const isFree = idx < freeLimit
+                      const actualPrice = isFree ? 0 : prod.base_price
+                      const catTotal =
+                        Number(actualPrice) +
+                        (sel?.moduleIds?.reduce((acc: number, mId: string) => {
+                          const mod = prod.modules?.find(m => m.id === mId)
+                          const qty = item.moduleQuantities[mId] || 1
+                          return acc + (Number(mod?.price ?? 0) * qty)
+                        }, 0) || 0)
+
+                      return (
+                        <div key={prod.id} className="pl-3">
+                          <div className="flex justify-between font-semibold text-sm text-white">
+                            <span>
+                              {prod.name} {isFree && <span className="text-[10px] text-green-400 font-semibold">(Frei)</span>}
+                            </span>
+                            <span>
+                              {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(catTotal)}
+                            </span>
+                          </div>
+                          {sel?.moduleIds && sel.moduleIds.length > 0 && (
+                            <p className="text-xs text-slate-400 mt-0.5">
+                              Module: {sel.moduleIds
+                                .map((id: string) => {
+                                  const mod = prod.modules?.find(m => m.id === id)
+                                  const qty = item.moduleQuantities[id] || 1
+                                  return mod ? `${mod.name}${mod.has_quantity ? ` (x${qty})` : ''}` : ''
+                                })
+                                .filter(Boolean)
+                                .join(', ')}
+                            </p>
+                          )}
+                        </div>
+                      )
+                    })}
+                  </div>
+                )
+              })}
+            </div>
+          ))}
+          <Separator className="bg-white/10" />
+          <div className="text-sm text-slate-300 space-y-1">
+            {selectedEndCustomer ? (
+              <>
+                <p className="font-semibold text-white flex items-center gap-2">
+                  <Building2 className="w-3.5 h-3.5 text-primary" />
+                  {selectedEndCustomer.company_name}
+                </p>
+                <p>{[selectedEndCustomer.first_name, selectedEndCustomer.last_name].filter(Boolean).join(' ')}</p>
+                <p>{[selectedEndCustomer.street, selectedEndCustomer.zip, selectedEndCustomer.city].filter(Boolean).join(', ')}</p>
+                <p className="text-xs text-slate-500 mt-1">Endkunde Ihres Partners</p>
+                {lastLicenseDate && (
+                  <p className="text-xs text-slate-400 flex items-center gap-1 mt-1 font-mono">
+                    <Calendar className="w-3.5 h-3.5 text-primary" />
+                    Letzte Lizenz vom: {new Date(lastLicenseDate).toLocaleDateString('de-DE')}
+                  </p>
+                )}
+              </>
+            ) : (
+              <>
+                <p className="font-semibold text-white">{customerData.company_name}</p>
+                <p>{customerData.first_name} {customerData.last_name}</p>
+                <p>{customerData.address}, {customerData.zip_code} {customerData.city}</p>
+              </>
+            )}
+          </div>
+        </div>
+        {oneTimeTotal > 0 && monthlyTotal > 0 ? (
+          <div className="space-y-4 border-t border-white/10 pt-4">
+            <div className="space-y-1">
+              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Einmaliger Betrag:</p>
+              <div className="flex justify-between text-sm text-slate-400">
+                <span>Netto:</span>
+                <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span>
+              </div>
+              <div className="flex justify-between text-sm text-slate-400">
+                <span>zzgl. 19% MwSt.:</span>
+                <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
+              </div>
+              <div className="flex justify-between text-base font-bold text-white">
+                <span>Brutto:</span>
+                <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
+              </div>
+            </div>
+            {updatePriceModifier.label && (
+              <div className="text-sm text-green-400 font-semibold bg-green-500/10 p-2 rounded border border-green-500/20 my-1">
+                {updatePriceModifier.label}
+              </div>
+            )}
+            <div className="space-y-1 pt-2 border-t border-white/10">
+              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Monatlicher Betrag:</p>
+              <div className="flex justify-between text-sm text-slate-400">
+                <span>Netto:</span>
+                <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</span>
+              </div>
+              <div className="flex justify-between text-sm text-slate-400">
+                <span>zzgl. 19% MwSt.:</span>
+                <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
+              </div>
+              <div className="flex justify-between text-base font-bold text-white">
+                <span>Brutto:</span>
+                <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
+              </div>
+            </div>
+          </div>
+        ) : oneTimeTotal > 0 ? (
+          <div className="space-y-1 border-t border-white/10 pt-4">
+            <div className="flex justify-between text-sm text-slate-400">
+              <span>Netto-Gesamtbetrag:</span>
+              <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span>
+            </div>
+            <div className="flex justify-between text-sm text-slate-400">
+              <span>zzgl. 19% MwSt.:</span>
+              <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
+            </div>
+            {updatePriceModifier.label && (
+              <div className="text-sm text-green-400 font-semibold bg-green-500/10 p-2 rounded border border-green-500/20 my-1">
+                {updatePriceModifier.label}
+              </div>
+            )}
+            <div className="flex justify-between text-xl font-bold text-blue-500 dark:text-blue-400 pt-1 border-t border-white/5">
+              <span>Gesamtbetrag (brutto):</span>
+              <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-1 border-t border-white/10 pt-4">
+            <div className="flex justify-between text-sm text-slate-400">
+              <span>Netto-Gesamtbetrag:</span>
+              <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</span>
+            </div>
+            <div className="flex justify-between text-sm text-slate-400">
+              <span>zzgl. 19% MwSt.:</span>
+              <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
+            </div>
+            <div className="flex justify-between text-xl font-bold text-blue-500 dark:text-blue-400 pt-1 border-t border-white/5">
+              <span>Gesamtbetrag (brutto):</span>
+              <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
+            </div>
+          </div>
+        )}
+        <p className="text-xs text-slate-500 italic">
+          Mit dem Klick auf „Kostenpflichtig bestellen" akzeptieren Sie unsere AGB und die{' '}
+          <a href="/datenschutz" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-400">
+            Datenschutzerklärung
+          </a>.
+        </p>
+      </CardContent>
+      <CardFooter className="flex flex-col gap-4">
+        <Button
+          className="w-full h-14 text-xl font-bold bg-primary hover:bg-primary/90"
+          onClick={handleSubmit}
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? (
+            initialOrder ? (
+              <><Loader2 className="mr-2 h-5 w-5 animate-spin" /> Anfrage wird aktualisiert...</>
+            ) : (
+              <><Loader2 className="mr-2 h-5 w-5 animate-spin" /> Anfrage wird versendet...</>
+            )
+          ) : (
+            initialOrder ? 'Anfrage aktualisieren' : 'Anfrage versenden'
+          )}
+        </Button>
+        <Button variant="ghost" className="w-full text-white" onClick={prevStep}>
+          Noch etwas ändern
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}