@alphasquad/saleor-template-advance 0.1.0

package/src/app/components/checkout/OrderSummary.tsx

@@ -0,0 +1,386 @@
+"use client";
+import { useState } from "react";
+import Image from "next/image";
+import CommonButton from "../reuseableUI/commonButton";
+import type { CartItem } from "@/store/useGlobalStore";
+
+interface ShippingMethod {
+  id: string;
+  name: string;
+  price: { amount: number; currency: string };
+}
+
+interface TaxInfo {
+  totalTax: number;
+  shippingTax: number;
+  subtotalNet: number;
+  shippingNet: number;
+  currency: string;
+}
+
+interface VoucherInfo {
+  voucherCode: string | null;
+  discount: {
+    amount: number;
+    currency: string;
+  } | null;
+}
+
+interface OrderSummaryProps {
+  totalAmount: number;
+  selectedShipping: ShippingMethod | null;
+  grandTotal: number;
+  saleorTotal: number | null;
+  isUpdatingDelivery: boolean;
+  shippingLoading: boolean;
+  isCalculatingTotal: boolean;
+  taxInfo: TaxInfo | null;
+  isCalculatingTax: boolean;
+  voucherInfo?: VoucherInfo | null;
+  onApplyVoucher?: (code: string) => Promise<void>;
+  onRemoveVoucher?: () => Promise<void>;
+  isApplyingVoucher?: boolean;
+  voucherError?: string | null;
+  selectedCollectionPointId?: string | null;
+  onCompletePayment?: () => Promise<void>;
+  isPaymentProcessing?: boolean;
+  paymentDisabled?: boolean;
+  paymentDisabledReason?: string;
+  lineItems?: CartItem[];
+}
+
+export default function OrderSummary({
+  totalAmount,
+  selectedShipping,
+  grandTotal,
+  saleorTotal,
+  isUpdatingDelivery,
+  shippingLoading,
+  isCalculatingTotal,
+  taxInfo,
+  isCalculatingTax,
+  voucherInfo,
+  onApplyVoucher,
+  onRemoveVoucher,
+  isApplyingVoucher = false,
+  voucherError,
+  selectedCollectionPointId,
+  onCompletePayment,
+  isPaymentProcessing = false,
+  paymentDisabled = false,
+  paymentDisabledReason,
+  lineItems,
+}: OrderSummaryProps) {
+  const [voucherCode, setVoucherCode] = useState("");
+
+  const handleApplyVoucher = async () => {
+    if (voucherCode.trim() && onApplyVoucher) {
+      await onApplyVoucher(voucherCode.trim());
+      if (!voucherError) {
+        setVoucherCode("");
+      }
+    }
+  };
+
+  const handleRemoveVoucher = async () => {
+    if (onRemoveVoucher) {
+      await onRemoveVoucher();
+      setVoucherCode("");
+    }
+  };
+  const getItemTotal = (item: CartItem): number => {
+    let total = item.price;
+    if (item.selectedOptions?.length) {
+      total += item.selectedOptions.reduce((sum, opt) => sum + opt.price, 0);
+    }
+    return total;
+  };
+
+  const isVoucherButtonDisabled =
+    (!selectedShipping && !selectedCollectionPointId) ||
+    isApplyingVoucher ||
+    !voucherCode.trim();
+  return (
+    <div className="lg:col-span-1 flex flex-col lg:sticky lg:top-24 lg:self-start">
+      <h2 className="font-medium font-secondary text-base text-[var(--color-secondary-800)] text-start pb-3 uppercase">
+        Summary
+      </h2>
+
+      <div className="bg-white border border-[var(--color-secondary-200)] rounded-lg p-6 shadow-sm min-w-[360px]">
+        {/* Payment Method Icons */}
+        <div className="flex items-center gap-2 mb-4 pb-4 border-b border-gray-200">
+          <Image src="/icons/visa.gif" alt="Visa" width={40} height={25} className="object-contain" />
+          <Image src="/icons/master.gif" alt="Mastercard" width={40} height={25} className="object-contain" />
+          <Image src="/icons/amex.gif" alt="American Express" width={40} height={25} className="object-contain" />
+          <Image src="/icons/discover.gif" alt="Discover" width={40} height={25} className="object-contain" />
+        </div>
+
+        {/* Line Items */}
+        {lineItems && lineItems.length > 0 && (
+          <div className="mb-4 pb-4 border-b border-gray-200 space-y-4 max-h-80 overflow-y-auto pr-3">
+            {lineItems.map((item) => (
+              <div key={item.key} className="flex gap-3">
+                <div className="relative w-14 h-14 flex-shrink-0">
+                  <Image
+                    src={item.image}
+                    alt={item.name}
+                    fill
+                    className="object-contain"
+                  />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex justify-between gap-2">
+                    <p className="text-sm font-medium text-[var(--color-secondary-800)] truncate">
+                      {item.name}
+                    </p>
+                    <span className="text-sm font-medium text-[var(--color-secondary-800)] flex-shrink-0">
+                      ${(getItemTotal(item) * item.quantity).toFixed(2)}
+                    </span>
+                  </div>
+                  <p className="text-xs text-[var(--color-secondary-500)]">
+                    Qty: {item.quantity}
+                  </p>
+                  {/* Selected Options */}
+                  {item.selectedOptions && item.selectedOptions.length > 0 && (
+                    <div className="mt-2 text-xs border-l-2 border-gray-200 pl-2 space-y-1">
+                      {item.selectedOptions.map((option, idx) => (
+                        <div key={idx} className="text-[var(--color-secondary-600)]">
+                          <span className="font-medium text-[var(--color-secondary-700)]">{option.optionSetLabel}</span>
+                          <div className="flex justify-between items-baseline">
+                            <span className="text-[var(--color-secondary-500)]">{option.name}</span>
+                            {option.price > 0 && (
+                              <span className="text-[var(--color-primary-600)] font-medium ml-2 whitespace-nowrap">
+                                +${option.price.toFixed(2)}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  {/* Custom Inputs */}
+                  {item.customInputs && Object.keys(item.customInputs).length > 0 && (
+                    <div className="mt-2 text-xs border-l-2 border-blue-200 pl-2 space-y-1">
+                      {Object.entries(item.customInputs).map(([key, value]) => (
+                        <div key={key} className="text-[var(--color-secondary-600)]">
+                          <span className="font-medium text-[var(--color-secondary-700)]">{key}</span>
+                          <div className="text-[var(--color-secondary-500)]">{value}</div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+      <div className="w-full text-normal text-[var(--color-secondary-600)] text-base">
+        <div className="flex justify-between mb-2">
+          <span>Sub-Total</span>
+          <span className="font-medium">
+            {taxInfo && taxInfo.subtotalNet > 0
+              ? new Intl.NumberFormat(undefined, {
+                  style: "currency",
+                  currency: taxInfo.currency,
+                }).format(taxInfo.subtotalNet)
+              : `$${totalAmount.toFixed(2)}`}
+          </span>
+        </div>
+        <div className="flex justify-between mb-2">
+          <span>Tax</span>
+          <span className="font-medium">
+            {isCalculatingTax
+              ? "Calculating…"
+              : taxInfo && taxInfo.totalTax > 0
+              ? new Intl.NumberFormat(undefined, {
+                  style: "currency",
+                  currency: taxInfo.currency,
+                }).format(taxInfo.totalTax)
+              : "N/A"}
+          </span>
+        </div>
+        <div className="flex justify-between mb-2">
+          <span>Shipping Cost</span>
+          <span className="font-medium">
+            {isUpdatingDelivery || shippingLoading
+              ? "Updating…"
+              : selectedShipping
+              ? new Intl.NumberFormat(undefined, {
+                  style: "currency",
+                  currency: selectedShipping.price.currency,
+                }).format(selectedShipping.price.amount)
+              : "--"}
+          </span>
+        </div>
+        {taxInfo && taxInfo.shippingTax > 0 && selectedShipping && (
+          <div className="flex justify-between mb-2">
+            <span className="text-sm text-start">Shipping Tax</span>
+            <span className="font-medium text-sm">
+              {new Intl.NumberFormat(undefined, {
+                style: "currency",
+                currency: taxInfo.currency,
+              }).format(taxInfo.shippingTax)}
+            </span>
+          </div>
+        )}
+
+        {/* Voucher Section */}
+        <div className="border-t border-gray-200 pt-4 mt-4">
+          {voucherInfo?.voucherCode ? (
+            <div className="mb-4">
+              <div className="flex justify-between items-center mb-2">
+                <span className="text-green-600 font-medium">
+                  Voucher Applied: {voucherInfo.voucherCode}
+                </span>
+                <button
+                  onClick={handleRemoveVoucher}
+                  className={`text-sm hover:underline ${
+                    isApplyingVoucher
+                      ? "text-gray-400 cursor-not-allowed"
+                      : "text-red-500"
+                  }`}
+                  disabled={isApplyingVoucher}
+                >
+                  {isApplyingVoucher ? "Removing..." : "Remove"}
+                </button>
+              </div>
+              {voucherInfo.discount && (
+                <div className="flex justify-between text-green-600">
+                  <span>Discount</span>
+                  <span className="font-medium">
+                    -
+                    {new Intl.NumberFormat(undefined, {
+                      style: "currency",
+                      currency: voucherInfo.discount.currency,
+                    }).format(voucherInfo.discount.amount)}
+                  </span>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="mb-4">
+              <div className="mb-3">
+                <h3 className="text-sm font-medium text-[var(--color-secondary-800)] mb-2">
+                  Have a voucher code?
+                </h3>
+                {!selectedShipping && !selectedCollectionPointId && (
+                  <p className="text-orange-600 text-xs mb-3 bg-orange-50 p-2 rounded border border-orange-200">
+                    Please select a delivery method or pickup location first to apply a voucher
+                    code
+                  </p>
+                )}
+              </div>
+              <div className="space-y-2">
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={voucherCode}
+                    onChange={(e) => setVoucherCode(e.target.value)}
+                    placeholder="Enter voucher code"
+                    className={`flex-1 px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent ${
+                      !selectedShipping && !selectedCollectionPointId
+                        ? "bg-gray-100 border-gray-300 text-gray-500 cursor-not-allowed"
+                        : "border-gray-300"
+                    }`}
+                    disabled={(!selectedShipping && !selectedCollectionPointId) || isApplyingVoucher}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && !isVoucherButtonDisabled) {
+                        handleApplyVoucher();
+                      }
+                    }}
+                  />
+                  <button
+                    onClick={handleApplyVoucher}
+                    disabled={isVoucherButtonDisabled}
+                    className={`px-4 py-2 text-sm font-medium rounded-md ${
+                      isVoucherButtonDisabled
+                        ? "bg-gray-300 text-gray-500 cursor-not-allowed"
+                        : "bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary)]/90"
+                    }`}
+                  >
+                    {isApplyingVoucher ? "Applying..." : "Apply"}
+                  </button>
+                </div>
+                {voucherError && (
+                  <p className="text-red-500 text-xs">{voucherError}</p>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-between text-xl text-[var(--color-secondary-600)] font-semibold font-secondary mt-2 pt-4 border-t border-gray-200">
+          <span className="font-medium">TOTAL</span>
+          <div className="text-right">
+            {voucherInfo?.discount &&
+            voucherInfo.discount.amount > 0 &&
+            saleorTotal ? (
+              <div>
+                <div className="text-sm text-gray-500 line-through">
+                  {new Intl.NumberFormat(undefined, {
+                    style: "currency",
+                    currency:
+                      selectedShipping?.price?.currency ||
+                      taxInfo?.currency ||
+                      "USD",
+                  }).format(saleorTotal + voucherInfo.discount.amount)}
+                </div>
+                <div
+                  className={`text-[var(--color-secondary-800)] ${
+                    isCalculatingTotal || isCalculatingTax ? "opacity-60" : ""
+                  }`}
+                >
+                  {isCalculatingTotal || isCalculatingTax
+                    ? "Calculating…"
+                    : new Intl.NumberFormat(undefined, {
+                        style: "currency",
+                        currency:
+                          selectedShipping?.price?.currency ||
+                          taxInfo?.currency ||
+                          "USD",
+                      }).format(saleorTotal)}
+                </div>
+              </div>
+            ) : (
+              <span
+                className={`text-[var(--color-secondary-800)] ${
+                  isCalculatingTotal || isCalculatingTax ? "opacity-60" : ""
+                }`}
+              >
+                {isCalculatingTotal || isCalculatingTax
+                  ? "Calculating…"
+                  : new Intl.NumberFormat(undefined, {
+                      style: "currency",
+                      currency:
+                        selectedShipping?.price?.currency ||
+                        taxInfo?.currency ||
+                        "USD",
+                    }).format(saleorTotal || grandTotal)}
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Place Order Button */}
+        {onCompletePayment && (
+          <CommonButton
+            onClick={() => onCompletePayment()}
+            content={
+              isPaymentProcessing
+                ? "Processing..."
+                : paymentDisabled && paymentDisabledReason
+                ? paymentDisabledReason
+                : "PLACE ORDER"
+            }
+            disabled={paymentDisabled || isPaymentProcessing}
+            variant="primary"
+            className="w-full mt-6"
+            type="button"
+          />
+        )}
+      </div>
+      </div>
+    </div>
+  );
+}

package/src/app/components/checkout/TermsContentRenderer.tsx

@@ -0,0 +1,147 @@
+import React from "react";
+
+export type EditorJsBlock = {
+  id: string;
+  type: string;
+  data: {
+    text?: string;
+    level?: number;
+    items?: string[];
+    style?: "unordered" | "ordered";
+    caption?: string;
+    alignment?: string;
+  };
+};
+
+interface TermsContentRendererProps {
+  content: string | null | undefined;
+}
+
+export default function TermsContentRenderer({ content }: TermsContentRendererProps) {
+  let blocks: EditorJsBlock[] = [];
+  
+  if (content) {
+    try {
+      const parsed = JSON.parse(content);
+      if (Array.isArray(parsed?.blocks)) {
+        blocks = parsed.blocks as EditorJsBlock[];
+        // Debug: Log parsed blocks to verify content structure
+        // Avoid noisy logs in templates/production.
+      }
+    } catch (error) {
+      console.error("Failed to parse content:", error);
+    }
+  }
+
+  if (!blocks.length) {
+    return (
+      <div className="text-center py-8">
+        <p className="text-[var(--color-secondary-600)] text-sm">
+          Terms and conditions content not available.
+        </p>
+      </div>
+    );
+  }
+
+  const renderBlock = (block: EditorJsBlock) => {
+    const { type, data } = block;
+
+    switch (type) {
+      case "header": {
+        const level = Math.min(Math.max(Number(data?.level) || 3, 1), 6);
+        const headerClass = level <= 2 
+          ? "text-xl font-semibold text-[var(--color-secondary-800)] mb-4"
+          : "text-lg font-semibold text-[var(--color-secondary-800)] mb-3";
+        
+        return React.createElement(
+          `h${level}`,
+          {
+            key: block.id,
+            className: headerClass,
+            dangerouslySetInnerHTML: { __html: data?.text || "" },
+          }
+        );
+      }
+
+      case "paragraph": {
+        return (
+          <p
+            key={block.id}
+            className="text-sm lg:text-base text-[var(--color-secondary-700)] leading-relaxed mb-6"
+            dangerouslySetInnerHTML={{ __html: data?.text || "" }}
+          />
+        );
+      }
+
+      case "quote": {
+        return (
+          <blockquote
+            key={block.id}
+            className="border-l-4 border-[var(--color-primary-600)] pl-4 py-3 mb-6 bg-[var(--color-secondary-50)] rounded-r-md"
+          >
+            <p
+              className="text-sm lg:text-base text-[var(--color-secondary-700)] italic font-medium"
+              dangerouslySetInnerHTML={{ __html: data?.text || "" }}
+            />
+            {data?.caption && data.caption !== data.text && (
+              <cite className="text-xs text-[var(--color-secondary-600)] mt-2 block">
+                — {data.caption}
+              </cite>
+            )}
+          </blockquote>
+        );
+      }
+
+      case "list": {
+        const items = data?.items || [];
+        const isOrdered = data?.style === "ordered";
+        
+        const listClass = "mb-6 space-y-2";
+        const itemClass = "text-sm lg:text-base text-[var(--color-secondary-700)] leading-relaxed pl-2";
+
+        if (isOrdered) {
+          return (
+            <ol key={block.id} className={`${listClass} list-decimal list-inside pl-4`}>
+              {items.map((item, index) => (
+                <li
+                  key={`${block.id}-${index}`}
+                  className={itemClass}
+                  dangerouslySetInnerHTML={{ __html: item }}
+                />
+              ))}
+            </ol>
+          );
+        } else {
+          return (
+            <ul key={block.id} className={`${listClass} list-disc list-inside pl-4`}>
+              {items.map((item, index) => (
+                <li
+                  key={`${block.id}-${index}`}
+                  className={itemClass}
+                  dangerouslySetInnerHTML={{ __html: item }}
+                />
+              ))}
+            </ul>
+          );
+        }
+      }
+
+      default: {
+        // Fallback for unknown block types
+        return (
+          <div
+            key={block.id}
+            className="text-sm lg:text-base text-[var(--color-secondary-700)] leading-relaxed mb-6"
+            dangerouslySetInnerHTML={{ __html: data?.text || "" }}
+          />
+        );
+      }
+    }
+  };
+
+  return (
+    <div className="max-w-none space-y-1">
+      {blocks.map(renderBlock)}
+    </div>
+  );
+}

package/src/app/components/checkout/WillCallSection.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { CollectionPoint } from "@/graphql/queries/willCallCollectionPoints";
+
+interface WillCallSectionProps {
+  checkoutId: string | null | undefined;
+  willCallEnabled: boolean;
+  collectionPoints: CollectionPoint[];
+  selectedCollectionPointId: string | null;
+  isUpdatingDelivery: boolean;
+  isProcessingSelection?: boolean;
+  onCollectionPointSelect: (collectionPointId: string) => void;
+  userState: string | null;
+  willCallLoading?: boolean;
+  willCallError?: string | null;
+}
+
+export default function WillCallSection({
+  checkoutId,
+  willCallEnabled,
+  collectionPoints,
+  selectedCollectionPointId,
+  isUpdatingDelivery,
+  isProcessingSelection = false,
+  onCollectionPointSelect,
+  userState,
+  willCallLoading = false,
+  willCallError = null,
+}: WillCallSectionProps) {
+  if (!checkoutId || !willCallEnabled) {
+    return null;
+  }
+
+  // Filter collection points to match user's state
+  const availableCollectionPoints = collectionPoints.filter(
+    (point) => point.address.countryArea === userState
+  );
+
+  // Don't show will-call if no matching collection points
+  if (availableCollectionPoints.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mt-6">
+      <h2 className="text-base font-semibold font-secondary text-[var(--color-secondary-800)] mb-3 uppercase">
+        Local Pickup (Will Call)
+        {(isUpdatingDelivery || willCallLoading || isProcessingSelection) && (
+          <span className="ml-2 text-xs text-gray-500">(updating…)</span>
+        )}
+      </h2>
+
+      {/* Collection Points Selection - Direct, no toggle */}
+      <div className="mb-3">
+      
+
+
+          {willCallError && (
+            <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded p-3 mb-3">
+              <p className="font-medium">Error loading pickup locations</p>
+              <p className="text-xs mt-1">{willCallError}</p>
+            </div>
+          )}
+          
+          {!willCallLoading && availableCollectionPoints.length === 0 ? (
+            <div className="text-sm text-gray-600 bg-yellow-50 border border-yellow-200 rounded p-3">
+              <p className="font-medium text-yellow-800">
+                No pickup locations available in your area
+              </p>
+              <p className="text-xs mt-1">
+                No pickup locations are available for your state ({userState}). 
+                Please use regular shipping or contact support.
+              </p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1  gap-3">
+              {availableCollectionPoints.map((point) => {
+                const isDisabled = isUpdatingDelivery || willCallLoading || isProcessingSelection;
+                
+                return (
+                <label
+                  key={point.id}
+                  className={`flex items-center gap-3 ring-1 p-4 transition-all duration-200 ${
+                    isDisabled ? "cursor-not-allowed opacity-50 pointer-events-none" : "cursor-pointer"
+                  } ${
+                    selectedCollectionPointId === point.id
+                      ? "ring-[var(--color-primary-100)] bg-[var(--color-primary-50)] text-[var(--color-primary-700)] accent-[var(--color-primary-600)]"
+                      : "ring-gray-300 hover:bg-gray-50"
+                  } ${isDisabled ? "" : "hover:bg-gray-50"}`}
+                >
+                  <input
+                    type="radio"
+                    name="delivery"
+                    checked={selectedCollectionPointId === point.id}
+                    onChange={() => !isDisabled && onCollectionPointSelect(point.id)}
+                    disabled={isDisabled}
+                    className="accent-[var(--color-primary-600)]"
+                  />
+                  <div className="flex-1">
+                    <div className="font-medium text-base/none font-secondary mb-2">
+                      {point.name}
+                    </div>
+                    <div className="text-sm text-gray-700 space-y-1">
+                      <div className="flex items-start gap-1">
+                        <span className="text-gray-500 min-w-0">📍</span>
+                        <div className="min-w-0 flex ">
+                          <div>{point.address.streetAddress1},</div>
+                          <div>{point.address.city}, {point.address.countryArea} {point.address.postalCode},</div>
+                          <div className="text-xs text-gray-500">{point.address.country.country}</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2 mt-2">
+                      {point.isPrivate && (
+                        <div className="inline-block bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">
+                          Private Location
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className="font-medium text-base/none text-green-600">
+                    FREE
+                  </div>
+                </label>
+                );
+              })}
+            </div>
+          )}
+      </div>
+
+    </div>
+  );
+}