@lancom/shared 0.0.189 → 0.0.190

package/components/common/price.vue

@@ -0,0 +1,26 @@
+<template>
+  <span>
+    {{ price | priceWithTax(pricingSettings) }}
+  </span>
+</template>
+  
+<script>
+import { priceWithTax } from '@lancom/shared/assets/js/utils/filters';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'Price',
+  filters: {
+    priceWithTax
+  },
+  props: {
+    price: {
+      type: Number
+    }
+  },
+  computed: {
+    ...mapGetters(['pricingSettings'])
+  }
+};
+</script>
+  

package/components/product/gallery/gallery.scss

@@ -5,9 +5,10 @@
 }
 ::v-deep .slick-arrow {
   position: absolute;
+  color: white;
   top: 50%;
-  background-color: $black;
-  background-image: url(../../../static/icons/arrow-left.svg);
+  background-color: $gray;
+  background-image: url(../../../static/icons/arrow-right.svg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 25px 25px;
@@ -105,6 +106,12 @@
         font-size: 18px;
         color: $gray_main;
         margin-top: 4px;
+        &-info {
+          font-size: 14px;
+          margin-top: 5px;
+          color: $gray_main;
+          font-style: italic;
+        }
       }
     }
   }

package/components/product/gallery/gallery.vue

@@ -38,7 +38,10 @@
             <div
               v-if="image.print.pricing"
               class="Gallery__big-print-price">
-              {{ image.print.pricing.price | price }} for ({{ image.print.pricing.min || 1 }}+)
+              Printing at <price :price="image.print.pricing.price" /> for ({{ image.print.pricingMin.min || 1 }}+)
+            </div>
+            <div class="Gallery__big-print-price-info">
+              example only
             </div>
           </div>
         </div>
@@ -100,16 +103,15 @@
 import { mapGetters, mapActions } from 'vuex';
 import VueSlickCarousel from 'vue-slick-carousel';
 import 'vue-slick-carousel/dist/vue-slick-carousel.css';
-import { staticLink, price } from '@lancom/shared/assets/js/utils/filters';
+import { staticLink } from '@lancom/shared/assets/js/utils/filters';
 import { isValidImageTypes } from '@lancom/shared/assets/js/utils/colors';
+import Price from '@lancom/shared/components/common/price';
 
 export default {
   name: 'Gallery',
-  filters: {
-    price
-  },
   components: {
-    VueSlickCarousel
+    VueSlickCarousel,
+    Price
   },
   props: {
     slidesPerRow: {
@@ -152,11 +154,15 @@ export default {
       const images = this.filterType ? this.images.filter(i => this.isValidImageByFilter(this.filterType, i)) : this.images;
       return images.map(image => {
         const printType = this.product?.printTypes.find(({ _id }) => _id === image.printType);
-        const { printCost } = printType?.printAreas.find(({ printSizes }) => (printSizes || []).some(({ _id }) => _id === image.printSize)) || printType?.printAreas[0] || { printCost: [] };
+        const printArea = printType?.printAreas.find(({ printSizes }) => (printSizes || []).some(({ _id }) => _id === image.printSize)) || printType?.printAreas[0] || { printCost: [] };
+        const { printCost, printSizes } = printArea;
+        const printSize = (printSizes || []).find(({ _id }) => _id === image.printSize);
         const pricing = printCost[printCost.length - 1];
+        const pricingMin = printCost[0];
         const print = printType && {
-          name: printType.name,
-          pricing
+          name: printSize ? `${printType.name} (${printSize.name})` : printType.name,
+          pricing,
+          pricingMin
         };
         const color = this.availableColors.find(({ _id }) => _id === image.color);
         return { ...image, print, colorName: color?.name };

package/mixins/product-preview.js

@@ -5,7 +5,7 @@ import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
 const getBgStyle = img => img && ({ 'background-image': `url("${img}")` });
 
 const loadHolder = {
-  canLoadImages: false,
+  canLoadImages: true,
   canLoadColorImages: false,
   canLoadBackImages: false
 };
@@ -84,10 +84,8 @@ const productPreview = {
     }
   },
   mounted() {
+    this.loadHolder.canLoadImages = true;
     if (process.client) {
-      setTimeout(() => {
-        this.loadHolder.canLoadImages = true;
-      }, 0);
       setTimeout(() => {
         this.loadHolder.canLoadBackImages = true;
         this.loadHolder.canLoadColorImages = true;

package/package.json

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

package/static/icons/arrow-left.svg

@@ -1,3 +1,3 @@
-<svg width="14" height="23" viewBox="0 0 14 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="14" height="23" viewBox="0 0 14 23" fill="white" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.6963 20.7394L3.64439 11.6999L12.6974 2.66034C13.1289 2.22936 13.1289 1.5322 12.6974 1.10122C12.2659 0.671337 11.5669 0.671337 11.1354 1.10122L1.30249 10.9198C0.871025 11.3497 0.871025 12.0479 1.30249 12.4778L11.1353 22.2964C11.5668 22.7263 12.2669 22.7263 12.6984 22.2964C13.1278 21.8676 13.1278 21.1693 12.6963 20.7394Z" fill="#343750"/>
 </svg>

package/static/icons/arrow-right.svg

@@ -1,3 +1,3 @@
-<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="26" height="26" viewBox="0 0 26 26" fill="white" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.30369 4.26051L16.3556 13.3L7.3026 22.3395C6.87114 22.7705 6.87114 23.4677 7.3026 23.8987C7.73406 24.3285 8.4331 24.3285 8.86457 23.8987L18.6975 14.0801C19.129 13.6502 19.129 12.9519 18.6975 12.5221L8.86466 2.70349C8.43319 2.2736 7.73306 2.2736 7.3016 2.70349C6.87223 3.13228 6.87223 3.83062 7.30369 4.26051Z" fill="#343750"/>
 </svg>