(bug) product stock status and quantity min to cart

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

@@ -1,6 +1,7 @@
 import React, { useState } 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';
@@ -151,7 +152,7 @@ const StoreCart: React.FC<StoreCartProps> = ({ onSuccess, onError, currentUser,
                 <span>/ {t('app.public.store_cart.unit')}</span>
               </div>
               <select value={item.quantity} onChange={changeProductQuantity(item)}>
-                {Array.from({ length: 100 }, (_, i) => i + item.quantity_min).map(v => (
+                {_.range(item.quantity_min, item.orderable_external_stock + 1, 1).map(v => (
                   <option key={v} value={v}>{v}</option>
                 ))}
               </select>

app/frontend/src/javascript/components/store/product-item.tsx

@@ -49,7 +49,7 @@ export const ProductItem: React.FC<ProductItemProps> = ({ product, onEdit, onDel
    * Returns CSS class from stock status
    */
   const statusColor = (product: Product) => {
-    if (product.stock.external === 0 && product.stock.internal === 0) {
+    if (product.stock.external < 1 && product.stock.internal < 1) {
       return 'out-of-stock';
     }
     if (product.low_stock_threshold && (product.stock.external < product.low_stock_threshold || product.stock.internal < product.low_stock_threshold)) {

app/frontend/src/javascript/components/store/store-product-item.tsx

@@ -53,10 +53,10 @@ export const StoreProductItem: React.FC<StoreProductItemProps> = ({ product, car
    * Returns CSS class from stock status
    */
   const statusColor = (product: Product) => {
-    if (product.stock.external === 0 && product.stock.internal === 0) {
+    if (product.stock.external < (product.quantity_min || 1)) {
       return 'out-of-stock';
     }
-    if (product.low_stock_alert) {
+    if (product.low_stock_threshold && product.stock.external < product.low_stock_threshold) {
       return 'low';
     }
     return '';
@@ -90,7 +90,7 @@ export const StoreProductItem: React.FC<StoreProductItemProps> = ({ product, car
       <FabStateLabel status={statusColor(product)}>
         {productStockStatus(product)}
       </FabStateLabel>
-      {product.stock.external > 0 &&
+      {product.stock.external > (product.quantity_min || 1) &&
         <FabButton icon={<i className="fas fa-cart-arrow-down" />} className="main-action-btn" onClick={addProductToCart}>
           {t('app.public.store_product_item.add')}
         </FabButton>

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

@@ -68,10 +68,10 @@ export const StoreProduct: React.FC<StoreProductProps> = ({ productSlug, current
    * Returns CSS class from stock status
    */
   const statusColor = (product: Product) => {
-    if (product.stock.external === 0 && product.stock.internal === 0) {
+    if (product.stock.external < (product.quantity_min || 1)) {
       return 'out-of-stock';
     }
-    if (product.low_stock_alert) {
+    if (product.low_stock_threshold && product.stock.external < product.low_stock_threshold) {
       return 'low';
     }
   };
@@ -80,7 +80,7 @@ export const StoreProduct: React.FC<StoreProductProps> = ({ productSlug, current
    * Return product's stock status
    */
   const productStockStatus = (product: Product) => {
-    if (product.stock.external === 0) {
+    if (product.stock.external < (product.quantity_min || 1)) {
       return <span>{t('app.public.store_product_item.out_of_stock')}</span>;
     }
     if (product.low_stock_threshold && product.stock.external < product.low_stock_threshold) {
@@ -95,7 +95,9 @@ export const StoreProduct: React.FC<StoreProductProps> = ({ productSlug, current
   const setCount = (type: 'add' | 'remove') => {
     switch (type) {
       case 'add':
-        setToCartCount(toCartCount + 1);
+        if (toCartCount < product.stock.external) {
+          setToCartCount(toCartCount + 1);
+        }
         break;
       case 'remove':
         if (toCartCount > product.quantity_min) {
@@ -116,10 +118,12 @@ export const StoreProduct: React.FC<StoreProductProps> = ({ productSlug, current
    * Add product to cart
    */
   const addToCart = () => {
-    CartAPI.addItem(cart, product.id, toCartCount).then(data => {
-      setCart(data);
-      onSuccess(t('app.public.store.add_to_cart_success'));
-    }).catch(onError);
+    if (toCartCount <= product.stock.external) {
+      CartAPI.addItem(cart, product.id, toCartCount).then(data => {
+        setCart(data);
+        onSuccess(t('app.public.store.add_to_cart_success'));
+      }).catch(onError);
+    }
   };
 
   if (product) {
@@ -179,11 +183,13 @@ export const StoreProduct: React.FC<StoreProductProps> = ({ productSlug, current
             <p>{FormatLib.price(product.amount)} <sup>TTC</sup></p>
             <span>/ {t('app.public.store_product_item.unit')}</span>
           </div>
-          {product.stock.external > 0 &&
+          {product.stock.external > (product.quantity_min || 1) &&
             <div className='to-cart'>
               <FabButton onClick={() => setCount('remove')} icon={<Minus size={16} />} className="minus" />
               <input type="number"
                 value={toCartCount}
+                min={product.quantity_min}
+                max={product.stock.external}
                 onChange={evt => typeCount(evt)} />
               <FabButton onClick={() => setCount('add')} icon={<Plus size={16} />} className="plus" />
               <FabButton onClick={() => addToCart()} icon={<i className="fas fa-cart-arrow-down" />}

app/frontend/src/javascript/models/order.ts

@@ -32,6 +32,7 @@ export interface Order {
     orderable_name: string,
     orderable_ref?: string,
     orderable_main_image_url?: string,
+    orderable_external_stock: number,
     quantity: number,
     quantity_min: number,
     amount: number,

app/views/api/orders/_order.json.jbuilder

@@ -27,6 +27,7 @@ json.order_items_attributes order.order_items.order(created_at: :asc) do |item|
   json.orderable_name item.orderable.name
   json.orderable_ref item.orderable.sku
   json.orderable_main_image_url item.orderable.main_image&.attachment_url
+  json.orderable_external_stock item.orderable.stock['external']
   json.quantity item.quantity
   json.quantity_min item.orderable.quantity_min
   json.amount item.amount / 100.0