@lancom/shared 0.0.296 → 0.0.298

package/assets/scss/ui_kit/_table.scss

@@ -18,7 +18,7 @@
   th {
     font-size: 16px;
     line-height: 170%;
-    color: $gray;
+    color: $dark_blue;
     vertical-align: middle;
   }
   &:not(.tight-rows) tr {

package/components/checkout/cart/cart_shipments_pricing/cart-shipments-pricing.vue

@@ -94,7 +94,8 @@ export default {
       'removeSupplier'
     ]),
     async removeSupplierConfirm(supplier) {
-      const message = `Will be removed all products related to brands: ${commaArray(supplier.brands.map(b => b.name))}. Are you sure?`;
+
+      const message = `All products from ${commaArray(supplier.brands.map(b => b.name))} will be removed from the cart. Click OK to proceed`;
       const reset = await this.showConfirmationModal(message);
 
       if (reset) {

package/components/common/price.vue

@@ -1,11 +1,11 @@
 <template>
   <span>
-    {{ price | priceWithTax(pricingSettings, currency) }}
+    {{ displayPrice }}
   </span>
 </template>
   
 <script>
-import { priceWithTax } from '@lancom/shared/assets/js/utils/filters';
+import { priceWithTax, price } from '@lancom/shared/assets/js/utils/filters';
 import { mapGetters } from 'vuex';
 
 export default {
@@ -16,10 +16,17 @@ export default {
   props: {
     price: {
       type: Number
+    },
+    withGst: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {
-    ...mapGetters(['pricingSettings', 'currency'])
+    ...mapGetters(['pricingSettings', 'currency']),
+    displayPrice() {
+      return this.withGst ? priceWithTax(this.price, this.pricingSettings, this.currency) : price(this.price, this.currency);
+    }
   }
 };
 </script>

package/components/editor/editor.vue

@@ -56,9 +56,20 @@
         </div>
       </breakpoint>
       <div class="col-md-6 col-12 Editor__col">
-        <client-only>
-          <editor-workspace class="Editor__workspace" />
-        </client-only>
+        <breakpoint
+          name="sm"
+          mode="down">
+          <client-only>
+            <editor-product-details />
+          </client-only>
+        </breakpoint>
+        <breakpoint
+          name="sm"
+          mode="up">
+          <client-only>
+            <editor-workspace class="Editor__workspace" />
+          </client-only>
+        </breakpoint>
       </div>
     </div>
     <breakpoint

package/components/editor/editor_layers/editor_layers_layer/editor-layers-layer.vue

@@ -43,7 +43,7 @@
           <div
             class="EditorLayersLayer__quality-value"
             :class="artQuality.class">
-            {{ artQuality.value }}
+            {{ artQuality.value || artQuality.class }}
           </div>
         </div>
       </div>
@@ -105,6 +105,7 @@ export default {
       if (this.layer.type !== 'art') {
         return null;
       }
+      const isVector = /\.(ai|pdf|svg|eps)$/.test((this.layer.url || '').toLowerCase());
       let quality;
       switch (true) {
         case this.layer.dpi < 75:
@@ -113,13 +114,13 @@ export default {
         case this.layer.dpi >= 75 && this.layer.dpi < 100:
           quality = 'low quality';
           break;
-        case this.layer.dpi >= 100:
+        case this.layer.dpi >= 100 || isVector:
           quality = 'good quality';
           break;
       }
       return {
         class: quality ? quality.replace(' ', '_') : null,
-        value: `${quality} / ${this.layer.dpi} DPI`
+        value: isVector ? null : `${quality} / ${this.layer.dpi} DPI`
       };
     }
   },

package/components/editor/editor_print_area_options/editor_print_area_option/editor-print-area-option.scss

@@ -18,6 +18,14 @@
       background-color: $green;
     }
   }
+  &__info {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-width: 50px;
+  }
   &__suboptions {
     position: absolute;
     bottom: 100%;

package/components/editor/editor_print_area_options/editor_print_area_option/editor-print-area-option.vue

@@ -15,14 +15,14 @@
           [productType]: true
         }">
       </div>
-      <div>
+      <div class="EditorPrintAreaOption__info">
         <div class="lc_caption">
           {{ option.label }}
         </div>
         <div class="lc_regular10">
-          <span v-if="option.printArea && calcPrintPrice(option) > 0">
-            {{ calcPrintPrice(option) | priceWithTax(pricingSettings, currency) }}
-          </span>
+          <price
+            :price="calcPrintPrice(option)"
+            :with-gst="priceIncludeGST" />
         </div>
       </div>
     </div>
@@ -58,9 +58,13 @@
 import { mapGetters } from 'vuex';
 import { priceWithTax, priceInRange } from '@lancom/shared/assets/js/utils/filters';
 import { getProductPrintsAreasPrices } from '@lancom/shared/assets/js/models/print-area';
+import Price from '@lancom/shared/components/common/price';
 
 export default {
   name: 'EditorPrintAreaOption',
+  components: {
+    Price
+  },
   filters: {
     priceWithTax
   },
@@ -92,7 +96,8 @@ export default {
     ]),
     ...mapGetters('product', [
       'usedSimpleProducts',
-      'selectedPrintType'
+      'selectedPrintType',
+      'priceIncludeGST'
     ]),
     printsPricing() {
       return getProductPrintsAreasPrices(this.product, this.selectedPrintType);

package/components/editor/editor_product_details/editor-product-details.scss

@@ -1,4 +1,5 @@
 @import "@/assets/scss/variables";
+
 .EditorProductDetails {
   &__wrapper {
     padding-top: 36px;
@@ -7,6 +8,11 @@
     display: flex;
     align-items: center;
     margin-top: 5px;
+    @media (max-width: $bp-extra-small-max) {
+      flex-direction: column;
+      align-items: start;
+      margin-top: 10px;
+    }
     &-logo {
       img {
         max-width: 75px;
@@ -16,6 +22,9 @@
     &-info {
       margin-left: 10px;
       flex-grow: 1;
+      @media (max-width: $bp-extra-small-max) {
+        margin-left: 0px;
+      }
     }
     &-row {
       display: flex;
@@ -59,4 +68,17 @@
     padding: 10px;
     margin-top: 10px;
   }
+  &__product-image {
+    width: 100%;
+    text-align: center;
+    margin: 15px 0;
+    display: none;
+    @media (max-width: $bp-extra-small-max) {
+      margin-left: block;
+    }
+    img {
+      width: 100%;
+      max-width: 330px;
+    }
+  }
 }

package/components/editor/editor_product_details/editor-product-details.vue

@@ -21,11 +21,14 @@
               :delay="{ show: 200, hide: 400 }"
               popover-class="tooltip popover white"
               class="EditorProductDetails__discounts-table">
-              <span class="lc_semibold22 lc_black EditorProductDetails__dashed-underline">
-                {{ defaultSimpleProductPricing[0].price | priceWithTax(pricingSettings, currency) }}
-              </span>
+              <price
+                class="lc_semibold22 lc_black EditorProductDetails__dashed-underline"
+                :price="defaultSimpleProductPricing[0].price"
+                :with-gst="inclGST" />
               <template slot="popover">
-                <pricing-discounts-table :prices="defaultSimpleProductPricing" />
+                <pricing-discounts-table
+                  :prices="defaultSimpleProductPricing"
+                  :with-gst="inclGST" />
               </template>
             </v-popover>
           </span>
@@ -45,10 +48,18 @@
                   :items="printTypePrices"
                   :bordered="true"
                   :striped="false"
+                  :with-gst="inclGST"
                   class="EditorProductDetails__prints-table" />
               </template>
             </v-popover>
           </span>
+          <span class="ml-10">
+            <checkbox
+              v-model="inclGST"
+              :dark="true">
+              <div class="ml-5">Inc. {{ taxName }}</div>
+            </checkbox>
+          </span>
         </div>
         <div class="EditorProductDetails__header-row">
           <span class="EditorProductDetails__product-link">
@@ -68,20 +79,27 @@
       class="EditorProductDetails__available-warning">
       Product Not Available in {{ country.name }}
     </div>
-    <fragment
+    <div
+      v-if="mainProductImageSrc"
+      class="EditorProductDetails__product-image">
+      <img :src="mainProductImageSrc" />
+    </div>
+    <div
       v-if="productDetailsLoaded && productAvailableInCurrentCountry">
       <div class="EditorProductDetails__section">
-        <product-colors-selector :has-another-print-btn="false" />
+        <product-colors-selector
+          :has-another-print-btn="false"
+          :has-toggle-gst="false" />
       </div>
       <div class="EditorProductDetails__section">
         <editor-pricing :has-cart-btn="false" />
       </div>
-    </fragment>
+    </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapMutations } from 'vuex';
 import ProductColorsSelector from '@lancom/shared/components/product/product_colors_selector/product-colors-selector';
 import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
 import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
@@ -89,6 +107,7 @@ import modals from '@lancom/shared/mixins/modals';
 import { staticLink, priceWithTax } from '@lancom/shared/assets/js/utils/filters';
 import PricingTable from '@lancom/shared/components/common/pricing_table/pricing-table';
 import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
+import Price from '@lancom/shared/components/common/price';
 
 export default {
   name: 'EditorProductDetails',
@@ -96,7 +115,8 @@ export default {
     ProductColorsSelector,
     PricingDiscountsTable,
     EditorPricing,
-    PricingTable
+    PricingTable,
+    Price
   },
   filters: {
     priceWithTax,
@@ -104,8 +124,12 @@ export default {
   },
   mixins: [modals],
   computed: {
+    ...mapGetters(['taxName']),
     ...mapGetters('product', [
       'product',
+      'editableColor',
+      'images',
+      'priceIncludeGST',
       'productDetailsLoaded',
       'defaultSimpleProduct',
       'selectedPrintType',
@@ -118,6 +142,14 @@ export default {
       'pricingSettings',
       'country'
     ]),
+    inclGST: {
+      get() {
+        return this.priceIncludeGST;
+      },
+      set(value) {
+        this.setPriceIncludeGST(value);
+      }
+    },
     defaultSimpleProductPricing() {
       return (this.isPrintPricing ? this.defaultSimpleProduct?.pricing : this.defaultSimpleProduct?.unprintedPricing);
     },
@@ -138,7 +170,16 @@ export default {
         });
         return sizes;
       }, new Map()).values()];
+    },
+    mainProductImage() {
+      return this.images.find(i => i.color === this.editableColor?._id) || this.images[0];
+    },
+    mainProductImageSrc() {
+      return this.mainProductImage && this.mainProductImage.large;
     }
+  },
+  methods: {
+    ...mapMutations('product', ['setPriceIncludeGST']),
   }
 };
 </script>

package/components/editor/editor_workspace/editor-workspace.scss

@@ -9,8 +9,8 @@
     &-container {
       position: relative;
       margin: 0 auto;
-      width: 296px;
-      height: 296px;
+      width: 310px;
+      height: 370px;
       max-width: 100%;
       @media (min-width: $bp-small-min) {
         width: 580px;
@@ -35,7 +35,7 @@
         top: -90px;
         left: calc((-720px + 100vw) / 2);
         max-width: none;
-        z-index: 9999;
+        z-index: 1003;
       }
     }
     &-toggle {

package/components/editor/editor_workspace/editor-workspace.vue

@@ -100,11 +100,6 @@
         @option-mouseleave="toogleBoundBox(false, $event)">
       </editor-print-area-options>
     </div>
-    <breakpoint
-      name="md"
-      mode="down">
-      <editor-pricing v-if="productDetailsLoaded" />
-    </breakpoint>
   </div>
 </template>
 

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.scss

@@ -6,6 +6,18 @@
     transition: background-color 0.5s ease;
     background-color: white;
   }
+  &__toggle-wireframe {
+    position: absolute;
+    z-index: 1001;
+    background: gainsboro;
+    padding: 6px;
+    top: 5px;
+    font-size: 14px;
+    cursor: pointer;
+    &--active {
+      background: rgb(196, 226, 236);
+    }
+  }
   &__delete-object {
     position: absolute;
     z-index: 2;

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.vue

@@ -9,6 +9,15 @@
     }"
     @mouseover="toogleBoundBox(true)"
     @mouseleave="toogleBoundBox(false)">
+    <div
+      v-if="hasWireframeImage"
+      class="EditorWorkspaceSide__toggle-wireframe"
+      :class="{
+        'EditorWorkspaceSide__toggle-wireframe--active': visibleWireframe
+      }"
+      @click.stop.prevent="toggleWireframeImage">
+      {{ visibleWireframe ? 'Hide Wireframe' : 'Show Wireframe' }}
+    </div>
     <div
       v-if="deleteButtonPos"
       :style="deleteButtonPosition"
@@ -98,6 +107,7 @@ export default {
   },
   data() {
     return {
+      visibleWireframe: false,
       fabricHelper: null,
       redrawWithThrottle: throttle(this.redraw, 100, { trailing: false }),
       saveLayersAsImageWithDebounce: debounce(this.saveLayersAsImage, 100),
@@ -115,12 +125,22 @@ export default {
     ...mapGetters('product', [
       'product',
       'layers',
+      'images',
       'editableColor',
       'editableLayers',
       'selectedLayer',
       'editorSize',
       'editModeSelectedLayer'
     ]),
+    hasWireframeImage() {
+      return !!this.wireframeImage;
+    },
+    wireframeImage() {
+      return this.images.find(i => i.types?.includes('designer') && i.types?.includes(this.side));
+    },
+    sideEditableLayers() {
+      return this.editableLayers.filter(l => l.sideId === this.side);
+    },
     printAreaLayers() {
       return this.editableLayers.filter(l => !this.printArea || l.printArea === this.printArea._id);
     },
@@ -171,6 +191,9 @@ export default {
     editableColor() {
       this.updateBackgroundImage();
     },
+    visibleWireframe() {
+      this.updateBackgroundImage();
+    },
     layers() {
       this.redrawWithThrottle();
     },
@@ -186,6 +209,7 @@ export default {
     }
   },
   mounted() {
+    this.checkVisibleWireframe();
     this.initEventsListeners();
     this.initCanvas();
     this.handleWorkspaceSize();
@@ -207,6 +231,12 @@ export default {
     ...mapMutations('layers', [
       'setLayersThumbnail'
     ]),
+    checkVisibleWireframe() {
+      this.visibleWireframe = this.sideEditableLayers.length > 0;
+    },
+    toggleWireframeImage() {
+      this.visibleWireframe = !this.visibleWireframe;
+    },
     adjustSelectedArtDPI() {
       const measure = this.fabricHelper.getEditorDPI();
       const scale = measure / 75;
@@ -217,7 +247,7 @@ export default {
     },
     calcWorkspaceSize() {
       const sizes = {
-        xs: 296,
+        xs: 330,
         sm: 580,
         md: 430,
         lg: 600,
@@ -287,8 +317,7 @@ export default {
       this.saveLayersAsImageWithDebounce();
     },
     async addLayersToCanvas() {
-      const layers = this.editableLayers.filter(l => l.sideId === this.side);
-      for (const layer of layers) {
+      for (const layer of this.sideEditableLayers) {
         const params = {
           layer,
           active: this.isLayerSelected(layer)
@@ -301,7 +330,8 @@ export default {
     },
     updateBackgroundImage() {
       const type = this.side === 'front' ? COLORS_IMAGES_TYPES.FRONT : COLORS_IMAGES_TYPES.BACK;
-      const imageUrl = getLargeColorImage(this.product, type, this.editableColor);
+      const wireframeImageUrl = this.visibleWireframe && this.wireframeImage?.large;
+      const imageUrl = wireframeImageUrl || getLargeColorImage(this.product, type, this.editableColor);
       if (this.backgroundImage && this.backgroundImageUrl === imageUrl) {
         return this.fabricHelper.setBackgroundImage(this.backgroundImage);
       }
@@ -325,6 +355,7 @@ export default {
     createTextLayer() {
       window.scrollTo(0, 0);
       this.createLayer({ type: 'text', isEditMode: true });
+      this.visibleWireframe = true;
     },
     setDeleteButtonPosition(pos) {
       this.deleteButtonPos = pos;

package/components/editor/mobile_editor_product_details/mobile-editor-product-details.scss

@@ -5,10 +5,10 @@
   &__menu {
     position: fixed;
     right: 0;
-    bottom: 0;
+    top: calc(100vh - 78px);
     left: 0;
     height: 78px;
-    z-index: 10000;
+    z-index: 999999;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     background-color: $white_high_emphasis;

package/components/editor/mobile_editor_product_details/mobile-editor-product-details.vue

@@ -7,7 +7,7 @@
         @click="show('details')">
         <i class="icon-product MobileEditorProductDetails__menu-action-icon"></i>
         <span class="MobileEditorProductDetails__menu-action-label">
-          Product
+          Editor
         </span>
       </div>
       <div
@@ -60,7 +60,7 @@
             @click="hide"></i>
         </div>
         <div class="MobileEditorProductDetails__content custom-scrollbar-container">
-          <editor-product-details v-if="currentTab === 'details'" />
+          <editor-workspace v-if="currentTab === 'details'" />
           <editor-layers v-if="currentTab === 'layers'" />
         </div>
       </div>
@@ -71,19 +71,17 @@
 <script>
 import { createNamespacedHelpers } from 'vuex';
 import { EventBus } from '@lancom/shared/assets/js/utils/event-bus';
-import EditorProductDetails from '../editor_product_details/editor-product-details';
+import EditorWorkspace from '../editor_workspace/editor-workspace';
 import EditorLayers from '../editor_layers/editor-layers';
 
 const { mapMutations } = createNamespacedHelpers('product');
 
 export default {
   name: 'MobileEditorProductDetails',
-
   components: {
-    EditorProductDetails,
+    EditorWorkspace,
     EditorLayers
   },
-
   props: {
     addToCartDisabled: {
       type: Boolean,

package/components/order/order_product_prints_preview/order-product-prints-preview.scss

@@ -0,0 +1,9 @@
+.ProductPrintsPreview {
+  &__wrapper {
+    text-align: center;
+  }
+  &__preview {
+    height: 350px;
+    width: 350px;
+  }
+}

package/components/order/order_product_prints_preview/order-product-prints-preview.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="ProductPrintsPreview__wrapper d-flex justify-content-center">
+    <div
+      v-for="(side, index) of sides"
+      :key="index">
+      <div class="ProductPrintsPreview__preview">
+        <product-side-with-print
+          :product="product"
+          :side="side"
+          size="medium" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
+
+export default {
+  name: 'ProductPrintsPreview',
+  components: {
+    ProductSideWithPrint
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    product: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    sides() {
+      return Object.keys(this.product.printsThumbnails || {});
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-product-prints-preview.scss';
+</style>

package/components/order/order_view/order_product_color_simple_products/order-product-color-simple-products.mixin.js

@@ -17,6 +17,18 @@ export default {
     defaultPreview: {
       type: Boolean,
       default: true
+    },
+    withBigImage: {
+      type: Boolean,
+      default: false
+    },
+    withImage: {
+      type: Boolean,
+      default: true
+    },
+    withTotals: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

package/components/order/order_view/order_product_color_simple_products/order-product-color-simple-products.scss

@@ -8,17 +8,24 @@
       flex-direction: column; 
       align-items: center;
     }
+    &--column {
+      flex-direction: column;
+    }
   }
   &__image-wrapper {
     width: 70px;
+    margin-right: 20px;
     @media (max-width: $bp-extra-small-max) {
       width: 200px;
       margin-top: 20px;
     }
+    &--large {
+      width: 900px;
+      display: flex;
+    }
   }
   &__info {
     flex-grow: 1;
-    margin-left: 20px;
     @media (max-width: $bp-medium-max) {
       margin-left: 5px;
     }
@@ -35,6 +42,10 @@
       width: 200px;
       height: 200px;
     }
+    &--large {
+      width: 400px;
+      height: 400px;
+    }
   }
 
   &__features {

package/components/order/order_view/order_product_color_simple_products/order-product-color-simple-products.vue

@@ -1,8 +1,20 @@
 <template>
-  <div class="OrderProductColorSimpleProducts__wrapper">
-    <div class="OrderProductColorSimpleProducts__image-wrapper">
+  <div
+    class="OrderProductColorSimpleProducts__wrapper"
+    :class="{
+      'OrderProductColorSimpleProducts__wrapper--column': withBigImage
+    }">
+    <div
+      v-if="withImage"
+      class="OrderProductColorSimpleProducts__image-wrapper"
+      :class="{
+        'OrderProductColorSimpleProducts__image-wrapper--large': withBigImage
+      }">
       <div
         class="OrderProductColorSimpleProducts__image"
+        :class="{
+          'OrderProductColorSimpleProducts__image--large': withBigImage
+        }"
         @click="showImage(images, 0)">
         <product-side-with-print
           :product="group"
@@ -10,6 +22,19 @@
           side="front"
           size="medium" />
       </div>
+      <div
+        v-if="entity && entity.printsThumbnails && entity.printsThumbnails.back"
+        class="OrderProductColorSimpleProducts__image"
+        :class="{
+          'OrderProductColorSimpleProducts__image--large': withBigImage
+        }"
+        @click="showImage(images, 1)">
+        <product-side-with-print
+          :product="group"
+          :default-preview="defaultPreview"
+          side="back"
+          size="medium" />
+      </div>
     </div>
     <div class="OrderProductColorSimpleProducts__info">
       <div class="OrderProductColorSimpleProducts__features">
@@ -48,7 +73,9 @@
               {{ group.amount }}
             </div>
           </div>
-          <div class="OrderProductColorSimpleProducts__total mt-6">
+          <div
+            v-if="withTotals"
+            class="OrderProductColorSimpleProducts__total mt-6">
             <div class="lc_title-small">
               Total price:
             </div>

package/components/order/order_view/order_view_product/order-view-product.vue

@@ -33,18 +33,23 @@
           :order="order"
           :entity="product"
           :group="group"
+          :with-image="withImage"
+          :with-big-image="withBigImage"
+          :with-totals="withTotals"
           :default-preview="groupedProducts.size === 1"
           class="OrderViewProduct__item" />
       </div>
       <div
-        v-if="hasPrints"
+        v-if="withPrints && hasPrints"
         class="OrderViewProduct__decorations">
         <order-product-prints
           :order="order"
           :entity="product"
           :responsive="responsive" />
       </div>
-      <div class="OrderViewProduct__subtotal lc_title">
+      <div
+        v-if="withTotals"
+        class="OrderViewProduct__subtotal lc_title">
         Subtotal: {{ totalPrice | price(order.currency) }}
       </div>
     </div>
@@ -87,6 +92,22 @@ export default {
     responsive: {
       type: Boolean,
       default: true
+    },
+    withImage: {
+      type: Boolean,
+      default: true
+    },
+    withBigImage: {
+      type: Boolean,
+      default: false
+    },
+    withPrints: {
+      type: Boolean,
+      default: true
+    },
+    withTotals: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

package/components/product/gallery/gallery.vue

@@ -148,8 +148,11 @@ export default {
     hasValidFilters() {
       return this.validFilters.length > 1;
     },
+    galleryImages() {
+      return this.images.filter(i => !(i.types || []).includes('designer'));
+    },
     validFilters() {
-      return this.filters.filter(filter => (this.images || []).some(i => this.isValidImageByFilter(filter, i)));
+      return this.filters.filter(filter => (this.galleryImages || []).some(i => this.isValidImageByFilter(filter, i)));
     },
     currentImage() {
       return this.filteredImages[this.activeIndex];
@@ -164,7 +167,7 @@ export default {
       return this.filteredImages.length > this.slidesPerRow;
     },
     filteredImages() {
-      const images = this.filterType ? this.images.filter(i => this.isValidImageByFilter(this.filterType, i)) : this.images;
+      const images = this.filterType ? this.galleryImages.filter(i => this.isValidImageByFilter(this.filterType, i)) : this.galleryImages;
       return images.map(image => {
         const printType = this.product?.printTypes.find(({ _id }) => _id === image.printType);
         const printArea = printType?.printAreas.find(({ printSizes }) => (printSizes || []).some(({ _id }) => _id === image.printSize)) || printType?.printAreas[0] || { printCost: [] };

package/components/product/product_colors_selector/product-colors-selector.vue

@@ -62,7 +62,9 @@
               ref="colorsSelectorOptions"
               :display-products-count="true"
               class="ProductColorsSelector__section" />
-            <div class="ProductColorsSelector__toggle-gst">
+            <div
+              class="ProductColorsSelector__toggle-gst"
+              v-if="hasToggleGst">
               <checkbox
                 v-model="inclGST"
                 :dark="true"
@@ -112,6 +114,10 @@ export default {
     hasAnotherPrintBtn: {
       type: Boolean,
       default: true
+    },
+    hasToggleGst: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

package/package.json

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