@lancom/shared 0.0.303 → 0.0.305

package/assets/js/api/index.js

@@ -95,6 +95,10 @@ const api = {
   fetchOrderByToken(token, params) {
     return _get(`order/token/${token}`, params);
   },
+  getPaymentIntent(shop, { amount, currency, payment, description }) {
+    const url = `shop/${shop}/payment-intent`;
+    return _post(url, { amount, currency, payment, description });
+  },
   createOrderPayment(id, { card, shop, country, currency, invoice, payment, recaptchaToken }) {
     const url = invoice ? `shop/${shop}/order/${id}/invoice/${invoice}/payment` : `shop/${shop}/order/${id}/payment`;
     return _post(url, { card, country, payment, currency, recaptchaToken });

package/components/checkout/cart/cart_entity/cart-entity.mixin.js

@@ -10,6 +10,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['SETTINGS']),
     ...mapGetters('cart', [
       'cartPricing',
       'cartProductsPricing'
@@ -18,7 +19,7 @@ export default {
       return this.entity.product;
     },
     productLink() {
-      return generateProductLink(this.product);
+      return generateProductLink(this.product, null, !!this.SETTINGS.CART_PRODUCT_LINK_TO_EDITOR);
     },
     sumPrints() {
       return (this.entity.prints || []).length;

package/components/checkout/order/order-payment-information/order-payment-information.vue

@@ -152,6 +152,7 @@ export default {
         try {
           card = await this.$refs.paymentCart.tokenize();
         } catch (e) {
+          console.log('handleErrors: ', e);
           await this.handleErrors(e);
         }
         if (card) {

package/components/common/payment/payment_card/payment-card.vue

@@ -5,6 +5,7 @@
         :is="cardComponent"
         ref="card"
         :paymentData="paymentData"
+        :amount="amount"
         @inited="$emit('inited')" />
       </client-only>
   </div>
@@ -17,18 +18,22 @@ export default {
   name: 'PaymentCard',
   components: {
     Pinpayment: () => import('./pinpayment/pinpayment'),
-    Stripe: () => import('./stripe/stripe')
+    Stripe: () => import('./stripe_card/stripe-card'),
+    StripePayment: () => import('./stripe_payment/stripe-payment')
   },
   props: {
     paymentData: {
       type: Object,
       required: true
+    },
+    amount: {
+      type: Number
     }
   },
   computed: {
     ...mapGetters(['payment']),
     cardComponent() {
-      return this.payment?.type || 'stripe';
+      return this.payment?.type || 'stripe-payment';
     }
   },
   methods: {

package/components/common/payment/payment_card/stripe_payment/stripe-payment.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div id="payment-element"></div>
+  </div>
+</template>
+
+<script>
+import api from '@lancom/shared/assets/js/api';
+import { mapGetters } from 'vuex';
+
+let stripeStartLoaded = false;
+
+export default {
+  name: 'PaymentStripePayment',
+  data() {
+    return {
+      paymentIntent: null,
+      stripe: null,
+      elements: null,
+      loadedStripe: false
+    }
+  },
+  props: {
+    paymentData: {
+      type: Object,
+      required: true
+    },
+    amount: {
+      type: Number
+    },
+  },
+  computed: {
+    ...mapGetters(['shop', 'payment', 'currency']),
+    stripeClientKey() {
+      return this.payment.clientKey;
+    }
+  },
+  created() {
+    this.loadStripe();
+  },
+  methods: {
+    async tokenize() {
+      if (this.paymentIntent) {
+        return this.paymentIntent;
+      }
+
+      const result = await this.stripe.confirmPayment({
+        elements: this.elements,
+        confirmParams: {
+          return_url: `https://${process.env.HOST_NAME}/checkout/order`
+        },
+        redirect: "if_required"
+      });
+      // console.log(result);
+      if (result.error) {
+        throw new Error(result.error.message);
+      }
+
+      this.paymentIntent = result
+      return this.paymentIntent;
+    },
+    loadStripe() {
+      if (process.browser) {
+        if (!stripeStartLoaded) {
+          stripeStartLoaded = true;
+          let domElement = document.createElement('script');
+          domElement.setAttribute('src', 'https://js.stripe.com/v3/');
+          domElement.onload = () => {
+            this.onLoaded();
+          };
+          domElement.onerror = () => {
+            setTimeout(() => this.loadStripe(), 1000);
+          };
+          document.body.appendChild(domElement);
+        } else {
+          let repeated = 0;
+          let timer = setInterval(() => {
+            if (typeof window.Stripe !== 'undefined' || repeated++ > 20) {
+              this.onLoaded();
+              clearInterval(timer);
+            }
+          }, 500);
+        }
+      }
+    },
+    async onLoaded() {
+      const params = {
+        currency: this.currency?.isoCode,
+        amount: this.amount,
+        payment: this.payment
+      };
+      const { clientSecret } = await api.getPaymentIntent(this.shop._id, params);
+      this.stripe = window.Stripe(this.stripeClientKey);
+      const appearance = this.payment.appearance || {};
+      const options = this.payment.options || {};
+      this.elements = this.stripe.elements({ clientSecret, appearance });
+      const paymentElement = this.elements.create('payment', options);
+      paymentElement.mount('#payment-element');
+      this.$emit('inited');
+      this.loadedStripe = true;
+    }
+  }
+};
+</script>
+
+<style>
+  .StripeElement {
+    border: 1px solid #cccccc;
+    border-radius: 4px;
+    padding: 10px;
+    width: 100%;
+    margin-top: -10px
+  }
+</style>

package/components/common/postcode_select/postcode-select.vue

@@ -157,7 +157,7 @@ export default {
       if (query.trim().length > 1) {
         this.isLoading = true;
         const country = this.codeCountry || this.country;
-        const countryName = country ? (country.isoCode === 'GB' ? 'England' : (country.name || country)) : 'Australia';
+        const countryName = country ? (['GB','UK'].includes(country.isoCode) ? 'England' : (country.name || country)) : 'Australia';
         const params = {
           query: query.trim(),
           country: countryName

package/components/editor/editor_product_details/editor-product-details.scss

@@ -103,4 +103,20 @@
     padding: 10px;
     cursor: pointer;
   }
+  &__quote-botton {
+    font-weight: 800;
+    font-size: 14px;
+    line-height: 19px;
+    text-align: center;
+    color: $black;
+    background-color: $green;
+    text-transform: uppercase;
+    padding: 4px 15px;
+    margin-top: 7px;
+    cursor: pointer;
+    &:hover {
+      background-color: $black;
+      color: $white;
+    }
+  }
 }

package/components/editor/editor_product_details/editor-product-details.vue

@@ -73,12 +73,19 @@
           </span>
         </div>
       </div>
+      <div>
+        <div
+          class="EditorProductDetails__quote-botton"
+          @click="showQuoteRequestModal()">
+          REQUEST QUOTE
+        </div>
+      </div>
     </div>
-    <div
+    <!-- <div
       v-if="!productAvailableInCurrentCountry"
       class="EditorProductDetails__available-warning">
       Product Not Available in {{ country.name }}
-    </div>
+    </div> -->
     <div
       v-if="product.description"
       class="EditorProductDetails__description">
@@ -100,7 +107,7 @@
       </div>
     </div>
     <div
-      v-if="productDetailsLoaded && productAvailableInCurrentCountry">
+      v-if="productDetailsLoaded">
       <div class="EditorProductDetails__section">
         <product-colors-selector
           :has-another-print-btn="false"
@@ -125,6 +132,7 @@ import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
 import Price from '@lancom/shared/components/common/price';
 import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
 import RichText from '@lancom/shared/components/common/rich-text';
+import QuoteRequestModal from '@lancom/shared/components/quotes/quote_request_modal/quote-request-modal';
 
 export default {
   name: 'EditorProductDetails',
@@ -208,6 +216,18 @@ export default {
   },
   methods: {
     ...mapMutations('product', ['setPriceIncludeGST']),
+    showQuoteRequestModal() {
+      const params = {
+        name: 'quote-request',
+        root: this.$root,
+        height: 'auto',
+        width: 1012,
+        adaptive: true,
+        clickToClose: true,
+        transition: 'from-right-to-left'
+      };
+      this.$modal.show(QuoteRequestModal, { visibleProductTypes: false }, params);
+    },
     toggleSide() {
       this.side = this.side === 'front' ? 'back' : 'front';
     }

package/components/editor/mobile_editor_product_details/mobile-editor-product-details.scss

@@ -4,8 +4,8 @@
 .MobileEditorProductDetails {
   &__menu {
     position: fixed;
-    right: 0;
-    top: calc(100vh - 78px);
+    // right: 0;
+    // top: calc(100vh - 78px);
     left: 0;
     height: 78px;
     z-index: 999999;

package/components/editor/mobile_editor_product_details/mobile-editor-product-details.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="MobileEditorProductDetails__wrapper">
-    <div class="MobileEditorProductDetails__menu">
+    <div
+      v-if="width"
+      class="MobileEditorProductDetails__menu"
+      :style="{ width, top }">
       <div
         class="MobileEditorProductDetails__menu-action"
         :class="{ active: currentTab === 'details' }"
@@ -92,7 +95,9 @@ export default {
   data() {
     return {
       isOpen: false,
-      currentTab: null
+      currentTab: null,
+      top: null,
+      width: null 
     };
   },
   computed: {
@@ -100,12 +105,19 @@ export default {
   },
   mounted() {
     EventBus.$on('focus-on-default-product', this.focusOnDefaultProduct);
+    this.updateMobileMenuPosition();
+    window.addEventListener('resize', this.updateMobileMenuPosition);
   },
   beforeDestroy() {
     EventBus.$off('focus-on-default-product', this.focusOnDefaultProduct);
+    window.removeEventListener('resize', this.updateMobileMenuPosition);
   },
   methods: {
     ...mapMutations(['setEditModeSelectedLayer', 'removeTemplateLayer', 'setSelectedLayer']),
+    updateMobileMenuPosition() {
+      this.top = `${window.outerHeight - 78}px`;
+      this.width = `${window.outerWidth}px`;
+    },
     focusOnDefaultProduct() {
       this.show('details');
     },

package/components/modals/payment_modal/payment-modal.vue

@@ -202,6 +202,7 @@ export default {
         const response = await this.$refs.card.tokenize();
         this.proceedPayment(response);
       } catch (e) {
+        console.log('handleErrors: ', e);
         this.handleErrors(e);
       } finally {
         this.processing = false;

package/components/order/order_payment/order-payment.vue

@@ -101,6 +101,7 @@ export default {
           this.model.paid = paid;
         }
       } catch (e) {
+        console.log('handleErrors: ', e);
         if (e.response) {
           const { message } = (e.response && e.response.data) || e;
           this.handleErrors({ messages: [{ message }] });

package/components/products/product_list_product/product-list-product.vue

@@ -55,12 +55,17 @@
           </span>
         </div>
         <div
-          v-if="product.minimumPrintOrderQuantity > 0"
+          v-if="noMinimum"
+          class="ProductListProduct__tag-item ProductListProduct__tag-item--qty">
+          <span>No Mimimums</span>
+        </div>
+        <div
+          v-if="!noMinimum && product.minimumPrintOrderQuantity > 0"
           class="ProductListProduct__tag-item ProductListProduct__tag-item--qty">
           <span>Print Minimum: {{ product.minimumPrintOrderQuantity }}</span>
         </div>
         <div
-          v-if="product.minimumPrintOrderQuantity > 0"
+          v-if="!noMinimum && product.minimumOrderQuantity > 0"
           class="ProductListProduct__tag-item ProductListProduct__tag-item--qty">
           <span>{{ product.printOnly ? 'No Blanks' : `Blank Minimum: ${product.minimumOrderQuantity}` }}</span>
         </div>

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

@@ -2,9 +2,9 @@
 
 .QuoteRequest {
   &__wrapper {
-    margin: -20px 40px 0 40px;
+    margin: -30px 20px 0 20px;
     @media (max-width: $bp-extra-small-max) { 
-      margin: -20px 0px 0 0px;
+      margin: -30px 0px 0 0px;
     }
   }
   &__title {

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

@@ -257,7 +257,9 @@
                 </div>
               </div>
             </div>
-            <div class="form-row">
+            <div
+              v-if="visibleProductTypes"
+              class="form-row">
               <div class="QuoteRequest__label">
                 what would you like us to quote on?
               </div>
@@ -275,20 +277,37 @@
                 </div>
               </div>
             </div>
+            <div v-else>
+              <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>
+            </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 v-if="visibleProductTypes">
+          <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>
         </div>
       </validation-observer>
     </div>
@@ -365,6 +384,12 @@ export default {
       }
     };
   },
+  props: {
+    visibleProductTypes: {
+      type: Boolean,
+      default: true
+    }
+  },
   computed: {
     ...mapGetters(['shop', 'currency']),
     ...mapGetters('cart', ['entities']),

package/components/quotes/quote_request_modal/quote-request-modal.scss

@@ -1,5 +1,16 @@
+@import "@/assets/scss/variables";
+
 .QuoteRequestModal {
   &__wrapper  {
     border-radius: 0px;
+    margin-bottom: 50px;
+    .lc_modal__content {
+      @media (min-width: $bp-extra-small-max) {
+        padding: 0 0 20px 0 !important;
+      }
+    }
+    .icon-cancel {
+      z-index: 2;
+    }
   }
 }

package/components/quotes/quote_request_modal/quote-request-modal.vue

@@ -6,7 +6,9 @@
         @click="$emit('close')"></i>
     </div>
     <div class="lc_modal__content">
-      <quote-request @added="$emit('close', $event)" />
+      <quote-request
+        :visible-product-types="visibleProductTypes"
+        @added="$emit('close', $event)" />
     </div>
   </div>
 </template>
@@ -18,7 +20,13 @@ export default {
   name: 'QuoteRequestModal',
   components: {
     QuoteRequest
-  }
+  },
+  props: {
+    visibleProductTypes: {
+      type: Boolean,
+      default: true
+    }
+  },
 };
 </script>
 

package/mixins/payment.js

@@ -39,7 +39,7 @@ export default {
     handleErrors(err) {
       // err.messages.forEach(({ message }) => this.$toastr.e(message));
       const defaultMessage = 'Payment error';
-      this.errorMessage = (err.messages ? err.messages.map(({ message }) => message).join(', ') : (err.error_description)) || defaultMessage;
+      this.errorMessage = (err.messages ? err.messages.map(({ message }) => message).join(', ') : (err.error_description)) || err.message || defaultMessage;
     },
     async proceedPayment(card) {
       try {

package/mixins/product-preview.js

@@ -34,6 +34,9 @@ const productPreview = {
     };
   },
   computed: {
+    noMinimum() {
+      return !(this.product.minimumPrintOrderQuantity > 1) && !(this.product.minimumOrderQuantity > 1);
+    },
     canLoadImages() {
       return this.loadHolder.canLoadImages;
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.303",
+  "version": "0.0.305",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {

package/pages/news/_alias.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="SingleNewsPage__wrapper">
+    <breadcrumbs :items="breadcrumbs" />
+    <transition name="from-right-to-left" appear>
+      <news :item="item" />
+    </transition>
+    <transition name="from-left-to-right" appear>
+      <div class="content-inner">
+        <h2 class="lc_h2 lc_black SingleNewsPage__list-title">
+          You might also like
+        </h2>
+        <news-list
+          class="SingleNewsPage__list"
+          :news="newsList" />
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+import metaInfo from '@lancom/shared/mixins/meta-info';
+import api from '@lancom/shared/assets/js/api';
+
+export default {
+  name: 'SingleNewsPage',
+  components: {
+    Breadcrumbs: () => import('@lancom/shared/components/common/breadcrumbs/breadcrumbs'),
+    News: () => import('@lancom/shared/components/news/news'),
+    NewsList: () => import('@lancom/shared/components/news/news_list/news-list')
+  },
+  mixins: [metaInfo],
+  async asyncData({ params, store, error }) {
+    const { _id } = store.getters.shop;
+    try {
+      const item = await api.fetchSingleNews(_id, params.alias, true);
+      const { news } = await api.fetchNews(_id);
+      return { item, news, pageItem: item };
+    } catch (e) {
+      const { status, data } = e?.response || {};
+      const statusCode = status || 500;
+      error({
+        statusCode,
+        error: data?.error || 'News not found'
+      });
+    }
+  },
+  data() {
+    return {
+      item: null,
+      news: []
+    };
+  },
+  computed: {
+    newsList() {
+      return this.news.filter(i => i.alias !== this.item.alias).slice(0, 3);
+    },
+    breadcrumbs() {
+      const item = this.item ? { text: this.item.title } : null;
+      return [{
+        to: '/news',
+        text: 'Blog'
+      }, item].filter(i => !!i);
+    }
+  },
+  getRoute() {
+    return '/shop/:shop/news/:alias';
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.SingleNewsPage{
+  &__wrapper {
+    margin-top: 30px;
+  }
+  &__list-title {
+    margin-top: 20px;
+    text-align: center;
+  }
+  &__list {
+    padding: 20px 0;
+  }
+}
+</style>

package/pages/news/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="NewsPage__wrapper view-transition">
+    <div class="content-inner">
+      <breadcrumbs :items="breadcrumbs" />
+      <news-list
+        class="NewsPage__list"
+        :news="news"
+        :count="count"
+        :page="page"
+        :per-page="perPage" />
+    </div>
+  </div>
+</template>
+
+<script>
+import metaInfo from '@lancom/shared/mixins/meta-info';
+import api from '@lancom/shared/assets/js/api';
+
+const NEWS_PER_PAGE = 18;
+
+export default {
+  name: 'ProductPage',
+  components: {
+    Breadcrumbs: () => import('@lancom/shared/components/common/breadcrumbs/breadcrumbs'),
+    NewsList: () => import('@lancom/shared/components/news/news_list/news-list')
+  },
+  mixins: [metaInfo],
+  async asyncData({ store, params, query }) {
+    const { _id } = store.getters.shop;
+    const newsQuery = { ...params, ...query, limit: NEWS_PER_PAGE };
+    const { news, count, page, perPage } = await api.fetchNews(_id, newsQuery);
+    return { news, count, page, perPage };
+  },
+  data() {
+    return {
+      news: [],
+      count: null,
+      page: null,
+      perPage: null,
+      breadcrumbs: [{
+        text: 'Blog'
+      }]
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.NewsPage {
+  &__wrapper {
+    padding: 30px 0;
+  }
+}
+</style>

package/pages/news/tag/_tag.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="NewsPage__wrapper view-transition">
+    <div class="content-inner">
+      <breadcrumbs :items="breadcrumbs" />
+      <news-list
+        class="NewsPage__list"
+        :news="news"
+        :count="count"
+        :page="page"
+        :per-page="perPage" />
+    </div>
+  </div>
+</template>
+
+<script>
+import metaInfo from '@lancom/shared/mixins/meta-info';
+import api from '@lancom/shared/assets/js/api';
+
+const NEWS_PER_PAGE = 18;
+
+export default {
+  name: 'ProductPage',
+  components: {
+    Breadcrumbs: () => import('@lancom/shared/components/common/breadcrumbs/breadcrumbs'),
+    NewsList: () => import('@lancom/shared/components/news/news_list/news-list')
+  },
+  mixins: [metaInfo],
+  async asyncData({ store, params, query }) {
+    const { _id } = store.getters.shop;
+    const newsQuery = { ...params, ...query, limit: NEWS_PER_PAGE };
+    console.log(newsQuery);
+    const { news, count, page, perPage, tag } = await api.fetchNews(_id, newsQuery);
+    return { news, count, page, perPage, pageItem: tag };
+  },
+  data() {
+    return {
+      news: [],
+      tag: null,
+      count: null,
+      page: null,
+      perPage: null
+    };
+  },
+  computed: {
+    breadcrumbs() {
+      return [{
+        text: 'Blog',
+        to: '/news'
+      }, {
+        text: this.pageItem.title
+      }];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.NewsPage {
+  &__wrapper {
+    padding: 30px 0;
+  }
+}
+</style>

package/routes/index.js

@@ -69,5 +69,20 @@ module.exports = function(routes, resolve) {
     path: '/faq/:group',
     component: resolve('@lancom/shared/pages/faq/_group/index.vue'),
     chunkName: 'pages/faq/group'
+  }, {
+    name: 'news',
+    path: '/news',
+    component: resolve('@lancom/shared/pages/news/index.vue'),
+    chunkName: 'pages/news'
+  }, {
+    name: 'news-view',
+    path: '/news/:alias',
+    component: resolve('@lancom/shared/pages/news/_alias.vue'),
+    chunkName: 'pages/news/view'
+  }, {
+    name: 'news-tag',
+    path: '/news/tag/:tag',
+    component: resolve('@lancom/shared/pages/news/tag/_tag.vue'),
+    chunkName: 'pages/news/tag'
   }];
 }

package/store/index.js

@@ -73,8 +73,10 @@ export const actions = {
       const countrySetting = (countrySettings?.settings || []).find(s => !!s.settings.app.STRIPE_PUBLIC_KEY);
       if (countrySetting) {
         commit('setPayment', {
-          type: 'stripe',
-          clientKey: countrySetting.settings.app.STRIPE_PUBLIC_KEY
+          type: 'stripe-payment',
+          clientKey: countrySetting.settings.app.STRIPE_PUBLIC_KEY,
+          appearance: countrySetting.settings.app.STRIPE_APPEARANCE,
+          options: countrySetting.settings.app.STRIPE_OPTIONS
         });
       }
     }