From 1c3191876828d85a71bc96d8fb63ff5efd5304c8 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Wed, 22 Jul 2026 15:09:05 +0200
Subject: [PATCH] feat(shop): add dynamic linked fees to modules

---
 shop/app/admin/wysiwyg/wysiwyg-client.tsx     |  27 +++-
 shop/app/api/orders/checkout/route.ts         |  40 ++++++
 shop/components/order-wizard.tsx              | 115 ++++++++++++++++--
 shop/components/wizard/step-summary.tsx       |  26 ++++
 shop/lib/actions/products.ts                  |   2 +
 shop/lib/types.ts                             |   1 +
 ...260722100000_add_linked_fee_to_modules.sql |   3 +
 shop/supabase/seed.sql                        |  15 ++-
 8 files changed, 208 insertions(+), 21 deletions(-)
 create mode 100644 shop/supabase/migrations/20260722100000_add_linked_fee_to_modules.sql

diff --git a/shop/app/admin/wysiwyg/wysiwyg-client.tsx b/shop/app/admin/wysiwyg/wysiwyg-client.tsx
index 1a9c3b8..f403542 100644
--- a/shop/app/admin/wysiwyg/wysiwyg-client.tsx
+++ b/shop/app/admin/wysiwyg/wysiwyg-client.tsx
@@ -302,8 +302,31 @@ export function WysiwygAdminClient({
                           <div className="flex flex-wrap gap-1">
                             {(prod.modules || []).length > 0 ? (
                               (prod.modules || []).map((m) => (
-                                <span key={m.id} className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] bg-white/10 text-slate-300 font-medium">
-                                  {m.name}
+                                <span key={m.id} className="inline-flex items-center gap-2 px-2.5 py-1 rounded text-[10px] bg-white/10 text-slate-300 font-medium">
+                                  <span>{m.name}</span>
+                                  <select
+                                    value={m.linked_fee_product_id || ''}
+                                    onChange={async (e) => {
+                                      const val = e.target.value || null
+                                      const updatedModules = (prod.modules || []).map(mod => 
+                                        mod.id === m.id ? { ...mod, linked_fee_product_id: val } : mod
+                                      )
+                                      setProducts(products.map(p => p.id === prod.id ? { ...p, modules: updatedModules } : p))
+                                      await updateProduct(prod.id, {}, updatedModules)
+                                    }}
+                                    className="bg-slate-900 border border-white/10 text-[9px] text-slate-400 focus:ring-0 cursor-pointer rounded px-1 py-0.5 outline-none max-w-[120px]"
+                                    title="Verknüpfte Gebühr"
+                                  >
+                                    <option value="">Keine Gebühr</option>
+                                    {products
+                                      .filter(p => p.billing_interval === 'monthly')
+                                      .map(p => (
+                                        <option key={p.id} value={p.id}>
+                                          + {p.name} ({p.base_price} €)
+                                        </option>
+                                      ))
+                                    }
+                                  </select>
                                   <button
                                     onClick={async () => {
                                       const updatedModules = (prod.modules || []).filter(mod => mod.id !== m.id)
diff --git a/shop/app/api/orders/checkout/route.ts b/shop/app/api/orders/checkout/route.ts
index 5eab220..7ef4767 100644
--- a/shop/app/api/orders/checkout/route.ts
+++ b/shop/app/api/orders/checkout/route.ts
@@ -77,6 +77,7 @@ export async function POST(request: Request) {
       
       const orderItemsList: any[] = [];
       let total = 0;
+      const feeProductIds = new Set<string>();
 
       for (const item of groupItems) {
         const itemSnapshot = buildOrderSnapshot(
@@ -93,8 +94,47 @@ export async function POST(request: Request) {
         }));
         orderItemsList.push(...itemsWithDevice);
         total += itemSnapshot.total;
+
+        // Echte linked fee products ermitteln
+        if (item.selections) {
+          for (const catId in item.selections) {
+            const sel = item.selections[catId];
+            sel.moduleIds?.forEach((mId: string) => {
+              for (const p of products) {
+                const mod = p.modules?.find((m: any) => m.id === mId);
+                if (mod && mod.linked_fee_product_id) {
+                  feeProductIds.add(mod.linked_fee_product_id);
+                }
+              }
+            });
+          }
+        }
       }
 
+      feeProductIds.forEach(feeProdId => {
+        const feeProduct = products.find((p: any) => p.id === feeProdId);
+        if (feeProduct) {
+          const isIntervalMatch = 
+            (type === 'purchase' && feeProduct.billing_interval === 'one_time') ||
+            (type === 'subscription' && feeProduct.billing_interval === 'monthly');
+
+          if (isIntervalMatch) {
+            orderItemsList.push({
+              category_id: 'dienste-gebuehren',
+              category_name: 'Dienste & Gebühren',
+              product_id: feeProduct.id,
+              product_name: feeProduct.name,
+              base_price: Number(feeProduct.base_price),
+              billing_interval: feeProduct.billing_interval,
+              selected_modules: [],
+              item_total: Number(feeProduct.base_price),
+              device_name: 'Zusatzleistung'
+            });
+            total += Number(feeProduct.base_price);
+          }
+        }
+      });
+
       const orderSnapshot = {
         schema_version: 1,
         billing_cycle: type === 'purchase' ? 'one_time' : 'monthly',
diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx
index 708303e..7bb34ab 100644
--- a/shop/components/order-wizard.tsx
+++ b/shop/components/order-wizard.tsx
@@ -333,6 +333,8 @@ export function OrderWizard({
     return { monthlyTotal: monthly, oneTimeTotal: oneTime }
   }, [selections, products, categories, moduleQuantities])
 
+
+
   // Ermittlung der Update-Faktoren basierend auf dem Lizenzdatum (nur für Kauf/einmalig relevant)
   const updatePriceModifier = useMemo(() => {
     if (selectedBillingInterval !== 'one_time' || !lastLicenseDate) return { factor: 1 }
@@ -386,6 +388,96 @@ export function OrderWizard({
       })
   }, [visibleCategories, selections, products, selectedBillingInterval])
 
+  const finalItemsToShow = basketItems.length > 0
+    ? basketItems
+    : (allCategoriesFilled && productValidationErrors.length === 0
+      ? [{ deviceName: deviceName || 'Kasse 1', selections, moduleQuantities, billingInterval: selectedBillingInterval }]
+      : [])
+
+  // Gesamtsummen für alle Items in der Bestellung (finalItemsToShow)
+  const { overallMonthlyTotal, overallOneTimeTotal, linkedFeeProducts } = useMemo(() => {
+    let monthly = 0
+    let oneTime = 0
+    const feeProductIds = new Set<string>()
+
+    finalItemsToShow.forEach(item => {
+      categories.forEach(cat => {
+        const sel = item.selections[cat.id]
+        if (!sel) return
+
+        const selectedProds: Product[] = []
+        if (cat.allow_multiselect && sel.productIds && sel.productIds.length > 0) {
+          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)
+        }
+
+        const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0
+        const sortedProds = [...selectedProds].sort((a, b) => a.base_price - b.base_price)
+
+        sortedProds.forEach((prod, idx) => {
+          const isFree = idx < freeLimit
+          const basePrice = isFree ? 0 : prod.base_price
+
+          if (prod.billing_interval === 'monthly') {
+            monthly += basePrice
+          } else {
+            oneTime += basePrice
+          }
+
+          // Module
+          sel.moduleIds?.forEach((mId: string) => {
+            const mod = prod.modules?.find(m => m.id === mId)
+            if (mod) {
+              const qty = item.moduleQuantities?.[mId] || 1
+              if (prod.billing_interval === 'monthly') {
+                monthly += mod.price * qty
+              } else {
+                oneTime += mod.price * qty
+              }
+
+              if (mod.linked_fee_product_id) {
+                feeProductIds.add(mod.linked_fee_product_id)
+              }
+            }
+          })
+        })
+      })
+    })
+
+    const feeProducts: Product[] = []
+    feeProductIds.forEach(id => {
+      const p = products.find(prod => prod.id === id)
+      if (p) {
+        feeProducts.push(p)
+        if (p.billing_interval === 'monthly') {
+          monthly += p.base_price
+        } else {
+          oneTime += p.base_price
+        }
+      }
+    })
+
+    return { 
+      overallMonthlyTotal: monthly, 
+      overallOneTimeTotal: oneTime,
+      linkedFeeProducts: feeProducts
+    }
+  }, [finalItemsToShow, products, categories])
+
+  // Gesamte Endbeträge ermitteln
+  const overallOneTimeNet = overallOneTimeTotal * discountFactor
+  const overallOneTimeTax = overallOneTimeNet * 0.19
+  const overallOneTimeGross = overallOneTimeNet + overallOneTimeTax
+
+  const overallMonthlyNet = overallMonthlyTotal
+  const overallMonthlyTax = overallMonthlyNet * 0.19
+  const overallMonthlyGross = overallMonthlyNet + overallMonthlyTax
+
   const isNextStepDisabled = !allCategoriesFilled || productValidationErrors.length > 0
 
   // Helper: toggle module for a category's selected product
@@ -587,11 +679,7 @@ export function OrderWizard({
     }
   }
 
-  const finalItemsToShow = basketItems.length > 0
-    ? basketItems
-    : (allCategoriesFilled && productValidationErrors.length === 0
-      ? [{ deviceName: deviceName || 'Kasse 1', selections, moduleQuantities, billingInterval: selectedBillingInterval }]
-      : [])
+
 
   function selectProduct(catId: string, productId: string) {
     setSelections(prev => {
@@ -817,14 +905,14 @@ export function OrderWizard({
               finalItemsToShow={finalItemsToShow}
               visibleCategories={visibleCategories}
               products={products}
-              oneTimeTotal={oneTimeTotal}
-              monthlyTotal={monthlyTotal}
-              oneTimeNet={oneTimeNet}
-              oneTimeTax={oneTimeTax}
-              oneTimeGross={oneTimeGross}
-              monthlyNet={monthlyNet}
-              monthlyTax={monthlyTax}
-              monthlyGross={monthlyGross}
+              oneTimeTotal={overallOneTimeTotal}
+              monthlyTotal={overallMonthlyTotal}
+              oneTimeNet={overallOneTimeNet}
+              oneTimeTax={overallOneTimeTax}
+              oneTimeGross={overallOneTimeGross}
+              monthlyNet={overallMonthlyNet}
+              monthlyTax={overallMonthlyTax}
+              monthlyGross={overallMonthlyGross}
               updatePriceModifier={updatePriceModifier}
               selectedEndCustomer={selectedEndCustomer}
               customerData={customerData}
@@ -833,6 +921,7 @@ export function OrderWizard({
               isSubmitting={isSubmitting}
               initialOrder={initialOrder}
               prevStep={prevStep}
+              linkedFeeProducts={linkedFeeProducts}
             />
           </motion.div>
         )}
diff --git a/shop/components/wizard/step-summary.tsx b/shop/components/wizard/step-summary.tsx
index b73eeee..af706e8 100644
--- a/shop/components/wizard/step-summary.tsx
+++ b/shop/components/wizard/step-summary.tsx
@@ -28,6 +28,7 @@ interface StepSummaryProps {
   isSubmitting: boolean
   initialOrder: any
   prevStep: () => void
+  linkedFeeProducts?: Product[]
 }
 
 function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) {
@@ -56,6 +57,7 @@ export function StepSummary({
   isSubmitting,
   initialOrder,
   prevStep,
+  linkedFeeProducts = [],
 }: StepSummaryProps) {
   return (
     <Card className="glass-dark border-primary/30 max-w-2xl mx-auto shadow-primary/10 shadow-2xl">
@@ -142,6 +144,30 @@ export function StepSummary({
               })}
             </div>
           ))}
+          {linkedFeeProducts && linkedFeeProducts.length > 0 && (
+            <div 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">Zusätzliche Dienste & Gebühren</span>
+                <span className="text-xs text-slate-400">Einmalig berechnet</span>
+              </div>
+              {linkedFeeProducts.map(p => (
+                <div key={p.id} className="pl-2 space-y-1">
+                  <div className="flex justify-between font-semibold text-sm text-white pl-3">
+                    <span>{p.name}</span>
+                    <span>
+                      {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(p.base_price)}
+                      {' '}<span className="text-slate-400 text-[10px] font-normal">{p.billing_interval === 'monthly' ? '/ mtl.' : 'einmalig'}</span>
+                    </span>
+                  </div>
+                  {p.description && (
+                    <p className="text-xs text-slate-400 mt-0.5 pl-3">
+                      {p.description}
+                    </p>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
           <Separator className="bg-white/10" />
           <div className="text-sm text-slate-300 space-y-1">
             {selectedEndCustomer ? (
diff --git a/shop/lib/actions/products.ts b/shop/lib/actions/products.ts
index 13ec6f5..f44f169 100644
--- a/shop/lib/actions/products.ts
+++ b/shop/lib/actions/products.ts
@@ -90,6 +90,7 @@ export async function createProduct(
       requirements: m.requirements || [],
       exclusions: m.exclusions || [],
       has_quantity: m.has_quantity ?? false,
+      linked_fee_product_id: m.linked_fee_product_id || null,
     }))
     const { error: modulesError } = await supabase
       .from('product_modules')
@@ -127,6 +128,7 @@ export async function updateProduct(id: string, product: Partial<Product>, modul
       requirements: m.requirements || [],
       exclusions: m.exclusions || [],
       has_quantity: m.has_quantity ?? false,
+      linked_fee_product_id: m.linked_fee_product_id || null,
     }))
     const { error: modulesError } = await supabase
       .from('product_modules')
diff --git a/shop/lib/types.ts b/shop/lib/types.ts
index 8d5fe5c..f7d4971 100644
--- a/shop/lib/types.ts
+++ b/shop/lib/types.ts
@@ -46,6 +46,7 @@ export type ProductModule = {
   exclusions: string[]     // UUID[] von Modulen, die nicht gleichzeitig aktiv sein dürfen
   created_at: string
   has_quantity?: boolean
+  linked_fee_product_id?: string | null
 }
 
 export type Profile = {
diff --git a/shop/supabase/migrations/20260722100000_add_linked_fee_to_modules.sql b/shop/supabase/migrations/20260722100000_add_linked_fee_to_modules.sql
new file mode 100644
index 0000000..331de7d
--- /dev/null
+++ b/shop/supabase/migrations/20260722100000_add_linked_fee_to_modules.sql
@@ -0,0 +1,3 @@
+-- Add linked_fee_product_id to product_modules table
+ALTER TABLE public.product_modules 
+ADD COLUMN IF NOT EXISTS linked_fee_product_id UUID REFERENCES public.products(id) ON DELETE SET NULL;
diff --git a/shop/supabase/seed.sql b/shop/supabase/seed.sql
index 5637f91..42519f9 100644
--- a/shop/supabase/seed.sql
+++ b/shop/supabase/seed.sql
@@ -1,13 +1,16 @@
 -- Seed Products
-INSERT INTO public.products (id, name, description, base_price, tax_rate)
+INSERT INTO public.products (id, name, description, base_price, tax_rate, billing_interval, show_in_abo, show_in_kauf)
 VALUES 
-('d1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1', 'CASPOS Cloud', 'Die modulare Cloud-Lösung für Ihren Einzelhandel.', 49.00, 19.00),
-('d2a2a2a2-a2a2-a2a2-a2a2-a2a2a2a2a2a2', 'CASPOS Gastro', 'Spezialisiert auf Gastronomie mit Tischplan und Funkbonieren.', 79.00, 19.00);
+('d1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1', 'CASPOS Cloud', 'Die modulare Cloud-Lösung für Ihren Einzelhandel.', 49.00, 19.00, 'monthly', true, true),
+('d2a2a2a2-a2a2-a2a2-a2a2-a2a2-a2a2-a2a2a2a2', 'CASPOS Gastro', 'Spezialisiert auf Gastronomie mit Tischplan und Funkbonieren.', 79.00, 19.00, 'monthly', true, true),
+('prod-poscloud-fee', 'POS Cloud Grundgebühr', 'Monatliche Grundgebühr für die POS Cloud Nutzung.', 19.00, 19.00, 'monthly', false, false);
 
 -- Seed Modules for CASPOS Cloud
 INSERT INTO public.product_modules (id, product_id, name, description, price, requirements, exclusions)
 VALUES 
 ('m1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1', 'd1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1', 'Bestandsführung Pro', 'Erweiterte Lagerverwaltung.', 15.00, '{}', '{}'),
-('m2a2a2a2-a2a2-a2a2-a2a2-a2a2a2a2a2a2', 'd1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1', 'DATEV Export', 'Direkte Schnittstelle zum Steuerberater.', 10.00, '{}', '{}'),
-('m3a3a3a3-a3a3-a3a3-a3a3-a3a3a3a3a3a3', 'd1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1', 'Filialverwaltung', 'Zentrale Steuerung mehrerer Standorte.', 25.00, '{"m1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1"}', '{}'),
-('m4a4a4a4-a4a4-a4a4-a4a4-a4a4a4a4a4a4', 'd1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1', 'Small Business Modus', 'Reduzierter Funktionsumfang für Kleinunternehmer.', 0.00, '{}', '{"m1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1", "m3a3a3a3-a3a3-a3a3-a3a3-a3a3a3a3a3a3"}');
+('m2a2a2a2-a2a2-a2a2-a2a2-a2a2-a2a2-a2a2a2a2', 'd1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1', 'DATEV Export', 'Direkte Schnittstelle zum Steuerberater.', 10.00, '{}', '{}'),
+('m3a3a3a3-a3a3-a3a3-a3a3-a3a3-a3a3-a3a3-a3a3', 'd1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1', 'Filialverwaltung', 'Zentrale Steuerung mehrerer Standorte.', 25.00, '{"m1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1"}', '{}'),
+('m4a4a4a4-a4a4-a4a4-a4a4-a4a4-a4a4-a4a4-a4a4', 'd1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1', 'Small Business Modus', 'Reduzierter Funktionsumfang für Kleinunternehmer.', 0.00, '{}', '{"m1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1", "m3a3a3a3-a3a3-a3a3-a3a3-a3a3-a3a3-a3a3-a3a3"}'),
+('m-poscloud-cloud', 'd1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1', 'Schnittstelle POS Cloud', 'Anbindung an die POS Cloud.', 0.00, '{}', '{}'),
+('m-poscloud-gastro', 'd2a2a2a2-a2a2-a2a2-a2a2-a2a2-a2a2-a2a2a2a2', 'Schnittstelle POS Cloud', 'Anbindung an die POS Cloud.', 0.00, '{}', '{}');