@lancom/shared 0.0.62 → 0.0.66

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

@@ -0,0 +1,91 @@
+<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_print/pricing-print.scss

@@ -0,0 +1,28 @@
+@import "@/assets/scss/variables";
+
+.PricingPrint {
+  &__description {
+    line-height: 170%;
+    color: $gray;
+    margin-top: 18px;
+    & + & {
+      margin-top: 46px;
+    }
+  }
+  &__col {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  &__table-container {
+    margin-top: 20px;
+    padding: 32px 36px;
+    border: 2px solid $light_gray;
+    border-radius: 5px;
+    @media (max-width: $bp-extra-small-max) {
+      ::v-deep tr, ::v-deep th, ::v-deep td {
+          font-size: 12px !important;
+      }
+    }
+  }
+}

package/components/pricing/pricing_print/pricing-print.vue

@@ -0,0 +1,58 @@
+<template>
+  <section class="PricingPrint__wrapper">
+    <div class="content-inner">
+      <div class="row PricingPrint__content">
+        <div
+          data-aos="aosFadeLeft"
+          class="col-12 PricingPrint__col">
+          <h2 class="lc_h2">
+            Digital printing price list
+          </h2>
+          <p class="PricingPrint__description">
+            No setup costs. No minimum quantity. Price as per the print area
+          </p>
+          <div class="form-actions pull-left">
+            <btn
+              btn-class="purple"
+              btn-label="Contact Us"
+              @onclick="contactUs">
+            </btn>
+          </div>
+        </div>
+        <div
+          data-aos="aosFadeRight"
+          class="col-12 PricingPrint__col">
+          <div class="PricingPrint__table-container">
+            <discounts-table :product="product" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import ContactUs from '@lancom/shared/components/asides/contact_us/contact-us';
+import DiscountsTable from './discounts_table/discounts-table';
+
+export default {
+  name: 'PricingPrint',
+  components: {
+    DiscountsTable
+  },
+  props: {
+    product: {
+      type: Object
+    }
+  },
+  methods: {
+    contactUs() {
+      this.$aside.show(ContactUs);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pricing-print';
+</style>

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

@@ -0,0 +1,14 @@
+@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

@@ -0,0 +1,78 @@
+<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>

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

@@ -0,0 +1,8 @@
+@import "@/assets/scss/variables";
+
+.PricingScreenPrint {
+  &__title {
+    text-align: center;
+    margin-bottom: 20px;
+  }
+}

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

@@ -0,0 +1,38 @@
+<template>
+  <section class="PricingScreenPrint__wrapper">
+    <div class="content-inner">
+      <div class="content-inner">
+        <h2 class="lc_h2 PricingScreenPrint__title">
+          Screen printing price list
+        </h2>
+        <div class="row PricingScreenPrint__content">
+          <div
+            data-aos="aosFadeLeft"
+            class="col-12 PricingPrint__col">
+            <discounts-table :product="product" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import DiscountsTable from './discounts_table/discounts-table';
+
+export default {
+  name: 'PricingScreenPrint',
+  components: {
+    DiscountsTable
+  },
+  props: {
+    product: {
+      type: Object
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pricing-screen-print';
+</style>

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

@@ -0,0 +1,253 @@
+@import "@/assets/scss/variables";
+$product_types: tee, hoodie, polo;
+$product_sides: front, back;
+$print_areas: a3, a4_v, half_a4_h, rect10_l;
+
+.PricingScreenPrintSection {
+  &__container {
+    position: relative;
+  }
+  &__header {
+    display: flex;
+    &-col {
+      width: 50%;
+      &:first-of-type {
+        padding: 150px 0 300px 0;
+      }
+      &:last-of-type {
+        background-image: url(../../../static/images/pricing-header.png);
+        background-position: left;
+        background-repeat: no-repeat;
+        background-size: contain;
+      }
+    }
+  }
+  &__pricing {
+    margin-top: 103px;
+  }
+  @media (max-width: $bp-medium-max) {
+    &__pricing {
+      margin-top: 0px;
+    }
+  }
+  &__subtitle {
+    margin-top: 12px;
+  }
+  &__warning {
+    margin-top: 12px;
+    border-radius: 4px;
+    color: $white_high_emphasis;
+    background-color: $error;
+    padding: 10px;
+  }
+  &__print-info {
+    margin: 0px 0px 20px 0px;
+    border: 2px solid $light_gray;
+    border-radius: 10px;
+
+    @media (max-width: $bp-extra-small-max) {
+      .lc_h3 {
+        font-size: 21px;
+      }
+    }
+
+    ul {
+      list-style-type: decimal;
+      margin-left: 20px;
+      li {
+        margin: 5px 0px;
+      }
+    }
+  }
+  &__content {
+    box-shadow: 10px 10px 30px rgba(75, 75, 75, 0.05);
+    border-radius: 5px;
+    padding: 0;
+    z-index: 1;
+    margin-bottom: 40px;
+    &-col {
+      background-color: #FFFFFF;
+      min-height: 665px;
+      &:first-of-type {
+        padding: 40px 40px 0px 50px;
+      }
+      &:last-of-type {
+        padding: 40px 50px 0px 40px;
+      }
+      @media (max-width: $bp-extra-small-max) {
+        &:first-of-type {
+          padding: 40px 10px 0px 15px;
+        }
+        &:last-of-type {
+          padding: 40px 15px 0px 10px;
+        }
+      }
+    }
+  }
+  &__section {
+    & + & {
+      margin-top: 35px;
+    }
+    &-title {
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 25px;
+      letter-spacing: 0.02em;
+      color: $dark_blue;
+    }
+    &-content {
+      padding-top: 20px;
+      &-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        & + & {
+          margin-top: 6px;
+        }
+      }
+      &-label {
+        line-height: 27px;
+        color: $gray;
+      }
+      &-value {
+        font-weight: 500;
+        color: $dark_blue;
+      }
+    }
+    &-help {
+      margin-top: 20px;
+      padding: 11px 12px 11px 36px;
+      background-color: $light_gray;
+      font-size: 14px;
+      line-height: 21px;
+      color: $gray;
+      position: relative;
+      &-link {
+        color: $green;
+        cursor: pointer;
+      }
+      &-icon {
+        font-size: 13px;
+        color: $green;
+        position: absolute;
+        top: 15px;
+        left: 15px;
+        &:before {
+          margin: 0;
+        }
+      }
+    }
+  }
+  &__total-cost {
+    display: flex;
+    flex-direction: column;
+    &-value {
+      font-weight: bold;
+      font-size: 30px;
+      line-height: 36px;
+      letter-spacing: 0.02em;
+      color: $dark_blue;
+    }
+  }
+  &__product {
+    &-types {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-column-gap: 8px;
+    }
+    &-type {
+      border-radius: 5px;
+      padding: 78px 25px 16px 25px;
+      text-align: center;
+      font-size: 14px;
+      line-height: 21px;
+      color: $gray;
+      background-color: #FFFFFF;
+      position: relative;
+      cursor: pointer;
+      transition: background-color .22s ease-in-out;
+      &:before {
+        content: '';
+        position: absolute;
+        top: 16px;
+        left: 0;
+        height: 50px;
+        width: 100%;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+      }
+      &.active {
+        background-color: $light_gray;
+      }
+      &.disabled {
+        opacity: .2;
+        pointer-events: none;
+      }
+
+      @each $type in $product_types {
+        &.#{$type}:before {
+          background-image: url(../../../static/icons/product_#{$type}.svg);
+        }
+      }
+    }
+  }
+  &__print {
+    &-areas {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-column-gap: 30px;
+    }
+    &-options {
+      margin-top: 16px;
+    }
+    &-quantity {
+      padding: 10px !important;
+    }
+  }
+  &__product-side {
+    display: flex;
+    flex-direction: column;
+    &-info {
+      padding: 32px 0 22px 0;
+      border: 1px solid $light_gray;
+      border-radius: 2px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    &-name {
+      margin-top: 16px;
+      font-weight: 500;
+      text-align: center;
+      letter-spacing: 0.02em;
+    }
+    &-icon {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-position: center;
+      &-container {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        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);
+            }
+          }
+        }
+      }
+    }
+  }
+}