(quality) remove eslint-disable

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

@@ -8,6 +8,7 @@ import { FabStateLabel } from '../base/fab-state-label';
 import CartAPI from '../../api/cart';
 import noImage from '../../../../images/no_image.png';
 import { ProductPrice } from './product-price';
+import ProductLib from '../../lib/product';
 
 interface StoreProductItemProps {
   product: Product,
@@ -62,19 +63,6 @@ export const StoreProductItem: React.FC<StoreProductItemProps> = ({ product, car
     return '';
   };
 
-  /**
-   * Return product's stock status
-   */
-  const productStockStatus = (product: Product) => {
-    if (product.stock.external === 0) {
-      return <span>{t('app.public.store_product_item.out_of_stock')}</span>;
-    }
-    if (product.low_stock_threshold && product.stock.external < product.low_stock_threshold) {
-      return <span>{t('app.public.store_product_item.limited_stock')}</span>;
-    }
-    return <span>{t('app.public.store_product_item.available')}</span>;
-  };
-
   return (
     <div className={`store-product-item ${statusColor(product)}`} onClick={() => showProduct(product)}>
       <div className="picture">
@@ -86,7 +74,7 @@ export const StoreProductItem: React.FC<StoreProductItemProps> = ({ product, car
       }
       <ProductPrice product={product} className="price" />
       <FabStateLabel status={statusColor(product)}>
-        {productStockStatus(product)}
+        <span>{t(ProductLib.stockStatusTrKey(product))}</span>
       </FabStateLabel>
       {product.stock.external > (product.quantity_min || 1) &&
         <FabButton icon={<i className="fas fa-cart-arrow-down" />} className="main-action-btn" onClick={addProductToCart}>

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

@@ -1,4 +1,3 @@
-/* eslint-disable fabmanager/scoped-translation */
 import React, { useEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
@@ -15,6 +14,7 @@ import useCart from '../../hooks/use-cart';
 import { FilePdf, Minus, Plus } from 'phosphor-react';
 import { FabStateLabel } from '../base/fab-state-label';
 import { ProductPrice } from './product-price';
+import ProductLib from '../../lib/product';
 
 declare const Application: IApplication;
 
@@ -76,19 +76,6 @@ export const StoreProduct: React.FC<StoreProductProps> = ({ productSlug, current
     }
   };
 
-  /**
-   * Return product's stock status
-   */
-  const productStockStatus = (product: Product) => {
-    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) {
-      return <span>{t('app.public.store_product_item.limited_stock')}</span>;
-    }
-    return <span>{t('app.public.store_product_item.available')}</span>;
-  };
-
   /**
    * Update product count
    */
@@ -121,7 +108,7 @@ export const StoreProduct: React.FC<StoreProductProps> = ({ productSlug, current
     if (toCartCount <= product.stock.external) {
       CartAPI.addItem(cart, product.id, toCartCount).then(data => {
         setCart(data);
-        onSuccess(t('app.public.store.add_to_cart_success'));
+        onSuccess(t('app.public.store_product.add_to_cart_success'));
       }).catch(onError);
     }
   };
@@ -177,13 +164,13 @@ export const StoreProduct: React.FC<StoreProductProps> = ({ productSlug, current
 
         <aside>
           <FabStateLabel status={statusColor(product)}>
-            {productStockStatus(product)}
+            <span>{t(ProductLib.stockStatusTrKey(product))}</span>
           </FabStateLabel>
           <ProductPrice product={product} className="price" />
           {product.stock.external > (product.quantity_min || 1) &&
             <div className='to-cart'>
               {product.quantity_min > 1 &&
-                <span className='min'>{t('app.public.store_product_item.minimum_purchase')}{product.quantity_min}</span>
+                <span className='min'>{t('app.public.store_product.minimum_purchase')}{product.quantity_min}</span>
               }
               <FabButton onClick={() => setCount('remove')} icon={<Minus size={16} />} className="minus" />
               <input type="number"
@@ -194,7 +181,7 @@ export const StoreProduct: React.FC<StoreProductProps> = ({ productSlug, current
               <FabButton onClick={() => setCount('add')} icon={<Plus size={16} />} className="plus" />
               <FabButton onClick={() => addToCart()} icon={<i className="fas fa-cart-arrow-down" />}
                 className="main-action-btn">
-                {t('app.public.store_product_item.add_to_cart')}
+                {t('app.public.store_product.add_to_cart')}
               </FabButton>
             </div>
           }

app/frontend/src/javascript/lib/product.ts

@@ -1,6 +1,6 @@
 import { ProductCategory } from '../models/product-category';
 import {
-  initialFilters,
+  initialFilters, Product,
   ProductIndexFilter,
   ProductIndexFilterIds, ProductIndexFilterUrl, ProductResourcesFetching,
   stockMovementInReasons,
@@ -40,6 +40,16 @@ export default class ProductLib {
     return `app.admin.store.stock_movement_reason.${reason}`;
   };
 
+  static stockStatusTrKey = (product: Product): string => {
+    if (product.stock.external === 0) {
+      return 'app.public.stock_status.out_of_stock';
+    }
+    if (product.low_stock_threshold && product.stock.external < product.low_stock_threshold) {
+      return 'app.public.stock_status.limited_stock';
+    }
+    return 'app.public.stock_status.available';
+  };
+
   /**
    * Check if the given stock movement is of type 'in' or 'out'
    */

config/locales/app.public.en.yml

@@ -400,18 +400,25 @@ en:
             price_low: "Price: low to high"
             price_high: "Price: high to low"
       store_product:
+        ref: "ref: {REF}"
+        add_to_cart_success: "Product added to the cart."
         unexpected_error_occurred: "An unexpected error occurred. Please try again later."
         show_more: "Display more"
         show_less: "Display less"
         documentation: "Documentation"
-      store_product_item:
+        minimum_purchase: "Minimum purchase: "
+        add_to_cart: "Add to cart"
+      stock_status:
         available: "Available"
         limited_stock: "Limited stock"
         out_of_stock: "Out of stock"
+      store_product_item:
         minimum_purchase: "Minimum purchase: "
         add: "Add"
         add_to_cart: "Add to cart"
-        unit: "unit"
+      product_price:
+        per_unit: "/ unit"
+        free: "Free"
       cart:
         my_cart: "My Cart"
       cart_button: