@lancom/shared 0.0.456 → 0.0.458

package/assets/js/api/admin.js

@@ -714,6 +714,18 @@ export default {
   removeProductColor(id) {
     return _delete(`admin/colors/${id}`);
   },
+  async fetchColorGroups() {
+    return sortByName(await _get('admin/color-groups'));
+  },
+  fetchColorGroupById(id) {
+    return _get(`admin/color-groups/${id}`);
+  },
+  saveColorGroup(colorGroup) {
+    return colorGroup._id ? _put(`admin/color-groups/${colorGroup._id}`, colorGroup) : _post('admin/color-groups', colorGroup);
+  },
+  removeColorGroup(id) {
+    return _delete(`admin/color-groups/${id}`);
+  },
   async fetchProductSizes() {
     return sortSizes(await _get('admin/sizes'));
   },

package/components/products/products_aside/products-aside.vue

@@ -37,6 +37,9 @@
           :has-selected-icon="hasSelectedIcon"
           :selected-icon-circle="selectedIconCircle" />
       </div>
+      <div class="ProductsAside__item">
+        <products-color-groups />
+      </div>
       <div class="ProductsAside__item">
         <products-colors />
       </div>
@@ -58,6 +61,7 @@ import ProductsBrands from '@lancom/shared/components/products/products_brands/p
 import ProductsTags from '@lancom/shared/components/products/products_tags/products-tags';
 import ProductsAttributes from '@lancom/shared/components/products/products_attributes/products-attributes';
 import ProductsColors from '@lancom/shared/components/products/products_colors/products-colors';
+import ProductsColorGroups from '@lancom/shared/components/products/products_color_groups/products-color-groups';
 import ProductsProductionTime from '@lancom/shared/components/products/products_production_time/products-production-time';
 import ProductsMinimumQty from '@lancom/shared/components/products/products_minimum_qty/products-minimum-qty';
 import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
@@ -70,6 +74,7 @@ export default {
     ProductsTags,
     ProductsAttributes,
     ProductsColors,
+    ProductsColorGroups,
     ProductsProductionTime,
     ProductsMinimumQty
   },

package/components/products/products_color_groups/products-color-groups.scss

@@ -0,0 +1,69 @@
+@import "@/assets/scss/variables";
+
+.ProductsColorGroups {
+  &__header {
+    font-size: 22px;
+    line-height: 20px;
+    font-weight: 600;
+    margin-top: 3px;
+    margin-bottom: 24px;
+    color: $black;
+  }
+  &__selected-item {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    font-weight: bold;
+    margin: 12px 0;
+    padding-top: 4px;
+    color: $grey_1;
+    i {
+      font-size: 22px;
+    }
+    a {
+      color: $grey_1;
+    }
+  }
+  &__selected-name {
+    flex-grow: 1;
+    margin-left: 14px;
+    text-transform: uppercase;
+  }
+  &__selected-cancel {
+    cursor: pointer;
+  }
+  &__color-group {
+    padding: 2px;
+    border: 2px solid $white;
+    width: 36px;
+    height: 36px;
+    border-radius: 13px;
+    overflow: hidden;
+    flex-shrink: 0;
+    &-image {
+      width: 100%;
+      height: 100%;
+      border-radius: 11px;
+      overflow: hidden;
+    }
+    &--selected {
+      border: 2px solid $grey_1;
+    }
+  }
+  &__items {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 20px;
+    margin-left: -5px;
+    &-color-group {
+      margin: 1px 4px;
+    }
+  }
+  &__toggle-list {
+    margin-top: 5px;
+    margin-right: 10px;
+    font-size: 11px;
+    cursor: pointer;
+    text-align: right;
+  }
+}

package/components/products/products_color_groups/products-color-groups.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="ProductsColorGroups__wrapper">
+    <toggle-content label="Colour Groups">
+      <div class="ProductsColorGroups__selected">
+        <div
+          v-for="colorGroup in selectedColorGroups"
+          :key="colorGroup._id"
+          class="ProductsColorGroups__selected-item">
+          <div class="ProductsColorGroups__color-group ProductsColorGroups__color-group--selected">
+            <product-color-image
+              :color="colorGroup"
+              class="ProductsColorGroups__color-group-image" />
+          </div>
+          <div class="ProductsColorGroups__selected-name">
+            {{ colorGroup.name }}
+          </div>
+          <products-link :color-group="colorGroup.alias">
+            <i class="icon-cancel ProductsColorGroups__selected-cancel"></i>
+          </products-link>
+        </div>
+      </div>
+      <div class="ProductsColorGroups__items">
+        <products-link
+          v-for="colorGroup in visibleColorGroups"
+          :key="colorGroup._id"
+          v-tooltip="colorGroup.name"
+          :color-group="colorGroup.alias">
+          <div
+            class="ProductsColorGroups__items-color-group ProductsColorGroups__color-group"
+            :class="{
+              'ProductsColorGroups__color-group--selected': isSelectedColorGroup(colorGroup)
+            }">
+            <product-color-image
+              v-if="canLoadImages"
+              :color="colorGroup"
+              class="ProductsColorGroups__color-group-image" />
+          </div>
+        </products-link>
+      </div>
+      <div
+        v-if="shortListColorGroupsLimit < colorGroupsCount"
+        @click="toggleDisplayAllColorGroups()"
+        class="ProductsColorGroups__toggle-list">
+        {{ displayAllColorGroups ? 'Hide all colour groups' : 'Show all colour groups' }}
+      </div>
+    </toggle-content>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import ToggleContent from '@lancom/shared/components/common/toggle-content';
+import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
+import ProductColorImage from '@lancom/shared/components/product/product_color_image/product-color-image';
+
+export default {
+  name: 'ProductsColorGroups',
+  components: {
+    ProductColorImage,
+    ProductsLink,
+    ToggleContent
+  },
+  data() {
+    return {
+      canLoadImages: false,
+      displayAllColorGroups: false,
+      shortListColorGroupsLimit: 15
+    };
+  },
+  computed: {
+    ...mapGetters('products', ['colorGroups']),
+    colorGroupsCount() {
+      return this.colorGroups.length;
+    },
+    selectedColorGroups() {
+      const colorGroups = (this.$route.query.colorGroups || '').split(',');
+      return this.colorGroups.filter(colorGroup => colorGroups.includes(colorGroup.alias));
+    },
+    visibleColorGroups() {
+      return this.displayAllColorGroups ? this.colorGroups : this.colorGroups.slice(0, this.shortListColorGroupsLimit);
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.canLoadImages = true;
+    }, 1000);
+  },
+  methods: {
+    isSelectedColorGroup(colorGroup) {
+      return this.selectedColorGroups.some(cg => cg._id === colorGroup._id);
+    },
+    toggleDisplayAllColorGroups() {
+      this.displayAllColorGroups = !this.displayAllColorGroups;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-color-groups';
+</style>

package/components/products/products_link/products-link.vue

@@ -27,6 +27,9 @@ export default {
     color: {
       type: String
     },
+    colorGroup: {
+      type: String
+    },
     productionTime: {
       type: String
     },
@@ -51,6 +54,7 @@ export default {
         brand: this.brand,
         tags: this.tags,
         colors: this.color,
+        colorGroups: this.colorGroup,
         productionTime: this.productionTime,
         minimumQty: this.minimumQty,
         option: this.option,

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

@@ -1,29 +1,83 @@
+@import "@/assets/scss/variables";
+
 .QuoteView {
   &__wrapper {
-    margin-top: 50px;
+    display: flex;
   }
-  &__option {
-    border: 1px solid #dee2e6;
-    padding: 30px;
-    margin-bottom: 50px;
+  &__header {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background-color: $white;
+  }
+  &__sidebar {
+    width: 250px;
+    flex-shrink: 0;
+    &-content {
+      position: sticky;
+      top: 30px;
+    }
+  }
+  &__content {
+    border-left: 2px solid $gray;
+    position: relative;
+    flex-grow: 1;
+    @media (max-width: $bp-small-max) {
+      border-left: none;
+      width: 100%;
+    }
   }
   &__info {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 10px;
-  }
-  &__logo {
-    margin-bottom: 20px;
-  }
-  &__table {
-    margin-top: 20px;
-    margin-bottom: 10px;
-    td {
-      width: 50%;
-      padding: 20px;
+    margin-top: 32px;
+    padding-left: 25px;
+  }
+  &__info-alert {
+    margin: 20px 0;
+    padding: 25px;
+    text-align: center;
+    border: 1px solid $orange;
+    color: $orange;
+    font-size: 18px;
+    line-height: 29px;
+    a {
+      color: $orange;
+    }
+  }
+  &__text {
+    margin-top: 110px;
+    font-weight: 800;
+    font-size: 22px;
+    line-height: 35px;
+    @media (max-width: $bp-small-max) {
+      margin-top: 50px;
+      font-size: 17px;
+      line-height: 25px;
     }
+    a {
+      color: $black;
+    }
+  }
+  &__message {
+    margin-top: 120px;
+    @media (max-width: $bp-small-max) {
+      margin-top: 50px;
+    }
+  }
+  &__element {
+    padding-left: 86px;
+    @media (max-width: $bp-small-max) {
+      padding-left: 0px;
+    }
+  }
+  &__options {
+   margin-top: 40px; 
+  }
+  &__option {
+   margin-bottom: 120px; 
+  }
+  &__accept {
+    position: sticky;
+    bottom: 0px;
+    margin-top: 120px;
   }
-}
-.uppercase {
-    text-transform: uppercase;
-}
+}

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

@@ -1,117 +1,105 @@
 <template>
   <div class="QuoteView__wrapper">
     <div
-      v-if="quote.shop.logo"
-      class="QuoteView__logo">
-      <img :src="quote.shop.logo.small" />
-    </div>
-    <div class="QuoteView__info">
-      <div>
-        <h2 class="lc_h2"> {{ quote.shop.name }} </h2>
-        <h4 v-if="shopContacts" class="lc_h4"> ABN: {{ shopContacts.abn }} </h4>
+      :data-aos="aosFadeLeft"
+      class="QuoteView__sidebar hidden-sm-and-down">
+      <div class="QuoteView__sidebar-content">
+        <quote-view-info class="QuoteView__info" />
+        <quote-view-menu />
       </div>
-      <h1 class="text-secondary lc_h1">
-        QUOTE
-      </h1>
     </div>
-    <div class="QuoteView__info">
-      <div v-if="shopContacts">
-        <div class="lc_regular16">
-          {{ shopContacts.company }}
+    <div
+      :data-aos="aosFadeRight"
+      class="QuoteView__content">
+      <quote-view-header class="QuoteView__element QuoteView__header" />
+      <quote-view-banner class="QuoteView__banner" />
+      <div v-if="checkPayment || (!isExpiredQuote && !isOrdered)">
+        <quote-view-message
+          id="quote-intro"
+          class="QuoteView__element QuoteView__message" />
+        <div class="QuoteView__element QuoteView__text">
+          As always, if you have any questions about this quote, please reach out to us on 02 8880 3731 or email <email-link :email="['team','workdepot.com.au']" />
         </div>
-        <div class="lc_regular16">
-          {{ shopContacts.address }}
+        <div class="QuoteView__element QuoteView__options">
+          <div
+            v-for="o in options"
+            :key="o._id"
+            class="QuoteView__option">
+            <quote-option-view
+              :option="o"
+              :quote="quote" />
+          </div>
         </div>
-        <div class="lc_regular16">
-          {{ shopContacts.phone }}
+        <div class="QuoteView__element QuoteView__question">
+          <quote-view-question />
+          <quote-view-questions />
         </div>
+        <quote-view-accept class="QuoteView__element QuoteView__accept" />
       </div>
-      <div>
-        <div class="lc_regular16">
-          DATE: {{ quote.createdAt | shortDate }}
-        </div>
-        <div class="lc_regular16">
-          QUOTE ID: {{ quoteId }}
+      <div v-else>
+        <div class="QuoteView__info-alert">
+          <p>
+            This proposal is already in progress, has been finalised or has expired
+          </p>
+          <p v-if="isGuestUser">
+            You can <a href="/customer/signin">login</a> to your account to see the progress of this order, or request a new quote
+          </p>
         </div>
       </div>
     </div>
-
-    <table class="QuoteView__table mt-4 lc_table bordered">
-      <tr>
-        <td>
-          <div><b>QUOTE</b></div>
-          <div v-if="quote.address">
-            <div class="lc_regular16">
-              {{ quote.address.fullName }}
-            </div>
-            <div v-if="quote.address.company" class="lc_regular16">
-              {{ quote.address.company }}
-            </div>
-            <div v-if="quote.address.phone" class="lc_regular16">
-              {{ quote.address.phone }}
-            </div>
-            <div class="lc_regular16">
-              {{ quote.address.email }}
-            </div>
-            <div class="lc_regular16">
-              {{ quoteAddress }}
-            </div>
-            <div class="lc_regular16">
-              {{ quote.address.additionalInfo }}
-            </div>
-          </div>
-        </td>
-        <td class="w-50">
-          <div class="lc_regular16">
-            <b>{{ MESSAGES.DIRECT_DEPOSIT_DETAILS || 'DIRECT DEPOSIT DETAILS' }}</b>
-          </div>
-          <div class="lc_regular16">
-            Bank: {{ depositInfo.bank }}
-          </div>
-          <div class="lc_regular16">
-            Account name: {{ depositInfo.accountName }}
-          </div>
-          <div class="lc_regular16">
-            {{ bsbLabel }}: {{ depositInfo.BSB }}
-          </div>
-          <div class="lc_regular16">
-            Account: {{ depositInfo.account }}
-          </div>
-        </td>
-      </tr>
-    </table>
-    <div class="mt-3">
-      <quote-option-view
-        v-for="(optionItem, index) of options"
-        :key="`option-${index}`"
-        :option="optionItem"
-        :quote="quote"
-        class="QuoteView__option" />
-    </div>
-    <h6
-      v-if="quote.expiredAt"
-      class="mt-3 lc_title mb-5 lc_h3">
-      THIS QUOTE IS VALID UNTIL {{ quote.expiredAt | shortDate }}
-    </h6>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
-import QuoteViewMixin from './quote-view.mixin';
+import { mapGetters, mapActions } from 'vuex';
+import { saveViewedOptions } from '@lancom/shared/assets/js/utils/quote';
+import QuoteViewMixin from '@lancom/shared/components/quotes/quote_view_preview/quote-view.mixin';
+import EmailLink from '@lancom/shared/components/email_link/email-link';
+import QuoteViewInfo from './quote_view_info/quote-view-info';
+import QuoteViewMenu from './quote_view_menu/quote-view-menu';
+import QuoteViewHeader from './quote_view_header/quote-view-header';
+import QuoteViewBanner from './quote_view_banner/quote-view-banner';
+import QuoteViewMessage from './quote_view_message/quote-view-message';
+import QuoteViewQuestion from './quote_view_question/quote-view-question';
+import QuoteViewQuestions from './quote_view_questions/quote-view-questions';
+import QuoteViewAccept from './quote_view_accept/quote-view-accept';
 import QuoteOptionView from './quote_option_view/quote-option-view';
 
 export default {
-  name: 'LancomQuoteView',
+  name: 'QuoteView',
   components: {
-    QuoteOptionView
+    QuoteOptionView,
+    QuoteViewInfo,
+    QuoteViewMenu,
+    QuoteViewHeader,
+    QuoteViewBanner,
+    QuoteViewMessage,
+    QuoteViewQuestion,
+    QuoteViewQuestions,
+    QuoteViewAccept,
+    EmailLink
+  },
+  data() {
+    return {
+      checkPayment: !!this.$route.query.checkPayment
+    };
   },
   mixins: [QuoteViewMixin],
   computed: {
-    ...mapGetters(['MESSAGES']),
-    bsbLabel() {
-      return this.MESSAGES.DIRECT_DEPOSIT_BSB || 'BSB';
-    },
+    ...mapGetters(['contacts']),
+    ...mapGetters('auth', ['isGuestUser']),
+    ...mapGetters('quote', ['quote', 'options', 'isExpiredQuote', 'isOrdered'])
+  },
+  created() {
+    if (process.client) {
+      this.fetchViewedOptions({ quote: this.quote });
+
+      const options = this.options.map(({ _id }) => _id);
+      saveViewedOptions(this.quote, options);
+    }
+  },
+  methods: {
+    ...mapActions('quote', ['fetchViewedOptions'])
   }
 };
 </script>

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

@@ -1,10 +1,109 @@
+@import "@/assets/scss/variables";
+
 .QuoteOptionView {
-  &__totals {
-    margin-top: 60px;
+  &__wrapper {
+    &.light {
+      opacity: 0.3;
+    }
+  }
+  &__header {
+    padding: 22px;
+    background-color: $black;
+    color: $white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    @media (max-width: $bp-extra-small-max) {
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+    }
+    &.disabled {
+      opacity: 0.7;
+      pointer-events: none !important;
+    }
+  }
+  &__title {
+    font-weight: 800;
+    font-size: 18px;
+    line-height: 25px;
+    text-transform: uppercase;
+    span {
+      background: #F38320;
+      padding: 1px 7px;
+      font-weight: bold;
+      font-size: 16.25px;
+      line-height: 22px;
+      color: $white;
+      text-decoration: none;
+      display: inline-block;
+      margin-left: 9px;
+    }
+  }
+  &__proceed {
+    position: relative;
+    display: flex;
+    @media (max-width: $bp-extra-small-max) {
+      margin-top: 20px;
+    }
+    &-message {
+      font-weight: bold;
+      font-size: 16px;
+      line-height: 22px;
+      text-transform: uppercase;
+      color: $white;
+      cursor: pointer;
+      margin-left: 10px;
+    }
+  }
+  &__table {
+    border: 1px solid #dee2e6;
+    padding: 30px;
   }
   &__product {
-    padding-bottom: 30px;
-    margin-bottom: 30px;
+    padding-bottom: 20px;
+    margin-bottom: 20px;
     border-bottom: 1px solid #dee2e6;
   }
+  &__subtotal {
+    padding: 24px;
+    background-color: $gray;
+    display: flex;
+    justify-content: space-between;
+    font-weight: 800;
+    font-size: 16px;
+    line-height: 22px;
+    text-transform: uppercase;
+    @media (max-width: $bp-extra-small-max) {
+      flex-direction: column;
+    }
+    &-item {
+      @media (max-width: $bp-extra-small-max) {
+        display: flex;
+        margin: 5px 0;
+      }
+    }
+    &-label {
+      color: $gray_main;
+    }
+    &-value {
+      color: $black;
+      margin-left: 10px;
+    }
+    &.selected {
+      background-color: $green;
+    }
+  }
+  &__message {
+    margin-top: 30px;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 27px;
+    color: $gray_main;
+    @media (max-width: $bp-extra-small-max) {
+      font-size: 15px;
+      line-height: 19px;
+    }
+  }
 }