@lancom/shared 0.0.308 → 0.0.309

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

@@ -10,57 +10,6 @@
         <img :src="product.brand.logo | staticLink" />
       </div>
       <div class="EditorProductDetails__header-info">
-        <div class="EditorProductDetails__header-row">
-          <span
-            v-if="defaultSimpleProductPricing"
-            class="lc_regular16 lc_grey1">
-            From {{ currency.isoCode }}
-            <v-popover
-              ref="popover"
-              trigger="hover"
-              :delay="{ show: 200, hide: 400 }"
-              popover-class="tooltip popover white"
-              class="EditorProductDetails__discounts-table">
-              <price
-                class="lc_semibold22 lc_black EditorProductDetails__dashed-underline"
-                :price="defaultSimpleProductPricing[0].price"
-                :with-gst="inclGST" />
-              <template slot="popover">
-                <pricing-discounts-table
-                  :prices="defaultSimpleProductPricing"
-                  :with-gst="inclGST" />
-              </template>
-            </v-popover>
-          </span>
-          <span class="lc_regular16 lc_grey1 ml-6">
-            +
-            <v-popover
-              ref="popover"
-              trigger="hover"
-              :delay="{ show: 200, hide: 400 }"
-              popover-class="tooltip popover white no-paddings"
-              class="EditorProductDetails__discounts-table">
-              <span class="EditorProductDetails__dashed-underline">
-                Printing
-              </span>
-              <template slot="popover">
-                <pricing-table
-                  :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">
             SKU:
@@ -81,6 +30,68 @@
         </div>
       </div>
     </div>
+    <div class="EditorProductDetails__header-row">
+      <span
+        v-if="defaultSimpleProductPricing"
+        class="lc_regular16 lc_grey1">
+        From {{ currency.isoCode }}
+        <price
+          v-if="printsPrice"
+          class="lc_black lc_semibold22"
+          :price="printsPrice + defaultSimpleProductPricing[0].price"
+          :with-gst="inclGST" />
+        <v-popover
+          ref="popover"
+          trigger="hover"
+          :delay="{ show: 200, hide: 400 }"
+          popover-class="tooltip popover white"
+          class="EditorProductDetails__discounts-table">
+          <price
+            class="lc_black EditorProductDetails__dashed-underline"
+            :class="[printsPrice ? 'lc_semibold16' : 'lc_semibold22']"
+            :price="defaultSimpleProductPricing[0].price"
+            :with-gst="inclGST" />
+          <template slot="popover">
+            <pricing-discounts-table
+              :prices="defaultSimpleProductPricing"
+              :with-gst="inclGST" />
+          </template>
+        </v-popover>
+      </span>
+      <span class="lc_regular16 lc_grey1 ml-6">
+        +
+        <v-popover
+          ref="popover"
+          trigger="hover"
+          :delay="{ show: 200, hide: 400 }"
+          popover-class="tooltip popover white no-paddings"
+          class="EditorProductDetails__discounts-table">
+          <span class="EditorProductDetails__dashed-underline">
+            Printing
+          </span>
+          <price
+            v-if="printsPrice"
+            class="lc_black lc_semibold16 EditorProductDetails__dashed-underline"
+            :price="printsPrice"
+            :with-gst="inclGST" />
+          <template slot="popover">
+            <pricing-table
+              :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
       v-if="!productAvailableInCurrentCountry"
       class="EditorProductDetails__available-warning">
@@ -126,7 +137,7 @@ import ProductColorsSelector from '@lancom/shared/components/product/product_col
 import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
 import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
 import modals from '@lancom/shared/mixins/modals';
-import { staticLink, priceWithTax } from '@lancom/shared/assets/js/utils/filters';
+import { staticLink, priceWithTax, price, tax } 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';
@@ -146,6 +157,7 @@ export default {
     RichText
   },
   filters: {
+    price,
     priceWithTax,
     staticLink
   },
@@ -165,12 +177,14 @@ export default {
       'productDetailsLoaded',
       'defaultSimpleProduct',
       'selectedPrintType',
-      'isPrintPricing'
+      'isPrintPricing',
+      'printsPrice'
     ]),
     ...mapGetters('layers', [
       'layerThumbnails'
     ]),
     ...mapGetters([
+      'gstTax',
       'pricingSettings',
       'country'
     ]),

package/components/order/order_view/order_product_prints/order_product_print/order-product-print.vue

@@ -72,7 +72,10 @@ export default {
       return this.print.costType === 'setup only' ? 0 : (this.print.printCost || 0);
     },
     setupCost() {
-      const isFreePricing = this.print.freeSetupOver >= 0 && this.amount > this.print.freeSetupOver;
+      let isFreePricing = this.print.freeSetupOver >= 0 && this.amount > this.print.freeSetupOver;
+      if ((this.print.products || []).indexOf(this.entity.guid) > 0) {
+        isFreePricing = true;
+      }
       return (this.print.costType === 'item cost only' || isFreePricing) ? 0 : (this.print.setupCost || 0);
     },
     total() {

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

@@ -128,7 +128,10 @@ export default {
     },
     totalPrice() {
       const printsTotal = (this.product.prints || []).reduce((total, print) => {
-        const isFreePricing = print.freeSetupOver >= 0 && this.amount > print.freeSetupOver;
+        let isFreePricing = print.freeSetupOver >= 0 && this.amount > print.freeSetupOver;
+        if ((print.products || []).indexOf(this.product.guid) > 0) {
+          isFreePricing = true;
+        }
         const printCost = print.costType === 'setup only' ? 0 : print.printCost;
         const setupCost = (print.costType === 'item cost only' || isFreePricing) ? 0 : print.setupCost;
         return total + this.amount * printCost + setupCost;

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

@@ -18,23 +18,45 @@
       <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>
+        <div v-if="printsPrice > 0">
+          <price
+            class="lc_semibold17 ProductSizeSelectorColor__price"
+            :price="printsPrice + productPrice"
+            :with-gst="withGst" />
+        </div>
+        <div>
+          <v-popover
+            trigger="hover"
+            :delay="{ show: 200, hide: 400 }"
+            popover-class="tooltip popover white"
+            class="ProductSizeSelectorColor__price"
+            :style="{
+              display: productPrice ? 'inline-block' : 'block'
+            }">
+            <span :class="[printsPrice ? 'lc_regular13' : 'lc_semibold17']">
+              {{ productPrice | price(currency) }}
+            </span>
+            <template slot="popover">
+              <div>
+                <pricing-discounts-table
+                  :with-gst="withGst"
+                  :prices="pricing"
+                  :amount="usedSimpleProductsQuantity" />
+              </div>
+            </template>
+          </v-popover>
+          <span
+            v-if="printsPrice > 0"
+            class="lc_regular13">
+            +
+            <price
+              :price="printsPrice"
+              :with-gst="withGst" />
+          </span>
+        </div>
+
+      </div>
       <div class="hidden-md-and-up">
         <div
           v-if="product.quantityStock"
@@ -77,6 +99,7 @@ import PricingDiscountsTable from '@lancom/shared/components/common/pricing_disc
 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';
+import Price from '@lancom/shared/components/common/price';
 
 export default {
   name: 'ProductSizeSelectorColor',
@@ -84,6 +107,7 @@ export default {
     price
   },
   components: {
+    Price,
     PricingDiscountsTable,
     ProductSizeSelectorColorCell
   },
@@ -102,7 +126,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('product', ['isPrintPricing', 'usedSimpleProductsQuantity']),
+    ...mapGetters('product', ['isPrintPricing', 'usedSimpleProductsQuantity', 'printsPrice']),
     ...mapGetters(['gstTax', 'currency']),
     currentQuantityStockLabel() {
       return this.currentQuantityStock > 100 ? '100+' : this.currentQuantityStock;

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

@@ -82,14 +82,14 @@
         </a>
       </div>
       <div
-        v-if="product.minPrice === product.maxPrice"
+        v-if="minPrice === maxPrice"
         class="ProductListProduct__info-item lc_h4">
-        {{ product.minPrice | price(currency) }}
+        {{ minPrice | price(currency) }}
       </div>
       <div
         v-else
         class="ProductListProduct__info-item lc_h4">
-        {{ product.minPrice | price(currency) }} - {{ product.maxPrice | price(currency) }}
+        {{ minPrice | price(currency) }} - {{ maxPrice | price(currency) }}
       </div>
       <div class="ProductListProduct__info-item mt-2 lc_caption">
         {{ product.colors.length }} {{ product.colors.length === 1 ? 'Colour' : 'Colours' }} | Size: {{ product.sizes | sizesRange }}

package/layouts/products.vue

@@ -194,6 +194,14 @@
         numberOfItems: this.count,
         itemListOrder: 'ItemListUnordered',
         itemListElement: this.products.map(product => {
+          const minPrintsPrice = product.minPrintsPrice || 0;
+          const minProductPrice = product.isClearance ? product.minPriceWithoutClearance : product.minPrice;
+          const minPrice = minProductPrice + minPrintsPrice;
+
+          const maxPrintsPrice = product.maxPrintsPrice || 0;
+          const maxProductPrice = product.isClearance ? product.maxPriceWithoutClearance : product.maxPrice;
+          const maxPrice = maxProductPrice + maxPrintsPrice;
+          
           const schema = {
             '@type': 'Product',
             name: product.name,
@@ -203,8 +211,8 @@
               '@type': 'AggregateOffer',
               offerCount: 1,
               name: product.name,
-              highPrice: product.minPrice,
-              lowPrice: product.maxPrice,
+              highPrice: maxPrice,
+              lowPrice: minPrice,
               priceCurrency: this.currency?.isoCode || 'AUD',
               availability: 'InStock'
             }

package/mixins/product-preview.js

@@ -82,10 +82,14 @@ const productPreview = {
       return this.product?.tags.length > 0;
     },
     minPrice() {
-      return this.product.isClearance ? this.product.minPriceWithoutClearance : this.product.minPrice;
+      const printsPrice = this.product.minPrintsPrice || 0;
+      const productPrice = this.product.isClearance ? this.product.minPriceWithoutClearance : this.product.minPrice;
+      return productPrice + printsPrice;
     },
     maxPrice() {
-      return this.product.isClearance ? this.product.maxPriceWithoutClearance : this.product.maxPrice;
+      const printsPrice = this.product.maxPrintsPrice || 0;
+      const productPrice = this.product.isClearance ? this.product.maxPriceWithoutClearance : this.product.maxPrice;
+      return productPrice + printsPrice;
     }
   },
   mounted() {

package/mixins/product-view.js

@@ -65,7 +65,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
   },
   computed: {
     ...mapGetters(['shop', 'gstTax', 'country', 'currency']),
-    ...mapGetters('product', ['product', 'simpleProducts', 'productDetails', 'editableColor', 'images', 'preSetPrints', 'preSetPrintsPriceRange', 'editorSize']),
+    ...mapGetters('product', ['product', 'simpleProducts', 'productDetails', 'editableColor', 'images', 'preSetPrints', 'editorSize', 'printsPrice']),
     pageItemImage() {
       return this.mainProductImageSrc;
     },
@@ -209,7 +209,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
       name,
       offers: this.productDetails?.simpleProducts.map(sp => {
         const spMaxPrice = (sp.pricing || []).reduce((price, pricing) => Math.max(price, pricing.price), 0);
-        const maxPrice = this.preSetPrints ? spMaxPrice + this.preSetPrintsPriceRange.max : spMaxPrice;
+        const maxPrice = this.printsPrice ? spMaxPrice + this.printsPrice : spMaxPrice;
         const availability = sp.quantityStock > 0 ? 'InStock' : 'OutOfStock';
     
         const offer = {

package/package.json

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

package/store/product.js

@@ -53,16 +53,6 @@ export const getters = {
   calculatingPrice: ({ calculatingPrice }) => calculatingPrice,
   product: ({ product }) => product,
   preSetPrints: ({ preSetPrints }) => preSetPrints,
-  preSetPrintsPriceRange: ({ preSetPrints, product }) => {
-    const [preSetPrint] = preSetPrints || [];
-    const printType = product.printTypes.find(pt => pt._id === preSetPrint?.printType);
-    const { printCost = [] } = (printType?.printAreas || [])
-      .find(({ printSizes }) => (printSizes || []).some(ps => ps?._id === preSetPrint?.printSize)) || {};
-    return {
-      min: Math.min(...printCost.map(({ price }) => price)),
-      max: Math.max(...printCost.map(({ price }) => price))
-    };
-  },
   loadError: ({ loadError }) => loadError,
   productDetails: ({ productDetails }) => productDetails,
   productDetailsLoaded: ({ productDetails }) => !!productDetails,
@@ -150,7 +140,13 @@ export const getters = {
   },
   editableSide: ({ editableSide }) => editableSide,
   priceIncludeGST: ({ priceIncludeGST }) => priceIncludeGST,
-  hasUnprintedPrice: ({ product }) => product.minUnprintedPrice || product.maxUnprintedPrice
+  hasUnprintedPrice: ({ product }) => product.minUnprintedPrice || product.maxUnprintedPrice,
+  printsPrice: ({ productPricing, product }) => {
+    const maxPrintsPrice = +product.maxPrintsPrice || 0;
+    const pricing = (productPricing?.products || {})[product._id];
+    const price = pricing?.prints?.prints?.reduce((sum , print) => sum + (+print.priceWithoutTax || 0), 0) || maxPrintsPrice;
+    return price;
+  },
 };
 
 export const actions = {
@@ -160,7 +156,12 @@ export const actions = {
       const query = { country, currency };
       const product = await api.fetchProduct(shop, slug, query);
       commit('setProduct', product);
-      commit('setPreSetPrints', (product.prints || []).filter(({ _id, printTemplate }) => _id === print || (!print && !!printTemplate)));
+
+      const prints = (product.prints || []).filter(({ _id, printTemplate }) => _id === print || (!print && !!printTemplate));
+      commit('setPreSetPrints', prints);
+      if (prints?.length > 0) {
+        commit('setIsPrintPricing', true);
+      }
     } catch (e) {
       console.log(e);
       const { status, data } = e?.response || {};