From eb50c37419212ec14cac56d8bfdd11e34caa45f0 Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sleede.com>
Date: Wed, 28 Sep 2022 10:33:30 +0200
Subject: [PATCH] (bug) do not display no price as free

---
 .../src/javascript/components/store/product-item.tsx       | 7 ++-----
 .../src/javascript/components/store/product-price.tsx      | 5 ++++-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/frontend/src/javascript/components/store/product-item.tsx b/app/frontend/src/javascript/components/store/product-item.tsx
index 661c9ecae..ea1fbb7f4 100644
--- a/app/frontend/src/javascript/components/store/product-item.tsx
+++ b/app/frontend/src/javascript/components/store/product-item.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import FormatLib from '../../lib/format';
 import { FabButton } from '../base/fab-button';
 import { Product } from '../../models/product';
 import { PencilSimple, Trash } from 'phosphor-react';
 import noImage from '../../../../images/no_image.png';
 import { FabStateLabel } from '../base/fab-state-label';
+import { ProductPrice } from './product-price';
 
 interface ProductItemProps {
   product: Product,
@@ -76,10 +76,7 @@ export const ProductItem: React.FC<ProductItemProps> = ({ product, onEdit, onDel
           <span>{t('app.admin.store.product_item.stock.external')}</span>
           <p>{product.stock.external}</p>
         </div>
-        <div className='price'>
-          <p>{FormatLib.price(product.amount || 0)}</p>
-          <span>/ {t('app.admin.store.product_item.unit')}</span>
-        </div>
+        <ProductPrice product={product} className="price" />
       </div>
       <div className='actions'>
         <div className='manage'>
diff --git a/app/frontend/src/javascript/components/store/product-price.tsx b/app/frontend/src/javascript/components/store/product-price.tsx
index 8066a4e49..0e868b0fa 100644
--- a/app/frontend/src/javascript/components/store/product-price.tsx
+++ b/app/frontend/src/javascript/components/store/product-price.tsx
@@ -18,9 +18,12 @@ export const ProductPrice: React.FC<ProductPriceProps> = ({ product, className }
    * Return the formatted price data
    */
   const renderPrice = (product: Product) => {
-    if ([0, null, undefined].includes(product.amount)) {
+    if (product.amount === 0) {
       return <p>{t('app.public.product_price.free')}</p>;
     }
+    if ([null, undefined].includes(product.amount)) {
+      return <div/>;
+    }
     return <>
       <p>{FormatLib.price(product.amount)}</p>
       <span>{t('app.public.product_price.per_unit')}</span>