@lancom/shared 0.0.421 → 0.0.423

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

@@ -63,8 +63,8 @@
               :display-products-count="true"
               class="ProductColorsSelector__section" />
             <div
-              class="ProductColorsSelector__toggle-gst"
-              v-if="hasToggleGst">
+              v-if="hasToggleGst"
+              class="ProductColorsSelector__toggle-gst">
               <checkbox
                 v-model="inclGST"
                 :dark="true"
@@ -75,13 +75,14 @@
           </div>
           <div class="ProductColorsSelector__countries">
             <div>
-              Stock by countries: 
+              Stock by countries:
             </div>
             <div>
               <client-settings-stock-country />
             </div>
           </div>
-          <products-size-selector-color
+          <component
+            :is="productsSizeSelector"
             :key="productDetailsKey"
             :with-gst="inclGSTFinal"
             class="ProductColorsSelector__section"
@@ -101,6 +102,7 @@ import ProductColorsSelector from '@lancom/shared/components/product/layouts/pro
 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';
+import ProductsMultipacksSizeSelectorColor from '@lancom/shared/components/product/products_multipacks_size_selector_color/products-multipacks-size-selector-color';
 import ClientSettingsStockCountry from '@lancom/shared/components/common/client_settings_stock_country/client-settings-stock-country';
 
 export default {
@@ -113,14 +115,6 @@ export default {
     Multiselect,
     ClientSettingsStockCountry
   },
-  data() {
-    return {
-      inclGSTFinal: false,
-      inclGSTSpinner: false,
-      inclGSTSpinnerTimer: null,
-      opened: true
-    };
-  },
   props: {
     hasAnotherPrintBtn: {
       type: Boolean,
@@ -131,9 +125,17 @@ export default {
       default: true
     }
   },
+  data() {
+    return {
+      inclGSTFinal: false,
+      inclGSTSpinner: false,
+      inclGSTSpinnerTimer: null,
+      opened: true
+    };
+  },
   computed: {
     ...mapGetters(['stockCountry', 'taxName']),
-    ...mapGetters('product', ['productDetailsKey', 'editableColor', 'availableColors', 'visibleSteps', 'hasLayers', 'isPrintPricing', 'priceIncludeGST']),
+    ...mapGetters('product', ['product', 'productDetailsKey', 'editableColor', 'availableColors', 'visibleSteps', 'hasLayers', 'isPrintPricing', 'priceIncludeGST']),
     selectedColor: {
       get() {
         return this.editableColor;
@@ -149,6 +151,13 @@ export default {
       set(value) {
         this.setPriceIncludeGST(value);
       }
+    },
+    productsSizeSelector() {
+      return this.availableMultipacksColorsSelector ? ProductsMultipacksSizeSelectorColor : ProductsSizeSelectorColor;
+    },
+    availableMultipacksColorsSelector() {
+      const multipacks = (this.product.multipacks || []);
+      return multipacks.some(m => !m.SKU);
     }
   },
   watch: {

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

@@ -63,6 +63,9 @@ export default {
       type: Object,
       required: true
     },
+    multipack: {
+      type: Object
+    },
     sideControls: {
       type: Boolean,
       default: false
@@ -88,7 +91,7 @@ export default {
   },
   computed: {
     ...mapGetters(['currency']),
-    ...mapGetters('product', ['usedSimpleProducts', 'product']),
+    ...mapGetters('product', ['commonProductsMultipacks', 'usedSimpleProducts', 'product']),
     disabled() {
       const sizeWithoutColor = this.color.sizes && !this.color.sizes.find(({ alias }) => alias === this.size.alias);
       return sizeWithoutColor || this.outStock;
@@ -97,17 +100,34 @@ export default {
       return this.usedSimpleProducts
         .find(({ color, size }) => color._id === this.color._id && size._id === this.size._id);
     },
+    simpleProductAmount() {
+      return (this.simpleProduct || {}).amount || this.defaultValue || 0;
+    },
     model: {
       get() {
-        return (this.simpleProduct || {}).amount || this.defaultValue;
+        const amount = this.simpleProductAmount;
+        if (this.multipack) {
+          const biggerMultipacks = [...this.commonProductsMultipacks]
+            .sort((a, b) => b.qty - a.qty)
+            .filter(p => p.qty > this.multipack.qty);
+          const biggerMultipacksAmount = amount - biggerMultipacks.reduce((leftAmount, p) => leftAmount % p.qty, amount);
+          const multipackAmount = amount - biggerMultipacksAmount;
+          const result = Math.floor(multipackAmount / this.multipack.qty);
+          return result;
+        }
+        return amount;
       },
       set(value) {
         const outOfStockQuantity = this.simpleProduct?.quantityStock;
+        if (this.multipack) {
+          const leftAmount = this.simpleProductAmount - (this.model * this.multipack.qty);
+          value = leftAmount + Math.max(0, value) * this.multipack.qty;
+        }
         if (outOfStockQuantity && outOfStockQuantity < value && this.showMaxModal) {
           const message = `Maximum value: ${outOfStockQuantity}`;
           this.showConfirmationModal(message);
         }
-        const amount = inRange(value, 0, outOfStockQuantity || 999);
+        const amount = inRange(value, 0, outOfStockQuantity || 1000);
         this.setSimpleProductAmount({
           colorId: this.color._id,
           sizeId: this.size._id,

package/components/product/products_multipacks_size_selector_color/product_multipacks_size_selector_color/product-multipacks-size-selector-color.scss

@@ -0,0 +1,61 @@
+@import '@/assets/scss/variables';
+
+.ProductMultipacksSizeSelectorColor {
+  &__wrapper td {
+    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;
+  }
+  &__stock {
+    font-size: 11px;
+    letter-spacing: -1px;
+  }
+}
+
+::v-deep .ProductSizeSelectorColorCell {
+  &__field {
+    line-height: 20px;
+    input {
+      height: 30px;
+      padding: 5px !important;
+      background-color: $gray;
+    }
+  }
+  &__side-control {
+    background: $green;
+    width: 26px;
+  }
+}

package/components/product/products_multipacks_size_selector_color/product_multipacks_size_selector_color/product-multipacks-size-selector-color.vue

@@ -0,0 +1,102 @@
+<template>
+  <tr class="ProductMultipacksSizeSelectorColor__wrapper">
+    <td
+      v-if="rowspan"
+      :rowspan="rowspan"
+      class="ProductMultipacksSizeSelectorColor__color-name">
+      <span>
+        {{ product.color.name }}
+      </span>
+    </td>
+    <td
+      class="ProductMultipacksSizeSelectorColor__size"
+      :class="{ disabled }">
+      <div>
+        {{ product.size.shortName }}
+      </div>
+      <div class="ProductMultipacksSizeSelectorColor__stock">
+        <div
+          v-if="product.quantityStock"
+          class="ProductMultipacksSizeSelectorColor__in-stock">
+          {{ currentQuantityStockLabel }} in stock
+        </div>
+        <div
+          v-else
+          class="ProductMultipacksSizeSelectorColor__out-stock">
+          out of stock
+        </div>
+      </div>
+    </td>
+    <td
+      v-for="multipack in commonProductsMultipacks"
+      :key="multipack._id"
+      class="ProductMultipacksSizeSelectorColor__cell">
+      <product-size-selector-color-cell
+        :side-controls="true"
+        :show-max-modal="false"
+        :out-stock="disabled"
+        :color="product.color"
+        :size="product.size"
+        :multipack="multipack" />
+    </td>
+  </tr>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { price, tax } from '@lancom/shared/assets/js/utils/filters';
+import ProductSizeSelectorColorCell from '@lancom/shared/components/product/product_size_selector/product_size_selector_color/product_size_selector_color_cell/product-size-selector-color-cell';
+
+export default {
+  name: 'ProductMultipacksSizeSelectorColor',
+  filters: {
+    price
+  },
+  components: {
+    ProductSizeSelectorColorCell
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    rowspan: {
+      type: Number,
+      default: 0
+    },
+    withGst: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters('product', ['commonProductsMultipacks', 'isPrintPricing', 'usedSimpleProductsQuantity', 'printsPrice']),
+    ...mapGetters(['gstTax', 'currency']),
+    currentQuantityStockLabel() {
+      return this.currentQuantityStock > 100 ? '100+' : this.currentQuantityStock;
+    },
+    pricing() {
+      return (this.isPrintPricing ? this.product.pricing : this.product.unprintedPricing) || [];
+    },
+    productPrice() {
+      const amount = this.usedSimpleProductsQuantity;
+      const pricing = this.pricing;
+      const price = (pricing.find(({ min, max }) => (!min || min <= amount) && (!max || max >= amount)) || pricing[0] || {}).price || 0;
+      return this.withGst ? tax(price, this.gstTax) : price;
+    },
+    productPrintsPrice() {
+      return this.withGst ? tax(this.printsPrice, this.gstTax) : this.printsPrice;
+    },
+    disabled() {
+      return !this.product.quantityStock || !this.productPrice;
+    },
+    currentQuantityStock() {
+      return (this.product.quantityStock || 0) - (this.product.amount || 0);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-multipacks-size-selector-color.scss';
+</style>

package/components/product/products_multipacks_size_selector_color/products-multipacks-size-selector-color.scss

@@ -0,0 +1,15 @@
+@import '@/assets/scss/variables';
+
+.ProductsMultipacksSizeSelectorColor {
+  &__table {
+    border: 1px solid $gray;
+    font-weight: 800;
+    font-size: 18px;
+    line-height: 25px;
+    text-transform: uppercase;
+    color: $black;
+  }
+  &__cost-column {
+    width: 150px;
+  }
+}

package/components/product/products_multipacks_size_selector_color/products-multipacks-size-selector-color.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <table class="ProductsMultipacksSizeSelectorColor__table lc_table bordered">
+      <thead class="centered">
+        <tr>
+          <th
+            colspan="2"
+            class="ProductsMultipacksSizeSelectorColor__cost-column">
+          </th>
+          <th
+            v-for="multipack in commonProductsMultipacks"
+            :key="multipack._id">
+            {{ multipack.name }} ({{ multipack.qty }})
+          </th>
+        </tr>
+        <tr>
+          <th
+            colspan="2"
+            class="ProductsMultipacksSizeSelectorColor__cost-column">
+            COST
+          </th>
+          <th
+            v-for="multipack in commonProductsMultipacks"
+            :key="multipack._id">
+            {{ priceFromRange(multipack.qty, multipack.qty) | price(currency) }}
+          </th>
+        </tr>
+        <tr>
+          <th
+            colspan="2"
+            style="width: 140px;">
+            UNiTCOST
+          </th>
+          <th
+            v-for="multipack in commonProductsMultipacks"
+            :key="multipack._id">
+            {{ priceFromRange(multipack.qty, 1) | price(currency) }}
+          </th>
+        </tr>
+      </thead>
+      <tbody class="centered">
+        <product-multipacks-size-selector-color
+          v-for="(product, index) in products"
+          :key="`${editableColor._id}_${product._id}`"
+          :rowspan="index === 0 ? products.length : 0"
+          :with-gst="withGst"
+          :product="product" />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { sortBySize } from '@lancom/shared/assets/js/utils/sizes';
+import { priceFromRange } from '@lancom/shared/assets/js/utils/pricing';
+import { price, tax } from '@lancom/shared/assets/js/utils/filters';
+import ProductMultipacksSizeSelectorColor from './product_multipacks_size_selector_color/product-multipacks-size-selector-color';
+
+export default {
+  name: 'ProductsMultipacksSizeSelectorColor',
+  filters: {
+    price
+  },
+  components: {
+    ProductMultipacksSizeSelectorColor
+  },
+  props: {
+    withGst: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters(['gstTax']),
+    ...mapGetters('product', ['defaultSimpleProduct', 'commonProductsMultipacks', 'editableColor', 'editableColorSimpleProducts']),
+    products() {
+      return sortBySize(this.editableColorSimpleProducts);
+    },
+    pricing() {
+      return this.defaultSimpleProduct.pricing;
+    }
+  },
+  methods: {
+    priceFromRange(min, qty) {
+      const price = priceFromRange(min, this.pricing) * qty;
+      return this.withGst ? tax(price, this.gstTax) : price;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-multipacks-size-selector-color.scss';
+</style>

package/components/product/wizard/wizard_print_underbase/wizard-print-underbase.vue

@@ -20,6 +20,7 @@
       <btn
         btn-class="green"
         btn-label="NEXT"
+        :btn-disabled="!hasSelectedPrintUnderbases"
         @onclick="$emit('next')">
         <i
           slot="icon-after"
@@ -39,7 +40,10 @@ export default {
     WizardPrintAreaPrintUnderbase
   },
   computed: {
-    ...mapGetters('product', ['editablePrintAreas'])
+    ...mapGetters('product', ['editablePrintAreas', 'selectedPrintUnderbases']),
+    hasSelectedPrintUnderbases() {
+      return this.editablePrintAreas.every(e => typeof this.selectedPrintUnderbases[e._id] === 'boolean');
+    }
   }
 };
 </script>

package/components/product/wizard-editor/wizard-editor.vue

@@ -10,7 +10,7 @@
             v-show="visibleWizard" />
         </div>
         <div
-          v-if="editableColor"
+          v-if="editableColor && availableMultipacks"
           class="Editor__section">
           <product-multipacks-carousel
             :key="editableColor._id"
@@ -77,6 +77,10 @@ export default {
       'isPrintPricing',
       'priceIncludeGST'
     ]),
+    availableMultipacks() {
+      const multipacks = (this.product.multipacks || []);
+      return multipacks.some(m => !!m.SKU);
+    },
     visibleWizard() {
       return (this.product.printTypes || []).length > 0;
     },

package/components/products/children_categories/children-categories.scss

@@ -12,7 +12,7 @@
 }
 
 .CategoryCard {
-  width: 270px;
+  width: 170px;
   margin: 0 0 15px 15px;
   position: relative;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
@@ -34,7 +34,7 @@
 
   &__image-wrapper {
     width: 100%;
-    height: 300px;
+    height: 200px;
     overflow: hidden;
     position: relative;
   }
@@ -62,4 +62,4 @@
   @media (max-width: $bp-extra-small-max) {
     margin: 0 auto 25px auto;
   }
-} 
+}

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

@@ -7,10 +7,23 @@
     padding: 30px;
     margin-bottom: 50px;
   }
+  &__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;
+    }
+  }
 }
 .uppercase {
     text-transform: uppercase;
-}
+}

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

@@ -5,46 +5,78 @@
       class="QuoteView__logo">
       <img :src="quote.shop.logo.small" />
     </div>
-    <div class="d-flex justify-content-between align-items-center">
+    <div class="QuoteView__info">
       <div>
-        <h2> {{ quote.shop.name }} </h2>
-        <h4 v-if="shopContacts"> ABN: {{ shopContacts.abn }} </h4>
+        <h2 class="lc_h2"> {{ quote.shop.name }} </h2>
+        <h4 v-if="shopContacts" class="lc_h4"> ABN: {{ shopContacts.abn }} </h4>
       </div>
-      <h1 class="text-secondary">
+      <h1 class="text-secondary lc_h1">
         QUOTE
       </h1>
     </div>
-    <div class="d-flex justify-content-between align-items-center">
+    <div class="QuoteView__info">
       <div v-if="shopContacts">
-        <div>{{ shopContacts.company }}</div>
-        <div>{{ shopContacts.address }}</div>
-        <div>{{ shopContacts.phone }}</div>
+        <div class="lc_regular16">
+          {{ shopContacts.company }}
+        </div>
+        <div class="lc_regular16">
+          {{ shopContacts.address }}
+        </div>
+        <div class="lc_regular16">
+          {{ shopContacts.phone }}
+        </div>
       </div>
       <div>
-        <div>DATE: {{ quote.createdAt | shortDate }}</div>
-        <div>QUOTE ID: {{ quoteId }}</div>
+        <div class="lc_regular16">
+          DATE: {{ quote.createdAt | shortDate }}
+        </div>
+        <div class="lc_regular16">
+          QUOTE ID: {{ quoteId }}
+        </div>
       </div>
     </div>
 
-    <table class="mt-4 table table-bordered">
+    <table class="QuoteView__table mt-4 lc_table bordered">
       <tr>
         <td>
           <div><b>QUOTE</b></div>
           <div v-if="quote.address">
-            <div>{{ quote.address.fullName }}</div>
-            <div v-if="quote.address.company">{{ quote.address.company }}</div>
-            <div v-if="quote.address.phone">{{ quote.address.phone }}</div>
-            <div>{{ quote.address.email }}</div>
-            <div>{{ quoteAddress }}</div>
-            <div>{{ quote.address.additionalInfo }}</div>
+            <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><b>{{ MESSAGES.DIRECT_DEPOSIT_DETAILS || 'DIRECT DEPOSIT DETAILS'}}</b></div>
-          <div>Bank: {{ depositInfo.bank }}</div>
-          <div>Account name: {{ depositInfo.accountName }}</div>
-          <div>{{ bsbLabel }}: {{ depositInfo.BSB }}</div>
-          <div>Account: {{ depositInfo.account }}</div>
+          <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>
@@ -58,7 +90,7 @@
     </div>
     <h6
       v-if="quote.expiredAt"
-      class="mt-3">
+      class="mt-3 lc_title mb-5 lc_h3">
       THIS QUOTE IS VALID UNTIL {{ quote.expiredAt | shortDate }}
     </h6>
   </div>

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

@@ -8,12 +8,24 @@
         class="QuoteOptionView__product" />
     </div>
     <div class="QuoteOptionView__totals">
-      <div>Products Total: <b>{{ option.productsTotal | price(currency) }}</b></div>
-      <div>Prints Total: <b>{{ option.printsTotal | price(currency) }}</b></div>
-      <div>Shipping Total: <b>{{ option.shippingTotal | price(currency) }}</b></div>
-      <div>Total ex {{ taxName }}: <b>{{ option.total | price(currency) }}</b></div>
-      <div>{{ taxName }}: <b>{{ optionGst(option) | price(currency) }}</b></div>
-      <div>Total inc {{ taxName }}: <b>{{ option.total | tax(gstTax) | price(currency) }}</b></div>
+      <div class="lc_regular16">
+        Products Total: <b>{{ option.productsTotal | price(currency) }}</b>
+      </div>
+      <div class="lc_regular16">
+        Prints Total: <b>{{ option.printsTotal | price(currency) }}</b>
+      </div>
+      <div class="lc_regular16">
+        Shipping Total: <b>{{ option.shippingTotal | price(currency) }}</b>
+      </div>
+      <div class="lc_regular16">
+        Total ex {{ taxName }}: <b>{{ option.total | price(currency) }}</b>
+      </div>
+      <div class="lc_regular16">
+        {{ taxName }}: <b>{{ optionGst(option) | price(currency) }}</b>
+      </div>
+      <div class="lc_regular16">
+        Total inc {{ taxName }}: <b>{{ option.total | tax(gstTax) | price(currency) }}</b>
+      </div>
     </div>
   </div>
 </template>

package/layouts/products.vue

@@ -20,16 +20,12 @@
             <h1 class="Products__name">
               {{ routeName }}
             </h1>
-            <div
-              v-if="!visiblChildrenCategories"
-              class="Products__filters">
+            <div class="Products__filters">
               <products-filters @open="openAside" />
             </div>
           </div>
           <div class="Products__content">
-            <div
-              v-if="!visiblChildrenCategories"
-              class="Products__aside">
+            <div class="Products__aside">
               <breakpoint
                 name="md"
                 mode="up">
@@ -37,10 +33,8 @@
               </breakpoint>
             </div>
             <div class="Products__list">
-              <children-categories v-if="visiblChildrenCategories" />
-              <products-catalog
-                v-else
-                class="Products__catalog" />
+              <children-categories v-if="hasChildrenCategories" />
+              <products-catalog class="Products__catalog" />
             </div>
           </div>
           <div
@@ -103,7 +97,7 @@
     async fetch() {
       await this.loadProducts();
 
-      if (this.page === 1 && this.products.length === 0) {
+      if (this.page === 1) {
         await this.fetchChildrenCategories(this.currentCategory);
       }
 
@@ -115,8 +109,8 @@
       ...mapGetters('page', ['routeInfo']),
       ...mapGetters(['notificationBar', 'shop', 'country', 'currency']),
       ...mapGetters('products', ['category', 'childrenCategories', 'categories', 'brands', 'types', 'tags', 'loadError', 'count', 'products', 'minPrice', 'maxPrice', 'page']),
-      visiblChildrenCategories() {
-        return false; // this.page === 1 && this.products.length === 0 && this.childrenCategories.length > 0;
+      hasChildrenCategories() {
+        return this.childrenCategories.length > 0;
       },
       pageItemCanonical() {
         const page = +this.$route.query.page;

package/package.json

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

package/pages/quotes/view/_id/option/_option.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="QuoteViewPage__wrapper">
+    <div class="content-inner">
+      <lancom-quote-view
+        v-if="quote"
+        :quote="quote"
+        :option="option" />
+    </div>
+  </div>
+</template>
+
+<script>
+import QuoteViewPage from '@lancom/shared/pages/quotes/view/_id';
+import LancomQuoteView from '@lancom/shared/components/quotes/quote_view/quote-view';
+
+export default {
+  name: 'QuoteOptionView',
+  components: {
+    LancomQuoteView
+  },
+  mixins: [QuoteViewPage],
+  layout: 'empty'
+};
+</script>

package/routes/index.js

@@ -102,6 +102,11 @@ module.exports = function(routes, resolve, config) {
     path: '/order/:token/refund/:refund',
     component: resolve('@lancom/shared/pages/order/_token/refund/_refund.vue'),
     chunkName: 'pages/order/view/refund'
+  }, {
+    name: 'quotes-view-option',
+    path: '/quotes/view/:id/option/:option',
+    component: resolve('@lancom/shared/pages/quotes/view/_id/option/_option.vue'),
+    chunkName: 'pages/quotes/view/option'
   }, {
     name: 'customer-signin',
     path: '/customer/signin',

package/store/product.js

@@ -56,6 +56,7 @@ export const getters = {
   productDetailsKey: ({ productDetailsKey }) => productDetailsKey,
   loadingProductDetails: ({ loadingProductDetails }) => loadingProductDetails,
   multipack: ({ multipack }) => multipack,
+  commonProductsMultipacks: ({ product }) => product?.multipacks?.filter(p => !p.SKU) || [],
   calculatingPrice: ({ calculatingPrice }) => calculatingPrice,
   product: ({ product }) => product,
   preSetPrints: ({ preSetPrints }) => preSetPrints,