@lancom/shared 0.0.382 → 0.0.384

package/components/customer/customer_orders/customer-orders.vue

@@ -1,40 +1,53 @@
 <template>
   <div class="CustomerOrders__wrapper">
-    <table class="lc_table bordered CustomerOrders__table">
-      <thead class="centered">
-        <tr>
-          <th>Created At</th>
-          <th>Code</th>
-          <th>Status</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="order of orders"
-          :key="order._id">
-          <td>{{ order.createdAt | date }}</td>
-          <td>
-            <a
-              :href="`/order/${order.token}`"
-              target="_blank">
-              {{ order.code }}
-            </a>
-          </td>
-          <td>{{ order.status }}</td>
-        </tr>
-      </tbody>
-    </table>
+    <client-only>
+      <v-server-table
+        :key="uniqueKey"
+        ref="table"
+        :columns="columns"
+        :options="options">
+        <template #createdAt="{ row }">
+          {{ row.createdAt | date }}
+        </template>
+        <template #code="{ row }">
+          <a
+            :href="`/order/${row.token}`"
+            target="_blank">
+            {{ row.code }}
+          </a>
+        </template>
+        <template #tracking="{ row }">
+          <div class="CustomerOrders__trackings">
+            <customer-order-trackings :order="row" />
+          </div>
+        </template>
+        <template #reorder="{ row }">
+          <div class="CustomerOrders__reorder">
+            <customer-order-reorder :order="row" />
+          </div>
+        </template>
+      </v-server-table>
+    </client-only>
   </div>
 </template>
   
 <script>
 import { mapGetters } from 'vuex';
-import api from '@lancom/shared/assets/js/api';
+import Vue from 'vue';
+import { ServerTable } from 'vue-tables-2';
 import { date } from '@lancom/shared/assets/js/utils/filters';
+import CustomerOrderTrackings from './customer_order_trackings/customer-order-trackings';
+import CustomerOrderReorder from './customer_order_reorder/customer-order-reorder';
+import { _get } from './../../../assets/js/api/helpers';
 
+Vue.use(ServerTable);
 
 export default {
   name: 'CustomerOrders',
+  components: {
+    CustomerOrderTrackings,
+    CustomerOrderReorder
+  },
   filters: {
     date
   },
@@ -46,19 +59,37 @@ export default {
   },
   data() {
     return {
-      orders: []
+      uniqueKey: Date.now(),
+      orders: [],
+      columns: ['createdAt', 'status', 'code', 'totalGST', 'tracking', 'reorder']
     }
   },
   computed: {
-    ...mapGetters(['contacts', 'shop']),
-  },
-  mounted() {
-    this.locadCustomerOrders();
+    ...mapGetters(['shop']),
+    url() {
+      return `shop/${this.shop._id}/customer/${this.customer._id}/orders`;
+    },
+    options() {
+      return {
+        query: null,
+        perPage: 15,
+        perPageValues: [15],
+        initialPage: 1,
+        filterable: false,
+        headings: { select: '' },
+        requestFunction: params => this.request(params),
+        columnsClasses: {
+          controls: 'controls-column'
+        }
+      };
+    }
   },
   methods: {
-    async locadCustomerOrders() {
-      this.orders = await api.fetchCustomerOrders(this.customer, this.shop._id);
-    }
+    async request(params) {
+      const query = { ...params };
+      const result = await _get(this.url, query);
+      return result;
+    },
   }
 };
 </script>

package/components/customer/customer_orders/customer_order_reorder/customer-order-reorder.scss

@@ -0,0 +1 @@
+@import "@/assets/scss/variables";

package/components/customer/customer_orders/customer_order_reorder/customer-order-reorder.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="CustomerOrderReorder__wrapper">
+    <btn
+      btn-class="green"
+      :btn-disabled="processing"
+      :btn-processing="processing"
+      btn-label="Re-order"
+      @onclick="reorder()">
+    </btn>
+  </div>
+</template>
+  
+<script>
+import { mapActions } from 'vuex';
+
+export default {
+  name: 'CustomerOrderTrackings',
+  data() {
+    return {
+      processing: false
+    }
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    ...mapActions('cart', ['clearCart', 'addToCart']),
+    async reorder() {
+      try {
+        this.processing = true;
+        await this.clearCart();
+        await this.addToCart({
+          entities: this.order.products,
+          shop: this.order.shop,
+          country: this.order.country,
+          currency: this.order.currency
+        });
+        this.$router.push('/checkout/cart');
+      } catch (e) {
+        console.log(e);
+      } finally {
+        this.processing = false;
+      }
+    }
+  }
+};
+</script>
+  
+<style lang="scss">
+@import 'customer-order-reorder';
+</style>
+  

package/components/customer/customer_orders/customer_order_trackings/customer-order-trackings.scss

@@ -0,0 +1,8 @@
+@import "@/assets/scss/variables";
+
+.CustomerOrderTrackings {
+  &__item {
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+}

package/components/customer/customer_orders/customer_order_trackings/customer-order-trackings.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="CustomerOrderTrackings__wrapper">
+    <div
+      v-for="tracking of trackings"
+      :key="tracking._id"
+      class="CustomerOrderTrackings__item">
+      <a
+        :href="tracking.link"
+        target="_blank">
+        {{ tracking.code }}
+      </a>
+    </div>
+  </div>
+</template>
+  
+<script>
+export default {
+  name: 'CustomerOrderTrackings',
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    trackings() {
+      return (this.order.shipments || [])
+        .filter(s => !s.hasException)
+        .reduce((trackings, shipment) => [...trackings, ...(shipment.trackingNumbers || [])], []);
+    }
+  }
+};
+</script>
+  
+<style lang="scss">
+@import 'customer-order-trackings';
+</style>
+  

package/components/quotes/quote_view/quote-view.vue

@@ -53,6 +53,7 @@
         v-for="(optionItem, index) of options"
         :key="`option-${index}`"
         :option="optionItem"
+        :quote="quote"
         class="QuoteView__option" />
     </div>
     <h6

package/components/quotes/quote_view/quote_option_view/quote-option-view.vue

@@ -33,6 +33,10 @@ export default {
     QuoteViewProduct
   },
   props: {
+    quote: {
+      type: Object,
+      require: true
+    },
     option: {
       type: Object,
       require: true

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

@@ -37,7 +37,8 @@
           <quote-product-color-simple-product
             v-for="simpleProduct in group.simpleProducts"
             :key="simpleProduct._id"
-            :simple-product="simpleProduct" />
+            :simple-product="simpleProduct"
+            @change="onChangeColorSimpleProduct($event)" />
         </div>
         <div class="QuoteProductColorSimpleProducts__totals">
           <div
@@ -89,7 +90,13 @@ export default {
   },
   mixins: [
     QuoteProductColorSimpleProducts
-  ]
+  ],
+  methods: {
+    onChangeColorSimpleProduct() {
+      console.log('onChangeColorSimpleProduct:change...');
+      this.$emit('change');
+    }
+  }
 };
 </script>
 

package/components/quotes/quote_view/quote_product_color_simple_products/quote_product_color_simple_product/quote-product-color-simple-product.scss

@@ -7,6 +7,7 @@
     align-items: center;
     flex-direction: column;
     margin-right: 4px;
+    margin-bottom: 5px;
   }
   &__label {
     font-weight: 600;
@@ -17,10 +18,16 @@
     margin-bottom: 6px;
     margin-top: 0px;
   }
+  &__field-wrapper {
+    position: relative;
+    &:hover .QuoteProductColorSimpleProduct__controls {
+      display: flex;
+    }
+  }
   &__field {
     width: 32px;
     height: 28px;
-    background: #efefef;
+    background: $gray;
     font-weight: 600;
     font-size: 14px;
     line-height: 19px;
@@ -28,5 +35,51 @@
     color: #A2A2A2;
     border-radius: 0;
     padding: 2px !important;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    &[type=number] {
+      -moz-appearance: textfield;
+    }
+    &.empty {
+      color: #272727;
+    }
+    &.error {
+      color: #ff5a5a;
+    }
+  }
+  &__price {
+    width: 32px;
+    height: 28px;
+    font-size: 9px;
+    text-align: center;
+    color: #A2A2A2;
+    padding-top: 5px;
+  }
+  &__controls {
+    display: flex;
+    flex-direction: column;
+    display: none;
+  }
+  &__control {
+    position: absolute;
+    bottom: -10px;
+    width: 16px;
+    height: 16px;
+    background: $white;
+    border: 1px solid $gray;
+    font-size: 12px;
+    z-index: 4;
+    cursor: pointer;
+    text-align: center;
+    &--encrease {
+      right: 0px;
+    }
+    &--decrease {
+      left: 0px;
+    }
   }
 }

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

@@ -1,23 +1,101 @@
 <template>
   <div class="QuoteProductColorSimpleProduct__wrapper">
-    <div class="lc_regular16 QuoteProductColorSimpleProduct__label">
+    <label
+      :for="`amount-${simpleProduct.guid}`"
+      class="lc_regular16 QuoteProductColorSimpleProduct__label">
       {{ simpleProduct.size.shortName }}
-    </div>
-    <div
-      class="centered QuoteProductColorSimpleProduct__field">
-      {{ simpleProduct.amount || '-' }}
+    </label>
+    <div class="QuoteProductColorSimpleProduct__field-wrapper">
+      <input
+        :id="`amount-${simpleProduct.guid}`"
+        ref="input"
+        v-model.number="model"
+        type="number"
+        min="0"
+        class="form-field centered QuoteProductColorSimpleProduct__field"
+        :class="{
+          empty: !model,
+          error: model > simpleProduct.quantityStock
+        }"
+        @wheel="onWheel"
+        @change="onChange()" />
+      <div class="QuoteProductColorSimpleProduct__controls">
+        <span
+          class="QuoteProductColorSimpleProduct__control QuoteProductColorSimpleProduct__control--decrease"
+          @click="decrease()">
+          -
+        </span>
+        <span
+          class="QuoteProductColorSimpleProduct__control QuoteProductColorSimpleProduct__control--encrease"
+          @click="encrease()">
+          +
+        </span>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import confirm from '@lancom/shared/mixins/confirm';
+import { inRange, price } from '@lancom/shared/assets/js/utils/filters';
+
 export default {
   name: 'QuoteProductColorSimpleProduct',
+  mixins: [confirm],
+  filters: {
+    price
+  },
   props: {
     simpleProduct: {
       type: Object,
       required: true
     }
+  },
+  computed: {
+    model: {
+      get() {
+        return this.simpleProduct.amount;
+      },
+      set(value) {
+        this.setSimpleProductAmount({
+          guid: this.simpleProduct.guid,
+          amount: this.formatAmount(value)
+        });
+      }
+    }
+  },
+  methods: {
+    setSimpleProductAmount({ amount }) {
+      this.simpleProduct.amount = amount;
+    },
+    onWheel(e) {
+      e.target.blur();
+    },
+    onChange() {
+      if (this.$refs.input) {
+        this.$refs.input.blur();
+      }
+      this.$emit('change');
+    },
+    formatAmount(value) {
+      return inRange(value, 0, this.simpleProduct.quantityStock || 999);
+    },
+    encrease() {
+      console.log('encrease...');
+      this.setSimpleProductAmount({
+        guid: this.simpleProduct.guid,
+        amount: this.formatAmount(this.model + 1)
+      });
+      this.$emit('change');
+    },
+    decrease() {
+      console.log('decrease...');
+      this.setSimpleProductAmount({
+        guid: this.simpleProduct.guid,
+        amount: this.formatAmount(this.model - 1)
+      });
+      this.$emit('change');
+    }
   }
 };
 </script>

package/components/quotes/quote_view/quote_view_product/quote-view-product.scss

@@ -8,6 +8,13 @@
       margin-right: 26px;
     }
   }
+  &__qty-warning {
+    font-size: 12px;
+    color: rgb(194, 7, 7);
+    b {
+      font-weight: bold;
+    }
+  }
   &__features {
     margin-top: 4px;
     padding-bottom: 4px;

package/components/quotes/quote_view/quote_view_product/quote-view-product.vue

@@ -63,7 +63,13 @@
           :entity="product"
           :group="group"
           :default-preview="groupedProducts.size === 1"
+          @change="onChangeColorSimpleProduct()"
           class="QuoteViewProduct__item" />
+        <div
+          v-if="!isValidTotalQty"
+          class="QuoteViewProduct__qty-warning">
+          Total Qty Should Be: <b>{{ product.totalAmount }}</b>
+        </div>
       </div>
       <div
         v-if="hasPrints"
@@ -103,12 +109,18 @@ export default {
       type: Object,
       required: true
     },
+    pricing: {
+      type: Object
+    },
     withDivider: {
       type: Boolean,
       default: true
     }
   },
   computed: {
+    isValidTotalQty() {
+      return this.product.totalAmount > 0 && this.product.totalAmount === this.amount;
+    },
     productLink() {
       return this.product.product ? generateProductLink(this.product.product) : null;
     },
@@ -128,17 +140,27 @@ export default {
       return [...groupSimpleProducts(this.product, !this.product.isCustom, true)].filter(([, g]) => g.amount > 0);
     },
     totalPrice() {
-      const printsTotal = (this.product.prints || []).reduce((total, print) => {
-        const isMultiplePrint = (print.products || []).length > 0;
-        const printProducts = print.products || [];
-        const isMultiplePrintMainProduct = printProducts.indexOf(this.product.guid) === 0 || printProducts.indexOf(this.product._id) === 0;
-        const isFreeSetup = print.freeSetupOver >= 0 && this.amount > print.freeSetupOver;
-        const printCost = print.costType === 'setup only' ? 0 : print.printCost;
-        const setupCost = (isMultiplePrint && !isMultiplePrintMainProduct) ? 0 : (print.costType === 'item cost only' || isFreeSetup) ? 0 : print.setupCost;
-        return total + this.amount * printCost + setupCost;
-      }, 0);
-      const productsTotal = this.simpleProducts.reduce((total, { amount = 0, productCost = 0 }) => total + amount * productCost, 0);
-      return this.amount > 0 ? (printsTotal + productsTotal) : 0;
+      if (this.pricing) {
+        return this.pricing?.products[this.product._id]?.totalPriceWithoutTax;
+      } else {
+        const printsTotal = (this.product.prints || []).reduce((total, print) => {
+          const isMultiplePrint = (print.products || []).length > 0;
+          const printProducts = print.products || [];
+          const isMultiplePrintMainProduct = printProducts.indexOf(this.product.guid) === 0 || printProducts.indexOf(this.product._id) === 0;
+          const isFreeSetup = print.freeSetupOver >= 0 && this.amount > print.freeSetupOver;
+          const printCost = print.costType === 'setup only' ? 0 : print.printCost;
+          const setupCost = (isMultiplePrint && !isMultiplePrintMainProduct) ? 0 : (print.costType === 'item cost only' || isFreeSetup) ? 0 : print.setupCost;
+          return total + this.amount * printCost + setupCost;
+        }, 0);
+        const productsTotal = this.simpleProducts.reduce((total, { amount = 0, productCost = 0 }) => total + amount * productCost, 0);
+        return this.amount > 0 ? (printsTotal + productsTotal) : 0;
+      }
+    }
+  },
+  methods: {
+    onChangeColorSimpleProduct() {
+      console.log('onChangeColorSimpleProduct2:change...');
+      this.$emit('change');
     }
   }
 };

package/feeds/google-shopping.js

@@ -1,5 +1,5 @@
 async function googleLocalShoppingFeed(axios, config, availableStores, country) {
-  const result = await googleShoppingFeed(axios, config, availableStores, country);
+  const result = await googleShoppingFeed(axios, config, availableStores, country, false, { allowSameDayDelivery: true });
   
   const fields = [
     'g:availability',
@@ -8,10 +8,11 @@ async function googleLocalShoppingFeed(axios, config, availableStores, country)
     'g:pickup_sla',
     'g:price',
     'g:quantity',
-    'g:store_code'
+    'g:store_code',
+    'g:local_shipping_label'
   ];
   result.rss.channel.item = result.rss.channel.item
-    .map(i => fields.reduce((item, field) => ({ ...item, [field]: i[field] }), {}));
+    .map(i => fields.reduce((item, field) => i[field] ? ({ ...item, [field]: i[field] }) : item, {}));
   return result;
 }
 
@@ -19,7 +20,8 @@ const COUNTRIES_SIZE_SYSTEMS = {
   GB: 'UK'
 };
 
-async function googleShoppingFeed(axios, config, availableStores, country, isEditor) {
+async function googleShoppingFeed(axios, config, availableStores, country, isEditor, params) {
+  const { allowSameDayDelivery } = params || {};
   const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/products?host=${config.HOST_NAME}&country=${country || ''}`);
   const spliceFirstImage = images => (images || []).splice(0, 1)[0];
   const getImages = images => (images || []).length > 0 ? images : null;
@@ -127,6 +129,10 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 info['g:shipping_label'] = product.country;
               }
 
+              if (allowSameDayDelivery && product.sameDayDelivery) {
+                info['g:local_shipping_label'] = { _text: 'sameday' };
+              }
+
               const productHighlight = `${product.feedProductHighlight || ''}`
                 .trim()
                 .split(/\n+/g)

package/package.json

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

package/pages/checkout/order.vue

@@ -3,10 +3,19 @@
     :data-aos="aosFadeRight"
     class="CheckoutOrderPage__wrapper">
     <order>
-      <cart-price-info
-        slot="after-steps"
-        class="CheckoutOrderPage__pricing"
-        @loaded="loadedPricing($event)" />
+      <template #after-steps>
+        <div class="CheckoutOrderPage__pricing">
+          <btn
+            btn-class="black"
+            btn-label="EDIT CART"
+            :btn-block="true"
+            to="/checkout/cart" />
+          <cart-price-info
+            class="mt-10"
+            :disabled-rates="true"
+            @loaded="loadedPricing($event)" />
+        </div>
+      </template>
     </order>
   </div>
 </template>

package/pages/customer/coupons.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    :data-aos="aosFadeRight"
+    class="CustomerCouponsPage__wrapper">
+    <customer-menu active-menu-item="coupons" />
+    <customer-coupons :customer="user" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import metaInfo from '@lancom/shared/mixins/meta-info';
+
+export default {
+  name: 'CustomerCouponsPage',
+  components: {
+    CustomerCoupons: () => import('@lancom/shared/components/customer/customer_coupons/customer-coupons'),
+    CustomerMenu: () => import('@lancom/shared/components/customer/customer_navigation_menu/customer-navigation-menu')
+  },
+  mixins: [metaInfo],
+  computed: {
+    ...mapGetters('auth', ['user'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  @import "@/assets/scss/variables";
+
+  .CustomerCouponsPage {
+    &__wrapper {
+      margin: 50px auto;
+      width: 1100px;
+      @media (max-width: $bp-extra-small-max) {
+        width: auto;
+      }
+    }
+  }
+</style>