@lancom/shared 0.0.62 → 0.0.66

package/components/design/approve_design_tables/approve-design-tables.scss

@@ -0,0 +1,47 @@
+@import "@/assets/scss/variables";
+
+.ApproveDesignTables {
+  &__wrapper {
+    padding-top: 60px;
+  }
+  &__table {
+    page-break-before: always;
+    background-color: $white_high_emphasis;
+    & + & {
+      margin-top: 60px;
+    }
+    tr {
+      page-break-inside: avoid !important;
+    }
+    th, td {
+      font-size: 16px;
+      line-height: 150%;
+      color: $grey_1;
+    }
+  }
+  &__thumbnail {
+    width: 250px;
+    height: 250px;
+    &-cell {
+      width: 250px;
+      position: relative;
+      padding: 5px;
+    }
+  }
+  &__no-design {
+    width: 130px;
+    height: 35px;
+    border: 2px solid $black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $white_high_emphasis;
+    font-size: 11px;
+    line-height: 150%;
+    color: $black;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

package/components/design/approve_design_tables/approve-design-tables.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="ApproveDesignTables__wrapper">
+    <table class="lc_table bordered ApproveDesignTables__table">
+      <thead class="centered">
+        <tr class="stripped">
+          <th>Tee Color</th>
+          <th>Design Front</th>
+          <th>Design Back</th>
+          <th>Products</th>
+          <th>Total Qty</th>
+        </tr>
+      </thead>
+      <tbody class="centered">
+        <tr
+          v-for="([, group]) in productsByColor"
+          :key="group.color._id">
+          <td>{{ group.color.name }}</td>
+          <td class="ApproveDesignTables__thumbnail-cell">
+            <product-side-with-print
+              :product="group.product"
+              side="front"
+              size="medium"
+              class="ApproveDesignTables__thumbnail" />
+            <div
+              v-if="!group.product.prints.front"
+              class="ApproveDesignTables__no-design">
+              No design
+            </div>
+            <div v-if="group.product.printAreas.front">
+              {{ group.product.printAreas.front | print }}
+            </div>
+          </td>
+          <td class="ApproveDesignTables__thumbnail-cell">
+            <product-side-with-print
+              :product="group.product"
+              side="back"
+              size="medium"
+              class="ApproveDesignTables__thumbnail" />
+            <div
+              v-if="!group.product.prints.back"
+              class="ApproveDesignTables__no-design">
+              No design
+            </div>
+            <div v-if="group.product.printAreas.back">
+              {{ group.product.printAreas.back | print }}
+            </div>
+          </td>
+          <td>
+            <div
+              v-for="product in group.products"
+              :key="product._id">
+              {{ product.amount }} х {{ product.SKU }}
+            </div>
+          </td>
+          <td>{{ group.amount }}</td>
+        </tr>
+        <tr>
+          <td>Total</td>
+          <td colspan="3">
+            &nbsp;
+          </td>
+          <td>{{ totalAmount }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <table class="lc_table bordered ApproveDesignTables__table">
+      <thead class="centered">
+        <tr class="stripped">
+          <th>Brand</th>
+          <th>Style</th>
+          <th>Color</th>
+          <th>Size</th>
+          <th>Quantity</th>
+        </tr>
+      </thead>
+      <tbody class="centered">
+        <tr
+          v-for="product in products"
+          :key="product._id">
+          <td>{{ product.brand }}</td>
+          <td>{{ product.style }}</td>
+          <td>{{ product.color.name }}</td>
+          <td>{{ product.size.name }}</td>
+          <td>{{ product.amount }}</td>
+        </tr>
+        <tr>
+          <td>Total</td>
+          <td colspan="3">
+            &nbsp;
+          </td>
+          <td>{{ totalAmount }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
+import { groupProductsByColor } from '@lancom/shared/assets/js/utils/products-grouping';
+import { print } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'ApproveDesignTables',
+  components: {
+    ProductSideWithPrint
+  },
+  filters: {
+    print
+  },
+  props: {
+    products: {
+      type: Array,
+      required: true
+    },
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    totalAmount() {
+      return this.products.reduce((amount, product) => {
+        return amount + product.amount;
+      }, 0);
+    },
+    productsByColor() {
+      return groupProductsByColor(this.products, this.order.price.products);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'approve-design-tables.scss';
+</style>

package/components/design/approve_design_tees/approve-design-tees.scss

@@ -0,0 +1,87 @@
+@import "@/assets/scss/variables";
+
+.ApproveDesignTees {
+  &__wrapper {
+    padding-top: 60px;
+    page-break-inside: avoid !important;
+  }
+  &__content {
+    display: grid;
+    grid-template-columns: repeat(2, 540px);
+    grid-column-gap: 20px;
+  }
+  &__header {
+    &-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      & + & {
+        margin-top: 10px;
+      }
+    }
+  }
+  &__title {
+    font-weight: 600;
+    font-size: 25px;
+    line-height: 120%;
+    letter-spacing: 0.02em;
+    color: $black;
+  }
+  &__subtitle {
+    font-size: 20px;
+    line-height: 120%;
+    letter-spacing: 0.02em;
+    color: $black;
+  }
+  &__tip {
+    font-size: 20px;
+    line-height: 120%;
+    letter-spacing: 0.02em;
+    color: $black;
+    margin-left: 16px;
+    &-container {
+      display: flex;
+    }
+    &-icon {
+      color: $green;
+      font-size: 37px;
+    }
+  }
+  &__label {
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 120%;
+    letter-spacing: 0.02em;
+    color: $grey_1;
+    text-transform: uppercase;
+  }
+  &__side {
+    display: flex;
+    flex-direction: column;
+  }
+  &__container {
+    margin-top: 25px;
+    width: 540px;
+    height: 540px;
+    background-color: $white_high_emphasis;
+    border: 2px solid $grey_3;
+    position: relative;
+    page-break-inside: avoid !important;
+  }
+  &__no-design {
+    width: 233px;
+    height: 58px;
+    border: 2px solid $black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $white_high_emphasis;
+    font-size: 25px;
+    line-height: 150%;
+    color: $black;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

package/components/design/approve_design_tees/approve-design-tees.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="ApproveDesignTees__wrapper">
+    <div class="ApproveDesignTees__content">
+      <div class="ApproveDesignTees__side">
+        <div class="ApproveDesignTees__label">
+          Front
+        </div>
+        <div class="ApproveDesignTees__container">
+          <product-side-with-print
+            :product="product"
+            side="front"
+            size="large" />
+          <div
+            v-if="!product.prints.front"
+            class="ApproveDesignTees__no-design">
+            No design
+          </div>
+        </div>
+      </div>
+      <div class="ApproveDesignTees__side">
+        <div class="ApproveDesignTees__label">
+          Back
+        </div>
+        <div class="ApproveDesignTees__container">
+          <product-side-with-print
+            :product="product"
+            side="back"
+            size="large" />
+          <div
+            v-if="!product.prints.back"
+            class="ApproveDesignTees__no-design">
+            No design
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
+
+export default {
+  name: 'ApproveDesignTees',
+  components: {
+    ProductSideWithPrint
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'approve-design-tees.scss';
+</style>

package/components/editor/editor.scss

@@ -0,0 +1,42 @@
+@import "@/assets/scss/variables";
+
+.Editor {
+  &__header {
+    display: flex;
+    justify-content: flex-start;
+    padding: 12px 0;
+  }
+  &__content {
+    margin-top: -12px;
+  }
+  &__footer {
+    margin-top: 30px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 28px;
+  }
+  &__add-to-cart {
+    & > div {
+      display: unset !important;
+    }
+    &-button {
+      width: 100%;
+    }
+  }
+  &__col {
+    padding-top: 42px;
+    padding-bottom: 46px;
+    @media (min-width: $bp-medium-min) {
+      &:first-of-type {
+        box-shadow: 5px 0px 30px rgba(218, 218, 218, 0.2);
+        padding-right: 24px;
+      }
+    }
+    @media (max-width: $bp-extra-small-max) {
+      padding-top: 20px;
+    }
+  }
+  &__products-list-dropdown {
+    margin-top: 25px;
+  }
+}

package/components/editor/editor.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="Editor__wrapper">
+    <!-- <div class="Editor__header">
+      <nuxt-link
+        to="/"
+        class="lc_link">
+        <i class="icon-left"></i>
+        Go to all models
+      </nuxt-link>
+    </div> -->
+    <div class="Editor__content row">
+      <breakpoint
+        name="md"
+        mode="up">
+        <div class="col-md-5 col-12 Editor__col">
+          <tabs
+            :tabs="tabs"
+            :selected="selectedTab"
+            :disabled="!productDetailsLoaded"
+            type="large"
+            @select="selectTab">
+            <template v-slot:default="{ currentTab }">
+              <component
+                :is="`editor-${currentTab === 'product' ? 'product-details' : 'layers'}`"
+                v-if="currentTab">
+              </component>
+            </template>
+          </tabs>
+          <div class="Editor__footer">
+            <btn
+              btn-label="Start again"
+              btn-class="white"
+              @onclick="showResetAllConfirm" />
+            <v-popover
+              ref="popover"
+              trigger="hover"
+              :delay="{ hide: 400, show: 400 }"
+              :disabled="!addToCartDisabled"
+              class="Editor__add-to-cart">
+              <btn
+                btn-class="green"
+                btn-label="Add to cart"
+                :btn-disabled="addToCartDisabled"
+                class="Editor__add-to-cart-button"
+                @onclick="proceedToCard" />
+              <template slot="popover">
+                <p>
+                  You've not added any text or art to print. We only sell custom printed products. <br />
+                  Click OK to add a text or upload artwork
+                </p>
+                <div
+                  class="learn-more-link"
+                  @click="goToDesignAndClosePopover">
+                  Ok
+                </div>
+              </template>
+            </v-popover>
+          </div>
+          <div class="Editor__products-list-dropdown">
+            <products-list-dropdown />
+          </div>
+        </div>
+      </breakpoint>
+      <div class="col-md-7 col-12 Editor__col">
+        <editor-workspace />
+      </div>
+    </div>
+    <breakpoint
+      name="sm"
+      mode="down">
+      <client-only>
+        <mobile-editor-product-details
+          :add-to-cart-disabled="addToCartDisabled"
+          @add-to-cart="proceedToCard" />
+      </client-only>
+    </breakpoint>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions, mapMutations } from 'vuex';
+import { generateCartProducts } from '@lancom/shared/assets/js/utils/product';
+import modals from '@lancom/shared/mixins/modals';
+import confirmModal from '@lancom/shared/mixins/confirm';
+import OfferScreenPrinting from '@lancom/shared/components/asides/offer_screen_printing/offer-screen-printing';
+import ProductsListDropdown from '@lancom/shared/components/common/products_list_dropdown/products-list-dropdown';
+import Tabs from '@lancom/shared/components/common/tabs';
+import EditorWorkspace from './editor_workspace/editor-workspace';
+import EditorProductDetails from './editor_product_details/editor-product-details';
+import MobileEditorProductDetails from './mobile_editor_product_details/mobile-editor-product-details';
+import EditorLayers from './editor_layers/editor-layers';
+
+const MIN_SCREEN_AMOUNT = 125;
+
+export default {
+  name: 'Editor',
+  components: {
+    EditorWorkspace,
+    EditorProductDetails,
+    EditorLayers,
+    MobileEditorProductDetails,
+    ProductsListDropdown,
+    Tabs
+  },
+  mixins: [
+    modals,
+    confirmModal
+  ],
+  data() {
+    return {
+      tabs: [{
+        label: 'Product',
+        icon: 'icon-product',
+        value: 'product',
+        description: 'Choose product colours, sizes and quantities'
+      }, {
+        label: 'Text & Art',
+        icon: 'icon-edit',
+        value: 'design',
+        description: 'Add text and upload images'
+      }],
+      offerScreenPrintingAmount: 0
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('product', [
+      'layers',
+      'product',
+      'selectedLayer',
+      'editModeSelectedLayer',
+      'productDetailsLoaded',
+      'template',
+      'usedSimpleProducts',
+      'selectedPrintAreas',
+      'availableColors',
+      'editorSize',
+      'selectedTab',
+      'productPricing',
+      'printsPricing'
+    ]),
+    ...mapGetters('layers', [
+      'layerThumbnails'
+    ]),
+    addToCartDisabled() {
+      return !(this.template.layers.length && this.usedSimpleProducts.length);
+    }
+  },
+  watch: {
+    selectedLayer() {
+      if (this.selectedLayer && this.selectedTab !== 'design') {
+        this.setSelectedTab('design');
+      }
+    },
+    productPricing() {
+      const { amount = 0 } = this.productPricing || {};
+      if (amount >= MIN_SCREEN_AMOUNT && this.offerScreenPrintingAmount !== amount && this.layers.length > 0 && !this.selectedLayer) {
+        this.offerScreenPrintingAmount = amount;
+        this.$aside.show(OfferScreenPrinting);
+      }
+    }
+  },
+  methods: {
+    ...mapActions('cart', ['addToCart']),
+    ...mapMutations('product', [
+      'clearTemplate',
+      'setSelectedLayer',
+      'setEditModeSelectedLayer',
+      'setSelectedTab'
+    ]),
+    ...mapMutations('layers', ['resetLayers']),
+    selectTab(tab) {
+      this.setSelectedTab(tab);
+      this.setEditModeSelectedLayer(false);
+    },
+    async showResetAllConfirm() {
+      const message = 'Are you sure? Confirmation will delete all layers, quantities and set a T-shirt to white one';
+      const reset = await this.showConfirmationModal(message);
+
+      if (reset) {
+        this.clearTemplate();
+        this.resetLayers();
+      }
+    },
+    proceedToCard() {
+      const entities = generateCartProducts(this.product, this.template.layers, this.template.simpleProducts, this.layerThumbnails, this.selectedPrintAreas, this.editorSize, this.printsPricing);
+      this.addToCart({ entities, shop: this.shop });
+      this.showCartModal(async () => {
+        const message = 'Do you wish to continue with editing the current design or reset the editor?';
+        const reset = await this.showConfirmationModal(message, {
+          cancelLabel: 'Keep design',
+          submitLabel: 'Reset editor'
+        });
+        if (reset) {
+          this.clearTemplate();
+          this.resetLayers();
+        } else {
+          this.clearTemplate(true);
+        }
+      });
+    },
+    goToDesignAndClosePopover() {
+      this.selectTab('design');
+      if (this.$refs.popover) {
+        this.$refs.popover.hide();
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'editor';
+</style>

package/components/editor/editor_layers/editor-layers.scss

@@ -0,0 +1,22 @@
+@import "@/assets/scss/variables";
+
+.EditorLayers {
+  &__wrapper {
+    padding: 20px 0;
+  }
+  &__list-header {
+    padding: 12px 0;
+    margin-top: 24px;
+    border-top: 1px solid #E5E5E5;
+  }
+  &__close-editable {
+    color: $grey_1;
+    cursor: pointer;
+    &-icon {
+      color: $grey_5;
+    }
+  }
+  &__pricing {
+    margin-top: 30px;
+  }
+}