feat: add package comparison view

resources/js/admin/mobile/PackageShopPage.tsx

@@ -1,26 +1,26 @@
 import React from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Check, ChevronRight, ShieldCheck, ShoppingBag, Sparkles, Star } from 'lucide-react';
+import { Check, ChevronRight, ShieldCheck, Sparkles, X } from 'lucide-react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Checkbox } from '@tamagui/checkbox';
-import toast from 'react-hot-toast';
 
 import { MobileShell } from './components/MobileShell';
 import { MobileCard, CTAButton, PillBadge, SkeletonCard } from './components/Primitives';
 import { useAdminTheme } from './theme';
-import { getPackages, createTenantPaddleCheckout, Package, getTenantPackagesOverview, TenantPackageSummary } from '../api';
-import { getApiErrorMessage } from '../lib/apiError';
+import { getPackages, Package, getTenantPackagesOverview, TenantPackageSummary } from '../api';
 import { useQuery } from '@tanstack/react-query';
-import { classifyPackageChange, selectRecommendedPackageId } from './lib/packageShop';
+import { buildPackageComparisonRows, classifyPackageChange, selectRecommendedPackageId } from './lib/packageShop';
+import { usePackageCheckout } from './hooks/usePackageCheckout';
 
 export default function MobilePackageShopPage() {
   const { t } = useTranslation('management');
   const navigate = useNavigate();
   const location = useLocation();
-  const { textStrong, muted, border, primary, surface, accentSoft, warningText } = useAdminTheme();
+  const { textStrong, muted, border, primary, accentSoft } = useAdminTheme();
   const [selectedPackage, setSelectedPackage] = React.useState<Package | null>(null);
+  const [viewMode, setViewMode] = React.useState<'cards' | 'compare'>('cards');
 
   // Extract recommended feature from URL
   const searchParams = new URLSearchParams(location.search);
@@ -72,6 +72,22 @@ export default function MobilePackageShopPage() {
     return a.price - b.price;
   });
 
+  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 isRecommended = recommendedPackageId ? pkg.id === recommendedPackageId : false;
+    const { isUpgrade, isDowngrade } = classifyPackageChange(pkg, activeCatalogPackage);
+
+    return {
+      pkg,
+      owned,
+      isActive,
+      isRecommended,
+      isUpgrade,
+      isDowngrade,
+    };
+  });
+
   return (
     <MobileShell title={t('shop.title', 'Upgrade Package')} onBack={() => navigate(-1)} activeTab="profile">
       <YStack space="$4">
@@ -95,26 +111,45 @@ export default function MobilePackageShopPage() {
           </Text>
         </YStack>
 
-        <YStack space="$3">
-          {sortedPackages.map((pkg) => {
-            const owned = inventory?.packages?.find(p => p.package_id === pkg.id);
-            const isActive = inventory?.activePackage?.package_id === pkg.id;
-            const isRecommended = recommendedPackageId ? pkg.id === recommendedPackageId : false;
-            const { isUpgrade, isDowngrade } = classifyPackageChange(pkg, activeCatalogPackage);
+        {packageEntries.length > 1 ? (
+          <XStack space="$2" paddingHorizontal="$2">
+            <CTAButton
+              label={t('shop.compare.toggleCards', 'Cards')}
+              tone={viewMode === 'cards' ? 'primary' : 'ghost'}
+              fullWidth={false}
+              onPress={() => setViewMode('cards')}
+              style={{ flex: 1 }}
+            />
+            <CTAButton
+              label={t('shop.compare.toggleCompare', 'Compare')}
+              tone={viewMode === 'compare' ? 'primary' : 'ghost'}
+              fullWidth={false}
+              onPress={() => setViewMode('compare')}
+              style={{ flex: 1 }}
+            />
+          </XStack>
+        ) : null}
 
-            return (
+        <YStack space="$3">
+          {viewMode === 'compare' ? (
+            <PackageShopCompareView
+              entries={packageEntries}
+              onSelect={(pkg) => setSelectedPackage(pkg)}
+            />
+          ) : (
+            packageEntries.map((entry) => (
               <PackageShopCard
-                key={pkg.id}
-                pkg={pkg}
-                owned={owned}
-                isActive={isActive}
-                isRecommended={isRecommended}
-                isUpgrade={isUpgrade}
-                isDowngrade={isDowngrade}
-                onSelect={() => setSelectedPackage(pkg)}
+                key={entry.pkg.id}
+                pkg={entry.pkg}
+                owned={entry.owned}
+                isActive={entry.isActive}
+                isRecommended={entry.isRecommended}
+                isUpgrade={entry.isUpgrade}
+                isDowngrade={entry.isDowngrade}
+                onSelect={() => setSelectedPackage(entry.pkg)}
               />
-            );
-          })}
+            ))
+          )}
         </YStack>
       </YStack>
     </MobileShell>
@@ -141,16 +176,9 @@ function PackageShopCard({
   const { textStrong, muted, border, primary, accentSoft } = useAdminTheme();
   const { t } = useTranslation('management');
 
-  const hasRemainingEvents = owned && (owned.remaining_events === null || owned.remaining_events > 0);
-  const statusLabel = isActive 
-    ? t('shop.status.active', 'Active Plan') 
-    : owned 
-        ? (owned.remaining_events !== null 
-            ? t('shop.status.remaining', '{{count}} Events left', { count: owned.remaining_events })
-            : t('shop.status.owned', 'Purchased'))
-        : null;
+  const statusLabel = getPackageStatusLabel({ t, isActive, owned });
   const isSubdued = Boolean(isDowngrade && !isActive);
-  const canSelect = !isDowngrade || isActive;
+  const canSelect = canSelectPackage(isDowngrade, isActive);
 
   return (
     <MobileCard
@@ -236,40 +264,224 @@ function FeatureRow({ label }: { label: string }) {
     )
 }
 
+type PackageEntry = {
+  pkg: Package;
+  owned?: TenantPackageSummary;
+  isActive: boolean;
+  isRecommended: boolean;
+  isUpgrade: boolean;
+  isDowngrade: boolean;
+};
+
+function PackageShopCompareView({
+  entries,
+  onSelect,
+}: {
+  entries: PackageEntry[];
+  onSelect: (pkg: Package) => void;
+}) {
+  const { t } = useTranslation('management');
+  const { textStrong, muted, border, primary, accentSoft } = useAdminTheme();
+  const comparisonRows = buildPackageComparisonRows(entries.map((entry) => entry.pkg));
+  const labelWidth = 140;
+  const columnWidth = 150;
+
+  const rows = [
+    { id: 'meta.plan', type: 'meta' as const, label: t('shop.compare.headers.plan', 'Plan') },
+    { id: 'meta.price', type: 'meta' as const, label: t('shop.compare.headers.price', 'Price') },
+    ...comparisonRows,
+  ];
+
+  const renderRowLabel = (row: typeof rows[number]) => {
+    if (row.type === 'meta') {
+      return row.label;
+    }
+
+    if (row.type === 'limit') {
+      if (row.limitKey === 'max_photos') {
+        return t('shop.compare.rows.photos', 'Photos');
+      }
+      if (row.limitKey === 'max_guests') {
+        return t('shop.compare.rows.guests', 'Guests');
+      }
+      return t('shop.compare.rows.days', 'Gallery days');
+    }
+
+    return t(`shop.features.${row.featureKey}`, row.featureKey);
+  };
+
+  const formatLimitValue = (value: number | null) => {
+    if (value === null) {
+      return t('shop.compare.values.unlimited', 'Unlimited');
+    }
+    return new Intl.NumberFormat().format(value);
+  };
+
+  return (
+    <MobileCard space="$3" borderColor={border}>
+      <YStack space="$1">
+        <Text fontSize="$md" fontWeight="700" color={textStrong}>
+          {t('shop.compare.title', 'Compare plans')}
+        </Text>
+        <Text fontSize="$xs" color={muted}>
+          {t('shop.compare.helper', 'Swipe to compare packages side by side.')}
+        </Text>
+      </YStack>
+
+      <XStack style={{ overflowX: 'auto' }}>
+        <YStack space="$1.5" minWidth={labelWidth + columnWidth * entries.length}>
+          {rows.map((row) => (
+            <XStack key={row.id} borderBottomWidth={1} borderColor={border}>
+              <YStack
+                width={labelWidth}
+                paddingVertical="$2"
+                paddingRight="$3"
+                justifyContent="center"
+              >
+                <Text fontSize="$xs" fontWeight="700" color={muted}>
+                  {renderRowLabel(row)}
+                </Text>
+              </YStack>
+              {entries.map((entry) => {
+                const cellBackground = entry.isRecommended ? accentSoft : entry.isActive ? '$green1' : undefined;
+                let content: React.ReactNode = null;
+
+                if (row.type === 'meta') {
+                  if (row.id === 'meta.plan') {
+                    const statusLabel = getPackageStatusLabel({ t, isActive: entry.isActive, owned: entry.owned });
+                    content = (
+                      <YStack space="$1">
+                        <Text fontSize="$sm" fontWeight="800" color={textStrong}>
+                          {entry.pkg.name}
+                        </Text>
+                        <XStack space="$1.5" flexWrap="wrap">
+                          {entry.isRecommended ? (
+                            <PillBadge tone="warning">{t('shop.badges.recommended', 'Recommended')}</PillBadge>
+                          ) : null}
+                          {entry.isUpgrade && !entry.isActive ? (
+                            <PillBadge tone="success">{t('shop.badges.upgrade', 'Upgrade')}</PillBadge>
+                          ) : null}
+                          {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}
+                        </XStack>
+                        {statusLabel ? (
+                          <Text fontSize="$xs" color={muted}>
+                            {statusLabel}
+                          </Text>
+                        ) : null}
+                      </YStack>
+                    );
+                  } else if (row.id === 'meta.price') {
+                    content = (
+                      <Text fontSize="$sm" fontWeight="700" color={primary}>
+                        {new Intl.NumberFormat(undefined, { style: 'currency', currency: 'EUR' }).format(entry.pkg.price)}
+                      </Text>
+                    );
+                  }
+                } else if (row.type === 'limit') {
+                  const value = entry.pkg[row.limitKey] ?? null;
+                  content = (
+                    <Text fontSize="$sm" fontWeight="600" color={textStrong}>
+                      {formatLimitValue(value)}
+                    </Text>
+                  );
+                } else if (row.type === 'feature') {
+                  const enabled = Boolean(entry.pkg.features?.[row.featureKey]);
+                  content = (
+                    <XStack alignItems="center" space="$1.5">
+                      {enabled ? (
+                        <Check size={16} color={primary} />
+                      ) : (
+                        <X size={14} color={muted} />
+                      )}
+                      <Text fontSize="$sm" color={enabled ? textStrong : muted}>
+                        {enabled ? t('shop.compare.values.included', 'Included') : t('shop.compare.values.notIncluded', 'Not included')}
+                      </Text>
+                    </XStack>
+                  );
+                }
+
+                return (
+                  <YStack
+                    key={`${row.id}-${entry.pkg.id}`}
+                    width={columnWidth}
+                    paddingVertical="$2"
+                    paddingHorizontal="$2"
+                    justifyContent="center"
+                    backgroundColor={cellBackground}
+                  >
+                    {content}
+                  </YStack>
+                );
+              })}
+            </XStack>
+          ))}
+          <XStack paddingTop="$2">
+            <YStack width={labelWidth} />
+            {entries.map((entry) => {
+              const canSelect = canSelectPackage(entry.isDowngrade, entry.isActive);
+              const label = entry.isActive
+                ? t('shop.manage', 'Manage Plan')
+                : entry.isDowngrade
+                  ? t('shop.selectDisabled', 'Not available')
+                  : t('shop.select', 'Select');
+
+              return (
+                <YStack key={`cta-${entry.pkg.id}`} width={columnWidth} paddingHorizontal="$2">
+                  <CTAButton
+                    label={label}
+                    onPress={canSelect ? () => onSelect(entry.pkg) : undefined}
+                    disabled={!canSelect}
+                    tone={entry.isActive || entry.isDowngrade ? 'ghost' : 'primary'}
+                  />
+                </YStack>
+              );
+            })}
+          </XStack>
+        </YStack>
+      </XStack>
+    </MobileCard>
+  );
+}
+
+function getPackageStatusLabel({
+  t,
+  isActive,
+  owned,
+}: {
+  t: (key: string, fallback?: string, options?: Record<string, unknown>) => string;
+  isActive?: boolean;
+  owned?: TenantPackageSummary;
+}): string | null {
+  if (isActive) {
+    return t('shop.status.active', 'Active Plan');
+  }
+  if (owned) {
+    return owned.remaining_events !== null
+      ? t('shop.status.remaining', '{{count}} Events left', { count: owned.remaining_events })
+      : t('shop.status.owned', 'Purchased');
+  }
+  return null;
+}
+
+function canSelectPackage(isDowngrade?: boolean, isActive?: boolean): boolean {
+  return !isDowngrade || Boolean(isActive);
+}
+
 function CheckoutConfirmation({ pkg, onCancel }: { pkg: Package; onCancel: () => void }) {
   const { t } = useTranslation('management');
-  const { textStrong, muted, border, primary, danger } = useAdminTheme();
+  const { textStrong, muted, border, primary } = useAdminTheme();
   const [agbAccepted, setAgbAccepted] = React.useState(false);
   const [withdrawalAccepted, setWithdrawalAccepted] = React.useState(false);
-  const [busy, setBusy] = React.useState(false);
+  const { busy, startCheckout } = usePackageCheckout();
 
   const canProceed = agbAccepted && withdrawalAccepted;
 
   const handleCheckout = async () => {
     if (!canProceed || busy) return;
-    setBusy(true);
-    try {
-        if (typeof window === 'undefined') {
-            throw new Error('Checkout is only available in the browser.');
-        }
-
-        const billingUrl = new URL(adminPath('/mobile/billing'), window.location.origin);
-        const successUrl = new URL(billingUrl);
-        successUrl.searchParams.set('checkout', 'success');
-        successUrl.searchParams.set('package_id', String(pkg.id));
-        const cancelUrl = new URL(billingUrl);
-        cancelUrl.searchParams.set('checkout', 'cancel');
-        cancelUrl.searchParams.set('package_id', String(pkg.id));
-
-        const { checkout_url } = await createTenantPaddleCheckout(pkg.id, {
-            success_url: successUrl.toString(),
-            return_url: cancelUrl.toString(),
-        });
-        window.location.href = checkout_url;
-    } catch (err) {
-        toast.error(getApiErrorMessage(err, t('shop.errors.checkout', 'Checkout failed')));
-        setBusy(false);
-    }
+    await startCheckout(pkg.id);
   };
 
   return (