Merge pull request #288 from Oksydan/core-js-refacto

Cart page error handling, general error handling/alert notification handling

_dev/js/theme/components/http/error/GenericHttpRequestError.js

@@ -0,0 +1,15 @@
+/**
+ * Generic Http Request error
+ * @class GenericHttpRequestError
+ * @property {string} message - Error message
+ */
+class GenericHttpRequestError extends Error {
+  NAME = 'GenericHttpRequestError';
+
+  constructor(message) {
+    super(message);
+    this.name = this.NAME;
+  }
+}
+
+export default GenericHttpRequestError;

_dev/js/theme/components/http/useDefaultHttpRequest.js

@@ -1,5 +1,5 @@
-import prestashop from 'prestashop';
 import useHttpRequest from './useHttpRequest';
+import GenericHttpRequestError from './error/GenericHttpRequestError';
 
 /**
  * Default http request accepting payload as object and returning promise with response
@@ -16,16 +16,10 @@ const useDefaultHttpRequest = (url, payload, options = {}) => {
       .query(payload)
       .post()
       .json((resp) => {
-        if (resp.errors) {
-          const errors = Array.isArray(resp.errors) ? resp.errors : [resp.errors];
-
-          reject(Error(errors.join('\n')));
-        } else {
-          resolve(resp);
-        }
+        resolve(resp);
       })
       .catch(() => {
-        reject(Error(prestashop.t.alert.genericHttpError));
+        reject(new GenericHttpRequestError('Error while sending request'));
       });
   });
 };

_dev/js/theme/core/address/handler/changeAddressCountryHandler.js

@@ -1,10 +1,7 @@
 import prestashop from 'prestashop';
-import useAlertToast from '../../../components/useAlertToast';
 import parseToHtml from '../../../utils/parseToHtml';
 import updateAddressRequest from '../request/updateAddressRequest';
 
-const { danger } = useAlertToast();
-
 /**
  * Change address country handler
  * @returns {Promise<void>}
@@ -69,14 +66,10 @@ const changeAddressCountryHandler = async () => {
       data,
     });
   } catch (error) {
-    prestashop.emit(
-      'handleError',
-      {
-        eventType: 'updateAddressForm',
-        resp: {},
-      },
-    );
-    danger(prestashop.t.alert.genericHttpError);
+    prestashop.emit('httpRequestError', {
+      eventType: 'updateAddressForm',
+      error,
+    });
   }
 };
 

_dev/js/theme/core/address/request/updateAddressRequest.js

@@ -1,6 +1,7 @@
 import useHttpRequest from '../../../components/http/useHttpRequest';
 import useHttpController from '../../../components/http/useHttpController';
 import useHttpPayloadDefinition from '../../../components/http/useHttpPayloadDefinition';
+import GenericHttpRequestError from '../../../components/http/error/GenericHttpRequestError';
 
 const { dispatch, abortAll } = useHttpController();
 
@@ -68,7 +69,7 @@ const updateAddressRequest = (url, payload) => {
           return;
         }
 
-        reject(e);
+        reject(new GenericHttpRequestError('Error while sending request'));
       }));
   });
 

_dev/js/theme/core/cart/cartController.js

@@ -8,6 +8,7 @@ import deleteFromCartHandler from './handler/cart/deleteFromCartHandler';
 import quantityChangeHandler from './handler/cart/quantityChangeHandler';
 import updateCartHandler from './handler/cart/updateCartHandler';
 import updatedCartHandler from './handler/cart/updatedCartHandler';
+import cartErrorsHandler from './handler/cart/cartErrorsHandler';
 import useCustomQuantityInput from '../../components/useCustomQuantityInput';
 
 const { on } = useEvent();
@@ -50,11 +51,14 @@ const cartController = () => {
     prestashop.on('updatedCart', (event) => {
       attachSpinnerEvents();
       updatedCartHandler(event);
+      cartErrorsHandler();
     });
 
     prestashop.on('updateCart', (event) => {
       updateCartHandler(event);
     });
+
+    cartErrorsHandler();
   };
 
   return {

_dev/js/theme/core/cart/handler/cart/addToCartHandler.js

@@ -1,3 +1,4 @@
+import prestashop from 'prestashop';
 import useAlertToast from '../../../../components/useAlertToast';
 import addToCartRequest from '../../request/cart/addToCartRequest';
 import sprintf from '../../../../utils/sprintf';
@@ -27,11 +28,15 @@ const addToCartHandler = async (event) => {
     return validInput;
   };
 
-  const idProduct = Number.parseInt(form.querySelector('[name=id_product]').value, 10);
+  const idProductInput = form.querySelector('[name=id_product]');
   const quantityInput = form.querySelector('[name=qty]');
+  const idProductAttributeInput = form.querySelector('[name=id_product_attribute]');
+  const idCustomizationInout = form.querySelector('[name=id_product_attribute]');
+
+  const idProduct = Number.parseInt((idProductInput?.value || null), 10);
   const qty = Number.parseInt(quantityInput?.value, 10) || 0;
-  const idProductAttribute = form.querySelector('[name=id_product_attribute]')?.value || 0;
-  const idCustomization = form.querySelector('[name=id_customization]')?.value || 0;
+  const idProductAttribute = Number.parseInt((idProductAttributeInput?.value || null), 10);
+  const idCustomization = Number.parseInt(idCustomizationInout?.value, 10) || 0;
 
   const onInvalidQuantity = (input) => {
     danger(sprintf(prestashop.t.alert.minimalQuantity, input.getAttribute('min')));
@@ -74,14 +79,16 @@ const addToCartHandler = async (event) => {
         eventType: 'addProductToCart',
         resp,
       });
+      addToCartButton.removeAttribute('disabled');
     }
   } catch (error) {
-    danger(error.message);
-  }
-
-  setTimeout(() => {
+    prestashop.emit('handleError', {
+      eventType: 'addProductToCart',
+      resp: {},
+      error,
+    });
     addToCartButton.removeAttribute('disabled');
-  }, 1000);
+  }
 };
 
 export default addToCartHandler;

_dev/js/theme/core/cart/handler/cart/cartErrorsHandler.js

@@ -0,0 +1,61 @@
+import prestashop from 'prestashop';
+import cartStateStore from '../../store/cartStateStore';
+
+const {
+  setIsUpdateOperation,
+  setHasError,
+  setErrorMsg,
+  getErrorMsg,
+  getHasError,
+  getIsUpdateOperation,
+} = cartStateStore();
+
+/**
+ * Handles cart page errors
+ * Side effects: updates cart state and cart notification DOM
+ * @returns {void}
+ */
+const cartErrorsHandler = () => {
+  const checkoutBtn = document.querySelector(prestashop.selectors.checkout.btn);
+  const errorMsg = getErrorMsg();
+  const hasError = getHasError();
+  const isUpdateOperation = getIsUpdateOperation();
+  const notification = document.querySelector(prestashop.selectors.notifications.container);
+
+  if (document.querySelector(prestashop.selectors.notifications.dangerAlert) || (errorMsg !== '' && !hasError)) {
+    checkoutBtn.classList.add('disabled');
+  }
+
+  if (errorMsg !== '') {
+    const alertBlock = `
+        <article class="alert alert-danger" role="alert" data-alert="danger">
+          <ul class="mb-0">
+            <li>${errorMsg}</li>
+          </ul>
+        </article>
+      `;
+
+    if (notification) {
+      notification.innerHTML = alertBlock;
+    }
+
+    setErrorMsg('');
+    setIsUpdateOperation(false);
+
+    if (hasError) {
+      // if hasError is true, quantity was not updated : allow checkout
+      checkoutBtn.classList.remove('disabled');
+    }
+  } else if (!hasError && isUpdateOperation) {
+    setHasError(false);
+    setIsUpdateOperation(false);
+
+    if (notification) {
+      notification.innerHTML = '';
+    }
+
+    checkoutBtn.classList.remove('disabled');
+  }
+};
+
+export default cartErrorsHandler;

_dev/js/theme/core/cart/handler/cart/deleteFromCartHandler.js

@@ -1,8 +1,6 @@
-import useAlertToast from '../../../../components/useAlertToast';
+import prestashop from 'prestashop';
 import deleteFromCartRequest from '../../request/cart/deleteFromCartRequest';
 
-const { danger } = useAlertToast();
-
 /**
  * Delete product from cart handler
  * @param event {Event} - event object
@@ -38,7 +36,11 @@ const deleteFromCartHandler = async (event) => {
       });
     }
   } catch (error) {
-    danger(error.message);
+    prestashop.emit('handleError', {
+      eventType: 'deleteFromCart',
+      resp: {},
+      error,
+    });
   }
 };
 

_dev/js/theme/core/cart/handler/cart/quantityChangeHandler.js

@@ -1,8 +1,8 @@
 import prestashop from 'prestashop';
 import quantityChangeRequest from '../../request/cart/quantityChangeRequest';
-import useAlertToast from '../../../../components/useAlertToast';
+import cartStateStore from '../../store/cartStateStore';
 
-const { danger } = useAlertToast();
+const { setIsUpdateOperation, setHasError, setErrorMsg } = cartStateStore();
 
 /**
  * @param {string} operation - increase|decrease
@@ -31,6 +31,15 @@ const quantityChangeHandler = async (operation, qtyDifference, input) => {
   try {
     const resp = await getRequest();
 
+    const {
+      errors = '',
+      hasError = false,
+    } = resp;
+
+    setIsUpdateOperation(true);
+    setHasError(hasError);
+    setErrorMsg(errors);
+
     if (!resp.hasError) {
       prestashop.emit('updateCart', {
         reason: dataset || resp,
@@ -43,7 +52,11 @@ const quantityChangeHandler = async (operation, qtyDifference, input) => {
       });
     }
   } catch (error) {
-    danger(error.message);
+    prestashop.emit('handleError', {
+      eventType: 'updateProductQuantityInCart',
+      resp: {},
+      error,
+    });
   }
 
   document.querySelector('body').classList.remove('cart-loading');

_dev/js/theme/core/cart/handler/cart/updateCartHandler.js

@@ -1,10 +1,7 @@
 import prestashop from 'prestashop';
 import parseToHtml from '../../../../utils/parseToHtml';
-import useAlertToast from '../../../../components/useAlertToast';
 import updateCartContentRequest from '../../request/cart/updateCartContentRequest';
 
-const { danger } = useAlertToast();
-
 /**
  * Update cart handler - update cart content and emit updatedCart event
  * @param {object} event - update cart event object
@@ -39,7 +36,11 @@ const updateCartHandler = async (event) => {
 
     prestashop.emit('updatedCart', { eventType: 'updateCart', resp });
   } catch (error) {
-    danger(error.message);
+    prestashop.emit('handleError', {
+      eventType: 'updateCart',
+      resp: {},
+      error,
+    });
   }
 };
 

_dev/js/theme/core/cart/handler/voucher/deleteVoucherHandler.js

@@ -1,8 +1,6 @@
-import useAlertToast from '../../../../components/useAlertToast';
+import prestashop from 'prestashop';
 import deleteVoucherFromCartRequest from '../../request/voucher/deleteVoucherFromCartRequest';
 
-const { danger } = useAlertToast();
-
 /**
  * Delete voucher handler
  * @param event {object} - click event
@@ -35,7 +33,11 @@ const deleteVoucherHandler = async (event) => {
       });
     }
   } catch (error) {
-    danger(error.message);
+    prestashop.emit('handleError', {
+      eventType: 'deleteVoucherFromCart',
+      resp: {},
+      error,
+    });
   }
 };
 

_dev/js/theme/core/cart/handler/voucher/submitVoucherHandler.js

@@ -1,8 +1,6 @@
+import prestashop from 'prestashop';
 import addVoucherToCartRequest from '../../request/voucher/addVoucherToCartRequest';
 import parseToHtml from '../../../../utils/parseToHtml';
-import useAlertToast from '../../../../components/useAlertToast';
-
-const { danger } = useAlertToast();
 
 /**
  * Submit voucher handler
@@ -46,7 +44,11 @@ const submitVoucherHandler = async (event) => {
       }
     }
   } catch (error) {
-    danger(error.message);
+    prestashop.emit('handleError', {
+      eventType: 'submitVoucher',
+      resp: {},
+      error,
+    });
   }
 
   btn.disabled = false;