@lancom/shared 0.0.167 → 0.0.169

package/assets/js/utils/cart.js

@@ -13,6 +13,7 @@ export function groupSimpleProducts(entity, isGroupByColor, isPopulateEmptyProdu
         printsThumbnails: entity.printsThumbnails,
         product: entity.product,
         simpleProducts: [],
+        unitCosts: [],
         amount: 0,
         productsTotal: 0
       };
@@ -23,7 +24,11 @@ export function groupSimpleProducts(entity, isGroupByColor, isPopulateEmptyProdu
         const amount = simpleProduct.amount || 0;
         group.amount += amount;
 
-        group.productsTotal += amount * (simpleProduct.productCost || 0);
+        const productCost = (simpleProduct.productCost || 0);
+        group.productsTotal += amount * productCost;
+        if (!group.unitCosts.includes(productCost) && simpleProduct.amount > 0) {
+          group.unitCosts.push(productCost);
+        }
         groups.set(key, group);
       }
     });

package/assets/js/utils/gtm.js

@@ -18,13 +18,28 @@ const gtm = {
           ...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
+            .map((sp) => ({
+              ...getOrderItem(product, sp),
+              price: pricing.products[product._id]?.products[sp._id]?.priceWithoutTax
+            }))
+        ];
+      }, [])
+    });
+  },
+  viewCart(entities, pricing) {
+    this.push({
+      event: 'view_cart',
+      value: pricing.totalPriceWithoutTax,
+      currency: 'AUD',
+      coupon: pricing.coupon?.code,
+      items: entities.reduce((products, { guid: productGuid, product, simpleProducts }) => {
+        return [
+          ...products,
+          ...simpleProducts
+            .filter(({ amount }) => amount > 0)
+            .map((sp) => ({
+              ...getOrderItem(product, sp),
+              price: pricing.products[productGuid]?.products[sp.guid]?.priceWithoutTax
             }))
         ];
       }, [])
@@ -35,17 +50,15 @@ const gtm = {
     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
-      }))
-    });
+    // gtm.push({
+    //   event: 'remove_from_cart',
+    //   value: removeSimpleProducts.reduce((sum, { guid }) => sum + (spPricing[guid]?.totalPriceWithoutTax || 0), 0),
+    //   currency: 'AUD',
+    //   items: removeSimpleProducts.map((sp) => ({
+    //     ...getOrderItem(product, sp),
+    //     price: spPricing[sp.guid]?.totalPriceWithoutTax
+    //   }))
+    // });
   },
   purchase(order) {
     const event = {
@@ -56,25 +69,61 @@ const gtm = {
       coupon: order.couponCode,
       shipping: order.shippingTotal,
       tax: +(order.totalGST - order.total).toFixed(2),
-      items: order.products.reduce((products, { product, simpleProducts }) => {
-        return [
-          ...products,
-          ...simpleProducts
-            .filter(({ amount }) => amount > 0)
-            .map(({ SKU, productCost, amount, color, size }) => ({
-              item_id: SKU,
-              item_name: `${product.name} ${color?.name || ''} ${size?.name || ''}`.trim(),
-              item_brand: product.brand.name,
-              price: productCost,
-              currency: 'AUD',
-              quantity: amount
-            }))
-        ];
-      }, [])
+      items: getOrderItems(order)
+    };
+    gtm.push(event);
+  },
+  shippingInfo(order) {
+    const shipping = (order.suppliersWithRates || []).reduce((suppliersRates, supplierRates) => {
+      const rate = supplierRates.rates.find(({ selected }) => !!selected);
+      return rate ? [...suppliersRates, `${supplierRates.name}. ${rate.name}`] : suppliersRates;
+    }, []).join(', ');
+    const event = {
+      event: 'add_shipping_info',
+      value: order.shippingTotal,
+      coupon: order.couponCode,
+      currency: 'AUD',
+      shipping_tier: shipping,
+      items: getOrderItems(order)
+    };
+    gtm.push(event);
+  },
+  paymentInfo(order) {
+    const event = {
+      event: 'add_payment_info',
+      value: order.total,
+      coupon: order.couponCode,
+      currency: 'AUD',
+      payment_type: order.paymentMethod,
+      items: getOrderItems(order)
     };
-    console.log('purchase: ', event);
     gtm.push(event);
   }
 };
 
+function getOrderItems(order) {
+  return order.products.reduce((products, { product, simpleProducts }) => {
+    return [
+      ...products,
+      ...simpleProducts
+        .filter(({ amount }) => amount > 0)
+        .map(sp => getOrderItem(product, sp))
+    ];
+  }, [])
+}
+
+function getOrderItem(product, simpleProduct) {
+  const { SKU, productCost, amount, color, size } = simpleProduct;
+  return {
+    item_id: product.SKU,
+    item_variant: `${product.name} ${color?.name || ''}-${size?.shortName || ''}`.trim(),
+    item_name: product.name.trim(),
+    item_brand: product.brand.name,
+    price: productCost,
+    currency: 'AUD',
+    quantity: amount
+  };
+}
+
+
 export default gtm;

package/assets/js/utils/order.js

@@ -72,3 +72,18 @@ export function populateProductsFields(products, pricing) {
     return product;
   });
 };
+
+export function generateOrderData(data, cartEntities, pricing) {
+  const order = { ...data, products: populateProductsFields(cartEntities, pricing) };
+  if (pricing) {
+    order.totalGST = pricing.totalPrice;
+    order.total = pricing.totalPriceWithoutTax;
+    order.couponTotal = pricing.coupon?.totalPrice || 0;
+    order.couponCode = pricing.coupon?.code || null;
+    order.productsTotal = pricing.products?.products?.totalPriceWithoutTax || 0;
+    order.printsTotal = pricing.products?.prints?.totalPriceWithoutTax || 0;
+    order.shippingTotal = pricing.shipping?.totalPriceWithoutTax || 0;
+    order.suppliersWithRates = pricing.shipping?.suppliersWithRates || [];
+  }
+  return order;
+}

package/assets/js/utils/quote.js

@@ -1,6 +1,7 @@
 export function convertQuoteToOrder(quote, option) {
   const files = [quote.file, ...(quote.files || [])].filter(f => !!f);
   return {
+    referenceField: quote.reference,
     paymentMethod: option.paymentMethod || 'deposit',
     billingAddress: quote.address,
     notes: (quote.notes || []).filter(({ text }) => !!text),
@@ -15,6 +16,7 @@ export function convertQuoteToOrder(quote, option) {
     productsTotal: option.productsTotal,
     printsTotal: option.printsTotal,
     shippingTotal: option.shippingTotal,
+    suppliersWithRates: option.suppliersWithRates,
     adminShippingTotal: option.adminShippingTotal,
     quote: quote._id,
     resources: files.map(f => ({

package/components/checkout/cart/cart.mixin.js

@@ -16,6 +16,7 @@ export default {
     ...mapGetters('auth', ['user']),
     ...mapGetters('cart', [
       'entities',
+      'cartPricing',
       'simpleProducts',
       'simpleProductsQuantity',
       'bigSizeSimpleProductsQuantity',

package/components/checkout/cart/cart_entity/cart-entity.vue

@@ -8,6 +8,21 @@
           {{ product.name }}
         </nuxt-link>
       </div>
+      <div
+        v-if="product.sameDayDispatch"
+        class="lc_body-small">
+        <div class="mt-5">
+          <i class="icon-delivery"></i>
+          <span>
+            This product qualifies for same day dispatch.
+            <nuxt-link
+              class="lc_black"
+              to="/faq?group=delivery&id=636f6b3fc305bd0304700d1f">
+              read more
+            </nuxt-link>
+          </span>
+        </div>
+      </div>
       <div class="CartEntity__features">
         <div class="CartEntity__feature">
           <div class="lc_title-small">

package/components/checkout/cart/cart_entity/cart_entity_color_simple_products/cart-entity-color-simple-products.vue

@@ -89,7 +89,10 @@ export default {
   },
   mixins: [
     CartEntityColorSimpleProducts
-  ]
+  ],
+  methods: {
+    onChangeQty() {}
+  }
 };
 </script>
 

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

@@ -25,6 +25,8 @@
 </template>
 
 <script>
+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';
 import CartMixin from '@lancom/shared/components/checkout/cart/cart.mixin';
 import AddressForm from '@lancom/shared/components/checkout/order/address-form/address-form';
@@ -59,6 +61,9 @@ export default {
         return;
       }
 
+      const orderInfo = generateOrderData(this.order, this.entities, this.cartPricing);
+      gtm.shippingInfo(orderInfo);
+
       if (this.copyToShippingAddress) {
         this.order.shippingAddress = { ...this.order.shippingAddress };
         this.$emit('next');

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

@@ -73,6 +73,8 @@
 
 <script>
 import { mapGetters, mapMutations, mapActions } from 'vuex';
+import { generateOrderData } from '@lancom/shared/assets/js/utils/order';
+import gtm from '@lancom/shared/assets/js/utils/gtm';
 import PaymentCart from '@lancom/shared/components/checkout/payment/payment-cart/payment-cart';
 import ProgressStepsControls from '@lancom/shared/components/common/progress_steps/progress_steps_controls/progress-steps-controls';
 import { ORDER_PAYMENT_METHOD } from '@lancom/shared/assets/js/constants/order';
@@ -126,6 +128,10 @@ export default {
     async submit() {
       this.creating = true;
       this.errorMessage = null;
+
+      const orderInfo = this.orderData || generateOrderData(this.order, this.entities, this.cartPricing);
+      gtm.paymentInfo(orderInfo);
+
       if (this.isDepositPayment) {
         this.setCard(null);
         await this.submitOrder();

package/components/order/order_view/order-view.mixin.js

@@ -40,14 +40,32 @@ export default {
     depositInfo() {
       return this.order.shop.settings?.depositInfo || {};
     },
+    fullName() {
+      return this.invoice?.address?.fullName || this.order.shippingAddress.fullName;
+    },
+    company() {
+      return this.invoice?.address?.company || this.order.shippingAddress.company;
+    },
+    phone() {
+      return this.invoice?.address?.phone || this.order.shippingAddress.phone;
+    },
+    email() {
+      return this.invoice?.address?.email || this.order.shippingAddress.email;
+    },
+    additionalInfo() {
+      return this.invoice?.address?.additionalInfo || this.order.shippingAddress.additionalInfo;
+    }, 
+    purchaseOrderNumber() {
+      return this.invoice?.purchaseOrderNumber || this.order.purchaseOrderNumber;
+    },
     orderAddress() {
       return [
-        this.order.shippingAddress.addressLine1,
-        this.order.shippingAddress.addressLine2,
-        this.order.shippingAddress.city,
-        this.order.shippingAddress.postcode,
-        this.order.shippingAddress.state,
-        this.order.shippingAddress.country
+        this.invoice?.address?.addressLine1 || this.order.shippingAddress.addressLine1,
+        this.invoice?.address?.addressLine2 || this.order.shippingAddress.addressLine2,
+        this.invoice?.address?.city || this.order.shippingAddress.city,
+        this.invoice?.address?.postcode || this.order.shippingAddress.postcode,
+        this.invoice?.address?.state || this.order.shippingAddress.state,
+        this.invoice?.address?.country || this.order.shippingAddress.country
       ].filter(i => !!i).join(', ');
     },
     gstTax() {

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

@@ -21,9 +21,9 @@
           Tax invoice
         </h1>
         <h5
-          v-if="order.purchaseOrderNumber"
+          v-if="purchaseOrderNumber"
           class="text-secondary lc_h5">
-          PO: {{ order.purchaseOrderNumber }}
+          PO: {{ purchaseOrderNumber }}
         </h5>
       </div>
     </div>
@@ -58,26 +58,26 @@
             <b>Order</b>
           </div>
           <div class="lc_regular16">
-            {{ order.shippingAddress.fullName }}
+            {{ fullName }}
           </div>
           <div
-            v-if="order.shippingAddress.company"
+            v-if="company"
             class="lc_regular16">
-            {{ order.shippingAddress.company }}
+            {{ company }}
           </div>
           <div
-            v-if="order.shippingAddress.phone"
+            v-if="phone"
             class="lc_regular16">
-            {{ order.shippingAddress.phone }}
+            {{ phone }}
           </div>
           <div class="lc_regular16">
-            {{ order.shippingAddress.email }}
+            {{ email }}
           </div>
           <div class="lc_regular16">
             {{ orderAddress }}
           </div>
           <div class="lc_regular16">
-            {{ order.additionalInfo }}
+            {{ additionalInfo }}
           </div>
         </td>
         <td

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

@@ -1,5 +1,6 @@
 import { mapGetters, mapActions, mapMutations } from 'vuex';
 import api from '@lancom/shared/assets/js/api';
+import gtm from '@lancom/shared/assets/js/utils/gtm';
 import { price, shortDate, tax } from '@lancom/shared/assets/js/utils/filters';
 import { convertQuoteToOrder } from '@lancom/shared/assets/js/utils/quote';
 
@@ -35,6 +36,7 @@ export default {
         this.processing = true;
         this.order = await this.createOrder(option);
         this.setOrder(this.order);
+        gtm.purchase(this.order);
         this.clear();
       } catch (e) {
         const { message } = (e.response && e.response.data) || e;

package/components/quotes/quote_view/quote_product_color_simple_products/quote-product-color-simple-products.vue

@@ -40,6 +40,16 @@
             :simple-product="simpleProduct" />
         </div>
         <div class="QuoteProductColorSimpleProducts__totals">
+          <div
+            v-if="group.unitCosts.length === 1"
+            class="QuoteProductColorSimpleProducts__total mb-6">
+            <div class="lc_title-small">
+              Unit Cost:
+            </div>
+            <div class="lc_body-small">
+              {{ group.unitCosts[0] | price }}
+            </div>
+          </div>
           <div class="QuoteProductColorSimpleProducts__total">
             <div class="lc_title-small">
               Total Qty:
@@ -48,14 +58,14 @@
               {{ group.amount }}
             </div>
           </div>
-          <!-- <div class="QuoteProductColorSimpleProducts__total mt-6">
+          <div class="QuoteProductColorSimpleProducts__total mt-6">
             <div class="lc_title-small">
-              Total price:
+              Subtotal:
             </div>
             <div class="lc_body-small">
               {{ group.productsTotal | price }}
             </div>
-          </div> -->
+          </div>
         </div>
       </div>
     </div>

package/package.json

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

package/store/cart.js

@@ -31,11 +31,11 @@ const getProductsQuantities = entities => {
 };
 
 const getPrintsQuantities = entities => {
-  const printTypes = entities.reduce((types, e) => [...types, ...e.prints.map(({ printType }) => printType)], []);
-  const grouped = groupBy(printTypes, '_id');
-  const quantities = Object.keys(grouped).map(_id => {
-    const [{ name, minQuantity }] = grouped[_id];
-    const printTypeEntities = entities.filter(e => (e.prints || []).some(({ printType }) => printType?._id === _id));
+  const printTypes = entities.reduce((types, e) => [...types, ...e.prints.map(({ printType }) => ({ ...printType, guid: `${e.guid}-${printType._id}` }))], []);
+  const grouped = groupBy(printTypes, 'guid');
+  const quantities = Object.keys(grouped).map(guid => {
+    const [{ name, minQuantity }] = grouped[guid];
+    const printTypeEntities = entities.filter(e => (e.prints || []).some(({ printType }) => `${e.guid}-${printType?._id}` === guid));
     return { name, minQuantity, quantity: getEntitiesQuantity(printTypeEntities) };
   });
   return quantities;

package/store/order.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import api from '@lancom/shared/assets/js/api';
-import { populateProductsFields } from '@lancom/shared/assets/js/utils/order';
+import { generateOrderData } from '@lancom/shared/assets/js/utils/order';
 
 export const state = () => ({
   orderData: null,
@@ -14,18 +14,8 @@ export const getters = {
 
 export const actions = {
   async createOrder({ commit }, data) {
-    const { pricing, products, shop } = data;
-    const order = { ...data, products: populateProductsFields(products, pricing) };
-    if (pricing) {
-      order.totalGST = pricing.totalPrice;
-      order.total = pricing.totalPriceWithoutTax;
-      order.couponTotal = pricing.coupon?.totalPrice || 0;
-      order.couponCode = pricing.coupon?.code || null;
-      order.productsTotal = pricing.products?.products?.totalPriceWithoutTax || 0;
-      order.printsTotal = pricing.products?.prints?.totalPriceWithoutTax || 0;
-      order.shippingTotal = pricing.shipping?.totalPriceWithoutTax || 0;
-      order.suppliersWithRates = pricing.shipping?.suppliersWithRates || [];
-    }
+    const { shop, products, pricing } = data;
+    const order = generateOrderData(data, products, pricing);
     const response = await api.createOrder(order, shop);
     commit('setOrderData', response);
   },