@evershop/evershop 2.1.0 → 2.1.2

package/src/components/frontStore/Pagination.tsx

@@ -1,4 +1,13 @@
 import { useAppDispatch } from '@components/common/context/app.js';
+import {
+  Pagination as PaginationUI,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious
+} from '@components/common/ui/Pagination.js';
 import React, { useState, useEffect, useCallback } from 'react';
 
 export interface PaginationProps {
@@ -289,85 +298,116 @@ export const DefaultPaginationRenderer: React.FC<{
     getDisplayText
   } = renderProps;
 
+  const pageNumbers = getPageNumbers(7);
+  const showStartEllipsis = pageNumbers[0] > 1;
+  const showEndEllipsis = pageNumbers[pageNumbers.length - 1] < totalPages;
+
   return (
     <div className={`products-pagination ${className}`}>
       {showInfo && (
-        <div className="pagination-info text-center text-gray-600 mb-4">
+        <div className="pagination-info text-center text-muted-foreground mb-4">
           {getDisplayText()}
         </div>
       )}
 
-      <ul className="pagination flex justify-center space-x-3">
-        {hasPrev && (
-          <li className="page-item prev self-center">
-            <button
-              type="button"
-              className="link-button page-link flex justify-center items-center"
-              onClick={goToPrev}
-              disabled={isLoading}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-4 w-4"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </button>
-          </li>
-        )}
-
-        {getPageNumbers().map((p) => (
-          <li
-            key={p}
-            className={`page-item self-center ${
-              isCurrentPage(p) ? 'current' : ''
-            }`}
-          >
-            <button
-              type="button"
-              className="link-button page-link flex justify-center items-center"
-              onClick={() => goToPage(p)}
-              disabled={isLoading || isCurrentPage(p)}
-            >
-              {isCurrentPage(p) ? <strong>{p}</strong> : p}
-            </button>
-          </li>
-        ))}
-
-        {hasNext && (
-          <li className="page-item next self-center">
-            <button
-              type="button"
-              className="page-link link-button flex justify-center items-center"
-              onClick={goToNext}
-              disabled={isLoading}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-4 w-4"
-                viewBox="0 0 20 20"
-                fill="currentColor"
+      <PaginationUI>
+        <PaginationContent>
+          {hasPrev && (
+            <PaginationItem>
+              <PaginationPrevious
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (!isLoading) goToPrev();
+                }}
+                aria-disabled={isLoading}
+                className={isLoading ? 'pointer-events-none opacity-50' : ''}
+              />
+            </PaginationItem>
+          )}
+
+          {showStartEllipsis && (
+            <>
+              <PaginationItem>
+                <PaginationLink
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    if (!isLoading) goToPage(1);
+                  }}
+                  aria-disabled={isLoading}
+                  className={isLoading ? 'pointer-events-none opacity-50' : ''}
+                >
+                  1
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationEllipsis />
+              </PaginationItem>
+            </>
+          )}
+
+          {pageNumbers.map((p) => (
+            <PaginationItem key={p}>
+              <PaginationLink
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (!isLoading && !isCurrentPage(p)) goToPage(p);
+                }}
+                isActive={isCurrentPage(p)}
+                aria-disabled={isLoading || isCurrentPage(p)}
+                className={
+                  isLoading || isCurrentPage(p)
+                    ? 'pointer-events-none opacity-50'
+                    : ''
+                }
               >
-                <path
-                  fillRule="evenodd"
-                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </button>
-          </li>
-        )}
-      </ul>
+                {p}
+              </PaginationLink>
+            </PaginationItem>
+          ))}
+
+          {showEndEllipsis && (
+            <>
+              <PaginationItem>
+                <PaginationEllipsis />
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    if (!isLoading) goToPage(totalPages);
+                  }}
+                  aria-disabled={isLoading}
+                  className={isLoading ? 'pointer-events-none opacity-50' : ''}
+                >
+                  {totalPages}
+                </PaginationLink>
+              </PaginationItem>
+            </>
+          )}
+
+          {hasNext && (
+            <PaginationItem>
+              <PaginationNext
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (!isLoading) goToNext();
+                }}
+                aria-disabled={isLoading}
+                className={isLoading ? 'pointer-events-none opacity-50' : ''}
+              />
+            </PaginationItem>
+          )}
+        </PaginationContent>
+      </PaginationUI>
 
       {isLoading && (
         <div className="pagination-loading text-center mt-2">
-          <div className="inline-block w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+          <div className="inline-block w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
         </div>
       )}
     </div>

package/src/components/frontStore/cart/CartContext.tsx

@@ -51,6 +51,7 @@ export interface CartItem {
   productName: string;
   productUrl: string;
   thumbnail?: string;
+  noShippingRequired: boolean;
   productWeight: {
     value: number;
     unit: string;
@@ -118,7 +119,7 @@ export interface CartItem {
   variantGroupId?: number;
   removeApi: string; // API endpoint to remove item from cart
   updateQtyApi: string; // API endpoint to update item quantity
-  errors?: any[]; // Validation errors for this item
+  errors?: string[]; // Validation errors for this item
 }
 
 export interface PaymentMethod {
@@ -160,6 +161,7 @@ export interface CartData {
   customerEmail?: string; // Optional customer email
   customerFullName?: string; // Optional customer full name
   coupon?: string; // Coupon code applied to cart
+  noShippingRequired: boolean;
   shippingMethod?: string; // Selected shipping method code
   shippingMethodName?: string; // Selected shipping method name
   paymentMethod?: string; // Selected payment method code
@@ -250,7 +252,7 @@ export interface CartData {
   // Errors
   errors: CartError[];
   error: string | null;
-  [extendedFields: string]: any; // Allow third-party extensions to add fields
+  [extendedFields: string]: unknown; // Allow third-party extensions to add fields
 }
 
 // Complete cart state with detailed loading states
@@ -413,6 +415,7 @@ const initialEmptyState: CartState = {
     addItemApi: '', // initial addItemApi
     items: [],
     totalQty: 0,
+    noShippingRequired: false,
     totalWeight: { value: 0, unit: 'kg' },
     billingAddress: undefined,
     shippingAddress: undefined,

package/src/components/frontStore/cart/CartSummaryItems.tsx

@@ -1,26 +1,27 @@
 import { Image } from '@components/common/Image.js';
 import { ProductNoThumbnail } from '@components/common/ProductNoThumbnail.js';
+import { Skeleton } from '@components/common/ui/Skeleton.js';
 import { CartItem } from '@components/frontStore/cart/CartContext.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React from 'react';
 
 const CartSummarySkeleton: React.FC<{ rows?: number }> = ({ rows = 2 }) => {
   return (
-    <ul className="divide-y divide-gray-200">
+    <ul className="divide-y divide-border">
       {Array.from({ length: rows }).map((_, i) => (
         <li key={i} className="flex items-center py-6 animate-pulse">
           <div className="relative mr-4">
-            <div className="w-16 h-16 bg-gray-200 rounded border p-2 box-border" />
-            <span className="absolute -top-2 -right-2 bg-gray-100 rounded-full w-6 h-6 flex items-center justify-center text-gray-400 text-sm">
+            <div className="w-16 h-16 bg-gray-200 rounded border border-border p-2 box-border" />
+            <span className="absolute -top-2 -right-2 bg-muted rounded-full w-6 h-6 flex items-center justify-center text-muted-foreground text-sm">
               {i + 1}
             </span>
           </div>
           <div className="flex-1 min-w-0 items-start align-top">
-            <div className="h-4 bg-gray-200 rounded w-3/5 mb-2" />
-            <div className="h-3 bg-gray-100 rounded w-2/5 mb-1" />
+            <Skeleton className="h-4 w-3/5 mb-2" />
+            <Skeleton className="h-3 w-2/5 mb-1" />
           </div>
           <div className="ml-auto text-right">
-            <div className="h-4 bg-gray-200 rounded w-16" />
+            <Skeleton className="h-4 w-16" />
           </div>
         </li>
       ))}
@@ -39,7 +40,7 @@ const CartSummaryItemsList: React.FC<{
 
   if (items.length === 0) {
     return (
-      <div className="text-center py-8 text-gray-500">
+      <div className="text-center py-8 text-muted-foreground">
         <p className="text-base">{_('Your cart is empty')}</p>
         <p className="text-sm mt-2">{_('Add some items to get started')}</p>
       </div>
@@ -47,7 +48,7 @@ const CartSummaryItemsList: React.FC<{
   }
 
   return (
-    <ul className="item__summary__list divide-y divide-gray-200 border-b mb-3">
+    <ul className="item__summary__list divide-y divide-divider mb-3">
       {items.map((item) => (
         <li key={item.uuid} className="flex items-start py-3">
           <div className="relative mr-4 self-center">
@@ -57,13 +58,13 @@ const CartSummaryItemsList: React.FC<{
                 height={100}
                 src={item.thumbnail}
                 alt={item.productName}
-                className="w-16 h-16 object-cover rounded border p-2 box-border"
+                className="w-16 h-16 object-cover rounded border border-border p-2 box-border"
               />
             )}
             {!item.thumbnail && (
-              <ProductNoThumbnail className="w-16 h-16 rounded border p-2 box-border" />
+              <ProductNoThumbnail className="w-16 h-16 rounded border border-border p-2 box-border" />
             )}
-            <span className="absolute -top-2 -right-2 bg-gray-200 rounded-full w-6 h-6 flex items-center justify-center text-gray-700 text-sm">
+            <span className="absolute -top-2 -right-2 bg-muted text-muted-foreground rounded-full w-6 h-6 flex items-center justify-center text-sm">
               {item.qty}
             </span>
           </div>
@@ -72,11 +73,11 @@ const CartSummaryItemsList: React.FC<{
             {item.variantOptions && item.variantOptions.length > 0 && (
               <div className="space-y-1">
                 {item.variantOptions.map((option) => (
-                  <div
-                    key={option.attributeCode}
-                    className="text-xs text-gray-700"
-                  >
-                    {option.attributeName}: {option.optionText}
+                  <div key={option.attributeCode} className="text-xs">
+                    <span>{option.attributeName}</span>:{' '}
+                    <span className="text-muted-foreground">
+                      {option.optionText}
+                    </span>
                   </div>
                 ))}
               </div>

package/src/components/frontStore/cart/CartTotalSummary.tsx

@@ -1,8 +1,15 @@
 import Area from '@components/common/Area.js';
 import { useAppState } from '@components/common/context/app.js';
+import { Skeleton } from '@components/common/ui/Skeleton.js';
 import { useCartState } from '@components/frontStore/cart/CartContext.js';
+import {
+  Coupon,
+  CouponState,
+  CouponActions
+} from '@components/frontStore/Coupon.js';
 import { CouponForm } from '@components/frontStore/CouponForm.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
+import { CircleX } from 'lucide-react';
 import React from 'react';
 
 const SkeletonValue: React.FC<{
@@ -17,7 +24,7 @@ const SkeletonValue: React.FC<{
   return (
     <span className={`relative ${className}`}>
       <span className="opacity-0">{children}</span>
-      <span className="absolute inset-0 bg-gray-200 rounded animate-pulse" />
+      <Skeleton className="absolute top-0 left-0 w-full h-full" />
     </span>
   );
 };
@@ -103,10 +110,32 @@ const Discount: React.FC<{
 
   return (
     <div className="flex justify-between gap-7 py-2">
-      <div>{_('Discount(${coupon})', { coupon })}</div>
-      <SkeletonValue loading={loading} className="text-right">
-        {discountAmount}
-      </SkeletonValue>
+      <Coupon>
+        {(state: CouponState, actions: CouponActions) => (
+          <>
+            <div className="flex justify-start items-center gap-2">
+              <SkeletonValue loading={loading} className="text-right">
+                <span>{_('Discount(${coupon})', { coupon })}</span>
+              </SkeletonValue>
+              {!state.isLoading && (
+                <a
+                  href="#"
+                  className="text-destructive"
+                  onClick={async (e) => {
+                    e.preventDefault();
+                    await actions.removeCoupon();
+                  }}
+                >
+                  <CircleX className="w-3.5 h-3.5" />
+                </a>
+              )}
+            </div>
+            <SkeletonValue loading={loading} className="text-right">
+              {discountAmount}
+            </SkeletonValue>
+          </>
+        )}
+      </Coupon>
     </div>
   );
 };
@@ -114,11 +143,20 @@ const Discount: React.FC<{
 const Shipping: React.FC<{
   method: string | undefined;
   cost: string | undefined;
+  noShippingRequired: boolean;
   loading?: boolean;
-}> = ({ method, cost, loading = false }) => {
+}> = ({ method, cost, noShippingRequired, loading = false }) => {
   return (
     <div className="summary-row flex justify-between gap-7 py-2">
-      {method && (
+      {noShippingRequired && (
+        <>
+          <span>{_('Shipping')}</span>
+          <span className="text-gray-500 italic font-normal">
+            {_('No shipping required')}
+          </span>
+        </>
+      )}
+      {method && !noShippingRequired && (
         <>
           <span>{_('Shipping (${method})', { method })}</span>
           <div>
@@ -126,7 +164,7 @@ const Shipping: React.FC<{
           </div>
         </>
       )}
-      {!method && (
+      {!method && !noShippingRequired && (
         <>
           <span>{_('Shipping')}</span>
           <span className="text-gray-500 italic font-normal">
@@ -141,6 +179,7 @@ const Shipping: React.FC<{
 const DefaultCartSummary: React.FC<{
   loading: boolean;
   showPriceIncludingTax: boolean;
+  noShippingRequired: boolean;
   subTotal: string;
   discountAmount: string;
   coupon: string | undefined;
@@ -151,6 +190,7 @@ const DefaultCartSummary: React.FC<{
 }> = ({
   loading,
   showPriceIncludingTax,
+  noShippingRequired,
   subTotal,
   discountAmount,
   coupon,
@@ -171,7 +211,12 @@ const DefaultCartSummary: React.FC<{
     />
     <Area id="cartSummaryAfterDiscount" noOuter />
     <Area id="cartSummaryBeforeShipping" noOuter />
-    <Shipping method={shippingMethod} cost={shippingCost} loading={loading} />
+    <Shipping
+      method={shippingMethod}
+      cost={shippingCost}
+      loading={loading}
+      noShippingRequired={noShippingRequired}
+    />
     <Area id="cartSummaryAfterShipping" noOuter />
     <Area id="cartSummaryBeforeTax" noOuter />
     <Tax
@@ -195,6 +240,7 @@ interface CartTotalSummaryProps {
   children?: (props: {
     loading: boolean;
     showPriceIncludingTax: boolean;
+    noShippingRequired: boolean;
     subTotal: string;
     discountAmount: string;
     coupon: string | undefined;
@@ -229,7 +275,7 @@ function CartTotalSummary({ children }: CartTotalSummaryProps) {
   const total = cart?.grandTotal?.text || '';
 
   return (
-    <div className="grid grid-cols-1 gap-5">
+    <div className="grid grid-cols-1 gap-3">
       {children ? (
         children({
           loading: Object.values(loadingStates).some(
@@ -237,6 +283,7 @@ function CartTotalSummary({ children }: CartTotalSummaryProps) {
               state === true || (typeof state === 'string' && state !== null)
           ),
           showPriceIncludingTax: priceIncludingTax,
+          noShippingRequired: cart?.noShippingRequired || false,
           subTotal,
           discountAmount,
           coupon,
@@ -252,6 +299,7 @@ function CartTotalSummary({ children }: CartTotalSummaryProps) {
               state === true || (typeof state === 'string' && state !== null)
           )}
           showPriceIncludingTax={priceIncludingTax}
+          noShippingRequired={cart?.noShippingRequired || false}
           subTotal={subTotal}
           discountAmount={discountAmount}
           coupon={coupon}

package/src/components/frontStore/cart/DefaultCartItemList.tsx

@@ -6,9 +6,9 @@ import {
 import { Image } from '@components/common/Image.js';
 import { ProductNoThumbnail } from '@components/common/ProductNoThumbnail.js';
 import { CartItem } from '@components/frontStore/cart/CartContext.js';
+import { ItemQuantity } from '@components/frontStore/cart/ItemQuantity.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React from 'react';
-import { ItemQuantity } from './ItemQuantity.js';
 
 interface CartItemsTableProps {
   items: CartItem[];
@@ -39,7 +39,7 @@ export const DefaultCartItemList: React.FC<CartItemsTableProps> = ({
           : row.productPrice?.text;
         return (
           <div className="flex justify-start gap-4">
-            <div>
+            <div className="shrink-0">
               {row.thumbnail ? (
                 <Image
                   src={row.thumbnail}
@@ -52,19 +52,24 @@ export const DefaultCartItemList: React.FC<CartItemsTableProps> = ({
                 <ProductNoThumbnail width={80} height={80} />
               )}
             </div>
-            <div className="font-medium flex flex-col gap-1 items-start h-full">
-              <span className="font-semibold">{row.productName}</span>
+            <div className="font-medium flex flex-col gap-1 items-start h-full min-w-0 flex-1">
+              <div className="font-semibold wrap-break-word w-full">
+                {row.productName}
+              </div>
               {row.variantOptions?.map((option) => (
-                <span key={option.optionId} className="text-xs text-muted">
-                  {option.attributeName}: {option.optionText}
+                <span key={option.optionId} className="text-xs">
+                  <span>{option.attributeName}</span>:{' '}
+                  <span className="text-muted-foreground">
+                    {option.optionText}
+                  </span>
                 </span>
               ))}
-              <span className="text-sm text-muted">
+              <span className="text-sm text-muted-foreground">
                 {priceValue} x {row.qty}
               </span>
               <a
                 href="#"
-                className="text-red-500 text-sm"
+                className="text-destructive text-sm"
                 onClick={(e) => {
                   e.preventDefault();
                   onRemoveItem?.(row.cartItemId);
@@ -73,7 +78,7 @@ export const DefaultCartItemList: React.FC<CartItemsTableProps> = ({
                 {_('Remove')}
               </a>
               {row.errors?.map((error, index) => (
-                <span key={index} className="text-xs text-red-500">
+                <span key={index} className="text-xs text-destructive">
                   {error}
                 </span>
               ))}
@@ -84,11 +89,11 @@ export const DefaultCartItemList: React.FC<CartItemsTableProps> = ({
     },
     {
       key: 'qty',
-      header: { label: _('Quantity'), className: 'text-center' },
+      header: { label: _('Quantity'), className: 'text-right' },
       sortable: true,
       render: (row) => {
         return (
-          <div className="text-left">
+          <div className="flex justify-end">
             <ItemQuantity
               initialValue={row.qty}
               cartItemId={row.cartItemId}
@@ -104,7 +109,7 @@ export const DefaultCartItemList: React.FC<CartItemsTableProps> = ({
                   >
                     −
                   </button>
-                  <span className="min-w-[3rem] text-center">{quantity}</span>
+                  <span className="min-w-12 text-center">{quantity}</span>
                   <button
                     onClick={increase}
                     disabled={loading}
@@ -121,7 +126,7 @@ export const DefaultCartItemList: React.FC<CartItemsTableProps> = ({
     },
     {
       key: 'lineTotal',
-      header: { label: _('Total'), className: 'flex justify-end' },
+      header: { label: _('Total'), className: 'text-right' },
       sortable: true,
       render: (row) => {
         const totalValue = showPriceIncludingTax
@@ -144,7 +149,7 @@ export const DefaultCartItemList: React.FC<CartItemsTableProps> = ({
 
   return (
     <>
-      <Area id="miniCartItemListBefore" noOuter />
+      <Area id="cartItemListBefore" noOuter />
       <ExtendableTable
         name="shoppingCartItems"
         columns={columns}
@@ -153,13 +158,14 @@ export const DefaultCartItemList: React.FC<CartItemsTableProps> = ({
         emptyMessage={_('Your cart is empty')}
         onSort={onSort}
         currentSort={currentSort}
-        className="cart__items__table border-none table-auto border-spacing-y-2 border-separate w-full"
+        className="cart__items__table border-none table-fixed border-spacing-y-2 border-separate w-full"
       />
-      <Area id="miniCartItemListAfter" noOuter />
+      <Area id="cartItemListAfter" noOuter />
       <style>
         {`
         .cart__items__table th, .cart__items__table td {
           padding: 0.75rem;
+          white-space: normal;
         }
         .cart__items__table th {
           border: none;
@@ -167,6 +173,14 @@ export const DefaultCartItemList: React.FC<CartItemsTableProps> = ({
         .cart__items__table td {
           border: none;
         }
+        .cart__items__table th:first-child,
+        .cart__items__table td:first-child {
+          width: 60%;
+        }
+        .cart__items__table th:nth-child(2),
+        .cart__items__table td:nth-child(2) {
+          width: 25%;
+        }
       `}
       </style>
     </>