@lancom/shared 0.0.62 → 0.0.66

package/components/modals/payment_modal/payment-modal.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="lc_modal__wrapper PaymentModal__wrapper">
+    <div
+      v-if="!isVisibleChargeMessage"
+      class="lc_modal__header">
+      <h5 class="lc_modal__header-title">
+        Payment
+      </h5>
+      <i
+        v-if="!processing"
+        class="icon-cancel lc_modal__close--dark"
+        @click="$emit('close')"></i>
+    </div>
+    <div
+      v-if="isVisibleChargeMessage"
+      class="PaymentModal__message">
+      <payment-success
+        v-if="isSuccessOrderCharge"
+        :order="orderData"
+        @close="$emit('close')" />
+      <payment-failed
+        v-else
+        :order="orderData"
+        :message="errorMessage"
+        @again="clearFailedCharge()" />
+    </div>
+    <div
+      v-show="!isVisibleChargeMessage"
+      class="lc_modal__content">
+      <div
+        v-if="loadingFields"
+        class="lc_modal__spinner">
+        <spinner />
+      </div>
+      <div class="form-row">
+        <div
+          id="name"
+          class="PaymentModal__field-container">
+        </div>
+        <div
+          id="errors_for_name"
+          class="error_message">
+        </div>
+      </div>
+      <div class="form-row">
+        <div
+          id="number"
+          class="PaymentModal__field-container">
+        </div>
+        <div
+          id="errors_for_number"
+          class="error_message">
+        </div>
+      </div>
+      <div class="form-row--cols">
+        <div class="form-col col-half">
+          <div
+            id="cvc"
+            class="PaymentModal__field-container">
+          </div>
+          <div
+            id="errors_for_cvc"
+            class="error_message">
+          </div>
+        </div>
+        <div class="form-col col-half">
+          <div
+            id="expiry"
+            class="PaymentModal__field-container">
+          </div>
+          <div
+            id="errors_for_expiry"
+            class="error_message">
+          </div>
+        </div>
+      </div>
+      <div class="form-row PaymentModal__terms">
+        <label class="form-label PaymentModal__label-with-checkbox">
+          <checkbox v-model="agreeTermsAndCondition" />
+          <span class="lc_regular14 lc__grey1">
+            I agree to the <a href="/page/terms-and-conditions" target="_blank">terms and conditions</a> of the sale
+          </span>
+        </label>
+      </div>
+      <div class="form-row mb-10">
+        <label class="form-label PaymentModal__label-with-checkbox">
+          <checkbox v-model="confirmCopyright" />
+          <span class="lc_regular14 lc__grey1">
+            I confirm I have copyright, trademark and IP rights, or the design is allowed under Fair Use law
+          </span>
+        </label>
+      </div>
+    </div>
+    <div
+      v-if="!isVisibleChargeMessage"
+      class="lc_modal__footer">
+      <div class="form-actions full">
+        <btn
+          btn-class="white"
+          btn-label="Back"
+          :btn-disabled="disaledBack"
+          @onclick="back">
+        </btn>
+        <btn
+          btn-class="green"
+          :btn-processing="processing"
+          :btn-disabled="disaledSubmit"
+          btn-label="Submit"
+          @onclick="submit">
+        </btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions, mapMutations } from 'vuex';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import gtm from '@lancom/shared/assets/js/utils/gtm';
+import PaymentSuccess from '@lancom/shared/components/checkout/payment/payment_success/payment-success';
+import PaymentFailed from '@lancom/shared/components/checkout/payment/payment_failed/payment-failed';
+
+export default {
+  name: 'PaymentModal',
+  filters: { price },
+  components: {
+    PaymentSuccess,
+    PaymentFailed
+  },
+  props: {
+    switchModal: {
+      type: Function,
+      required: true
+    },
+    onSuccessPayment: {
+      type: Function
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      loadingFields: false,
+      form: {},
+      fields: null,
+      agreeTermsAndCondition: false,
+      confirmCopyright: false,
+      errorMessage: null
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('order', ['orderData']),
+    isVisibleChargeMessage() {
+      return this.isSuccessOrderCharge || this.isFailedOrderCharge;
+    },
+    isSuccessOrderCharge() {
+      const { charge, test } = this.orderData;
+      return true || (charge && charge.success) || test;
+    },
+    isFailedOrderCharge() {
+      const { charge } = this.orderData;
+      return (charge && !charge.success) || this.errorMessage;
+    },
+    disaledBack() {
+      return this.loadingFields || this.processing;
+    },
+    disaledSubmit() {
+      return this.loadingFields || this.processing || !this.agreeTermsAndCondition || !this.confirmCopyright;
+    }
+  },
+  mounted() {
+    this.initHostedPayment();
+    if (this.orderData.test) {
+      this.clearCart();
+      this.clearTemplate();
+      this.resetLayers();
+      this.sendConversionData();
+
+      if (this.onSuccessPayment) {
+        this.onSuccessPayment();
+      }
+    }
+  },
+  methods: {
+    ...mapActions('order', ['submitPayment', 'deleteOrder']),
+    ...mapMutations('order', ['clearCharge']),
+    ...mapActions('cart', ['clearCart']),
+    ...mapMutations('product', ['clearTemplate']),
+    ...mapMutations('layers', ['resetLayers']),
+    initHostedPayment() {
+      this.loadingFields = true;
+      this.fields = window.HostedFields.create({
+        sandbox: process.env.IS_PROD !== 'true',
+        styles: {
+          input: {
+            'font-size': '16px',
+            'font-family': 'helvetica, tahoma, calibri, sans-serif',
+            color: '#3a3a3a'
+          },
+          '.hosted-fields-invalid:not(:focus)': {
+            color: 'red'
+          },
+          'input::placeholder': {
+            color: '#B0B0BA'
+          }
+        },
+        fields: {
+          name: {
+            selector: '#name',
+            placeholder: 'Full Name'
+          },
+          number: {
+            selector: '#number',
+            placeholder: 'Card Number'
+          },
+          cvc: {
+            selector: '#cvc',
+            placeholder: 'CVC'
+          },
+          expiry: {
+            selector: '#expiry',
+            placeholder: 'MM/YY'
+          }
+        }
+      });
+
+      this.fields.on('ready', () => {
+        this.loadingFields = false;
+      });
+    },
+    handleErrors(err) {
+      // err.messages.forEach(({ message }) => this.$toastr.e(message));
+      const defaultMessage = 'Payment error';
+      this.errorMessage = err.messages ? err.messages.map(({ message }) => message).join(', ') : (err.error_description || defaultMessage);
+    },
+    async proceedPayment(card) {
+      try {
+        const data = { card, shop: this.shop._id };
+        await this.submitPayment(data);
+        this.clearCart();
+        this.clearTemplate();
+        this.resetLayers();
+        this.sendConversionData();
+        if (this.onSuccessPayment) {
+          this.onSuccessPayment();
+        }
+      } catch (e) {
+        const { message } = (e.response && e.response.data) || e;
+        this.handleErrors({ messages: [{ message }] });
+      } finally {
+        this.processing = false;
+      }
+    },
+    sendConversionData() {
+      gtm.push({
+        id: this.orderData._id,
+        total: this.orderData.price.totalPrice,
+        tax: this.orderData.price.tax.totalPrice,
+        shipping: this.orderData.postcode,
+        products: this.orderData.products.map(product => ({
+          sku: product.SKU,
+          name: product.name,
+          category: product.brand,
+          price: product.pricing[0].price,
+          quantity: product.amount
+        }))
+      });
+    },
+    back() {
+      /*
+      * when going back to order form we need to delete existing one
+      * because in that form new order will be created
+      */
+      this.deleteOrder();
+      this.switchModal('showOrderModal');
+    },
+    submit() {
+      this.processing = true;
+      this.fields.tokenize(
+        {
+          publishable_api_key: process.env.PINPAYMENT_PUBLISHABLE_API_KEY,
+          address_line1: this.orderData.addressLine1,
+          address_line2: this.orderData.addressLine2,
+          address_city: this.orderData.city,
+          address_postcode: this.orderData.postcode,
+          address_state: this.orderData.state,
+          address_country: this.orderData.country
+        },
+        (err, response) => {
+          if (!this.processing) {
+            return;
+          }
+
+          if (err) {
+            this.handleErrors(err);
+            this.processing = false;
+          } else {
+            this.proceedPayment(response);
+          }
+        }
+      );
+    },
+    clearFailedCharge() {
+      this.errorMessage = null;
+      this.clearCharge();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'payment-modal.scss';
+</style>

package/components/news/news.scss

@@ -0,0 +1,77 @@
+@import "@/assets/scss/variables";
+
+.News {
+  &__wrapper {
+    .post-content {
+      overflow: hidden;
+      @media (max-width: $bp-extra-small-max) {
+        margin: 0;
+        padding: 15px;
+      }
+      @import "@lancom/shared/assets/scss/normalize";
+      img {
+        max-width: none;
+        @media (max-width: $bp-small-max) {
+          width: 100%;
+          height: auto;
+        }
+      }
+      @media (max-width: $bp-small-max) {
+        h1 {
+          font-size: 35px;
+        }
+      }
+    }
+    .post-full-content {
+      position: relative;
+      margin: 50px auto  0px auto;
+      padding: 0 170px 6vw;
+      min-height: 230px;
+      font-size: 1.2rem;
+      line-height: 1.6em;
+      background: #fff;
+      @media (max-width: $bp-extra-small-max) {
+        margin: 0;
+        padding: 15px;
+      }
+    }
+    .post-full-custom-excerpt {
+      margin: 20px 0 10px 0;
+      color: #738a94 !important;
+      font-size: 22px;
+      font-weight: 300;
+    }
+    .post-full-image {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: hidden;
+      margin: 25px 0 50px;
+      border-radius: 3px;
+      img {
+        max-width: 1040px;
+        width: 100%;
+        height: auto;
+      }
+    }
+  }
+
+  &__header {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+    height: calc(100vh - 200px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+  &__header-info {
+    padding-top: 40px !important;
+    padding-bottom: 0px !important;
+    h1 {
+      margin-bottom: 10px;
+    }
+  }
+}

package/components/news/news.vue

@@ -0,0 +1,52 @@
+<template>
+  <article class="News__wrapper">
+    <div class="News__header-info post-full-content content-inner">
+      <div class="post-content">
+        <h1 class="mb-5">
+          {{ item.title }}
+        </h1>
+        <div class="News__header-text">
+          <div
+            class="post-full-custom-excerpt"
+            v-html="item.short_text"></div>
+          <div class="lc_regular14 News__date">
+            {{ item.createdAt | date }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <figure
+      v-if="item.image"
+      class="post-full-image">
+      <img
+        :src="item.image.origin"
+        :alt="item.title" />
+    </figure>
+    <div class="News__post post-full-content content-inner">
+      <div
+        class="post-content"
+        v-html="item.text"></div>
+    </div>
+  </article>
+</template>
+
+<script>
+import { date } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'News',
+  filters: {
+    date
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'news';
+</style>

package/components/news/news_list/news-list.scss

@@ -0,0 +1,24 @@
+@import "@/assets/scss/variables";
+
+.NewsList {
+  &__wrapper {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  &__item {
+    width: calc(50% - 30px);
+    @media (max-width: $bp-extra-small-max) {
+      width: 100%
+    }
+    margin: 15px;
+    height: 300px;
+    
+    &--large {
+      width: 100%;
+      height: 500px;  
+      @media (max-width: $bp-extra-small-max) {
+        height: 300px;
+      }
+    }
+  }
+}

package/components/news/news_list/news-list.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="NewsList__wrapper">
+    <div
+      v-for="(item, index) in news"
+      :key="item._id"
+      :class="{
+        'NewsList__item--large': (index + 1) % 3 === 0
+      }"
+      class="NewsList__item">
+      <transition
+        :name="(index + 1) % 3 ? 'from-right-to-left' : 'from-left-to-right'"
+        appear>
+        <news-list-item :item="item" class="elevation2" />
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import NewsListItem from '../news_list_item/news-list-item';
+
+export default {
+  name: 'NewsList',
+  components: {
+    NewsListItem
+  },
+  props: {
+    news: {
+      type: Array,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'news-list';
+</style>

package/components/news/news_list_item/news-list-item.scss

@@ -0,0 +1,84 @@
+@import "@/assets/scss/variables";
+
+.NewsListItem {
+  &__wrapper {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    background-color: $black_medium_emphasis;
+    position: relative;
+    height: 100%;
+  }
+  &__info {
+    position: absolute;
+    top: 30px;
+    left: 30px;
+    right: 30px;
+  }
+  &__link {
+    color: white;
+    font-size: 30px;
+    font-weight: 800;
+    @media (max-width: $bp-extra-small-max) {
+      font-size: 25px;
+    }
+    &:hover {
+      text-decoration: none;
+    }
+  }
+  &__text {
+    margin-top: 10px;
+    color: white;
+    line-height: 150%;;
+  }
+  &__date {
+    color: #e8e8e8;
+    margin-top: 7px;
+    font-size: 11px;
+  }
+  &__more {
+    position: absolute;
+    bottom: 30px;
+    left: 30px;
+    padding: 10px;
+    border-width: 1px;
+    border-style: solid; 
+    border-color: white;
+    color: white;
+    text-decoration: none;
+    text-transform: uppercase;
+    transition: border-color 0.3s;
+    font-size: 13px;
+    font-weight: 800;
+    &>span {
+      position: relative;
+    }
+
+    &::before {
+      content: ' ';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      opacity: 0;
+      background-color: $green;
+      transition: opacity 0.3s;
+    }
+
+    &:hover {
+      border-color: $green;
+      &::before {
+        opacity: 1;
+      }
+    }
+  }
+  &__overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    cursor: pointer;
+  }
+}

package/components/news/news_list_item/news-list-item.vue

@@ -0,0 +1,70 @@
+<template>
+  <article
+    class="NewsListItem__wrapper"
+    :style="{ backgroundImage }">
+    <div
+      class="NewsListItem__overlay"
+      @click="goToNews"></div>
+    <div class="NewsListItem__info">
+      <template v-if="!item.isHiddenThumbLink">
+        <h1>
+          <nuxt-link
+            :to="{ path: linkToNews }"
+            class="NewsListItem__link"
+            :style="{ color: item.color }">
+            {{ item.title }}
+          </nuxt-link>
+        </h1>
+        <div
+          class="NewsListItem__text"
+          :style="{ color: item.color }">
+          <h2>{{ item.text }}</h2>
+        </div>
+      </template>
+      <div
+        class="NewsListItem__date"
+        :style="{ color: item.color }">
+        {{ item.createdAt | date }}
+      </div>
+    </div>
+    <nuxt-link
+      :to="{ path: linkToNews }"
+      class="NewsListItem__more">
+      <span>Read More</span>
+    </nuxt-link>
+  </article>
+</template>
+
+<script>
+import { date } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'NewsListItem',
+  filters: {
+    date
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    linkToNews() {
+      return `/news/${this.item.alias}`;
+    },
+    backgroundImage() {
+      return this.item.image ? `url('${this.item.image.medium}')` : '';
+    }
+  },
+  methods: {
+    goToNews() {
+      this.$router.push(this.linkToNews);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'news-list-item';
+</style>

package/components/order/order_approval/order-approval.scss

@@ -0,0 +1,15 @@
+@import "@/assets/scss/variables";
+
+.OrderApproval {
+  &__list {
+    margin-top: 10px;
+  }
+  &__list-item {
+    margin-bottom: 10px;
+    padding-left: 10px;
+    border-left: 1px solid $grey_3;
+  }
+  &__link {
+    color: $green;
+  }
+}