Add order CTA links on packages overview

resources/js/pages/marketing/Packages.tsx

@@ -673,6 +673,7 @@ interface PackageCardProps {
   variant: 'endcustomer' | 'reseller';
   highlight?: boolean;
   onSelect?: (pkg: Package) => void;
+  onCtaClick?: (pkg: Package, variant: 'endcustomer' | 'reseller') => void;
   className?: string;
   showCTA?: boolean;
   ctaLabel?: string;
@@ -684,6 +685,7 @@ function PackageCard({
   variant,
   highlight = false,
   onSelect,
+  onCtaClick,
   className,
   showCTA = true,
   ctaLabel,
@@ -691,9 +693,12 @@ function PackageCard({
 }: PackageCardProps) {
   const { t } = useTranslation('marketing');
   const { t: tCommon } = useTranslation('common');
+  const { localizedPath } = useLocalizedRoutes();
 
   const accent = getAccentTheme(variant);
 
+  const purchaseUrl = localizedPath(`/bestellen/${pkg.id}`);
+
   const numericPrice = Number(pkg.price);
   const priceLabel =
     numericPrice === 0
@@ -805,19 +810,42 @@ function PackageCard({
         {featureList}
       </CardContent>
       {showCTA && onSelect && (
-        <CardFooter className={cn('mt-auto', compact && 'pt-4')}> 
-          <Button
-            onClick={() => onSelect(pkg)}
-            className={cn(
-              'w-full justify-center rounded-full text-sm font-semibold',
-              highlight ? accent.buttonHighlight : accent.buttonDefault,
-              compact && 'py-4 text-base',
-            )}
-            variant={highlight ? 'default' : 'outline'}
-          >
-            {ctaLabel ?? t('packages.view_details')}
-            <ArrowRight className="h-4 w-4" aria-hidden />
-          </Button>
+        <CardFooter className={cn('mt-auto', compact && 'pt-4')}>
+          <div className="grid w-full grid-cols-[2fr_1fr] gap-2">
+            <Button
+              asChild
+              className={cn(
+                'w-full justify-center rounded-full text-sm font-semibold',
+                highlight
+                  ? accent.buttonHighlight
+                  : 'bg-gray-900 text-white hover:bg-gray-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white',
+                compact && 'py-4 text-base',
+              )}
+              variant="default"
+            >
+              <Link
+                href={purchaseUrl}
+                onClick={() => {
+                  onCtaClick?.(pkg, variant);
+                  localStorage.setItem('preferred_package', JSON.stringify(pkg));
+                }}
+              >
+                {t('packages.to_order')}
+              </Link>
+            </Button>
+            <Button
+              onClick={() => onSelect(pkg)}
+              className={cn(
+                'w-full justify-center rounded-full text-sm font-semibold',
+                accent.buttonDefault,
+                compact && 'py-4 text-base',
+              )}
+              variant="outline"
+            >
+              {ctaLabel ?? t('packages.view_details')}
+              <ArrowRight className="h-4 w-4" aria-hidden />
+            </Button>
+          </div>
         </CardFooter>
       )}
     </Card>
@@ -1072,6 +1100,7 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
                             variant="endcustomer"
                             highlight={pkg.id === highlightEndcustomerId}
                             onSelect={(selected) => handleCardClick(selected, 'endcustomer')}
+                            onCtaClick={handleCtaClick}
                             className="h-full"
                             compact
                           />
@@ -1095,6 +1124,7 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
                       variant="endcustomer"
                       highlight={pkg.id === highlightEndcustomerId}
                       onSelect={(selected) => handleCardClick(selected, 'endcustomer')}
+                      onCtaClick={handleCtaClick}
                       className="h-full"
                       compact
                     />
@@ -1124,6 +1154,7 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
                             variant="reseller"
                             highlight={pkg.id === highlightResellerId}
                             onSelect={(selected) => handleCardClick(selected, 'reseller')}
+                            onCtaClick={handleCtaClick}
                             className="h-full"
                             compact
                           />
@@ -1147,6 +1178,7 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
                       variant="reseller"
                       highlight={pkg.id === highlightResellerId}
                       onSelect={(selected) => handleCardClick(selected, 'reseller')}
+                      onCtaClick={handleCtaClick}
                       className="h-full"
                       compact
                     />