@lancom/shared 0.0.423 → 0.0.424

package/assets/js/api/admin.js

@@ -3,6 +3,12 @@ import { _get, _post, _delete, _put } from './helpers';
 import { sortSizes } from './../utils/sizes';
 import { sortByName } from './../utils/filters';
 
+const CACHE = {
+  PRINT_AREAS: 'print-areas',
+  PACKAGES: 'packages'
+};
+const promiseCache = new Map();
+
 export default {
   updateInventoryFromLink(link, warehouse) {
     const url = `admin/products/inventory/link${warehouse ? `?warehouse=${warehouse}` : ''}`;
@@ -110,6 +116,9 @@ export default {
   saveOrder(order) {
     return order._id ? _put(`admin/order/${order._id}`, order) : _post('admin/order', order);
   },
+  validateOrderDate(order, field) {
+    return _post(`admin/order/${order._id}/validate-date`, { [field]: order[field] });
+  },
   fetchPurchaseOrders(params) {
     return _get(`admin/purchase-orders`, params);
   },
@@ -215,8 +224,13 @@ export default {
   removeCategory(id) {
     return _delete(`admin/categories/${id}`);
   },
+  dropPackagesCache() {
+    promiseCache.delete(CACHE.PACKAGES);
+  },
   fetchPackages() {
-    return _get('admin/packages');
+    const promise = promiseCache.get(CACHE.PACKAGES) || _get('admin/packages');
+    promiseCache.set(CACHE.PACKAGES, promise);
+    return promise;
   },
   fetchPackageById(id) {
     return _get(`admin/packages/${id}`);
@@ -660,8 +674,16 @@ export default {
   removePrintType(id) {
     return _delete(`admin/print-types/${id}`);
   },
-  fetchPrintAreas() {
-    return _get('admin/print-areas');
+  dropPrintAreasCache() {
+    promiseCache.delete(CACHE.PRINT_AREAS);
+  },
+  fetchPrintAreas(params) {
+    if (params) {
+      return _get('admin/print-areas', params);
+    }
+    const promise = promiseCache.get(CACHE.PRINT_AREAS) || _get('admin/print-areas');
+    promiseCache.set(CACHE.PRINT_AREAS, promise);
+    return promise;
   },
   fetchPrintAreaById(id) {
     return _get(`admin/print-areas/${id}`);
@@ -672,8 +694,8 @@ export default {
   removePrintArea(id) {
     return _delete(`admin/print-areas/${id}`);
   },
-  fetchPrintSizes() {
-    return _get('admin/print-sizes');
+  fetchPrintSizes(params) {
+    return _get('admin/print-sizes', params);
   },
   fetchPrintSizeById(id) {
     return _get(`admin/print-sizes/${id}`);
@@ -804,7 +826,11 @@ export default {
   findResources(query) {
     return _get(`admin/order/resources?search=${query || ''}`);
   },
-  getReOrderReport(params) {
-    return _get(`admin/reports/re-order`, params);
+  approveMockupRequest(order, resource) {
+    const shopId = order.shop?._id || order.shop;
+    return _post(`admin/shop/${shopId}/order/${order._id}/resources/${resource._id}/approve-request`, {});
   },
+  getReOrderReport(params) {
+    return _get('admin/reports/re-order', params);
+  }
 };

package/assets/js/api/index.js

@@ -1,10 +1,15 @@
-
 import { _get, _post, _put, _delete, _patch } from './helpers';
 import adminApi from './admin';
 import { unminifySimpleProducts } from './utils/simple-products';
 import { unminifyProduct } from './utils/product';
+import { getSharePromise } from './../utils/share-promises';
+
+const shareRequestsPromises = getSharePromise(5 * 60 * 1000);
 
 const api = {
+  clearAllSharePromises() {
+    return _post('clear-share-promises');
+  },
   fetchClientSettings(shop, params) {
     return _get(`shop/${shop}/client-settings`, params);
   },
@@ -20,6 +25,9 @@ const api = {
   saveCustomer(customer, shop) {
     return customer._id ? _patch(`shop/${shop}/customer/${customer.accessToken}`, customer) : _post(`shop/${shop}/customer`, customer);
   },
+  fetchCustomer(accessToken, shop) {
+    return _get(`shop/${shop}/customer/${accessToken}`);
+  },
   authCustomer(customer, shop) {
     return _post(`shop/${shop}/customer/login`, customer);
   },
@@ -69,7 +77,8 @@ const api = {
     return _get(`shop/${shop}/menus`);
   },
   fetchBanners(shop, params) {
-    return _get(`shop/${shop}/banners`, params);
+    const KEY = `shop/${shop}/banners_${JSON.stringify(params || {})}`;
+    return shareRequestsPromises.share(KEY, () => _get(`shop/${shop}/banners`, params));
   },
   fetchProductsKits(shop, params) {
     return _get(`shop/${shop}/products-kit`, params);
@@ -84,7 +93,8 @@ const api = {
     return _get(`shop/${shop}/news/${alias}?preview=${preview}`);
   },
   fetchNewsTags(shop, params) {
-    return _get(`shop/${shop}/news-tag`, params);
+    const KEY = `shop/${shop}/news-tag_${JSON.stringify(params || {})}`
+    return shareRequestsPromises.share(KEY, () => _get(`shop/${shop}/news-tag`, params));
   },
   fetchNewsTag(shop, alias) {
     return _get(`shop/${shop}/news-tag/${alias}`);
@@ -122,6 +132,10 @@ const api = {
   addOrderTimeline(id, item) {
     return _post(`order/${id}/timeline`, item);
   },
+  approveOrderMockup(order, resource) {
+    const shopId = order.shop?._id || order.shop;
+    return _post(`shop/${shopId}/order/${order._id}/resources/${resource._id}/approve`, resource);
+  },
   generateApprovalPDFs(token) {
     return _post(`order/${token}/approval-pdfs`);
   },

package/assets/js/utils/share-promises/index.js

@@ -0,0 +1,76 @@
+const MAX_PROMISES_COUNT = 1000;
+const DEFAULT_SHARE_LIFETIME = 10 * 1000;
+
+export class SharePromises {
+  constructor(clearSharesTimeoutDelay) {
+    this.promises = new Map();
+    this.clearSharesTimeout = null;
+    this.clearSharesTimeoutDelay = clearSharesTimeoutDelay || DEFAULT_SHARE_LIFETIME;
+  }
+
+  startClearTimeout(key) {
+    const promise = this.promises.get(key);
+    if (promise) {
+      clearTimeout(promise.timeout);
+      promise.timeout = setTimeout(() => {
+        this.promises.delete(key);
+      }, this.clearSharesTimeoutDelay);
+    }
+  }
+
+  share(keyObj, promiseFactory) {
+    const key = `${keyObj}`;
+    let promise = this.promises.get(key);
+    if (!promise) {
+      this.checkMaxPromisesCount();
+
+      promise = {
+        promise: promiseFactory(),
+        timeout: null
+      };
+
+      this.promises.set(key, promise);
+
+      this.startClearTimeout(key);
+    }
+
+    promise.promise = promise.promise.then((result) => result);
+
+    return promise.promise;
+  }
+
+  checkMaxPromisesCount() {
+    if (this.promises.size >= MAX_PROMISES_COUNT) {
+      this.clear();
+    }
+  }
+
+  clear() {
+    this.promises.forEach(promise => {
+      clearTimeout(promise.timeout);
+    });
+    this.promises.clear();
+  }
+
+  clearPromise(keyObj) {
+    const key = `${keyObj}`;
+    let promise = this.promises.get(key);
+    if (promise) {
+      clearTimeout(promise.timeout);
+      this.promises.delete(key);
+    }
+  }
+}
+
+const allSharePromises = [];
+export function getSharePromise(timeout) {
+  const sharePromise = new SharePromises(timeout);
+  allSharePromises.push(sharePromise);
+  return sharePromise;
+}
+
+export function clearAllSharePromises() {
+  for (const sharePromise of allSharePromises) {
+    sharePromise.clear();
+  }
+}

package/components/common/coupon_select/coupon-select.vue

@@ -74,7 +74,7 @@
       <div
         v-else
         class="lc_caption form-help is-danger">
-        Invalid coupon: Min Order for Coupon: {{ value.minOrderValue | price(currency) }}
+        Invalid coupon: Min Order for Coupon: {{ minOrderValue | price(currency) }}
       </div>
       <div v-if="hasQualifyingProducts" class="lc_caption mb-10">
         <div v-if="noQualifyingProductsInCart">
@@ -129,8 +129,18 @@ export default {
     hasQualifyingProductsInCart() {
       return this.sumQualifyingProductsInCart > 0;
     },
+    minOrderValue() {
+      const value = [
+        this.value,
+        ...(this.value?.values || [])
+      ]
+      .filter(v => v?.minOrderValue > 0)
+      .sort((a, b) => a.minOrderValue - b.minOrderValue)[0];
+
+      return value?.minOrderValue || 0;
+    },
     isValidPricing() {
-      return !this.value?.minOrderValue || this.pricing.coupon;
+      return !this.minOrderValue || this.pricing.coupon;
     },
     model: {
       get() {

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

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <div class="form-row">
+    <div :class="containerClassname">
       <label
         v-if="labelless"
-        class="form-label"
+        :class="labelClassname"
         @click="$refs.phone.$el.focus()">
         {{ displayLabelText }}
       </label>
@@ -31,8 +31,8 @@
               :disabled="disabled"
               :name="'phone' + uniqueKey"
               type="text"
-              class="form-field"
               :class="{
+                [inputClassname]: true,
                 'is-danger': errors.length,
                 filled: model,
                 labelless
@@ -115,6 +115,18 @@ export default {
     namePrefix: {
       type: String,
       default: ''
+    },
+    containerClassname: {
+      type: String,
+      default: 'form-row'
+    },
+    labelClassname: {
+      type: String,
+      default: 'form-label'
+    },
+    inputClassname: {
+      type: String,
+      default: 'form-field'
     }
   },
   data() {

package/components/common/postcode_select/postcode-select.vue

@@ -177,7 +177,9 @@ export default {
     if (this.suburb) {
       const option = this.createOptionFromSuburb(this.suburb);
       this.selected = option;
-      await this.handleSearch(this.selected.value.trim())
+      if (this.selected.value) {
+        await this.handleSearch(this.selected.value.trim());
+      }
     }
   },
   methods: {

package/components/customer/customer_navigation_menu/customer-navigation-menu.vue

@@ -15,6 +15,12 @@
 <script>
 export default {
   name: 'CustomerMenu',
+  props: {
+    activeMenuItem: {
+      type: String,
+      required: true
+    }
+  },
   data() {
     return {
       menuItems: [{
@@ -29,14 +35,12 @@ export default {
         label: 'Coupons',
         key: 'coupons',
         url: '/customer/coupons'
+      }, {
+        label: 'Preferences',
+        key: 'preferences',
+        url: '/customer/preferences'
       }]
     };
-  },
-  props: {
-    activeMenuItem: {
-      type: String,
-      required: true
-    }
   }
 };
 </script>
@@ -68,5 +72,5 @@ export default {
       background-color: $green;
     }
   }
-} 
+}
 </style>

package/components/customer/customer_preferences_form/customer-preferences-form.scss

@@ -0,0 +1,12 @@
+@import "@/assets/scss/variables";
+
+.CustomerPreferencesForm {
+  &__error {
+    font-weight: bold;
+    font-size: 14px;
+    padding: 18px 10px;
+    text-align: center;
+    color: $white;
+    background: #EA3434;
+  }
+}

package/components/customer/customer_preferences_form/customer-preferences-form.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="form__wrapper CustomerFrom__wrapper">
+    <validation-observer ref="form">
+      <div class="mt-10">
+        <div
+          class="row"
+          style="margin-top: -20px">
+          <div class="col-12">
+            <div class="form-row">
+              <label class="form-label">
+                <checkbox v-model="customer.signUpForNewsletter" />
+                <span class="lc_regular12 lc__grey1">
+                  Sign up for newsletter
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="form__footer mt-5">
+        <div
+          v-if="errorMessage"
+          class="CustomerForm__error">
+          {{ errorMessage }}
+        </div>
+        <div class="form-actions full">
+          <btn
+            class="btn btn-black"
+            :btn-processing="processing"
+            :btn-disabled="processing"
+            :btn-label="customer._id ? 'Save' : 'Create Account'"
+            @onclick="submit()">
+          </btn>
+        </div>
+      </div>
+    </validation-observer>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+
+export default {
+  name: 'CustomerPreferencesForm',
+  props: {
+    customer: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      errorMessage: null,
+      processing: false
+    };
+  },
+  computed: {
+    ...mapGetters(['shop'])
+  },
+  methods: {
+    async submit() {
+      this.errorMessage = null;
+
+      const isValid = await this.$refs.form.validate();
+      if (!isValid) {
+        return;
+      }
+
+      try {
+        this.processing = true;
+        const result = await api.saveCustomer(this.customer, this.shop._id);
+        this.$emit('save', result);
+      } catch ({ response }) {
+        const { data } = response || {};
+        this.errorMessage = data && data.error;
+      } finally {
+        this.processing = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'customer-preferences-form.scss';
+</style>

package/components/pages/customer/preferences/preferences.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="CustomerPreferences__wrapper">
+    <customer-preferences-form
+      v-if="customer"
+      ref="customerForm"
+      :customer="customer"
+      @save="onSave"
+      @customer-loaded="onCustomerLoaded" />
+  </div>
+</template>
+
+<script>
+import api from '@lancom/shared/assets/js/api';
+import { mapGetters, mapActions } from 'vuex';
+import CustomerPreferencesForm from '@lancom/shared/components/customer/customer_preferences_form/customer-preferences-form';
+
+export default {
+  name: 'CustomerPreferences',
+  components: {
+    CustomerPreferencesForm
+  },
+  data() {
+    return {
+      customer: null,
+      loading: false,
+      error: null
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('auth', ['user'])
+  },
+  async created() {
+    await this.loadCustomerData();
+  },
+  methods: {
+    ...mapActions('auth', ['update_user']),
+    async loadCustomerData() {
+      try {
+        this.processing = true;
+        const customer = await api.fetchCustomer(this.user.accessToken, this.shop._id);
+        console.log('customer: ', customer);
+        this.customer = customer;
+      } catch (e) {
+        console.log(e);
+        const errorMessage = e?.response?.data?.error;
+        this.$toastr.e(errorMessage || 'Customer failed to load');
+      } finally {
+        this.processing = false;
+      }
+    },
+    onSave({ customer: user, token }) {
+      this.$toastr.s('Customer successfully saved');
+      this.update_user({ user, token });
+    },
+    onCustomerLoaded(customer) {
+      this.customer = customer;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.loading-message {
+  text-align: center;
+  padding: 2rem;
+  font-size: 1.1rem;
+  color: #666;
+}
+
+.error-message {
+  text-align: center;
+  padding: 2rem;
+  color: #d32f2f;
+  background-color: #ffebee;
+  border-radius: 4px;
+  margin: 1rem 0;
+}
+</style>

package/components/product/product.vue

@@ -32,12 +32,6 @@
         <section class="Product__section">
           <wizard-editor />
         </section>
-        <!-- <section class="Product__section">
-          <product-colors-selector v-if="productDetails" />
-        </section> -->
-        <!-- <section class="Product__section">
-          <product-tier-prices :product="product" />
-        </section> -->
         <section class="Product__section">
           <product-fabric-and-size-info :product="product" />
         </section>
@@ -59,23 +53,17 @@ import RelatedProducts from '@lancom/shared/components/product/related_products/
 import Gallery from '@lancom/shared/components/product/gallery/gallery';
 import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
 import ProductMainInfo from './layouts/product_main_info/product-main-info';
-import ProductColorsSelector from './product_colors_selector/product-colors-selector';
-import ProductTierPrices from './layouts/product_tier_prices/product-tier-prices';
 import ProductFabricAndSizeInfo from './layouts/product_fabric_and_size_info/product-fabric-and-size-info';
 import ProductPackaging from './layouts/product_packaging/product-packaging';
 import ProductModelMeasurements from './layouts/product_model_measurements/product-model-measurements';
 import ProductSizeTable from './layouts/product_size_table/product-size-table';
 import WizardEditor from './wizard-editor/wizard-editor.vue';
 
-    
-// import ProductLabelsCustomization from './layouts/product_labels_customization/product-labels-customization';
 
 export default {
   name: 'Product',
   components: {
     ProductMainInfo,
-    ProductColorsSelector,
-    ProductTierPrices,
     ProductFabricAndSizeInfo,
     ProductPackaging,
     ProductModelMeasurements,

package/components/product/product_reviews/product-reviews.vue

@@ -41,6 +41,12 @@ export default {
     ProductReview
   },
   mixins: [],
+  props: {
+    product: {
+      type: Object,
+      required: true
+    }
+  },
   data() {
     const reviews = this.product.reviews || [];
     const [, mainReviewId] = (this.$route.hash || '').match(/review-([a-z0-9]+)/i) || [];
@@ -56,12 +62,6 @@ export default {
       ].filter(review => !!review)
     };
   },
-  props: {
-    product: {
-      type: Object,
-      required: true
-    }
-  },
   computed: {
     currentReview() {
       return this.reviews[this.activeIndex];

package/components/product/related_products/related-products.vue

@@ -36,15 +36,15 @@ export default {
       products: []
     };
   },
+  async fetch() {
+    const { products } = await api.fetchRelatedProducts(this.shop._id, this.product.alias, { needShuffle: true });
+    this.products = products.splice(0, 6);
+  },
   computed: {
     ...mapGetters(['shop']),
     hasProducts() {
       return this.products.length > 0;
     }
-  },
-  async fetch() {
-    const { products } = await api.fetchRelatedProducts(this.shop._id, this.product.alias, { needShuffle: true });
-    this.products = products.splice(0, 6);
   }
 };
 </script>

package/components/resource/resource_view/resource-view.mixin.js

@@ -0,0 +1,74 @@
+import api from '@lancom/shared/assets/js/api';
+
+const ORDER_RESOURCE_STATUS = {
+  PENDING_APPROVAL: 'pending approval',
+  APPROVED: 'approved',
+  NOT_APPROVED: 'not approved'
+};
+
+export default {
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      processing: false
+    };
+  },
+  computed: {
+    file() {
+      return this.resource.file;
+    },
+    isNotApproved() {
+      return this.resource.status === ORDER_RESOURCE_STATUS.NOT_APPROVED;
+    },
+    isApproved() {
+      return this.resource.status === ORDER_RESOURCE_STATUS.APPROVED;
+    },
+    isAvailableForApprove() {
+      const statuses = [
+        ORDER_RESOURCE_STATUS.APPROVED,
+        ORDER_RESOURCE_STATUS.NOT_APPROVED,
+        ORDER_RESOURCE_STATUS.PENDING_APPROVAL
+      ];
+      return statuses.includes(this.resource.status);
+    },
+    isValidStatus() {
+      const statuses = [
+        ORDER_RESOURCE_STATUS.APPROVED,
+        ORDER_RESOURCE_STATUS.NOT_APPROVED
+      ];
+      return statuses.includes(this.resource.status);
+    }
+  },
+  mounted() {
+    console.log('this.resource: ', this.resource);
+    console.log('this.order: ', this.order);
+  },
+  methods: {
+    approveMockup() {
+      this.resource.status = 'approved';
+    },
+    notApproveMockup() {
+      this.resource.status = 'not approved';
+    },
+    async submitApproval() {
+      this.processing = true;
+      try {
+        await api.approveOrderMockup(this.order, this.resource);
+        this.processing = false;
+        this.$toastr.s('Approval submitted successfully.');
+      } catch (error) {
+        this.processing = false;
+        this.$toastr.e('Failed to submit approval.');
+      }
+    }
+  }
+};

package/components/resource/resource_view/resource-view.scss

@@ -0,0 +1,13 @@
+.ResourceView {
+  &__wrapper {
+    margin-top: 50px;
+  }
+  &__approve-btn {
+    height: 42px;
+  }
+  &__approve {
+    margin-top: 30px;
+    border: 1px solid #f1f1f1;
+    padding: 10px;
+  }
+}

package/components/resource/resource_view/resource-view.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="ResourceView__wrapper">
+    <div class="row">
+      <div class="col-6">
+        <div class="ResourceView__code lc_h3">
+          {{ order.code }}
+        </div>
+        <div>
+          <div>
+            <div class="ResourceView__code lc_h5">
+              Approve Mockup
+            </div>
+            <div
+              v-if="file"
+              class="lc_regular16">
+              <span>
+                Mockup:
+              </span>
+              <a
+                :href="file.origin"
+                target="_blank"
+                class="lc_black">
+                {{ file.fileName }}
+              </a>
+            </div>
+          </div>
+          <div class="ResourceView__approve">
+            <div>
+              <btn
+                :btn-class="isApproved ? 'purple' : 'white'"
+                :btn-disabled="!isAvailableForApprove || processing"
+                :btn-processing="processing"
+                btn-label="Approved"
+                class="ResourceView__approve-btn"
+                @onclick="approveMockup()">
+              </btn>
+              <btn
+                :btn-class="isNotApproved ? 'purple' : 'white'"
+                :btn-disabled="!isAvailableForApprove"
+                :btn-processing="processing"
+                btn-label="Not Approved"
+                class="ResourceView__approve-btn"
+                @onclick="notApproveMockup()">
+              </btn>
+            </div>
+            <div class="mt-10">
+              <validation-provider
+                tag="div"
+                name="Comment"
+                class="mb-5 mt-5">
+                <textarea
+                  id="timeline_message"
+                  v-model="resource.comment"
+                  name="comment"
+                  style="height: 140px"
+                  placeholder="Comment"
+                  class="form-field no-label"></textarea>
+              </validation-provider>
+            </div>
+            <div class="mt-10">
+              <btn
+                btn-class="green"
+                :btn-disabled="!isValidStatus || processing"
+                :btn-processing="processing"
+                btn-label="Save"
+                class="ResourceView__approve-btn"
+                @onclick="submitApproval()">
+              </btn>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-6">
+        <resource-view-prints
+          :order="order"
+          :resource="resource" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ResourceViewMixin from './resource-view.mixin';
+import ResourceViewPrints from './resource_view_prints/resource-view-prints';
+
+export default {
+  name: 'LancomResourceView',
+  components: {
+    ResourceViewPrints
+  },
+  mixins: [ResourceViewMixin]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'resource-view.scss';
+</style>

package/components/resource/resource_view/resource_view_prints/resource-view-prints.scss

@@ -0,0 +1,7 @@
+.ResourceViewPrints {
+  &__print {
+    margin-bottom: 10px;
+    padding-left: 10px;
+    border-left: 4px solid #d8d8d8;
+  }
+}

package/components/resource/resource_view/resource_view_prints/resource-view-prints.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="ResourceViewPrints__wrapper">
+    <resource-view-print
+      v-for="print in prints"
+      :key="print._id"
+      :order="order"
+      :resource="resource"
+      :print="print"
+      class="ResourceViewPrints__print" />
+  </div>
+</template>
+
+<script>
+import ResourceViewPrint from './resource_view_print/resource-view-print';
+
+export default {
+  name: 'LancomResourceViewPrints',
+  components: {
+    ResourceViewPrint
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    prints() {
+      const productsPrints = this.order.products.reduce((prints, product) => [...prints, ...product.prints], []);
+      return [...this.order.prints, ...productsPrints];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'resource-view-prints.scss';
+</style>

package/components/resource/resource_view/resource_view_prints/resource_view_print/resource-view-print.scss

@@ -0,0 +1,5 @@
+.ResourceViewPrint {
+  &__products {
+    margin-top: 5px;
+  }
+}

package/components/resource/resource_view/resource_view_prints/resource_view_print/resource-view-print.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="ResourceViewPrint__wrapper">
+    <div class="lc_regular12">
+      <div v-if="print.printType">
+        <b class="lc_bold">Print Type:</b> {{ print.printType.name }}
+      </div>
+      <div v-if="print.printArea">
+        <b class="lc_bold">Print Area:</b> {{ print.printArea.name }}
+      </div>
+      <div v-if="print.printSize">
+        <b class="lc_bold">Print Size:</b> {{ print.printSize.name }}
+      </div>
+    </div>
+    <div class="ResourceViewPrint__products">
+      <resource-view-print-products
+        :order="order"
+        :resource="resource"
+        :print="print" />
+    </div>
+  </div>
+</template>
+
+<script>
+import ResourceViewPrintProducts from './resource_view_print_products/resource-view-print-products';
+
+export default {
+  name: 'LancomResourceViewPrint',
+  components: {
+    ResourceViewPrintProducts
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    resource: {
+      type: Object,
+      required: true
+    },
+    print: {
+      type: Object,
+      required: true
+    }
+  },
+  mounted() {
+    console.log('');
+    console.log('this.print: ', this.print);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'resource-view-print.scss';
+</style>

package/components/resource/resource_view/resource_view_prints/resource_view_print/resource_view_print_products/resource-view-print-products.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="ResourceViewPrintProducts__wrapper">
+    <resource-view-print-product
+      v-for="(product, index) in products"
+      :key="product.guid || index"
+      :order="order"
+      :resource="resource"
+      :print="print"
+      :product="product" />
+  </div>
+</template>
+
+<script>
+import ResourceViewPrintProduct from './resource_view_print_product/resource-view-print-product';
+
+export default {
+  name: 'LancomResourceViewPrintProducts',
+  components: {
+    ResourceViewPrintProduct
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    resource: {
+      type: Object,
+      required: true
+    },
+    print: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    products() {
+      return this.order.products;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'resource-view-print-products.scss';
+</style>

package/components/resource/resource_view/resource_view_prints/resource_view_print/resource_view_print_products/resource_view_print_product/resource-view-print-product.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="ResourceViewPrintProduct__wrapper">
+    <div
+      v-for="simpleProduct in simpleProducts"
+      :key="simpleProduct.guid"
+      class="lc_regular14">
+      {{ simpleProduct.SKU }} x {{ simpleProduct.amount }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LancomResourceViewPrintProduct',
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    resource: {
+      type: Object,
+      required: true
+    },
+    print: {
+      type: Object,
+      required: true
+    },
+    product: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    simpleProducts() {
+      const simpleProducts = this.product.simpleProducts || [];
+      return simpleProducts.filter(sp => sp.amount > 0);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'resource-view-print-product.scss';
+</style>

package/package.json

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

package/pages/customer/preferences.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    :data-aos="aosFadeLeft"
+    class="CustomerPreferencesPage__wrapper">
+    <customer-preferences />
+  </div>
+</template>
+
+<script>
+import metaInfo from '@lancom/shared/mixins/meta-info';
+
+export default {
+  name: 'CustomerPreferencesPage',
+  components: {
+    CustomerPreferences: () => import('@lancom/shared/components/pages/customer/preferences/preferences')
+  },
+  mixins: [metaInfo]
+};
+</script>
+
+<style lang="scss" scoped>
+  @import "@/assets/scss/variables";
+
+  .CustomerPreferencesPage {
+    &__wrapper {
+      margin: 100px auto;
+      width: 500px;
+      @media (max-width: $bp-extra-small-max) {
+        width: auto;
+      }
+    }
+  }
+</style>

package/pages/order/_token/resource/_resource.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="ResourceViewPage__wrapper">
+    <div :class="isFullScreen ? '' : 'content-inner'">
+      <resource-view
+        :order="order"
+        :resource="resource"
+        :responsive="!isFullScreen" />
+    </div>
+  </div>
+</template>
+
+<script>
+import metaInfo from '@lancom/shared/mixins/meta-info';
+import api from '@lancom/shared/assets/js/api';
+
+export default {
+  name: 'OrderResourceViewPage',
+  components: {
+    ResourceView: () => import('@lancom/shared/components/resource/resource_view/resource-view')
+  },
+  mixins: [metaInfo],
+  async asyncData({ params, error }) {
+    try {
+      const order = await api.fetchOrderByToken(params.token, { invoiceProducts: true });
+      const resource = order.resources.find(i => [i._id, i.guid].includes(params.resource));
+      if (!resource) {
+        return error({
+          statusCode: 404,
+          error: 'Resource not found'
+        });
+      }
+      return { order, resource };
+    } catch (e) {
+      const { status, data } = e?.response || {};
+      const statusCode = status || 500;
+      error({
+        statusCode,
+        error: data?.error || 'Resource not found'
+      });
+    }
+  },
+  data() {
+    return {
+      order: null,
+      invoice: null,
+      isFullScreen: this.$route.query.print
+    };
+  }
+};
+</script>
+
+<style lang="scss">
+</style>

package/routes/index.js

@@ -87,6 +87,11 @@ module.exports = function(routes, resolve, config) {
     path: '/order/:token/payment',
     component: resolve('@lancom/shared/pages/order/_token/payment/index.vue'),
     chunkName: 'pages/order/payment'
+  }, {
+    name: 'order-resource',
+    path: '/order/:token/resource/:resource',
+    component: resolve('@lancom/shared/pages/order/_token/resource/_resource.vue'),
+    chunkName: 'pages/order/resource'
   }, {
     name: 'order-payment-invoice',
     path: '/order/:token/payment/invoice/:invoice',
@@ -142,6 +147,11 @@ module.exports = function(routes, resolve, config) {
     path: '/customer/password/:token',
     component: resolve('@lancom/shared/pages/customer/password/_token.vue'),
     chunkName: 'pages/customer/password/reset'
+  }, {
+    name: 'customer-preferences',
+    path: '/customer/preferences',
+    component: resolve('@lancom/shared/pages/customer/preferences.vue'),
+    chunkName: 'pages/customer/preferences'
   }, {
     name: 'checkout-cart',
     path: '/checkout/cart',

package/store/auth.js

@@ -18,6 +18,7 @@ export const getters = {
   isGuestUser: state => !state.token,
   isAdmin: state => checkRoles(state.user, ['admin']),
   isContentEditor: state => checkRoles(state.user, ['admin', 'content-editor']),
+  isDesigner: state => checkRoles(state.user, ['admin', 'designer']),
   isWarehouse: state => checkRoles(state.user, ['admin', 'warehouse']),
   user: state => state.user,
   userWarehouse: state => state.user?.warehouse,

package/store/index.js

@@ -4,9 +4,13 @@ import { getAuthToken } from '@lancom/shared/assets/js/utils/auth';
 import { getShopCountrySettings } from '@lancom/shared/assets/js/utils/shop';
 import { MESSAGES, COUNTRIES_MESSAGES } from '@/messages';
 import { SETTINGS, COUNTRIES_SETTINGS } from '@/settings';
+import { getSharePromise, clearAllSharePromises } from '@lancom/shared/assets/js/utils/share-promises';
+
 const cookieparser = process.server ? require('cookieparser') : undefined;
 const CLOSED_NOTIFICATION = 'lancom-closed-notification-1.0';
 
+const shareShopInfo = getSharePromise(60 * 1000);
+
 export const state = () => ({
   googleClickId: null,
   stockCountry: null,
@@ -69,9 +73,14 @@ export const actions = {
       await commit('setShop', shop);
     }
   },
-  async nuxtServerInit({ commit }, { req }) {
-    const shop = await api.fetchShopByUrl(process.env.HOST_NAME);
-    const menus = await api.fetchMenus(shop._id);
+  async nuxtServerInit({ commit }, { req, query }) {
+    if (query?.cache === 'false') {
+      clearAllSharePromises();
+      await api.clearAllSharePromises();
+    }
+
+    const shop = await shareShopInfo.share(process.env.HOST_NAME, () => api.fetchShopByUrl(process.env.HOST_NAME));
+    const menus = await shareShopInfo.share(`menus_${shop._id}`, () => api.fetchMenus(shop._id));
     commit('setMenus', menus);
     commit('setShop', shop);
     // if (req.headers.cookie) {

package/store/product.js

@@ -77,7 +77,7 @@ export const getters = {
   usedBigSizeSimpleProductsQuantity: (state, { usedSimpleProducts }) => filterBigSize(usedSimpleProducts).reduce((sum, { amount }) => sum + amount, 0),
   defaultSimpleProduct: ({ productDetails, editableColor }) => {
     return editableColor && (
-      productDetails.simpleProducts.find(({ color, size }) => color._id === editableColor._id && size.alias === 'small')
+      productDetails.simpleProducts.find(({ color, size }) => color._id === editableColor._id && size?.alias === 'small')
       || productDetails.simpleProducts.find(({ color }) => color._id === editableColor._id)
     );
   },