@lancom/shared 0.0.299 → 0.0.301

package/assets/js/utils/gtm.js

@@ -11,11 +11,11 @@ const gtm = {
     }
     window.dataLayer.push(data);
   },
-  viewItem(product) {
+  viewItem(product, currency) {
     this.push({
       event: 'view_item',
       value: product.minPrice,
-      currency: 'AUD',
+      currency: currency?.isoCode || 'AUD',
       items: [{
         id: product.SKU,
         item_name: product.name,
@@ -23,11 +23,11 @@ const gtm = {
       }]
     });
   },
-  addToCart(entities, pricing) {
+  addToCart(entities, pricing, currency) {
     this.push({
       event: 'add_to_cart',
       value: pricing.totalPriceWithoutTax,
-      currency: 'AUD',
+      currency: currency?.isoCode || 'AUD',
       items: entities.reduce((products, { product, simpleProducts }) => {
         return [
           ...products,
@@ -41,10 +41,10 @@ const gtm = {
       }, [])
     });
   },
-  viewItemList(products) {
+  viewItemList(products, currency) {
     this.push({
       event: 'view_item_list',
-      currency: 'AUD',
+      currency: currency?.isoCode || 'AUD',
       items: (products || []).map(product => {
         return {
           id: product.SKU, 
@@ -55,32 +55,18 @@ const gtm = {
       })
     });
   },
-  viewItemList(products) {
-    this.push({
-      event: 'view_item_list',
-      currency: 'AUD',
-      items: products.map(product => {
-        return {
-          id: product.SKU, 
-          item_name: product.name,
-          google_business_vertical: 'retail',
-          price: product.minPrice
-        };
-      })
-    });
-  },
   viewSearchResult(search_term) {
     this.push({
       event: 'view_search_results',
       search_term
     });
   },
-  viewCart(entities, pricing) {
+  viewCart(entities, pricing, currency) {
     if (pricing) {
       this.push({
         event: 'view_item_list',
         value: pricing.totalPriceWithoutTax,
-        currency: 'AUD',
+        currency: currency?.isoCode || 'AUD',
         coupon: pricing.coupon?.code,
         items: entities.reduce((products, { guid: productGuid, product, simpleProducts }) => {
           return [
@@ -111,12 +97,12 @@ const gtm = {
     //   }))
     // });
   },
-  purchase(order) {
+  purchase(order, currency) {
     const event = {
       event: 'purchase',
       transaction_id: order.code,
       value: order.total,
-      currency: 'AUD',
+      currency: currency?.isoCode || 'AUD',
       coupon: order.couponCode,
       shipping: order.shippingTotal,
       tax: +(order.totalGST - order.total).toFixed(2),
@@ -141,7 +127,7 @@ const gtm = {
     }
     gtm.push(event);
   },
-  shippingInfo(order) {
+  shippingInfo(order, currency) {
     const shipping = (order.suppliersWithRates || []).reduce((suppliersRates, supplierRates) => {
       const rate = supplierRates.rates.find(({ selected }) => !!selected);
       return rate ? [...suppliersRates, `${supplierRates.name}. ${rate.name}`] : suppliersRates;
@@ -150,18 +136,18 @@ const gtm = {
       event: 'add_shipping_info',
       value: order.shippingTotal,
       coupon: order.couponCode,
-      currency: 'AUD',
+      currency: currency?.isoCode || 'AUD',
       shipping_tier: shipping,
       items: getOrderItems(order)
     };
     gtm.push(event);
   },
-  paymentInfo(order) {
+  paymentInfo(order, currency) {
     const event = {
       event: 'add_payment_info',
       value: order.total,
       coupon: order.couponCode,
-      currency: 'AUD',
+      currency: currency?.isoCode || 'AUD',
       payment_type: order.paymentMethod,
       items: getOrderItems(order)
     };
@@ -180,7 +166,7 @@ function getOrderItems(order) {
   }, [])
 }
 
-function getOrderItem(product, simpleProduct) {
+function getOrderItem(product, simpleProduct, currency) {
   const { SKU, productCost, amount, color, size } = simpleProduct;
   return {
     id: product.SKU,
@@ -189,7 +175,7 @@ function getOrderItem(product, simpleProduct) {
     item_name: product.name.trim(),
     item_brand: product.brand.name,
     price: productCost,
-    currency: 'AUD',
+    currency: currency?.isoCode || 'AUD',
     quantity: amount,
     google_business_vertical: 'retail'
   };

package/components/checkout/cart/cart.vue

@@ -92,7 +92,7 @@ export default {
   filters: { price },
   mixins: [CartMixin],
   computed: {
-    ...mapGetters(['MESSAGES', 'SETTINGS']),
+    ...mapGetters(['MESSAGES', 'SETTINGS', 'currency']),
     ...mapGetters('cart', ['isEmpty', 'cartPricingError', 'cartPricing', 'cartPricingCalculating', 'entities']),
     onlyPostcode() {
       return !!this.SETTINGS.CART_ONLY_POSTCODE;
@@ -118,7 +118,7 @@ export default {
   },
   methods: {
     loadedPricing() {
-      gtm.viewCart(this.entities, this.cartPricing);
+      gtm.viewCart(this.entities, this.cartPricing, this.currency);
     }
   }
 };

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

@@ -25,6 +25,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import gtm from '@lancom/shared/assets/js/utils/gtm';
 import { generateOrderData } from '@lancom/shared/assets/js/utils/order';
 import CartQuantityErrors from '@lancom/shared/components/checkout/cart/cart_quantity_errors/cart-quantity-errors';
@@ -52,6 +53,9 @@ export default {
       isSubmit: false
     };
   },
+  computed: {
+    ...mapGetters(['currency'])
+  },
   methods: {
     async submit() {
       this.isSubmit = true;
@@ -62,7 +66,7 @@ export default {
       }
 
       const orderInfo = generateOrderData(this.order, this.entities, this.cartPricing);
-      gtm.shippingInfo(orderInfo);
+      gtm.shippingInfo(orderInfo, this.currency);
 
       if (this.copyToShippingAddress) {
         this.order.shippingAddress = { ...this.order.shippingAddress };

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

@@ -142,7 +142,7 @@ export default {
       this.errorMessage = null;
 
       const orderInfo = this.orderData || generateOrderData(this.order, this.entities, this.cartPricing);
-      gtm.paymentInfo(orderInfo);
+      gtm.paymentInfo(orderInfo, this.currency);
 
       if (this.isDepositPayment) {
         this.setCard(null);

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

@@ -4,6 +4,10 @@
   &__wrapper {
     padding-top: 36px;
   }
+  &__description {
+    margin-top: 15px;
+    color: rgb(118, 118, 118);
+  }
   &__header {
     display: flex;
     align-items: center;
@@ -72,6 +76,8 @@
     width: 100%;
     text-align: center;
     margin: 15px 0;
+    height: 300px;
+    position: relative;
     display: none;
     @media (max-width: $bp-extra-small-max) {
       display: block;
@@ -81,4 +87,20 @@
       max-width: 330px;
     }
   }
+  &__product-sides-toggle {
+    width: 45px;
+    height: 45px;
+    position: absolute;
+    top: 50%;
+    right: 25px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $grey_4;
+    font-size: 21px;
+    color: $black;
+    padding: 10px;
+    cursor: pointer;
+  }
 }

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

@@ -80,9 +80,23 @@
       Product Not Available in {{ country.name }}
     </div>
     <div
-      v-if="mainProductImageSrc"
-      class="EditorProductDetails__product-image">
-      <img :src="mainProductImageSrc" />
+      v-if="product.description"
+      class="EditorProductDetails__description">
+      <rich-text
+        :text="product.description"
+        class="EditorProductDetails__description-text" />
+    </div>
+    <div class="EditorProductDetails__product-image">
+      <product-side-with-print
+        :key="side"
+        :product="previewPrintProduct"
+        :side="side"
+        size="large" />
+      <div
+        class="EditorProductDetails__product-sides-toggle"
+        @click="toggleSide">
+        <i class="icon-rotate-tee"></i>
+      </div>
     </div>
     <div
       v-if="productDetailsLoaded && productAvailableInCurrentCountry">
@@ -108,6 +122,8 @@ 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';
+import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
+import RichText from '@lancom/shared/components/common/rich-text';
 
 export default {
   name: 'EditorProductDetails',
@@ -116,13 +132,20 @@ export default {
     PricingDiscountsTable,
     EditorPricing,
     PricingTable,
-    Price
+    Price,
+    ProductSideWithPrint,
+    RichText
   },
   filters: {
     priceWithTax,
     staticLink
   },
   mixins: [modals],
+  data() {
+    return {
+      side: 'front'
+    }
+  },
   computed: {
     ...mapGetters(['taxName']),
     ...mapGetters('product', [
@@ -142,6 +165,13 @@ export default {
       'pricingSettings',
       'country'
     ]),
+    previewPrintProduct() {
+      return {
+        ...this.product,
+        color: this.editableColor,
+        printsThumbnails: this.layerThumbnails
+      };
+    },
     inclGST: {
       get() {
         return this.priceIncludeGST;
@@ -173,13 +203,13 @@ export default {
     },
     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']),
+    toggleSide() {
+      this.side = this.side === 'front' ? 'back' : 'front';
+    }
   }
 };
 </script>

package/components/modals/payment_modal/payment-modal.vue

@@ -185,7 +185,7 @@ export default {
       }
     },
     sendConversionData() {
-      gtm.purchase(this.orderData);
+      gtm.purchase(this.orderData, this.currency);
       gapis.surveyOptin(this.orderData, this.shop);
     },
     back() {

package/components/quotes/quote_view/quote-view.mixin.js

@@ -38,7 +38,7 @@ export default {
         this.processing = true;
         this.order = await this.createOrder({ ...option });
         this.setOrder(this.order);
-        gtm.purchase(this.order);
+        gtm.purchase(this.order, this.currency);
         gapis.surveyOptin(this.order, this.shop);
         this.clear();
       } catch (e) {

package/layouts/products.vue

@@ -205,7 +205,7 @@
               name: product.name,
               highPrice: product.minPrice,
               lowPrice: product.maxPrice,
-              priceCurrency: 'AUD',
+              priceCurrency: this.currency?.isoCode || 'AUD',
               availability: 'InStock'
             }
           };
@@ -262,7 +262,7 @@
           if (this.$route.query.text) {
             gtm.viewSearchResult(this.$route.query.text);
           }
-          gtm.viewItemList(this.products);
+          gtm.viewItemList(this.products, this.currency);
         }
       },
       loadProductsWithDebounce: debounce(function () {

package/mixins/payment.js

@@ -71,7 +71,7 @@ export default {
       }
     },
     sendConversionData() {
-      gtm.purchase(this.orderData);
+      gtm.purchase(this.orderData, this.currency);
       gapis.surveyOptin(this.orderData, this.shop);
     },
     clearFailedCharge() {

package/mixins/product-view.js

@@ -138,7 +138,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
       }
     }
 
-    gtm.viewItem(this.product);
+    gtm.viewItem(this.product, this.currency);
   },
   beforeDestroy() {
     this.clearTemplate();

package/package.json

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

package/store/cart.js

@@ -122,7 +122,7 @@ export const actions = {
       commit('setEntities', cart.entities);
     }
     if (pricing) {
-      gtm.addToCart(addingEntities, pricing);
+      gtm.addToCart(addingEntities, pricing, currency);
     }
   },
   async removeSimpleProductsFromCart({ commit, state }, { simpleProducts, shop, currency }) {
@@ -139,7 +139,7 @@ export const actions = {
     await api.saveCart(payload, shop._id);
     commit('setEntities', entities);
     if (state.cartPricing) {
-      gtm.removeFromCart(simpleProducts, state.cartPricing);
+      gtm.removeFromCart(simpleProducts, state.cartPricing, currency);
     }
   },
   async removeSupplier({ commit, state }, { supplier, shop, currency }) {
@@ -147,7 +147,7 @@ export const actions = {
     const entities = state.entities.filter(entity => !brands.includes(entity.product.brand._id));
     if (state.cartPricing) {
       const simpleProducts = entities.reduce((items, entity) => [...items, ...entity.simpleProducts], []);
-      gtm.removeFromCart(simpleProducts, state.cartPricing);
+      gtm.removeFromCart(simpleProducts, state.cartPricing, currency);
     }
     const payload = { _id: state.id, entities, currency: currency?._id};
     await api.saveCart(payload, shop._id);