Fixed availability bug (#31)

Author: dusanradovanovic

src/CompareProducts.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useCompareProducts, useTranslation } from './app-state';
 import { ProductMainImage } from './ProductMainImage';
 import { Product } from './service';
+import { isProductAvailable } from './helper';
 import { ReactComponent as RecycleBinIcon } from './images/icons/ic_trash.svg';
 
 import './CompareProducts.scss';
@@ -42,7 +43,7 @@ export const CompareProducts: React.FC = () => {
                 <td key={product.id}>
                   <div className="compareproducts__name">{product.name}</div>
                   <div className="compareproducts__price">{product.meta.display_price.without_tax.formatted}</div>
-                  <div className="compareproducts__availability">{product.meta.stock.availability === 'in-stock' ? t('available') : t('out-of-stock')}</div>
+                  <div className="compareproducts__availability">{isProductAvailable(product) ? t('available') : t('out-of-stock')}</div>
                   <div className="compareproducts__addtocart">
                     <span
                       className="moltin-buy-button"

src/Product.tsx

@@ -5,6 +5,7 @@ import { loadProductBySlug } from './service';
 import { CompareCheck } from './CompareCheck';
 import { ProductMainImage } from './ProductMainImage';
 import { useTranslation, useCurrency } from './app-state';
+import { isProductAvailable } from './helper';
 
 import './Product.scss';
 
@@ -37,7 +38,7 @@ export const Product: React.FC = () => {
               {product.meta.display_price.without_tax.formatted}
             </div>
             <div className="product__availability">
-              {product.meta.stock.availability === 'in-stock' ? t('available') : t('out-of-stock')}
+              {isProductAvailable(product) ? t('available') : t('out-of-stock')}
             </div>
             <div className="product__comparecheck">
               <CompareCheck product={product} />

src/ProductThumbnail.tsx

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import { CompareCheck } from './CompareCheck';
 import { ProductMainImage } from './ProductMainImage';
 import { useTranslation } from './app-state';
+import { isProductAvailable } from './helper';
 
 import './ProductThumbnail.scss';
 
@@ -33,7 +34,7 @@ export const ProductThumbnail: React.FC<ProductThumbnailProps> = (props) => {
         {props.product.meta.display_price.without_tax.formatted}
       </div>
       <div className="productthumbnail__availability">
-        {props.product.meta.stock.availability === 'in-stock' ? t('available') : t('out-of-stock')}
+        {isProductAvailable(props.product) ? t('available') : t('out-of-stock')}
       </div>
       <div className={`productthumbnail__comparecheck`}>
         <CompareCheck product={props.product} />

src/helper.ts

@@ -0,0 +1,6 @@
+import { Product } from "./service";
+
+export function isProductAvailable(product: Product): boolean {
+  // we assume that product is available if we are not managing the stock
+  return !product.manage_stock || product.meta?.stock?.availability === 'in-stock';
+}