Add upgrade CTAs for branding and watermarks

resources/js/admin/mobile/BrandingPage.tsx

@@ -339,10 +339,11 @@ export default function MobileBrandingPage() {
         </MobileCard>
 
         {disabled ? (
-          <InfoBadge
-            icon={<Lock size={16} color={danger} />}
-            text={t('events.watermark.lockedDisabled', 'Kein Wasserzeichen in diesem Paket.')}
-            tone="danger"
+          <UpgradeCard
+            title={t('events.watermark.lockedTitle', 'Unlock watermarks')}
+            body={t('events.watermark.lockedBody', 'Custom watermarks are available with the Premium package.')}
+            actionLabel={t('events.watermark.upgradeAction', 'Upgrade to Premium')}
+            onPress={() => navigate(adminPath('/mobile/billing/shop?feature=watermark_allowed'))}
           />
         ) : null}
 
@@ -605,10 +606,11 @@ export default function MobileBrandingPage() {
           </MobileCard>
 
           {!brandingAllowed ? (
-            <InfoBadge
-              icon={<Lock size={16} color={danger} />}
-              text={t('events.branding.lockedBranding', 'Branding ist in diesem Paket gesperrt.')}
-              tone="danger"
+            <UpgradeCard
+              title={t('events.branding.lockedTitle', 'Unlock branding')}
+              body={t('events.branding.lockedBody', 'Upgrade to Standard or Premium to unlock event branding.')}
+              actionLabel={t('events.branding.upgradeAction', 'Upgrade package')}
+              onPress={() => navigate(adminPath('/mobile/billing/shop?feature=custom_branding'))}
             />
           ) : null}
 
@@ -1468,6 +1470,52 @@ function InfoBadge({ icon, text, tone = 'info' }: { icon?: React.ReactNode; text
   );
 }
 
+function UpgradeCard({
+  title,
+  body,
+  actionLabel,
+  onPress,
+}: {
+  title: string;
+  body: string;
+  actionLabel: string;
+  onPress: () => void;
+}) {
+  const { textStrong, muted, border, surface, primary, accentSoft } = useAdminTheme();
+
+  return (
+    <MobileCard
+      space="$4"
+      padding="$6"
+      alignItems="center"
+      justifyContent="center"
+      borderColor={border}
+      backgroundColor={surface}
+    >
+      <YStack
+        width={64}
+        height={64}
+        borderRadius={32}
+        backgroundColor={accentSoft}
+        alignItems="center"
+        justifyContent="center"
+        marginBottom="$2"
+      >
+        <Lock size={32} color={primary} />
+      </YStack>
+      <YStack space="$2" alignItems="center">
+        <Text fontSize="$xl" fontWeight="900" color={textStrong} textAlign="center">
+          {title}
+        </Text>
+        <Text fontSize="$sm" color={muted} textAlign="center">
+          {body}
+        </Text>
+      </YStack>
+      <CTAButton label={actionLabel} onPress={onPress} />
+    </MobileCard>
+  );
+}
+
 function TabButton({ label, active, onPress }: { label: string; active: boolean; onPress: () => void }) {
   const { backdrop, surfaceMuted, border, surface } = useAdminTheme();
   return (

resources/js/admin/mobile/__tests__/BrandingPage.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 const navigateMock = vi.fn();
 const backMock = vi.fn();
@@ -163,4 +163,38 @@ describe('MobileBrandingPage', () => {
     expect(screen.getByText('Theme')).toBeInTheDocument();
     expect(screen.getByText('Colors')).toBeInTheDocument();
   });
+
+  it('offers an upgrade CTA when branding is locked', async () => {
+    getEventMock.mockResolvedValueOnce({
+      ...baseEvent,
+      package: { branding_allowed: false, watermark_allowed: false },
+    });
+
+    render(<MobileBrandingPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Unlock branding')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Upgrade package')).toBeInTheDocument();
+  });
+
+  it('offers an upgrade CTA on the watermark tab when disabled', async () => {
+    getEventMock.mockResolvedValueOnce({
+      ...baseEvent,
+      package: { branding_allowed: true, watermark_allowed: false },
+    });
+
+    render(<MobileBrandingPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Branding Source')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText('Wasserzeichen'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Upgrade to Premium')).toBeInTheDocument();
+    });
+  });
 });

resources/js/admin/mobile/__tests__/packageShop.test.ts

@@ -56,6 +56,16 @@ describe('selectRecommendedPackageId', () => {
     const active = { id: 10, price: 250, max_photos: 999, max_guests: 999, gallery_days: 365, features: { advanced_analytics: true } } as any;
     expect(selectRecommendedPackageId(packages, 'advanced_analytics', active)).toBe(2);
   });
+
+  it('selects the cheapest package with watermark access when requested', () => {
+    const watermarkPackages = [
+      { id: 1, price: 100, watermark_allowed: false, features: {} },
+      { id: 2, price: 120, watermark_allowed: true, features: {} },
+      { id: 3, price: 180, watermark_allowed: true, features: {} },
+    ] as any;
+    const active = { id: 1, price: 100, watermark_allowed: false, features: {} } as any;
+    expect(selectRecommendedPackageId(watermarkPackages, 'watermark_allowed', active)).toBe(2);
+  });
 });
 
 describe('buildPackageComparisonRows', () => {

resources/js/admin/mobile/lib/packageShop.ts

@@ -106,7 +106,9 @@ export function selectRecommendedPackageId(
     return null;
   }
 
-  const candidates = packages.filter((pkg) => normalizePackageFeatures(pkg).includes(feature));
+  const candidates = feature === 'watermark_allowed'
+    ? packages.filter((pkg) => pkg.watermark_allowed === true)
+    : packages.filter((pkg) => normalizePackageFeatures(pkg).includes(feature));
   if (candidates.length === 0) {
     return null;
   }