@lancom/shared 0.0.308 → 0.0.310

package/assets/scss/ui_kit/_grid.scss

@@ -783,7 +783,7 @@
   margin-left: auto !important;
 }
 // margins
-@for $i from 1 through 10 {
+@for $i from 1 through 20 {
   .mt-#{$i} {
     margin-top: #{$i}px !important;
   }

package/components/checkout/order/address-form/address-form.scss

@@ -14,4 +14,12 @@
       }
     }
   }
+}
+
+.CustomerAddressForm {
+  &__copy-btn {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+  }
 }

package/components/checkout/order/address-form/address-form.vue

@@ -258,6 +258,9 @@ export default {
       type: Object,
       required: true
     },
+    copyFrom: {
+      type: Object
+    },
     withoutAdditionalInfo: {
       type: Boolean,
       default: false

package/components/checkout/order/order-billing-information/order-billing-information.vue

@@ -11,17 +11,20 @@
           <address-form
             :address="order.shippingAddress"
             :without-additional-info="true" />
-          <checkbox
-            v-model="copyToBillingAddress"
-            :dark="true">
-            <div class="ml-5">Use same address as the billing address</div>
-          </checkbox>
+          <div class="mt-20 mb-20">
+            <checkbox
+              v-model="copyToBillingAddress"
+              :dark="true">
+              <div class="ml-5">Use same address as the billing address</div>
+            </checkbox>
+          </div>
           <div
             v-if="!copyToBillingAddress"
-            class="mt-7">
-            <h5 class="lc_h4 mb-7">Billind Address</h5>
+            class="mt-15">
+            <h5 class="lc_h3 lc_uppercase lc_bold mt-10 mb-15">Billing Address</h5>
             <address-form
               :address="order.billingAddress"
+              :copy-from="order.shippingAddress"
               :without-additional-info="true" />
           </div>
         </div>
@@ -46,6 +49,27 @@ import CartMixin from '@lancom/shared/components/checkout/cart/cart.mixin';
 import AddressForm from '@/components/checkout/order/address-form/address-form';
 import ProgressStepsControls from '@lancom/shared/components/common/progress_steps/progress_steps_controls/progress-steps-controls';
 
+function isSameAddresses(address, billingAddress) {
+  if (!billingAddress) {
+    return true;
+  }
+  const fields = [
+    'fullName',
+    'additionalInfo',
+    'addressLine1',
+    'addressLine2',
+    'city',
+    'company',
+    'country',
+    'email',
+    'phone',
+    'postcode',
+    'state'
+  ];
+  const getKey = model => fields.reduce((v, field) => `${v}-${model[field] || ''}`, '');
+  return address && getKey(address) === getKey(billingAddress);
+}
+
 export default {
   name: 'OrderBillingInformation',
   mixins: [CartMixin],
@@ -62,7 +86,7 @@ export default {
   },
   data() {
     return {
-      copyToBillingAddress: true,
+      copyToBillingAddress: isSameAddresses(this.order?.shippingAddress, this.order?.billingAddress),
       isSubmit: false
     };
   },

package/components/checkout/order/order.vue

@@ -106,7 +106,7 @@ export default {
     this.order = {
       paymentMethod: 'card',
       billingAddress: {
-        ...address,
+        ...JSON.parse(JSON.stringify(address)),
         ...(this.user ? {
           fullName: `${this.user.firstName} ${this.user.lastName}`,
           phone: this.user.phone,

package/components/common/product_side_with_print/product-side-with-print.vue

@@ -81,7 +81,7 @@ export default {
       return this.print && this.getImageBackground(this.print);
     },
     image() {
-      const color = this.defaultPreview ? null : this.product.color;
+      const color = this.defaultPreview ? null : (this.product.color || (this.product.colors || [])[0]);
       const product = this.product?.product || this.product;
       return getColorImage(product, this.size, this.side, color) || getProductCover(product, this.size, this.side, color);
     },

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/modals/order_modal/order-modal.vue

@@ -361,7 +361,7 @@ export default {
           recaptchaToken,
           currency: this.currency?._id,
           country: this.country?._id,
-          billingAddress: this.form,
+          billingAddress: JSON.parse(JSON.stringify(this.form)),
           shippingAddress: this.form,
           products: this.entities,
           pricing: this.cartPricing,

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

@@ -7,6 +7,7 @@
         <product-side-with-print
           :product="product"
           :side="side"
+          :default-preview="defaultPreview"
           size="medium" />
       </div>
     </div>
@@ -29,6 +30,10 @@ export default {
     product: {
       type: Object,
       required: true
+    },
+    defaultPreview: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

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.310",
   "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 || {};
@@ -204,7 +205,9 @@ export const actions = {
   },
   async calculateProductPrice({ state: { template, product, isPrintPricing }, commit, getters }, { shop, country, currency }) {
     commit('setCalculatingPrice', true);
-    const entities = getProductsForCalculatePricing(product, getters.usedSimpleProducts, template.layers, isPrintPricing, true);
+    const spProducts = getters.usedSimpleProducts?.length > 0 ? getters.usedSimpleProducts : (getters.defaultSimpleProduct ? [{ ...getters.defaultSimpleProduct, amount: 1 }] : []);
+    const entities = getProductsForCalculatePricing(product, spProducts, template.layers, isPrintPricing, true);
+
     const response = await api.calculateProductPrice({ entities, country: country?._id, currency: currency?._id }, shop._id);
     commit('setProductPricing', response);
     commit('setCalculatingPrice', false);