@lancom/shared 0.0.62 → 0.0.66

package/components/quotes/quote_view/quote_product_prints/quote_product_print/quote-product-print.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="QuoteProductPrint__wrapper">
+    <tr>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">Print Type</span>
+        {{ print.printType.name }}
+      </td>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">Location</span>
+        {{ print.printArea.name }}
+      </td>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">Size</span>
+        {{ print.printSize.name }}
+      </td>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">Setup cost</span>
+        {{ print.setupCost | price }}
+      </td>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">QTY</span>
+        {{ amount }}
+      </td>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">Price</span>
+        {{ print.printCost | price }}
+      </td>
+      <td class="lc_body-small">
+        <span class="hidden-md-and-up">Total</span>
+        <strong>
+          {{ total | price }}
+        </strong>
+      </td>
+    </tr>
+  </div>
+</template>
+
+<script>
+import { price } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'QuoteProductPrint',
+  filters: {
+    price
+  },
+  props: {
+    entity: {
+      type: Object,
+      required: true
+    },
+    print: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    simpleProducts() {
+      return (this.entity.simpleProducts || []).filter(sp => sp.amount > 0);
+    },
+    amount() {
+      return this.simpleProducts.reduce((sum, { amount }) => sum + amount, 0);
+    },
+    printCost() {
+      return this.print.printCost || 0;
+    },
+    setupCost() {
+      return this.print.setupCost || 0;
+    },
+    total() {
+      return this.amount * this.printCost + this.setupCost;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'quote-product-print.scss';
+</style>

package/components/quotes/quote_view/quote_view_product/quote-view-product.scss

@@ -0,0 +1,29 @@
+.QuoteViewProduct {
+  &__simple-products {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    &-labels {
+      margin-right: 26px;
+    }
+  }
+  &__features {
+    margin-top: 4px;
+    padding-bottom: 4px;
+    display: flex;
+  }
+  &__feature {
+    margin-right: 19px;
+    display: flex;
+    &>div:first-child {
+      margin-right: 6px;
+    }
+  }
+  &__decorations {
+    margin-bottom: 20px;
+  }
+  &__subtotal {
+    text-align: right;
+  }
+}

package/components/quotes/quote_view/quote_view_product/quote-view-product.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="QuoteViewProduct__wrapper">
+    <div class="QuoteViewProduct__info">
+      <div
+        v-if="product.isCustom"
+        class="lc_title">
+        {{ product.SKU }}
+      </div>
+      <nuxt-link
+        v-else
+        class="QuoteViewProduct__link lc_title"
+        :to="productLink">
+        {{ product.product.name }}
+      </nuxt-link>
+      <div
+        v-if="!product.isCustom"
+        class="QuoteViewProduct__features">
+        <div class="QuoteViewProduct__feature">
+          <div class="lc_title-small">
+            SKU:
+          </div>
+          <div class="lc_body-small">
+            {{ product.product.SKU }}
+          </div>
+        </div>
+      </div>
+      <div v-if="product.isCustom">
+        <div class="QuoteViewProduct__feature">
+          <div class="lc_title-small">
+            QTY:
+          </div>
+          <div class="lc_body-small">
+            {{ amount }}
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <quote-product-color-simple-products
+          v-for="[groupKey, group] in groupedProducts"
+          :key="groupKey"
+          :entity="product"
+          :group="group"
+          :default-preview="groupedProducts.size === 1"
+          class="QuoteViewProduct__item" />
+      </div>
+      <div
+        v-if="hasPrints"
+        class="QuoteViewProduct__decorations">
+        <quote-product-prints :entity="product" />
+      </div>
+      <div class="QuoteViewProduct__subtotal lc_title">
+        Subtotal: {{ totalPrice | price }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { price, sizesRange } from '@lancom/shared/assets/js/utils/filters';
+import { groupSimpleProducts } from '@lancom/shared/assets/js/utils/cart';
+import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
+import QuoteProductColorSimpleProducts from './../quote_product_color_simple_products/quote-product-color-simple-products';
+import QuoteProductPrints from './../quote_product_prints/quote-product-prints';
+
+export default {
+  name: 'LancomQuoteViewProduct',
+  components: {
+    QuoteProductColorSimpleProducts,
+    QuoteProductPrints
+  },
+  filters: {
+    price,
+    sizesRange,
+    printLabel(print) {
+      const { printArea, printSize, printType } = print;
+      return `${printType?.name}. ${printArea?.name}. ${printSize?.name}`;
+    }
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    withDivider: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    productLink() {
+      return this.product.product ? generateProductLink(this.product.product) : null;
+    },
+    hasPrints() {
+      return (this.product.prints || []).length > 0;
+    },
+    simpleProducts() {
+      return (this.product.simpleProducts || []).filter(sp => sp.amount > 0);
+    },
+    amount() {
+      return this.simpleProducts.reduce((sum, { amount }) => sum + amount, 0);
+    },
+    SKU() {
+      return this.product.product?.SKU || this.product.SKU;
+    },
+    groupedProducts() {
+      return [...groupSimpleProducts(this.product, !this.product.isCustom, true)].filter(([, g]) => g.amount > 0);
+    },
+    totalPrice() {
+      const printsTotal = (this.product.prints || []).reduce((total, print) => {
+        const { setupCost = 0, printCost = 0 } = print;
+        return total + this.amount * printCost + setupCost;
+      }, 0);
+      const productsTotal = this.simpleProducts.reduce((total, { amount = 0, productCost = 0 }) => total + amount * productCost, 0);
+      return this.amount > 0 ? (printsTotal + productsTotal) : 0;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view-product.scss';
+</style>

package/components/static_page/static-page.scss

@@ -0,0 +1,11 @@
+@import "@lancom/shared/assets/scss/ui_kit";
+
+.StaticPage {
+  &__title {
+    margin-bottom: 30px;
+  }
+  &__content {
+    overflow: hidden;
+    @import "@lancom/shared/assets/scss/normalize";
+  }
+}

package/components/static_page/static-page.vue

@@ -0,0 +1,26 @@
+<template>
+  <article class="StaticPage__wrapper">
+    <h1 class="StaticPage__title lc_h1">
+      {{ item.title }}
+    </h1>
+    <div
+      class="StaticPage__content"
+      v-html="item.text"></div>
+  </article>
+</template>
+
+<script>
+export default {
+  name: 'StaticPage',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'static-page';
+</style>

package/components/subscribe/subscribe.scss

@@ -0,0 +1,23 @@
+@import "@/assets/scss/variables";
+
+.Subscribe {
+    &__wrapper {
+        text-align: center;
+    }
+    &__description {
+        margin-top: 20px;
+        color: $grey_1;
+    }
+    &__form {
+        margin: 40px 60px;
+    }
+    &__btn {
+        flex-grow: 1;
+    }
+    &__success {
+        background-color: $green;
+        color: white;
+        padding: 10px;
+        border-radius: 4px;
+    }
+}

package/components/subscribe/subscribe.vue

@@ -0,0 +1,124 @@
+<template>
+  <div
+    data-aos="aosFadeUp"
+    class="Subscribe__wrapper">
+    <slot name="header">
+      <div class="Subscribe__title lc_h2">
+        Subscribe to our news letter
+      </div>
+    </slot>
+    <slot name="description">
+      <div class="Subscribe__description lc_regular16">
+        Sign up for new product relesses, free design rescurrces, and a chance to win 36 free custom printed shirts.
+      </div>
+    </slot>
+    <div v-if="isSubscribed">
+      <div class="Subscribe__success lc_h3 mt-5">
+        Subscribed successfully
+      </div>
+    </div>
+    <div
+      v-else
+      class="Subscribe__form">
+      <div class="form__wrapper Subscribe__form-wrapper">
+        <validation-observer
+          ref="form"
+          class="Subscribe__form-observer">
+          <div class="form__content mt-10">
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Email"
+              rules="required"
+              class="form-row">
+              <input
+                id="email"
+                ref="email"
+                v-model="subscriber.email"
+                name="email"
+                type="text"
+                class="form-field"
+                :class="{
+                  'is-danger': errors.length,
+                  filled: subscriber.email
+                }" />
+              <label
+                for="email"
+                class="form-label label-inner">
+                Your email address
+              </label>
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+          <div class="form__footer">
+            <div class="form-actions">
+              <btn
+                class="Subscribe__btn"
+                :btn-class="btnClass"
+                :btn-processing="processing"
+                :btn-disabled="processing"
+                btn-label="Subscribe"
+                @onclick="submit()">
+              </btn>
+            </div>
+          </div>
+        </validation-observer>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+
+export default {
+  name: 'Subscribe',
+  props: {
+    btnClass: {
+      type: String,
+      default: 'purple'
+    }
+  },
+  data() {
+    return {
+      subscriber: {
+        email: null
+      },
+      isSubscribed: false,
+      processing: false
+    };
+  },
+  computed: {
+    ...mapGetters(['shop'])
+  },
+  methods: {
+    async submit() {
+      try {
+        this.processing = true;
+        const recaptchaToken = await this.getRecaptcha('subscribe');
+        const body = {
+          recaptchaToken,
+          shop: this.shop._id,
+          ...this.subscriber
+        };
+        await api.subscribe(body, this.shop._id);
+        this.isSubscribed = true;
+        this.subscriber.email = null;
+      } catch (error) {
+        this.$toastr.e(error);
+      } finally {
+        this.processing = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'subscribe';
+</style>

package/components/the_aside/the-aside.scss

@@ -0,0 +1,79 @@
+@import "@/assets/scss/variables";
+
+.TheAside {
+  &__container {
+    width: 680px;
+    max-width: 100vw;
+    position: fixed;
+    right: 0;
+    top: 0;
+    background: #FFF;
+    bottom: 0;
+    // box-shadow: $elevation2;
+    padding: 30px;
+    overflow-y: auto;
+    z-index: 201;
+    transition: transform .16s cubic-bezier(0.23, 1, 0.32, 1);
+    @media (max-width: $bp-small-max) {
+      width: 350px;
+    }
+    @media (max-width: $bp-extra-small-max) {
+      width: 100vw;
+      padding: $mobile_navbar_height 10px 0 10px;
+    }
+    &--withut-padding {
+      padding: 0;
+    }
+  }
+  &__backdrop {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, .3);
+    z-index: 200;
+    transition: opacity .16s cubic-bezier(0.23, 1, 0.32, 1);
+  }
+}
+
+.TheAside__container,
+.TheAside__backdrop {
+  top: $navbar_height;
+  @media (max-width: $bp-small-max) {
+    top: $mobile_navbar_height;
+  }
+}
+.has-notification {
+  .TheAside__container,
+  .TheAside__backdrop {
+    top: $navbar_height + $notification_bar_height;
+    @media (max-width: $bp-small-max) {
+      top: $mobile_navbar_height + $notification_bar_height;
+    }
+  }
+}
+
+.aside {
+  &-enter,
+  &-leave-to#{&}-leave-active {
+    &.TheAside {
+      &__container {
+        transform: translateX(100%);
+      }
+      &__backdrop {
+        opacity: 0;
+      }
+    }
+  }
+  &-leave,
+  &-enter-to#{&}-enter-active {
+    &.TheAside {
+      &__container {
+        transform: translateX(0);
+      }
+      &__backdrop {
+        opacity: 1;
+      }
+    }
+  }
+}

package/components/the_aside/the-aside.vue

@@ -0,0 +1,95 @@
+<template>
+  <transition-group
+    appear
+    name="aside"
+    tag="div"
+    class="TheAside__wrapper">
+    <div
+      v-if="isOpen"
+      key="backdrop"
+      class="TheAside__backdrop"
+      @click="hide">
+    </div>
+    <aside
+      v-if="isOpen"
+      key="container"
+      ref="container"
+      class="TheAside__container custom-scrollbar-container"
+      :class="{
+        'TheAside__container--withut-padding': withoutPadding
+      }"
+      @close="hide">
+      <i
+        v-if="hasClose"
+        class="icon-cancel TheAside__close"
+        @click="hide"></i>
+    </aside>
+  </transition-group>
+</template>
+
+<script>
+import Vue from 'vue';
+
+export default {
+  name: 'TheAside',
+  data() {
+    return {
+      isOpen: false,
+      hasClose: true,
+      withoutPadding: false,
+      onClose: null
+    };
+  },
+  watch: {
+    isOpen() {
+      if (this.isOpen) {
+        document.body.classList.add('v--aside-block-scroll');
+      } else {
+        document.body.classList.remove('v--aside-block-scroll');
+      }
+    }
+  },
+  destroyed() {
+    document.body.classList.remove('v--aside-block-scroll');
+  },
+  mounted() {
+    Vue.prototype.$aside = {
+      show: this.show,
+      hide: this.hide,
+      isOpen: () => this.isOpen
+    };
+  },
+  methods: {
+    show(component, events = {}, params) {
+      const { $el } = new Vue({
+        router: this.$router,
+        store: this.$store,
+        render: h => h(
+          component,
+          {
+            on: { close: this.hide, ...events }
+          }
+        )
+      }).$mount();
+      const {
+        hasClose = true,
+        withoutPadding = false,
+        onClose = Function.prototype
+      } = params || {};
+      this.isOpen = true;
+      this.hasClose = hasClose;
+      this.onClose = onClose;
+      this.withoutPadding = withoutPadding;
+      this.$nextTick(() => this.$refs.container.appendChild($el));
+    },
+    hide() {
+      this.isOpen = false;
+      this.onClose();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'the-aside';
+</style>

package/components/the_breadcrumbs/the-breadcrumbs.scss

@@ -0,0 +1,36 @@
+@import "@/assets/scss/variables";
+
+.TheBreadcrumbs {
+  &__wrapper {
+    position: fixed;
+    top: $navbar_height;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    background-color: $grey_3;
+    color: $grey_1;
+    transition-property: transform, opacity;
+    transition-duration: .22s;
+    transition-timing-function: ease-in-out;
+    transition-delay: .22s;
+    @media (max-width: $bp-extra-small-max) {
+      top: $mobile_navbar_height;
+    }
+  }
+  &__container {
+    display: flex;
+    align-items: center;
+    padding: 20px 0;
+  }
+  &__step {
+    & > * {
+      color: inherit;
+      text-decoration: none;
+    }
+    & + & {
+      &:before {
+        content: '\00a0\002F';
+      }
+    }
+  }
+}

package/components/the_breadcrumbs/the-breadcrumbs.vue

@@ -0,0 +1,78 @@
+<template>
+  <transition
+    appear
+    name="appear-from-top">
+    <nav
+      v-if="crumbs.length"
+      class="TheBreadcrumbs__wrapper view-transition"
+      aria-label="breadcrumbs">
+      <div class="content-inner extra TheBreadcrumbs__container">
+        <div
+          v-for="(item, i) in crumbs"
+          :key="i"
+          class="TheBreadcrumbs__step lc_regular14"
+          :class="item.classes">
+          <nuxt-link
+            v-if="item.path"
+            :to="item.path">
+            {{ item.name }}
+          </nuxt-link>
+          <span v-else>
+            {{ item.name }}
+          </span>
+        </div>
+      </div>
+    </nav>
+  </transition>
+</template>
+
+<script>
+
+export default {
+  name: 'TheBreadcrumbs',
+  data() {
+    return {
+      schema: {
+        'brand-tees-slug': [
+          { name: 'Editor', path: '/' },
+          { name: 'Product' }
+        ]
+      }
+    };
+  },
+  computed: {
+    crumbs() {
+      return this.schema[this.$route.name] || [];
+      //   const crumbs = [];
+      //   this.$route.matched.map((item, i, { length }) => {
+      //     const crumb = {};
+      //     crumb.path = item.path;
+      //     crumb.name = 'route.' + (item.name || item.path);
+
+      //     // is last item?
+      //     if (i === length - 1) {
+      //       // is param route? .../.../:id
+      //       if (item.regex.keys.length > 0) {
+      //         crumbs.push({
+      //           path: item.path.replace(/\/:[^/:]*$/, ''),
+      //           name: 'route.' + item.name.replace(/-[^-]*$/, '')
+      //         });
+      //         crumb.path = this.$route.path;
+      //         crumb.name = this.$i18n.t('route.' + this.$route.name, [
+      //           crumb.path.match(/[^/]*$/)[0]
+      //         ]);
+      //       }
+      //       crumb.classes = 'is-active';
+      //     }
+
+      //     crumbs.push(crumb);
+      //   });
+      //   return crumbs;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'the-breadcrumbs';
+</style>