@lancom/shared 0.0.437 → 0.0.439

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

@@ -54,7 +54,7 @@
       }
       &-label {
         line-height: 27px;
-        color: $gray;
+        color: #6b6b6b;
       }
       &-value {
         font-size: 18px;
@@ -65,4 +65,4 @@
       }
     }
   }
-}
+}

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

@@ -119,6 +119,14 @@
             </span>
           </div>
         </div>
+        <div
+          v-if="contacts.workingInfo"
+          class="ContactUs__contacts-row">
+          <span
+            class="ContactUs__contacts-entity-value"
+            v-html="contacts.workingInfo">
+          </span>
+        </div>
         <div class="ContactUs__contacts-row">
           <div class="ContactUs__contacts-entity">
             <i class="icon-mail-alt ContactUs__contacts-entity-icon"></i>

package/components/checkout/order/order-checkout-method/order-checkout-method.vue

@@ -35,7 +35,16 @@
           @save="createdCustomer($event)" />
         <signin-form
           v-else
-          @signin="signin()" />
+          @signin="signin()">
+          <template #actions>
+            <progress-steps-controls
+              next-btn-class="white"
+              :show-prev="false"
+              label-next="Checkout as Guest"
+              style="margin-top: 0;"
+              @next="$emit('next')" />
+          </template>
+        </signin-form>
       </div>
     </div>
   </div>

package/components/customer/signin_form/signin-form.vue

@@ -81,18 +81,25 @@
           {{ error }}
         </div>
         <div class="form-actions">
-          <btn
-            class="btn btn-black"
-            :btn-processing="processing"
-            :btn-disabled="processing"
-            :btn-block="true"
-            btn-type="button"
-            btn-label="Log in"
-            @onclick="submit()">
-            <i
-              slot="icon-after"
-              class="icon-arrow-right"></i>
-          </btn>
+          <div class="row">
+            <div class="col-6">
+              <btn
+                class="btn btn-black"
+                :btn-processing="processing"
+                :btn-disabled="processing"
+                :btn-block="true"
+                btn-type="button"
+                btn-label="Log in"
+                @onclick="submit()">
+                <i
+                  slot="icon-after"
+                  class="icon-arrow-right"></i>
+              </btn>
+            </div>
+            <div class="col-6">
+              <slot name="actions"></slot>
+            </div>
+          </div>
         </div>
       </div>
     </validation-observer>

package/components/product/product_pricing_tiers/product-pricing-tiers.scss

@@ -19,6 +19,11 @@
     background: #FFF;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
     cursor: pointer;
+    transition: all 0.3s ease;
+    &:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.30), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
+    }
     &-single-price {
       padding: 12px 0;
       border-radius: 8px;

package/components/product/product_pricing_tiers/product-pricing-tiers.vue

@@ -53,6 +53,7 @@ export default {
       if (this.editableColor) {
         this.buyMultipack(this.editableColor, tier.min);
       }
+      this.$emit('select', tier);
     }
   }
 };

package/components/product/product_stock_status/product-stock-status.vue

@@ -15,16 +15,28 @@ import { PRODUCT_STOCK_STATUS_COLORS } from '@lancom/shared/assets/js/constants/
 
 export default {
   name: 'ProductStockStatus',
+  data() {
+    const { color, size } = this.$route.query;
+    return {
+      isDefaultSimpleProductStock: !!color && !!size
+    };
+  },
   computed: {
-    ...mapGetters('product', ['stockStatus']),
+    ...mapGetters('product', [
+      'stockStatus',
+      'defaultSimpleProductStockStatus',
+      'defaultSimpleProduct'
+    ]),
     capitalizedStockStatus() {
-      if (!this.stockStatus) {
+      const status = this.isDefaultSimpleProductStock ? this.defaultSimpleProductStockStatus : this.stockStatus;
+      if (!status) {
         return '';
       }
-      return this.stockStatus.charAt(0).toUpperCase() + this.stockStatus.slice(1);
+      return status.charAt(0).toUpperCase() + status.slice(1);
     },
     stockStatusColor() {
-      return PRODUCT_STOCK_STATUS_COLORS[this.stockStatus] || 'green';
+      const status = this.isDefaultSimpleProductStock ? this.defaultSimpleProductStockStatus : this.stockStatus
+      return PRODUCT_STOCK_STATUS_COLORS[status] || 'green';
     }
   }
 };

package/components/product/products_size_selector_color/product_size_selector_color/product-size-selector-color.scss

@@ -45,6 +45,10 @@
       border-bottom: 1px dashed grey;
     }
   }
+  &__divider {
+    font-size: 12px;
+    margin: 0 3px;
+  }
 }
 
 ::v-deep .ProductSizeSelectorColorCell {

package/components/product/products_size_selector_color/product_size_selector_color/product-size-selector-color.vue

@@ -46,12 +46,17 @@
               </div>
             </template>
           </v-popover>
+          <span
+            v-if="printsPrice > 0"
+            class="ProductSizeSelectorColor__divider">
+            +
+          </span>
           <v-popover
             v-if="printsPrice > 0"
             trigger="hover"
             :delay="{ show: 200, hide: 400 }"
             popover-class="tooltip popover white"
-            class="ProductSizeSelectorColor__price ml-6"
+            class="ProductSizeSelectorColor__price"
             style="display: inline-block;">
             <span class="lc_regular13">
               {{ productPrintsPrice | price(currency) }}

package/mixins/product-view.js

@@ -19,7 +19,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
   },
   async asyncData({ store, params, error, query, redirect, res }) {
     try {
-      const { print, color, colour } = query;
+      const { print, color, colour, size } = query;
       const { shop, country, stockCountry, currency } = store.getters;
       const data = {
         shop: shop._id,
@@ -28,7 +28,8 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
         country: country?._id,
         currency: currency?._id,
         print,
-        defaultColor: color || colour
+        defaultColor: color || colour,
+        defaultSize: size
       };
 
       await store.dispatch('product/fetchProduct', data);
@@ -212,14 +213,15 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     staticLink,
     getProductQuery() {
       const { slug } = this.$route.params;
-      const { color, colour } = this.$route.query;
+      const { color, colour, size } = this.$route.query;
       const data = {
         shop: this.shop._id,
         slug,
         country: this.country?._id,
         stockCountry: this.stockCountry?._id,
         currency: this.currency?._id,
-        defaultColor: color || colour
+        defaultColor: color || colour,
+        defaultSize: size
       };
 
       return data;

package/package.json

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

package/store/product.js

@@ -45,6 +45,7 @@ export const state = () => ({
   availablePrintTypes: null,
   isPrintPricing: false,
   editableColor: null,
+  defaultSize: null,
   selectedLayer: null,
   selectedLayerCopy: null,
   editablePrintArea: null,
@@ -75,6 +76,7 @@ export const getters = {
   productDetails: ({ productDetails }) => productDetails,
   productDetailsLoaded: ({ productDetails }) => !!productDetails,
   editorSize: ({ editorSize }) => editorSize,
+  defaultSize: ({ defaultSize }) => defaultSize,
   editorSizeBreakpoints: ({ editorSizeBreakpoints }) => editorSizeBreakpoints,
   template: ({ template }) => template,
   layers: ({ template }) => template.layers || [],
@@ -87,7 +89,14 @@ export const getters = {
   usedSimpleProducts: ({ template }) => (template.simpleProducts || []).filter(p => p.amount > 0),
   usedSimpleProductsQuantity: ({ template }) => (template.simpleProducts || []).filter(p => p.amount > 0).reduce((sum, { amount }) => sum + amount, 0),
   usedBigSizeSimpleProductsQuantity: (state, { usedSimpleProducts }) => filterBigSize(usedSimpleProducts).reduce((sum, { amount }) => sum + amount, 0),
-  defaultSimpleProduct: ({ productDetails, editableColor }) => {
+  defaultSimpleProduct: ({ productDetails, editableColor, defaultSize }) => {
+    let simpleProduct = null;
+    if (defaultSize) {
+      simpleProduct = productDetails.simpleProducts.find(({ color, size }) => color._id === editableColor?._id && size?.shortName === defaultSize);
+      if (simpleProduct) {
+        return simpleProduct;
+      }
+    }
     return editableColor && (
       productDetails.simpleProducts.find(({ color, size }) => color._id === editableColor._id && size.alias === 'small')
       || productDetails.simpleProducts.find(({ color }) => color._id === editableColor._id)
@@ -214,6 +223,9 @@ export const getters = {
       return PRODUCT_STOCK_STATUS.NOT_IN_STOCK;
     }
   },
+  defaultSimpleProductStockStatus: (state, { defaultSimpleProduct }) => {
+    return defaultSimpleProduct?.quantityStock > 0 ? PRODUCT_STOCK_STATUS.ALL_IN_STOCK : PRODUCT_STOCK_STATUS.NOT_IN_STOCK;
+  },
   previewPrintArea: ({ previewPrintArea }) => previewPrintArea
 };
 
@@ -249,7 +261,7 @@ export const actions = {
       });
     }
   },
-  async fetchProductDetails({ commit, state }, { shop, slug, country, stockCountry, currency, defaultColor = 'white' }) {
+  async fetchProductDetails({ commit, state }, { shop, slug, country, stockCountry, currency, defaultColor = 'white', defaultSize }) {
     const params = { country, currency, stockCountry };
     commit('setLoadingProductDetails', true);
     const response = await api.fetchProductDetails(shop, slug, params);
@@ -263,6 +275,10 @@ export const actions = {
       state.availableColors[0];
     commit('setEditableColor', editableColor);
 
+    if (defaultSize) {
+      commit('setDefaultSize', defaultSize);
+    }
+
     let images = editableColor
       ? [
           ...(state.product.images || []).filter(image => image.color === editableColor._id),
@@ -377,6 +393,9 @@ export const mutations = {
   setBanners(state, banners) {
     state.banners = banners;
   },
+  setDefaultSize(state, size) {
+    state.defaultSize = size;
+  },
   setPriceIncludeGST(state, priceIncludeGST) {
     state.priceIncludeGST = priceIncludeGST;
   },