evershopcommerce · treoden · Aug 22, 2024 · Aug 21, 2024 · Aug 22, 2024
diff --git a/packages/evershop/src/components/frontStore/checkout/cart/items/Items.jsx b/packages/evershop/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: { priceIncludingTax } }) {
   const AppContextDispatch = useAppDispatch();
-
   const removeItem = async (item) => {
     const response = await fetch(item.removeApi, {
       method: 'DELETE',
@@ -124,13 +124,12 @@ function Items({ items, setting: { priceIncludingTax } }) {
                     </span>
                   </div>
                 )}
-                <div className="md:hidden mt-2">
-                  <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>
@@ -180,7 +179,8 @@ Items.propTypes = {
         value: PropTypes.number,
         text: PropTypes.string
       }),
-      removeApi: PropTypes.string
+      removeApi: PropTypes.string,
+      updateQtyApi: PropTypes.string
     })
   ).isRequired,
   setting: PropTypes.shape({

diff --git a/packages/evershop/src/components/frontStore/checkout/cart/items/Items.scss b/packages/evershop/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);
+  }
+}
diff --git a/packages/evershop/src/components/frontStore/checkout/cart/items/Quantity.jsx b/packages/evershop/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
+            ariaHidden="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"
+            ariaHidden="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} />
+      <button
+        className="flex justify-center items-center"
+        onClick={() => updateQuantity(quantity + 1)}
+        disabled={isLoading}
+        type="button"
+      >
+        {isLoading && (
+          <svg
+            ariaHidden="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"
+            ariaHidden="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
+};
diff --git a/packages/evershop/src/modules/checkout/api/updateCartItemQty/[bodyParser]updateQty.js b/packages/evershop/src/modules/checkout/api/updateCartItemQty/[bodyParser]updateQty.js
@@ -0,0 +1,49 @@
+const {
+  INVALID_PAYLOAD,
+  INTERNAL_SERVER_ERROR,
+  OK
+} = require('@evershop/evershop/src/lib/util/httpStatus');
+const {
+  translate
+} = require('@evershop/evershop/src/lib/locale/translate/translate');
+const { error } = require('@evershop/evershop/src/lib/log/logger');
+const { getCartByUUID } = require('../../services/getCartByUUID');
+const { saveCart } = require('../../services/saveCart');
+
+module.exports = async (request, response, delegate, next) => {
+  try {
+    const { cart_id, item_id } = request.params;
+    const cart = await getCartByUUID(cart_id);
+    if (!cart) {
+      response.status(INVALID_PAYLOAD);
+      response.json({
+        error: {
+          message: translate('Invalid cart'),
+          status: INVALID_PAYLOAD
+        }
+      });
+      return;
+    }
+    const { action, qty } = request.body;
+    const item = await cart.updateItemQty(item_id, qty, action);
+    await saveCart(cart);
+    response.status(OK);
+    response.$body = {
+      data: {
+        item: item.export(),
+        count: cart.getItems().length,
+        cartId: cart.getData('uuid')
+      }
+    };
+    next();
+  } catch (err) {
+    error(err);
+    response.status(INTERNAL_SERVER_ERROR);
+    response.json({
+      error: {
+        status: INTERNAL_SERVER_ERROR,
+        message: err.message
+      }
+    });
+  }
+};
diff --git a/packages/evershop/src/modules/checkout/api/updateCartItemQty/[context]bodyParser[auth].js b/packages/evershop/src/modules/checkout/api/updateCartItemQty/[context]bodyParser[auth].js
@@ -0,0 +1,5 @@
+const bodyParser = require('body-parser');
+
+module.exports = (request, response, delegate, next) => {
+  bodyParser.json({ inflate: false })(request, response, next);
+};
diff --git a/packages/evershop/src/modules/checkout/api/updateCartItemQty/payloadSchema.json b/packages/evershop/src/modules/checkout/api/updateCartItemQty/payloadSchema.json
@@ -0,0 +1,21 @@
+{
+  "type": "object",
+  "properties": {
+    "action": {
+      "type": "string",
+      "enum": ["increase", "decrease"] 
+    },
+    "qty": {
+      "type": ["string", "integer"],
+      "pattern": "^[1-9][0-9]*$"
+    }
+  },
+  "required": ["action", "qty"],
+  "additionalProperties": true,
+  "errorMessage": {
+    "properties": {
+      "action": "Action is required. It must be either 'increase' or 'decrease'",
+      "qty": "Qty is invalid"
+    }
+  }
+}
diff --git a/packages/evershop/src/modules/checkout/api/updateCartItemQty/route.json b/packages/evershop/src/modules/checkout/api/updateCartItemQty/route.json
@@ -0,0 +1,5 @@
+{
+  "methods": ["PATCH"],
+  "path": "/cart/:cart_id/items/:item_id",
+  "access": "public"
+}
diff --git a/...ages/evershop/src/modules/checkout/api/updateMineCartItemQty/[context]bodyParser[auth].js b/...ages/evershop/src/modules/checkout/api/updateMineCartItemQty/[context]bodyParser[auth].js
@@ -0,0 +1,5 @@
+const bodyParser = require('body-parser');
+
+module.exports = (request, response, delegate, next) => {
+  bodyParser.json({ inflate: false })(request, response, next);
+};
diff --git a/...s/evershop/src/modules/checkout/api/updateMineCartItemQty/[detectCurrentCart]updateQty.js b/...s/evershop/src/modules/checkout/api/updateMineCartItemQty/[detectCurrentCart]updateQty.js
@@ -0,0 +1,51 @@
+const {
+  INVALID_PAYLOAD,
+  INTERNAL_SERVER_ERROR,
+  OK
+} = require('@evershop/evershop/src/lib/util/httpStatus');
+const {
+  translate
+} = require('@evershop/evershop/src/lib/locale/translate/translate');
+const { error } = require('@evershop/evershop/src/lib/log/logger');
+const { getCartByUUID } = require('../../services/getCartByUUID');
+const { saveCart } = require('../../services/saveCart');
+const { getContextValue } = require('../../../graphql/services/contextHelper');
+
+module.exports = async (request, response, delegate, next) => {
+  try {
+    const { item_id } = request.params;
+    const cartId = getContextValue(request, 'cartId');
+    const cart = await getCartByUUID(cartId);
+    if (!cart) {
+      response.status(INVALID_PAYLOAD);
+      response.json({
+        error: {
+          message: translate('Invalid cart'),
+          status: INVALID_PAYLOAD
+        }
+      });
+      return;
+    }
+    const { action, qty } = request.body;
+    const item = await cart.updateItemQty(item_id, qty, action);
+    await saveCart(cart);
+    response.status(OK);
+    response.$body = {
+      data: {
+        item: item.export(),
+        count: cart.getItems().length,
+        cartId: cart.getData('uuid')
+      }
+    };
+    next();
+  } catch (err) {
+    error(err);
+    response.status(INTERNAL_SERVER_ERROR);
+    response.json({
+      error: {
+        status: INTERNAL_SERVER_ERROR,
+        message: err.message
+      }
+    });
+  }
+};