@evershop/evershop 1.1.0 → 1.2.1

package/src/components/common/list/Filter.jsx

@@ -10,7 +10,7 @@ export default function Filter({ title, options, selectedOption }) {
       <button
         type="button"
         onClick={() => setShow(!show)}
-        className="flex gap-1 justify-center items-center"
+        className="flex gap-4 justify-center items-center"
       >
         <span>{selectedOption || title}</span>
         {!show && (

package/src/components/common/modal/Alert.jsx

@@ -118,7 +118,7 @@ function Alert({ children }) {
                   {(alert.primaryAction !== undefined ||
                     alert.secondaryAction !== undefined) && (
                     <Card.Session>
-                      <div className="flex justify-end space-x-1">
+                      <div className="flex justify-end space-x-4">
                         {alert.primaryAction && (
                           <Button {...alert.primaryAction} />
                         )}

package/src/components/common/modal/Modal.jsx

@@ -17,7 +17,7 @@ function Modal({ modal, title, children, primaryAction }) {
             <Card title={title}>
               <div className="modal-content">{children}</div>
               <Card.Session>
-                <div className="flex justify-end gap-2">
+                <div className="flex justify-end gap-8">
                   <Button
                     title="Close"
                     variant="secondary"

package/src/components/frontStore/catalog/categoryView/filter/AttributeFilter.jsx

@@ -66,7 +66,7 @@ export function AttributeFilter({
   return (
     <>
       {availableAttributes.map((a) => (
-        <div key={a.attributeCode} className="attribute-filter mt-2">
+        <div key={a.attributeCode} className="attribute-filter mt-8">
           <div className="filter-item-title">
             <span className="font-medium">{a.attributeName}</span>
           </div>
@@ -79,7 +79,7 @@ export function AttributeFilter({
               );
 
               return (
-                <li key={o.optionId} className="mt-05 mr-05">
+                <li key={o.optionId} className="mt-2 mr-2">
                   <a
                     href="#"
                     className="flex justify-start items-center"

package/src/components/frontStore/catalog/categoryView/filter/CategoryFilter.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import './CategoryFilter.scss';
 import { _ } from '@evershop/evershop/src/lib/locale/translate';
 
 export function CategoryFilter({ currentFilters, categories, updateFilter }) {
@@ -61,7 +62,7 @@ export function CategoryFilter({ currentFilters, categories, updateFilter }) {
   }
 
   return (
-    <div className="category-filter mt-2">
+    <div className="category-filter mt-8">
       <div className="filter-item-title">
         <span className="font-medium">{_('Category')}</span>
       </div>
@@ -74,7 +75,7 @@ export function CategoryFilter({ currentFilters, categories, updateFilter }) {
           );
 
           return (
-            <li key={c.uuid} className="mt-05 mr-05">
+            <li key={c.uuid} className="mt-2 mr-2">
               <a
                 href="#"
                 className="flex justify-start items-center"

package/src/components/frontStore/catalog/categoryView/filter/CategoryFilter.scss

@@ -0,0 +1,5 @@
+@media (max-width: 639px) {
+    .category-filter {
+        padding-bottom: 2.5rem;
+    }
+}

package/src/components/frontStore/catalog/product/list/List.jsx

@@ -19,16 +19,16 @@ export default function ProductList({ products = [], countPerRow = 3 }) {
   let className;
   switch (countPerRow) {
     case 3:
-      className = 'grid grid-cols-2 md:grid-cols-3 gap-2';
+      className = 'grid grid-cols-2 md:grid-cols-3 gap-8';
       break;
     case 4:
-      className = 'grid grid-cols-2 md:grid-cols-4 gap-2';
+      className = 'grid grid-cols-2 md:grid-cols-4 gap-8';
       break;
     case 5:
-      className = 'grid grid-cols-2 md:grid-cols-5 gap-2';
+      className = 'grid grid-cols-2 md:grid-cols-5 gap-8';
       break;
     default:
-      className = 'grid grid-cols-2 md:grid-cols-3 gap-2';
+      className = 'grid grid-cols-2 md:grid-cols-3 gap-8';
   }
 
   return (

package/src/components/frontStore/catalog/product/list/Pagination.jsx

@@ -67,7 +67,7 @@ export function Pagination({ total, limit, currentPage }) {
 
   return (
     <div className="products-pagination">
-      <ul className="pagination flex justify-center space-x-1">
+      <ul className="pagination flex justify-center space-x-4">
         {currentPage > 1 && (
           <li className="page-item prev self-center">
             <button

package/src/components/frontStore/catalog/product/list/Sorting.jsx

@@ -58,8 +58,8 @@ export default function Sorting() {
   };
 
   return (
-    <div className="product-sorting mb-1">
-      <div className="product-sorting-inner flex justify-end items-center space-x-05">
+    <div className="product-sorting mb-4">
+      <div className="product-sorting-inner flex justify-end items-center space-x-2">
         <div>
           <span>{_('Sort By')}:</span>
         </div>

package/src/components/frontStore/catalog/product/list/item/Name.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 function Name({ name, url }) {
   return (
-    <div className="product-name product-list-name mt-1 mb-025">
+    <div className="product-name product-list-name mt-4 mb-1">
       <a href={url} className="font-bold hover:underline h5">
         <span>{name}</span>
       </a>

package/src/components/frontStore/checkout/cart/Empty.jsx

@@ -16,14 +16,14 @@ export function Empty() {
         <div className="text-center">
           <h2>{_('Shopping cart')}</h2>
         </div>
-        <div className="mt-2 text-center">
+        <div className="mt-8 text-center">
           <span>{_('Your cart is empty!')}</span>
         </div>
-        <div className="flex justify-center mt-2">
+        <div className="flex justify-center mt-8">
           <Button
             url="/"
             title={
-              <span className="flex space-x-1">
+              <span className="flex space-x-4">
                 <span className="self-center">{_('CONTINUE SHOPPING')}</span>{' '}
                 <svg
                   className="self-center"

package/src/components/frontStore/checkout/cart/items/ItemOptions.jsx

@@ -11,7 +11,7 @@ export function ItemOptions({ options = [] }) {
   const language = get(useAppState(), 'language', 'en');
 
   return (
-    <div className="cart-item-options mt-05">
+    <div className="cart-item-options mt-2">
       <ul className="list-basic">
         {options.map((o, i) => (
           // eslint-disable-next-line react/no-array-index-key

package/src/components/frontStore/checkout/cart/items/ItemVariantOptions.jsx

@@ -7,7 +7,7 @@ export function ItemVariantOptions({ options = [] }) {
   }
 
   return (
-    <div className="cart-item-variant-options mt-05">
+    <div className="cart-item-variant-options mt-2">
       <ul>
         {options.map((o, i) => (
           // eslint-disable-next-line react/no-array-index-key

package/src/components/frontStore/checkout/cart/items/Items.jsx

@@ -7,10 +7,10 @@ import ProductNoThumbnail from '@components/common/ProductNoThumbnail';
 import { ItemOptions } from './ItemOptions';
 import { ItemVariantOptions } from './ItemVariantOptions';
 import './Items.scss';
+import Quantity from './Quantity';
 
-function Items({ items, setting: { displayCheckoutPriceIncludeTax } }) {
+function Items({ items, setting: { priceIncludingTax } }) {
   const AppContextDispatch = useAppDispatch();
-
   const removeItem = async (item) => {
     const response = await fetch(item.removeApi, {
       method: 'DELETE',
@@ -50,11 +50,10 @@ function Items({ items, setting: { displayCheckoutPriceIncludeTax } }) {
           </tr>
         </thead>
         <tbody>
-          {items.map((item, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <tr key={index}>
+          {items.map((item) => (
+            <tr key={item.cartItemId}>
               <td>
-                <div className="flex justify-start space-x-1 product-info">
+                <div className="flex justify-start space-x-4 product-info">
                   <div className="product-image flex justify-center items-center">
                     {item.thumbnail && (
                       <img
@@ -85,7 +84,7 @@ function Items({ items, setting: { displayCheckoutPriceIncludeTax } }) {
                     <ItemVariantOptions
                       options={JSON.parse(item.variantOptions || '[]')}
                     />
-                    <div className="mt-05">
+                    <div className="mt-2">
                       <a
                         onClick={async (e) => {
                           e.preventDefault();
@@ -104,12 +103,12 @@ function Items({ items, setting: { displayCheckoutPriceIncludeTax } }) {
                 {item.finalPrice.value < item.productPrice.value && (
                   <div>
                     <span className="regular-price">
-                      {displayCheckoutPriceIncludeTax
+                      {priceIncludingTax
                         ? item.productPriceInclTax.text
                         : item.productPrice.text}
                     </span>{' '}
                     <span className="sale-price">
-                      {displayCheckoutPriceIncludeTax
+                      {priceIncludingTax
                         ? item.finalPriceInclTax.text
                         : item.finalPrice.text}
                     </span>
@@ -118,25 +117,24 @@ function Items({ items, setting: { displayCheckoutPriceIncludeTax } }) {
                 {item.finalPrice.value >= item.productPrice.value && (
                   <div>
                     <span className="sale-price">
-                      {displayCheckoutPriceIncludeTax
+                      {priceIncludingTax
                         ? item.finalPriceInclTax.text
                         : item.finalPrice.text}
                     </span>
                   </div>
                 )}
-                <div className="md:hidden mt-05">
-                  <span>{_('Qty')}</span>
-                  <span>{item.qty}</span>
+                <div className="md:hidden mt-2 flex justify-end">
+                  <Quantity qty={item.qty} api={item.updateQtyApi} />
                 </div>
               </td>
               <td className="hidden md:table-cell">
-                <span>{item.qty}</span>
+                <Quantity qty={item.qty} api={item.updateQtyApi} />
               </td>
               <td className="hidden md:table-cell">
                 <span>
-                  {displayCheckoutPriceIncludeTax
-                    ? item.total.text
-                    : item.subTotal.text}
+                  {priceIncludingTax
+                    ? item.lineTotalInclTax.text
+                    : item.lineTotal.text}
                 </span>
               </td>
             </tr>
@@ -172,19 +170,20 @@ Items.propTypes = {
         text: PropTypes.string
       }),
       qty: PropTypes.number,
-      total: PropTypes.shape({
+      lineTotalInclTax: PropTypes.shape({
         value: PropTypes.number,
         text: PropTypes.string
       }),
-      subTotal: PropTypes.shape({
+      lineTotal: PropTypes.shape({
         value: PropTypes.number,
         text: PropTypes.string
       }),
-      removeApi: PropTypes.string
+      removeApi: PropTypes.string,
+      updateQtyApi: PropTypes.string
     })
   ).isRequired,
   setting: PropTypes.shape({
-    displayCheckoutPriceIncludeTax: PropTypes.bool
+    priceIncludingTax: PropTypes.bool
   }).isRequired
 };
 

package/src/components/frontStore/checkout/cart/items/Items.scss

@@ -47,4 +47,51 @@
       }
     }
   }
+  .qty-box {
+    max-width: 130px;
+    button {
+      .spinner {
+        animation: rotator 1.4s linear infinite;
+        .path {
+          stroke-dasharray: 280;
+          stroke-dashoffset: 0;
+          transform-origin: center;
+          stroke: var(--primary);
+          animation: dash 1.4s ease-in-out infinite;
+        }
+      }
+      svg {
+        width: 1.1rem;
+        height: 1.1rem;
+      }
+    }
+    input {
+      text-align: center;
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+  }
 }
+
+@keyframes rotator {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: 280;
+  }
+  50% {
+    stroke-dashoffset: 70;
+    transform: rotate(135deg);
+  }
+  100% {
+    stroke-dashoffset: 280;
+    transform: rotate(450deg);
+  }
+}

package/src/components/frontStore/checkout/cart/items/Quantity.jsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useAppDispatch } from '@components/common/context/app';
+import { toast } from 'react-toastify';
+
+export default function Quantity({ qty, api }) {
+  const AppContextDispatch = useAppDispatch();
+  const [quantity, setQuantity] = React.useState(qty);
+  const previousQuantity = React.useRef(qty);
+  const [debounceTimer, setDebounceTimer] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const updateQuantity = (newQuantity) => {
+    setQuantity(newQuantity);
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+    const timer = setTimeout(() => {
+      callUpdateAPI(newQuantity);
+    }, 500);
+    setDebounceTimer(timer);
+  };
+
+  const callUpdateAPI = async (qty) => {
+    setIsLoading(true);
+    try {
+      const response = await fetch(api, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          qty: Math.abs(previousQuantity.current - qty),
+          action: qty > quantity ? 'increase' : 'decrease'
+        }),
+        credentials: 'same-origin'
+      });
+      const json = await response.json();
+      if (!json.error) {
+        const url = new URL(window.location.href);
+        url.searchParams.set('ajax', true);
+        await AppContextDispatch.fetchPageData(url);
+        previousQuantity.current = qty;
+      } else {
+        setQuantity(previousQuantity.current);
+        toast.error(json.error.message);
+      }
+    } catch (error) {
+      setQuantity(previousQuantity.current);
+      toast.error(error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="qty-box grid grid-cols-3 border border-[#ccc]">
+      <button
+        className="flex justify-center items-center"
+        onClick={() => updateQuantity(Math.max(quantity - 1, 0))}
+        disabled={isLoading}
+        type="button"
+      >
+        {isLoading && (
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            role="presentation"
+            className="spinner"
+            viewBox="0 0 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle
+              className="path"
+              fill="none"
+              strokeWidth="6"
+              cx="33"
+              cy="33"
+              r="30"
+            />
+          </svg>
+        )}
+        {!isLoading && (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            focusable="false"
+            role="presentation"
+            className="icon icon-minus"
+            fill="none"
+            viewBox="0 0 10 2"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M.5 1C.5.7.7.5 1 .5h8a.5.5 0 110 1H1A.5.5 0 01.5 1z"
+              fill="currentColor"
+            />
+          </svg>
+        )}
+      </button>
+      <input type="text" value={quantity} readOnly />
+      <button
+        className="flex justify-center items-center"
+        onClick={() => updateQuantity(quantity + 1)}
+        disabled={isLoading}
+        type="button"
+      >
+        {isLoading && (
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            role="presentation"
+            className="spinner"
+            viewBox="0 0 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle
+              className="path"
+              fill="none"
+              strokeWidth="6"
+              cx="33"
+              cy="33"
+              r="30"
+            />
+          </svg>
+        )}
+        {!isLoading && (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            focusable="false"
+            role="presentation"
+            className="icon icon-plus"
+            fill="none"
+            viewBox="0 0 10 10"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M1 4.51a.5.5 0 000 1h3.5l.01 3.5a.5.5 0 001-.01V5.5l3.5-.01a.5.5 0 00-.01-1H5.5L5.49.99a.5.5 0 00-1 .01v3.5l-3.5.01H1z"
+              fill="currentColor"
+            />
+          </svg>
+        )}
+      </button>
+    </div>
+  );
+}
+
+Quantity.propTypes = {
+  qty: PropTypes.number.isRequired,
+  api: PropTypes.string.isRequired
+};

package/src/components/frontStore/checkout/checkout/StepTitle.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 function Title({ step }) {
   return (
-    <div className="flex space-x-1 step-title mb-1 mt-1">
+    <div className="flex space-x-4 step-title mb-4 mt-4">
       {step.isCompleted === true && (
         <svg
           className="self-center"

package/src/components/frontStore/checkout/checkout/payment/paymentStep/StepContent.jsx

@@ -87,7 +87,7 @@ export function StepContent({
     );
   }
   if (error) {
-    return <div className="p-2 text-critical">{error.message}</div>;
+    return <div className="p-8 text-critical">{error.message}</div>;
   }
   return (
     <div>
@@ -100,7 +100,7 @@ export function StepContent({
         submitBtn={false}
         isJSON
       >
-        <h4 className="mb-1 mt-3">{_('Billing Address')}</h4>
+        <h4 className="mb-4 mt-12">{_('Billing Address')}</h4>
         <BillingAddress
           useShippingAddress={useShippingAddress}
           setUseShippingAddress={setUseShippingAddress}
@@ -123,16 +123,16 @@ export function StepContent({
           </div>
         )}
 
-        <h4 className="mb-1 mt-3">{_('Payment Method')}</h4>
+        <h4 className="mb-4 mt-12">{_('Payment Method')}</h4>
         {paymentMethods && paymentMethods.length > 0 && (
           <>
-            <div className="divide-y border rounded border-divider px-2 mb-2">
+            <div className="divide-y border rounded border-divider px-8 mb-8">
               {paymentMethods.map((method) => (
                 <div
                   key={method.code}
                   className="border-divider payment-method-list"
                 >
-                  <div className="py-2">
+                  <div className="py-8">
                     <Area id={`checkoutPaymentMethod${method.code}`} />
                   </div>
                 </div>

package/src/components/frontStore/checkout/checkout/shipment/StepContent.jsx

@@ -44,7 +44,7 @@ export function StepContent({
 
   return (
     <div>
-      <h4 className="mb-1 mt-3">{_('Shipping Address')}</h4>
+      <h4 className="mb-4 mt-12">{_('Shipping Address')}</h4>
       <Form
         method="POST"
         action={addShippingAddressApi}

package/src/components/frontStore/checkout/checkout/summary/Cart.jsx

@@ -12,27 +12,25 @@ function CartSummary({
   subTotalInclTax,
   grandTotal,
   discountAmount,
-  taxAmount,
+  totalTaxAmount,
   shippingMethodName,
   shippingFeeInclTax,
   coupon,
-  displayCheckoutPriceIncludeTax
+  priceIncludingTax
 }) {
   return (
     <div className="checkout-summary-block">
       <Subtotal
         count={totalQty}
-        total={
-          displayCheckoutPriceIncludeTax ? subTotalInclTax.text : subTotal.text
-        }
+        total={priceIncludingTax ? subTotalInclTax.text : subTotal.text}
       />
       <Shipping method={shippingMethodName} cost={shippingFeeInclTax.text} />
-      {!displayCheckoutPriceIncludeTax && <Tax amount={taxAmount.text} />}
+      {!priceIncludingTax && <Tax amount={totalTaxAmount.text} />}
       <Discount code={coupon} discount={discountAmount.text} />
       <Total
-        taxAmount={taxAmount.text}
+        totalTaxAmount={totalTaxAmount.text}
         total={grandTotal.text}
-        displayCheckoutPriceIncludeTax={displayCheckoutPriceIncludeTax}
+        priceIncludingTax={priceIncludingTax}
       />
     </div>
   );
@@ -56,11 +54,11 @@ CartSummary.propTypes = {
   subTotalInclTax: PropTypes.shape({
     text: PropTypes.string.isRequired
   }),
-  taxAmount: PropTypes.shape({
+  totalTaxAmount: PropTypes.shape({
     text: PropTypes.string.isRequired
   }),
   totalQty: PropTypes.string,
-  displayCheckoutPriceIncludeTax: PropTypes.bool
+  priceIncludingTax: PropTypes.bool
 };
 
 CartSummary.defaultProps = {
@@ -81,11 +79,11 @@ CartSummary.defaultProps = {
   subTotalInclTax: {
     text: ''
   },
-  taxAmount: {
+  totalTaxAmount: {
     text: ''
   },
   totalQty: '',
-  displayCheckoutPriceIncludeTax: false
+  priceIncludingTax: false
 };
 
 export { CartSummary };

package/src/components/frontStore/checkout/checkout/summary/Items.jsx

@@ -9,7 +9,7 @@ function ItemVariantOptions({ options = [] }) {
   }
 
   return (
-    <div className="cart-item-variant-options mt-05">
+    <div className="cart-item-variant-options mt-2">
       <ul>
         {options.map((o, i) => (
           // eslint-disable-next-line react/no-array-index-key
@@ -36,7 +36,7 @@ ItemVariantOptions.defaultProps = {
   options: []
 };
 
-function Items({ items, displayCheckoutPriceIncludeTax }) {
+function Items({ items, priceIncludingTax }) {
   return (
     <div id="summary-items">
       <table className="listing items-table">
@@ -69,9 +69,9 @@ function Items({ items, displayCheckoutPriceIncludeTax }) {
               </td>
               <td>
                 <span>
-                  {displayCheckoutPriceIncludeTax
-                    ? item.total.text
-                    : item.subTotal.text}
+                  {priceIncludingTax
+                    ? item.lineTotalInclTax.text
+                    : item.lineTotal.text}
                 </span>
               </td>
             </tr>
@@ -89,20 +89,20 @@ Items.propTypes = {
       productName: PropTypes.string,
       variantOptions: PropTypes.string,
       qty: PropTypes.number,
-      total: PropTypes.shape({
+      lineTotalInclTax: PropTypes.shape({
         text: PropTypes.string
       }),
-      subTotal: PropTypes.shape({
+      lineTotal: PropTypes.shape({
         text: PropTypes.string
       })
     })
   ),
-  displayCheckoutPriceIncludeTax: PropTypes.bool
+  priceIncludingTax: PropTypes.bool
 };
 
 Items.defaultProps = {
   items: [],
-  displayCheckoutPriceIncludeTax: false
+  priceIncludingTax: false
 };
 
 export { Items };