@lancom/shared 0.0.62 → 0.0.66

package/components/the_changes_saved_indicator/the-changes-saved-indicator.scss

@@ -0,0 +1,60 @@
+@import "@/assets/scss/variables";
+
+.TheChangesSavedIndicator {
+  &__wrapper {
+    position: fixed;
+    right: 0;
+    top: $navbar_height;
+    background-color: $green;
+    box-shadow: $elevation2;
+    padding: 8px;
+    border-radius: 0 0 0 8px;
+    display: flex;
+    align-items: center;
+    color: $white_high_emphasis;
+    z-index: 110;
+
+    @media (max-width: $bp-small-max) {
+      top: 0;
+    }
+
+    &-enter,
+    &-leave-to#{&}-leave-active {
+      transform: translate3d(100%, 0, 0);
+      opacity: 0;
+    }
+    &-leave,
+    &-enter-to#{&}-enter-active {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+
+  &__icons {
+    width: 1.25em;
+    margin-right: 6px;
+    position: relative;
+  }
+
+  &__icon {
+    fill: $white_high_emphasis;
+    position: absolute;
+    transition: transform .6s ease-in-out .2s;
+
+    &.checkmark {
+      transform: translateY(0);
+    }
+    &.download {
+      transform: translateY(100%);
+    }
+  }
+  &__wrapper-enter &__icon,
+  &__wrapper-enter-to &__icon {
+    &.checkmark {
+      transform: translateY(-100%);
+    }
+    &.download {
+      transform: translateY(0);
+    }
+  }
+}

package/components/the_changes_saved_indicator/the-changes-saved-indicator.vue

@@ -0,0 +1,55 @@
+<template>
+  <transition name="TheChangesSavedIndicator__wrapper">
+    <div
+      v-if="isVisible"
+      class="TheChangesSavedIndicator__wrapper view-transition">
+      <svg
+        id="icons"
+        class="TheChangesSavedIndicator__icons"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 32 32">
+        <path
+          class="TheChangesSavedIndicator__icon download"
+          d="M28 16h-5l-7 7-7-7h-5l-4 8v2h32v-2l-4-8zM0 28h32v2h-32v-2zM18 10v-8h-4v8h-7l9 9 9-9h-7z" />
+        <path
+          class="TheChangesSavedIndicator__icon checkmark"
+          d="M27 4l-15 15-7-7-5 5 12 12 20-20z" />
+      </svg>
+      Changes Saved
+    </div>
+  </transition>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex';
+
+const { mapGetters } = createNamespacedHelpers('product');
+
+export default {
+  name: 'TheTheChangesSavedIndicator',
+  data() {
+    return {
+      isVisible: false
+    };
+  },
+  computed: {
+    ...mapGetters(['layersUpdatesCount'])
+  },
+  watch: {
+    layersUpdatesCount() {
+      if (this.isVisible) {
+        return;
+      }
+      this.isVisible = true;
+      setTimeout(() => {
+        this.isVisible = false;
+      }, 2000);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'the-changes-saved-indicator';
+</style>

package/components/the_footer/the-footer.scss

@@ -0,0 +1,96 @@
+@import "@/assets/scss/variables";
+@import "@lancom/shared/assets/scss/ui_kit";
+
+.TheFooter {
+  &__wrapper {
+    width: 100%;
+    background-color: $light_gray;
+    padding: 45px env(safe-area-inset-right) 45px env(safe-area-inset-left);
+
+    @media (max-width: $bp-small-max) {
+      padding-bottom: 123px;
+    }
+  }
+  &__container {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  &__col {
+    &--left, &--center, &--right {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+    
+    &--left { align-items: flex-start; }
+    &--center { align-items: center; }
+    &--right { align-items: flex-end; }
+
+    @media (max-width: $bp-extra-small-max) {
+      &--left,
+      &--right {
+        align-items: center;
+      }
+    }
+  }
+  &__logo {
+    height: 40px;
+    margin-bottom: 16px;
+  }
+  &__payment-methods {
+    &-label {
+      line-height: 27px;
+      color: #494D53;
+    }
+    &-entities {
+      margin-top: 8px;
+      display: grid;
+      grid-template-columns: repeat(6, 45px);
+      grid-template-rows: 30px;
+      grid-column-gap: 6px;
+      & > img {
+        height: 100%;
+      }
+    }
+  }
+  &__nav {
+    &-wrapper {
+      display: flex;
+    }
+    text-align: center;
+    &:first-of-type {
+      text-align: left;
+    }
+    &:last-of-type {
+      text-align: right;
+    }
+    &:not(:first-of-type) {
+      margin-left: 32px;
+    }
+    &:not(:last-of-type) {
+      margin-right: 32px;
+    }
+    &-item {
+      font-weight: 500;
+      letter-spacing: 0.02em;
+      line-height: 46px;
+      cursor: pointer;
+      text-decoration: none;
+      color: $dark_blue;
+      &:hover, &.active {
+        color: $purple;
+      }
+    }
+  }
+  &__copyright {
+    display: flex;
+    flex-direction: column;
+    text-align: right;
+    margin-top: 26px;
+    line-height: 27px;
+    color: $gray;
+  }
+}

package/components/the_footer/the-footer.vue

@@ -0,0 +1,86 @@
+<template>
+  <footer class="TheFooter__wrapper">
+    <div class="content-inner extra TheFooter__container">
+      <div class="row">
+        <div class="col-sm-4 col-12">
+          <div class="TheFooter__col--left">
+            <nuxt-link to="/">
+              <img
+                class="TheFooter__logo"
+                src="~static/images/logo.svg" />
+            </nuxt-link>
+            <div class="TheFooter__payment-methods">
+              <span class="TheFooter__payment-methods-label">
+                Payment methods we accept:
+              </span>
+              <div class="TheFooter__payment-methods-entities">
+                <img src="~static/images/visa.svg" />
+                <img src="~static/images/mastercard.svg" />
+                <img src="~static/images/maestro.svg" />
+                <img src="~static/images/paypal.svg" />
+                <img src="~static/images/jcb.svg" />
+                <img src="~static/images/american-express.svg" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-4 col-12">
+          <div class="TheFooter__col--center">
+            <div class="TheFooter__nav-wrapper">
+              <ul class="TheFooter__nav">
+                <li>
+                  <nuxt-link
+                    to="/pricing"
+                    active-class="active"
+                    class="TheFooter__nav-item">
+                    Pricing
+                  </nuxt-link>
+                </li>
+              </ul>
+              <ul class="TheFooter__nav">
+                <li>
+                  <nuxt-link
+                    to="/faq"
+                    active-class="active"
+                    class="TheFooter__nav-item">
+                    FAQ
+                  </nuxt-link>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-4 col-12">
+          <div class="TheFooter__col--right">
+            <btn
+              btn-class="purple"
+              btn-label="Contact Us"
+              @onclick="contactUs">
+            </btn>
+            <div class="TheFooter__copyright">
+              <span>SimleTee 2020.</span>
+              <span>&copy; All rights reserved.</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+import ContactUs from '@lancom/shared/components/asides/contact_us/contact-us';
+
+export default {
+  name: 'TheFooter',
+  methods: {
+    contactUs() {
+      this.$aside.show(ContactUs);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'the-footer';
+</style>

package/components/the_navbar/the-navbar.scss

@@ -0,0 +1,43 @@
+@import "@/assets/scss/variables";
+
+.TheNavbar {
+  &__wrapper {
+    height: $navbar_height;
+    background-color: #FFFFFF;
+    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.04);
+    padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 101;
+    @media (max-width: $bp-small-max) {
+      height: $mobile_navbar_height;
+    }
+    &.has-notification {
+      height: $navbar_height + $notification_bar_height;
+      @media (max-width: $bp-small-max) {
+        height: $mobile_navbar_height + $mobile_notification_bar_height;
+      }
+    }
+  }
+  &__notification {
+    background-color: $black;
+    color: white;
+    padding: 12px 0;
+    text-align: center;
+    position: relative;
+    &-close {
+      position: absolute;
+      right: 20px;
+      cursor: pointer;
+      color: $black;
+    }
+  }
+  &__container {
+    margin-top: 11px;
+    @media (max-width: $bp-small-max) {
+      margin-top: -10px;
+    }
+  }
+}

package/components/the_navbar/the-navbar.vue

@@ -0,0 +1,45 @@
+<template>
+  <header
+    class="TheNavbar__wrapper"
+    :class="{
+      'has-notification': notificationBar.enabled
+    }">
+    <client-only>
+      <div
+        v-if="notificationBar.enabled"
+        class="TheNavbar__notification lc_regular12"
+        :style="{
+          'background-color': notificationBar.backgroundColor,
+          color: notificationBar.textColor
+        }">
+        <span v-html="notificationBar.text"></span>
+        <span
+          class="TheNavbar__notification-close"
+          @click="closeNotification()">
+          <i class="icon-close-r"></i>
+        </span>
+      </div>
+    </client-only>
+    <nav class="TheNavbar__container">
+      <slot></slot>
+    </nav>
+  </header>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  name: 'LancomTheNavbar',
+  computed: {
+    ...mapGetters(['notificationBar'])
+  },
+  methods: {
+    ...mapActions(['closeNotification'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'the-navbar';
+</style>

package/middleware/notAuthenticated.js

@@ -0,0 +1,5 @@
+export default function ({ store, redirect }) {
+  if (store.state.auth.token) {
+    return redirect('/');
+  }
+}

package/middleware/page-info.js

@@ -0,0 +1,11 @@
+export default async function ({ store, route }) {
+  const matchedRoute = route.matched[route.matched.length - 1];
+  if (matchedRoute) {
+    const path = matchedRoute.path.replace(/\?/g, '');
+    const data = {
+      shop: store.getters.shop._id,
+      route: path || '/'
+    };
+    await store.dispatch('page/fetchRouteInfo', data);
+  }
+}

package/middleware/setVH.js

@@ -0,0 +1,11 @@
+import debounce from 'lodash.debounce';
+
+if (process.client) {
+  const setVH = () => {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+  };
+  setVH();
+  const debouncedSetVH = debounce(setVH, 350);
+  window.addEventListener('resize', debouncedSetVH);
+}

package/mixins/confirm.js

@@ -0,0 +1,39 @@
+import ConfirmationModal from '@lancom/shared/components/modals/confirmation_modal/confirmation-modal';
+
+const confirmModal = {
+  data() {
+    return {};
+  },
+  methods: {
+    showConfirmationModal(body, { submitLabel, cancelLabel } = {}) {
+      let confirmed = false;
+      return new Promise(resolve => {
+        this.$modal.show(
+          ConfirmationModal,
+          {
+            body,
+            submitLabel,
+            cancelLabel,
+            confirm: () => (confirmed = true)
+          },
+          {
+            name: 'confirmation-modal',
+            root: this.$root,
+            width: 360,
+            height: 'auto',
+            adaptive: true,
+            clickToClose: false,
+            transition: 'from-top-to-bottom'
+          },
+          {
+            closed: () => {
+              resolve(confirmed);
+            }
+          }
+        );
+      });
+    }
+  }
+};
+
+export default confirmModal;

package/mixins/meta-info.js

@@ -0,0 +1,93 @@
+import { mapGetters } from 'vuex';
+
+const metaInfo = {
+  data() {
+    return {
+      pageItem: null
+    };
+  },
+  computed: {
+    ...mapGetters('page', ['routeInfo'])
+  },
+  methods: {
+    generateTitleFromRoute() {
+      return this.$route.path
+        .split('/')
+        .filter(t => !!t)
+        .map(this.capitalizeFirstLetter)
+        .join(' | ');
+    },
+    capitalizeFirstLetter(text = '') {
+      return text.charAt(0).toUpperCase() + text.slice(1);
+    },
+    fillWithItemData(text = '') {
+      const itemTitle = this.pageItem ? (this.pageItem.name || this.pageItem.title) : '';
+      return text.replace(/{{itemTitle}}/g, itemTitle);
+    }
+  },
+  head() {
+    const { title, short_text: shortText, image, meta = {} } = this.routeInfo || {};
+    const pageItemMeta = this.pageItem?.meta || {};
+
+    const pageTitle = this.fillWithItemData(pageItemMeta.title || meta.title || title || this.generateTitleFromRoute());
+
+    const metaTags = [{
+      hid: 'og:title',
+      property: 'og:title',
+      content: pageTitle
+    }];
+
+    const pageDescription = this.fillWithItemData(pageItemMeta.description || meta.description || shortText);
+    if (pageDescription) {
+      metaTags.push({
+        hid: 'description',
+        name: 'description',
+        content: pageDescription
+      });
+      metaTags.push({
+        hid: 'og:description',
+        property: 'og:description',
+        content: pageDescription
+      });
+    }
+
+    const pageKeywords = pageItemMeta.keywords || meta.keywords;
+    if (pageKeywords) {
+      metaTags.push({
+        hid: 'keywords',
+        name: 'keywords',
+        content: this.fillWithItemData(pageKeywords)
+      });
+    }
+
+    const pageImage = this.pageItem?.image || (this.pageItem?.images && this.pageItem?.images[0]) || image;
+    if (pageImage) {
+      metaTags.push({
+        hid: 'og:image',
+        property: 'og:image',
+        content: typeof pageImage === 'string' ? pageImage : (pageImage.medium || pageImage.large)
+      });
+    }
+
+    const pageTags = pageItemMeta?.tags?.length > 0 ? pageItemMeta.tags : meta.tags;
+    if (pageTags) {
+      pageTags.forEach(tag => {
+        metaTags.push({
+          hid: tag.property,
+          property: tag.property,
+          content: this.fillWithItemData(tag.content)
+        });
+      });
+    }
+
+    return {
+      title: pageTitle,
+      meta: metaTags
+    };
+  },
+  getRoute() {
+    return this.$route.path;
+  }
+};
+
+export default metaInfo;

package/mixins/modals.js

@@ -0,0 +1,117 @@
+import CartModal from '@lancom/shared/components/modals/cart_modal/cart-modal';
+import OrderModal from '@lancom/shared/components/modals/order_modal/order-modal';
+import PaymentModal from '@lancom/shared/components/modals/payment_modal/payment-modal';
+import LayersTemplatesModal from '@lancom/shared/components/modals/editor_layers_templates/editor-layers-templates';
+
+const modals = {
+  data() {
+    return {
+      switchModalTo: null,
+      openedModal: null,
+      openModalRef: null,
+      onclose: null
+    };
+  },
+  methods: {
+    switchModal(name) {
+      this.switchModalTo = name;
+      this.$modal.hide(this.openedModal);
+    },
+    handleModalClosed() {
+      this.openedModal = null;
+
+      if (!!this.onclose && !!this.onclose.call && !this.switchModalTo) {
+        this.onclose();
+        this.onclose = null;
+      }
+
+      if (this.switchModalTo && this[this.switchModalTo]) {
+        this[this.switchModalTo]();
+        this.switchModalTo = null;
+      }
+    },
+    showCartModal(onclose) {
+      this.openedModal = 'cart-modal';
+      this.onclose = onclose;
+      this.$modal.show(
+        CartModal,
+        {
+          switchModal: this.switchModal
+        },
+        {
+          name: 'cart-modal',
+          root: this.$root,
+          width: 640,
+          height: 'auto',
+          adaptive: true,
+          clickToClose: true,
+          transition: 'from-right-to-left'
+        },
+        {
+          closed: this.handleModalClosed
+        }
+      );
+    },
+    showOrderModal() {
+      this.openedModal = 'order-modal';
+      this.$modal.show(
+        OrderModal,
+        {
+          switchModal: this.switchModal
+        },
+        {
+          name: 'order-modal',
+          root: this.$root,
+          width: 640,
+          height: 'auto',
+          adaptive: true,
+          clickToClose: true,
+          transition: 'from-right-to-left'
+        },
+        {
+          closed: this.handleModalClosed
+        }
+      );
+    },
+    showPaymentModal() {
+      this.openedModal = 'payment-modal';
+      this.$modal.show(
+        PaymentModal,
+        {
+          switchModal: this.switchModal,
+          onSuccessPayment: () => {
+            this.onclose = null;
+          }
+        },
+        {
+          name: 'payment-modal',
+          root: this.$root,
+          width: 640,
+          height: 'auto',
+          adaptive: true,
+          clickToClose: false,
+          transition: 'from-right-to-left'
+        },
+        {
+          closed: this.handleModalClosed
+        }
+      );
+    },
+    openPrintTemplates() {
+      this.$modal.show(
+        LayersTemplatesModal,
+        {},
+        {
+          name: 'layers-templates-modal',
+          root: this.$root,
+          width: 900,
+          height: 'auto',
+          adaptive: true,
+          transition: 'from-top-to-bottom'
+        }
+      );
+    }
+  }
+};
+
+export default modals;