@lancom/shared 0.0.394 → 0.0.396

package/assets/js/api/index.js

@@ -41,6 +41,9 @@ const api = {
   fetchCustomerCoupons(customer, shop) {
     return _get(`shop/${shop}/customer/${customer._id}/coupons`);
   },
+  fetchChildrenCategories(category, params) {
+    return _get(`category/${category}/children`, params);
+  },
   searchProducts(shop, text, save) {
     return _get(`shop/${shop}/products/search`, { text, save });
   },

package/assets/js/utils/gtm.js

@@ -47,7 +47,7 @@ const gtm = {
       currency: currency?.isoCode || 'AUD',
       items: (products || []).map(product => {
         return {
-          id: product.SKU, 
+          id: product.SKU,
           item_name: product.name,
           google_business_vertical: 'retail',
           price: product.minPrice
@@ -111,10 +111,10 @@ const gtm = {
 
     const { shippingAddress } = order;
     if (shippingAddress) {
-      const { fullName, email, phone, city, state, postcode, country, addressLine1, addressLine2 } = shippingAddress;
+      const { fullName, email, phone, phoneE164, city, state, postcode, country, addressLine1, addressLine2 } = shippingAddress;
       const [first_name, last_name] = fullName.split(' ');
       event.email = email;
-      event.phone_number= phone;
+      event.phone_number = phoneE164 || phone;
       event.address = {
         first_name,
         last_name,

package/assets/js/utils/phone.js

@@ -0,0 +1,134 @@
+/**
+ * @typedef {Object} PhoneNumberValidationResult
+ * @property {string} e164Number
+ * @property {boolean} isValid
+ * @property {boolean} supportsSms
+ */
+
+/**
+ * Transforms a phone number to E.164 format if valid for the specified country.
+ * @param {string|null|undefined} originalInput
+ * @param {string} country
+ * @param {string} [postcode]
+ * @returns {PhoneNumberValidationResult}
+ */
+export function formatNumberToE164(originalInput, country) {
+  const defaultFailureResult = {
+    e164Number: '',
+    isValid: false,
+    supportsSms: false
+  };
+
+  if (originalInput === null || originalInput === undefined) {
+    return defaultFailureResult;
+  }
+
+  const countryCodeMap = {
+    AU: '+61',
+  };
+
+  const normalizedCountry = country.toUpperCase();
+  const dialingCode = countryCodeMap[normalizedCountry];
+
+  let cleanedInput = originalInput.trim().replace(/\s+/g, '').replace(/[-()]/g, '');
+
+  if (cleanedInput === '') {
+    return defaultFailureResult;
+  }
+
+  if (normalizedCountry !== 'AU' || !dialingCode) {
+    return defaultFailureResult;
+  }
+
+  if (
+    cleanedInput.startsWith('1300') ||
+    (cleanedInput.startsWith('13') && cleanedInput.length > 2 && cleanedInput.length <= 6) ||
+    cleanedInput.startsWith('1800') ||
+    (cleanedInput.startsWith('180') && cleanedInput.length > 3 && cleanedInput.length <= 7)
+  ) {
+    return defaultFailureResult;
+  }
+
+  if (
+    cleanedInput.startsWith(dialingCode.substring(1)) &&
+    cleanedInput.length === dialingCode.length - 1 + 9
+  ) {
+    const numPartAfterCountryCode = cleanedInput.substring(dialingCode.length - 1);
+    const firstDigitNumPart = numPartAfterCountryCode.charAt(0);
+    if (
+      /^\d+$/.test(numPartAfterCountryCode) &&
+      numPartAfterCountryCode.length === 9 &&
+      ['2', '3', '4', '7', '8'].includes(firstDigitNumPart)
+    ) {
+      return {
+        e164Number: dialingCode + numPartAfterCountryCode,
+        isValid: true,
+        supportsSms: firstDigitNumPart === '4',
+      };
+    }
+    return defaultFailureResult;
+  }
+
+  if (cleanedInput.startsWith(dialingCode)) {
+    let numPartAfterDialingCodeRaw = cleanedInput.substring(dialingCode.length);
+    if (numPartAfterDialingCodeRaw.startsWith('0')) {
+      numPartAfterDialingCodeRaw = numPartAfterDialingCodeRaw.substring(1);
+    }
+    const firstDigitNumPartFinal = numPartAfterDialingCodeRaw.charAt(0);
+    if (
+      /^\d+$/.test(numPartAfterDialingCodeRaw) &&
+      numPartAfterDialingCodeRaw.length === 9 &&
+      ['2', '3', '4', '7', '8'].includes(firstDigitNumPartFinal)
+    ) {
+      return {
+        e164Number: dialingCode + numPartAfterDialingCodeRaw,
+        isValid: true,
+        supportsSms: firstDigitNumPartFinal === '4',
+      };
+    }
+    return defaultFailureResult;
+  }
+
+  if (cleanedInput.startsWith('04')) {
+    const mobilePart = cleanedInput.substring(2);
+    if (/^\d+$/.test(mobilePart) && mobilePart.length === 8) {
+      return {
+        e164Number: dialingCode + '4' + mobilePart,
+        isValid: true,
+        supportsSms: true,
+      };
+    }
+    return defaultFailureResult;
+  }
+
+  if (cleanedInput.startsWith('0') && cleanedInput.length === 10) {
+    const areaCode = cleanedInput.charAt(1);
+    const numPart = cleanedInput.substring(2);
+    if (
+      ['2', '3', '7', '8'].includes(areaCode) &&
+      /^\d+$/.test(numPart) &&
+      numPart.length === 8
+    ) {
+      return {
+        e164Number: dialingCode + areaCode + numPart,
+        isValid: true,
+        supportsSms: false,
+      };
+    }
+    return defaultFailureResult;
+  }
+
+  if (cleanedInput.length === 9 && /^\d+$/.test(cleanedInput)) {
+    const firstDigit = cleanedInput.charAt(0);
+    if (['2', '3', '4', '7', '8'].includes(firstDigit)) {
+      return {
+        e164Number: dialingCode + cleanedInput,
+        isValid: true,
+        supportsSms: firstDigit === '4',
+      };
+    }
+    return defaultFailureResult;
+  }
+
+  return defaultFailureResult;
+}

package/assets/js/utils/product.js

@@ -187,7 +187,7 @@ export function generateProductLink(product, color, toEditor = false, size) {
     const categoryPath = generateCategoryPath(product.category);
     if (categoryPath) {
       const categoryBaseLink = `/c/${categoryPath}/${product.alias}/${product.SKU.toLowerCase()}`;
-      link = toEditor ? `${categoryBaseLink}.html` : `${categoryBaseLink}/info.html`;
+      link = toEditor ? `${categoryBaseLink}.html` : `${categoryBaseLink}.html`;
     }
   }
   const query = [];

package/components/asides/contact_us/contact-us.vue

@@ -69,7 +69,7 @@
       <phone-input
         :labelless="false"
         :required="requiredPhone"
-        v-model="form.phone" />
+        :item="form" />
       <validation-provider
         v-slot="{ errors }"
         tag="div"

package/components/asides/offer_screen_printing/offer-screen-printing.vue

@@ -68,7 +68,7 @@
       </validation-provider>
       <phone-input
         :labelless="false"
-        v-model="form.phone" />
+        :item="form" />
       <validation-provider
         v-slot="{ errors }"
         tag="div"

package/components/checkout/order/address-form/address-form.vue

@@ -93,7 +93,7 @@
             {{ errors[0] }}
           </span>
         </validation-provider>
-        <phone-input v-model="address.phone" class="form-col col-half" />
+        <phone-input :item="address" class="form-col col-half" />
       </div>
       <validation-provider
         v-slot="{ errors }"

package/components/checkout/order/order-payment-information/order-payment-information.vue

@@ -42,6 +42,14 @@
               Apple Pay
             </span>
           </label>
+          <label
+            class="form-label OrderPaymentInformation__checkbox"
+            @click="updatePaymentType('paypal')">
+            <checked-icon :checked="paymentMethod === 'paypal'" />
+            <span class="lc_regular12 lc__grey1 OrderPaymentInformation__checkbox-label">
+              Paypal
+            </span>
+          </label>
         </div>
         <div
           v-if="paymentMethod === 'deposit'"
@@ -80,6 +88,7 @@
             :key="paymentMethod"
             :google="paymentMethod === 'google'"
             :apple="paymentMethod === 'apple'"
+            :paypal="paymentMethod === 'paypal'"
             :amount="cartPricing.totalPrice"
             :order="orderData"
             @inited="initedCard">

package/components/common/payment/payment_card/payment-card.vue

@@ -17,6 +17,7 @@ import { mapGetters } from 'vuex';
 export default {
   name: 'PaymentCard',
   components: {
+    Paypal: () => import('./paypal/paypal'),
     Applepay: () => import('./applepay/applepay'),
     Googlepay: () => import('./googlepay/googlepay'),
     Pinpayment: () => import('./pinpayment/pinpayment'),
@@ -36,6 +37,9 @@ export default {
     },
     apple: {
       type: Boolean
+    },
+    paypal: {
+      type: Boolean
     }
   },
   computed: {
@@ -47,6 +51,9 @@ export default {
       if (this.apple) {
         return 'applepay';
       }
+      if (this.paypal) {
+        return 'paypal';
+      }
       return this.payment?.type || 'stripe-payment';
     }
   },

package/components/common/payment/payment_card/paypal/paypal.scss

@@ -0,0 +1,8 @@
+@import "@/assets/scss/ui_kit";
+@import "@/assets/scss/variables";
+
+.Payment {
+  &__wrapper {
+    font-weight: bold;
+  }
+}

package/components/common/payment/payment_card/paypal/paypal.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="Payment__wrapper">
+    Temporarily Not Available
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Paypal'
+};
+</script>
+
+
+<style lang="scss" scoped>
+@import 'paypal.scss';
+</style>

package/components/common/phone_input/phone-input.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <div>{{ item }}</div>
     <div class="form-row">
       <label
         v-if="labelless"
@@ -63,6 +64,7 @@
 
 <script>
 import Multiselect from 'vue-multiselect';
+import { formatNumberToE164 } from '@lancom/shared/assets/js/utils/phone';
 
 export default {
   name: 'PhoneInput',
@@ -73,8 +75,9 @@ export default {
     codeCountry: {
       type: Object
     },
-    value: {
-      type: String
+    item: {
+      type: Object,
+      required: true
     },
     labelText: {
       type: String
@@ -86,6 +89,14 @@ export default {
       type: String,
       default: 'Phone'
     },
+    phoneProperty: {
+      type: String,
+      default: 'phone'
+    },
+    phoneE164Property: {
+      type: String,
+      default: 'phoneE164'
+    },
     copyFrom: {
       type: Boolean,
       default: false
@@ -120,16 +131,26 @@ export default {
     },
     model: {
       get() {
-        return this.value; // (this.value || '').replace(/^\+[0-9]{2}/, '');
+        return this.item[this.phoneProperty];
       },
       set(phone) {
-        // if (this.code === '+61' && phone?.length === 10 && phone[0] === '0') {
-        //   phone = phone.slice(1);
-        // }
-        // this.$emit('input', `${this.code}${phone}`);
+        this.$set(this.item, this.phoneProperty, phone);
+        this.updatePhoneE164();
+
         this.$emit('input', phone);
       }
     }
+  },
+  mounted() {
+    this.updatePhoneE164();
+  },
+  methods: {
+    updatePhoneE164() {
+      const code = this.codeCountry?.isoCode || this.codeCountry || 'AU';
+      const result = formatNumberToE164(this.model, code);
+      const e164Number = result?.isValid ? result.e164Number : null;
+      this.$set(this.item, this.phoneE164Property, e164Number);
+    }
   }
 };
 </script>

package/components/customer/customer_form/customer-form.vue

@@ -133,7 +133,7 @@
         <div class="row">
           <div class="col-6">
             <phone-input
-              v-model="customer.phone"
+              :item="customer"
               label-text="Phone (optional)" />
           </div>
           <div class="col-6">

package/components/modals/failed_conversion_modal/failed-conversion-modal.vue

@@ -52,7 +52,7 @@
             </span>
           </validation-provider>
           <phone-input
-            v-model="form.phone"
+            :item="form"
             class="form-col col-half" />
         </div>
         <validation-provider

package/components/modals/order_modal/order-modal.vue

@@ -41,7 +41,7 @@
             </span>
           </validation-provider>
           <phone-input
-            v-model="form.phone"
+            :item="form"
             class="form-col col-half" />
         </div>
         <validation-provider

package/components/products/children_categories/children-categories.scss

@@ -0,0 +1,65 @@
+@import "@/assets/scss/variables";
+
+.ChildrenCategories {
+  &__wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 20px;
+    @media (max-width: $bp-small-max) {
+      justify-content: center;
+    }
+  }
+}
+
+.CategoryCard {
+  width: 270px;
+  margin: 0 0 15px 15px;
+  position: relative;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: white;
+  box-shadow: 0px 0px 0px rgba(75, 75, 75, 0.2);
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0px 5px 15px rgba(75, 75, 75, 0.2);
+  }
+
+  &__link {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  &__image-wrapper {
+    width: 100%;
+    height: 300px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+
+  &__name {
+    padding: 15px;
+    font-size: 16px;
+    font-weight: 600;
+    color: $grey_1;
+    text-align: center;
+    background-color: white;
+  }
+
+  @media (max-width: $bp-extra-small-max) {
+    margin: 0 auto 25px auto;
+  }
+} 

package/components/products/children_categories/children-categories.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="ChildrenCategories__wrapper">
+    <div
+      v-for="category in childrenCategories"
+      :key="category._id"
+      class="CategoryCard">
+      <a
+        :href="generateProductsLink($route, { category }, true)"
+        class="CategoryCard__link">
+        <div class="CategoryCard__image-wrapper">
+          <img
+            v-if="category.image"
+            :src="category.image.medium"
+            :alt="category.name"
+            class="CategoryCard__image" />
+        </div>
+        <div class="CategoryCard__name">
+          {{ category.name }}
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+  
+<script>
+import { mapGetters } from 'vuex';
+import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
+  
+export default {
+  name: 'ChildrenCategories',
+  computed: {
+    ...mapGetters('products', ['childrenCategories'])
+  },
+  methods: {
+    generateProductsLink
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'children-categories';
+</style>
+  

package/components/quotes/quote_request/quote-request.vue

@@ -37,7 +37,7 @@
             </validation-provider>
             <phone-input
               class="form-row"
-              v-model="quote.address.phone" />
+              :item="quote.address" />
             <validation-provider
               v-slot="{ errors }"
               tag="div"
@@ -427,7 +427,7 @@ export default {
                     }))
                 };
               })
-          } 
+          }
         };
         const body = {
           recaptchaToken,

package/feeds/google-shopping.js

@@ -1,6 +1,6 @@
 async function googleLocalShoppingFeed(axios, config, availableStores, country) {
   const result = await googleShoppingFeed(axios, config, availableStores, country, false, { allowSameDayDelivery: true });
-  
+
   const fields = [
     'g:availability',
     'g:id',
@@ -59,7 +59,7 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
               const description = `${product.description || product.fabricInfoShort || product.name || ''}`
                 .replace(/ /g, ' ')
                 .replace(/·/, '·');
-                
+
               let link = `https://${config.HOST_NAME}${generateProductLink(product, sp.color, isEditor)}`;
               link = link.includes('?') ? `${link}&size=${sp.size?.shortName}` : `${link}?size=${sp.size?.shortName}`
               link = link.includes('?') ? `${link}&price=IT` : `${link}?price=IT`
@@ -186,7 +186,7 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
         ];
       }, [])
   };
-  
+
   return {
     _declaration: { _attributes: { version: "1.0", encoding: "utf-8" } },
     rss: {
@@ -221,7 +221,7 @@ function generateProductLink(product, color, toEditor) {
     const categoryPath = generateCategoryPath(product.category);
     if (categoryPath) {
       const categoryBaseLink = `/c/${categoryPath}/${product.alias}/${product.SKU.toLowerCase()}`;
-      link = toEditor ? `${categoryBaseLink}.html` : `${categoryBaseLink}/info.html`;
+      link = toEditor ? `${categoryBaseLink}.html` : `${categoryBaseLink}.html`;
     }
   }
   return `${link}${color ? `?color=${color.alias || color}` : ''}`;

package/layouts/products.vue

@@ -20,12 +20,16 @@
             <h1 class="Products__name">
               {{ routeName }}
             </h1>
-            <div class="Products__filters">
+            <div
+              v-if="!visiblChildrenCategories"
+              class="Products__filters">
               <products-filters @open="openAside" />
             </div>
           </div>
           <div class="Products__content">
-            <div class="Products__aside">
+            <div
+              v-if="!visiblChildrenCategories"
+              class="Products__aside">
               <breakpoint
                 name="md"
                 mode="up">
@@ -33,7 +37,10 @@
               </breakpoint>
             </div>
             <div class="Products__list">
-              <products-catalog class="Products__catalog" />
+              <children-categories v-if="visiblChildrenCategories" />
+              <products-catalog
+                v-else
+                class="Products__catalog" />
             </div>
           </div>
           <div
@@ -57,21 +64,22 @@
   
   <script>
   import debounce from 'lodash.debounce';
+  import LazyHydrate from 'vue-lazy-hydration';
   import { mapActions, mapGetters, mapMutations } from 'vuex';
   import gtm from '@lancom/shared/assets/js/utils/gtm';
   import metaInfo from '@lancom/shared/mixins/meta-info';
   import { generateProductsLink, generateProductLink } from '@lancom/shared/assets/js/utils/product';
   import { getProductLargeCover, getProductMediumCover } from '@lancom/shared/assets/js/utils/colors';
-  import LazyHydrate from 'vue-lazy-hydration';
-  import TheNavbar from '@/components/the_navbar/the-navbar';
   import TheChangesSavedIndicator from '@lancom/shared/components/the_changes_saved_indicator/the-changes-saved-indicator';
   import Breadcrumbs from '@lancom/shared/components/common/breadcrumbs/breadcrumbs';
-  import TheFooter from '@/components/the_footer/the-footer';
+  import StaticPage from '@lancom/shared/components/static_page/static-page';
   import TheAside from '@lancom/shared/components/the_aside/the-aside';
-  import ProductsAside from '@/components/products/products_aside/products-aside';
   import ProductsFilters from '@lancom/shared/components/products/products_filters/products-filters';
+  import ChildrenCategories from '@lancom/shared/components/products/children_categories/children-categories';
+  import ProductsAside from '@/components/products/products_aside/products-aside';
+  import TheNavbar from '@/components/the_navbar/the-navbar';
+  import TheFooter from '@/components/the_footer/the-footer';
   import ProductsCatalog from '@/components/products/products_catalog/products-catalog';
-  import StaticPage from '@lancom/shared/components/static_page/static-page';
   import Error from './error';
   
   export default {
@@ -85,6 +93,7 @@
       ProductsAside,
       ProductsFilters,
       ProductsCatalog,
+      ChildrenCategories,
       Error,
       StaticPage,
       TheChangesSavedIndicator
@@ -93,6 +102,11 @@
     middleware: ['page-info'],
     async fetch() {
       await this.loadProducts();
+
+      if (this.page === 1 && this.products.length === 0) {
+        await this.fetchChildrenCategories(this.currentCategory);
+      }
+  
       if (process.server) {
         this.$root.context?.res?.setHeader('Cache-Control', `max-age=${86400}`);;
       }
@@ -100,7 +114,10 @@
     computed: {
       ...mapGetters('page', ['routeInfo']),
       ...mapGetters(['notificationBar', 'shop', 'country', 'currency']),
-      ...mapGetters('products', ['category', 'categories', 'brands', 'types', 'tags', 'loadError', 'count', 'products', 'minPrice', 'maxPrice']),
+      ...mapGetters('products', ['category', 'childrenCategories', 'categories', 'brands', 'types', 'tags', 'loadError', 'count', 'products', 'minPrice', 'maxPrice', 'page']),
+      visiblChildrenCategories() {
+        return this.page === 1 && this.products.length === 0 && this.childrenCategories.length > 0;
+      },
       pageItemCanonical() {
         const page = +this.$route.query.page;
         return `${this.breadcrumbs[this.breadcrumbs.length - 1]?.to}${page > 1 ? `?page=${page}` : ''}`;
@@ -302,7 +319,8 @@
         'loadState'
       ]),
       ...mapActions('products', [
-        'fetchProducts'
+        'fetchProducts',
+        'fetchChildrenCategories'
       ]),
       ...mapMutations('products', [
         'setPlaceholder'

package/nuxt.config.js

@@ -38,6 +38,7 @@ module.exports = (config, axios, { raygunClient, publicPath, productUrlToEditor
       '/checkout/**',
       '/customer/**'
     ],
+    cacheTime: 10,
     routes: async () => {
       const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/sitemap?host=${config.HOST_NAME}&toEditor=${!!productUrlToEditor}`);
       return [
@@ -137,7 +138,7 @@ module.exports = (config, axios, { raygunClient, publicPath, productUrlToEditor
   router: {
     extendRoutes(routes, resolve) {
       return [
-        ...sharedRoutes(routes, resolve),
+        ...sharedRoutes(routes, resolve, process.env),
         ...routes,
       ];
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.394",
+  "version": "0.0.396",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {

package/routes/index.js

@@ -1,52 +1,55 @@
-module.exports = function(routes, resolve) {
+module.exports = function(routes, resolve, config) {
+  const PRODUCT_LINK_EXTENSION = config?.PRODUCT_LINK_EXTENSION || '/info.html';
+  const PRODUCT_EDITOR_LINK_EXTENSION = config?.PRODUCT_EDITOR_LINK_EXTENSION || '.html';
+
   return [{
     name: 'product-taxonomy-view-level1',
-    path: '/c/:category/:slug/:sku/info.html',
+    path: `/c/:category/:slug/:sku${PRODUCT_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/index.vue'),
     chunkName: 'pages/product/view/level1'
   }, {
     name: 'product-taxonomy-view-level2',
-    path: '/c/:category1/:category/:slug/:sku/info.html',
+    path: `/c/:category1/:category/:slug/:sku${PRODUCT_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/index.vue'),
     chunkName: 'pages/product/view/level2'
   }, {
     name: 'product-taxonomy-view-level3',
-    path: '/c/:category2/:category1/:category/:slug/:sku/info.html',
+    path: `/c/:category2/:category1/:category/:slug/:sku${PRODUCT_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/index.vue'),
     chunkName: 'pages/product/view/level3'
   }, {
     name: 'product-taxonomy-view-level4',
-    path: '/c/:category3/:category2/:category1/:category/:slug/:sku/info.html',
+    path: `/c/:category3/:category2/:category1/:category/:slug/:sku${PRODUCT_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/index.vue'),
     chunkName: 'pages/product/view/level4'
   }, {
     name: 'product-taxonomy-view-level5',
-    path: '/c/:category4/:category3/:category2/:category1/:category/:slug/:sku/info.html',
+    path: `/c/:category4/:category3/:category2/:category1/:category/:slug/:sku${PRODUCT_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/index.vue'),
     chunkName: 'pages/product/view/level5'
   }, {
     name: 'product-taxonomy-editor-level1',
-    path: '/c/:category/:slug/:sku.html',
+    path: `/c/:category/:slug/:sku${PRODUCT_EDITOR_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/editor/index.vue'),
     chunkName: 'pages/product/editor/level1'
   }, {
     name: 'product-taxonomy-editor-level2',
-    path: '/c/:category1/:category/:slug/:sku.html',
+    path: `/c/:category1/:category/:slug/:sku${PRODUCT_EDITOR_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/editor/index.vue'),
     chunkName: 'pages/product/editor/level2'
   }, {
     name: 'product-taxonomy-editor-level3',
-    path: '/c/:category2/:category1/:category/:slug/:sku.html',
+    path: `/c/:category2/:category1/:category/:slug/:sku${PRODUCT_EDITOR_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/editor/index.vue'),
     chunkName: 'pages/product/editor/level3'
   }, {
     name: 'product-taxonomy-editor-level4',
-    path: '/c/:category3/:category2/:category1/:category/:slug/:sku.html',
+    path: `/c/:category3/:category2/:category1/:category/:slug/:sku${PRODUCT_EDITOR_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/editor/index.vue'),
     chunkName: 'pages/product/editor/level4'
   }, {
     name: 'product-taxonomy-editor-level5',
-    path: '/c/:category4/:category3/:category2/:category1/:category/:slug/:sku.html',
+    path: `/c/:category4/:category3/:category2/:category1/:category/:slug/:sku${PRODUCT_EDITOR_LINK_EXTENSION}`,
     component: resolve('@/pages/_brand/_type/_slug/editor/index.vue'),
     chunkName: 'pages/product/editor/level5'
   }, {

package/store/products.js

@@ -12,6 +12,7 @@ export const state = () => ({
   brands: [],
   category: null,
   categories: [],
+  childrenCategories: [],
   tags: [],
   attributes: [],
   loadError: null,
@@ -25,6 +26,7 @@ export const getters = {
   brands: ({ brands }) => brands || [],
   categories: ({ categories }) => categories || [],
   category: ({ category }) => category,
+  childrenCategories: ({ childrenCategories }) => childrenCategories,
   tags: ({ tags }) => tags || [],
   attributes: ({ attributes }) => attributes || [],
   page: ({ page }) => page,
@@ -79,10 +81,22 @@ export const actions = {
       });
       throw e;
     }
+  },
+  async fetchChildrenCategories({ commit }, category) {
+    try {
+      const categories = await api.fetchChildrenCategories(category?._id);
+      commit('setChildrenCategories', categories);
+      return categories;
+    } catch (e) {
+      console.log(e);
+    }
   }
 };
 
 export const mutations = {
+  setChildrenCategories(state, categories) {
+    state.childrenCategories = categories;
+  },
   setPlaceholder(state, placeholder) {
     state.placeholder = placeholder;
   },