(quality) refacto item quantity input

app/frontend/src/javascript/components/cart/store-cart.tsx

@@ -1,7 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
-import _ from 'lodash';
 import { Loader } from '../base/loader';
 import { IApplication } from '../../models/application';
 import { FabButton } from '../base/fab-button';
@@ -18,6 +17,7 @@ import { Coupon } from '../../models/coupon';
 import noImage from '../../../../images/no_image.png';
 import Switch from 'react-switch';
 import OrderLib from '../../lib/order';
+import { CaretDown, CaretUp } from 'phosphor-react';
 
 declare const Application: IApplication;
 
@@ -35,8 +35,16 @@ const StoreCart: React.FC<StoreCartProps> = ({ onSuccess, onError, currentUser,
   const { t } = useTranslation('public');
 
   const { cart, setCart } = useCart(currentUser);
+  const [itemsQuantity, setItemsQuantity] = useState<{ id: number; quantity: number; }[]>();
   const [paymentModal, setPaymentModal] = useState<boolean>(false);
 
+  useEffect(() => {
+    const quantities = cart?.order_items_attributes.map(i => {
+      return { id: i.id, quantity: i.quantity };
+    });
+    setItemsQuantity(quantities);
+  }, [cart]);
+
   /**
    * Remove the product from cart
    */
@@ -53,12 +61,20 @@ const StoreCart: React.FC<StoreCartProps> = ({ onSuccess, onError, currentUser,
   /**
    * Change product quantity
    */
-  const changeProductQuantity = (item) => {
-    return (e: React.BaseSyntheticEvent) => {
-      CartAPI.setQuantity(cart, item.orderable_id, e.target.value).then(data => {
+  const changeProductQuantity = (e: React.BaseSyntheticEvent, item) => {
+    CartAPI.setQuantity(cart, item.orderable_id, e.target.value)
+      .then(data => {
         setCart(data);
-      }).catch(onError);
-    };
+      })
+      .catch(() => onError(t('app.public.store_cart.stock_limit')));
+  };
+  /** Increment/decrement product quantity  */
+  const handleInputNumber = (item, direction: 'up' | 'down') => {
+    CartAPI.setQuantity(cart, item.orderable_id, direction === 'up' ? item.quantity + 1 : item.quantity - 1)
+      .then(data => {
+        setCart(data);
+      })
+      .catch(() => onError(t('app.public.store_cart.stock_limit')));
   };
 
   /**
@@ -116,7 +132,7 @@ const StoreCart: React.FC<StoreCartProps> = ({ onSuccess, onError, currentUser,
   /**
    * Toggle product offer
    */
-  const toogleProductOffer = (item) => {
+  const toggleProductOffer = (item) => {
     return (checked: boolean) => {
       CartAPI.setOffer(cart, item.orderable_id, checked).then(data => {
         setCart(data);
@@ -154,11 +170,16 @@ const StoreCart: React.FC<StoreCartProps> = ({ onSuccess, onError, currentUser,
                 <p>{FormatLib.price(item.amount)}</p>
                 <span>/ {t('app.public.store_cart.unit')}</span>
               </div>
-              <select value={item.quantity} onChange={changeProductQuantity(item)}>
-                {_.range(item.quantity_min, item.orderable_external_stock + 1, 1).map(v => (
-                  <option key={v} value={v}>{v}</option>
-                ))}
-              </select>
+              <div className='quantity'>
+                <input type='number'
+                  onChange={e => changeProductQuantity(e, item)}
+                  min={item.quantity_min}
+                  max={item.orderable_external_stock}
+                  value={itemsQuantity?.find(i => i.id === item.id).quantity}
+                />
+                <button onClick={() => handleInputNumber(item, 'up')}><CaretUp size={12} weight="fill" /></button>
+                <button onClick={() => handleInputNumber(item, 'down')}><CaretDown size={12} weight="fill" /></button>
+              </div>
               <div className='total'>
                 <span>{t('app.public.store_cart.total')}</span>
                 <p>{FormatLib.price(OrderLib.itemAmount(item))}</p>
@@ -173,7 +194,7 @@ const StoreCart: React.FC<StoreCartProps> = ({ onSuccess, onError, currentUser,
                   <span>Offer the product</span>
                   <Switch
                   checked={item.is_offered}
-                  onChange={toogleProductOffer(item)}
+                  onChange={toggleProductOffer(item)}
                   width={40}
                   height={19}
                   uncheckedIcon={false}

app/frontend/src/stylesheets/modules/cart/store-cart.scss

@@ -78,6 +78,36 @@
           span { margin-right: 0.8rem; }
         }
       }
+      .quantity {
+        padding: 0.8rem 1.6rem 0.8rem 1.2rem;
+        display: grid;
+        grid-auto-flow: column;
+        gap: 0 0.8rem;
+        background-color: var(--gray-soft);
+        border-radius: var(--border-radius-sm);
+        input[type="number"] {
+          grid-area: 1 / 1 / 3 / 2;
+          width: 4ch;
+          min-width: fit-content;
+          background-color: transparent;
+          border: none;
+          text-align: right;
+          @include text-base(400);
+          -webkit-appearance: textfield;
+             -moz-appearance: textfield;
+                  appearance: textfield;
+        }
+        input[type=number]::-webkit-inner-spin-button, 
+        input[type=number]::-webkit-outer-spin-button { 
+          -webkit-appearance: none;
+        }
+        button {
+          padding: 0;
+          display: flex;
+          background-color: transparent;
+          border: none;
+        }
+      }
       .price,
       .total {
         min-width: 10rem;
@@ -189,32 +219,31 @@
 
   @media (min-width: 1024px) {
     &-list-item {
-      .ref { grid-area: 1 / 2 / 2 / 4; }
-      .actions { grid-area: 2 / 1 / 3 / 3; }
-      .offer { grid-area: 2 / 3 / 3 / 4; }
+      .ref { grid-area: 1 / 2 / 2 / 3; }
+      .actions { grid-area: 2 / 1 / 3 / 4; }
+      .offer { grid-area: 1 / 3 / 2 / 4; }
+    }
+  }
+  @media (min-width: 1200px) {
+    &-list-item {
+      grid-auto-flow: column;
+      grid-template-columns: min-content 1fr 1fr;
+      justify-content: space-between;
+      align-items: center;
+      .picture { grid-area: auto; }
+      .ref { grid-area: auto; }
+      .actions { grid-area: auto; }
+      .offer {
+        grid-area: auto;
+        align-self: flex-start;
+      }
     }
   }
   @media (min-width: 1440px) {
     grid-template-columns: repeat(12, minmax(0, 1fr));
     grid-template-rows: minmax(0, min-content);
 
-    &-list {
-      grid-area: 1 / 1 / 2 / 10;
-
-      &-item {
-        grid-auto-flow: column;
-        grid-template-columns: min-content 1fr;
-        justify-content: space-between;
-        align-items: center;
-        .picture { grid-area: auto; }
-        .ref { grid-area: auto; }
-        .actions { grid-area: auto; }
-        .offer {
-          grid-area: auto;
-          align-self: flex-start;
-        }
-      }
-    }
+    &-list { grid-area: 1 / 1 / 2 / 10; }
     .group { grid-area: 2 / 1 / 3 / 10; }
     aside { grid-area: 1 / 10 / 3 / 13; }
   }

config/locales/app.public.en.yml

@@ -422,6 +422,7 @@ en:
         pickup: "Pickup your products"
         reference_short: "ref:"
         minimum_purchase: "Minimum purchase: "
+        stock_limit: "You have reached the current stock limit"
         unit: "Unit"
         total: "Total"
         checkout_header: "Total amount for your cart"