@lancom/shared 0.0.280 → 0.0.282

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

@@ -0,0 +1,128 @@
+<template>
+  <tr class="ProductSizeSelectorColor__wrapper">
+    <td
+      v-if="rowspan"
+      :rowspan="rowspan"
+      class="ProductSizeSelectorColor__color-name">
+      <span>
+        {{ product.color.name }}
+      </span>
+    </td>
+    <td
+      class="ProductSizeSelectorColor__size hidden-sm-and-down"
+      :class="{ disabled }">
+      {{ product.size.shortName }}
+    </td>
+    <td
+      :class="{ disabled }">
+      <div class="lc_regular14 hidden-md-and-up">
+        {{ product.size.shortName }}
+      </div>
+      <v-popover
+        trigger="hover"
+        :delay="{ show: 200, hide: 400 }"
+        popover-class="tooltip popover white"
+        class="ProductSizeSelectorColor__price">
+        <span>
+          {{ productPrice | price(currency) }}
+        </span>
+        <template slot="popover">
+          <div>
+            <pricing-discounts-table
+              :with-gst="withGst"
+              :prices="pricing"
+              :amount="usedSimpleProductsQuantity" />
+          </div>
+        </template>
+      </v-popover>
+      <div class="hidden-md-and-up">
+        <div
+          v-if="product.quantityStock"
+          class="ProductSizeSelectorColor__in-stock">
+          {{ currentQuantityStock }} in stock
+        </div>
+        <div
+          v-else
+          class="ProductSizeSelectorColor__out-stock">
+          out of stock
+        </div>
+      </div>
+    </td>
+    <td class="ProductSizeSelectorColor__stock hidden-sm-and-down">
+      <div
+        v-if="product.quantityStock"
+        class="ProductSizeSelectorColor__in-stock">
+        {{ currentQuantityStock }} in stock
+      </div>
+      <div
+        v-else
+        class="ProductSizeSelectorColor__out-stock">
+        out of stock
+      </div>
+    </td>
+    <td class="ProductSizeSelectorColor__cell">
+      <product-size-selector-color-cell
+        :side-controls="true"
+        :show-max-modal="false"
+        :out-stock="disabled"
+        :color="product.color"
+        :size="product.size" />
+    </td>
+  </tr>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import ProductSizeSelectorColorCell from '@lancom/shared/components/product/product_size_selector/product_size_selector_color/product_size_selector_color_cell/product-size-selector-color-cell';
+import { tax } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'ProductSizeSelectorColor',
+  filters: {
+    price
+  },
+  components: {
+    PricingDiscountsTable,
+    ProductSizeSelectorColorCell
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    rowspan: {
+      type: Number,
+      default: 0
+    },
+    withGst: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters('product', ['isPrintPricing', 'usedSimpleProductsQuantity']),
+    ...mapGetters(['gstTax', 'currency']),
+    pricing() {
+      return (this.isPrintPricing ? this.product.pricing : this.product.unprintedPricing) || [];
+    },
+    productPrice() {
+      const amount = this.usedSimpleProductsQuantity;
+      const pricing = this.pricing;
+      const price = (pricing.find(({ min, max }) => (!min || min <= amount) && (!max || max >= amount)) || pricing[0] || {}).price || 0;
+      return this.withGst ? tax(price, this.gstTax) : price;
+    },
+    disabled() {
+      return !this.product.quantityStock || !this.productPrice;
+    },
+    currentQuantityStock() {
+      return (this.product.quantityStock || 0) - (this.product.amount || 0);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-size-selector-color.scss';
+</style>

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

@@ -0,0 +1,12 @@
+@import '@/assets/scss/variables';
+
+.ProductsSizeSelectorColor {
+  &__table {
+    border: 1px solid $gray;
+    font-weight: 800;
+    font-size: 18px;
+    line-height: 25px;
+    text-transform: uppercase;
+    color: $black;
+  }
+}

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

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <table class="ProductsSizeSelectorColor__table lc_table bordered">
+      <tbody class="centered">
+        <product-size-selector-color
+          v-for="(product, index) in products"
+          :key="`${editableColor._id}_${product._id}`"
+          :rowspan="index === 0 ? products.length : 0"
+          :with-gst="withGst"
+          :product="product" />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { sortBySize } from '@lancom/shared/assets/js/utils/sizes';
+import ProductSizeSelectorColor from './product_size_selector_color/product-size-selector-color';
+
+export default {
+  name: 'ProductsSizeSelectorColor',
+  components: {
+    ProductSizeSelectorColor
+  },
+  props: {
+    withGst: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters('product', ['editableColor', 'editableColorSimpleProducts']),
+    products() {
+      return sortBySize(this.editableColorSimpleProducts);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-size-selector-color.scss';
+</style>

package/components/product/wizard/wizard_print_layers/wizard_print_layer/wizard-print-layer.vue

@@ -106,7 +106,7 @@
           Price
         </div>
         <div>
-          {{ layerPrintPricing | pricingRange }}
+          {{ layerPrintPricing | pricingRange(currency) }}
         </div>
         <v-popover
           ref="popover"
@@ -149,12 +149,14 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import printLayerMixin from '@lancom/shared/mixins/print-layer';
 import { pricingRange } from '@lancom/shared/assets/js/utils/filters';
 import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
 import WizardTextOrLogoForm from './../../wizard_print_text_or_logo/wizard_text_or_logo_form/wizard-text-or-logo-form';
 
 export default {
   name: 'WizardPrintLayer',
+  mixins: [printLayerMixin],
   components: {
     PricingDiscountsTable,
     WizardTextOrLogoForm
@@ -163,44 +165,12 @@ export default {
     pricingRange
   },
   props: {
-    layer: {
-      type: Object,
-      required: true
-    },
     editable: {
       type: Boolean
     }
   },
   computed: {
-    ...mapGetters('product', ['product']),
-    type() {
-      return this.layer.type;
-    },
-    productPrintAreas() {
-      return this.product.printAreas || [];
-    },
-    layerPrintArea() {
-      return this.productPrintAreas.find(({ _id }) => _id === this.layer.printArea);
-    },
-    layerPrintSizes() {
-      const { printSize, sizes = [] } = this.layerPrintArea;
-      return [
-        printSize,
-        ...sizes
-          .map(({ printSize }) => printSize)
-          .filter(({ _id }) => _id !== printSize._id)
-      ];
-    },
-    layerPrintType() {
-      return this.product.printTypes.find(({ _id }) => _id === this.layer.printType);
-    },
-    layerPrintSize() {
-      return this.layerPrintSizes.find(({ _id }) => _id === this.layer.printSize);
-    },
-    layerPrintPricing() {
-      const printArea = this.layerPrintType.printAreas.find(({ printSizes }) => printSizes.map(({ _id }) => _id).includes(this.layer.printSize)) || this.layerPrintType.printAreas[0];
-      return printArea.printCost;
-    }
+    ...mapGetters(['currency'])
   }
 };
 </script>

package/components/product/wizard/wizard_print_size/wizard_print_area_print_size/wizard-print-area-print-size.vue

@@ -14,7 +14,7 @@
         </div>
         <div class="WizardPrintAreaPrintSize__type-price mt-3">
           <span>
-            {{ getSizePricing(size) | pricingRange }}
+            {{ getSizePricing(size) | pricingRange(currency) }}
           </span>
         </div>
         <v-popover
@@ -56,6 +56,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['currency']),
     ...mapGetters('product', ['product', 'selectedPrintAreas', 'availablePrintTypes']),
     selectedPrintArea() {
       return this.selectedPrintAreas[this.editablePrintArea._id];

package/components/product/wizard/wizard_print_text_or_logo/wizard-print-text-or-logo.vue

@@ -33,6 +33,7 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex';
 import { getLayerModel } from '@lancom/shared/assets/js/models/product-layers';
+import { getPrintAreaByName } from '@lancom/shared/assets/js/models/print-area';
 import WizardTextOrLogoForm from './wizard_text_or_logo_form/wizard-text-or-logo-form';
 
 const DEFAULT_LAYER = {
@@ -55,7 +56,15 @@ export default {
   },
   computed: {
     ...mapGetters('layers', ['editableLayers']),
-    ...mapGetters('product', ['editableColor', 'selectedPrintAreas', 'selectedPrintTypes', 'editablePrintAreas']),
+    ...mapGetters('product', [
+      'product',
+      'editorSize',
+      'editableColor',
+      'selectedPrintAreas',
+      'selectedPrintTypes',
+      'editablePrintAreas',
+      'editableSide'
+    ]),
     isValidLayers() {
       return !this.layers.some(l => !l.copy && !l.file);
     }
@@ -78,9 +87,21 @@ export default {
           const editablePrintArea = this.editablePrintAreas.find(pa => pa._id === printAreaId);
           const selectedPrintArea = this.selectedPrintAreas[printAreaId];
           const selectedPrintType = this.selectedPrintTypes[printAreaId];
+          const { width, height } = this.editorSize;
+          const { center: { top, left } } = getPrintAreaByName({
+            printArea: editablePrintArea._id,
+            printSize: selectedPrintArea,
+            printAreaOffsets: editablePrintArea?.printAreaOffsets,
+            editorWidth: width,
+            editorHeight: height
+          }, this.product);
+          
           const data = {
             type: layer.type,
             colorId: this.editableColor?._id,
+            sideId: editablePrintArea.side,
+            top,
+            left,
             properties: {
               notes: layer.notes,
               printArea: editablePrintArea._id,

package/components/product/wizard/wizard_print_type/wizard_print_area_print_type/wizard-print-area-print-type.vue

@@ -25,7 +25,7 @@
         </div>
         <div class="WizardPrintAreaPrintType__type-price mt-7">
           <span>
-            {{ getPrinTypePricing(type) | pricingRange }}
+            {{ getPrinTypePricing(type) | pricingRange(currency) }}
           </span>
         </div>
         <v-popover
@@ -65,6 +65,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['currency']),
     ...mapGetters('product', ['selectedPrintAreas', 'selectedPrintTypes', 'product', 'availablePrintTypes', 'selectedPrintUnderbases']),
     selectedPrintArea() {
       return this.selectedPrintAreas[this.editablePrintArea._id];

package/components/products/product_list/product-list.scss

@@ -10,9 +10,9 @@
     }
   }
   &__item-wrapper {
-    width: 330px;
+    width: 270px;
     height: 450px;
-    margin: 0 0 25px 25px;
+    margin: 0 0 15px 15px;
     position: relative;
     z-index: 1;
     &--active {

package/components/products/product_list_product/product-list-product.scss

@@ -17,7 +17,7 @@
   &__colors {
     display: flex;
     flex-wrap: wrap;
-    margin: 14px 25px 20px 25px;
+    margin: 2px 25px 20px 25px;
   }
   &__color {
     margin: 0px;
@@ -53,8 +53,8 @@
     position: relative;
     transition: background-color 0.5s ease;
     background-color: white;
-    height: 330px;
-    width: 340px;
+    height: 300px;
+    width: 270px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -71,9 +71,10 @@
     }
   }
   &__brand {
-    width: 54px;
+    max-width: 54px;
+    max-height: 44px;
     top: 10px;
-    left: 5px;
+    left: 10px;
     position: absolute;
     z-index: 10;
     opacity: 0.7;
@@ -133,16 +134,11 @@
     flex-direction: column;
     align-items: center;
     &-item {
-      margin-top: 4px;
       padding: 0 20px;
     }
     &-name {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      max-width: 180px;
-      margin-right: 5px;
       display: block;
+      text-align: center;
     }
   }
 }

package/components/products/product_list_product/product-list-product.vue

@@ -35,25 +35,17 @@
         v-if="product.isTearAwayTag"
         class="ProductListProduct__tear-away-tag"
         src="~static/images/tear-away-tag.svg" />
-      <div class="ProductListProduct__gender">
+      <!-- <div class="ProductListProduct__gender">
         <span>{{ product.gender }}</span>
-      </div>
+      </div> -->
     </a>
     <div class="ProductListProduct__info">
       <div class="ProductListProduct__info-item">
         <a :href="productLink" class="lc_h4 row">
           <div>
-            <v-popover trigger="hover">
-              <span class="ProductListProduct__info-name">
-                {{ product.name }}
-              </span>
-              <template slot="popover">
-                {{ product.name }}
-              </template>
-            </v-popover>
-          </div>
-          <div>
-            | {{ product.SKU }}
+            <span class="ProductListProduct__info-name">
+              {{ product.name }} | {{ product.SKU }}
+            </span>
           </div>
         </a>
       </div>
@@ -67,12 +59,12 @@
         class="ProductListProduct__info-item lc_h4">
         {{ product.minPrice | price(currency) }} - {{ product.maxPrice | price(currency) }}
       </div>
-      <div class="ProductListProduct__info-item mt-9 lc_caption">
+      <div class="ProductListProduct__info-item mt-2 lc_caption">
         {{ product.colors.length }} {{ product.colors.length === 1 ? 'Colour' : 'Colours' }} | Size: {{ product.sizes | sizesRange }}
       </div>
       <div
         v-if="full"
-        class="ProductListProduct__info-item mt-9 lc_caption visible-full">
+        class="ProductListProduct__info-item mt-2 lc_caption visible-full">
         {{ product.fabricInfoShort }} | {{ product.materialWeight }} gsm
       </div>
       <div

package/components/the_aside/the-aside.vue

@@ -67,6 +67,7 @@ export default {
         render: h => h(
           component,
           {
+            props: params?.props,
             on: { close: this.hide, ...events }
           }
         )

package/components/the_navbar/the-navbar.scss

@@ -10,7 +10,7 @@
     top: 0;
     left: 0;
     right: 0;
-    z-index: 101;
+    z-index: 9999;
     @media (max-width: $bp-small-max) {
       height: $mobile_navbar_height;
     }

package/feeds/google-shopping.js

@@ -1,5 +1,5 @@
-async function googleLocalShoppingFeed(axios, config, availableStores) {
-  const result = await googleShoppingFeed(axios, config, availableStores);
+async function googleLocalShoppingFeed(axios, config, availableStores, country) {
+  const result = await googleShoppingFeed(axios, config, availableStores, country);
   
   const fields = [
     'g:availability',
@@ -14,8 +14,8 @@ async function googleLocalShoppingFeed(axios, config, availableStores) {
     .map(i => fields.reduce((item, field) => ({ ...item, [field]: i[field] }), {}));
   return result;
 }
-async function googleShoppingFeed(axios, config, availableStores) {
-  const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/products?host=${config.HOST_NAME}`);
+async function googleShoppingFeed(axios, config, availableStores, country) {
+  const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/products?host=${config.HOST_NAME}&country=${country || ''}`);
   const spliceFirstImage = images => (images || []).splice(0, 1)[0];
   const getImages = images => (images || []).length > 0 ? images : null;
   const channel = {
@@ -68,7 +68,7 @@ async function googleShoppingFeed(axios, config, availableStores) {
                 'g:color': { _text: sp.color.name },
                 'g:image_link': { _text: sp.image || image },
                 'g:additional_image_link': (sp.image ? [image, ...images] : images).map(i => ({ _text: i })),
-                'g:price': { _text: `${(sp.price || 0)} AUD` },
+                'g:price': { _text: `${(sp.price || 0)} ${sp.currency || 'AUD'}` },
                 'g:availability': { _text: sp.quantityStock > 0 ? 'in_stock' : 'out_of_stock' },
                 'g:google_product_category': { _text: product.feedGoogleProductCategory || 2047 },
                 'g:product_type': { _text: product.feedProductType || `Home > Products > ${product.productType.name}`, },

package/layouts/error.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <component
+      :is="errorPage"
+      :error="error" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import Error404 from '@lancom/shared/components/errors/404.vue';
+import Error500 from '@lancom/shared/components/errors/500.vue';
+import { generateShopHeadScripts } from '@lancom/shared/utils/head';
+
+export default {
+  name: 'ErrorLayout',
+  props: {
+    error: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  head() {
+    return {
+      title: `${this.error.statusCode} Error`,
+      ...generateShopHeadScripts(this.shop)
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    errorPage() {
+      if (this.error.statusCode === 404) {
+        return Error404;
+      }
+      return Error500;
+    }
+  }
+};
+</script>