@lancom/shared 0.0.62 → 0.0.66

package/assets/scss/variables/_theme.scss

@@ -0,0 +1,73 @@
+// theme variables
+
+// Layouts
+$navbar_height: 88px !default;
+$notification_bar_height: 40px !default;
+$mobile_navbar_height: 50px !default;
+$mobile_notification_bar_height: 40px !default;
+// Scrollbar
+$scrollbar_width: 6px;
+
+// Colors
+$black_high_emphasis: #000000;
+$black_medium_emphasis: rgba(0, 0, 0, .66);
+$white_high_emphasis: #FFFFFF;
+$white_medium_emphasis: rgba(255, 255, 255, .66);
+$gray: #575872 !default;
+$medium_gray: #B0B0BA !default;
+$light_gray: #F9F9FC !default;
+$link: #5D89A9;
+$error: #E44868;
+$secondary_900: #20303C;
+$secondary_800: #324B5D;
+$secondary_700: #3D5D74;
+$secondary_600: #4F7895;
+$secondary_500: #5D89A9;
+$secondary_400: #7EA1BB;
+$secondary_300: #A0B9CC;
+$secondary_200: #C1D2DE;
+$secondary_100: #D7E2EA;
+$secondary_50: #EDF2F6;
+$primary_900: #2A340E;
+$primary_800: #4B5C19;
+$primary_700: #617621;
+$primary_600: #819E2C;
+$primary_500: #97B933;
+$primary_400: #A9CB43;
+$primary_300: #BBD66B;
+$primary_200: #C1DA78;
+$primary_100: #D9E8AD;
+$primary_50: #ECF3D5;
+
+$green: #38C88D !default;
+$green_lighter: rgba(56, 200, 141, 0.3);
+$green_darker: #1FBB7B !default;
+$purple: #7D6AEF;
+$purple_lighter: rgba(127, 107, 239, 0.3);
+$purple_darker: #6D57EB;
+$dark_blue: #343750;
+
+// new color schema
+$black: #343750 !default;
+$gray_main: #616277 !default;
+$grey_1: #616277 !default;
+$grey_2: #B0B0BA !default;
+$grey_3: #EFF1F2 !default;
+$grey_4: #F9F9FC !default;
+$grey_5: #9898A5 !default;
+
+$white: #fff;
+
+// Elevations
+$elevation0: none;
+$elevation1: 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.12), 0px 0px 2px rgba(0, 0, 0, 0.14);
+$elevation2: 0px 1px 5px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
+$elevation3: 0px 1px 8px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 3px 3px rgba(0, 0, 0, 0.14);
+$elevation4: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
+$elevation6: 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 6px 10px rgba(0, 0, 0, 0.14);
+$elevation8: 0px 4px 5px rgba(0, 0, 0, 0.2), 0px 3px 14px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.14);
+$elevation9: 0px 5px 6px rgba(0, 0, 0, 0.2), 0px 3px 16px rgba(0, 0, 0, 0.12), 0px 9px 12px rgba(0, 0, 0, 0.14);
+$elevation12: 0px 7px 8px rgba(0, 0, 0, 0.2), 0px 5px 22px rgba(0, 0, 0, 0.12), 0px 12px 17px rgba(0, 0, 0, 0.14);
+$elevation16: 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14);
+$elevation24: 0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14);
+$elevation_reverse: 0px 1px 5px rgba(0, 0, 0, 0.2), 0px -3px 4px rgba(0, 0, 0, 0.12), 0px -2px 4px rgba(0, 0, 0, 0.14);

package/components/asides/contact_us/contact-us.scss

@@ -0,0 +1,68 @@
+@import "@/assets/scss/variables";
+
+.ContactUs {
+  &__wrapper {
+    padding: 12px 0 32px 0;
+    max-width: 470px;
+    width: 100%;
+  }
+  &__content {
+    margin-top: 32px;
+  }
+  &__title {
+    font-weight: bold;
+    font-size: 35px;
+    line-height: 140%;
+    letter-spacing: 0.02em;
+    display: flex;
+    flex-direction: column;
+    color: $dark_blue;
+    @media (max-width: $bp-extra-small-max) {
+      font-size: 25px;
+    }
+  }
+  &__contacts {
+    margin-top: 46px;
+    &-row {
+      display: flex;
+      @media (max-width: $bp-extra-small-max) {
+        flex-direction: column;
+      }
+      & + & {
+        margin-top: 18px;
+      }
+    }
+    &-entity {
+      padding-left: 28px;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      & + & {
+        margin-left: 22px;
+        @media (max-width: $bp-extra-small-max) {
+          margin-left: 0px;
+          margin-top: 22px;
+        }
+      }
+      &-icon {
+        font-size: 18px;
+        color: $purple;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+      &-label {
+        line-height: 27px;
+        color: $gray;
+      }
+      &-value {
+        font-size: 18px;
+        line-height: 29px;
+        letter-spacing: 0.02em;
+        color: $dark_blue;
+        text-decoration: none;
+      }
+    }
+  }
+}

package/components/asides/contact_us/contact-us.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="ContactUs__wrapper">
+    <h3 class="lc_h3 ContactUs__title">
+      <span>You've Got Questions?</span>
+      <span>We've Got Answers.</span>
+    </h3>
+    <validation-observer
+      v-slot="{ invalid, handleSubmit }"
+      tag="form"
+      class="ContactUs__content">
+      <validation-provider
+        v-slot="{ errors }"
+        tag="div"
+        name="Name"
+        rules="required"
+        class="form-row">
+        <input
+          id="name"
+          ref="name"
+          v-model="form.name"
+          name="name"
+          type="text"
+          class="form-field"
+          :class="{
+            'is-danger': errors.length,
+            filled: form.name
+          }"
+          @keyup.enter="$refs.email.focus()" />
+        <label
+          for="name"
+          class="form-label label-inner">
+          Name
+        </label>
+        <span
+          v-if="errors.length"
+          class="form-help is-danger">
+          {{ errors[0] }}
+        </span>
+      </validation-provider>
+      <validation-provider
+        v-slot="{ errors }"
+        tag="div"
+        name="Email"
+        rules="required|email"
+        class="form-row">
+        <input
+          id="c-email"
+          ref="email"
+          v-model="form.email"
+          name="email"
+          type="email"
+          class="form-field"
+          :class="{
+            'is-danger': errors.length,
+            filled: form.email
+          }"
+          @keyup.enter="$refs.phone.focus()" />
+        <label
+          for="c-email"
+          class="form-label label-inner">
+          Email
+        </label>
+        <span
+          v-if="errors.length"
+          class="form-help is-danger">
+          {{ errors[0] }}
+        </span>
+      </validation-provider>
+      <validation-provider
+        v-slot="{ errors }"
+        tag="div"
+        name="Phone"
+        rules="required|phone"
+        class="form-row">
+        <input
+          id="phone"
+          ref="phone"
+          v-model="form.phone"
+          name="phone"
+          type="phone"
+          class="form-field"
+          :class="{
+            'is-danger': errors.length,
+            filled: form.phone
+          }"
+          @keyup.enter="$refs.phone.focus()" />
+        <label
+          for="phone"
+          class="form-label label-inner">
+          Phone number
+        </label>
+        <span
+          v-if="errors.length"
+          class="form-help is-danger">
+          {{ errors[0] }}
+        </span>
+      </validation-provider>
+      <validation-provider
+        v-slot="{ errors }"
+        tag="div"
+        name="Message"
+        rules="required|max:1024"
+        class="form-row">
+        <textarea
+          id="body"
+          ref="body"
+          v-model="form.body"
+          name="body"
+          class="form-textarea--size3"
+          :class="{
+            'is-danger': errors.length,
+            filled: form.body
+          }">
+        </textarea>
+        <label
+          for="body"
+          class="form-label label-inner">
+          Message
+        </label>
+        <span
+          v-if="errors.length"
+          class="form-help is-danger">
+          {{ errors[0] }}
+        </span>
+      </validation-provider>
+      <div class="form-actions full">
+        <btn
+          btn-class="purple"
+          :btn-disabled="invalid || processing"
+          :btn-processing="processing"
+          btn-label="Contact Us"
+          @onclick="handleSubmit(submit)">
+        </btn>
+      </div>
+      <div class="ContactUs__contacts">
+        <div class="ContactUs__contacts-row">
+          <div class="ContactUs__contacts-entity">
+            <i class="icon-location ContactUs__contacts-entity-icon"></i>
+            <span class="ContactUs__contacts-entity-label">
+              By Appointment only, Warehouse:
+            </span>
+            <span class="ContactUs__contacts-entity-value">
+              {{ contacts.address }}
+            </span>
+          </div>
+        </div>
+        <div class="ContactUs__contacts-row">
+          <div class="ContactUs__contacts-entity">
+            <i class="icon-mail-alt ContactUs__contacts-entity-icon"></i>
+            <a
+              :href="`mailto:${contacts.email}`"
+              class="ContactUs__contacts-entity-value">
+              {{ contacts.email }}
+            </a>
+          </div>
+          <div class="ContactUs__contacts-entity">
+            <i class="icon-phone ContactUs__contacts-entity-icon"></i>
+            <a
+              :href="`tel:${contacts.phone}`"
+              class="ContactUs__contacts-entity-value">
+              {{ contacts.phone }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </validation-observer>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+
+export default {
+  name: 'ContactUs',
+  data() {
+    return {
+      form: {},
+      processing: false
+    };
+  },
+  computed: {
+    ...mapGetters(['contacts', 'shop'])
+  },
+  methods: {
+    async submit() {
+      try {
+        this.processing = true;
+        const recaptchaToken = await this.getRecaptcha('contact_us');
+        const body = {
+          recaptchaToken,
+          ...this.form
+        };
+        const response = await api.contactUs(body, this.shop._id);
+        this.$toastr.s(`Thank you for getting in touch! Your Code is: ${response.code}`);
+        this.$emit('close');
+      } catch (error) {
+        this.$toastr.e(error);
+      } finally {
+        this.processing = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'contact-us.scss';
+</style>

package/components/asides/menu/menu.scss

@@ -0,0 +1,23 @@
+@import "@/assets/scss/variables";
+
+.Menu {
+  &__wrapper {
+    padding: 12px 0 32px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  &__content {
+    margin-top: 32px;
+  }
+  &__item {
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 32px;
+    line-height: 48px;
+    letter-spacing: 0.02em;
+    cursor: pointer;
+    color: $dark_blue;
+    padding: 6px 0;
+  }
+}

package/components/asides/menu/menu.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="Menu__wrapper">
+    <div
+      class="Menu__item"
+      @click="goTo('/')">
+      Editor
+    </div>
+    <div
+      class="Menu__item"
+      @click="goTo('/products')">
+      Products
+    </div>
+    <div
+      class="Menu__item"
+      @click="goTo('/pricing')">
+      Pricing
+    </div>
+    <div
+      class="Menu__item"
+      @click="goTo('/news')">
+      News
+    </div>
+    <div
+      class="Menu__item"
+      @click="goTo('/faq')">
+      FAQ
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Menu',
+
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+      this.$emit('close');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'menu.scss';
+</style>

package/components/asides/offer_screen_printing/offer-screen-printing.scss

@@ -0,0 +1,68 @@
+@import "@/assets/scss/variables";
+
+.OfferScreenPrinting {
+  &__wrapper {
+    padding: 12px 0 32px 0;
+    max-width: 470px;
+    width: 100%;
+  }
+  &__content {
+    margin-top: 32px;
+  }
+  &__title {
+    font-weight: bold;
+    font-size: 35px;
+    line-height: 140%;
+    letter-spacing: 0.02em;
+    display: flex;
+    flex-direction: column;
+    color: $dark_blue;
+  }
+  &__contacts {
+    margin-top: 46px;
+    &-row {
+      display: flex;
+      & + & {
+        margin-top: 18px;
+      }
+    }
+    &-entity {
+      padding-left: 28px;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      & + & {
+        margin-left: 22px;
+      }
+      &-icon {
+        font-size: 18px;
+        color: $purple;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+      &-label {
+        line-height: 27px;
+        color: $gray;
+      }
+      &-value {
+        font-size: 18px;
+        line-height: 29px;
+        letter-spacing: 0.02em;
+        color: $dark_blue;
+        text-decoration: none;
+      }
+    }
+  }
+  &__thumbnails {
+    margin: 25px 0;
+  }
+  &__thumbnail {
+    text-align: center;
+    img {
+      width: 150px;
+      border: 1px solid #eaeaea;
+    }
+  }
+}

package/components/asides/offer_screen_printing/offer-screen-printing.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="OfferScreenPrinting__wrapper">
+    <h3 class="OfferScreenPrinting__title">
+      <span class="lc_h3 lc_black mb-10">You may be eligible to better pricing via screen printing</span>
+      <span class="lc_regular14">Screen printing offers more competitive pricing for orders of 125 or more and designs that have up to 9 colours(Though a setup fee applies). To see if your design meets the criteria, fill in the form and we will contact you after reviewing your design</span>
+    </h3>
+    <validation-observer
+      v-slot="{ invalid, handleSubmit }"
+      tag="form"
+      class="OfferScreenPrinting__content">
+      <validation-provider
+        v-slot="{ errors }"
+        tag="div"
+        name="Name"
+        rules="required"
+        class="form-row">
+        <input
+          id="name"
+          ref="name"
+          v-model="form.name"
+          name="name"
+          type="text"
+          class="form-field"
+          :class="{
+            'is-danger': errors.length,
+            filled: form.name
+          }"
+          @keyup.enter="$refs.email.focus()" />
+        <label
+          for="name"
+          class="form-label label-inner">
+          Name
+        </label>
+        <span
+          v-if="errors.length"
+          class="form-help is-danger">
+          {{ errors[0] }}
+        </span>
+      </validation-provider>
+      <validation-provider
+        v-slot="{ errors }"
+        tag="div"
+        name="Email"
+        rules="required|email"
+        class="form-row">
+        <input
+          id="email"
+          ref="email"
+          v-model="form.email"
+          name="email"
+          type="email"
+          class="form-field"
+          :class="{
+            'is-danger': errors.length,
+            filled: form.email
+          }"
+          @keyup.enter="$refs.phone.focus()" />
+        <label
+          for="email"
+          class="form-label label-inner">
+          Email
+        </label>
+        <span
+          v-if="errors.length"
+          class="form-help is-danger">
+          {{ errors[0] }}
+        </span>
+      </validation-provider>
+      <validation-provider
+        v-slot="{ errors }"
+        tag="div"
+        name="Phone"
+        rules="required|phone"
+        class="form-row">
+        <input
+          id="phone"
+          ref="phone"
+          v-model="form.phone"
+          name="phone"
+          type="phone"
+          class="form-field"
+          :class="{
+            'is-danger': errors.length,
+            filled: form.phone
+          }"
+          @keyup.enter="$refs.phone.focus()" />
+        <label
+          for="phone"
+          class="form-label label-inner">
+          Phone number
+        </label>
+        <span
+          v-if="errors.length"
+          class="form-help is-danger">
+          {{ errors[0] }}
+        </span>
+      </validation-provider>
+      <validation-provider
+        v-slot="{ errors }"
+        tag="div"
+        name="Message"
+        rules="required|max:1024"
+        class="form-row">
+        <textarea
+          id="body"
+          ref="body"
+          v-model="form.body"
+          name="body"
+          class="form-textarea--size3"
+          :class="{
+            'is-danger': errors.length,
+            filled: form.body
+          }">
+        </textarea>
+        <label
+          for="body"
+          class="form-label label-inner">
+          Message
+        </label>
+        <span
+          v-if="errors.length"
+          class="form-help is-danger">
+          {{ errors[0] }}
+        </span>
+      </validation-provider>
+      <div class="form-actions full">
+        <btn
+          btn-class="purple"
+          :btn-disabled="invalid || processing"
+          :btn-processing="processing"
+          btn-label="Send Design for quote"
+          @onclick="handleSubmit(submit)">
+        </btn>
+      </div>
+    </validation-observer>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+import { side } from '@lancom/shared/assets/js/utils/filters';
+import { generateCartProducts } from '@lancom/shared/assets/js/utils/product';
+import { populateProductsFields } from '@lancom/shared/assets/js/utils/order';
+
+export default {
+  name: 'OfferScreenPrinting',
+  filters: {
+    side
+  },
+  data() {
+    return {
+      form: {},
+      processing: false
+    };
+  },
+  computed: {
+    ...mapGetters(['contacts', 'shop']),
+    ...mapGetters('layers', [
+      'layerThumbnails'
+    ]),
+    ...mapGetters('product', [
+      'product',
+      'layers',
+      'usedSimpleProducts',
+      'selectedPrintAreas',
+      'editorSize',
+      'productPricing',
+      'printsPricing'
+    ])
+  },
+  methods: {
+    async submit() {
+      try {
+        this.processing = true;
+        const recaptchaToken = await this.getRecaptcha('offer_screen_printing');
+        const products = generateCartProducts(this.product, this.layers, this.usedSimpleProducts, this.layerThumbnails, this.selectedPrintAreas, this.editorSize, this.printsPricing);
+        populateProductsFields(products);
+        const body = {
+          recaptchaToken,
+          ...this.form,
+          products,
+          shop: this.shop._id,
+          price: await api.calculateProductPrice({ products, screenPrint: true }, this.shop._id)
+        };
+        await api.screenPrintingQuote(body, this.shop._id);
+        this.$toastr.s('We will review your design and advise if we can screen print you design and offer better pricing');
+        this.$emit('close');
+      } catch (error) {
+        this.$toastr.e(error);
+      } finally {
+        this.processing = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'offer-screen-printing.scss';
+</style>