@lancom/shared 0.0.62 → 0.0.66

package/components/products/products_tags/products-tags.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    v-if="tags.length"
+    class="ProductsTags__wrapper">
+    <div class="ProductsTags__title">
+      Tags
+    </div>
+    <div class="ProductsTags__options">
+      <div
+        v-for="tag in tags"
+        :key="tag.alias"
+        class="ProductsTags__item"
+        :class="{
+          'ProductsTags__item--active': selectedTags.includes(tag.alias)
+        }">
+        <products-link :tags="tag.alias">
+          {{ tag.name }}
+        </products-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
+
+export default {
+  name: 'ProductsTags',
+  components: {
+    ProductsLink
+  },
+  props: {
+    hasSelectedIcon: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters('products', ['tags', 'types']),
+    currentTags() {
+      return this.$route.params.query || [];
+    },
+    selectedTags() {
+      return (this.$route.query.tags || '').split(',');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-tags';
+</style>

package/components/products/products_types/products-types.scss

@@ -0,0 +1,37 @@
+@import "@/assets/scss/variables";
+
+.ProductsTypes {
+  &__header {
+    font-size: 22px;
+    line-height: 20px;
+    font-weight: 600;
+    margin-top: 3px;
+    margin-bottom: 24px;
+  }
+  &__item {
+    margin: 19px 0;
+    font-size: 19px;
+    font-weight: 400;
+    i {
+      font-size: 20px;
+      margin-right: 5px;
+    }
+    a {
+      color: $grey_1;
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+    }
+    &--active a {
+      color: $green;
+    }
+    &-icon {
+      margin-right: 10px;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      width: 20px;
+      height: 20px;
+    }
+  }
+}

package/components/products/products_types/products-types.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="ProductsTypes__wrapper">
+    <toggle-content label="Product type">
+      <div
+        v-for="type in types"
+        :key="type.alias"
+        class="ProductsTypes__item"
+        :class="{
+          'ProductsTypes__item--active': type.alias === currentType
+        }">
+        <nuxt-link
+          :to="`/products${type.alias === currentType ? '' : `/${type.alias}`}`"
+          class="ProductsTypes__more">
+          <checked-icon
+            v-if="hasSelectedIcon"
+            :checked="type.alias === currentType" />
+          <div
+            v-if="hasThumbs && type.icon"
+            class="ProductsTypes__item-icon"
+            :style="{
+              'background-image': `url('${type.icon}')`
+            }"></div>
+          <i
+            v-else-if="hasThumbs"
+            :class="`icon-${type.alias}`"></i>
+          {{ type.name }}
+        </nuxt-link>
+      </div>
+    </toggle-content>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import ToggleContent from '@lancom/shared/components/common/toggle-content';
+import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+
+export default {
+  name: 'ProductsTypes',
+  components: {
+    ToggleContent,
+    CheckedIcon
+  },
+  props: {
+    hasSelectedIcon: {
+      type: Boolean,
+      default: false
+    },
+    hasThumbs: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    ...mapGetters('products', ['types']),
+    currentType() {
+      return this.$route.params.type;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-types';
+</style>

package/components/quotes/quote_request/quote-request.scss

@@ -0,0 +1,146 @@
+@import "@/assets/scss/variables";
+
+.QuoteRequest {
+  &__wrapper {
+    margin: -20px 40px 0 40px;
+    @media (max-width: $bp-extra-small-max) { 
+      margin: -20px 0px 0 0px;
+    }
+  }
+  &__title {
+    font-weight: 800;
+    font-size: 36px;
+    line-height: 49px;
+    text-align: center;
+    text-transform: uppercase;
+    color: $black;
+  }
+  &__info {
+    font-weight: normal;
+    font-size: 18px;
+    line-height: 120%;
+    text-align: center;
+    color: $black;
+    opacity: 0.6;
+    max-width: 457px;
+    margin: 18px auto 0 auto;
+  }
+  &__label {
+    font-style: normal;
+    font-weight: 800;
+    font-size: 18px;
+    line-height: 25px;
+    text-transform: uppercase;
+    color: $black;
+    margin-bottom: 10px;
+  }
+  &__content {
+    // margin-top: 20px;
+    // border-top: 2px solid #F4F4F4;
+    padding-top: 20px;
+  }
+  &__btn {
+    margin-top: 0px;
+  }
+  &__radio-list {
+    display: flex;
+    margin-top: 25px;
+    &-item {
+      margin-right: 30px;
+    }
+    &-label {
+      margin-left: 6px !important;
+    }
+  }
+  &__upload {
+    display: flex;
+    &--uploading {
+      pointer-events: none;
+      opacity: 0.7;
+    }
+    &-btn {
+      font-weight: bold;
+      font-size: 16px;
+      line-height: 22px;
+      text-transform: uppercase;
+      background-color: $green;
+      padding: 8px 14px;
+      &--disabled {
+        background-color: $gray;
+      }
+      &--uploaded {
+        opacity: 0.5;
+      }
+    }
+    &-info {
+      font-size: 12px;
+      line-height: 16px;
+      color: $black;
+      margin-left: 12px;
+    }
+    &-progress {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
+    &-file {
+      margin-top: 5px;
+      font-size: 12px;
+      a {
+        text-decoration: none;
+        color: $black;
+      }
+    }
+  }
+  &__label-with-checkbox {
+    display: flex;
+    align-items: center;
+    padding: 0 10px 8px 0px;
+    cursor: pointer;
+  }
+  &__error {
+    margin-top: 5px;
+    font-size: 12px;
+    color: $error;
+  }
+  &__product-types {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin-top: 20px;
+  }
+  &__product-type {
+    width: 205px;
+    @media (max-width: $bp-extra-small-max) { 
+      width: 100%;
+    }
+  }
+  &__description {
+    height: 140px;
+    width: 100%;
+    padding: 15px;
+    outline: none;
+    &:focus::placeholder {
+      color: transparent !important;
+    }
+  }
+}
+.form-row {
+  margin-bottom: 20px;
+}
+::v-deep .QuoteRequest__content {
+  input[type="date"]::-webkit-calendar-picker-indicator {
+    background: transparent;
+    bottom: 0;
+    color: transparent;
+    cursor: pointer;
+    height: auto;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: auto;
+  }
+}

package/components/quotes/quote_request/quote-request.vue

@@ -0,0 +1,404 @@
+<template>
+  <div class="QuoteRequest__wrapper">
+    <!-- <div class="QuoteRequest__title">
+      Quick Quote
+    </div>
+    <div class="QuoteRequest__info">
+      Fill our the form below and one of our team members will respond with a Quote ASAP!
+    </div> -->
+    <div class="QuoteRequest__content">
+      <validation-observer
+        v-slot="{ invalid, handleSubmit, errors: submittedErrors }"
+        tag="form"
+        class="QuoteRequest__form">
+        <div class="row">
+          <div class="col-sm-6 col-12">
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Full Name"
+              rules="required"
+              class="form-row">
+              <label
+                for="quote-request-full-name"
+                class="form-label">
+                Your name
+              </label>
+              <input
+                id="quote-request-full-name"
+                v-model="quote.address.fullName"
+                name="full-name"
+                placeholder="Name"
+                type="text"
+                class="form-field labelless"
+                :class="{
+                  'is-danger': errors.length,
+                  filled: quote.address.fullName
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Phone"
+              class="form-row">
+              <label
+                for="quote-request-name"
+                class="form-label">
+                Your Phone
+              </label>
+              <input
+                id="quote-request-phone"
+                ref="name"
+                v-model="quote.address.phone"
+                name="phone"
+                placeholder="Phone"
+                type="text"
+                class="form-field labelless"
+                :class="{
+                  'is-danger': errors.length,
+                  filled: quote.address.phone
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Expected Items Quantity"
+              class="form-group form-row">
+              <label
+                for="expected-items-quantity"
+                class="form-label">
+                How many items would you like?
+              </label>
+              <multiselect
+                v-model="quote.expectedItemsQuantity"
+                :multiple="false"
+                :options="expectedItemsQuantities"
+                class="labelless"
+                placeholder="----"
+                :class="{
+                  'is-invalid': errors.length
+                }" />
+              <span
+                v-if="errors.length"
+                class="invalid-feedback">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+            <div class="form-row">
+              <div class="QuoteRequest__label">
+                Upload your logo/artwork
+              </div>
+              <file-uploader
+                :multiple="false"
+                :url="`image/editor/${shop._id}/undefined`"
+                :has-conversion-error-modal="false"
+                :show-error-message="false"
+                @onchange="handleUploadChange"
+                @onerror="handleUploadError"
+                @onuploaded="handleUploaded">
+                <template v-slot:toggle="{ uploading }">
+                  <div
+                    class="QuoteRequest__upload"
+                    :class="{
+                      'QuoteRequest__upload--uploading': uploading
+                    }">
+                    <div
+                      class="QuoteRequest__upload-btn"
+                      :class="{
+                        'QuoteRequest__upload-btn--disabled': uploading,
+                        'QuoteRequest__upload-btn--uploaded': quote.file
+                      }">
+                      Upload
+                    </div>
+                    <div class="QuoteRequest__upload-info">
+                      <div>Note: accepted file types:</div>
+                      <div><b>JPEG / PNG / AI / EPS / PDF</b></div>
+                    </div>
+                  </div>
+                </template>
+                <template v-slot:progress="{ progress }">
+                  <div
+                    v-if="progress"
+                    class="QuoteRequest__upload-progress">
+                    <spinner background="black" />
+                  </div>
+                </template>
+              </file-uploader>
+              <div
+                v-if="uploadError"
+                class="QuoteRequest__error">
+                {{ uploadError }}
+              </div>
+              <div
+                v-if="quote.file"
+                class="QuoteRequest__upload-file">
+                <span @click="quote.file = null">x</span>
+                Logo:
+                <a
+                  :href="quote.file.origin"
+                  target="_blank">
+                  {{ quote.file.fileName }}
+                </a>
+              </div>
+            </div>
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Description"
+              class="form-row">
+              <label
+                for="quote-request-description"
+                class="form-label">
+                Tell us some more about your request
+              </label>
+              <textarea
+                id="quote-request-description"
+                v-model="quote.description"
+                name="quote-request-description"
+                class="labelless QuoteRequest__description"
+                placeholder="Example: I need 100 high vis for my staff with our logo on the left and our company name on the back. Front logo is colour, and back logo can be Black only. I also need these in 2 weeks delivered to the Central Coast."
+                :class="{
+                  'is-danger': errors.length,
+                  filled: quote.description
+                }">
+              </textarea>
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+          <div class="col-sm-6 col-12">
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Email"
+              rules="required|email"
+              class="form-row">
+              <label
+                for="quote-request-email"
+                class="form-label">
+                Your email
+              </label>
+              <input
+                id="quote-request-email"
+                ref="email"
+                v-model="quote.address.email"
+                name="email"
+                placeholder="Email"
+                type="text"
+                class="form-field labelless"
+                :class="{
+                  'is-danger': errors.length,
+                  filled: quote.address.email
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Need it by"
+              class="form-group form-row">
+              <label
+                for="quote-need-it-by"
+                class="form-label">
+                When do you need it by?
+              </label>
+              <multiselect
+                v-model="quote.needItBy"
+                :multiple="false"
+                :options="needItByOptions"
+                class="labelless"
+                placeholder="----"
+                :class="{
+                  'is-invalid': errors.length
+                }" />
+              <span
+                v-if="errors.length"
+                class="invalid-feedback">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+            <div class="form-row">
+              <div class="QuoteRequest__label">
+                Do these need to be printed?
+              </div>
+              <div class="QuoteRequest__radio-list">
+                <div
+                  v-for="(needToPrint, index) in needToPrintOptions"
+                  :key="index"
+                  class="QuoteRequest__radio-list-item">
+                  <div
+                    class="form-label QuoteRequest__label-with-checkbox"
+                    @click="quote.needToPrint = needToPrint">
+                    <checked-icon
+                      :checked="quote.needToPrint === needToPrint" />
+                    <span class="lc_regular14 lc__grey1 ml-2 QuoteRequest__radio-list-label">
+                      {{ needToPrint }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="form-row">
+              <div class="QuoteRequest__label">
+                what would you like us to quote on?
+              </div>
+              <div class="QuoteRequest__product-types">
+                <div
+                  v-for="(type, index) in quoteTypes"
+                  :key="index"
+                  class="QuoteRequest__product-type">
+                  <label class="form-label QuoteRequest__label-with-checkbox">
+                    <checkbox v-model="selectedQuoteTypes[type]" />
+                    <span class="lc_regular12 lc__grey1">
+                      {{ type }}
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="submittedErrors.length > 0">
+          Please fill in all required fields
+        </div>
+        <div class="QuoteRequest__btn form-actions full">
+          <btn
+            btn-class="green"
+            :btn-disabled="processing"
+            :btn-processing="processing"
+            :btn-block="true"
+            btn-label="GET A QUOTE NOW"
+            @onclick="handleSubmit(submit)">
+          </btn>
+        </div>
+      </validation-observer>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from '@lancom/shared/assets/js/api';
+import { mapGetters } from 'vuex';
+import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+
+export default {
+  name: 'QuoteRequest',
+  components: {
+    CheckedIcon
+  },
+  data() {
+    return {
+      processing: false,
+      selectedQuoteTypes: {},
+      expectedItemsQuantities: [
+        '1-12',
+        '12-24',
+        '25-49',
+        '51-124',
+        '125-250',
+        '250-499',
+        '500+'
+      ],
+      quoteTypes: [
+        'T-Shirts',
+        'Polos Shirts',
+        'Sport Tops / Activewear',
+        'Business Dress Shirts',
+        'Jumper / Hoodies / Fleece',
+        'Jackets & Coats',
+        'Aprons',
+        'Hi Vis Clothing (Vests/Jackets/Polos)',
+        'Caps & Hats',
+        'Other - I have a custom request!'
+      ],
+      needToPrintOptions: [
+        'Yes',
+        'No',
+        'Depends on Price'
+      ],
+      needItByOptions: [
+        '2 Weeks + Delivery Time',
+        'Urgent - 1 Week',
+        'VIP - 3 Days'
+      ],
+      uploadError: null,
+      quote: {
+        address: {
+          fullName: '',
+          email: '',
+          phone: ''
+        },
+        expectedItemsQuantity: null,
+        description: '',
+        quoteTypes: [],
+        needToPrint: null,
+        needItBy: null,
+        file: null
+      }
+    };
+  },
+  computed: {
+    ...mapGetters(['shop'])
+  },
+  methods: {
+    handleUploaded(file) {
+      this.quote.file = file;
+    },
+    handleUploadError(e) {
+      const { error, data } = e?.response?.data || {};
+      if (data) {
+        this.quote.file = {
+          fileName: data.fileName,
+          origin: data.source
+        };
+      } else {
+        this.uploadError = error;
+      }
+    },
+    handleUploadChange() {
+      this.uploadError = null;
+      this.quote.file = null;
+    },
+    async submit() {
+      try {
+        this.processing = true;
+        const recaptchaToken = await this.getRecaptcha('quote_request');
+        const body = {
+          recaptchaToken,
+          ...this.quote,
+          quoteTypes: Object.keys(this.selectedQuoteTypes),
+          shop: this.shop._id
+        };
+        const quote = await api.saveQuoteRequest(body, this.shop._id);
+        this.$toastr.s('Your request will be processed within 24-48 hours. Thank You.');
+        this.$emit('added', quote);
+      } catch (error) {
+        this.$toastr.e(error);
+      } finally {
+        this.processing = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-request.scss';
+</style>