@doswiftly/cli 0.1.18 → 0.1.20

package/templates/storefront-nextjs-shadcn/components/returns/return-request-form.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
@@ -104,46 +105,28 @@ export interface ReturnFormData {
   }[];
 }
 
-const defaultReasons: ReturnReasonOption[] = [
-  {
-    value: "DEFECTIVE",
-    label: "Defective Product",
-    description: "The product has a manufacturing defect",
-  },
-  {
-    value: "NOT_AS_DESCRIBED",
-    label: "Not as Described",
-    description: "The product does not match the description",
-  },
-  {
-    value: "WRONG_ITEM",
-    label: "Wrong Item Received",
-    description: "You received a different item",
-  },
-  {
-    value: "CHANGED_MIND",
-    label: "Changed My Mind",
-    description: "You no longer want the product",
-  },
-  {
-    value: "BETTER_PRICE",
-    label: "Found Better Price",
-    description: "Found the same product cheaper elsewhere",
-  },
-  {
-    value: "DAMAGED_SHIPPING",
-    label: "Damaged in Shipping",
-    description: "The product was damaged during delivery",
-  },
-  { value: "OTHER", label: "Other", description: "Another reason" },
-];
-
-const itemConditions = [
-  { value: "NEW", label: "New (unused, in original packaging)" },
-  { value: "OPENED", label: "Opened (packaging opened but unused)" },
-  { value: "USED", label: "Used" },
-  { value: "DAMAGED", label: "Damaged" },
-];
+function useDefaultReasons(): ReturnReasonOption[] {
+  const t = useTranslations("returns");
+  return [
+    { value: "DEFECTIVE", label: t("reasonDefective"), description: t("reasonDefectiveDesc") },
+    { value: "NOT_AS_DESCRIBED", label: t("reasonNotAsDescribed"), description: t("reasonNotAsDescribedDesc") },
+    { value: "WRONG_ITEM", label: t("reasonWrongItem"), description: t("reasonWrongItemDesc") },
+    { value: "CHANGED_MIND", label: t("reasonChangedMind"), description: t("reasonChangedMindDesc") },
+    { value: "BETTER_PRICE", label: t("reasonBetterPrice"), description: t("reasonBetterPriceDesc") },
+    { value: "DAMAGED_SHIPPING", label: t("reasonDamagedShipping"), description: t("reasonDamagedShippingDesc") },
+    { value: "OTHER", label: t("reasonOther"), description: t("reasonOtherDesc") },
+  ];
+}
+
+function useItemConditions() {
+  const t = useTranslations("returns");
+  return [
+    { value: "NEW", label: t("conditionNew") },
+    { value: "OPENED", label: t("conditionOpened") },
+    { value: "USED", label: t("conditionUsed") },
+    { value: "DAMAGED", label: t("conditionDamaged") },
+  ];
+}
 
 const formSchema = z.object({
   reason: z.enum([
@@ -197,11 +180,16 @@ export function ReturnRequestForm({
   orderId,
   orderNumber,
   items,
-  reasons = defaultReasons,
+  reasons,
   onSubmit,
   onCancel,
   className = "",
 }: ReturnRequestFormProps) {
+  const t = useTranslations("returns");
+  const tc = useTranslations("common");
+  const defaultReasons = useDefaultReasons();
+  const itemConditions = useItemConditions();
+  const resolvedReasons = reasons ?? defaultReasons;
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
   const [submitSuccess, setSubmitSuccess] = useState(false);
@@ -248,8 +236,9 @@ export function ReturnRequestForm({
       });
 
       setSubmitSuccess(true);
-    } catch (error: any) {
-      setSubmitError(error.message || "Failed to create return request");
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Failed to create return request";
+      setSubmitError(message);
     } finally {
       setIsSubmitting(false);
     }
@@ -263,14 +252,13 @@ export function ReturnRequestForm({
           <div className="text-center py-8">
             <CheckCircle className="mx-auto h-16 w-16 text-green-600 mb-4" />
             <h3 className="text-xl font-semibold mb-2">
-              Return Request Submitted
+              {t("submitted")}
             </h3>
             <p className="text-muted-foreground mb-6">
-              Your return request has been submitted successfully. You will
-              receive an email with further instructions.
+              {t("submittedDesc")}
             </p>
             <Button variant="outline" onClick={onCancel}>
-              Back to Order
+              {t("backToOrder")}
             </Button>
           </div>
         </CardContent>
@@ -283,7 +271,7 @@ export function ReturnRequestForm({
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <Package className="h-5 w-5" />
-          Return Request for Order #{orderNumber}
+          {t("title", { orderNumber })}
         </CardTitle>
       </CardHeader>
 
@@ -295,14 +283,14 @@ export function ReturnRequestForm({
           >
             {/* Step 1: Select Items */}
             <div className="space-y-4">
-              <h3 className="font-medium">1. Select Items to Return</h3>
+              <h3 className="font-medium">{t("selectItems")}</h3>
 
               {items.length === 0 ? (
                 <Alert>
                   <AlertCircle className="h-4 w-4" />
-                  <AlertTitle>No Returnable Items</AlertTitle>
+                  <AlertTitle>{t("noReturnableItems")}</AlertTitle>
                   <AlertDescription>
-                    There are no items eligible for return in this order.
+                    {t("noReturnableItemsDesc")}
                   </AlertDescription>
                 </Alert>
               ) : (
@@ -360,7 +348,7 @@ export function ReturnRequestForm({
                               </p>
                             )}
                             <p className="text-sm mt-1">
-                              Ordered: {item.quantity} | Returnable:{" "}
+                              {t("ordered")} {item.quantity} | {t("returnable")}{" "}
                               {item.returnableQuantity}
                             </p>
                           </div>
@@ -383,7 +371,7 @@ export function ReturnRequestForm({
                               name={`items.${index}.quantity`}
                               render={({ field }) => (
                                 <FormItem>
-                                  <FormLabel>Quantity to Return</FormLabel>
+                                  <FormLabel>{t("quantityToReturn")}</FormLabel>
                                   <FormControl>
                                     <div className="flex items-center gap-2">
                                       <Button
@@ -431,14 +419,14 @@ export function ReturnRequestForm({
                               name={`items.${index}.condition`}
                               render={({ field }) => (
                                 <FormItem>
-                                  <FormLabel>Item Condition</FormLabel>
+                                  <FormLabel>{t("itemCondition")}</FormLabel>
                                   <Select
                                     onValueChange={field.onChange}
                                     defaultValue={field.value}
                                   >
                                     <FormControl>
                                       <SelectTrigger>
-                                        <SelectValue placeholder="Select condition" />
+                                        <SelectValue placeholder={t("selectCondition")} />
                                       </SelectTrigger>
                                     </FormControl>
                                     <SelectContent>
@@ -465,32 +453,32 @@ export function ReturnRequestForm({
 
               {selectedCount > 0 && (
                 <Badge variant="secondary">
-                  {selectedCount} item{selectedCount > 1 ? "s" : ""} selected
+                  {selectedCount} {t("itemsSelected")}
                 </Badge>
               )}
             </div>
 
             {/* Step 2: Return Reason */}
             <div className="space-y-4">
-              <h3 className="font-medium">2. Reason for Return</h3>
+              <h3 className="font-medium">{t("returnReason")}</h3>
 
               <FormField
                 control={form.control}
                 name="reason"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Primary Reason</FormLabel>
+                    <FormLabel>{t("primaryReason")}</FormLabel>
                     <Select
                       onValueChange={field.onChange}
                       defaultValue={field.value}
                     >
                       <FormControl>
                         <SelectTrigger>
-                          <SelectValue placeholder="Select a reason" />
+                          <SelectValue placeholder={t("selectReason")} />
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        {reasons.map((reason) => (
+                        {resolvedReasons.map((reason) => (
                           <SelectItem key={reason.value} value={reason.value}>
                             {reason.label}
                           </SelectItem>
@@ -507,16 +495,16 @@ export function ReturnRequestForm({
                 name="customerNote"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Additional Details (Optional)</FormLabel>
+                    <FormLabel>{t("additionalDetails")}</FormLabel>
                     <FormControl>
                       <Textarea
-                        placeholder="Please provide any additional details about your return..."
+                        placeholder={t("additionalDetailsPlaceholder")}
                         className="resize-none"
                         {...field}
                       />
                     </FormControl>
                     <FormDescription>
-                      Help us process your return faster by providing details.
+                      {t("additionalDetailsHint")}
                     </FormDescription>
                     <FormMessage />
                   </FormItem>
@@ -526,7 +514,7 @@ export function ReturnRequestForm({
 
             {/* Step 3: Compensation Type */}
             <div className="space-y-4">
-              <h3 className="font-medium">3. Compensation Preference</h3>
+              <h3 className="font-medium">{t("compensationPreference")}</h3>
 
               <FormField
                 control={form.control}
@@ -545,11 +533,10 @@ export function ReturnRequestForm({
                           </FormControl>
                           <FormLabel className="font-normal cursor-pointer">
                             <span className="font-medium">
-                              Refund to Original Payment
+                              {t("refundOriginal")}
                             </span>
                             <p className="text-sm text-muted-foreground">
-                              Refund will be processed to your original payment
-                              method
+                              {t("refundOriginalDesc")}
                             </p>
                           </FormLabel>
                         </FormItem>
@@ -558,9 +545,9 @@ export function ReturnRequestForm({
                             <RadioGroupItem value="STORE_CREDIT" />
                           </FormControl>
                           <FormLabel className="font-normal cursor-pointer">
-                            <span className="font-medium">Store Credit</span>
+                            <span className="font-medium">{t("storeCredit")}</span>
                             <p className="text-sm text-muted-foreground">
-                              Receive store credit for future purchases
+                              {t("storeCreditDesc")}
                             </p>
                           </FormLabel>
                         </FormItem>
@@ -576,7 +563,7 @@ export function ReturnRequestForm({
             {submitError && (
               <Alert variant="destructive">
                 <AlertCircle className="h-4 w-4" />
-                <AlertTitle>Error</AlertTitle>
+                <AlertTitle>{t("error")}</AlertTitle>
                 <AlertDescription>{submitError}</AlertDescription>
               </Alert>
             )}
@@ -590,14 +577,14 @@ export function ReturnRequestForm({
                   onClick={onCancel}
                   disabled={isSubmitting}
                 >
-                  Cancel
+                  {tc("cancel")}
                 </Button>
               )}
               <Button type="submit" disabled={isSubmitting || selectedCount === 0}>
                 {isSubmitting && (
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                 )}
-                Submit Return Request
+                {t("submitReturn")}
               </Button>
             </div>
           </form>

package/templates/storefront-nextjs-shadcn/components/search/search-bar.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useState, useEffect, useRef, useCallback } from "react";
-import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useRouter } from "@/i18n/navigation";
 import { Search, X } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { SearchSuggestions } from "./search-suggestions";
@@ -19,10 +20,12 @@ export interface SearchBarProps {
  */
 export function SearchBar({
   defaultValue = "",
-  placeholder = "Search products...",
+  placeholder,
   className,
   showSuggestions = true,
 }: SearchBarProps) {
+  const t = useTranslations("search");
+  const resolvedPlaceholder = placeholder ?? t("placeholder");
   const router = useRouter();
   const [query, setQuery] = useState(defaultValue);
   const [isOpen, setIsOpen] = useState(false);
@@ -104,7 +107,7 @@ export function SearchBar({
           <Input
             ref={inputRef}
             type="search"
-            placeholder={placeholder}
+            placeholder={resolvedPlaceholder}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             onFocus={() => setIsOpen(true)}
@@ -120,7 +123,7 @@ export function SearchBar({
               type="button"
               onClick={handleClear}
               className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-              aria-label="Clear search"
+              aria-label={t("clearSearch")}
             >
               <X className="h-5 w-5" />
             </button>

package/templates/storefront-nextjs-shadcn/components/search/search-results.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { ProductGrid, type ProductCardProduct } from "@/components/product/product-grid";
+import { ProductGrid } from "@/components/product/product-grid";
 import { EmptyProducts } from "@/components/ui/empty-state";
+import type { ProductCardFields } from "@/lib/graphql/fragments";
 
 export interface SearchResultsProps {
   query: string;
-  results: ProductCardProduct[];
+  results: ProductCardFields[];
 }
 
 /**

package/templates/storefront-nextjs-shadcn/components/shipping/shipping-method-selector.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
 import { Truck, Package, Clock, Check, AlertCircle } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Spinner } from "@/components/ui/spinner";
@@ -77,6 +78,7 @@ export function ShippingMethodSelector({
   currencyCode = "PLN",
   className,
 }: ShippingMethodSelectorProps) {
+  const t = useTranslations("checkout.delivery");
   const formatPrice = (money: Money) => {
     const amount = parseFloat(money.amount);
     return new Intl.NumberFormat("pl-PL", {
@@ -90,12 +92,12 @@ export function ShippingMethodSelector({
       <div className={cn("space-y-4", className)}>
         <div className="flex items-center gap-2">
           <Truck className="h-5 w-5 text-muted-foreground" />
-          <h3 className="text-sm font-medium text-foreground">Shipping Method</h3>
+          <h3 className="text-sm font-medium text-foreground">{t("title")}</h3>
         </div>
         <div className="flex items-center justify-center py-8">
           <Spinner className="h-6 w-6" />
           <span className="ml-2 text-sm text-muted-foreground">
-            Loading shipping options...
+            {t("loading")}
           </span>
         </div>
       </div>
@@ -107,7 +109,7 @@ export function ShippingMethodSelector({
       <div className={cn("space-y-4", className)}>
         <div className="flex items-center gap-2">
           <Truck className="h-5 w-5 text-muted-foreground" />
-          <h3 className="text-sm font-medium text-foreground">Shipping Method</h3>
+          <h3 className="text-sm font-medium text-foreground">{t("title")}</h3>
         </div>
         <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
           <div className="flex items-center gap-2">
@@ -124,11 +126,11 @@ export function ShippingMethodSelector({
       <div className={cn("space-y-4", className)}>
         <div className="flex items-center gap-2">
           <Truck className="h-5 w-5 text-muted-foreground" />
-          <h3 className="text-sm font-medium text-foreground">Shipping Method</h3>
+          <h3 className="text-sm font-medium text-foreground">{t("title")}</h3>
         </div>
         <div className="rounded-lg border border-border bg-muted/50 p-4">
           <p className="text-sm text-muted-foreground text-center">
-            No shipping methods available for this address
+            {t("noMethodsAvailable")}
           </p>
         </div>
       </div>
@@ -140,7 +142,7 @@ export function ShippingMethodSelector({
       {/* Header */}
       <div className="flex items-center gap-2">
         <Truck className="h-5 w-5 text-muted-foreground" />
-        <h3 className="text-sm font-medium text-foreground">Shipping Method</h3>
+        <h3 className="text-sm font-medium text-foreground">{t("title")}</h3>
       </div>
 
       {/* Free Shipping Progress Banner */}
@@ -167,7 +169,7 @@ export function ShippingMethodSelector({
           <div className="flex items-center gap-2">
             <Check className="h-4 w-4 text-green-600" />
             <p className="text-sm font-medium text-green-700">
-              {freeShippingProgress.message || "You qualify for free shipping!"}
+              {freeShippingProgress.message || t("freeShippingQualified")}
             </p>
           </div>
         </div>
@@ -190,6 +192,7 @@ function ShippingMethodCard({
   onSelect: () => void;
   formatPrice: (money: Money) => string;
 }) {
+  const t = useTranslations("checkout.delivery");
   return (
     <button
       type="button"
@@ -225,7 +228,7 @@ function ShippingMethodCard({
               </p>
               {method.isFree && (
                 <span className="rounded bg-green-500/10 px-1.5 py-0.5 text-xs font-medium text-green-700">
-                  FREE
+                  {t("free")}
                 </span>
               )}
             </div>
@@ -264,7 +267,7 @@ function ShippingMethodCard({
               method.isFree ? "text-green-600" : "text-foreground"
             )}
           >
-            {method.isFree ? "FREE" : formatPrice(method.price)}
+            {method.isFree ? t("free") : formatPrice(method.price)}
           </p>
 
           {/* Selection Indicator */}

package/templates/storefront-nextjs-shadcn/components/ui/empty-state.tsx

@@ -1,4 +1,7 @@
+'use client';
+
 import * as React from 'react';
+import { useTranslations } from 'next-intl';
 import { cn } from '@/lib/utils';
 
 export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -44,6 +47,8 @@ EmptyState.displayName = 'EmptyState';
 export const EmptyCart: React.FC<{ onContinueShopping?: () => void }> = ({
   onContinueShopping,
 }) => {
+  const t = useTranslations('emptyState');
+
   return (
     <EmptyState
       icon={
@@ -62,15 +67,15 @@ export const EmptyCart: React.FC<{ onContinueShopping?: () => void }> = ({
           />
         </svg>
       }
-      title="Your cart is empty"
-      description="Add some products to your cart to get started."
+      title={t('cartEmpty')}
+      description={t('cartEmptyDescription')}
       action={
         onContinueShopping && (
           <button
             onClick={onContinueShopping}
             className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
           >
-            Continue Shopping
+            {t('continueShopping')}
           </button>
         )
       }
@@ -84,6 +89,8 @@ EmptyCart.displayName = 'EmptyCart';
  * EmptyProducts - Pre-configured empty state for product listings
  */
 export const EmptyProducts: React.FC<{ onReset?: () => void }> = ({ onReset }) => {
+  const t = useTranslations('emptyState');
+
   return (
     <EmptyState
       icon={
@@ -102,15 +109,15 @@ export const EmptyProducts: React.FC<{ onReset?: () => void }> = ({ onReset }) =
           />
         </svg>
       }
-      title="No products found"
-      description="Try adjusting your search or filter criteria to find what you're looking for."
+      title={t('noProducts')}
+      description={t('noProductsDescription')}
       action={
         onReset && (
           <button
             onClick={onReset}
             className="rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
           >
-            Clear Filters
+            {t('clearFilters')}
           </button>
         )
       }
@@ -126,6 +133,8 @@ EmptyProducts.displayName = 'EmptyProducts';
 export const EmptyOrders: React.FC<{ onStartShopping?: () => void }> = ({
   onStartShopping,
 }) => {
+  const t = useTranslations('emptyState');
+
   return (
     <EmptyState
       icon={
@@ -144,15 +153,15 @@ export const EmptyOrders: React.FC<{ onStartShopping?: () => void }> = ({
           />
         </svg>
       }
-      title="No orders yet"
-      description="You haven't placed any orders yet. Start shopping to see your order history here."
+      title={t('noOrders')}
+      description={t('noOrdersDescription')}
       action={
         onStartShopping && (
           <button
             onClick={onStartShopping}
             className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
           >
-            Start Shopping
+            {t('startShopping')}
           </button>
         )
       }
@@ -168,6 +177,8 @@ EmptyOrders.displayName = 'EmptyOrders';
 export const EmptyWishlist: React.FC<{ onBrowseProducts?: () => void }> = ({
   onBrowseProducts,
 }) => {
+  const t = useTranslations('emptyState');
+
   return (
     <EmptyState
       icon={
@@ -186,15 +197,15 @@ export const EmptyWishlist: React.FC<{ onBrowseProducts?: () => void }> = ({
           />
         </svg>
       }
-      title="Your wishlist is empty"
-      description="Save your favorite products to your wishlist for easy access later."
+      title={t('wishlistEmpty')}
+      description={t('wishlistEmptyDescription')}
       action={
         onBrowseProducts && (
           <button
             onClick={onBrowseProducts}
             className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
           >
-            Browse Products
+            {t('browseProducts')}
           </button>
         )
       }