@lancom/shared 0.0.105 → 0.0.108

package/store/product.js

@@ -5,7 +5,7 @@ import { getLayerModel } from '@lancom/shared/assets/js/models/product-layers';
 import { getPrintAreaByName, getProductPrintsAreasPrices } from '@lancom/shared/assets/js/models/print-area';
 import { sortSizes } from '@lancom/shared/assets/js/utils/sizes';
 import { isValidImageTypes, getColorOfDefaultCatalogFrontImage } from '@lancom/shared/assets/js/utils/colors';
-import { getProductsForCalculatePricing } from '../assets/js/utils/product';
+import { getProductsForCalculatePricing } from '@lancom/shared/assets/js/utils/product';
 import { sortByName } from '../assets/js/utils/filters';
 
 export const state = () => ({
@@ -36,7 +36,8 @@ export const state = () => ({
   selectedPrintAreas: {},
   productPricing: null,
   selectedTab: null,
-  layersUpdatesCount: 0
+  layersUpdatesCount: 0,
+  editableSide: { id: 'front' }
 });
 
 export const getters = {
@@ -72,7 +73,7 @@ export const getters = {
   editableLayers: ({ template, editableColor, editablePrintArea }) => template.layers
     .filter(({ printArea }) => (
       // colorId === editableColor._id &&
-      printArea === editablePrintArea.id
+      printArea === editablePrintArea?._id
     )),
   selectedLayer: ({ selectedLayer }) => selectedLayer,
   editModeSelectedLayer: ({ editModeSelectedLayer }) => editModeSelectedLayer,
@@ -90,10 +91,9 @@ export const getters = {
   },
   selectedTab: ({ selectedTab }) => selectedTab,
   layersUpdatesCount: ({ layersUpdatesCount }) => layersUpdatesCount,
-  printArea: ({ editablePrintArea, selectedPrintAreas, editorSize: { width, height }, product }) => {
-    const selectedPrintArea = (!!editablePrintArea && selectedPrintAreas[editablePrintArea._id]);
+  printArea: ({ editablePrintArea, editorSize: { width, height }, product }) => {
     return getPrintAreaByName({
-      name: selectedPrintArea,
+      printArea: editablePrintArea?._id,
       editorWidth: width,
       editorHeight: height
     }, product);
@@ -122,16 +122,24 @@ export const getters = {
         imagesGroups.set(i.color, [...(imagesGroups.get(i.color) || []), i]);
       });
     return [...imagesGroups.values()].reduce((images, group) => [...images, ...group], []);
-  }
+  },
+  editableSide: ({ editableSide }) => editableSide,
+  hasUnprintedPrice: ({ product }) => product.minUnprintedPrice || product.maxUnprintedPrice
 };
 
 export const actions = {
   async fetchProduct({ commit }, { shop, slug, print }) {
     try {
       commit('setLoadError', null);
-      const response = await api.fetchProduct(shop, slug);
-      commit('setProduct', response);
-      commit('setPreSetPrint', (response.prints || []).find(({ _id }) => _id === print));
+      const product = await api.fetchProduct(shop, slug);
+      commit('setProduct', product);
+      commit('setPreSetPrint', (product.prints || []).find(({ _id }) => _id === print));
+
+      const [first] = (product.printAreas || []);
+      if (first) {
+        commit('setEditablePrintArea', first);
+        commit('setSelectedPrintArea', { printArea: first._id, size: first.printSize.alias });
+      }
     } catch (e) {
       const { status, data } = e?.response || {};
       const statusCode = status || 500;
@@ -176,20 +184,20 @@ export const actions = {
     }
   ) {
     const { center: { top, left } } = getters.printArea;
-    const { selectedPrintArea } = getters;
     const layer = await getLayerModel({
       type,
-      colorId: editableColor._id,
+      colorId: editableColor?._id,
       top,
       left,
       isEditMode,
       url,
       originalSize: size,
+      sideId: getters.editableSide?.id,
       properties: {
         ...(properties || {}),
-        printArea: editablePrintArea._id,
-        printSize: selectedPrintArea._id,
-        printType: selectedPrintType._id
+        printArea: editablePrintArea?._id,
+        printSize: editablePrintArea?.printSize?._id,
+        printType: selectedPrintType?._id
       }
     });
     if (preselect) {
@@ -383,6 +391,9 @@ export const mutations = {
   },
   setPreSetPrint(state, preSetPrint) {
     state.preSetPrint = preSetPrint;
+  },
+  setEditableSide(state, side) {
+    state.editableSide = side;
   }
 };
 

package/components/pricing/pricing_print/discounts_table/discounts-table.scss

@@ -1,8 +0,0 @@
-@import "@/assets/scss/variables";
-
-.DiscountsTable {
-  &__info {
-    color: $green;
-    cursor: pointer;
-  }
-}

package/components/pricing/pricing_print/discounts_table/discounts-table.vue

@@ -1,91 +0,0 @@
-<template>
-  <table
-    class="lc_table col-1-highlighted col-1-stripedless"
-    :class="{ striped }">
-    <thead class="centered">
-      <tr>
-        <th>&nbsp;</th>
-        <th v-if="visibleSleeve">
-          6x6
-          <i
-            v-tooltip="{ content: 'Sleeve prints only by request' }"
-            class="icon-info-circled DiscountsTable__info">
-          </i>
-        </th>
-        <th>10x10</th>
-        <th>Half-A4</th>
-        <th>A4</th>
-        <th>A3</th>
-      </tr>
-    </thead>
-    <tbody class="centered">
-      <tr
-        v-for="range in defaultPricing"
-        :key="range.min">
-        <td class="pull-left">
-          {{ range.max >= 9999 ? `${range.min}+` : `${range.min}-${range.max}` }}
-        </td>
-        <td v-if="visibleSleeve">
-          &mdash;
-        </td>
-        <td> {{ priceInRange(prices['rect10_l'], range.min) | tax(pricingSettings.gstTax) | price }}</td>
-        <td> {{ priceInRange(prices['half_a4_h'], range.min) | tax(pricingSettings.gstTax) | price }}</td>
-        <td> {{ priceInRange(prices['a4_v'], range.min) | tax(pricingSettings.gstTax) | price }}</td>
-        <td> {{ priceInRange(prices['a3'], range.min) | tax(pricingSettings.gstTax) | price }}</td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script>
-import { mapGetters } from 'vuex';
-import { price, priceInRange, tax } from '@lancom/shared/assets/js/utils/filters';
-import ContactUs from '@lancom/shared/components/asides/contact_us/contact-us';
-import { getProductPrintsAreasPrices } from '@lancom/shared/assets/js/models/print-area';
-
-export default {
-  name: 'DiscountsTable',
-  filters: {
-    price,
-    tax
-  },
-  props: {
-    product: {
-      type: Object
-    },
-    visibleSleeve: {
-      type: Boolean,
-      default: true
-    },
-    striped: {
-      type: Boolean,
-      default: true
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'pricingSettings'
-    ]),
-    ...mapGetters('product', [
-      'printsPricing'
-    ]),
-    defaultPricing() {
-      const defailtKey = Object.keys(this.prices)[0];
-      return this.prices[defailtKey] || [];
-    },
-    prices() {
-      return this.product ? getProductPrintsAreasPrices(this.product) : this.printsPricing;
-    }
-  },
-  methods: {
-    contactUs() {
-      this.$aside.show(ContactUs);
-    },
-    priceInRange
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'discounts-table';
-</style>

package/components/pricing/pricing_screen_print/discounts_table/discounts-table.scss

@@ -1,14 +0,0 @@
-@import "@/assets/scss/variables";
-
-table.DiscountsTable td,
-table.DiscountsTable th {
-    @media (max-width: $bp-extra-small-max) {
-      font-size: 7px !important;
-    }
-}
-
-table.DiscountsTable:not(.tight-rows) tr {
-  @media (max-width: $bp-extra-small-max) {    
-    height: 30px;
-  }
-}

package/components/pricing/pricing_screen_print/discounts_table/discounts-table.vue

@@ -1,78 +0,0 @@
-<template>
-  <table
-    class="DiscountsTable lc_table col-1-highlighted col-1-stripedless bordered striped">
-    <thead class="centered">
-      <tr class="stripped">
-        <th
-          :colspan="1 + columns.length"
-          class="lc_semibold20">
-          $55 setup per colour + print cost per item, size does not matter.
-        </th>
-      </tr>
-      <tr class="stripped">
-        <th>&nbsp;</th>
-        <th
-          v-for="column in columns"
-          :key="column">
-          {{ parseInt(column) }}
-          <span class="hidden-sm-and-down">
-            {{ parseInt(column) > 1 ? 'colours' : 'colour' }}
-          </span>
-        </th>
-      </tr>
-    </thead>
-    <tbody class="centered">
-      <tr
-        v-for="range in screenPrintsPrices['1_color']"
-        :key="range.min">
-        <td class="fill">
-          {{ !range.max ? `${range.min}+` : `${range.min}-${range.max}` }}
-        </td>
-        <td
-          v-for="column in columns"
-          :key="`${range.min}__${column}`">
-          {{ priceInRange(screenPrintsPrices[column], range.min) | tax(pricingSettings.gstTax) | price }}
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script>
-import { mapGetters } from 'vuex';
-import { price, priceInRange, tax } from '@lancom/shared/assets/js/utils/filters';
-
-export default {
-  name: 'DiscountsTable',
-  filters: {
-    price,
-    tax
-  },
-  props: {
-    visibleSleeve: {
-      type: Boolean,
-      default: true
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'screenPrintsPrices',
-      'pricingSettings'
-    ]),
-    columns() {
-      return Object.keys(this.screenPrintsPrices);
-    }
-  },
-  methods: {
-    priceInRange,
-    getColumnName(column) {
-      const count = parseInt(column);
-      return `${count} colour${count > 1 ? 's' : ''}`;
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'discounts-table';
-</style>