Merge pull request #24 from Oksydan/front-changes

Front changes

_theme_dev/src/css/theme/components/_cart-preview-content.scss

@@ -0,0 +1,14 @@
+
+.cart-preview-content {
+  $self: &;
+
+  &--dropdown {
+    #{$self} {
+      &__products {
+        max-height: rem-calc(300px);
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+    }
+  }
+}

_theme_dev/src/css/theme/components/_cart-preview-dropdown.scss

@@ -0,0 +1,4 @@
+
+.cart-preview-dropdown {
+  width: rem-calc(320px);
+}

_theme_dev/src/css/theme/components/_index.scss

@@ -0,0 +1,2 @@
+@import "cart-preview-dropdown";
+@import "cart-preview-content";

_theme_dev/src/css/theme/index.scss

@@ -0,0 +1,3 @@
+@import "@themeAbstract";
+@import "components";
+

_theme_dev/src/js/theme/handler/closePreviewDropdownHandler.js

@@ -0,0 +1,36 @@
+/**
+ * Handles the event to close the preview dropdown.
+ *
+ * @function
+ * @name closePreviewDropdownHandler
+ * @param {Event} e - The event object representing the triggered event.
+ */
+const closePreviewDropdownHandler = (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+
+  /**
+   * The target selector for the preview dropdown to be closed.
+   * @type {string|undefined}
+   */
+  const target = e.delegateTarget?.dataset?.target;
+
+  if (target) {
+    /**
+     * The DOM element representing the preview dropdown.
+     * @type {HTMLElement|null}
+     */
+    const dropdown = document.querySelector(target);
+
+    if (dropdown) {
+      /**
+       * The instance of the Bootstrap Dropdown associated with the preview dropdown.
+       * @type {bootstrap.Dropdown}
+       */
+      const dropdownInstance = bootstrap.Dropdown.getOrCreateInstance(dropdown);
+      dropdownInstance.hide();
+    }
+  }
+};
+
+export default closePreviewDropdownHandler;

_theme_dev/src/js/theme/handler/openNotificationHandler.js

@@ -0,0 +1,146 @@
+import useAlertToast from '@js/theme/components/useAlertToast';
+import { parseToHtml } from '@js/utils/DOM/DOMHelpers';
+import { one } from '@js/utils/event/eventHandler';
+import selectorsMap from '../selectors/selectorsMap';
+
+/**
+ * Handles the display of modal notifications with the provided content.
+ *
+ * @function
+ * @name handleModalNotification
+ * @param {string} notificationContent - The content to be displayed in the modal notification.
+ */
+const handleModalNotification = (notificationContent) => {
+  if (!notificationContent) {
+    return;
+  }
+
+  const { body } = document;
+  const {
+    notificationModal,
+  } = selectorsMap;
+
+  body.append(parseToHtml(notificationContent));
+
+  const modal = document.querySelector(notificationModal);
+
+  if (!modal) {
+    return;
+  }
+
+  const modalInstance = bootstrap.Modal.getOrCreateInstance(modal);
+
+  modalInstance.show();
+
+  one(modal, 'hidden.bs.modal', () => {
+    modal.remove();
+  });
+};
+
+/**
+ * Handles the display of toast notifications with the provided content.
+ *
+ * @function
+ * @name handleToastNotification
+ * @param {string} notificationContent - The content to be displayed in the toast notification.
+ */
+const handleToastNotification = (notificationContent) => {
+  if (!notificationContent) {
+    return;
+  }
+
+  const {
+    showToast,
+  } = useAlertToast();
+
+  showToast(notificationContent);
+};
+
+/**
+ * Opens the preview dropdown element.
+ *
+ * @function
+ * @name openPreviewDropdown
+ */
+const openPreviewDropdown = () => {
+  const {
+    cartPreviewBtn,
+  } = selectorsMap;
+
+  const dropdown = document.querySelector(cartPreviewBtn);
+
+  if (!dropdown) {
+    return;
+  }
+
+  const dropdownInstance = window.bootstrap.Dropdown.getOrCreateInstance(dropdown);
+  dropdownInstance.show();
+};
+
+/**
+ * Opens the preview offcanvas element.
+ *
+ * @function
+ * @name openPreviewOffcanvas
+ */
+const openPreviewOffcanvas = () => {
+  const {
+    cartPreviewOffcanvas,
+  } = selectorsMap;
+
+  const offcanvas = document.querySelector(cartPreviewOffcanvas);
+
+  if (!offcanvas) {
+    return;
+  }
+
+  const offcanvasInstance = window.bootstrap.Offcanvas.getOrCreateInstance(offcanvas);
+  offcanvasInstance.show();
+};
+
+/**
+ * Handles the opening of different types of previews based on the previewType.
+ *
+ * @function
+ * @name handleOpenPreview
+ * @param {string} previewType - The type of preview to be opened ('dropdown' or 'offcanvas').
+ */
+const handleOpenPreview = (previewType) => {
+  switch (previewType) {
+    case 'dropdown':
+      openPreviewDropdown();
+      break;
+    case 'offcanvas':
+      openPreviewOffcanvas();
+      break;
+    default:
+      break;
+  }
+};
+
+/**
+ * Handles the opening of different types of notifications.
+ *
+ * @function
+ * @name openNotificationHandler
+ * @param {string} notificationType - The type of notification ('modal', 'toast', or 'open_preview').
+ * @param {string} notificationContent - The content to be displayed in the notification.
+ * @param {string} previewType - The type of preview to be opened when notificationType is 'open_preview'.
+ */
+const openNotificationHandler = (notificationType, notificationContent, previewType) => {
+  switch (notificationType) {
+    case 'modal':
+      handleModalNotification(notificationContent);
+      break;
+    case 'toast':
+      handleToastNotification(notificationContent);
+      break;
+    case 'open_preview':
+      handleOpenPreview(previewType);
+      break;
+    default:
+      break;
+  }
+};
+
+export default openNotificationHandler;

_theme_dev/src/js/theme/handler/updateCartHandler.js

@@ -0,0 +1,56 @@
+import updatePreviewCartRequest from '../request/updatePreviewCartRequest';
+
+/**
+ * Handles the update of the shopping cart based on an event.
+ *
+ * @function
+ * @name updateCartHandler
+ * @param {Object} event - The event triggering the shopping cart update.
+ * @param {Object} event.reason - The reason for the shopping cart update.
+ * @param {Number} event.reason.idCustomization - The ID of the customization related to the update.
+ * @param {Number} event.reason.idProductAttribute - The ID of the product attribute related to the update.
+ * @param {Number} event.reason.idProduct - The ID of the product related to the update.
+ * @param {string} event.reason.linkAction - The action associated with the shopping cart update.
+ * @param {Object} event.resp - The response object related to the update.
+ */
+const updateCartHandler = (event) => {
+  if (!event?.reason || !event?.resp || event?.resp?.hasError) {
+    return;
+  }
+
+  /**
+   * Payload for the shopping cart update request.
+   * @typedef {Object} CartUpdatePayload
+   * @property {Number} id_customization - The ID of the customization.
+   * @property {Number} id_product_attribute - The ID of the product attribute.
+   * @property {Number} id_product - The ID of the product.
+   * @property {string} cart-action - The action to be performed on the shopping cart.
+   */
+  const payload = {
+    id_customization: event.reason.idCustomization,
+    id_product_attribute: event.reason.idProductAttribute,
+    id_product: event.reason.idProduct,
+    'cart-action': event.reason.linkAction,
+  };
+
+  // refreshCartPreviewUrl is defined as a global variable in the module
+  const { getRequest } = updatePreviewCartRequest(window.refreshCartPreviewUrl, payload);
+
+  /**
+   * Executes the shopping cart update request and emits events based on the response.
+   *
+   * @function
+   * @name getRequest
+   * @memberof updateCartHandler
+   * @return {Promise<Object>} A Promise that resolves with the response data.
+   */
+  getRequest()
+    .then((resp) => {
+      prestashop.emit('updatedCartPreview', resp);
+    })
+    .catch((resp) => {
+      prestashop.emit('handleError', { eventType: 'updateShoppingCart', resp });
+    });
+};
+
+export default updateCartHandler;

_theme_dev/src/js/theme/handler/updateCartPreviewHandler.js

@@ -0,0 +1,42 @@
+import { parseToHtml, each } from '@js/utils/DOM/DOMHelpers';
+import selectorsMap from '../selectors/selectorsMap';
+
+/**
+ * Updates the cart preview elements with new HTML content.
+ *
+ * @function
+ * @name updateCartPreviewHandler
+ * @param {string} previewBtnHtmlString - The HTML string to replace the cart preview button with.
+ * @param {string} previewContentHtmlString - The HTML string to replace the content within the cart preview with.
+ */
+const updateCartPreviewHandler = (previewBtnHtmlString, previewContentHtmlString) => {
+  const {
+    cartPreviewBtn,
+    cartPreviewContent,
+  } = selectorsMap;
+
+  /**
+   * Replaces the specified cart preview elements with the provided HTML string.
+   *
+   * @function
+   * @name replaceCartPreviewElement
+   * @memberof updateCartPreviewHandler
+   * @param {string} selector - The selector for the cart preview element to be replaced.
+   * @param {string} htmlString - The HTML string to replace the corresponding cart preview element with.
+   */
+  const replaceCartPreviewElement = (selector, htmlString) => {
+    each(selector, (element) => {
+      element.replaceWith(parseToHtml(htmlString));
+    });
+  };
+
+  if (previewBtnHtmlString) {
+    replaceCartPreviewElement(cartPreviewBtn, previewBtnHtmlString);
+  }
+
+  if (previewContentHtmlString) {
+    replaceCartPreviewElement(cartPreviewContent, previewContentHtmlString);
+  }
+};
+
+export default updateCartPreviewHandler;