From fb3bbacaf04fdf45d62973ef3c14f2a4ad2c26ee Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sleede.com>
Date: Wed, 30 Jun 2021 16:58:16 +0200
Subject: [PATCH] handle no packs available for the customer

---
 .../components/prepaid-packs/packs-summary.tsx   | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx b/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx
index f5354f2fd..5bbd87b55 100644
--- a/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx
+++ b/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx
@@ -12,6 +12,8 @@ import { ProposePacksModal } from './propose-packs-modal';
 import { Loader } from '../base/loader';
 import { react2angular } from 'react2angular';
 import { IApplication } from '../../models/application';
+import { PrepaidPack } from '../../models/prepaid-pack';
+import PrepaidPackAPI from '../../api/prepaid-pack';
 
 declare var Application: IApplication;
 
@@ -30,6 +32,7 @@ interface PacksSummaryProps {
 const PacksSummaryComponent: React.FC<PacksSummaryProps> = ({ item, itemType, customer, operator, onError, onSuccess, refresh }) => {
   const { t } = useTranslation('logged');
 
+  const [packs, setPacks] = useState<Array<PrepaidPack>>(null);
   const [userPacks, setUserPacks] = useState<Array<UserPack>>(null);
   const [threshold, setThreshold] = useState<number>(null);
   const [packsModal, setPacksModal] = useState<boolean>(false);
@@ -41,10 +44,8 @@ const PacksSummaryComponent: React.FC<PacksSummaryProps> = ({ item, itemType, cu
   }, []);
 
   useEffect(() => {
-    if (_.isEmpty(customer)) return;
-
     getUserPacksData();
-  }, [item, itemType, customer]);
+  }, [customer, item, itemType]);
 
   useEffect(() => {
     if (refresh instanceof Promise) {
@@ -56,9 +57,14 @@ const PacksSummaryComponent: React.FC<PacksSummaryProps> = ({ item, itemType, cu
    * Fetch the user packs data from the API
    */
   const getUserPacksData = (): void => {
+    if (_.isEmpty(customer)) return;
+
     UserPackAPI.index({ user_id: customer.id, priceable_type: itemType, priceable_id: item.id })
       .then(data => setUserPacks(data))
       .catch(error => onError(error));
+    PrepaidPackAPI.index({ priceable_id: item.id, priceable_type: itemType, group_id: customer.group_id, disabled: false })
+      .then(data => setPacks(data))
+      .catch(error => onError(error));
   }
 
   /**
@@ -90,6 +96,8 @@ const PacksSummaryComponent: React.FC<PacksSummaryProps> = ({ item, itemType, cu
    * Do we need to display the "buy new pack" button?
    */
   const shouldDisplayButton = (): boolean => {
+    if (!packs?.length) return  false;
+
     if (threshold < 1) {
       return totalAvailable() - totalUsed() <= totalAvailable() * threshold;
     }
@@ -117,6 +125,8 @@ const PacksSummaryComponent: React.FC<PacksSummaryProps> = ({ item, itemType, cu
 
   // prevent component rendering if no customer selected
   if (_.isEmpty(customer)) return <div />;
+  // prevent component rendering if ths customer have no packs and there are no packs available
+  if (totalHours() === 0 && packs?.length === 0) return <div/>;
 
   return (
     <div className="packs-summary">