@lancom/shared 0.0.280 → 0.0.282

package/assets/js/api/admin.js

@@ -717,6 +717,9 @@ export default {
   removeEmailTemplate(id) {
     return _delete(`admin/email-templates/${id}`);
   },
+  copyEmailTemplatesToShop(data) {
+    return _post(`admin/email-templates/copy-to-shop`, data);
+  },
   fetchPrinters(type) {
     return _get('admin/printers', { type });
   },

package/assets/js/api/index.js

@@ -95,9 +95,9 @@ const api = {
   fetchOrderByToken(token, params) {
     return _get(`order/token/${token}`, params);
   },
-  createOrderPayment(id, { card, shop, country, invoice, payment, recaptchaToken }) {
+  createOrderPayment(id, { card, shop, country, currency, invoice, payment, recaptchaToken }) {
     const url = invoice ? `shop/${shop}/order/${id}/invoice/${invoice}/payment` : `shop/${shop}/order/${id}/payment`;
-    return _post(url, { card, country, payment, recaptchaToken });
+    return _post(url, { card, country, payment, currency, recaptchaToken });
   },
   addOrderTimeline(id, item) {
     return _post(`order/${id}/timeline`, item);
@@ -154,8 +154,11 @@ const api = {
   sendFailedConversionFile(data, shop) {
     return _post(`shop/${shop}/image/send-failed-conversion`, data);
   },
-  fetchSuburbs(params) {
-    return _get('postcodes', params);
+  fetchSuburbs(params, shop) {
+    return _get(`shop/${shop || '-1'}/postcodes`, params);
+  },
+  fetchAddressInfo(id, shop) {
+    return _get(`shop/${shop || '-1'}/postcodes/address/${id}`);
   },
   fetchProductPrintTemplates() {
     return _get('print-templates');

package/assets/js/models/print-area.js

@@ -42,11 +42,13 @@ export const getProductPrintsAreasPrices = (product, printType) => {
   return areas;
 };
 
-export const getPrintAreaByName = ({ printArea, editorWidth, editorHeight, printSize, printAreaOffsets }, product) => {
+export const getPrintAreaByName = (params, product) => {
+  const { printArea, editorWidth, editorHeight, printSize, printAreaOffsets } = params;
   const printAreas = getProductPrintAreas(product);
   const pa = printAreas[printArea] || DEFAULT_PRINT_AREA;
-  const size = printSize || pa.printSize;
-  const offsets = printAreaOffsets || pa.printAreaOffsets;
+  const productPrintArea = product.printAreasOffsets?.find(p => p.printAreas?.includes(printArea) && (!p.printSize || p.printSize === printSize?._id));
+  const size = productPrintArea?.printAreaSize || printSize || pa.printSize;
+  const offsets = productPrintArea?.printAreaOffsets ||  printAreaOffsets || pa.printAreaOffsets;
   const pxPerCm = (editorWidth * product.productToImageRatio) / (product.productWidthInCm || 60);
   const widthCm = size ? size.width : DEFAULT_PRINT_SIZE_CM;
   const heightCm = size ? size.height : DEFAULT_PRINT_SIZE_CM;
@@ -72,5 +74,7 @@ export const getPrintAreaByName = ({ printArea, editorWidth, editorHeight, print
   const widthInInches = widthCm * cmToInchesRatio;
   const heightInInches = heightCm * cmToInchesRatio;
 
-  return { width, height, top, left, center, printArea, widthInInches, heightInInches };
+  const info = { width, height, top, left, center, printArea, widthInInches, heightInInches };
+  // console.log('getPrintAreaByName:info ', offsets, info, params);
+  return info;
 };

package/assets/js/utils/colors.js

@@ -7,7 +7,7 @@ export const isValidImageType = (i, type) => i.type === type || (i.types || []).
 export const isValidImageTypes = (i, types) => types.some(type => isValidImageType(i, type));
 
 export const getColorImage = (product = {}, size = 'small', type, color, allowAnyColor = false) => {
-  const colorImage = color && (product.images || []).find(i => isValidImageType(i, type || COLORS_IMAGES_TYPES.FRONT) && color._id === i.color);
+  const colorImage = color && (product.images || []).find(i => isValidImageType(i, type || COLORS_IMAGES_TYPES.FRONT) && (color._id === i.color || color._id === i.color._id));
   const image = colorImage || (product.images || []).find(i => isValidImageType(i, type || COLORS_IMAGES_TYPES.FRONT) && (allowAnyColor || !i.color));
   return image && staticLink(image[size]);
 };

package/assets/js/utils/fabric-helper.js

@@ -191,14 +191,16 @@ export default class FabricHelper {
   }
 
   createObject({ layer, active }) {
-    const initial = false; // !layer.modifiedAt;
+    const initial = !layer.modifiedAt;
+    console.log('createObject...', layer.type, layer.top, layer.left);
     return new Promise(resolve => {
       const methods = {
         text: 'createTextObject',
         art: 'createArtObject'
       };
       this[methods[layer.type]]({ layer, initial }).then(obj => {
-        obj.clipPath = this.boundingBox;
+        // obj.clipPath = this.boundingBox;
+        console.log('obj: ', obj.top, obj.left);
         this.handleListeners(obj, layer.type);
         this.editor.add(obj);
         if (active) {
@@ -222,21 +224,6 @@ export default class FabricHelper {
     buildWireframe({ width, height, editor: this.editor, print });
   }
 
-  checkAnyBoundingIntersection() {
-    const objects = this.editor.getObjects();
-
-    if (!objects.length) {
-      return this.dispatch('outOfPrintArea', false);
-    }
-
-    let isOut = false;
-    objects.forEach(object => {
-      if (!isOut) {
-        isOut = this.checkBoundingIntersection(object);
-      }
-    });
-  }
-
   checkBoundingIntersection(object) {
     const width = object.width * object.scaleX;
     const height = object.height * object.scaleY;
@@ -359,7 +346,7 @@ export default class FabricHelper {
           this.dispatch('setField', { field: 'copy', value: object.text });
         } else {
           this.dispatch('setDeleteButtonPosition', object.oCoords.tr);
-          this.checkBoundingIntersection(object);
+          // this.checkBoundingIntersection(object);
         }
       });
     }

package/assets/js/utils/filters.js

@@ -51,10 +51,10 @@ export const sizesRange = (sizes = []) => {
   return isDiffSizes ? `${first.shortName} - ${last.shortName}` : first && first.shortName;
 };
 
-export const pricingRange = pricing => {
+export const pricingRange = (pricing, currency) => {
   const calcPrice = (prev, current, calc) => typeof prev === 'number' ? calc(prev, current) : current;
   const [min, max] = (pricing || []).reduce(([min, max], { price }) => [calcPrice(min, price, Math.min), calcPrice(max, price, Math.max)], []);
-  return min !== max ? `${price(min)} - ${price(max)}` : price(min);
+  return min !== max ? `${price(min, currency)} - ${price(max, currency)}` : price(min, currency);
 };
 
 export const print = type => printsLabels[type];

package/assets/js/utils/product.js

@@ -148,4 +148,13 @@ export function sortByOrder(items, itemProp) {
 export function sortByOrderASC(items, itemProp) {
   const getOrder = item => (itemProp ? +(item[itemProp] && item[itemProp].order) : item.order) || 0;
   return [...(items || [])].sort((a, b) => getOrder(a) - getOrder(b));
-}
+}
+
+export function getAllPrintAreas(product) {
+  return product.printAreas
+    ?.reduce((options, pa) => [
+      ...options,
+      pa,
+      ...pa.sizes.map(s => ({ ...s, side: pa.side }))
+    ], []) || [];
+}

package/assets/scss/_common.scss

@@ -136,6 +136,16 @@ body {
     display: none !important;
   }
 }
+.hidden-md-and-down {
+  @media (max-width: $bp-medium-max) {
+    display: none !important;
+  }
+}
+.hidden-lg-and-down {
+  @media (max-width: $bp-large-max) {
+    display: none !important;
+  }
+}
 b {
   font-weight: bold;
 }

package/components/asides/contact_us/contact-us.vue

@@ -70,7 +70,7 @@
         v-slot="{ errors }"
         tag="div"
         name="Phone"
-        rules="required|phone"
+        :rules="phoneRules"
         class="form-row">
         <input
           id="phone"
@@ -178,6 +178,10 @@ export default {
     btnClass: {
       type: String,
       default: 'purple'
+    },
+    requiredPhone: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -187,7 +191,10 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['contacts', 'shop'])
+    ...mapGetters(['contacts', 'shop']),
+    phoneRules() {
+      return this.requiredPhone ? 'required|phone' : 'phone';
+    }
   },
   // mounted() {
   //   this.preloadReCaptcha();

package/components/asides/menu/menu.vue

@@ -1,30 +1,6 @@
 <template>
   <div class="Menu__wrapper">
-    <div
-      class="Menu__item"
-      @click="goTo('/')">
-      Editor
-    </div>
-    <div
-      class="Menu__item"
-      @click="goTo('/products')">
-      Products
-    </div>
-    <div
-      class="Menu__item"
-      @click="goTo('/pricing')">
-      Pricing
-    </div>
-    <div
-      class="Menu__item"
-      @click="goTo('/news')">
-      News
-    </div>
-    <div
-      class="Menu__item"
-      @click="goTo('/faq')">
-      FAQ
-    </div>
+    
   </div>
 </template>
 

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

@@ -12,7 +12,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop', 'country']),
+    ...mapGetters(['shop', 'country', 'currency']),
     ...mapGetters('auth', ['user']),
     ...mapGetters('cart', [
       'entities',
@@ -75,7 +75,7 @@ export default {
       const message = 'This will delete all items in this row, Press OK to continue or Cancel';
       const confirmed = await this.showConfirmationModal(message);
       if (confirmed) {
-        const data = { simpleProducts, shop: this.shop };
+        const data = { simpleProducts, shop: this.shop, currency: this.currency };
         this.removeSimpleProductsFromCart(data);
       }
     },
@@ -83,7 +83,7 @@ export default {
       const message = 'This will delete all items in cart, Press OK to continue or Cancel';
       const confirmed = await this.showConfirmationModal(message);
       if (confirmed) {
-        const data = { simpleProducts: this.simpleProducts, shop: this.shop };
+        const data = { simpleProducts: this.simpleProducts, shop: this.shop, currency: this.currency };
         this.removeSimpleProductsFromCart(data);
       }
     }

package/components/checkout/cart/cart.scss

@@ -1,115 +1,14 @@
 @import '@/assets/scss/variables';
 
 .Cart {
-  &__total {
-    padding: 12px;
-    background-color: $primary_100;
-    &-container {
-      display: flex;
-      align-items: flex-end;
-      justify-content: flex-end;
-      flex-direction: column;
-      margin-top: 50px;
-    }
+  &__total-container {
+    margin-top: 20px;
   }
-  &__postcode {
-    &-container {
-      margin-top: 30px;
-    }
-    &-prompt {
-      padding-bottom: 10px;
-      &-icon {
-        font-size: 14px;
-      }
-    }
-  }
-  &__quantity-errors {
-    margin-top: 10px;
-  }
-}
-
-.ProductColorsSelector {
-  &__wrapper {
-    margin-top: 35px;
-  }
-  &__controls {
-    display: flex;
-  }
-  &__add-btn {
-    flex-grow: 1;
-    .Btn__wrapper {
-      width: 100%;
-    }
-  }
-  &__head {
-    height: 50px;
-    flex-grow: 2;
-    background: $gray;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 20px;
-    font-weight: bold;
-    font-size: 16px;
-    line-height: 22px;
-    text-transform: uppercase;
-    color: $black;
-    cursor: pointer;
-
-    i {
-      &:before {
-        transform: rotate(180deg);
-        transition: transform .22s ease-in-out;
-      }
-    }
-    &--opened {
-      i {
-        &:before {
-          transform: rotate(0);
-        }
-      }
-    }
-  }
-  &__section {
-    margin-top: 24px;
-  }
-  &__option {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    &-preview {
-      width: 30px;
-      height: 30px;
-      margin-right: 10px;
-    }
-  }
-}
-
-::v-deep .ProductColorsSelectorOptions {
-  &__wrapper {
-    display: grid;
-    grid-template-columns: repeat(auto-fill,42px);
-    grid-column-gap: 9px;
-    grid-row-gap: 9px;
-    padding-top: 0;
-  }
-  &__color {
-    width: 42px;
-    height: 42px;
-    &::before,
-    &-inner {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      border-radius: 0;
-    }
-  }
-}
-
-::v-deep {
-  .multiselect__input {
-    color: $black;
+  &__postcode-container {
+    margin-top: 22px;
   }
+  // &__total-info {
+  //   position: sticky;
+  //   top: 130px;
+  // }
 }

package/components/checkout/cart/cart.vue

@@ -1,46 +1,64 @@
 <template>
   <div class="Cart__wrapper">
     <div
-      v-if="entities.length">
-      <div class="form-row Cart__products">
-        <div class="d-flex">
-          <btn
-            v-if="hasSelectedEntities"
-            btn-class="green"
-            btn-label="Remove Selected"
-            @onclick="removeSelectedEntities" />
-          <btn
-            v-if="hasGroupEntities"
-            btn-class="green"
-            btn-label="Clear Cart"
-            @onclick="removeAllEntities" />
-        </div>
-        <slot name="cart-entities-groups" v-bind="{ groupedEntities, selectedEntities }">
-          <cart-entities-group
-            v-for="[groupKey, group] in groupedEntities"
-            :key="groupKey"
-            :group="group"
-            :selected-entities="selectedEntities"
-            @remove="removeGroupEntities" />
-        </slot>
+      v-if="!isEmpty"
+      class="row">
+      <div class="col-es-12 col-8">
+        <cart-entity
+          v-for="entity in entities"
+          :key="entity._id"
+          :entity="entity"
+          class="Cart__entity"
+          @remove="removeSimpleProducts" />
       </div>
-      <div class="Cart__postcode-container">
-        <div
-          v-if="!suburb"
-          class="lc_regular16 Cart__postcode-prompt">
-          <i class="icon-attention-circled Cart__postcode-prompt-icon"></i>
-          Enter postcode to calculate delivery
+      <div class="col-es-12 col-4">
+        <div class="Cart__total-info">
+          <btn
+            class="hidden-extra-small"
+            btn-class="black"
+            btn-label="CLEAR CART"
+            :btn-block="true"
+            @onclick="removeAllSimpleProducts" />
+          <div class="Cart__total-container">
+            <cart-price-info @loaded="loadedPricing($event)" />
+          </div>
+          <div class="Cart__postcode-container">
+            <postcode-select
+              :suburb="suburb"
+              :labelless="true"
+              placeholder="Postcode"
+              label-text="Enter postcode to calculate shipping"
+              @select="handleSuburbChange" />
+          </div>
+          <div class="Cart__coupon-container">
+            <coupon-select
+              v-model="cartCoupon"
+              :pricing="cartPricingCalculating ? null : cartPricing"
+              label-text="Enter coupon code" />
+          </div>
+          <div class="Cart__quantity-errors">
+            <cart-quantity-errors />
+          </div>
+          <div class="mt-10">
+            <btn
+              :btn-disabled="isNotValidQuantity || cartPricingError || cartPricingCalculating"
+              :btn-block="true"
+              to="/checkout/order"
+              btn-class="green"
+              btn-label="PROCEED TO CHECKOUT">
+              <i
+                slot="icon-after"
+                class="icon-arrow-right"></i>
+            </btn>
+          </div>
+          <div class="mt-10 hidden-sm-and-up">
+            <btn
+              btn-class="black"
+              btn-label="CLEAR CART"
+              :btn-block="true"
+              @onclick="removeAllSimpleProducts" />
+          </div>
         </div>
-        <postcode-select
-          :suburb="suburb"
-          @select="handleSuburbChange">
-        </postcode-select>
-      </div>
-      <div class="Cart__total-container">
-        <cart-price-info :items-label="itemsLabel" />
-      </div>
-      <div class="Cart__quantity-errors">
-        <cart-quantity-errors />
       </div>
     </div>
     <div
@@ -52,23 +70,43 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+import gtm from '@lancom/shared/assets/js/utils/gtm';
 import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+import CouponSelect from '@lancom/shared/components/common/coupon_select/coupon-select';
+import CartQuantityErrors from '@lancom/shared/components/checkout/cart/cart_quantity_errors/cart-quantity-errors';
+import CartEntity from '@lancom/shared/components/checkout/cart/cart_entity/cart-entity';
 import { price } from '@lancom/shared/assets/js/utils/filters';
-import CartEntitiesGroup from './cart_entities_group/cart-entities-group';
-import CartPriceInfo from './cart_price_info/cart-price-info';
-import CartQuantityErrors from './cart_quantity_errors/cart-quantity-errors.vue';
-import CartMixin from './cart.mixin';
-
+import CartMixin from '@lancom/shared/components/checkout/cart/cart.mixin';
+import CartPriceInfo from '@lancom/shared/components/checkout/cart/cart_price_info/cart-price-info';
 export default {
   name: 'CheckoutCart',
   components: {
-    CartEntitiesGroup,
+    CartEntity,
     CartPriceInfo,
     CartQuantityErrors,
-    PostcodeSelect
+    PostcodeSelect,
+    CouponSelect
   },
   filters: { price },
-  mixins: [CartMixin]
+  mixins: [CartMixin],
+  computed: {
+    ...mapGetters('cart', ['isEmpty', 'cartPricingError', 'cartPricing', 'cartPricingCalculating', 'entities']),
+    cartCoupon: {
+      get() {
+        return this.coupon;
+      },
+      set(coupon) {
+        this.setCoupon(coupon);
+        this.calculateCartPrice({ shop: this.shop, country: this.country });
+      }
+    }
+  },
+  methods: {
+    loadedPricing() {
+      gtm.viewCart(this.entities, this.cartPricing);
+    }
+  }
 };
 </script>
 

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

@@ -92,7 +92,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop']),
+    ...mapGetters(['shop', 'currency']),
     ...mapGetters('cart', ['simpleProducts', 'cartProductsPricing']),
     model: {
       get() {
@@ -106,7 +106,8 @@ export default {
         this.setSimpleProductAmount({
           guid: this.simpleProduct.guid,
           amount: this.formatAmount(value),
-          shop: this.shop
+          shop: this.shop,
+          currency: this.currency
         });
       }
     },
@@ -137,7 +138,8 @@ export default {
       this.setSimpleProductAmount({
         guid: this.simpleProduct.guid,
         amount: this.formatAmount(this.model + 1),
-        shop: this.shop
+        shop: this.shop,
+        currency: this.currency
       });
       this.$emit('change');
     },
@@ -145,7 +147,8 @@ export default {
       this.setSimpleProductAmount({
         guid: this.simpleProduct.guid,
         amount: this.formatAmount(this.model - 1),
-        shop: this.shop
+        shop: this.shop,
+        currency: this.currency
       });
       this.$emit('change');
     }

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

@@ -1,10 +1,9 @@
 <template>
   <div class="CartPriceInfo__wrapper">
     <slot name="cart-pricing" v-bind="{ cartPricing, itemsLabel }">
-      <product-total-pricing
+      <cart-pricing
         v-if="cartPricing && cartPricing.amount"
-        :pricing="cartPricing"
-        :items-label="itemsLabel" />
+        :pricing="cartPricing" />
     </slot>
     <div
       v-if="cartPricingError"
@@ -17,7 +16,7 @@
 <script>
 import { mapGetters, createNamespacedHelpers } from 'vuex';
 import debounce from 'lodash.debounce';
-import ProductTotalPricing from '@lancom/shared/components/common/products_total_pricing/products-total-pricing';
+import CartPricing from '@lancom/shared/components/checkout/cart/cart_pricing/cart-pricing';
 import { price } from '@lancom/shared/assets/js/utils/filters';
 
 const { mapActions } = createNamespacedHelpers('cart');
@@ -26,7 +25,7 @@ export default {
   name: 'LancomCartPriceInfo',
   filters: { price },
   components: {
-    ProductTotalPricing
+    CartPricing
   },
   props: {
     itemsLabel: {

package/components/checkout/cart/cart_pricing/cart-pricing.scss

@@ -0,0 +1,34 @@
+@import '@/assets/scss/variables';
+
+.CartPricing {
+  &__wrapper {
+    border: 2px solid $gray;
+    padding: 28px 20px;
+    @media (max-width: $bp-small-max) {
+      padding: 15px 10px;
+    }
+
+    @media (max-width: $bp-small-max) {
+      .lc_h3 {
+        font-size: 19px;
+      }
+      .lc_body-large {
+        font-size: 14px;
+      }
+      .lc_title-large {
+        font-size: 16px;
+      }
+    }
+  }
+  &__info {
+    padding: 11px;
+    display: flex;
+    justify-content: space-between;
+    @media (max-width: $bp-small-max) {
+      padding: 6px;
+    }
+    &--gray {
+      background-color: $gray;
+    }
+  }
+}