@lancom/shared 0.0.128 → 0.0.131

package/assets/js/utils/gtm.js

@@ -1,7 +1,51 @@
 const gtm = {
-  push(data) {
+  push(data, skipReset) {
     window.dataLayer = window.dataLayer || [];
+    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/checkout/order/address-form/address-form.vue

@@ -160,23 +160,23 @@
         name="Address line 2"
         class="form-row">
         <label
-          for="address_line2"
+          for="addressLine2"
           class="form-label">
           Address line 2
         </label>
         <input
-          id="address_line2"
-          ref="address_line2"
-          v-model="address.address_line2"
-          name="address_line2"
+          id="addressLine2"
+          ref="addressLine2"
+          v-model="address.addressLine2"
+          name="addressLine2"
           type="text"
           class="form-field labelless"
           placeholder="Address line 2"
           :class="{
             'is-danger': errors.length,
-            filled: address.address_line2
+            filled: address.addressLine2
           }"
-          @keyup.enter="$refs.address_line2.focus()" />
+          @keyup.enter="$refs.addressLine2.focus()" />
         <span
           v-if="errors.length"
           class="form-help is-danger">

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

@@ -192,19 +192,19 @@
           name="Address line 2"
           class="form-row">
           <input
-            id="address_line2"
-            ref="address_line2"
-            v-model="form.address_line2"
-            name="address_line2"
+            id="addressLine2"
+            ref="addressLine2"
+            v-model="form.addressLine2"
+            name="addressLine2"
             type="text"
             class="form-field"
             :class="{
               'is-danger': errors.length,
-              filled: form.address_line2
+              filled: form.addressLine2
             }"
-            @keyup.enter="$refs.address_line2.focus()" />
+            @keyup.enter="$refs.addressLine2.focus()" />
           <label
-            for="address_line2"
+            for="addressLine2"
             class="form-label label-inner">
             Address line 2
           </label>
@@ -306,7 +306,7 @@ export default {
         city: this.orderData.city,
         phone: this.orderData.phone,
         addressLine1: this.orderData.addressLine1,
-        address_line2: this.orderData.addressLine2,
+        addressLine2: this.orderData.addressLine2,
         email: this.orderData.email,
         fullName: this.orderData.fullName,
         company: this.orderData.company,

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,13 +63,30 @@ export default {
       }
     },
     sendConversionData() {
-      if (!process.env.IS_LOCAL) {
-        gtm.push({
-          event: 'OrderCheckout',
-          code: this.orderData.code,
-          value: this.orderData.total
-        });
-      }
+      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.128",
+  "version": "0.0.131",
   "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);