@lancom/shared 0.0.280 → 0.0.282

package/components/product/editor_pricing/editor_pricing_details/editor_pricing_details_prints/editor-pricing-details-prints.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="EditorPricingDetailsPrints__wrapper">
+    <table class="lc_table EditorPricingDetailsPrints__table">
+      <tbody class="centered">
+        <tr>
+          <td
+            class="EditorPricingDetailsPrints__name"
+            :rowspan="groupedProductsByPrintArea.length + (hasPrintSurcharge ? 3 : 2)">
+            <span>printing</span>
+          </td>
+          <td class="EditorPricingDetailsPrints__th">
+            type of print
+          </td>
+          <td class="EditorPricingDetailsPrints__th">
+            location
+          </td>
+          <td class="EditorPricingDetailsPrints__th">
+            Setup cost
+          </td>
+          <td class="EditorPricingDetailsPrints__th">
+            Price
+          </td>
+        </tr>
+        <tr
+          v-for="([, group], index) in groupedProductsByPrintArea"
+          :key="index">
+          <td>
+            {{ group.printType.name }}
+          </td>
+          <td>
+            {{ group.printArea.name }}
+          </td>
+          <td>
+            <strong>
+              {{ group.setupPriceWithoutTax | price(currency) }}
+            </strong>
+          </td>
+          <td>
+            <span v-if="group.costType !== 'setup only'">
+              <strong>
+                {{ group.totalPriceWithoutTax | price(currency) }}
+              </strong>
+              = {{ group.amount }} x {{ group.priceWithoutTax | price(currency) }}
+            </span>
+            <strong v-else>
+              {{ group.totalPriceWithoutTax | price(currency) }}
+            </strong>
+          </td>
+        </tr>
+        <tr v-if="hasPrintSurcharge">
+          <td colspan="4">
+            {{ printSurchargeNote }}
+          </td>
+        </tr>
+        <tr class="highlighted">
+          <td colspan="3">
+            Prints Subtotal:
+          </td>
+          <td>
+            <strong>
+              {{ productPricing.products.prints.totalPriceWithoutTax | price(currency) }}
+            </strong>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { price, sizesRange } from '@lancom/shared/assets/js/utils/filters';
+import { groupProductsPrintsByPrintArea } from '@lancom/shared/assets/js/utils/products-grouping';
+
+export default {
+  name: 'EditorPricingDetailsPrints',
+  filters: {
+    price,
+    sizesRange
+  },
+  computed: {
+    ...mapGetters(['currency']),
+    ...mapGetters('product', [
+      'product',
+      'usedSimpleProducts',
+      'productPricing',
+      'mainProductPricing'
+    ]),
+    hasPrintSurcharge() {
+      return this.product.printSurcharge > 0;
+    },
+    printSurchargeNote() {
+      const message = this.product.printSurchargeNote || 'surcharge of $x per print';
+      return message.replace(/\$x/, price(this.product.printSurcharge));
+    },
+    hasUsedSimpleProducts() {
+      return this.usedSimpleProducts.length > 0;
+    },
+    products() {
+      return this.hasUsedSimpleProducts
+        ? this.usedSimpleProducts
+        : [];
+    },
+    groupedProductsByPrintArea() {
+      const groups = this.mainProductPricing
+        ? groupProductsPrintsByPrintArea(
+          this.mainProductPricing
+        )
+        : [];
+      return groups;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-pricing-details-prints';
+</style>

package/components/product/editor_pricing/editor_pricing_details/editor_pricing_details_products/editor-pricing-details-products.scss

@@ -0,0 +1,41 @@
+@import '@/assets/scss/variables';
+
+.EditorPricingDetailsProducts {
+    &__wrapper td {
+      font-weight: 600;
+      border: 1px solid $gray;
+      font-size: 16px;
+      line-height: 25px;
+      text-transform: uppercase;
+      color: $black;
+      @media (max-width: $bp-extra-small-max) {
+        padding: 2px;
+        font-size: 12px;
+      }
+      strong {
+        font-weight: bold;
+      }
+      &.disabled {
+        color: $gray_main;
+        pointer-events: none !important;
+      }
+    }
+    &__th {
+      font-weight: bold !important;
+      background: $gray;
+      @media (max-width: $bp-extra-small-max) {
+        padding: 2px;
+        font-size: 12px;
+      }
+    }
+    &__name {
+      width: 70px;
+      @media (max-width: $bp-extra-small-max) {
+        width: 30px;
+      }
+      span {
+        writing-mode: vertical-lr;
+        transform: rotate(180deg);
+      }
+    }
+  }

package/components/product/editor_pricing/editor_pricing_details/editor_pricing_details_products/editor-pricing-details-products.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="EditorPricingDetailsProducts__wrapper">
+    <table class="lc_table EditorPricingDetailsProducts__table">
+      <tbody class="centered">
+        <tr>
+          <td
+            class="EditorPricingDetailsProducts__name"
+            :rowspan="groupedProductsByPrice.length + 2">
+            <span>product</span>
+          </td>
+          <td class="EditorPricingDetailsProducts__th">
+            Products
+          </td>
+          <td class="EditorPricingDetailsProducts__th">
+            Sizes
+          </td>
+          <td class="EditorPricingDetailsProducts__th">
+            Cost
+          </td>
+          <td class="EditorPricingDetailsProducts__th">
+            Total Cost
+          </td>
+        </tr>
+        <tr
+          v-for="([groupPrice, group], index) in groupedProductsByPrice"
+          :key="index">
+          <td>
+            {{ group.amount }}
+          </td>
+          <td>
+            {{ group.sizes | sizesRange }}
+          </td>
+          <td>
+            <span class="EditorPricingDetailsProducts__hoverable">
+              {{ groupPrice | price(currency) }}
+            </span>
+          </td>
+          <td>
+            <strong>
+              {{ group.totalPriceWithoutTax | price(currency) }}
+            </strong>
+          </td>
+        </tr>
+        <tr class="highlighted">
+          <td colspan="3">
+            Products Subtotal:
+          </td>
+          <td>
+            <strong>
+              {{ productPricing.products.products.totalPriceWithoutTax | price(currency) }}
+            </strong>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { price, sizesRange } from '@lancom/shared/assets/js/utils/filters';
+import { groupProductsSizesByPrice } from '@lancom/shared/assets/js/utils/products-grouping';
+
+export default {
+  name: 'EditorPricingDetailsProducts',
+  filters: {
+    price,
+    sizesRange
+  },
+  computed: {
+    ...mapGetters([
+      'currency'
+    ]),
+    ...mapGetters('product', [
+      'product',
+      'usedSimpleProducts',
+      'mainProductPricing',
+      'productPricing'
+    ]),
+    hasUsedSimpleProducts() {
+      return this.usedSimpleProducts.length > 0;
+    },
+    products() {
+      return this.hasUsedSimpleProducts
+        ? this.usedSimpleProducts
+        : [];
+    },
+    groupedProductsByPrice() {
+      return this.mainProductPricing
+        ? groupProductsSizesByPrice(
+          this.products,
+          this.mainProductPricing
+        )
+        : [];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-pricing-details-products';
+</style>

package/components/product/product.vue

@@ -42,7 +42,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import ProductMainInfo from './layouts/product_main_info/product-main-info';
-import ProductColorsSelector from './layouts/product_colors_selector/product-colors-selector';
+import ProductColorsSelector from './product_colors_selector/product-colors-selector';
 import ProductTierPrices from './layouts/product_tier_prices/product-tier-prices';
 import ProductFabricAndSizeInfo from './layouts/product_fabric_and_size_info/product-fabric-and-size-info';
 import ProductPackaging from './layouts/product_packaging/product-packaging';

package/components/product/product_colors_selector/product-colors-selector.scss

@@ -0,0 +1,117 @@
+@import '@/assets/scss/variables';
+
+.ProductColorsSelector {
+  &__wrapper {
+    margin-top: 35px;
+  }
+  &__controls {
+    display: flex;
+    @media (max-width: $bp-extra-small-max) {
+      flex-direction: column-reverse;
+    }
+  }
+  &__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;
+    flex-grow: 1;
+    opacity: 1;
+    transition: opacity 500ms;
+    &--hidden {
+      opacity: 0;
+    }
+  }
+  &__options {
+    display: flex;
+    width: 100%;
+    align-items: center;
+  }
+  &__option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &-preview {
+      width: 30px;
+      height: 30px;
+      margin-right: 10px;
+    }
+  }
+  &__toggle-gst {
+    margin-top: 20px;
+  }
+}
+
+::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__select {
+    display: none;
+  }
+  .multiselect__tags,
+  .multiselect__single,
+  .multiselect__input {
+    border: none;
+    background: transparent;
+  }
+  .multiselect__tags {
+    padding-top: 13px;
+  }
+  .multiselect__single,
+  .multiselect__input {
+    font-weight: bold;
+  }
+}

package/components/product/product_colors_selector/product-colors-selector.vue

@@ -0,0 +1,188 @@
+<template>
+  <product-colors-selector class="ProductColorsSelector__wrapper">
+    <div>
+      <div class="ProductColorsSelector__controls">
+        <div
+          class="ProductColorsSelector__head"
+          :class="{
+            'ProductColorsSelector__head--opened': opened
+          }">
+          <multiselect
+            v-model="selectedColor"
+            value="_id"
+            label="name"
+            track-by="_id"
+            placeholder="Select colour"
+            :options="availableColors"
+            :allow-empty="false"
+            :searchable="false"
+            :option-height="60">
+            <div
+              slot="option"
+              slot-scope="{ option }"
+              class="ProductColorsSelector__option">
+              <span
+                class="ProductColorsSelector__option-name">
+                {{ option.name }}
+              </span>
+              <product-color-image
+                class="ProductColorsSelector__option-preview"
+                :color="option" />
+            </div>
+            <div
+              slot="singleLabel"
+              slot-scope="{ option }"
+              class="ProductColorsSelector__option">
+              {{ option.name }}
+            </div>
+          </multiselect>
+          <i class="icon-angle-down"></i>
+        </div>
+        <div
+          v-if="hasAnotherPrintBtn && hasLayers && isPrintPricing"
+          class="ProductColorsSelector__add-btn">
+          <btn
+            btn-class="green"
+            btn-label="Add Another Print"
+            @onclick="addAnotherPrint()">
+            <i
+              slot="icon-before"
+              class="icon-plus"></i>
+          </btn>
+        </div>
+      </div>
+      <transition
+        name="fade"
+        appear>
+        <div
+          v-if="opened"
+          class="view-transition">
+          <div class="ProductColorsSelector__options">
+            <product-colors-selector-options
+              ref="colorsSelectorOptions"
+              :display-products-count="true"
+              class="ProductColorsSelector__section" />
+            <div class="ProductColorsSelector__toggle-gst">
+              <checkbox
+                v-model="inclGST"
+                :dark="true"
+                @change="onChangeInclGST">
+                <div class="ml-5">Inc. {{ taxName }}</div>
+              </checkbox>
+            </div>
+          </div>
+          <products-size-selector-color
+            :with-gst="inclGSTFinal"
+            class="ProductColorsSelector__section"
+            :class="{
+              'ProductColorsSelector__section--hidden': inclGSTSpinner
+            }" />
+        </div>
+      </transition>
+    </div>
+  </product-colors-selector>
+</template>
+
+<script>
+import Multiselect from 'vue-multiselect';
+import { mapGetters, mapMutations } from 'vuex';
+import ProductColorsSelector from '@lancom/shared/components/product/layouts/product_colors_selector/product-colors-selector';
+import ProductColorsSelectorOptions from '@lancom/shared/components/product/layouts/product_colors_selector/product_colors_selector_options/product-colors-selector-options';
+import ProductColorImage from '@lancom/shared/components/product/product_color_image/product-color-image';
+import ProductsSizeSelectorColor from '@lancom/shared/components/product/products_size_selector_color/products-size-selector-color';
+
+export default {
+  name: 'WorkdepotProductColorsSelector',
+  components: {
+    ProductColorsSelector,
+    ProductColorsSelectorOptions,
+    ProductsSizeSelectorColor,
+    ProductColorImage,
+    Multiselect
+  },
+  data() {
+    return {
+      inclGSTFinal: false,
+      inclGSTSpinner: false,
+      inclGSTSpinnerTimer: null,
+      opened: true
+    };
+  },
+  props: {
+    hasAnotherPrintBtn: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    ...mapGetters(['taxName']),
+    ...mapGetters('product', ['editableColor', 'availableColors', 'visibleSteps', 'hasLayers', 'isPrintPricing', 'priceIncludeGST']),
+    selectedColor: {
+      get() {
+        return this.editableColor;
+      },
+      set(color) {
+        this.$refs.colorsSelectorOptions.toggleSelection(color);
+      }
+    },
+    inclGST: {
+      get() {
+        return this.priceIncludeGST;
+      },
+      set(value) {
+        this.setPriceIncludeGST(value);
+      }
+    }
+  },
+  watch: {
+    inclGST() {
+      this.onChangeInclGST();
+    }
+  },
+  created() {
+    if (this.priceIncludeGST) {
+      this.inclGSTFinal = true;
+    }
+  },
+  destroyed() {
+    clearTimeout(this.inclGSTSpinnerTimer);
+  },
+  methods: {
+    ...mapMutations('product', [
+      'setVisibleSteps',
+      'setEditableLayer',
+      'setEditablePrintArea',
+      'setSelectedPrintArea',
+      'setSelectedPrintType',
+      'setEditableColor',
+      'setPriceIncludeGST'
+    ]),
+    ...mapMutations('layers', [
+      'setEditableLayer'
+    ]),
+    toggleContent() {
+      this.opened = !this.opened;
+    },
+    addAnotherPrint() {
+      this.setVisibleSteps(false);
+      this.$nextTick(() => {
+        this.setEditableLayer(null);
+        this.setEditablePrintArea(null);
+        this.setVisibleSteps(true);
+      });
+    },
+    onChangeInclGST() {
+      clearTimeout(this.inclGSTSpinnerTimer);
+      this.inclGSTSpinner = true;
+      this.inclGSTSpinnerTimer = setTimeout(() => {
+        this.inclGSTSpinner = false;
+        this.inclGSTFinal = this.inclGST;
+      }, 500);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-colors-selector.scss';
+</style>

package/components/product/product_multipacks_carousel/product-multipacks-carousel.vue

@@ -74,6 +74,7 @@ export default {
     console.log('LancomProductMultipacks...')
   },
   computed: {
+    ...mapGetters(['currency']),
     ...mapGetters('product', ['multipack']),
     selectedMultipack: {
       get() {
@@ -142,7 +143,8 @@ export default {
           this.setSimpleProductAmount({
             colorId: simpleProduct.color._id,
             sizeId: simpleProduct.size._id,
-            amount
+            amount,
+            currency: this.currency
           });
         }
       });

package/components/product/product_size_selector/product_size_selector_color/product_size_selector_color_cell/product-size-selector-color-cell.vue

@@ -40,12 +40,10 @@
 </template>
 
 <script>
-import { createNamespacedHelpers } from 'vuex';
+import { mapGetters, mapMutations } from 'vuex';
 import confirm from '@lancom/shared/mixins/confirm';
 import { inRange } from '@lancom/shared/assets/js/utils/filters';
 
-const { mapGetters, mapMutations } = createNamespacedHelpers('product');
-
 export default {
   name: 'ProductSizeSelectorColorCell',
   mixins: [
@@ -88,7 +86,8 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['usedSimpleProducts', 'product']),
+    ...mapGetters(['currency']),
+    ...mapGetters('product', ['usedSimpleProducts', 'product']),
     disabled() {
       const sizeWithoutColor = this.color.sizes && !this.color.sizes.find(({ alias }) => alias === this.size.alias);
       return sizeWithoutColor || this.outStock;
@@ -117,7 +116,7 @@ export default {
     }
   },
   methods: {
-    ...mapMutations(['setSimpleProductAmount']),
+    ...mapMutations('product', ['setSimpleProductAmount']),
     onFocus() {
       this.defaultValue = '';
     },

package/components/product/products_size_selector_color/product_size_selector_color/product-size-selector-color.scss

@@ -0,0 +1,58 @@
+@import '@/assets/scss/variables';
+
+.ProductSizeSelectorColor {
+  &__wrapper td {
+    border: 1px solid $gray !important;
+    font-weight: 800;
+    font-size: 18px;
+    line-height: 25px;
+    text-transform: uppercase;
+    color: $black;
+    &.disabled {
+      color: $gray_main;
+      pointer-events: none !important;
+    }
+  }
+  &__color-name {
+    width: 70px;
+    span {
+      writing-mode: vertical-lr;
+      transform: rotate(180deg);
+      width: 100%;
+      display: block;
+      margin-left: -20px;
+    }
+    @media (max-width: $bp-extra-small-max) {
+      width: 40px;
+      span {
+        margin-left: -6px;
+      }
+    }
+  }
+  &__size {
+    width: 70px;
+  }
+  &__in-stock,
+  &__out-stock {
+    font-weight: 600;
+    text-transform: none;
+  }
+  &__out-stock {
+    color: $gray_main;
+  }
+}
+
+::v-deep .ProductSizeSelectorColorCell {
+  &__field {
+    line-height: 20px;
+    input {
+      height: 30px;
+      padding: 5px !important;
+      background-color: $gray;
+    }
+  }
+  &__side-control {
+    background: $green;
+    width: 26px;
+  }
+}