@doswiftly/cli 0.1.18 → 0.1.19

package/templates/storefront-nextjs-shadcn/app/checkout/loading.tsx

@@ -0,0 +1,31 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function CheckoutLoading() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Skeleton className="mb-8 h-10 w-40" />
+      <div className="grid gap-8 lg:grid-cols-5">
+        {/* Checkout form */}
+        <div className="space-y-6 lg:col-span-3">
+          <Skeleton className="h-6 w-48" />
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+            <div className="grid grid-cols-2 gap-4">
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+          </div>
+        </div>
+        {/* Order summary */}
+        <div className="lg:col-span-2">
+          <Skeleton className="h-80 w-full rounded-lg" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/checkout/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
+import { StorefrontError } from "@doswiftly/storefront-sdk";
 import { useCartStore } from "@/stores/cart-store";
 import { useCartSync } from "@/hooks/use-cart-sync";
 import {
@@ -18,7 +19,7 @@ import {
   useCheckoutComplete,
   useCheckout,
 } from "@/lib/graphql/hooks";
-import { formatAmount } from "@/lib/format";
+import { formatAmount } from "@doswiftly/storefront-sdk";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -345,8 +346,8 @@ export default function CheckoutPage() {
 
   // Sync discount codes from checkout (transferred from cart) to form state
   useEffect(() => {
-    if (checkout?.discountCodes?.length > 0 && !formState.appliedDiscountCode) {
-      const applicableCode = checkout.discountCodes.find((dc: any) => dc.applicable);
+    if ((checkout?.discountCodes?.length ?? 0) > 0 && !formState.appliedDiscountCode) {
+      const applicableCode = checkout?.discountCodes?.find((dc) => dc.applicable);
       if (applicableCode) {
         setFormState((prev) => ({
           ...prev,
@@ -429,8 +430,9 @@ export default function CheckoutPage() {
       }
 
       setCurrentStep(allGiftCards ? "payment" : "shipping");
-    } catch (error: any) {
-      toast.error(error.message || "Nie udało się przetworzyć danych kontaktowych");
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Nie udało się przetworzyć danych kontaktowych";
+      toast.error(message);
     }
   };
 
@@ -510,8 +512,9 @@ export default function CheckoutPage() {
       // Refetch checkout to get shipping rates
       await refetchCheckout();
       setCurrentStep("delivery");
-    } catch (error: any) {
-      toast.error(error.message || "Nie udało się zaktualizować adresu");
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Nie udało się zaktualizować adresu";
+      toast.error(message);
     }
   };
 
@@ -544,8 +547,9 @@ export default function CheckoutPage() {
 
       await refetchCheckout();
       setCurrentStep("payment");
-    } catch (error: any) {
-      toast.error(error.message || "Nie udało się wybrać metody dostawy");
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Nie udało się wybrać metody dostawy";
+      toast.error(message);
     }
   };
 
@@ -556,10 +560,10 @@ export default function CheckoutPage() {
   const handlePaymentMethodSelect = (paymentMethodId: string) => {
     // Validate payment method supports current currency
     const selectedMethod = checkout?.availablePaymentMethods?.find(
-      (pm: any) => pm.id === paymentMethodId
+      (pm) => pm.id === paymentMethodId
     );
 
-    if (selectedMethod?.supportedCurrencies?.length > 0) {
+    if (selectedMethod?.supportedCurrencies && selectedMethod.supportedCurrencies.length > 0) {
       const supportsCurrency = selectedMethod.supportedCurrencies.includes(currencyCode);
       if (!supportsCurrency) {
         setErrors({
@@ -581,7 +585,7 @@ export default function CheckoutPage() {
 
     // Validate selected payment method still exists and is valid
     const selectedMethod = checkout?.availablePaymentMethods?.find(
-      (pm: any) => pm.id === formState.selectedPaymentMethodId
+      (pm) => pm.id === formState.selectedPaymentMethodId
     );
 
     if (!selectedMethod) {
@@ -591,7 +595,7 @@ export default function CheckoutPage() {
     }
 
     // Validate currency support
-    if (selectedMethod.supportedCurrencies?.length > 0) {
+    if (selectedMethod.supportedCurrencies && selectedMethod.supportedCurrencies.length > 0) {
       const supportsCurrency = selectedMethod.supportedCurrencies.includes(currencyCode);
       if (!supportsCurrency) {
         setErrors({
@@ -644,8 +648,9 @@ export default function CheckoutPage() {
       }));
       await refetchCheckout();
       toast.success("Kod rabatowy został zastosowany");
-    } catch (error: any) {
-      toast.error(error.message || "Nie udało się zastosować kodu rabatowego");
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Nie udało się zastosować kodu rabatowego";
+      toast.error(message);
     }
   };
 
@@ -671,8 +676,9 @@ export default function CheckoutPage() {
       }));
       await refetchCheckout();
       toast.success("Kod rabatowy został usunięty");
-    } catch (error: any) {
-      toast.error(error.message || "Nie udało się usunąć kodu rabatowego");
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Nie udało się usunąć kodu rabatowego";
+      toast.error(message);
     }
   };
 
@@ -703,10 +709,10 @@ export default function CheckoutPage() {
           GIFT_CARD_NOT_FOUND: "Nie znaleziono karty podarunkowej o podanym kodzie",
           GIFT_CARD_EXPIRED: "Ta karta podarunkowa wygasła",
           GIFT_CARD_DISABLED: "Ta karta podarunkowa jest wyłączona",
-          GIFT_CARD_NO_BALANCE: "Ta karta podarunkowa nie ma dostępnego salda",
-          GIFT_CARD_ALREADY_APPLIED: "Ta karta jest już zastosowana",
+          GIFT_CARD_DEPLETED: "Ta karta podarunkowa nie ma dostępnego salda",
+          GIFT_CARD_UNUSABLE: "Ta karta jest już zastosowana",
         };
-        toast.error(errorMessages[error.code] || error.message);
+        toast.error((error.code && errorMessages[error.code]) || error.message);
         return;
       }
 
@@ -716,8 +722,9 @@ export default function CheckoutPage() {
       }));
       await refetchCheckout();
       toast.success("Karta podarunkowa została zastosowana");
-    } catch (error: any) {
-      toast.error(error.message || "Nie udało się zastosować karty podarunkowej");
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Nie udało się zastosować karty podarunkowej";
+      toast.error(message);
     }
   };
 
@@ -739,8 +746,9 @@ export default function CheckoutPage() {
 
       await refetchCheckout();
       toast.success("Karta podarunkowa została usunięta");
-    } catch (error: any) {
-      toast.error(error.message || "Nie udało się usunąć karty podarunkowej");
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Nie udało się usunąć karty podarunkowej";
+      toast.error(message);
     }
   };
 
@@ -781,27 +789,20 @@ export default function CheckoutPage() {
         const errorMessage = error.message;
 
         // Handle specific payment-related error codes
-        switch (errorCode) {
+        // Cast to string since backend may return codes not in the generated enum
+        const codeStr = errorCode as string | null | undefined;
+        switch (codeStr) {
           case "INVALID_PAYMENT_METHOD":
-          case "PAYMENT_METHOD_NOT_FOUND":
+          case "NO_PAYMENT_METHODS":
             setErrors({ payment: "Wybrana metoda płatności jest niedostępna. Wybierz inną metodę." });
             setFormState((prev) => ({ ...prev, selectedPaymentMethodId: null }));
             setCurrentStep("payment");
             toast.error("Metoda płatności jest niedostępna");
             break;
-          case "PAYMENT_METHOD_CURRENCY_NOT_SUPPORTED":
-            setErrors({ payment: `Metoda płatności nie obsługuje wybranej waluty (${currencyCode}).` });
-            setCurrentStep("payment");
-            toast.error("Waluta nie jest obsługiwana przez tę metodę płatności");
-            break;
-          case "PAYMENT_DECLINED":
-            toast.error("Płatność została odrzucona. Spróbuj ponownie lub wybierz inną metodę.");
-            setCurrentStep("payment");
-            break;
-          case "CHECKOUT_EXPIRED":
+          case "ALREADY_COMPLETED":
             toast.error("Sesja checkout wygasła. Proszę odświeżyć stronę i spróbować ponownie.");
             break;
-          case "INVENTORY_NOT_AVAILABLE":
+          case "NOT_ENOUGH_IN_STOCK":
             toast.error("Niektóre produkty są niedostępne. Sprawdź swój koszyk.");
             break;
           default:
@@ -821,7 +822,7 @@ export default function CheckoutPage() {
         const orderId = completeResult.checkoutComplete.order.id;
         const paymentType = formState.selectedPaymentMethodId
           ? checkout?.availablePaymentMethods?.find(
-              (pm: any) => pm.id === formState.selectedPaymentMethodId
+              (pm) => pm.id === formState.selectedPaymentMethodId
             )?.type
           : null;
 
@@ -832,8 +833,9 @@ export default function CheckoutPage() {
         // Fallback: no payment URL and no order - show error
         toast.error("Wystąpił nieoczekiwany błąd. Skontaktuj się z obsługą.");
       }
-    } catch (error: any) {
-      toast.error(error.message || "Nie udało się sfinalizować zamówienia");
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Nie udało się sfinalizować zamówienia";
+      toast.error(message);
     }
   };
 
@@ -1283,7 +1285,7 @@ export default function CheckoutPage() {
                 {/* PaymentStep component handles payment method selection */}
                 <PaymentStep
                   availablePaymentMethods={(checkout.availablePaymentMethods || []).map(
-                    (pm: any): PaymentMethod => ({
+                    (pm): PaymentMethod => ({
                       id: pm.id,
                       name: pm.name,
                       provider: pm.provider,
@@ -1417,7 +1419,7 @@ export default function CheckoutPage() {
                     {formState.selectedPaymentMethodId && (
                       <p className="text-sm text-muted-foreground">
                         {checkout.availablePaymentMethods?.find(
-                          (pm: any) => pm.id === formState.selectedPaymentMethodId
+                          (pm) => pm.id === formState.selectedPaymentMethodId
                         )?.name || "Wybrana metoda płatności"}
                       </p>
                     )}
@@ -1497,43 +1499,78 @@ export default function CheckoutPage() {
             <CardContent className="space-y-4">
               {/* Line Items */}
               <div className="space-y-3">
-                {(checkout?.lineItems || items).map((item: any) => (
-                  <div
-                    key={item.id || item.lineId || item.variantId}
-                    className="flex gap-3 text-sm"
-                  >
-                    <div className="relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border bg-muted">
-                      {item.image?.url ? (
-                        <img
-                          src={item.image.url}
-                          alt={item.title || item.productTitle}
-                          className="h-full w-full object-cover"
-                        />
-                      ) : (
-                        <div className="flex h-full w-full items-center justify-center">
-                          <Package className="h-6 w-6 text-muted-foreground" />
+                {(checkout?.lineItems ?? []).length > 0
+                  ? checkout!.lineItems.map((item) => (
+                      <div
+                        key={item.id}
+                        className="flex gap-3 text-sm"
+                      >
+                        <div className="relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border bg-muted">
+                          {item.image?.url ? (
+                            <img
+                              src={item.image.url}
+                              alt={item.title}
+                              className="h-full w-full object-cover"
+                            />
+                          ) : (
+                            <div className="flex h-full w-full items-center justify-center">
+                              <Package className="h-6 w-6 text-muted-foreground" />
+                            </div>
+                          )}
+                          <span className="absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
+                            {item.quantity}
+                          </span>
                         </div>
-                      )}
-                      <span className="absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
-                        {item.quantity}
-                      </span>
-                    </div>
-                    <div className="flex-1">
-                      <p className="font-medium line-clamp-2">
-                        {item.title || item.productTitle}
-                      </p>
-                      {item.variantTitle && item.variantTitle !== "Default" && (
-                        <p className="text-xs text-muted-foreground">{item.variantTitle}</p>
-                      )}
-                    </div>
-                    <p className="font-medium">
-                      {formatPrice(
-                        item.totalPrice?.amount ||
-                          parseFloat(item.price.amount) * item.quantity
-                      )}
-                    </p>
-                  </div>
-                ))}
+                        <div className="flex-1">
+                          <p className="font-medium line-clamp-2">
+                            {item.title}
+                          </p>
+                          {item.variantTitle && item.variantTitle !== "Default" && (
+                            <p className="text-xs text-muted-foreground">{item.variantTitle}</p>
+                          )}
+                        </div>
+                        <p className="font-medium">
+                          {formatPrice(item.totalPrice.amount)}
+                        </p>
+                      </div>
+                    ))
+                  : items.map((item) => (
+                      <div
+                        key={item.lineId}
+                        className="flex gap-3 text-sm"
+                      >
+                        <div className="relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border bg-muted">
+                          {item.image?.url ? (
+                            <img
+                              src={item.image.url}
+                              alt={item.productTitle}
+                              className="h-full w-full object-cover"
+                            />
+                          ) : (
+                            <div className="flex h-full w-full items-center justify-center">
+                              <Package className="h-6 w-6 text-muted-foreground" />
+                            </div>
+                          )}
+                          <span className="absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
+                            {item.quantity}
+                          </span>
+                        </div>
+                        <div className="flex-1">
+                          <p className="font-medium line-clamp-2">
+                            {item.productTitle}
+                          </p>
+                          {item.variantTitle && item.variantTitle !== "Default" && (
+                            <p className="text-xs text-muted-foreground">{item.variantTitle}</p>
+                          )}
+                        </div>
+                        <p className="font-medium">
+                          {formatPrice(
+                            parseFloat(item.price.amount) * item.quantity
+                          )}
+                        </p>
+                      </div>
+                    ))
+                }
               </div>
 
               {/* Discount Code */}
@@ -1591,7 +1628,7 @@ export default function CheckoutPage() {
                   {/* Applied Gift Cards */}
                   {checkout?.appliedGiftCards && checkout.appliedGiftCards.length > 0 && (
                     <div className="space-y-2">
-                      {checkout.appliedGiftCards.map((giftCard: any) => (
+                      {checkout.appliedGiftCards.map((giftCard) => (
                         <div
                           key={giftCard.lastCharacters}
                           className="flex items-center justify-between rounded-lg bg-purple-50 p-3 dark:bg-purple-950"

package/templates/storefront-nextjs-shadcn/app/collections/[handle]/loading.tsx

@@ -0,0 +1,19 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function CollectionLoading() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Skeleton className="mb-2 h-10 w-64" />
+      <Skeleton className="mb-8 h-5 w-96" />
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
+        {[...Array(8)].map((_, i) => (
+          <div key={i} className="space-y-3">
+            <Skeleton className="aspect-square w-full rounded-lg" />
+            <Skeleton className="h-4 w-3/4" />
+            <Skeleton className="h-4 w-1/2" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/collections/[handle]/page.tsx

@@ -14,7 +14,7 @@ export default function CollectionPage() {
   const { data, isLoading, error } = useCollection(handle);
 
   const collection = data?.collection;
-  const products = collection?.products?.edges?.map((edge: any) => edge.node) ?? [];
+  const products = collection?.products?.edges?.map((edge) => edge.node) ?? [];
 
   if (isLoading) {
     return (

package/templates/storefront-nextjs-shadcn/app/collections/loading.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function CollectionsLoading() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Skeleton className="mb-8 h-10 w-48" />
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {[...Array(6)].map((_, i) => (
+          <div key={i} className="space-y-3">
+            <Skeleton className="aspect-[3/2] w-full rounded-lg" />
+            <Skeleton className="h-5 w-3/4" />
+            <Skeleton className="h-4 w-1/2" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/collections/page.tsx

@@ -12,11 +12,14 @@ export const metadata: Metadata = {
 export const revalidate = 60;
 
 export default async function CollectionsPage() {
-  // Fetch collections from GraphQL API (already normalized to flat array)
-  const { collections } = await fetchCollections({ first: 20 });
+  let collectionList: Awaited<ReturnType<typeof fetchCollections>>['collections'] = [];
 
-  // Defensive check for empty/undefined response
-  const collectionList = collections || [];
+  try {
+    const { collections } = await fetchCollections({ first: 20 });
+    collectionList = collections || [];
+  } catch (error) {
+    console.error('[CollectionsPage] Failed to fetch collections:', error instanceof Error ? error.message : error);
+  }
 
   return (
     <div className="container mx-auto px-4 py-8">

package/templates/storefront-nextjs-shadcn/app/global-error.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+/**
+ * GlobalError — catches errors from root layout (where error.tsx cannot reach).
+ *
+ * This replaces the entire <html> document, so it must include its own
+ * <html> and <body> tags. No providers, no Header/Footer — just a
+ * self-contained error page.
+ *
+ * Next.js docs: https://nextjs.org/docs/app/api-reference/file-conventions/error#global-errorjs
+ */
+
+import { useEffect } from 'react';
+
+interface GlobalErrorProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function GlobalError({ error, reset }: GlobalErrorProps) {
+  useEffect(() => {
+    console.error('[GlobalError]', error);
+  }, [error]);
+
+  return (
+    <html lang="pl">
+      <body
+        style={{
+          margin: 0,
+          fontFamily:
+            '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          backgroundColor: '#fafafa',
+          color: '#1e293b',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: '100vh',
+        }}
+      >
+        <div
+          style={{
+            maxWidth: '28rem',
+            width: '100%',
+            padding: '2rem',
+            textAlign: 'center',
+          }}
+        >
+          <div
+            style={{
+              width: '4rem',
+              height: '4rem',
+              margin: '0 auto 1.5rem',
+              borderRadius: '50%',
+              backgroundColor: '#fef2f2',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: '1.5rem',
+            }}
+          >
+            !
+          </div>
+
+          <h1 style={{ fontSize: '1.5rem', fontWeight: 600, margin: '0 0 0.5rem' }}>
+            Serwer tymczasowo niedostępny
+          </h1>
+
+          <p style={{ color: '#64748b', margin: '0 0 2rem', lineHeight: 1.6 }}>
+            Nie udało się załadować strony. Serwer może być tymczasowo niedostępny.
+            Spróbuj odświeżyć stronę za chwilę.
+          </p>
+
+          {process.env.NODE_ENV === 'development' && (
+            <div
+              style={{
+                backgroundColor: '#f1f5f9',
+                borderRadius: '0.5rem',
+                padding: '0.75rem 1rem',
+                marginBottom: '1.5rem',
+                textAlign: 'left',
+                fontSize: '0.75rem',
+                wordBreak: 'break-word',
+              }}
+            >
+              <strong style={{ color: '#ef4444' }}>{error.message}</strong>
+              {error.digest && (
+                <p style={{ color: '#64748b', margin: '0.25rem 0 0' }}>
+                  Digest: {error.digest}
+                </p>
+              )}
+            </div>
+          )}
+
+          <button
+            onClick={reset}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '100%',
+              padding: '0.625rem 1.25rem',
+              fontSize: '0.875rem',
+              fontWeight: 500,
+              color: '#fff',
+              backgroundColor: '#3b82f6',
+              border: 'none',
+              borderRadius: '0.5rem',
+              cursor: 'pointer',
+            }}
+          >
+            Spróbuj ponownie
+          </button>
+        </div>
+      </body>
+    </html>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/globals.css

@@ -122,4 +122,12 @@
   .text-balance {
     text-wrap: balance;
   }
+
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
 }