@lancom/shared 0.0.62 → 0.0.66

package/components/pricing/pricing_example/pricing-example.scss

@@ -0,0 +1,79 @@
+@import "@/assets/scss/variables";
+
+.PricingExample {
+  &__description {
+    line-height: 170%;
+    color: $gray;
+    margin-top: 18px;
+    & + & {
+      margin-top: 46px;
+    }
+  }
+  &__subtitle {
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 120%;
+    letter-spacing: 0.02em;
+    color: $dark_blue;
+    margin-top: 24px;
+  }
+  &__col {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  &__faq-link {
+    color: $green;
+    text-decoration: none;
+    &-container {
+      font-size: 18px;
+      line-height: 160%;
+      letter-spacing: 0.02em;
+    }
+  }
+  &__example {
+    &-container {
+      border: 2px solid $light_gray;
+      padding: 32px 36px;
+      border-radius: 5px;
+
+      @media (max-width: $bp-small-max) {
+        padding: 32px 6px;
+      }
+    }
+    &-formula {
+      display: flex;
+      &-image {
+        width: 100%;
+        object-fit: contain;
+      }
+      &-table {
+        margin-top: 46px;
+
+        td {
+          @media (max-width: $bp-small-max) {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+    &-total-price {
+      font-weight: bold;
+      font-size: 40px;
+      line-height: 120%;
+      letter-spacing: 0.02em;
+      color: $green;
+
+      @media (max-width: $bp-small-max) {
+        font-size: 20px;
+      }
+    }
+    &-tax {
+      font-size: 12px;
+
+      @media (max-width: $bp-small-max) {
+        font-size: 8px;
+      }
+    }
+  }
+}

package/components/pricing/pricing_example/pricing-example.vue

@@ -0,0 +1,104 @@
+<template>
+  <section class="PricingExample__wrapper">
+    <div class="content-inner">
+      <div class="row PricingExample__content">
+        <div
+          data-aos="aosFadeLeft"
+          class="col-sm-5 col-12 PricingExample__col">
+          <h2 class="lc_h2">
+            Example of price calculation
+          </h2>
+          <p class="PricingExample__description">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+          <div class="PricingExample__subtitle">
+            Have more questions?
+          </div>
+          <div class="PricingExample__faq-link-container">
+            Check our
+            <nuxt-link
+              to="/faq?group=pricing&id=1"
+              class="PricingExample__faq-link">
+              Pricing FAQ
+            </nuxt-link>
+          </div>
+        </div>
+        <div
+          data-aos="aosFadeRight"
+          class="col-sm-7 col-12 PricingExample__col">
+          <div class="PricingExample__example-container">
+            <div class="PricingExample__example-formula">
+              <img
+                src="~static/images/price_calc_example.png"
+                class="PricingExample__example-formula-image" />
+            </div>
+            <div class="PricingExample__example-formula-table">
+              <table
+                v-if="productPricing"
+                class="lc_table col-2-highlighted tight-rows">
+                <tbody>
+                  <tr>
+                    <td>Tees [AS Colour Staple Tee]:</td>
+                    <td>{{ productPricing.amount }} x {{ productPricing.products.products.price | price }} = {{ productPricing.products.products.totalPrice | price }}</td>
+                    <td>Total cost:</td>
+                  </tr>
+                  <tr>
+                    <td>Front Print [Half-A4]:</td>
+                    <td>{{ productPricing.amount }} x {{ printsPricing.front.price | price }} = {{ printsPricing.front.totalPrice | price }}</td>
+                    <td>
+                      <div class="PricingExample__example-total-price">
+                        {{ productPricing.totalPrice | price }}
+                      </div>
+                      <div class="PricingExample__example-tax">
+                        Inclusive of GST: {{ productPricing.tax.totalPrice | price }}
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Back Print [A3]:</td>
+                    <td>{{ productPricing.amount }} x {{ printsPricing.back.price | price }} = {{ printsPricing.back.totalPrice | price }}</td>
+                    <td>+ Delivery</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import productsPrice from '@lancom/shared/mixins/products-price';
+import { PRODUCT_TYPES } from '@lancom/shared/assets/js/constants/product';
+
+export default {
+  name: 'PricingExample',
+  mixins: [
+    productsPrice
+  ],
+  props: {
+    products: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      amount: 20,
+      front: { printArea: 'half_a4_h' },
+      back: { printArea: 'a3' },
+      product: null
+    };
+  },
+  created() {
+    this.product = this.products.find(p => p.productType.alias === PRODUCT_TYPES.TEE);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pricing-example';
+</style>

package/components/pricing/pricing_garment/pricing-garment.scss

@@ -0,0 +1,73 @@
+@import "@/assets/scss/variables";
+$product_types: tee, hoodie, polo;
+
+.PricingGarment {
+  &__content {
+    margin-top: 40px;
+  }
+  &__col {
+    &:first-of-type {
+      padding-right: 48px;
+    }
+    &:last-of-type {
+      padding-left: 48px;
+    }
+  }
+  &__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);
+        }
+      }
+    }
+  }
+  &__table-container {
+    margin-top: 20px;
+    padding: 32px 36px;
+    border: 2px solid $light_gray;
+    border-radius: 5px;
+  }
+  &__tee-photo {
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+}

package/components/pricing/pricing_garment/pricing-garment.vue

@@ -0,0 +1,92 @@
+<template>
+  <section class="PricingGarment__wrapper">
+    <div class="content-inner">
+      <h2 class="lc_h2">
+        Garment Prices
+      </h2>
+      <div class="row PricingGarment__content">
+        <div
+          data-aos="aosFadeLeft"
+          class="col-sm-5 col-12 PricingGarment__col">
+          <div class="PricingGarment__product-types">
+            <div
+              v-for="item in productTypes"
+              :key="item.type"
+              class="PricingGarment__product-type"
+              :class="{
+                [item.type]: true,
+                active: item.product === product,
+                disabled: !item.product
+              }"
+              @click="product = item.product">
+              {{ item.label }}
+            </div>
+          </div>
+          <div
+            v-if="product"
+            class="PricingGarment__table-container">
+            <pricing-discounts-table :prices="product.pricing" />
+          </div>
+        </div>
+        <div
+          v-if="product"
+          data-aos="aosFadeRight"
+          class="col-sm-7 col-12 PricingGarment__col">
+          <div
+            class="PricingGarment__tee-photo"
+            :style="{
+              'background-image': imageBackground
+            }"></div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
+import { PRODUCT_TYPES, PRODUCT_TYPES_LIST } from '@lancom/shared/assets/js/constants/product';
+import { getColorImage } from '@lancom/shared/assets/js/utils/colors';
+
+export default {
+  name: 'PricingGarment',
+  components: {
+    PricingDiscountsTable
+  },
+  props: {
+    products: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      product: null
+    };
+  },
+  computed: {
+    productTypes() {
+      return PRODUCT_TYPES_LIST.map(item => ({
+        ...item,
+        product: this.findProductByType(item.type)
+      }));
+    },
+    imageBackground() {
+      const image = getColorImage(this.product, 'large', 'pricing') || getColorImage(this.product, 'large', 'front');
+      return image && `url('${image}')`;
+    }
+  },
+  mounted() {
+    this.product = this.findProductByType(PRODUCT_TYPES.TEE);
+  },
+  methods: {
+    findProductByType(type) {
+      return this.products.find(p => p.productType.alias === type);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pricing-garment';
+</style>

package/components/pricing/pricing_how_we_calculate/pricing-how-we-calculate.scss

@@ -0,0 +1,44 @@
+@import "@/assets/scss/variables";
+
+.PricingHowWeCalculate {
+  &__title {
+    text-align: center;
+  }
+  &__content {
+    margin-top: 48px;
+    display: grid;
+    grid-template-columns: 1fr;
+
+    @media (min-width: $bp-large-min) {
+      grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr;
+    }
+  }
+  &__delimiter, &__entity {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  &__entity {
+    padding: 40px 36px 24px 36px;
+    flex-direction: column;
+    &-icon {
+      width: 80px;
+      height: 80px;
+      object-fit: cover;
+    }
+    &-info {
+      margin-top: 24px;
+      text-align: center;
+    }
+    &-label {
+      font-weight: 500;
+      font-size: 22px;
+      line-height: 29px;
+      letter-spacing: 0.02em;
+    }
+    &-description {
+      margin-top: 8px;
+      line-height: 27px;
+    }
+  }
+}

package/components/pricing/pricing_how_we_calculate/pricing-how-we-calculate.vue

@@ -0,0 +1,96 @@
+<template>
+  <section class="PricingHowWeCalculate__wrapper">
+    <div class="content-inner">
+      <h2 class="lc_h2 PricingHowWeCalculate__title">
+        How we calculate prices
+      </h2>
+      <div class="PricingHowWeCalculate__content">
+        <div
+          data-aos="aosFadeUp"
+          class="PricingHowWeCalculate__entity">
+          <img
+            class="PricingHowWeCalculate__entity-icon"
+            src="~static/icons/calc_tee_price.svg" />
+          <div class="PricingHowWeCalculate__entity-info">
+            <div class="PricingHowWeCalculate__entity-label">
+              Tee Price
+            </div>
+            <div class="PricingHowWeCalculate__entity-description">
+              Quantity discounts for more tees
+            </div>
+          </div>
+        </div>
+        <div
+          data-aos="aosFadeDown"
+          class="PricingHowWeCalculate__delimiter">
+          &plus;
+        </div>
+        <div
+          data-aos="aosFadeUp"
+          class="PricingHowWeCalculate__entity">
+          <img
+            class="PricingHowWeCalculate__entity-icon"
+            src="~static/icons/calc_print_price.svg" />
+          <div class="PricingHowWeCalculate__entity-info">
+            <div class="PricingHowWeCalculate__entity-label">
+              Print Price
+            </div>
+            <div class="PricingHowWeCalculate__entity-description">
+              Based on print area and quantity
+            </div>
+          </div>
+        </div>
+        <div
+          data-aos="aosFadeDown"
+          class="PricingHowWeCalculate__delimiter">
+          &plus;
+        </div>
+        <div
+          data-aos="aosFadeUp"
+          class="PricingHowWeCalculate__entity">
+          <img
+            class="PricingHowWeCalculate__entity-icon"
+            src="~static/icons/calc_delivery_price.svg" />
+          <div class="PricingHowWeCalculate__entity-info">
+            <div class="PricingHowWeCalculate__entity-label">
+              Delivery
+            </div>
+            <div class="PricingHowWeCalculate__entity-description">
+              Based on satchel size or carton and the destination
+            </div>
+          </div>
+        </div>
+        <div
+          data-aos="aosFadeDown"
+          class="PricingHowWeCalculate__delimiter">
+          &#61;
+        </div>
+        <div
+          data-aos="aosFadeUp"
+          class="PricingHowWeCalculate__entity">
+          <img
+            class="PricingHowWeCalculate__entity-icon"
+            src="~static/icons/calc_total_price.svg" />
+          <div class="PricingHowWeCalculate__entity-info">
+            <div class="PricingHowWeCalculate__entity-label">
+              Your Total Price
+            </div>
+            <div class="PricingHowWeCalculate__entity-description">
+              (inclusive of GST)
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'PricingHowWeCalculate'
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pricing-how-we-calculate';
+</style>

package/components/pricing/pricing_main_section/pricing-main-section.scss

@@ -0,0 +1,54 @@
+@import "@/assets/scss/variables";
+
+.PricingMainSection {
+  &__wrapper {
+    background: linear-gradient($light_gray 50%, #FFFFFF 50%);
+  }
+  &__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;
+      }
+    }
+  }
+  
+  &__content {
+    box-shadow: 10px 10px 30px rgba(75, 75, 75, 0.05);
+    border-radius: 5px;
+    overflow: hidden;
+    margin-top: -200px;
+    padding: 0 0 0 0;
+    z-index: 1;
+    &-col {
+      background-color: #FFFFFF;
+      min-height: 665px;
+      &:first-of-type {
+        padding: 20px 40px 0px 50px;
+      }
+      &:last-of-type {
+        padding: 20px 50px 0px 40px;
+      }
+      @media (max-width: $bp-extra-small-max) {
+        min-height: 505px;
+        
+        &:first-of-type {
+          padding: 20px 10px 0px 15px;
+        }
+        &:last-of-type {
+          padding: 20px 15px 0px 10px;
+        }
+      }
+    }
+  }
+}

package/components/pricing/pricing_main_section/pricing-main-section.vue

@@ -0,0 +1,61 @@
+<template>
+  <section class="PricingMainSection__wrapper">
+    <div class="content-inner PricingMainSection__container">
+      <div class="PricingMainSection__header">
+        <div class="PricingMainSection__header-col">
+          <h1 class="lc_h1">
+            Simple pricing
+          </h1>
+          <h3 class="lc_h3--gray PricingMainSection__subtitle">
+            Transparent, Open and Equal for all
+          </h3>
+        </div>
+        <div class="PricingMainSection__header-col"></div>
+      </div>
+      <div class="row">
+        <div class="PricingMainSection__content col-sm-12 col-12 mr-auto ml-auto">
+          <div class="PricingMainSection__content-col row">
+            <div class="col-12">
+              <div class="row">
+                <div class="col-12">
+                  <div class="lc_h3 lc_text-centered">
+                    Compare Printing Quotes
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-12 col-sm-6">
+              <pricing-digital-printing :products="products" />
+            </div>
+            <div class="col-12 col-sm-6">
+              <pricing-screen-printing :products="products" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import PricingDigitalPrinting from '@lancom/shared/components/pricing/pricing_digital_printing/pricing-digital-printing';
+import PricingScreenPrinting from '@lancom/shared/components/pricing/pricing_screen_printing/pricing-screen-printing';
+
+export default {
+  name: 'PricingMainSection',
+  components: {
+    PricingScreenPrinting,
+    PricingDigitalPrinting
+  },
+  props: {
+    products: {
+      type: Array,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pricing-main-section';
+</style>

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

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