@lancom/shared 0.0.127 → 0.0.130

package/assets/js/utils/gtm.js

@@ -1,18 +1,50 @@
 const gtm = {
-  push({
-    id,
-    total,
-    tax,
-    shipping,
-    products
-  }) {
+  push(data, skipReset) {
     window.dataLayer = window.dataLayer || [];
-    window.dataLayer.push({
-      transactionId: id,
-      transactionTotal: total,
-      transactionTax: tax,
-      transactionShipping: shipping,
-      transactionProducts: products
+    if (!skipReset) {
+      window.dataLayer.push(function() {
+        this.reset();
+      });
+    }
+    window.dataLayer.push(data);
+  },
+  addToCart(entities, pricing) {
+    this.push({
+      event: 'add_to_cart',
+      value: pricing.totalPriceWithoutTax,
+      currency: 'AUD',
+      items: entities.reduce((products, { product, simpleProducts }) => {
+        return [
+          ...products,
+          ...simpleProducts
+            .filter(({ amount }) => amount > 0)
+            .map(({ SKU, amount, _id }) => ({
+              item_id: SKU,
+              item_name: product.name,
+              item_brand: product.brand.name,
+              currency: 'AUD',
+              price: pricing.products[product._id]?.products[_id]?.totalPriceWithoutTax,
+              quantity: amount
+            }))
+        ];
+      }, [])
+    });
+  },
+  removeFromCart(simpleProducts, pricing) {
+    const removeSimpleProducts = simpleProducts.filter(({ amount }) => amount > 0);
+    const spPricing = Object.keys(pricing.products)
+      .filter(k => !!pricing.products[k].products)
+      .reduce((res, k) => ({ ...res, ...pricing.products[k].products }), {});
+    gtm.push({
+      event: 'remove_from_cart',
+      value: removeSimpleProducts.reduce((sum, { guid }) => sum + (spPricing[guid]?.totalPriceWithoutTax || 0), 0),
+      currency: 'AUD',
+      items: removeSimpleProducts.map(({ SKU, amount, guid }) => ({
+        item_id: SKU,
+        currency: 'AUD',
+        price: spPricing[guid]?.totalPriceWithoutTax,
+        quantity: amount
+      }))
     });
   }
 };

package/components/checkout/cart/cart_price_info/cart-price-info.vue

@@ -53,15 +53,16 @@ export default {
       this.calculatePriceWithDebounce();
     }
   },
-  mounted() {
-    this.calculatePriceWithDebounce();
+  async mounted() {
+    await this.calculatePrice();
+    this.$emit('loaded', this.cartPricing);
   },
   methods: {
     ...mapActions([
       'calculateCartPrice'
     ]),
-    calculatePrice() {
-      this.calculateCartPrice({ shop: this.shop });
+    async calculatePrice() {
+      await this.calculateCartPrice({ shop: this.shop });
     }
   }
 };

package/components/editor/editor.vue

@@ -177,7 +177,7 @@ export default {
     },
     proceedToCard() {
       const entities = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, this.isPrintPricing, this.layerThumbnails);
-      this.addToCart({ entities, shop: this.shop });
+      this.addToCart({ entities, shop: this.shop, pricing: this.productPricing });
       this.showCartModal(async () => {
         const message = 'Do you wish to continue with editing the current design or reset the editor?';
         const reset = await this.showConfirmationModal(message, {

package/components/products/products_autocomplete/products-autocomplete.vue

@@ -49,6 +49,7 @@
 <script>
 import debounce from 'lodash.debounce';
 import { mapGetters } from 'vuex';
+import gtm from '@lancom/shared/assets/js/utils/gtm';
 import api from '@lancom/shared/assets/js/api';
 import ProductsAutocompleteItem from './products_autocomplete-item/products-autocomplete-item';
 
@@ -97,6 +98,12 @@ export default {
     },
     async search() {
       this.searching = true;
+      if (this.text) {
+        gtm.push({
+          event: 'search',
+          search_term: this.text
+        });
+      }
       try {
         this.products = this.text ? await api.searchProducts(this.shop._id, this.text) : [];
       } catch (e) {

package/middleware/page-info.js

@@ -9,7 +9,7 @@ export default async function ({ store, route, redirect }) {
     };
     const routeInfo = await store.dispatch('page/fetchRouteInfo', data);
     if (routeInfo?.type === 'redirect' && routeInfo.redirectTo) {
-      redirect(routeInfo.redirectTo);
+      redirect(301, routeInfo.redirectTo);
     }
   }
 }

package/mixins/payment.js

@@ -63,19 +63,30 @@ export default {
       }
     },
     sendConversionData() {
-      if (process.env.IS_PROD) {
-        gtm.push({
-          id: this.orderData._id,
-          total: this.orderData.total,
-          shipping: this.orderData.shippingAddress.postcode,
-          products: this.orderData.products.map(product => ({
-            sku: product.SKU,
-            name: product.name,
-            category: product.brand,
-            quantity: product.amount
-          }))
-        });
-      }
+      gtm.push({
+        event: 'purchase',
+        transaction_id: this.orderData.code,
+        value: this.orderData.total,
+        currency: 'AUD',
+        coupon: this.orderData.couponCode,
+        shipping: this.orderData.shippingTotal,
+        tax: this.orderData.totalGST - this.orderData.total,
+        items: this.orderData.products.reduce((products, { product, simpleProducts }) => {
+          return [
+            ...products,
+            ...simpleProducts
+              .filter(({ amount }) => amount > 0)
+              .map(({ SKU, productCost, amount }) => ({
+                item_id: SKU,
+                item_name: product.name,
+                item_brand: product.brand.name,
+                price: productCost,
+                currency: 'AUD',
+                quantity: amount
+              }))
+          ];
+        }, [])
+      });
     },
     clearFailedCharge() {
       this.errorMessage = null;

package/package.json

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

package/store/cart.js

@@ -1,5 +1,6 @@
 import groupBy from 'lodash/groupBy';
 import api from '@lancom/shared/assets/js/api';
+import gtm from '@lancom/shared/assets/js/utils/gtm';
 import { getPrintTypeSizePricing } from '@lancom/shared/assets/js/utils/prints';
 
 export const state = () => ({
@@ -63,7 +64,8 @@ export const getters = {
 };
 
 export const actions = {
-  async addToCart({ state, commit }, { entities, shop }) {
+  async addToCart({ state, commit }, { entities, shop, pricing }) {
+    const addingEntities = [...entities];
     const withoutPrints = e => (e.prints || []).length === 0;
     entities = entities.map(e => {
       const entitiy = withoutPrints(e) && state.entities.find(e2 => withoutPrints(e2) && e2?.product?._id === e?.product?._id);
@@ -89,6 +91,9 @@ export const actions = {
       commit('setId', cart._id);
       commit('setEntities', cart.entities);
     }
+    if (pricing) {
+      gtm.addToCart(addingEntities, pricing);
+    }
   },
   async removeSimpleProductsFromCart({ commit, state }, { simpleProducts, shop }) {
     const removeGuids = (simpleProducts || []).map(e => e.guid);
@@ -99,10 +104,17 @@ export const actions = {
     const payload = { _id: state.id, entities };
     await api.saveCart(payload, shop._id);
     commit('setEntities', entities);
+    if (state.cartPricing) {
+      gtm.removeFromCart(simpleProducts, state.cartPricing);
+    }
   },
   async removeSupplier({ commit, state }, { supplier, shop }) {
     const brands = supplier.brands.map(({ _id }) => _id);
     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);
+    }
     const payload = { _id: state.id, entities };
     await api.saveCart(payload, shop._id);
     commit('setEntities', entities);