@lancom/shared 0.0.333 → 0.0.335

package/assets/js/api/admin.js

@@ -284,6 +284,18 @@ export default {
   removeUser(id) {
     return _delete(`admin/user/${id}`);
   },
+  fetchCustomerById(id) {
+    return _get(`admin/customer/${id}`);
+  },
+  saveCustomer(customer) {
+    return customer._id ? _put(`admin/customer/${customer._id}`, customer) : _post('admin/customer', customer);
+  },
+  saveCustomerPassword(customer) {
+    return _put(`admin/customer/${customer._id}/password/${customer.passwordResetToken}`, customer);
+  },
+  removeCustomer(id) {
+    return _delete(`admin/customer/${id}`);
+  },
   fetchInventoryHistory(params) {
     return _get('admin/inventory-history', params);
   },

package/assets/js/api/index.js

@@ -35,6 +35,9 @@ const api = {
   saveCustomerPassword(customer, shop) {
     return _patch(`shop/${shop}/customer/${customer._id}/password/${customer.passwordResetToken}`, customer);
   },
+  fetchCustomerOrders(customer, shop) {
+    return _get(`shop/${shop}/customer/${customer._id}/orders`);
+  },
   searchProducts(shop, text) {
     return _get(`shop/${shop}/products/search`, { text });
   },

package/assets/js/utils/breakpoints.js

@@ -3,6 +3,7 @@ import debounce from 'lodash.debounce';
 
 class Breakpoints {
   screens = {
+    mini: 448,
     sm: 768,
     md: 1024,
     lg: 1280,
@@ -28,7 +29,9 @@ class Breakpoints {
   }
 
   getBreakpoint(w) {
-    if (this.isXs(w)) {
+    if (this.isMini(w)) {
+      return 'mini';
+    } else if (this.isXs(w)) {
       return 'xs';
     } else if (this.isSm(w)) {
       return 'sm';
@@ -43,8 +46,13 @@ class Breakpoints {
     }
   }
 
+
+  isMini(val) {
+    return val < this.screens.mini;
+  }
+
   isXs(val) {
-    return val < this.screens.sm;
+    return val >= this.screens.xs && val < this.screens.sm;
   }
 
   isSm(val) {

package/assets/scss/_common.scss

@@ -133,6 +133,11 @@ body {
     display: none !important;
   }
 }
+.hidden-mini-and-down {
+  @media (max-width: $bp-mini-max) {
+    display: none !important;
+  }
+}
 .hidden-extra-small {
   @media (max-width: $bp-extra-small-max) {
     display: none !important;

package/assets/scss/variables/_breakpoints.scss

@@ -10,3 +10,6 @@ $bp-small-max: 1023px;
 $bp-small-min: 768px;
 
 $bp-extra-small-max: 767px;
+$bp-extra-small-min: 450px;
+
+$bp-mini-max: 449px;

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

@@ -147,11 +147,9 @@
         <div class="ContactUs__contacts-row">
           <div class="ContactUs__contacts-entity">
             <i class="icon-mail-alt ContactUs__contacts-entity-icon"></i>
-            <a
-              :href="`mailto:${contacts.email}`"
-              class="ContactUs__contacts-entity-value">
-              {{ contacts.email }}
-            </a>
+            <email-link
+              :email="contacts.email"
+              class="ContactUs__contacts-entity-value" />
           </div>
           <div class="ContactUs__contacts-entity">
             <i class="icon-phone ContactUs__contacts-entity-icon"></i>
@@ -171,9 +169,13 @@
 import { mapGetters } from 'vuex';
 import api from '@lancom/shared/assets/js/api';
 import gtm from '@lancom/shared/assets/js/utils/gtm';
+import EmailLink from '@lancom/shared/components/email_link/email-link';
 
 export default {
   name: 'LancomContactUs',
+  components: {
+    EmailLink
+  },
   props: {
     btnClass: {
       type: String,

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

@@ -317,7 +317,7 @@ export default {
         this.$set(this.address, 'state', suburb.state);
         this.$set(this.address, 'postcode', suburb.postcode);
         this.$set(this.address, 'city', suburb.locality);
-        this.$set(this.address, 'country', suburb.country);
+        this.$set(this.address, 'country', suburb.country || 'Australia');
       }
     },
     handleSuburbChange(suburb) {

package/components/common/product_side_with_print/product-side-with-print.vue

@@ -2,12 +2,12 @@
   <div
     class="ProductSideWithPrint__wrapper"
     :class="{ preview }"
+    :style="colorBackground"
     @click="showImage()">
     <div
       class="ProductSideWithPrint__thumb"
       :style="{
-        'background-image': imageBackground,
-        'background-color': colorBackground
+        'background-image': imageBackground
       }"></div>
     <div
       v-if="print"
@@ -19,6 +19,7 @@
 <script>
 import { getProductCover, getColorImage } from '@lancom/shared/assets/js/utils/colors';
 import ImageViewer from '@lancom/shared/components/common/image_viewer/image-viewer';
+import { getColorBackgroundStyle } from '@lancom/shared/assets/js/utils/colors';
 
 export default {
   name: 'ProductSideWithPrint',
@@ -75,7 +76,7 @@ export default {
       return [...this.priviewProducts.reduce(predicate, new Map()).values()];
     },
     colorBackground() {
-      return this.fillBackground && this.product.color.rgb;
+      return this.fillBackground && getColorBackgroundStyle(this.product.color);
     },
     imageBackground() {
       return this.image && this.getImageBackground(this.image);

package/components/customer/customer_menu/customer-menu.scss

@@ -0,0 +1,113 @@
+@import "@/assets/scss/variables";
+
+.CustomerMenu {
+  &__wrapper {
+    position: relative;
+  }
+  &__inner {
+    min-width: 72px;
+    width: 33%;
+    height: 100%;
+    border-radius: 2px;
+    box-shadow: $elevation1;
+  }
+  &__value {
+    color: $grey_1;
+    text-transform: uppercase;
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    background-color: rgba(125, 106, 239, 0.07);
+    padding: 10px 10px 5px 10px;
+    border-radius: 20px;
+    &--divider {
+      display: block;
+      height: 16px;
+      width: 1px;
+      background-color: rgba(0, 0, 0, 0.14);
+      margin: 0 5px;
+    }
+    span i {
+      color: $brand_color_1;
+      font-size: 25px;
+    }
+    span img {
+      height: 25px;
+      position: relative;
+      top: 3px;
+      left: 2px;
+    }
+  }
+  &__divider {
+    margin-top: 10px;
+    margin-bottom: 5px;
+    border: 1px solid rgba(0, 0, 0, 0.14);
+    width: 100%;
+  }
+  &__caret {
+    color: $grey_5;
+    font-size: 18px;
+    cursor: pointer;
+  }
+  &__dropdown {
+    position: absolute;
+    z-index: 101;
+    top: 40px;
+    width: 220px;
+    margin-top: 20px;
+    margin-left: -55px;
+    // transform: translateY(-50%);
+    padding: 15px;
+    box-shadow: 0px 4px 121px 0px rgba(145, 136, 188, 0.34);
+    background-color: white;
+    border-radius: 12px;
+  }
+  &__backdrop {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    z-index: 100;
+    background: red;
+
+  }
+  &__field {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 26px;
+    letter-spacing: -0.025em;
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+    padding: 6px;
+    align-items: center;
+    &--open,
+    &--open * {
+      pointer-events: none !important;
+    }
+    > i {
+      color: $purple;
+    }
+    &-item {
+      padding: 7px 10px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      color: $purple;
+
+      &-checked {
+        margin-right: 10px;
+        margin-top: 2px;
+      }
+      &-icon {
+        margin-right: 10px;
+        margin-top: 3px;
+      }
+      &:hover {
+        color: $purple;
+      }
+    }
+  }
+}

package/components/customer/customer_menu/customer-menu.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="CustomerMenu__wrapper">
+    <div class="CustomerMenu__field">
+      <div class="lc_regular16 CustomerMenu__value">
+        <btn
+          class="ml-10"
+          btn-class="black"
+          btn-label=" "
+          @onclick="isOpen = !isOpen">
+          <template #icon-before>
+            <i class="icon-user"></i>
+          </template>
+          <template #icon-after>
+            <i class="icon-angle-down"></i>
+          </template>
+        </btn>
+        <span>
+          <i class="icon-globe"></i>
+        </span>
+      </div>
+    </div>
+    <div
+      v-if="isOpen"
+      class="CustomerMenu__dropdown">
+      <div>
+        <a href="/customer/settings" class="CustomerMenu__field-item">Settings</a>
+      </div>
+      <div>
+        <a href="/customer/orders"  class="CustomerMenu__field-item">Orders</a>
+      </div>
+    </div>
+  </div>
+</template>
+  
+<script>
+export default {
+  name: 'CustomerMenu',
+  data() {
+    return {
+      isOpen: false,
+    };
+  }
+};
+</script>
+  
+<style lang="scss">
+@import 'customer-menu';
+</style>
+  

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

@@ -0,0 +1,19 @@
+@import "@/assets/scss/variables";
+
+.CustomerOrders {
+  &__wrapper {
+    position: relative;
+  }
+  &__table {
+    th {
+      font-weight: bold;
+    }
+    td {
+      padding: 15px;
+      a {
+        color: $purple;
+        font-weight: bold;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+<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>
+  </div>
+</template>
+  
+<script>
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+import { date } from '@lancom/shared/assets/js/utils/filters';
+
+
+export default {
+  name: 'CustomerOrders',
+  filters: {
+    date
+  },
+  props: {
+    customer: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      orders: []
+    }
+  },
+  computed: {
+    ...mapGetters(['contacts', 'shop']),
+  },
+  mounted() {
+    this.locadCustomerOrders();
+  },
+  methods: {
+    async locadCustomerOrders() {
+      this.orders = await api.fetchCustomerOrders(this.customer, this.shop._id);
+    }
+  }
+};
+</script>
+  
+<style lang="scss">
+@import 'customer-orders';
+</style>
+  

package/components/editor/editor_product_details/editor-product-details.scss

@@ -73,10 +73,10 @@
     margin-top: 10px;
   }
   &__product-image {
-    width: 100%;
     text-align: center;
-    margin: 15px 0;
+    margin: 15px auto;
     height: 300px;
+    width: 300px;
     position: relative;
     display: none;
     @media (max-width: $bp-extra-small-max) {

package/components/editor/editor_product_details/editor-product-details.vue

@@ -110,6 +110,7 @@
         :product="previewPrintProduct"
         :side="side"
         :default-preview="false"
+        :fill-background="true"
         size="large" />
       <div
         class="EditorProductDetails__product-sides-toggle"

package/components/editor/editor_workspace/editor-workspace.scss

@@ -20,9 +20,13 @@
     &-container {
       position: relative;
       margin: 0 auto;
-      width: 310px;
-      height: 370px;
+      width: 290px;
+      height: 290px;
       max-width: 100%;
+      @media (min-width: $bp-extra-small-min) {
+        width: 330px;
+        height: 330px;
+      }
       @media (min-width: $bp-small-min) {
         width: 580px;
         height: 580px;
@@ -95,20 +99,27 @@
     margin: 0 auto;
     max-width: 100%;
     position: sticky;
-    bottom: 20px;
+    bottom: 0px;
     background: white;
-    width: 310px;
+    width: 290px;
+    @media (min-width: $bp-extra-small-min) {
+      width: 370px;
+    }
     @media (min-width: $bp-small-min) {
       width: 580px;
+      bottom: 20px;
     }
     @media (min-width: $bp-medium-min) {
       width: 430px;
+      bottom: 20px;
     }
     @media (min-width: $bp-large-min) {
       width: 600px;
+      bottom: 20px;
     }
     @media (min-width: $bp-extra-large-min) {
       width: 720px;
+      bottom: 20px;
     }
 
     &--bottom {

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

@@ -253,6 +253,7 @@ export default {
     },
     calcWorkspaceSize() {
       const sizes = {
+        mini: 290,
         xs: 330,
         sm: 580,
         md: 430,

package/components/email_link/email-link.vue

@@ -0,0 +1,23 @@
+<template>
+  <a ref="link"></a>
+</template>
+  
+<script>
+export default {
+  name: 'EmailLink',
+  props: {
+    email: {
+      type: Array | String,
+      required: true
+    }
+  },
+  mounted() {
+    if (process.client) {
+      const email = (Array.isArray(this.email) ? this.email : [this.email]).join('@');
+      const linkEl = this.$refs.link;
+      linkEl.href = `mailto:${email}`;
+      linkEl.textContent = email;
+    }
+  }
+};
+</script>

package/package.json

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

package/pages/customer/orders/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="CustomerCreate__wrapper">
+    <div class="lc_h2">Customer Orders</div>
+    <customer-orders class="mt-10" :customer="user" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import CustomerOrders from '@lancom/shared/components/customer/customer_orders/customer-orders';
+
+export default {
+  name: 'CustomerOrdersPage',
+  components: {
+    CustomerOrders
+  },
+  computed: {
+    ...mapGetters('auth', ['user'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.CustomerCreate {
+  &__wrapper {
+    padding-top: 30px;
+  }
+}
+</style>

package/routes/index.js

@@ -109,6 +109,11 @@ module.exports = function(routes, resolve) {
     path: '/customer/settings',
     component: resolve('@lancom/shared/pages/customer/settings.vue'),
     chunkName: 'pages/customer/settings'
+  }, {
+    name: 'customer-orders',
+    path: '/customer/orders',
+    component: resolve('@lancom/shared/pages/customer/orders.vue'),
+    chunkName: 'pages/customer/orders'
   }, {
     name: 'customer-recovery',
     path: '/customer/recovery',