Merge pull request #401 from PrestaShop/develop

Merge develop on master

.github/workflows/build.yml

@@ -0,0 +1,78 @@
+
+name: Build ZIP File
+on: 
+  pull_request:
+  push:
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    name: Build dependencies & create artifact
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup node env
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: Copy Webpack config
+        run: cp ./webpack/.env-example ./webpack/.env
+
+      - name: Build assets
+        run: npm run build
+
+      - name: Remove dependencies
+        run: rm node_modules/ .github/ .git/ -rf
+
+      - name: Create & Upload artifact
+        uses: actions/upload-artifact@v1
+        with:
+            name: ${{ github.event.repository.name }}
+            path: ../
+  update_release_draft:
+      runs-on: ubuntu-latest
+      needs: [deploy]
+      if: github.event_name == 'push' && github.event.ref == 'refs/heads/master'
+      steps:
+          - name: Download artifact
+            uses: actions/download-artifact@v1
+            with:
+                name: ${{ github.event.repository.name }}
+
+          - id: release_info
+            uses: toolmantim/release-drafter@v5
+            env:
+                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+          - name: Prepare for Release
+            run: |
+                cd ${{ github.event.repository.name }}
+                zip -r ${{ github.event.repository.name }}.zip ${{ github.event.repository.name }}
+          
+          - name: Clean existing assets
+            shell: bash
+            run: |
+                curl -fsSL https://github.com/github/hub/raw/master/script/get | bash -s 2.14.1
+                assets=`bin/hub api -t repos/${{ github.repository }}/releases/${{ steps.release_info.outputs.id }}/assets | awk '/\].url/ { print $2 }'`
+                for asset in $assets
+                do
+                    bin/hub api -X DELETE $asset
+                done
+            env:
+                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+          - name: Publish to GitHub Release
+            uses: actions/[email protected]
+            env:
+                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+            with:
+                upload_url: ${{ steps.release_info.outputs.upload_url }}
+                asset_path: ./${{ github.event.repository.name }}/${{ github.event.repository.name }}.zip
+                asset_name: ${{ github.event.repository.name }}.zip
+                asset_content_type: application/zip

README.md

@@ -4,6 +4,9 @@ This is a PrestaShop's theme we are working on. Please, if you work on this them
 
 [Read more](https://build.prestashop.com/news/new-theme-announce/) about this theme on the blog.
 
+![image](https://user-images.githubusercontent.com/16455155/199937084-3d2eab3f-dc3e-488f-8b87-e8d4565219b3.png)
+
+
 ## How to build assets
 
 Same as the PrestaShop project, you need at least **NodeJS 14.x** and **NPM 7** in order to build the project.

config/theme.yml

@@ -55,6 +55,12 @@ global_settings:
      - ps_linklist
   hooks:
     modules_to_hook:
+      displayAdminCustomers:
+        - blockwishlist
+      displayCustomerAccount:
+        - blockwishlist
+      displayMyAccountBlock:
+        - blockwishlist
       displayNav1:
         - ps_contactinfo
       displayNav2:
@@ -83,6 +89,12 @@ global_settings:
       displayLeftColumn:
         - ps_categorytree
         - ps_facetedsearch
+      displayContactLeftColumn:
+        - ps_contactinfo
+      displayContactRightColumn:
+        - ps_contactinfo
+      displayContactContent:
+        - contactform
       displaySearch:
         - ps_searchbar
       displayProductAdditionalInfo:
@@ -91,6 +103,8 @@ global_settings:
         - ps_featuredproducts
       displayCrossSellingShoppingCart:
         - ps_featuredproducts
+      displayProductActions:
+        - blockwishlist
 
   image_types:
     cart_default:

modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl

@@ -5,8 +5,8 @@
 
 {$componentName = 'email-subscription'}
 
-<div class="{$componentName} py-4">
-  <div class="container">
+<div class="{$componentName} px-0 py-4">
+  <div class="container px-1">
     <div class="{$componentName}__content row">
       <div class="{$componentName}__content__left col-md-5">
         <p class="{$componentName}__label">{l s='Get our latest news and special sales' d='Shop.Theme.Global'}</p>

src/js/components/useQuantityInput.test.ts

@@ -28,7 +28,7 @@ describe('useQuantityInput', () => {
       const incrementButton = getHTMLElement<HTMLButtonElement>(selectorsMap.qtyInput.increment);
       incrementButton.click();
       await debounceTimeout();
-      const productLineAlert = getHTMLElement<HTMLDivElement>(selectorsMap.qtyInput.alert(Quantify.ProductId));
+      const productLineAlert = getHTMLElement<HTMLDivElement>(selectorsMap.qtyInput.alert(Quantify.AlertId));
       mockedIncrementFetch.mockReset();
 
       expect(productLineAlert.innerHTML).not.toBe('');
@@ -81,6 +81,19 @@ describe('useQuantityInput', () => {
       expect(decreasedValue).toEqual(qtyMin);
     });
 
+    it('should revert the value if is not an integer number', async () => {
+      const qtyInput = getHTMLElement<HTMLInputElement>('input');
+      const baseValue = qtyInput.value;
+      qtyInput.value = '1.1';
+      qtyInput.dispatchEvent(new Event('keyup'));
+
+      const incrementButton = getHTMLElement<HTMLButtonElement>(selectorsMap.qtyInput.increment);
+      incrementButton.click();
+      await debounceTimeout();
+
+      expect(qtyInput.value).toEqual(baseValue);
+    });
+
     it('should display confirmation buttons on keyup', () => {
       const qtyInput = getHTMLElement<HTMLInputElement>('input');
       qtyInput.value = '1';

src/js/components/useQuantityInput.ts

@@ -77,6 +77,8 @@ const useQuantityInput: Theme.QuantityInput.Function = (
   });
 };
 
+const isValidInputNum = (inputNum: number) => !Number.isNaN(inputNum) && Number.isInteger(inputNum);
+
 const changeQuantity = (qtyInput: HTMLInputElement, change: number, keyboard = false) => {
   const {mode} = qtyInput.dataset;
 
@@ -85,7 +87,7 @@ const changeQuantity = (qtyInput: HTMLInputElement, change: number, keyboard = f
     const currentValue = Number(qtyInput.value);
     const min = (qtyInput.dataset.updateUrl === undefined) ? Number(qtyInput.getAttribute('min')) : 0;
     const newValue = Math.max(currentValue + change, min);
-    qtyInput.value = String(!isNaN(newValue) ? newValue : baseValue);
+    qtyInput.value = String(isValidInputNum(newValue) ? newValue : baseValue);
   }
 };
 
@@ -103,7 +105,7 @@ const updateQuantity = async (qtyInputGroup: Theme.QuantityInput.InputGroup, cha
     const baseValue = Number(qtyInput.getAttribute('value'));
     const quantity = targetValue - baseValue;
 
-    if (Number.isNaN(targetValue) === false && quantity !== 0) {
+    if (isValidInputNum(targetValue) && quantity !== 0) {
       const requestUrl = qtyInput.dataset.updateUrl;
 
       if (requestUrl !== undefined) {
@@ -113,8 +115,6 @@ const updateQuantity = async (qtyInputGroup: Theme.QuantityInput.InputGroup, cha
 
         toggleButtonSpinner(targetButton, targetButtonIcon, targetButtonSpinner);
 
-        const {productId} = qtyInput.dataset;
-
         try {
           const response = await sendUpdateCartRequest(requestUrl, quantity);
 
@@ -123,7 +123,7 @@ const updateQuantity = async (qtyInputGroup: Theme.QuantityInput.InputGroup, cha
 
             if (data.hasError) {
               const errors = data.errors as Array<string>;
-              const productAlertSelector = resetAlertContainer(Number(productId));
+              const productAlertSelector = resetAlertContainer(qtyInput);
 
               if (errors && productAlertSelector) {
                 errors.forEach((error: string) => {
@@ -156,7 +156,7 @@ const updateQuantity = async (qtyInputGroup: Theme.QuantityInput.InputGroup, cha
 
           if (errorData.status !== undefined) {
             const errorMsg = `${errorData.statusText}: ${errorData.url}`;
-            const productAlertSelector = resetAlertContainer(Number(productId));
+            const productAlertSelector = resetAlertContainer(qtyInput);
             useAlert(errorMsg, {type: 'danger', selector: productAlertSelector}).show();
 
             prestashop.emit(events.handleError, {
@@ -170,8 +170,7 @@ const updateQuantity = async (qtyInputGroup: Theme.QuantityInput.InputGroup, cha
         }
       }
     } else {
-      // The input value is not a correct number so revert to the value in the DOM
-      qtyInput.value = String(baseValue);
+      // The input value is not a correct number
       showSpinButtons(qtyInputGroup);
     }
   }
@@ -183,9 +182,11 @@ const getTargetButton = (qtyInputGroup: Theme.QuantityInput.InputGroup, change:
   return (change > 0) ? incrementButton : decrementButton;
 };
 
-const resetAlertContainer = (productId: number) => {
-  if (productId) {
-    const productAlertSelector = quantityInputMap.alert(productId);
+const resetAlertContainer = (qtyInput: HTMLInputElement) => {
+  const {alertId} = qtyInput.dataset;
+
+  if (alertId) {
+    const productAlertSelector = quantityInputMap.alert(alertId);
     const productAlertContainer = document.querySelector<HTMLDivElement>(productAlertSelector);
 
     if (productAlertContainer) {

src/js/constants/mocks/useQuantityInput-data.ts

@@ -4,11 +4,12 @@
  */
 
 export const delay = 5;
-export const ProductId = 1;
+export const ProductId = '1';
+export const AlertId = '99999';
 
 export const ProductLineTemplate = `
   <div class="product-line">
-    <div id="js-product-line-alert--${ProductId}"></div>
+    <div id="js-product-line-alert--${AlertId}"></div>
     <div class="product-line__informations">
       <div class="row">
         <div class="quantity-button js-quantity-button">
@@ -21,6 +22,7 @@ export const ProductLineTemplate = `
             <input
               data-update-url="#"
               data-product-id="${ProductId}"
+              data-alert-id="${AlertId}"
               value="1"
               min="1"
               type="text"

src/js/constants/selectors-map.ts

@@ -105,7 +105,7 @@ export const qtyInput = {
   confirm: '.confirmation',
   icon: '.material-icons',
   spinner: '.spinner-border',
-  alert: (id: number): string => `#js-product-line-alert--${id}`,
+  alert: (param: string): string => `#js-product-line-alert--${param}`,
 };
 
 export const formValidation = {

src/js/pages/customer.ts

@@ -6,21 +6,13 @@
 import SelectorsMap from '@constants/selectors-map';
 
 const initCustomer = () => {
-  const returnTableMainCheckbox = document.querySelector<HTMLInputElement>(SelectorsMap.order.returnFormMainCheckbox);
-  const returnTableItemCheckbox = document.querySelectorAll(SelectorsMap.order.returnFormItemCheckbox);
-
-  if (returnTableMainCheckbox) {
-    returnTableMainCheckbox?.addEventListener('click', () => {
-      const checked: boolean = returnTableMainCheckbox?.checked;
-      returnTableItemCheckbox.forEach((checkbox: HTMLInputElement) => {
-        if (checked === true) {
-          checkbox.checked = true;
-        } else {
-          checkbox.checked = false;
-        }
-      });
-    });
-  }
+  const {returnFormMainCheckbox, returnFormItemCheckbox} = SelectorsMap.order;
+  const returnTableMainCheckbox = document.querySelector<HTMLInputElement>(returnFormMainCheckbox);
+  returnTableMainCheckbox?.addEventListener('click', () => {
+    const checked = !!returnTableMainCheckbox?.checked;
+    const itemCheckbox = document.querySelectorAll<HTMLInputElement>(returnFormItemCheckbox);
+    itemCheckbox.forEach((checkbox) => { checkbox.checked = checked; });
+  });
 };
 
 export default initCustomer;

src/js/visible-password.ts

@@ -6,32 +6,22 @@
 const initVisiblePassword = () => {
   const {Theme} = window;
   const {visiblePassword: visiblePasswordMap} = Theme.selectors;
-  const visiblePasswordList = document.querySelectorAll<HTMLElement>(visiblePasswordMap.visiblePassword);
+  const visiblePasswordList = document.querySelectorAll(visiblePasswordMap.visiblePassword);
 
-  if (visiblePasswordList.length > 0) {
-    visiblePasswordList.forEach((visiblePasswordInput: HTMLInputElement) => {
-      const visiblePasswordBtn = visiblePasswordInput?.nextElementSibling;
+  visiblePasswordList.forEach((input: HTMLInputElement) => {
+    const button = input?.nextElementSibling;
 
-      visiblePasswordBtn?.addEventListener('click', () => {
-        const visiblePasswordIcon = visiblePasswordBtn.firstElementChild;
-        let type = visiblePasswordInput.getAttribute('type');
-        let typeIcon = 'visibility';
+    button?.addEventListener('click', () => {
+      const newType = input.getAttribute('type') === 'text' ? 'password' : 'text';
+      input.setAttribute('type', newType);
 
-        if (type === 'password') {
-          type = 'text';
-          typeIcon = 'visibility_off';
-        } else {
-          type = 'password';
-        }
+      const icon = button.firstElementChild;
 
-        visiblePasswordInput.setAttribute('type', type);
-
-        if (visiblePasswordIcon) {
-          visiblePasswordIcon.innerHTML = typeIcon;
-        }
-      });
+      if (icon) {
+        icon.innerHTML = newType === 'text' ? 'visibility_off' : 'visibility';
+      }
     });
-  }
+  });
 };
 
 export default initVisiblePassword;

src/scss/abstract/variables/overrides/_overrides.scss

@@ -1,22 +1,22 @@
 // IT IS FORBIDDEN TO USE REFERENCES TO BS5 VARIABLES BECAUSE THEY ARE NOT YET DECLARED.
-$primary: #16181c;
-$secondary: #f39d72;
-$success: #21834d;
-$warning: #ff9a52;
-$danger: #ff4c4c;
+//$primary: #16181c;
+//secondary: #f39d72;
+//success: #21834d;
+//warning: #ff9a52;
+//danger: #ff4c4c;
 
-$gray-100: #f6f6f6;
-$gray-200: #eaebec;
-$gray-300: #b3c7cd;
-$gray-600: #7a7a7a;
-$gray-700: #697180;
-$gray-800: #363a41;
-$gray-900: #232323;
+//gray-100: #f6f6f6;
+//gray-200: #eaebec;
+//gray-300: #b3c7cd;
+//gray-600: #7a7a7a;
+//gray-700: #697180;
+//gray-800: #363a41;
+//gray-900: #232323;
 
 // THESE ARE FINE BECAUSE WE ARE REDEFINING THEM IN THIS SHEET
-$text-muted: $gray-600;
+//text-muted: $gray-600;
 
-$body-color: $gray-800;
+//body-color: $gray-800;
 
 // Toasts
 $toast-border-width: 0;

src/scss/custom/modules/_emailsubscriptions.scss

@@ -23,7 +23,6 @@ $email-input-border-color: $input-border-color !default;
       align-items: center;
 
       input[type="email"] {
-        padding: 0.5rem 1.25rem;
         margin-right: 0.5rem;
         color: $email-input-color;
         border: 1px solid $email-input-color;