@lancom/shared 0.0.89 → 0.0.93

package/assets/js/api/helpers.js

@@ -17,7 +17,8 @@ if (process.client) {
     });
 }
 
-export const buildPath = path => `${process.env.API_URL}/${path}`;
+const API_URL = process.client ? process.env.API_URL : process.env.LOCAL_API_URL;
+export const buildPath = path => `${API_URL}/${path}`;
 
 export const prepareHeaders = method => {
   const headers = {};

package/assets/js/utils/filters.js

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 import DateOnly from 'dateonly';
 
 import currencies from '../constants/currencies';
@@ -56,8 +56,12 @@ export const print = type => printsLabels[type];
 
 export const side = type => SIDE_TYPES[type];
 
+export const commaArray = (list = []) => {
+  return list.join(', ');
+};
+
 export const printsRange = (prints = []) => {
-  return prints.join(', ');
+  return commaArray(prints);
 };
 
 export const highlight = (string = '', query) => {
@@ -68,11 +72,11 @@ export const highlight = (string = '', query) => {
   return string.toString().replace(q, matchedTxt => (`<span class="highlight">${matchedTxt}</span>`));
 };
 
-export const date = d => moment(d).format('lll');
+export const date = d => dayjs(d).format('ddd, MMM D, YYYY h:mm A');
 
-export const shortDate = d => moment(d).format('DD/MM/YYYY');
+export const shortDate = d => dayjs(d).format('DD/MM/YYYY');
 
-export const sydneyTime = d => moment(d).utc().utcOffset(10).format('lll');
+export const sydneyTime = d => dayjs(d).utc().utcOffset(10).format('MMM D, YYYY h:mm A');
 
 export const priceInRange = (prices, amount) => (prices.find(({ min, max }) => min <= amount && (!max || max >= amount)) || { price: 0 }).price;
 

package/assets/js/utils/product.js

@@ -11,11 +11,12 @@ export function getProductsForCalculatePricing(mainProduct, simpleProducts, laye
     _id: mainProduct._id,
     prints: hasPrints ? prints.map(p => isCLearPrintsLayers ? ({ ...p, layers: null }) : p) : null,
     printSurcharge: mainProduct.printSurcharge || 0,
-    simpleProducts: simpleProducts.map(({ _id, amount, pricing, unprintedPricing, weight }) => ({
+    simpleProducts: simpleProducts.map(({ _id, amount, pricing, unprintedPricing, weight, volume }) => ({
       _id,
       amount,
       pricing: hasPrints ? pricing : unprintedPricing,
-      weight: weight || mainProduct.weight
+      weight: weight || mainProduct.weight,
+      volume: volume || mainProduct.volume
     }))
   }];
 }
@@ -121,7 +122,6 @@ export function generateProductsLink($route, data) {
 }
 
 export function generateProductLink(product, color, toEditor = false) {
-  console.log(product);
   const baseLink = `/${product.brand.alias}/${product.productType.alias}/${product.alias}`;
   return `${toEditor ? `${baseLink}/editor` : baseLink}${color ? `?color=${color.alias}` : ''}`;
 }

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

@@ -28,15 +28,14 @@ export default {
   },
   watch: {
     entities() {
-      this.calculateCartPrice(this.shop);
+      this.calculateCartPrice({ shop: this.shop });
     }
   },
   mounted() {
-    this.calculateCartPrice(this.shop);
+    this.calculateCartPrice({ shop: this.shop });
     if (!this.suburb && this.user?.suburb) {
       this.handleSuburbChange(this.user.suburb);
     }
-    console.log('user: ', this.user);
   },
   methods: {
     ...mapMutations('cart', [
@@ -48,7 +47,7 @@ export default {
     ]),
     handleSuburbChange(suburb) {
       this.setSuburb(suburb);
-      this.calculateCartPrice(this.shop);
+      this.calculateCartPrice({ shop: this.shop });
     },
     async removeSimpleProducts(simpleProducts) {
       const message = 'This will delete all items in this row, Press OK to continue or Cancel';

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

@@ -17,6 +17,14 @@
             {{ product.SKU }}
           </div>
         </div>
+        <div class="CartEntity__feature">
+          <div class="lc_title-small">
+            Brand:
+          </div>
+          <div class="lc_body-small">
+            {{ product.brand.name }}
+          </div>
+        </div>
       </div>
       <div>
         <cart-entity-color-simple-products

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

@@ -0,0 +1,10 @@
+@import '@/assets/scss/variables';
+
+.CartPriceInfo {
+  &__error {
+    padding: 10px;
+    font-size: 12px;
+    color: $white;
+    background-color: $error;
+  }
+}

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

@@ -1,11 +1,16 @@
 <template>
-  <div>
+  <div class="CartPriceInfo__wrapper">
     <slot name="cart-pricing" v-bind="{ cartPricing, itemsLabel }">
       <product-total-pricing
         v-if="cartPricing && cartPricing.amount"
         :pricing="cartPricing"
         :items-label="itemsLabel" />
     </slot>
+    <div
+      v-if="cartPricingError"
+      class="CartPriceInfo__error">
+      {{ cartPricingError }}
+    </div>
   </div>
 </template>
 
@@ -39,7 +44,8 @@ export default {
     ...mapGetters(['shop']),
     ...mapGetters('cart', [
       'entities',
-      'cartPricing'
+      'cartPricing',
+      'cartPricingError'
     ])
   },
   watch: {
@@ -55,7 +61,7 @@ export default {
       'calculateCartPrice'
     ]),
     calculatePrice() {
-      this.calculateCartPrice(this.shop);
+      this.calculateCartPrice({ shop: this.shop });
     }
   }
 };

package/components/checkout/cart/cart_shipments_pricing/cart-shipments-pricing.scss

@@ -0,0 +1,44 @@
+@import '@/assets/scss/variables';
+
+.CartShipmentsPricing {
+  &__title {
+    padding-top: 15px;
+    display: flex;
+    justify-content: space-between;
+    a {
+      color: $black
+    }
+  }
+  &__supplier {
+    padding: 10px 10px 5px 10px;
+    &-info {
+      display: flex;
+      justify-content: space-between;
+      font-weight: bold;
+      font-size: 16px;
+    }
+    &-brands {
+      display: flex;
+      i {
+        margin-left: -2px;
+        margin-right: 8px;
+        cursor: pointer;
+      }
+    }
+  }
+  &__rate {
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+    font-size: 16px;
+    &-icon {
+      margin-right: 10px;
+    }
+    &-info {
+      display: flex;
+      align-items: center;
+    }
+  }
+}

package/components/checkout/cart/cart_shipments_pricing/cart-shipments-pricing.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="CartShipmentsPricing__wrapper">
+    <div v-if="hasSuppliersWithRates">
+      <div class="CartShipmentsPricing__title">
+        <div class="lc_body-large lc_gray-main">Delivery</div>
+        <a
+          href="/info/shipping-info"
+          target="_blank">
+          Lern more <i class="icon-target"></i>
+        </a>
+      </div>
+      <div
+        v-for="(supplier, index) of suppliersWithRates"
+        :key="index"
+        class="CartShipmentsPricing__supplier">
+        <div class="CartShipmentsPricing__supplier-info">
+          <div class="CartShipmentsPricing__supplier-brands">
+            <div @click="removeSupplierConfirm(supplier)">
+              <i class="icon-delete"></i>
+            </div>
+            <div>
+              {{ supplier.brands.map(b => b.name) | commaArray }}
+            </div>
+          </div>
+          <div>
+            {{ supplier | selectedRatePrice | price }}
+          </div>
+        </div>
+        <div
+          v-for="(rate, i) of supplier.rates"
+          :key="`rate-${i}`"
+          class="CartShipmentsPricing__rate"
+          @click="selectRate({ supplier, rate, shop })">
+          <div class="CartShipmentsPricing__rate-info">
+            <div class="CartShipmentsPricing__rate-icon">
+              <checked-icon :checked="rate.selected" />
+            </div>
+            <div class="CartShipmentsPricing__rate-name">
+              <div>{{ rate.name }}</div>
+              <div
+                v-if="rate.note"
+                class="lc_regular10">
+                {{ rate.note }}
+              </div>
+            </div>
+          </div>
+          <div class="CartShipmentsPricing__rate-price">
+            {{ rate.totalPriceWithoutTax | price }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import { price, commaArray } from '@lancom/shared/assets/js/utils/filters';
+import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+import confirm from '@lancom/shared/mixins/confirm';
+
+export default {
+  name: 'LancomCartShipmentsPricing',
+  components: {
+    CheckedIcon
+  },
+  filters: {
+    price,
+    commaArray,
+    selectedRatePrice(supplier) {
+      const { totalPriceWithoutTax = 0 } = supplier.rates.find(r => r.selected) || {};
+      return totalPriceWithoutTax;
+    }
+  },
+  mixins: [confirm],
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('cart', [
+      'cartPricing'
+    ]),
+    hasSuppliersWithRates() {
+      return this.suppliersWithRates.length > 0;
+    },
+    suppliersWithRates() {
+      return this.cartPricing?.shipping?.suppliersWithRates || [];
+    }
+  },
+  methods: {
+    ...mapActions('cart', [
+      'selectRate',
+      'removeSupplier'
+    ]),
+    async removeSupplierConfirm(supplier) {
+      const message = `Will be removed all products related to brands: ${commaArray(supplier.brands.map(b => b.name))}. Are you sure?`;
+      const reset = await this.showConfirmationModal(message);
+
+      if (reset) {
+        this.removeSupplier({ supplier, shop: this.shop });
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-shipments-pricing.scss';
+</style>

package/components/checkout/order/address-form/address-form.vue

@@ -295,7 +295,7 @@ export default {
     handleSuburbChange(suburb) {
       this.setAddressSuburb(suburb);
       this.setSuburb(suburb);
-      this.calculateCartPrice(this.shop);
+      this.calculateCartPrice({ shop: this.shop });
     }
   }
 };

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

@@ -11,14 +11,6 @@
           <address-form
             :address="order.shippingAddress"
             :without-additional-info="true" />
-          <!-- <div class="form-row mt-10">
-            <label class="form-label">
-              <checkbox v-model="copyToShippingAddress" />
-              <span class="lc_regular14 lc__grey1">
-                Ship to this address
-              </span>
-            </label>
-          </div> -->
         </div>
         <progress-steps-controls
           :disabled-next="invalid || !order.shippingAddress.postcode"

package/components/checkout/order/order-shipping-method/order-shipping-method.vue

@@ -53,7 +53,7 @@ export default {
   },
   mounted() {
     if (!this.shippingPricing) {
-      this.calculateCartPrice(this.shop);
+      this.calculateCartPrice({ shop: this.shop });
     }
   },
   methods: {

package/components/common/progress_steps/progress-steps.scss

@@ -25,7 +25,7 @@
   &__content-wrapper {
     padding: 51px;
     position: relative;
-    @media (max-width: $bp-extra-small-max) {
+    @media (max-width: $bp-large-max) {
       padding: 15px;
     }
   }

package/components/editor/editor.vue

@@ -1,13 +1,5 @@
 <template>
   <div class="Editor__wrapper">
-    <!-- <div class="Editor__header">
-      <nuxt-link
-        to="/"
-        class="lc_link">
-        <i class="icon-left"></i>
-        Go to all models
-      </nuxt-link>
-    </div> -->
     <div class="Editor__content row">
       <breakpoint
         name="md"

package/components/editor/editor_layers/editor_layer_forms/editor_layer_common_fields/editor-layer-common-fields.vue

@@ -20,55 +20,6 @@
         </div>
       </div>
     </div>
-    <!-- <div class="form-row">
-      <div class="form-label">
-        Align:
-      </div>
-      <div class="EditorLayerCommonFields__align-options">
-        <div
-          v-tooltip="'Center vertically'"
-          class="EditorLayerCommonFields__align-option ripple"
-          :class="{ active: alignVertically === 'center' }"
-          @click="alignVertically = 'center'">
-          <i class="icon-vertical-align-center"></i>
-        </div>
-        <div
-          v-tooltip="'Center horizontally'"
-          class="EditorLayerCommonFields__align-option ripple"
-          :class="{ active: alignHorizontally === 'center' }"
-          @click="alignHorizontally = 'center'">
-          <i class="icon-horizonal-align-center"></i>
-        </div>
-        <div
-          v-tooltip="'Left'"
-          class="EditorLayerCommonFields__align-option ripple"
-          :class="{ active: alignHorizontally === 'left' }"
-          @click="alignHorizontally = 'left'">
-          <i class="icon-horizonal-align-left"></i>
-        </div>
-        <div
-          v-tooltip="'Right'"
-          class="EditorLayerCommonFields__align-option ripple"
-          :class="{ active: alignHorizontally === 'right' }"
-          @click="alignHorizontally = 'right'">
-          <i class="icon-horizonal-align-right"></i>
-        </div>
-        <div
-          v-tooltip="'Top'"
-          class="EditorLayerCommonFields__align-option ripple"
-          :class="{ active: alignVertically === 'top' }"
-          @click="alignVertically = 'top'">
-          <i class="icon-vertical-align-top"></i>
-        </div>
-        <div
-          v-tooltip="'Bottom'"
-          class="EditorLayerCommonFields__align-option ripple"
-          :class="{ active: alignVertically === 'bottom' }"
-          @click="alignVertically = 'bottom'">
-          <i class="icon-vertical-align-bottom"></i>
-        </div>
-      </div>
-    </div> -->
   </fragment>
 </template>
 

package/components/editor/editor_layers/editor_layer_forms/editor_layer_form_art/editor-layer-form-art.vue

@@ -5,12 +5,6 @@
         name="header"
         :invalid="invalid">
       </slot>
-      <!-- <div class="EditorLayerFormArt__content">
-        <input
-          v-model="url"
-          readonly
-          class="form-field" />
-      </div> -->
       <editor-layer-common-fields
         :layer="layer"
         @set-layer-field="data => $emit('set-layer-field', data)">

package/components/editor/editor_layers/editor_layers_toolbar/editor-layers-toolbar.vue

@@ -79,12 +79,16 @@
 
 <script>
 import { createNamespacedHelpers, mapGetters } from 'vuex';
+import FileUploader from '@lancom/shared/components/common/file_uploader';
 import modals from '@lancom/shared/mixins/modals';
 
 const { mapActions, mapMutations } = createNamespacedHelpers('product');
 
 export default {
   name: 'EditorLayersToolbar',
+  components: {
+    FileUploader
+  },
   mixins: [
     modals
   ],

package/components/editor/editor_pricing/editor-pricing.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="EditorPricing__wrapper">
     <div class="EditorPricing__main">
-      <!-- no qty, no layers -->
       <fragment v-if="!hasUsedSimpleProducts && !layers.length">
         <div class="EditorPricing__main-alert">
           <i class="icon-attention-circled"></i>
@@ -17,7 +16,6 @@
         </div>
       </fragment>
 
-      <!-- has qty, no layers -->
       <fragment v-else-if="hasUsedSimpleProducts && !layers.length">
         <div class="EditorPricing__main-alert">
           <i class="icon-attention-circled"></i>
@@ -36,7 +34,7 @@
           </div>
         </div>
       </fragment>
-      <!-- no qty, has layers -->
+
       <fragment v-else-if="!hasUsedSimpleProducts && layers.length">
         <div class="EditorPricing__main-alert">
           <i class="icon-attention-circled"></i>
@@ -55,7 +53,7 @@
           </div>
         </div>
       </fragment>
-      <!-- has qty, has layers -->
+
       <fragment v-else>
         <div class="EditorPricing__main-row">
           <div class="lc_regular14 EditorPricing__main-col">

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.vue

@@ -62,9 +62,6 @@
         class="EditorWorkspaceSide__alert-error view-transition">
         <i class="icon-attention-circled"></i>
         Part of your design layer is outside the print area.
-        <!-- <i
-          class="icon-cancel EditorWorkspaceSide__offset-warning-close"
-          @click="offsetWarningVisible = false"></i> -->
       </div>
     </transition-group>
   </div>

package/components/modals/order_modal/order-modal.vue

@@ -331,7 +331,7 @@ export default {
     handleSuburbChange(suburb) {
       this.form.suburb = suburb;
       this.setSuburb(suburb);
-      this.calculateCartPrice(this.shop);
+      this.calculateCartPrice({ shop: this.shop });
     },
     back() {
       this.switchModal('showCartModal');

package/components/order/order_payment/order-payment.vue

@@ -12,10 +12,6 @@
             btn-class="green PaymentSuccess__btn"
             btn-label="GO HOME"
             to="/" />
-          <!-- <btn
-            btn-class="green PaymentSuccess__btn"
-            btn-label="VIEW ORDER"
-            :to="`/order/${order.token}`" /> -->
         </div>
       </template>
     </payment-success>

package/components/order/order_status/order-status.vue

@@ -18,24 +18,6 @@
         {{ order.status }}
       </div>
     </div>
-    <!-- <h4 class="lc_h4">
-      Special
-    </h4>
-    <div class="OrderStatus__value">
-      <div v-if="isEditable">
-        <label class="form-label PaymentModal__label-with-checkbox">
-          <checkbox v-model="order.special" @change="changeStatus" />
-          <span class="lc_regular14 lc__grey1">
-            Special Order
-          </span>
-        </label>
-      </div>
-      <div
-        v-else
-        class="OrderStatus__status">
-        {{ order.special ? 'Yes' : 'No' }}
-      </div>
-    </div> -->
   </div>
 </template>
 

package/components/product/layouts/product_model_measurements/product-model-measurements.vue

@@ -9,11 +9,6 @@
                 src="~static/images/measurements_model.svg"
                 class="ProductModelMeasurements__icon" />
               <div class="form-actions center">
-                <!-- <btn
-                  btn-class="green-link"
-                  btn-label="Show model image"
-                  @click="showModel">
-                </btn> -->
               </div>
             </td>
             <td>

package/components/product/product.vue

@@ -30,13 +30,6 @@
         </section>
       </div>
     </div>
-    <!-- <div class="row Product__section-row">
-      <div class="col-12">
-        <section class="Product__section">
-          <product-labels-customization />
-        </section>
-      </div>
-    </div> -->
   </div>
 </template>
 

package/components/products/product_list/product-list.vue

@@ -14,7 +14,22 @@
         }"
         @mouseenter="setActiveProduct(index)"
         @mouseleave="setActiveProduct(null)">
-        <slot name="product" v-bind="{ product, full: activeProduct === index, toEditor }">
+        <slot
+          v-if="placeholder"
+          name="placeholder"
+          v-bind="{ product, full: activeProduct === index, toEditor }">
+          <product-list-product-placeholder
+            :product="product"
+            :to-editor="toEditor"
+            class="ProductList__item"
+            :class="{
+              'ProductList__item--active': activeProduct === index
+            }" />
+        </slot>
+        <slot
+          v-else
+          name="product"
+          v-bind="{ product, full: activeProduct === index, toEditor }">
           <product-list-product
             :product="product"
             :to-editor="toEditor"
@@ -36,11 +51,13 @@
 
 <script>
 import ProductListProduct from '../product_list_product/product-list-product';
+import ProductListProductPlaceholder from '../product_list_product_placeholder/product-list-product-placeholder';
 
 export default {
   name: 'LancomProductList',
   components: {
-    ProductListProduct
+    ProductListProduct,
+    ProductListProductPlaceholder
   },
   props: {
     products: {
@@ -50,6 +67,10 @@ export default {
     toEditor: {
       type: Boolean,
       default: true
+    },
+    placeholder: {
+      type: Boolean,
+      default: true
     }
   },
   data() {