@lancom/shared 0.0.62 → 0.0.66

package/components/modals/cart_modal/cart-modal.scss

@@ -0,0 +1,26 @@
+@import "@/assets/scss/variables";
+
+.CartModal {
+  &__total {
+    padding: 12px;
+    background-color: $primary_100;
+    &-container {
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-end;
+      flex-direction: column;
+      margin-top: 50px;
+    }
+  }
+  &__postcode {
+    &-container {
+      margin-top: 30px;
+    }
+    &-prompt {
+      padding-bottom: 10px;
+      &-icon {
+        font-size: 14px;
+      }
+    }
+  }
+}

package/components/modals/cart_modal/cart-modal.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="lc_modal__wrapper CartModal__wrapper">
+    <div class="lc_modal__header pull-left">
+      <h5 class="lc_modal__header-title">
+        Cart
+      </h5>
+      <i
+        class="icon-cancel lc_modal__close--dark"
+        @click="$emit('close')"></i>
+    </div>
+    <div class="lc_modal__content">
+      <cart />
+    </div>
+    <div class="lc_modal__footer">
+      <div class="form-actions full">
+        <btn
+          btn-class="white"
+          btn-label="Back to editor"
+          @onclick="$emit('close')">
+        </btn>
+        <btn
+          btn-class="green"
+          :btn-disabled="!entities.length"
+          btn-label="Proceed to order"
+          @onclick="submit">
+        </btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import Cart from '@lancom/shared/components/checkout/cart/cart';
+
+export default {
+  name: 'CartModal',
+  components: {
+    Cart
+  },
+  props: {
+    switchModal: {
+      type: Function,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters('cart', [
+      'entities'
+    ])
+  },
+  methods: {
+    submit() {
+      this.switchModal('showOrderModal');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-modal.scss';
+</style>

package/components/modals/confirmation_modal/confirmation-modal.scss

@@ -0,0 +1,7 @@
+@import "@/assets/scss/variables";
+
+.ConfirmationModal {
+  &__content {
+    padding: 30px 30px 20px 30px;
+  }
+}

package/components/modals/confirmation_modal/confirmation-modal.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="lc_modal__wrapper ConfirmationModal__wrapper">
+    <div class="lc_modal__content ConfirmationModal__content">
+      <div class="lc_medium16 lc_black">
+        {{ body }}
+      </div>
+    </div>
+    <div class="lc_modal__footer">
+      <div class="form-actions full">
+        <btn
+          btn-class="white"
+          :btn-label="cancelLabel"
+          @onclick="$emit('close')">
+        </btn>
+        <btn
+          btn-class="purple"
+          :btn-label="submitLabel"
+          @onclick="handleConfirm">
+        </btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ConfirmationModal',
+  props: {
+    body: {
+      type: String,
+      required: true
+    },
+    submitLabel: {
+      type: String,
+      default: 'Ok'
+    },
+    cancelLabel: {
+      type: String,
+      default: 'Cancel'
+    },
+    confirm: {
+      type: Function,
+      required: true
+    }
+  },
+  methods: {
+    handleConfirm() {
+      this.confirm();
+      this.$emit('close');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'confirmation-modal.scss';
+</style>

package/components/modals/editor_layers_templates/editor-layers-templates.scss

@@ -0,0 +1,36 @@
+@import "@/assets/scss/variables";
+@import "@lancom/shared/assets/scss/ui_kit";
+
+.EditorLayersTemplates {
+  &__wrapper {
+    position: relative;
+  }
+  &__list {
+    display: flex;
+  }
+  &__item {
+    cursor: pointer;
+    width: 100px;
+    height: 100px;
+    text-align: center;
+    box-shadow: 0 0 3px grey;
+    border-radius: 3px;
+    margin: 15px;
+    &:hover {
+      box-shadow: 0 0 6px grey;
+    }
+
+    img {
+      width: 100px;
+    }
+  }
+  &__loading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: white;
+    opacity: .7;
+  }
+}

package/components/modals/editor_layers_templates/editor-layers-templates.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="lc_modal__wrapper">
+    <div class="lc_modal__header">
+      <h5 class="lc_modal__header-title">
+        Print templates
+      </h5>
+      <i
+        class="icon-cancel lc_modal__close--dark"
+        @click="$emit('close')"></i>
+    </div>
+    <div class="lc_modal__content EditorLayersTemplates__wrapper">
+      <div class="EditorLayersTemplates__list">
+        <div
+          v-for="layerTemplate of layerTemplates"
+          :key="layerTemplate._id"
+          class="EditorLayersTemplates__item"
+          @click="applyLayerTemplate(layerTemplate)">
+          <img :src="layerTemplate.thumbnail" />
+        </div>
+      </div>
+      <div
+        v-if="loading"
+        class="EditorLayersTemplates__loading">
+        <spinner />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+
+const { mapMutations, mapActions, mapGetters } = createNamespacedHelpers('product');
+
+export default {
+  name: 'EditorLayersTemplates',
+  data() {
+    return {
+      loading: false,
+      layerTemplates: []
+    };
+  },
+  computed: {
+    ...mapGetters(['printArea', 'editableLayers'])
+  },
+  async mounted() {
+    this.loading = true;
+    this.layerTemplates = await api.fetchProductPrintTemplates();
+    this.loading = false;
+  },
+  methods: {
+    ...mapActions(['createLayer']),
+    ...mapMutations(['updateTemplateLayer', 'setSelectedLayer']),
+    async applyLayerTemplate(template) {
+      this.loading = true;
+      const printArea = this.printArea;
+      await Promise.all(
+        template.layers.map(layer => this.createLayer({
+          type: layer.type,
+          properties: this.fitLayerToEditorSize(layer, template, printArea),
+          isEditMode: false,
+          preselect: false
+        }))
+      );
+      setTimeout(() => {
+        this.setSelectedLayer(this.editableLayers[0]);
+        this.loading = false;
+        this.$emit('close');
+      }, 500);
+    },
+    fitLayerToEditorSize(layer, { size }, { width, height, top, left }) {
+      const scaleKoef = Math.min(width, height) / size.width;
+      layer.top = top + layer.top * scaleKoef;
+      layer.left = left + layer.left * scaleKoef;
+      ['fontSize', 'scaleX', 'scaleY'].forEach(property => {
+        if (property in layer) {
+          layer[property] = layer[property] * scaleKoef;
+        }
+      });
+      delete layer.sideId;
+      return layer;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-layers-templates.scss';
+</style>

package/components/modals/failed_conversion_modal/failed-conversion-modal.scss

@@ -0,0 +1,18 @@
+@import "@/assets/scss/variables";
+
+.FailedConversionModal {
+  &__content {
+    padding: 30px 30px 20px 30px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+  }
+
+  &__icon {
+    width: 70px;
+    height: 70px;
+    background-image: url(../../../static/icons/error.svg);
+    margin-bottom: 30px;
+  }
+}

package/components/modals/failed_conversion_modal/failed-conversion-modal.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="lc_modal__wrapper FailedConversionModal__wrapper">
+    <validation-observer v-slot="{ invalid }">
+      <div class="lc_modal__content FailedConversionModal__content">
+        <div class="FailedConversionModal__icon"></div>
+        <div class="lc_semibold22">
+          Failed Conversion!
+        </div>
+        <div v-if="!isSent">
+          <div class="lc_regular18 lc_grey1">
+            The file you uploaded cannot be displayed online, click ok to send this file us and we will contact you with a quote or request further information
+          </div>
+          <div class="lc_semibold22 lc_grey1 mt-10">
+            {{ file.fileName }}
+          </div>
+        </div>
+        <div
+          v-else
+          class="lc_regular18 lc_grey1 mt-10">
+          We've received your request. We will be contacting you shortly
+        </div>
+        <div
+          v-if="!isSent"
+          class="form-row--cols mt-10">
+          <validation-provider
+            v-slot="{ errors }"
+            tag="div"
+            name="Full Name"
+            rules="required"
+            class="form-col col-half">
+            <input
+              id="fullName"
+              ref="fullName"
+              v-model="form.fullName"
+              name="fullName"
+              type="text"
+              class="form-field"
+              :class="{
+                'is-danger': errors.length,
+                filled: form.fullName
+              }"
+              @keyup.enter="$refs.fullName.focus()" />
+            <label
+              for="fullName"
+              class="form-label label-inner">
+              Full 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="Phone"
+            rules="required"
+            class="form-col col-half">
+            <input
+              id="phone"
+              ref="phone"
+              v-model="form.phone"
+              name="phone"
+              type="text"
+              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>
+        </div>
+        <validation-provider
+          v-if="!isSent"
+          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.email.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>
+      </div>
+      <div class="lc_modal__footer">
+        <div class="form-actions full">
+          <btn
+            v-if="!isSent"
+            btn-class="white"
+            btn-label="Cancel"
+            @onclick="$emit('close')">
+          </btn>
+          <btn
+            btn-class="purple"
+            btn-label="Ok"
+            :btn-processing="processing"
+            :btn-disabled="invalid || processing"
+            @onclick="submit()">
+          </btn>
+        </div>
+      </div>
+    </validation-observer>
+  </div>
+</template>
+
+<script>
+import api from '@lancom/shared/assets/js/api';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'FailedConversionModal',
+  props: {
+    file: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      isSent: false,
+      form: {}
+    };
+  },
+  computed: {
+    ...mapGetters(['shop'])
+  },
+  methods: {
+    async submit() {
+      if (this.isSent) {
+        return this.$emit('close');
+      }
+
+      try {
+        this.processing = true;
+        await api.sendFailedConversionFile({
+          data: this.form,
+          file: this.file
+        }, this.shop._id);
+      } catch (e) {
+      } finally {
+        this.processing = false;
+        this.isSent = true;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'failed-conversion-modal.scss';
+</style>

package/components/modals/order_modal/order-modal.scss

@@ -0,0 +1,7 @@
+@import "@/assets/scss/variables";
+
+.OrderModal {
+  &__prices {
+    margin-top: 50px;
+  }
+}