Subida del módulo y tema de PrestaShop

admin_o2w/themes/new-theme/js/pages/customer/CustomerForm.ts

@@ -0,0 +1,139 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+
+import customerFormMap from './customer-form-map';
+import ChangePasswordHandler from '../../components/change-password-handler';
+
+/**
+ * Class responsible for javascript actions in customer add/edit page.
+ */
+export default class CustomerForm {
+  constructor() {
+    // Watch password field change and strength indicator
+    const passwordHandler = new ChangePasswordHandler(
+      customerFormMap.passwordStrengthFeedbackContainer,
+    );
+    passwordHandler.watchPasswordStrength($(customerFormMap.passwordInput));
+
+    // Watch customer group checkbox change and if it was unchecked,
+    // update default group below if it's no longer in the list.
+    $(customerFormMap.customerGroupCheckboxes).on('change', (event) => {
+      this.checkOrUpdateDefaultGroup($(event.currentTarget).is(':checked'));
+    });
+
+    // Watch is_guest switch change and update other inputs accordingly
+    $(customerFormMap.isGuestRadios).on('change', (event) => {
+      if (Number($(event.currentTarget).val()) === 1) {
+        this.adaptFormForGuestCustomer();
+      } else {
+        this.adaptFormForRegisteredCustomer();
+      }
+    });
+  }
+
+  private checkOrUpdateDefaultGroup(wasChecked: boolean): void {
+    // Get currently selected group ID
+    const currentDefaultGroup = Number(<string> $(customerFormMap.defaultGroupSelectedOption).val());
+
+    // Get all checked groups in group access
+    const checkedGroups: number[] = [];
+    let firstGroupInList: number = 0;
+    $(customerFormMap.customerGroupCheckboxes).each((index, input) => {
+      const groupId = Number(<string> $(input).val());
+
+      // We will keep track of all checked groups
+      if ($(input).is(':checked')) {
+        checkedGroups.push(groupId);
+      }
+      // And store ID of the first group regardless of it's status
+      if (index === 0) {
+        firstGroupInList = groupId;
+      }
+    });
+
+    // If no groups are selected, use the first group in the list, no matter
+    // if it's selected or not.
+    if (!checkedGroups.length) {
+      $(customerFormMap.defaultGroupSelect).val(firstGroupInList).trigger('change');
+      return;
+    }
+
+    // If the last change was a newly added group and it's the only one in the list,
+    // we will set it as the default group.
+    if (wasChecked && checkedGroups.length === 1) {
+      $(customerFormMap.defaultGroupSelect).val(checkedGroups[0]).trigger('change');
+      return;
+    }
+
+    // If the default group is not in the list anymore, select the first checked group.
+    if (!checkedGroups.includes(currentDefaultGroup)) {
+      $(customerFormMap.defaultGroupSelect).val(checkedGroups[0]).trigger('change');
+    }
+  }
+
+  private adaptFormForGuestCustomer(): void {
+    // Disable password input and clean it
+    $(customerFormMap.passwordInput)
+      .prop('disabled', 'disabled')
+      .prop('required', false)
+      .val('')
+      .removeClass('border-danger')
+      .removeClass('border-success')
+      .popover('dispose');
+
+    // Hide password feedback
+    $(customerFormMap.passwordStrengthFeedbackContainer).toggleClass('d-none', true);
+
+    // Check groups and disable all checkboxes except guest group
+    $(customerFormMap.customerGroupCheckboxes).each((index, input) => {
+      if (Number($(input).val()) === window.data.guestGroupId) {
+        $(input).prop('checked', 'checked');
+      } else {
+        $(input).prop('checked', false);
+      }
+      $(input).prop('disabled', 'disabled');
+    });
+
+    // Disable select all selector
+    $('.js-choice-table-select-all').prop('disabled', 'disabled');
+
+    // Set guest default group and disable the field
+    $(customerFormMap.defaultGroupSelect).prop('disabled', 'disabled').val(window.data.guestGroupId).trigger('change');
+
+    // Disable "Enabled" input and set it to yes
+    $(customerFormMap.isEnabledRadios).prop('disabled', 'disabled');
+    $(customerFormMap.isEnabledRadiosOff).prop('checked', false);
+    $(customerFormMap.isEnabledRadiosOn).prop('checked', 'checked');
+  }
+
+  private adaptFormForRegisteredCustomer(): void {
+    // Enable password input
+    $(customerFormMap.passwordInput)
+      .prop('disabled', false)
+      .prop('required', 'required');
+
+    // Check default groups and enable all checkboxes
+    $(customerFormMap.customerGroupCheckboxes).each((index, input) => {
+      if (window.data.defaultGroups.includes(Number($(input).val()))) {
+        $(input).prop('checked', 'checked');
+      } else {
+        $(input).prop('checked', false);
+      }
+      $(input).prop('disabled', false);
+    });
+
+    // Enable select all selector
+    $('.js-choice-table-select-all').prop('disabled', false);
+
+    // Set customer group as default group and enable the field
+    $(customerFormMap.defaultGroupSelect).prop('disabled', false)
+      .val(window.data.customerGroupId).trigger('change');
+
+    // Enable "Enabled" input and set it to yes
+    $(customerFormMap.isEnabledRadios).prop('disabled', false);
+    $(customerFormMap.isEnabledRadiosOff).prop('checked', false);
+    $(customerFormMap.isEnabledRadiosOn).prop('checked', 'checked');
+  }
+}

admin_o2w/themes/new-theme/js/pages/customer/customer-form-map.ts

@@ -0,0 +1,27 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+
+/**
+ * Defines all selectors that are used in customer add/edit form.
+ */
+export default {
+  passwordInput: '#customer_password',
+  passwordStrengthFeedbackContainer: '.password-strength-feedback',
+  requiredFieldsFormAlertOptin: '#customerRequiredFieldsAlertMessageOptin',
+  requiredFieldsFormCheckboxOptin: '#customerRequiredFieldsContainer input[type="checkbox"][value="optin"]',
+
+  // Customer group inputs
+  customerGroupCheckboxes: 'input[type="checkbox"][name="customer[group_ids][]"]',
+  defaultGroupSelect: '#customer_default_group_id',
+  defaultGroupSelectedOption: '#customer_default_group_id option:selected',
+
+  // Is guest switch selector
+  isGuestRadios: 'input[name="customer[is_guest]"]',
+
+  // Is enabled switch and it's radios
+  isEnabledRadios: 'input[name="customer[is_enabled]"]',
+  isEnabledRadiosOn: 'input[name="customer[is_enabled]"][value="1"]',
+  isEnabledRadiosOff: 'input[name="customer[is_enabled]"][value="0"]',
+};

admin_o2w/themes/new-theme/js/pages/customer/form.ts

@@ -0,0 +1,16 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+
+import CustomerForm from './CustomerForm';
+
+$(() => {
+  new CustomerForm();
+
+  window.prestashop.component.initComponents(
+    [
+      'ChoiceTable',
+    ],
+  );
+});

admin_o2w/themes/new-theme/js/pages/customer/index.ts

@@ -0,0 +1,120 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+
+import FormSubmitButton from '@components/form-submit-button';
+import LinkableItem from '@components/linkable-item';
+import DeleteCustomersBulkActionExtension
+  from '@components/grid/extension/action/bulk/customer/delete-customers-bulk-action-extension';
+import DeleteCustomerRowActionExtension
+  from '@components/grid/extension/action/row/customer/delete-customer-row-action-extension';
+import ShowcaseCard from '@components/showcase-card/showcase-card';
+import ShowcaseCardCloseExtension from '@components/showcase-card/extension/showcase-card-close-extension';
+import CustomerFormMap from '@pages/customer/customer-form-map';
+
+const {$} = window;
+
+$(() => {
+  const customerGrid = new window.prestashop.component.Grid('customer');
+
+  customerGrid.addExtension(new window.prestashop.component.GridExtensions.ReloadListExtension());
+  customerGrid.addExtension(new window.prestashop.component.GridExtensions.ExportToSqlManagerExtension());
+  customerGrid.addExtension(new window.prestashop.component.GridExtensions.FiltersResetExtension());
+  customerGrid.addExtension(new window.prestashop.component.GridExtensions.SortingExtension());
+  customerGrid.addExtension(new window.prestashop.component.GridExtensions.BulkActionCheckboxExtension());
+  customerGrid.addExtension(new window.prestashop.component.GridExtensions.SubmitBulkActionExtension());
+  customerGrid.addExtension(new window.prestashop.component.GridExtensions.SubmitGridActionExtension());
+  customerGrid.addExtension(new window.prestashop.component.GridExtensions.LinkRowActionExtension());
+  customerGrid.addExtension(new DeleteCustomersBulkActionExtension());
+  customerGrid.addExtension(new DeleteCustomerRowActionExtension());
+  customerGrid.addExtension(new window.prestashop.component.GridExtensions.FiltersSubmitButtonEnablerExtension());
+  customerGrid.addExtension(new window.prestashop.component.GridExtensions.AsyncToggleColumnExtension());
+
+  const customerDiscountsGrid = new window.prestashop.component.Grid('customer_discount');
+  customerDiscountsGrid.addExtension(new window.prestashop.component.GridExtensions.SubmitRowActionExtension());
+  customerDiscountsGrid.addExtension(new window.prestashop.component.GridExtensions.LinkRowActionExtension());
+
+  const customerAddressesGrid = new window.prestashop.component.Grid('customer_address');
+  customerAddressesGrid.addExtension(new window.prestashop.component.GridExtensions.SubmitRowActionExtension());
+  customerAddressesGrid.addExtension(new window.prestashop.component.GridExtensions.SortingExtension());
+  customerAddressesGrid.addExtension(new window.prestashop.component.GridExtensions.LinkRowActionExtension());
+
+  const customerOrdersGrid = new window.prestashop.component.Grid('customer_order');
+  customerOrdersGrid.addExtension(new window.prestashop.component.GridExtensions.SortingExtension());
+  customerOrdersGrid.addExtension(new window.prestashop.component.GridExtensions.SubmitRowActionExtension());
+  customerOrdersGrid.addExtension(new window.prestashop.component.GridExtensions.LinkRowActionExtension());
+
+  const customerCartsGrid = new window.prestashop.component.Grid('customer_cart');
+  customerCartsGrid.addExtension(new window.prestashop.component.GridExtensions.SortingExtension());
+  customerCartsGrid.addExtension(new window.prestashop.component.GridExtensions.SubmitRowActionExtension());
+  customerCartsGrid.addExtension(new window.prestashop.component.GridExtensions.LinkRowActionExtension());
+
+  const customerBoughtProductsGrid = new window.prestashop.component.Grid('customer_bought_product');
+  customerBoughtProductsGrid.addExtension(new window.prestashop.component.GridExtensions.SortingExtension());
+
+  const customerViewedProductsGrid = new window.prestashop.component.Grid('customer_viewed_product');
+  customerViewedProductsGrid.addExtension(new window.prestashop.component.GridExtensions.SortingExtension());
+
+  const showcaseCard = new ShowcaseCard('customersShowcaseCard');
+  showcaseCard.addExtension(new ShowcaseCardCloseExtension());
+
+  // in customer view page
+  // there are a lot of tables
+  // where you click any row
+  // and it redirects user to related page
+  new LinkableItem();
+
+  new FormSubmitButton();
+
+  // Scroll to the block
+  scrollToBlock();
+
+  // Required fields : Display alert for optin checkbox
+  $(CustomerFormMap.requiredFieldsFormCheckboxOptin).on('click', () => handleRequiredFieldsFormCheckboxOptin());
+
+  function scrollToBlock(): void {
+    const documentURL = new URL(document.URL);
+    const documentHash = documentURL.hash.slice(1);
+
+    if (documentHash === '') {
+      return;
+    }
+
+    const element = document.getElementById(documentHash);
+
+    if (!element) {
+      return;
+    }
+
+    // Fetch its position
+    let positionTop = 0;
+
+    if (element.offsetParent) {
+      let elementParent: HTMLElement|null = element;
+      do {
+        positionTop += elementParent.offsetTop;
+        elementParent = elementParent.offsetParent ? <HTMLElement> (elementParent.offsetParent) : null;
+      } while (elementParent !== null);
+    }
+
+    // Remove the header height
+    positionTop -= document.querySelector('#header_infos')?.getBoundingClientRect()?.height ?? 0;
+    // Remove the title bar height
+    positionTop -= document.querySelector('.header-toolbar')?.getBoundingClientRect()?.height ?? 0;
+    // Remove the  height of the header of the card
+    positionTop -= document.querySelector('.card-header')?.getBoundingClientRect()?.height ?? 0;
+    // Remove the margin-bottom of the card
+    positionTop -= 10;
+
+    // Scroll to the block
+    window.scroll(0, positionTop);
+  }
+
+  function handleRequiredFieldsFormCheckboxOptin(): void {
+    $(CustomerFormMap.requiredFieldsFormAlertOptin).toggleClass(
+      'd-none',
+      !$(CustomerFormMap.requiredFieldsFormCheckboxOptin).is(':checked'),
+    );
+  }
+});