@lancom/shared 0.0.105 → 0.0.108

package/components/pricing/pricing_products_calculator/pricing_product_calculator/pricing-product-calculator.vue

@@ -0,0 +1,296 @@
+<template>
+  <section class="PricingProductCalculator__wrapper">
+    <div class="lc_h3">
+      Print Details - {{ screenPrintMinQuantity }}
+    </div>
+    <div class="row">
+      <div
+        v-for="side in sides"
+        :key="side.type"
+        class="PricingProductCalculator__prints col-sm-6 col-12">
+        <div class="row">
+          <div class="col-4">
+            <PrintSizeIcon
+              class="PricingProductCalculator__icon"
+              :product="product"
+              :side="side" />
+          </div>
+          <div class="col-8">
+            <div class="PricingProductCalculator__print-sizes">
+              <div
+                v-for="size in side.printSizes"
+                :key="size._id"
+                class="PricingProductCalculator__print-size"
+                :class="{
+                  'PricingProductCalculator__print-size--active': side.printSize === size.alias
+                }"
+                @click="side.printSize = size.alias">
+                {{ size.name }}
+              </div>
+              <div
+                class="PricingProductCalculator__print-size PricingProductCalculator__print-size--full"
+                :class="{
+                  'PricingProductCalculator__print-size--active': !side.printSize
+                }"
+                @click="side.printSize = null">
+                no print
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="lc_h3">
+      Print Colours
+    </div>
+    <div class="row">
+      <div
+        v-for="side in sides"
+        :key="side.type"
+        class="PricingProductCalculator__prints col-sm-6 col-12">
+        <div style="padding: 0px 30px">
+          <range
+            v-model="side.colorsQuantity"
+            :min="1"
+            :max="maxScreenPrintColors"
+            :visible-steps="true" />
+          <div class="row">
+            <div class="col-6">
+              <label class="form-label PaymentModal__label-with-checkbox">
+                <checkbox
+                  v-model="side.fullColor"
+                  @change="onChangeFullColor(side)" />
+                <span class="lc_regular14 lc__grey1">
+                  Full colour
+                </span>
+              </label>
+            </div>
+            <div class="col-6">
+              <label class="form-label PaymentModal__label-with-checkbox">
+                <checkbox v-model="side.hasUnderbase" />
+                <span class="lc_regular14 lc__grey1">
+                  With Underbase
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="lc_h3">
+      Products Quantity
+    </div>
+    <div style="padding: 30px">
+      <range
+        v-model="quantity"
+        :min="1"
+        :max="999"
+        :visible-steps="true" />
+    </div>
+    <div class="PricingProductCalculator__delivery">
+      <div class="lc_h5 mr-10">
+        Delivery
+      </div>
+      <div class="PricingProductCalculator__delivery-postcode">
+        <postcode-select v-model="postcode" />
+      </div>
+    </div>
+    <div class="row">
+      <div
+        v-for="(printTypePricing, index) in printTypesPricing"
+        :key="index"
+        class="PricingProductCalculator__prints col-6">
+        <div class="row">
+          <div class="col-6">
+            <div
+              v-if="printTypePricing.prints[0]"
+              class="mb-10">
+              <div class="lc_h4">
+                {{ labels[printTypePricing.type] }}
+              </div>
+              <div class="lc_regular13">
+                Minimum: {{ printTypePricing.prints[0].printType.minQuantity > 1 ? printTypePricing.prints[0].printType.minQuantity : 'No minimum' }}
+              </div>
+            </div>
+            <div class="PricingProductCalculator__cost">
+              Cost Per Unit: <b>{{ printTypePricing.pricing.products.price | price }}</b>
+            </div>
+            <div>
+              <v-popover
+                trigger="hover"
+                :delay="{ hide: 400 }"
+                popover-class="tooltip popover white">
+                <span class="PricingProductCalculator__breakdown">
+                  breakdown
+                </span>
+                <template
+                  slot="popover">
+                  <product-total-pricing :pricing="printTypePricing.pricing" />
+                </template>
+              </v-popover>
+            </div>
+          </div>
+          <div class="col-6">
+            <btn
+              btn-class="green"
+              btn-label="Edit"
+              @onclick="goToEditor()">
+            </btn>
+          </div>
+        </div>
+        <div class="PricingProductCalculator__reprint">
+          <div v-if="printTypePricing.type === 'full colour print'">
+            Repeat Print same cost
+          </div>
+          <div v-else>
+            Repeat Print: {{ (printTypePricing.pricing.products.price - printTypePricing.pricing.products.prints.totalSetupPrice) | price }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { getPrintAreasSizes, getPrintAreaSizes } from '@lancom/shared/assets/js/utils/prints';
+import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+import { getProductsForCalculatePricing, generateProductLink } from '@lancom/shared/assets/js/utils/product';
+import Range from '@lancom/shared/components/common/range/range';
+import api from '@lancom/shared/assets/js/api';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import ProductTotalPricing from '@lancom/shared/components/common/products_total_pricing/products-total-pricing';
+import debounce from 'lodash.debounce';
+import { mapGetters } from 'vuex';
+import PrintSizeIcon from './print_size_icon/print-size-icon';
+
+export default {
+  name: 'PricingProductCalculator',
+  filters: {
+    price
+  },
+  components: {
+    PrintSizeIcon,
+    PostcodeSelect,
+    Range,
+    ProductTotalPricing
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    const simpleProduct = [...this.product.simpleProducts].sort((a, b) => a.maxPrice - b.maxPrice)[0];
+    const frontPrintSize = getPrintAreasSizes(this.product.printAreas, 'front');
+    const backPrintSize = getPrintAreasSizes(this.product.printAreas, 'back');
+
+    const printTypes = this.product.printTypes.filter(printType => printType.type === 'screen print');
+    const screenPrintMinQuantity = Math.min(...printTypes.map(printType => printType.minQuantity));
+
+    return {
+      simpleProduct: { ...simpleProduct, amount: screenPrintMinQuantity || this.product.minimumOrderQuantity },
+      labels: {
+        'screen print': 'Screen Print',
+        'full colour print': 'Digital Print'
+      },
+      printTypesPricing: [],
+      availablePrintTypes: ['full colour print', 'screen print'],
+      postcode: null,
+      sides: [{
+        type: 'front',
+        printSize: frontPrintSize[0].alias,
+        printSizes: frontPrintSize,
+        colorsQuantity: 1,
+        hasUnderbase: false,
+        fullColor: false
+      }, {
+        type: 'back',
+        printSize: backPrintSize[0].alias,
+        printSizes: backPrintSize,
+        colorsQuantity: 1,
+        hasUnderbase: false,
+        fullColor: false
+      }],
+      calculatePricingWithDebounce: debounce(this.calculatePricing.bind(this), 500)
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    maxScreenPrintColors() {
+      const printTypes = this.product.printTypes.filter(printType => printType.type === 'screen print');
+      return Math.max(...printTypes.map(printType => printType.colorsQuantity));
+    },
+    screenPrintMinQuantity() {
+      const printTypes = this.product.printTypes.filter(printType => printType.type === 'screen print');
+      return Math.min(...printTypes.map(printType => printType.minQuantity));
+    },
+    pricingPayload() {
+      return [
+        this.simpleProduct.amount,
+        this.sides.map(({ colorsQuantity, hasUnderbase, printSize }) => ({ colorsQuantity, hasUnderbase, printSize })),
+        this.postcode
+      ];
+    },
+    quantity: {
+      get() {
+        return this.simpleProduct.amount;
+      },
+      set(amount) {
+        if (amount < this.screenPrintMinQuantity) {
+          this.sides.forEach(side => {
+            side.fullColor = true;
+            this.onChangeFullColor(side);
+          });
+        }
+        this.simpleProduct.amount = amount;
+      }
+    }
+  },
+  watch: {
+    pricingPayload() {
+      this.calculatePricingWithDebounce();
+    }
+  },
+  mounted() {
+    this.calculatePricingWithDebounce();
+  },
+  methods: {
+    async calculatePricing() {
+      this.printTypesPricing = await Promise.all(
+        this.availablePrintTypes.map(async type => {
+          const prints = this.generateSidesPrints(type);
+          const layers = prints.map(({ printType, printSize, printArea }) => ({ printType: printType?._id, printSize: printSize?._id, printArea: printArea?._id }));
+          const entities = getProductsForCalculatePricing(this.product, [this.simpleProduct], layers, true, true);
+          const pricing = await api.calculateProductPrice({ entities, postcode: this.postcode }, this.shop._id);
+          return { pricing, prints, type };
+        })
+      );
+    },
+    generateSidesPrints(type) {
+      return this.sides
+        .filter(({ printSize }) => printSize)
+        .map(side => {
+          const printType = this.getSidePrintType(side, type) || {};
+          const printSize = side.printSizes.find(({ alias }) => alias === side.printSize);
+          const printArea = this.product.printAreas.find(printArea => getPrintAreaSizes(printArea).some(({ _id }) => _id === printSize?._id));
+          return { printType, printSize, printArea };
+        });
+    },
+    getSidePrintType(side, type) {
+      return this.product.printTypes.find(printType => type === printType.type && (type === 'full colour print' || (printType.colorsQuantity === side.colorsQuantity && !!printType.hasUnderbase === !!side.hasUnderbase)));
+    },
+    goToEditor() {
+      const link = generateProductLink(this.product, null, true);
+      this.$router.push(link);
+    },
+    onChangeFullColor(side) {
+      side.colorsQuantity = side.fullColor ? this.maxScreenPrintColors : 1;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pricing-product-calculator';
+</style>

package/components/pricing/pricing_products_calculator/pricing_product_calculator/pricing_product_print_calculator/pricing-product-print-calculator.scss

@@ -0,0 +1 @@
+@import "@/assets/scss/variables";

package/components/pricing/pricing_products_calculator/pricing_product_calculator/pricing_product_print_calculator/pricing-product-print-calculator.vue

@@ -0,0 +1,26 @@
+<template>
+  <section class="PricingProductPrintCalculator__wrapper">
+    <div>{{ print.type }}</div>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: 'PricingProductPrintCalculator',
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    side: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pricing-product-print-calculator';
+</style>

package/components/pricing/pricing_products_calculator/pricing_product_calculator/print_size_icon/print-size-icon.scss

@@ -0,0 +1,34 @@
+@import "@/assets/scss/variables";
+$product_types: tee, hoodie, polo;
+$product_sides: front, back;
+$print_areas: a3, a4, half_a4, rect10;
+
+.PrintSizeIcon {
+  &__icon {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    &-container {
+      position: relative;
+      width: 150px;
+      height: 150px;
+      overflow: hidden;
+    }
+
+    @each $side in $product_sides {
+      @each $type in $product_types {
+        &.#{$side}.#{$type} {
+          background-image: url(../../../../../static/icons/#{$side}_#{$type}.svg);
+        }
+        @each $print_area in $print_areas {
+          &.#{$side}.#{$type}.#{$print_area} {
+            background-image: url(../../../../../static/icons/#{$side}_#{$type}_#{$print_area}.svg);
+          }
+        }
+      }
+    }
+  }
+}

package/components/pricing/pricing_products_calculator/pricing_product_calculator/print_size_icon/print-size-icon.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="PrintSizeIcon__wrapper">
+    <div class="PrintSizeIcon__icon-container">
+      <transition
+        name="appear-from-top"
+        appear>
+        <div
+          :key="side.printSize"
+          class="PrintSizeIcon__icon view-transition"
+          :class="{
+            [side.type]: true,
+            [printSizeClassname]: true,
+            [productType]: true
+          }">
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+const MAP_SIZE_ALIASES = {
+  a4_h: 'a4',
+  a4_v: 'a4',
+  rect10_l: 'rect10',
+  rect10_r: 'rect10'
+};
+
+export default {
+  name: 'PrintSizeIcon',
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    side: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    productType() {
+      const { productType } = this.product || {};
+      return productType?.alias;
+    },
+    printSizeClassname() {
+      return MAP_SIZE_ALIASES[this.side.printSize] || this.side.printSize;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'print-size-icon';
+</style>

package/components/pricing/pricing_screen_print/pricing-screen-print.vue

@@ -9,7 +9,10 @@
           <div
             data-aos="aosFadeLeft"
             class="col-12 PricingPrint__col">
-            <discounts-table :product="product" />
+            <product-screen-print-price-info
+              :product="product"
+              :bordered="true"
+              :tabs="true" />
           </div>
         </div>
       </div>
@@ -18,12 +21,12 @@
 </template>
 
 <script>
-import DiscountsTable from './discounts_table/discounts-table';
+import ProductScreenPrintPriceInfo from '@lancom/shared/components/product/product_prints_price_info/product_screen_print_price_info/product-screen-print-price-info';
 
 export default {
   name: 'PricingScreenPrint',
   components: {
-    DiscountsTable
+    ProductScreenPrintPriceInfo
   },
   props: {
     product: {

package/components/pricing/pricing_screen_printing/pricing-screen-printing.vue

@@ -248,7 +248,7 @@ export default {
   },
   data() {
     return {
-      product: null,
+      product: this.findProductByType(PRODUCT_TYPES.TEE),
       colorOptions: [{
         value: 0,
         label: 'Unprinted'
@@ -318,7 +318,6 @@ export default {
   },
   created() {
     this.screenPrint = true;
-    this.product = this.findProductByType(PRODUCT_TYPES.TEE);
   },
   methods: {
     contactUs() {

package/components/product/gallery/gallery.scss

@@ -0,0 +1,168 @@
+@import "@/assets/scss/variables";
+
+::v-deep .slick-dots {
+  display: none !important;
+}
+::v-deep .slick-arrow {
+  position: absolute;
+  top: 50%;
+  background-color: $black;
+  background-image: url(../../../static/icons/arrow-left.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 25px 25px;
+  width: 51px;
+  height: 90px;
+  margin-top: -45px;
+  text-indent: -9999px;
+  border: none;
+  cursor: pointer;
+  z-index: 2;
+  @media (max-width: $bp-medium-max) {
+    width: 41px;
+    height: 67px;
+  }
+
+  &.slick-prev {
+    left: 0;
+    transform: rotate(180deg);
+  }
+  &.slick-next {
+    right: 0;
+  }
+  &:hover {
+    box-shadow: 0 0 3px $grey_2;
+  }
+  &:focus {
+    outline: none;
+  }
+}
+::v-deep .slick-slider,
+::v-deep .slick-slide {
+  touch-action: auto;
+  -ms-touch-action: auto;
+}
+::v-deep .Gallery__small .slick-arrow {
+  width: 31px;
+  height: 50px;
+  margin-top: -25px;
+}
+
+.Gallery {
+  &__big,
+  &__small {
+    overflow: hidden;
+    position: relative;
+  }
+  &__zoom {
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
+    background: white;
+    opacity: 0.6;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    display: flex;
+    border: 1px solid grey;
+  }
+  &__big-image,
+  &__small-image {
+    width: 100%;
+    position: relative;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: contain;
+    touch-action: auto !important;
+    -ms-touch-action: auto !important;
+    &::after {
+      content: ' ';
+      display: block;
+      padding-top: 100%;
+    }
+  }
+  &__big {
+    &-image {
+      max-height: 600px;
+    }
+    &-print {
+      background-color: $gray;
+      padding: 16px 20px;
+      position: absolute;
+      bottom: 60px;
+      left: 0px;
+      pointer-events: none;
+      &-name {
+        font-weight: 800;
+        font-size: 18px;
+        color: $black;
+      }
+      &-price {
+        font-weight: 600;
+        font-size: 18px;
+        color: $gray_main;
+        margin-top: 4px;
+      }
+    }
+  }
+  &__small {
+    &-image {
+      cursor: pointer;
+      margin-top: 30px;
+      border-bottom: 2px solid $white;
+      &--active {
+        border-bottom: 2px solid $black;
+      }
+    }
+    &-printed {
+      font-weight: bold;
+      font-size: 10px;
+      color: $black;
+      background: $gray;
+      padding: 6px;
+      text-align: center;
+      position: absolute;
+      bottom: 12px;
+      right: 20px;
+      left: 20px;
+      text-transform: uppercase;
+      @media (max-width: $bp-medium-max) {
+        bottom: 6px;
+        right: 3px;
+        left: 3px;
+        opacity: 0.7;
+      }
+    }
+  }
+  &__filters {
+    margin-top: 28px;
+    display: flex;
+  }
+  &__filter {
+    flex-grow: 1;
+    font-weight: 800;
+    font-size: 16px;
+    text-align: center;
+    color: $black;
+    padding: 19px 0;
+    background-color: $gray;
+    cursor: pointer;
+    margin-left: 7px;
+    &:first-child {
+      margin-left: 0;
+    }
+    &--active {
+      background-color: $black;
+      color: $gray;
+    }
+  }
+  &__divider {
+    height: 1px;
+    width: 100%;
+    background-color: $gray;
+    margin-top: 20px;
+  }
+}