@lancom/shared 0.0.62 → 0.0.66

package/components/pages/customer/create/create.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="CustomerCreate__wrapper">
+    <customer-form
+      :customer="customer"
+      @save="onSave" />
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import CustomerForm from '@lancom/shared/components/customer/customer_form/customer-form';
+
+export default {
+  name: 'CustomerCreate',
+  components: {
+    CustomerForm
+  },
+  data() {
+    return {
+      customer: {
+        firstName: null,
+        lastName: null,
+        email: null,
+        phone: null,
+        password: null,
+        company: null,
+        suburb: null,
+        signUpForNewsletter: false
+      }
+    };
+  },
+  methods: {
+    ...mapActions('auth', ['update_user']),
+    onSave({ customer: user, token }) {
+      this.$toastr.s('Customer successfully created');
+      this.update_user({ user, token });
+      this.$router.push('/');
+    }
+  }
+};
+</script>

package/components/pages/customer/recovery/recovery.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="CustomerRecovery__wrapper">
+    <div class="CustomerRecovery__form">
+      <div
+        v-if="isSent"
+        class="alert alert-success">
+        Message with link successfully sent
+      </div>
+      <recovery-form
+        v-else
+        @recovery="onRecovery" />
+    </div>
+  </div>
+</template>
+
+<script>
+import RecoveryForm from '@lancom/shared/components/customer/recovery_form/recovery-form';
+
+export default {
+  name: 'Recovery',
+  layout: 'content',
+  components: {
+    RecoveryForm
+  },
+  data() {
+    return {
+      isSent: false
+    };
+  },
+  methods: {
+    onRecovery() {
+      this.isSent = true;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .Recovery {
+    &__wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      min-height: 100vh;
+    }
+    &__form {
+      width: 400px;
+    }
+  }
+</style>

package/components/pages/customer/settings/settings.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="CustomerCreate__wrapper">
+    <customer-form
+      :customer="customer"
+      @save="onSave" />
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import CustomerForm from '@lancom/shared/components/customer/customer_form/customer-form';
+
+export default {
+  name: 'CustomerCreate',
+  components: {
+    CustomerForm
+  },
+  data() {
+    return {
+      customer: null
+    };
+  },
+  computed: {
+    ...mapGetters('auth', ['user'])
+  },
+  created() {
+    this.customer = {
+      ...this.user
+    };
+  },
+  methods: {
+    ...mapActions('auth', ['update_user']),
+    onSave({ customer: user, token }) {
+      this.$toastr.s('Customer successfully saved');
+      this.update_user({ user, token });
+    }
+  }
+};
+</script>

package/components/pages/customer/sign_in/sign-in.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="CustomerSignIn__wrapper">
+    <signin-form
+      class="CustomerSignIn__form"
+      @signin="onSignin" />
+  </div>
+</template>
+
+<script>
+import SigninForm from '@lancom/shared/components/customer/signin_form/signin-form';
+
+export default {
+  name: 'CustomerSignIn',
+  components: {
+    SigninForm
+  },
+  data() {
+    return {
+      customer: {
+        email: null,
+        password: null
+      }
+    };
+  },
+  methods: {
+    onSignin(faq) {
+      this.$router.push('/');
+    }
+  }
+};
+</script>

package/components/pricing/pricing_digital_printing/pricing-digital-printing.scss

@@ -0,0 +1,248 @@
+@import "@/assets/scss/variables";
+$product_types: tee, hoodie, polo;
+$product_sides: front, back;
+$print_areas: a3, a4_v, half_a4_h, rect10_l;
+
+.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;
+      }
+    }
+  }
+  &__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;
+    overflow: hidden;
+    margin-top: -200px;
+    padding: 0;
+    z-index: 1;
+    &-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) {
+        min-height: 505px;
+        
+        &: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: 10px;
+    }
+  }
+  &__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);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/components/pricing/pricing_digital_printing/pricing-digital-printing.vue

@@ -0,0 +1,293 @@
+<template>
+  <div>
+    <div class="row PricingMainSection__print-info">
+      <div class="col-12 lc_text-uppercase">
+        <div class="lc_h3">
+          Digital Printing
+        </div>
+        <ul>
+          <li>
+            Best for unlimited colours
+          </li>
+          <li>
+            No minimum quantity
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="row">
+      <transition name="from-left-to-right" appear>
+        <div class="col-12 view-transition">
+          <div class="PricingMainSection__section">
+            <div class="PricingMainSection__section-title">
+              Сhoose Product
+            </div>
+            <div class="PricingMainSection__section-content PricingMainSection__product-types">
+              <div
+                v-for="item in productTypes"
+                :key="item.type"
+                class="PricingMainSection__product-type"
+                :class="{
+                  [item.type]: true,
+                  active: product === item.product,
+                  disabled: !item.product
+                }"
+                @click="product = item.product">
+                {{ item.label }}
+              </div>
+            </div>
+          </div>
+          <div class="PricingMainSection__section">
+            <div class="PricingMainSection__section-title">
+              Choose Print size
+            </div>
+            <div class="PricingMainSection__section-content PricingMainSection__print-areas">
+              <div class="PricingMainSection__product-side">
+                <div class="PricingMainSection__product-side-info">
+                  <div class="PricingMainSection__product-side-icon-container">
+                    <transition
+                      name="appear-from-top"
+                      appear>
+                      <div
+                        :key="front.printArea"
+                        class="PricingMainSection__product-side-icon front view-transition"
+                        :class="{
+                          [front.printArea]: true,
+                          [productType]: true
+                        }">
+                      </div>
+                    </transition>
+                  </div>
+                  <span class="PricingMainSection__product-side-name">
+                    Front
+                  </span>
+                </div>
+                <div class="PricingMainSection__print-options">
+                  <editor-print-area-options
+                    :selected="front.printArea"
+                    side="front"
+                    :product="product"
+                    :orientation="false"
+                    :single-row="false"
+                    :allow-no-print="true"
+                    @select="value => front.printArea = value">
+                  </editor-print-area-options>
+                </div>
+              </div>
+              <div class="PricingMainSection__product-side">
+                <div class="PricingMainSection__product-side-info">
+                  <div class="PricingMainSection__product-side-icon-container">
+                    <transition
+                      name="appear-from-top"
+                      appear>
+                      <div
+                        :key="back.printArea"
+                        class="PricingMainSection__product-side-icon back view-transition"
+                        :class="{
+                          [back.printArea]: true,
+                          [productType]: true
+                        }">
+                      </div>
+                    </transition>
+                  </div>
+                  <span class="PricingMainSection__product-side-name">
+                    Back
+                  </span>
+                </div>
+                <div class="PricingMainSection__print-options">
+                  <editor-print-area-options
+                    :selected="back.printArea"
+                    :product="product"
+                    side="back"
+                    :orientation="false"
+                    :single-row="false"
+                    :allow-no-print="true"
+                    @select="value => back.printArea = value">
+                  </editor-print-area-options>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+      <transition name="from-right-to-left" appear>
+        <div class="col-12 PricingMainSection__content-col view-transition">
+          <div class="PricingMainSection__section">
+            <div class="PricingMainSection__section-title">
+              If you order {{ amount === 126 ? '125+' : amount }} Shirts
+            </div>
+            <div class="PricingMainSection__section-content">
+              <range v-model="amount" :min="1" :max="126" />
+              <transition name="fade">
+                <div
+                  v-if="amount === 126"
+                  class="PricingMainSection__section-help view-transition">
+                  <i class="icon-attention-circled PricingMainSection__section-help-icon"></i>
+                  Your order can qualify for larger discounts with screen printing,
+                  with prices starting from $2 to $5 per print. Please
+                  <span
+                    class="PricingMainSection__section-help-link"
+                    @click="contactUs">Contact Us</span>
+                  with the details for a quote.
+                </div>
+              </transition>
+            </div>
+          </div>
+          <div class="PricingMainSection__section">
+            <div class="PricingMainSection__section-title">
+              Delivery
+            </div>
+            <div class="PricingMainSection__section-content">
+              <div class="form-row">
+                <postcode-select v-model="postcode" />
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="productPricing"
+            class="PricingMainSection__section">
+            <div class="PricingMainSection__section-title">
+              Your Quote
+            </div>
+            <div class="PricingMainSection__section-content">
+              <div class="form-row PricingMainSection__section-content-row">
+                <div class="PricingMainSection__section-content-label">
+                  Tees:
+                </div>
+                <div class="PricingMainSection__section-content-value">
+                  {{ productPricing.amount }} x {{ productPricing.products.products.price | price }} = {{ productPricing.products.products.totalPrice | price }}
+                </div>
+              </div>
+              <div class="form-row PricingMainSection__section-content-row">
+                <div class="PricingMainSection__section-content-label">
+                  Front print:
+                </div>
+                <div class="PricingMainSection__section-content-value">
+                  {{ productPricing.amount }} x {{ printsPricing.front.price | price }} = {{ printsPricing.front.totalPrice | price }}
+                </div>
+              </div>
+              <div class="form-row PricingMainSection__section-content-row">
+                <div class="PricingMainSection__section-content-label">
+                  Back print:
+                </div>
+                <div class="PricingMainSection__section-content-value">
+                  {{ productPricing.amount }} x {{ printsPricing.back.price | price }} = {{ printsPricing.back.totalPrice | price }}
+                </div>
+              </div>
+              <div
+                v-if="productPricing.shipping"
+                class="form-row PricingMainSection__section-content-row">
+                <div class="PricingMainSection__section-content-label">
+                  Delivery:
+                </div>
+                <div class="PricingMainSection__section-content-value">
+                  {{ productPricing.shipping.totalPrice | price }}
+                </div>
+              </div>
+              <div
+                v-if="isSelectedPrint"
+                class="form-actions space-between">
+                <div class="PricingMainSection__total-cost">
+                  <span class="PricingMainSection__section-content-label">
+                    Total cost:
+                  </span>
+                  <span class="PricingMainSection__total-cost-value">
+                    {{ productPricing.totalPrice | price }}
+                  </span>
+                </div>
+                <btn
+                  btn-class="green"
+                  btn-label="Go To Editor"
+                  @onclick="goTo(productEditorLink)">
+                </btn>
+              </div>
+              <div
+                v-if="isSelectedPrint"
+                class="form-row">
+                <span class="PricingMainSection__section-content-label">
+                  Inclusive of GST:
+                </span>
+                <span class="PricingMainSection__section-content-value">
+                  {{ productPricing.tax.totalPrice | price }}
+                </span>
+              </div>
+              <div
+                v-if="!isSelectedPrint"
+                class="PricingMainSection__warning">
+                Please choose at least one print location
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import { PRODUCT_TYPES, PRODUCT_TYPES_LIST } from '@lancom/shared/assets/js/constants/product';
+import productsPrice from '@lancom/shared/mixins/products-price';
+import Range from '@lancom/shared/components/common/range/range';
+import ContactUs from '@lancom/shared/components/asides/contact_us/contact-us';
+import EditorPrintAreaOptions from '@lancom/shared/components/editor/editor_print_area_options/editor-print-area-options';
+import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+
+export default {
+  name: 'PricingDigitalPrinting',
+  components: {
+    Range,
+    EditorPrintAreaOptions,
+    PostcodeSelect
+  },
+  mixins: [
+    productsPrice
+  ],
+  props: {
+    products: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      product: null
+    };
+  },
+  computed: {
+    productEditorLink() {
+      return `/${this.product.SKU}/${this.product.alias}/editor`;
+    },
+    isSelectedPrint() {
+      return !!this.front.printArea || !!this.back.printArea;
+    },
+    productTypes() {
+      return PRODUCT_TYPES_LIST.map(item => ({
+        ...item,
+        product: this.findProductByType(item.type)
+      }));
+    },
+    productType() {
+      const { productType } = this.product || {};
+      return productType?.alias;
+    }
+  },
+  created() {
+    this.product = this.findProductByType(PRODUCT_TYPES.TEE);
+  },
+  methods: {
+    contactUs() {
+      this.$aside.show(ContactUs);
+    },
+    goTo(path) {
+      this.$router.push(path);
+    },
+    findProductByType(type) {
+      return this.products.find(p => p.productType.alias === type);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pricing-digital-printing';
+</style>