wickes-css2 2.94.0-develop.1 → 2.94.0-develop.12

package/src/js/page/my-orders.js

@@ -0,0 +1,165 @@
+import {createEvent} from "./utils/create-event";
+import {appendLoader, showLoader, hideLoader} from "./utils/loader";
+
+var Wick = window.Wick || {};
+
+Wick.MyOrders = {
+  events: {
+    MONTHLY_VIEW_EVENT: 'MONTHLY_VIEW_EVENT',
+    SORT_BY_EVENT: 'SORT_BY_EVENT',
+    LOAD_MORE_EVENT: 'LOAD_MORE_EVENT',
+    CATEGORY_EVENT: 'CATEGORY_EVENT',
+  },
+  HIDDEN_CLASS_NAME: 'd-none',
+  el: {
+    $myOrders: $('.my-orders'),
+    calendar: '#calendarInputFlatpickr',
+    loader: '.loader-wrapper',
+    $sortOrders: $('#sort_orders'),
+    $chooseDate: $('.flatpickr-datepicker[choose-date]'),
+    $showYears: $('.flatpickr-datepicker[show-years]'),
+    $desktopTabs: $('.nav-orders .nav-orders__item .link'),
+    $mobileTabs: $('.nav-orders .account-nav__link'),
+    $loadMoreBtn: $('.btn-load-more'),
+    oderList: '.active-orders',
+    $activeOrderState: $('.nav-orders .nav-orders__item.active .link')
+  },
+  initialPageNumber: 0,
+  numberOfPagesOrders: $('#numberOfPagesOrders').val(),
+  loaderPayload: {
+    wrapper: 'body',
+    hidden: true,
+    modifier: 'basket-loader',
+  },
+  chooseDate: '',
+  showYears: '',
+  getChooseDate () {
+    const attrValue = Wick.MyOrders.el.$chooseDate.attr('choose-date');
+    if (attrValue) {
+      Wick.MyOrders.chooseDate = attrValue
+    }
+  },
+  requestToUpdateOrders (currentEvent, payload) {
+    return new Promise((resolve, reject) => {
+      const eventDetail = {resolve, reject};
+      const event = createEvent(currentEvent, payload, eventDetail);
+      window.dispatchEvent(event);
+    })
+      .then(({url}) => {
+        if (!url) {
+          return;
+        }
+
+        window.location.href = url;
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  },
+  loadMore () {
+    showLoader(Wick.MyOrders.el.loader);
+
+    return new Promise((resolve, reject) => {
+      const eventDetail = {resolve, reject};
+      const payload = {
+        currentPage: ++Wick.MyOrders.initialPageNumber,
+        sort: Wick.MyOrders.el.$sortOrders.val() || '',
+        chooseDate: Wick.MyOrders.chooseDate,
+        orderState: Wick.MyOrders.getCurrentOrderState() || ''
+      };
+      const event = createEvent(Wick.MyOrders.events.LOAD_MORE_EVENT, payload, eventDetail);
+      window.dispatchEvent(event);
+    })
+      .then(({innerHTML, callback}) => {
+        if (!innerHTML) {
+          return;
+        }
+
+        Wick.MyOrders.showNewOrders(innerHTML);
+        Wick.MyOrders.toggleLoadMoreBtn();
+
+        if (callback) {
+          callback()
+        }
+      })
+      .finally(() => {
+        hideLoader(Wick.MyOrders.el.loader);
+        Wick.MyOrders.el.$loadMoreBtn.blur();
+      })
+  },
+  showNewOrders (newProductsHtml) {
+    const $newProductsHtml = $(newProductsHtml);
+    $(Wick.MyOrders.el.oderList).append($newProductsHtml);
+  },
+  toggleLoadMoreBtn () {
+    if (Wick.MyOrders.initialPageNumber + 1 >= +Wick.MyOrders.numberOfPagesOrders) {
+      Wick.MyOrders.el.$loadMoreBtn.addClass(Wick.MyOrders.HIDDEN_CLASS_NAME);
+    }
+  },
+  getShowYears () {
+    const attrValue = Wick.MyOrders.el.$showYears.attr('show-years');
+    if (attrValue) {
+      Wick.MyOrders.showYears = attrValue
+    }
+  },
+  initializeFlatpickr () {
+    Wick.Flatpickr.init({
+      id: Wick.MyOrders.el.calendar,
+      currentYear: new Date().getFullYear(),
+      minYear: new Date().getFullYear() - Wick.MyOrders.showYears,
+      dateFormat: "F Y",
+      static: true,
+      chooseDate: Wick.MyOrders.chooseDate,
+      onChangeCallback: function (dateStr) {
+        if (!dateStr || isNaN(new Date(dateStr))) {
+          Wick.MyOrders.chooseDate = "";
+        } else {
+          Wick.MyOrders.chooseDate = dateStr;
+        }
+
+        Wick.MyOrders.requestToUpdateOrders(Wick.MyOrders.events.MONTHLY_VIEW_EVENT, { chooseDate: Wick.MyOrders.chooseDate });
+      },
+    });
+  },
+  initializeSortOrdersHandler () {
+    Wick.MyOrders.el.$sortOrders.on('change', function () {
+      const selectedValue = $(this).val();
+      Wick.MyOrders.requestToUpdateOrders(Wick.MyOrders.events.SORT_BY_EVENT, { sortBy: selectedValue });
+    });
+  },
+  registerTabClickHandler (tabsElement) {
+    tabsElement.on('click', function (e) {
+      e.preventDefault();
+      const tabId = $(this).attr('id');
+      const orderState = tabId ? { orderState: tabId } : '';
+      Wick.MyOrders.requestToUpdateOrders(Wick.MyOrders.events.CATEGORY_EVENT, orderState);
+    });
+  },
+  handleCategoryTabClick () {
+    Wick.MyOrders.registerTabClickHandler(Wick.MyOrders.el.$desktopTabs);
+    Wick.MyOrders.registerTabClickHandler(Wick.MyOrders.el.$mobileTabs);
+  },
+  getCurrentOrderState () {
+    if (Wick.MyOrders.el.$activeOrderState.length) {
+      return Wick.MyOrders.el.$activeOrderState.attr('id')
+    }
+  },
+  init () {
+    Wick.MyOrders.getShowYears();
+    Wick.MyOrders.getChooseDate();
+    Wick.MyOrders.initializeFlatpickr();
+    Wick.MyOrders.initializeSortOrdersHandler()
+    Wick.MyOrders.handleCategoryTabClick();
+    appendLoader(Wick.MyOrders.loaderPayload);
+    Wick.MyOrders.el.$loadMoreBtn.on('click', Wick.MyOrders.loadMore);
+    Wick.HandleAccordions.handleOutsideClick();
+  }
+}
+
+$(document).ready(function () {
+  if (!Wick.MyOrders.el.$myOrders.length) {
+    return;
+  }
+
+  Wick.MyOrders.init();
+});

package/src/js/page/personal-details.js

@@ -24,25 +24,40 @@ Wick.PersonalDetails = {
     formInvalidClass: 'form_invalid',
     notification: '.notification',
     fieldError: '.form-row.form-row_validation-error',
+    changePasswordPopup: '#change-password-popup',
+    globalMessage: '.globalMessages',
   },
-  initialFormState: {},
   errorMessages: {
     errorFirstName: 'Please enter your first name',
     errorSurname: 'Please enter your surname',
-    errorEmail: 'Please enter you email',
-  },
-  fieldToLabelMap: {
-    titleCode: 'Title',
-    firstName: 'First name',
-    lastName: 'Surname',
-    email: 'Email',
-    tradeType: 'How would you describe yourself or your main trade',
+    errorEmail: 'Please enter your email address',
   },
   defaultNotificationConfig: {
-    container: '.globalMessages .col-12',
+    container: '.personal-details .globalMessages',
     closeBtn: true,
     noScrolling: true,
   },
+  isTradeTypeLabel() {
+    return $(Wick.PersonalDetails.el.userForm).find('label:contains("Trade type")').length;
+  },
+  fieldToLabelMap(name) {
+    let currentTradeType = ''
+    if (name === 'tradeType') {
+      currentTradeType = Wick.PersonalDetails.isTradeTypeLabel()
+        ? 'Trade type'
+        : 'How would you describe yourself or your main trade';
+    }
+
+    const fieldMap = {
+      titleCode: 'Title',
+      firstName: 'First name',
+      lastName: 'Surname',
+      email: 'Email address',
+      tradeType: currentTradeType,
+    };
+
+    return fieldMap[name] || name;
+  },
   getFieldsConfigurations: function () {
     return [
       {
@@ -111,11 +126,11 @@ Wick.PersonalDetails = {
           text: response.globalMessage.message,
           type: 'success',
         });
-        Wick.PersonalDetails.initialFormState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm);
-        Wick.PersonalDetails.updateUserInformationSection(Wick.PersonalDetails.initialFormState);
-        Wick.PersonalDetails.updateFormFields(Wick.PersonalDetails.initialFormState);
+        Wick.LeaveEvent.initialFormState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm);
+        Wick.PersonalDetails.updateUserInformationSection(Wick.LeaveEvent.initialFormState);
+        Wick.PersonalDetails.updateFormFields(Wick.LeaveEvent.initialFormState);
         Wick.PersonalDetails.hideForm();
-        Wick.LeaveEvent.removeLeaveEvent();
+        Wick.PersonalDetails.scrollToElement(Wick.PersonalDetails.el.globalMessage);
       })
       .catch((error) => {
         Wick.Notification.show({
@@ -124,11 +139,12 @@ Wick.PersonalDetails = {
           type: 'error',
         });
         Wick.PersonalDetails.handleFieldErrors(error);
+        Wick.PersonalDetails.scrollToElement(Wick.PersonalDetails.el.globalMessage);
       });
   },
-  handleFieldErrors(fieldErrors) {
-    if (fieldErrors && fieldErrors.length) {
-      fieldErrors.forEach((fieldError) => {
+  handleFieldErrors(error) {
+    if (error.fieldErrors && error.fieldErrors.length) {
+      error.fieldErrors.forEach((fieldError) => {
         const field = `#${fieldError.field}`;
         updateStylingError(field, false, fieldError.message);
       });
@@ -136,6 +152,15 @@ Wick.PersonalDetails = {
   },
   submitForm(event) {
     event.preventDefault();
+    Wick.PersonalDetails.trimAndRewriteInputs(Wick.PersonalDetails.el.userForm);
+
+    if (!Wick.PersonalDetails.hasUnsavedChanges()) {
+      Wick.PersonalDetails.hideForm();
+      $(Wick.PersonalDetails.el.notification).remove();
+      Wick.PersonalDetails.scrollToElement(Wick.PersonalDetails.el.globalMessage);
+      return;
+    }
+
     if (Wick.PersonalDetails.validateForm()) {
       Wick.PersonalDetails.requestToUpdateForm();
     } else {
@@ -144,6 +169,7 @@ Wick.PersonalDetails = {
         text: 'Please correct the errors below.',
         type: 'error',
       });
+      Wick.PersonalDetails.scrollToElement(Wick.PersonalDetails.el.globalMessage);
     }
   },
   updateUserInformationSection(personalDetails) {
@@ -153,27 +179,36 @@ Wick.PersonalDetails = {
 
     $userInformationList.empty();
 
-    personalDetails.forEach(({ name, value }) => {
-      const label = Wick.PersonalDetails.fieldToLabelMap[name] || name;
-
+    personalDetails.forEach(({ name, value, text }) => {
+      const label = Wick.PersonalDetails.fieldToLabelMap(name);
+      const textField = text || value
       $userInformationList.append(
         userInformationField({
           label,
-          value,
+          textField,
         })
       );
     });
+
+    Wick.PersonalDetails.hideParentListItemIfLabelExists('CSRFToken');
   },
   updateFormFields(personalDetails) {
-    personalDetails.forEach(({ name, value }) => {
+    personalDetails.forEach(({ name, value, text }) => {
       const field = document.querySelector(`#${name}`);
       if (field) {
-        field.value = value || '';
-        field.setAttribute('value', value || '');
-
-        if (field.tagName === 'SELECT' || field.tagName === 'INPUT') {
-          field.value = value || '';
-          field.setAttribute('value', value || '');
+        if (field.tagName === 'INPUT') {
+          field.value = text || value || '';
+          field.setAttribute('value', text || value || '');
+        } else {
+          const options = field.querySelectorAll('option');
+          options.forEach(option => {
+            if (option.textContent.trim() === value || option.value === value) {
+              option.setAttribute('selected', 'selected');
+              field.value = option.value;
+            } else {
+              option.removeAttribute('selected');
+            }
+          });
         }
       }
     });
@@ -182,18 +217,21 @@ Wick.PersonalDetails = {
     Wick.PersonalDetails.hideForm();
     $(Wick.PersonalDetails.el.notification).remove();
     $(Wick.LeaveEvent.el.leavePopup).modal('hide');
-    Wick.PersonalDetails.updateFormFields(Wick.PersonalDetails.initialFormState);
+    Wick.PersonalDetails.updateFormFields(Wick.LeaveEvent.initialFormState);
+  },
+  hasUnsavedChanges() {
+    const currentState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm);
+
+    return !_.isEqual(currentState, Wick.LeaveEvent.initialFormState);
   },
   changePasswordHandler(event) {
     const changePasswordUrl = $(Wick.PersonalDetails.el.btnChangePassword).attr('href');
-    const currentState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm);
-    const isDifferent = !_.isEqual(currentState, Wick.PersonalDetails.initialFormState);
 
-    if (isDifferent) {
+    if (Wick.PersonalDetails.hasUnsavedChanges()) {
       event.preventDefault();
-      $(Wick.LeaveEvent.el.leavePopup).modal('show');
+      $(Wick.PersonalDetails.el.changePasswordPopup).modal('show');
       Wick.LeaveEvent.proceedBrowserLeave = true;
-      $(Wick.LeaveEvent.el.leavePopup).find(Wick.PersonalDetails.el.btnContinue).off('click').on('click', function () {
+      $(Wick.PersonalDetails.el.changePasswordPopup).find(Wick.PersonalDetails.el.btnContinue).off('click').on('click', function () {
         Wick.LeaveEvent.removeLeaveEvent();
         $(Wick.LeaveEvent.el.leavePopup).modal('hide');
         window.location.href = changePasswordUrl;
@@ -202,9 +240,40 @@ Wick.PersonalDetails = {
       window.location.href = changePasswordUrl;
     }
   },
+  hideParentListItemIfLabelExists(labelText) {
+    const label = $(Wick.PersonalDetails.el.userInformationList).find(`label:contains("${labelText}")`);
+
+    if (label.length > 0) {
+      label.closest('li').hide();
+    }
+  },
+  scrollToElement(element) {
+    const globalMessage = $(element);
+
+    if (globalMessage.length > 0) {
+      $('html, body').animate({
+        scrollTop: globalMessage.offset().top - 20
+      }, 300);
+    }
+  },
+  trimAndRewriteInputs(formSelector) {
+    const $form = $(formSelector);
+
+    if (!$form.length) {
+      return;
+    }
+
+    $form.find('input[type="text"], input[type="email"]').each(function () {
+      $(this).val($.trim($(this).val()));
+    });
+  },
   init: function () {
-    Wick.LeaveEvent.bindEvent(Wick.PersonalDetails.el.userForm, Wick.PersonalDetails.el.btnCancel, Wick.PersonalDetails.el.btnContinue, Wick.PersonalDetails.resetFormToInitialState);
-    Wick.PersonalDetails.initialFormState = Wick.LeaveEvent.getState(Wick.PersonalDetails.el.userForm)
+    Wick.LeaveEvent.bindEvent(
+      Wick.PersonalDetails.el.userForm,
+      Wick.PersonalDetails.el.btnCancel,
+      Wick.PersonalDetails.el.btnContinue,
+      Wick.PersonalDetails.resetFormToInitialState
+    );
 
     $(Wick.PersonalDetails.el.btnEdit).on('click', Wick.PersonalDetails.showForm);
     $(Wick.PersonalDetails.el.btnSave).on('click', Wick.PersonalDetails.submitForm);

package/src/js/page/plp-load-more.js

@@ -38,6 +38,7 @@ Wick.PLPLoadMore = {
 
         Wick.PLPLoadMore.showNewCards(response);
         Wick.PLPLoadMore.toggleLoadMoreBtn();
+        Wick.VatToggle.reapplyDisplayClass();
       })
       .finally(() => {
         hideLoader(Wick.PLPLoadMore.el.loader);

package/src/page_checkout_payment-details_with-card-loader.html

@@ -0,0 +1,56 @@
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details" isAsideSticky="true"}}
+{{#content "steps"}}
+{{> steps-three-steps active-step-index="3" }}
+{{/content}}
+
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
+<link type="text/css" rel="stylesheet" href="./css/pages/page_checkout_delivery-new.css">
+<link type="text/css" rel="stylesheet" href="./css/components/payment-details-BPS-form.css">
+<link type="text/css" rel="stylesheet" href="./css/components/checkout-payment-details-v2.css">
+{{/content}}
+
+{{#content "aside"}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
+{{/content}}
+
+
+{{#content "main"}}
+<div class="delivery-block">
+    <h3 class="delivery-block__heading">Delivery Information</h3>
+    <div class="delivery-block__wrapper">
+        {{#with checkoutOrder.deliveryPayments.[0]}}
+        <div class="checkout-order">
+            {{> checkout-order-block}}
+        </div>
+        {{/with}}
+    </div>
+</div>
+
+<div class="click-collect-block">
+    <h3 class="click-collect-block__heading">Click & Collect</h3>
+    <div class="click-collect-block__wrapper">
+        {{#with checkoutOrder.clickCollectDeliveryAddress.[0]}}
+        <div class="checkout-order">
+            {{> checkout-order-block}}
+        </div>
+        {{/with}}
+    </div>
+</div>
+
+<div class="billing-payment-block">
+    <h3 class="billing-payment-block__heading">Billing & Payment</h3>
+    <div class="billing-payment-block__wrapper">
+        {{> checkout-payment-details-v2 }}
+    </div>
+</div>
+
+{{/content}}
+
+{{#content "foot" mode="append"}}
+<script defer src="./js/page/checkout-confirmation-new.js"></script>
+<script defer src="./js/page/checkout-payment-details.js"></script>
+{{> checkout-terms-and-conditions-modal }}
+{{> payment-loader }}
+{{/content}}
+{{/extend}}

package/src/page_default-store-page-empty.html

@@ -0,0 +1,48 @@
+{{#extend "my-account-v2" dataBreadcrumbs=default-store.breadcrumbs pageClass="page_my-account_new" title="Default Store Page" pageMyAcc=true myAccV2=true isLoggedIn=true mainClass="default-store"}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/page_default-store.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=default-store.menu
+          active-index=6
+          page-name=default-store.menu.[6].title
+          }}
+    </div>
+  </div>
+</div>
+
+<div class="container default-store__wrap">
+  <div class="row">
+    <div class="col-12 d-md-none">
+      <h1 class="default-store__title">{{default-store.title}}</h1>
+    </div>
+    <div class="col-12 col-md-6 default-store__search">
+      <div class="default-store__header">
+        <h1 class="default-store__title d-none d-md-block">{{default-store.title}}</h1>
+        <p class="default-store__subtitle">{{default-store.subtitle}}</p>
+      </div>
+      {{> default-store/store-form
+          default-store.searchField
+      }}
+      {{> default-store/store-unavailable
+          default-store.unavailable
+      }}
+      {{> default-store/list-of-store
+          style="display: none;"
+      }}
+    </div>
+    <div class="col-12 col-md-6">
+    </div>
+  </div>
+</div>
+
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+<script defer src="./js/default-store.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_default-store-page.html

@@ -0,0 +1,55 @@
+{{#extend "my-account-v2" dataBreadcrumbs=default-store.breadcrumbs pageClass="page_my-account_new" title="Default Store Page" pageMyAcc=true myAccV2=true isLoggedIn=true mainClass="default-store"}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/page_default-store.css">
+{{/content}}
+{{#content "notification"}}
+  <div class="globalMessages">
+    <div class="container">
+      {{> notifications notification-page.success withCloseBtn="true"}}
+    </div>
+  </div>
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+      menu=default-store.menu
+      active-index=6
+      page-name=default-store.menu.[6].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container default-store__wrap">
+  <div class="row">
+    <div class="col-12 d-md-none">
+      <h1 class="default-store__title">{{default-store.title}}</h1>
+    </div>
+    <div class="col-12 col-md-6 default-store__search">
+      <div class="default-store__header">
+        <h1 class="default-store__title d-none d-md-block">{{default-store.title}}</h1>
+        <p class="default-store__subtitle default-store__subtitle--change">{{default-store.subtitleChange}}</p>
+      </div>
+      {{> default-store/store-form
+          default-store.searchField
+      }}
+      {{> default-store/list-of-store
+          style="display: none;"
+      }}
+    </div>
+    <div class="col-12 col-md-6">
+      {{> default-store/current-store
+          default-store.currentStore
+      }}
+    </div>
+  </div>
+</div>
+
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+<script defer src="./js/default-store.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_my-orders-empty.html

@@ -0,0 +1,49 @@
+{{#extend
+"my-account-v2"
+dataBreadcrumbs=my_orders.breadcrumbs
+pageClass="page_my-account_new"
+title="My Orders"
+pageMyAcc=true
+myAccV2=true
+isLoggedIn=true
+mainClass="my-orders"
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/page_my-orders.css">
+{{/content}}
+{{#content "notification"}}
+<div class="globalMessages">
+</div>
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+      menu=default-store.menu
+      active-index=1
+      page-name=my_orders.menu.[1].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container my-orders__wrap">
+  <div class="row">
+    <div class="col-12">
+      <div class="my-orders__header">
+        <h1 class="my-orders__title">My Orders</h1>
+      </div>
+      {{> my-account/empty-orders
+          title=my_orders.emptyOrders.title
+          image=my_orders.emptyOrdersImage
+          btnText=my_orders.emptyOrders.btnTitle
+      }}
+    </div>
+  </div>
+</div>
+
+{{/content}}
+{{#content "foot" mode="append"}}
+{{/content}}
+{{/extend}}

package/src/page_my-orders.html

@@ -0,0 +1,64 @@
+{{#extend
+  "my-account-v2"
+  dataBreadcrumbs=my_orders.breadcrumbs
+  pageClass="page_my-account_new"
+  title="My Orders"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="my-orders"
+}}
+{{#content "head" mode="append"}}
+<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css" rel="stylesheet">
+<link type="text/css" rel="stylesheet" href="./css/pages/page_my-orders.css">
+{{/content}}
+{{#content "notification"}}
+<div class="globalMessages">
+</div>
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+      menu=default-store.menu
+      active-index=1
+      page-name=my_orders.menu.[1].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container my-orders__wrap">
+  <div class="row">
+    <div class="col-12">
+      <div class="my-orders__header">
+        <h1 class="my-orders__title">My Orders</h1>
+        <div class="my-orders__sorts">
+          {{> flatpickr-calendar
+              textTooltip="Filter by year and month the order was placed"
+          }}
+          {{> my-account/sort-by }}
+        </div>
+        {{> my-account/orders-nav
+            nav=my_orders.nav
+            category=my_orders.nav.[0].title
+            }}
+      </div>
+      {{> my-account/active-orders/list-orders
+          title=false
+          orders=my_orders.orderList
+          isLoadMore=true
+          }}
+    </div>
+  </div>
+</div>
+
+{{/content}}
+{{#content "foot" mode="append"}}
+<script src="https://cdn.jsdelivr.net/npm/flatpickr" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/index.js" defer></script>
+<script src="./js/my-orders.min.js" defer></script>
+{{/content}}
+{{/extend}}