Update partner packages, copy, and demo switcher

resources/js/admin/mobile/PackageShopPage.tsx

@@ -30,22 +30,39 @@ export default function MobilePackageShopPage() {
   // Extract recommended feature from URL
   const searchParams = new URLSearchParams(location.search);
   const recommendedFeature = searchParams.get('feature');
-
-  const { data: catalog, isLoading: loadingCatalog } = useQuery({
-    queryKey: ['packages', 'endcustomer'],
-    queryFn: () => getPackages('endcustomer'),
-  });
+  const forcedCatalogType = searchParams.get('type');
 
   const { data: inventory, isLoading: loadingInventory } = useQuery({
     queryKey: ['tenant-packages-overview'],
     queryFn: () => getTenantPackagesOverview({ force: true }),
   });
 
+  const catalogType: 'endcustomer' | 'reseller' =
+    forcedCatalogType === 'endcustomer' || forcedCatalogType === 'reseller'
+      ? forcedCatalogType
+      : inventory?.activePackage?.package_type === 'reseller' ||
+          (inventory?.packages ?? []).some((entry) => entry.package_type === 'reseller')
+        ? 'reseller'
+        : 'endcustomer';
+
+  const { data: catalog, isLoading: loadingCatalog } = useQuery({
+    queryKey: ['packages', catalogType],
+    queryFn: () => getPackages(catalogType),
+  });
+
   const isLoading = loadingCatalog || loadingInventory;
 
   if (isLoading) {
     return (
-      <MobileShell title={t('shop.title', 'Upgrade Package')} onBack={() => navigate(-1)} activeTab="profile">
+      <MobileShell
+        title={
+          catalogType === 'reseller'
+            ? t('shop.partner.title', 'Event-Kontingent kaufen')
+            : t('shop.title', 'Upgrade Package')
+        }
+        onBack={() => navigate(-1)}
+        activeTab="profile"
+      >
         <YStack space="$3">
           <SkeletonCard height={150} />
           <SkeletonCard height={150} />
@@ -65,7 +82,10 @@ export default function MobilePackageShopPage() {
 
   const activePackageId = inventory?.activePackage?.package_id ?? null;
   const activeCatalogPackage = (catalog ?? []).find((pkg) => pkg.id === activePackageId) ?? null;
-  const recommendedPackageId = selectRecommendedPackageId(catalog ?? [], recommendedFeature, activeCatalogPackage);
+  const recommendedPackageId =
+    catalogType === 'reseller'
+      ? null
+      : selectRecommendedPackageId(catalog ?? [], recommendedFeature, activeCatalogPackage);
 
   // Merge and sort packages
   const sortedPackages = [...(catalog || [])].sort((a, b) => {
@@ -78,10 +98,14 @@ export default function MobilePackageShopPage() {
   });
 
   const packageEntries = sortedPackages.map((pkg) => {
-    const owned = inventory?.packages?.find((entry) => entry.package_id === pkg.id);
-    const isActive = inventory?.activePackage?.package_id === pkg.id;
+    const ownedEntries = (inventory?.packages ?? []).filter((entry) => entry.package_id === pkg.id && entry.active);
+    const owned = ownedEntries.length ? aggregateOwnedEntries(ownedEntries) : undefined;
+    const isActive = catalogType === 'reseller' ? false : inventory?.activePackage?.package_id === pkg.id;
     const isRecommended = recommendedPackageId ? pkg.id === recommendedPackageId : false;
-    const { isUpgrade, isDowngrade } = classifyPackageChange(pkg, activeCatalogPackage);
+    const { isUpgrade, isDowngrade } =
+      catalogType === 'reseller'
+        ? { isUpgrade: false, isDowngrade: false }
+        : classifyPackageChange(pkg, activeCatalogPackage);
 
     return {
       pkg,
@@ -94,9 +118,13 @@ export default function MobilePackageShopPage() {
   });
 
   return (
-    <MobileShell title={t('shop.title', 'Upgrade Package')} onBack={() => navigate(-1)} activeTab="profile">
+    <MobileShell
+      title={catalogType === 'reseller' ? t('shop.partner.title', 'Event-Kontingent kaufen') : t('shop.title', 'Upgrade Package')}
+      onBack={() => navigate(-1)}
+      activeTab="profile"
+    >
       <YStack space="$4">
-        {recommendedFeature && (
+        {catalogType !== 'reseller' && recommendedFeature && (
             <MobileCard borderColor={primary} backgroundColor={accentSoft} space="$2" padding="$3">
                 <XStack space="$2" alignItems="center">
                     <Sparkles size={16} color={primary} />
@@ -112,7 +140,9 @@ export default function MobilePackageShopPage() {
 
         <YStack paddingHorizontal="$2">
           <Text fontSize="$sm" color={muted}>
-            {t('shop.subtitle', 'Choose a package to unlock more features and limits.')}
+            {catalogType === 'reseller'
+              ? t('shop.partner.subtitle', 'Kaufe Event-Kontingente, um mehrere Events mit unseren Services umzusetzen.')
+              : t('shop.subtitle', 'Choose a package to unlock more features and limits.')}
           </Text>
         </YStack>
 
@@ -140,6 +170,7 @@ export default function MobilePackageShopPage() {
             <PackageShopCompareView
               entries={packageEntries}
               onSelect={(pkg) => setSelectedPackage(pkg)}
+              catalogType={catalogType}
             />
           ) : (
             packageEntries.map((entry) => (
@@ -151,6 +182,7 @@ export default function MobilePackageShopPage() {
                 isRecommended={entry.isRecommended}
                 isUpgrade={entry.isUpgrade}
                 isDowngrade={entry.isDowngrade}
+                catalogType={catalogType}
                 onSelect={() => setSelectedPackage(entry.pkg)}
               />
             ))
@@ -168,6 +200,7 @@ function PackageShopCard({
     isRecommended, 
     isUpgrade,
     isDowngrade,
+    catalogType,
     onSelect 
 }: { 
     pkg: Package; 
@@ -176,14 +209,17 @@ function PackageShopCard({
     isRecommended?: any;
     isUpgrade?: boolean;
     isDowngrade?: boolean;
+    catalogType: 'endcustomer' | 'reseller';
     onSelect: () => void 
 }) {
   const { textStrong, muted, border, primary, accentSoft } = useAdminTheme();
   const { t } = useTranslation('management');
 
+  const isResellerCatalog = catalogType === 'reseller';
   const statusLabel = getPackageStatusLabel({ t, isActive, owned });
-  const isSubdued = Boolean((isDowngrade || !isUpgrade) && !isActive);
-  const canSelect = canSelectPackage(isUpgrade, isActive);
+  const isSubdued = Boolean(!isResellerCatalog && (isDowngrade || !isUpgrade) && !isActive);
+  const canSelect = isResellerCatalog ? Boolean(pkg.paddle_price_id) : canSelectPackage(isUpgrade, isActive);
+  const includedTierLabel = resolveIncludedTierLabel(t, pkg.included_package_slug ?? null);
 
   return (
     <MobileCard
@@ -202,9 +238,13 @@ function PackageShopCard({
                 {pkg.name}
             </Text>
             {isRecommended && <PillBadge tone="warning">{t('shop.badges.recommended', 'Recommended')}</PillBadge>}
-            {isUpgrade && !isActive ? <PillBadge tone="success">{t('shop.badges.upgrade', 'Upgrade')}</PillBadge> : null}
-            {isDowngrade && !isActive ? <PillBadge tone="muted">{t('shop.badges.downgrade', 'Downgrade')}</PillBadge> : null}
-            {isActive && <PillBadge tone="success">{t('shop.badges.active', 'Active')}</PillBadge>}
+            {!isResellerCatalog && isUpgrade && !isActive ? (
+              <PillBadge tone="success">{t('shop.badges.upgrade', 'Upgrade')}</PillBadge>
+            ) : null}
+            {!isResellerCatalog && isDowngrade && !isActive ? (
+              <PillBadge tone="muted">{t('shop.badges.downgrade', 'Downgrade')}</PillBadge>
+            ) : null}
+            {!isResellerCatalog && isActive ? <PillBadge tone="success">{t('shop.badges.active', 'Active')}</PillBadge> : null}
           </XStack>
           
           <XStack space="$2" alignItems="center">
@@ -224,34 +264,58 @@ function PackageShopCard({
       </XStack>
 
       <YStack space="$1.5">
-        {pkg.max_photos ? (
-            <FeatureRow label={t('shop.limits.photos', '{{count}} Photos', { count: pkg.max_photos })} />
+        {isResellerCatalog ? (
+          <>
+            {includedTierLabel ? (
+              <FeatureRow
+                label={t('shop.partner.includedTier', 'Inklusive Event-Level: {{tier}}', {
+                  tier: includedTierLabel,
+                })}
+              />
+            ) : null}
+            {typeof pkg.max_events_per_year === 'number' ? (
+              <FeatureRow label={t('shop.partner.eventsIncluded', '{{count}} Events im Kontingent', { count: pkg.max_events_per_year })} />
+            ) : null}
+            <FeatureRow label={t('shop.partner.recommendedUsage', 'Empfohlen innerhalb von 24 Monaten zu nutzen.')} />
+          </>
         ) : (
-            <FeatureRow label={t('shop.limits.unlimitedPhotos', 'Unlimited Photos')} />
+          <>
+            {pkg.max_photos ? (
+                <FeatureRow label={t('shop.limits.photos', '{{count}} Photos', { count: pkg.max_photos })} />
+            ) : (
+                <FeatureRow label={t('shop.limits.unlimitedPhotos', 'Unlimited Photos')} />
+            )}
+            {pkg.gallery_days ? (
+                <FeatureRow label={t('shop.limits.days', '{{count}} Days Gallery', { count: pkg.gallery_days })} />
+            ) : null}
+          </>
         )}
-        {pkg.gallery_days ? (
-            <FeatureRow label={t('shop.limits.days', '{{count}} Days Gallery', { count: pkg.gallery_days })} />
-        ) : null}
         
         {/* Render specific feature if it was requested */}
-        {getEnabledPackageFeatures(pkg)
-          .filter((key) => !pkg.max_photos || key !== 'photos')
-          .slice(0, 3)
-          .map((key) => (
-            <FeatureRow key={key} label={t(`shop.features.${key}`, key)} />
-          ))}
+        {!isResellerCatalog
+          ? getEnabledPackageFeatures(pkg)
+              .filter((key) => !pkg.max_photos || key !== 'photos')
+              .slice(0, 3)
+              .map((key) => (
+                <FeatureRow key={key} label={t(`shop.features.${key}`, key)} />
+              ))
+          : null}
       </YStack>
       
       <CTAButton 
         label={
-          isActive
-            ? t('shop.manage', 'Manage Plan')
-            : isUpgrade
-              ? t('shop.select', 'Select')
-              : t('shop.selectDisabled', 'Not available')
+          isResellerCatalog
+            ? canSelect
+              ? t('shop.partner.buy', 'Kaufen')
+              : t('shop.partner.unavailable', 'Nicht verfügbar')
+            : isActive
+              ? t('shop.manage', 'Manage Plan')
+              : isUpgrade
+                ? t('shop.select', 'Select')
+                : t('shop.selectDisabled', 'Not available')
         }
         onPress={canSelect ? onSelect : undefined}
-        tone={isActive || !isUpgrade ? 'ghost' : 'primary'}
+        tone={isResellerCatalog ? (canSelect ? 'primary' : 'ghost') : isActive || !isUpgrade ? 'ghost' : 'primary'}
         disabled={!canSelect}
       />
     </MobileCard>
@@ -280,9 +344,11 @@ type PackageEntry = {
 function PackageShopCompareView({
   entries,
   onSelect,
+  catalogType,
 }: {
   entries: PackageEntry[];
   onSelect: (pkg: Package) => void;
+  catalogType: 'endcustomer' | 'reseller';
 }) {
   const { t } = useTranslation('management');
   const { textStrong, muted, border, primary, accentSoft } = useAdminTheme();
@@ -308,9 +374,18 @@ function PackageShopCompareView({
       if (row.limitKey === 'max_guests') {
         return t('shop.compare.rows.guests', 'Guests');
       }
+      if (row.limitKey === 'max_events_per_year') {
+        return t('shop.partner.compare.rows.events', 'Events im Kontingent');
+      }
       return t('shop.compare.rows.days', 'Gallery days');
     }
 
+    if (row.type === 'value') {
+      if (row.valueKey === 'included_package_slug') {
+        return t('shop.partner.compare.rows.includedTier', 'Inklusive Event-Level');
+      }
+    }
+
     return t(`shop.features.${row.featureKey}`, row.featureKey);
   };
 
@@ -362,13 +437,15 @@ function PackageShopCompareView({
                           {entry.isRecommended ? (
                             <PillBadge tone="warning">{t('shop.badges.recommended', 'Recommended')}</PillBadge>
                           ) : null}
-                          {entry.isUpgrade && !entry.isActive ? (
+                          {catalogType !== 'reseller' && entry.isUpgrade && !entry.isActive ? (
                             <PillBadge tone="success">{t('shop.badges.upgrade', 'Upgrade')}</PillBadge>
                           ) : null}
-                          {entry.isDowngrade && !entry.isActive ? (
+                          {catalogType !== 'reseller' && entry.isDowngrade && !entry.isActive ? (
                             <PillBadge tone="muted">{t('shop.badges.downgrade', 'Downgrade')}</PillBadge>
                           ) : null}
-                          {entry.isActive ? <PillBadge tone="success">{t('shop.badges.active', 'Active')}</PillBadge> : null}
+                          {catalogType !== 'reseller' && entry.isActive ? (
+                            <PillBadge tone="success">{t('shop.badges.active', 'Active')}</PillBadge>
+                          ) : null}
                         </XStack>
                         {statusLabel ? (
                           <Text fontSize="$xs" color={muted}>
@@ -391,6 +468,13 @@ function PackageShopCompareView({
                       {formatLimitValue(value)}
                     </Text>
                   );
+                } else if (row.type === 'value') {
+                  content = (
+                    <Text fontSize="$sm" fontWeight="600" color={textStrong}>
+                      {resolveIncludedTierLabel(t, entry.pkg.included_package_slug ?? null) ??
+                        t('shop.partner.compare.values.unknown', '—')}
+                    </Text>
+                  );
                 } else if (row.type === 'feature') {
                   const enabled = getEnabledPackageFeatures(entry.pkg).includes(row.featureKey);
                   content = (
@@ -425,12 +509,17 @@ function PackageShopCompareView({
           <XStack paddingTop="$2">
             <YStack width={labelWidth} />
             {entries.map((entry) => {
-              const canSelect = canSelectPackage(entry.isUpgrade, entry.isActive);
-              const label = entry.isActive
-                ? t('shop.manage', 'Manage Plan')
-                : entry.isUpgrade
-                  ? t('shop.select', 'Select')
-                  : t('shop.selectDisabled', 'Not available');
+              const isResellerCatalog = catalogType === 'reseller';
+              const canSelect = isResellerCatalog ? Boolean(entry.pkg.paddle_price_id) : canSelectPackage(entry.isUpgrade, entry.isActive);
+              const label = isResellerCatalog
+                ? canSelect
+                  ? t('shop.partner.buy', 'Kaufen')
+                  : t('shop.partner.unavailable', 'Nicht verfügbar')
+                : entry.isActive
+                  ? t('shop.manage', 'Manage Plan')
+                  : entry.isUpgrade
+                    ? t('shop.select', 'Select')
+                    : t('shop.selectDisabled', 'Not available');
 
               return (
                 <YStack key={`cta-${entry.pkg.id}`} width={columnWidth} paddingHorizontal="$2">
@@ -438,7 +527,15 @@ function PackageShopCompareView({
                     label={label}
                     onPress={canSelect ? () => onSelect(entry.pkg) : undefined}
                     disabled={!canSelect}
-                    tone={entry.isActive || entry.isDowngrade ? 'ghost' : 'primary'}
+                    tone={
+                      catalogType === 'reseller'
+                        ? canSelect
+                          ? 'primary'
+                          : 'ghost'
+                        : entry.isActive || entry.isDowngrade
+                          ? 'ghost'
+                          : 'primary'
+                    }
                   />
                 </YStack>
               );
@@ -488,11 +585,16 @@ function CheckoutConfirmation({ pkg, onCancel }: { pkg: Package; onCancel: () =>
     await startCheckout(pkg.id);
   };
 
+  const subtitle =
+    pkg.type === 'reseller'
+      ? t('shop.partner.confirmSubtitle', 'Du kaufst:')
+      : t('shop.confirmSubtitle', 'You are upgrading to:');
+
   return (
     <MobileShell title={t('shop.confirmTitle', 'Confirm Purchase')} onBack={onCancel} activeTab="profile">
       <YStack space="$4">
         <MobileCard space="$2" borderColor={border}>
-            <Text fontSize="$sm" color={muted}>{t('shop.confirmSubtitle', 'You are upgrading to:')}</Text>
+            <Text fontSize="$sm" color={muted}>{subtitle}</Text>
             <Text fontSize="$xl" fontWeight="800" color={textStrong}>{pkg.name}</Text>
             <Text fontSize="$lg" color={primary} fontWeight="700">
                 {new Intl.NumberFormat(undefined, { style: 'currency', currency: 'EUR' }).format(pkg.price)}
@@ -556,3 +658,43 @@ function CheckoutConfirmation({ pkg, onCancel }: { pkg: Package; onCancel: () =>
     </MobileShell>
   );
 }
+
+function aggregateOwnedEntries(entries: TenantPackageSummary[]): TenantPackageSummary {
+  const remainingTotal = entries.reduce(
+    (total, entry) => total + (typeof entry.remaining_events === 'number' ? entry.remaining_events : 0),
+    0
+  );
+  const usedTotal = entries.reduce(
+    (total, entry) => total + (typeof entry.used_events === 'number' ? entry.used_events : 0),
+    0
+  );
+
+  return {
+    ...entries[0],
+    used_events: usedTotal,
+    remaining_events: Number.isFinite(remainingTotal) ? remainingTotal : entries[0].remaining_events,
+  };
+}
+
+function resolveIncludedTierLabel(
+  t: (key: string, fallback?: string, options?: Record<string, unknown>) => string,
+  slug: string | null
+): string | null {
+  if (!slug) {
+    return null;
+  }
+
+  if (slug === 'starter') {
+    return t('shop.partner.tiers.starter', 'Starter');
+  }
+
+  if (slug === 'standard') {
+    return t('shop.partner.tiers.standard', 'Standard');
+  }
+
+  if (slug === 'pro') {
+    return t('shop.partner.tiers.premium', 'Premium');
+  }
+
+  return slug;
+}