(feat) display free instead of 0,0€

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Product } from '../../models/product';
+import FormatLib from '../../lib/format';
+import { useTranslation } from 'react-i18next';
+
+interface ProductPriceProps {
+  product: Product;
+  className?: string;
+}
+
+/**
+ * Render the formatted price for the given product, or "free" if the price is 0 or not set
+ */
+export const ProductPrice: React.FC<ProductPriceProps> = ({ product, className }) => {
+  const { t } = useTranslation('public');
+
+  /**
+   * Return the formatted price data
+   */
+  const renderPrice = (product: Product) => {
+    if ([0, null, undefined].includes(product.amount)) {
+      return <p>{t('app.public.product_price.free')}</p>;
+    }
+    return <>
+      <p>{FormatLib.price(product.amount)}</p>
+      <span>{t('app.public.product_price.per_unit')}</span>
+    </>;
+  };
+
+  return (
+    <div className={`product-price ${className || ''}`}>
+      {renderPrice(product)}
+    </div>
+  );
+};

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

@@ -5,9 +5,9 @@ import { FabButton } from '../base/fab-button';
 import { Product } from '../../models/product';
 import { Order } from '../../models/order';
 import { FabStateLabel } from '../base/fab-state-label';
-import FormatLib from '../../lib/format';
 import CartAPI from '../../api/cart';
 import noImage from '../../../../images/no_image.png';
+import { ProductPrice } from './product-price';
 
 interface StoreProductItemProps {
   product: Product,
@@ -17,7 +17,7 @@ interface StoreProductItemProps {
 }
 
 /**
- * This component shows a product item in store
+ * This component shows a product item "card" in the public store list
  */
 export const StoreProductItem: React.FC<StoreProductItemProps> = ({ product, cart, onSuccessAddProductToCart, onError }) => {
   const { t } = useTranslation('public');
@@ -84,10 +84,7 @@ export const StoreProductItem: React.FC<StoreProductItemProps> = ({ product, car
       {product.quantity_min > 1 &&
         <span className='min'>{t('app.public.store_product_item.minimum_purchase')}{product.quantity_min}</span>
       }
-      <div className='price'>
-        <p>{FormatLib.price(product.amount || 0)}</p>
-        <span>/ {t('app.public.store_product_item.unit')}</span>
-      </div>
+      <ProductPrice product={product} className="price" />
       <FabStateLabel status={statusColor(product)}>
         {productStockStatus(product)}
       </FabStateLabel>

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

@@ -1,7 +1,6 @@
 /* eslint-disable fabmanager/scoped-translation */
 import React, { useEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import FormatLib from '../../lib/format';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
 import { IApplication } from '../../models/application';
@@ -15,6 +14,7 @@ import { FabButton } from '../base/fab-button';
 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';
 
 declare const Application: IApplication;
 
@@ -179,10 +179,7 @@ export const StoreProduct: React.FC<StoreProductProps> = ({ productSlug, current
           <FabStateLabel status={statusColor(product)}>
             {productStockStatus(product)}
           </FabStateLabel>
-          <div className='price'>
-            <p>{FormatLib.price(product.amount || 0)} <sup>TTC</sup></p>
-            <span>/ {t('app.public.store_product_item.unit')}</span>
-          </div>
+          <ProductPrice product={product} className="price" />
           {product.stock.external > (product.quantity_min || 1) &&
             <div className='to-cart'>
               {product.quantity_min > 1 &&