@lancom/shared 0.0.280 → 0.0.281

package/mixins/product-view.js

@@ -0,0 +1,313 @@
+import { mapGetters, createNamespacedHelpers } from 'vuex';
+import gtm from '@lancom/shared/assets/js/utils/gtm';
+import { getLayerModel } from '@lancom/shared/assets/js/models/product-layers';
+import { tax, staticLink, inRange } from '@lancom/shared/assets/js/utils/filters';
+import { getProductLargeCover } from '@lancom/shared/assets/js/utils/colors';
+import metaInfo from '@lancom/shared/mixins/meta-info';
+import { STORE_CODES } from '@/constants/store';
+
+const { mapActions, mapMutations } = createNamespacedHelpers('product');
+
+export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
+  mixins: [metaInfo],
+  transition(to, from) {
+    if (from && from.name === 'brand-tees-slug') { return 'slide-left-to-right'; };
+    if (to && to.name === 'brand-tees-slug') { return 'slide-right-to-left'; };
+    return 'fade';
+  },
+  async asyncData({ store, params, error, query }) {
+    try {
+      const { print, color, colour } = query;
+      const { shop, country, currency } = store.getters;
+      const data = {
+        shop: shop._id,
+        slug: params.slug,
+        country: country?._id,
+        currency: currency?._id,
+        print,
+        defaultColor: color || colour
+      };
+      await store.dispatch('product/fetchProduct', data);
+      await store.dispatch('product/fetchProductDetails', data);
+
+      if (IS_PRODUCT_PRESET_PRINT_PRICING) {
+        const product = store.getters['product/product'];
+        const printType = product.printTypes[0];
+        store.commit('product/setSelectedPrintType', printType);
+        store.commit('product/setIsPrintPricing', true);
+      }
+
+      if (query.store) {
+        await store.dispatch('product/updatePriceIncludeGST', true);
+      }
+    } catch (e) {
+      console.log(e);
+    }
+    const pageItem = store.getters['product/product'];
+    const loadError = store.getters['product/loadError'];
+
+    if (loadError) {
+      error(loadError);
+    }
+
+    return {
+      pageItem,
+      breadcrumbs: []
+    };
+  },
+  data() {
+    return {
+      skipUpdateGallery: false,
+      preSetPrintPricing: false
+    };
+  },
+  computed: {
+    ...mapGetters(['shop', 'gstTax', 'country', 'currency']),
+    ...mapGetters('product', ['product', 'simpleProducts', 'productDetails', 'editableColor', 'images', 'preSetPrint', 'preSetPrintPriceRange']),
+    pageItemImage() {
+      return this.mainProductImageSrc;
+    },
+    hasImages() {
+      return this.images.length > 0;
+    },
+    mainProductImage() {
+      return this.images.find(i => i.color === this.editableColor?._id) || this.images[0];
+    },
+    thumbProductImages() {
+      const thumbProductImages = this.images.filter(i => i.color === this.editableColor?._id);
+      return (thumbProductImages.length > 0 ? thumbProductImages : this.images).slice(0, 6);
+    },
+    mainProductImageSrc() {
+      return this.mainProductImage && staticLink(this.mainProductImage.large);
+    },
+    mainProductImageStyles() {
+      return this.mainProductImageSrc ? { 'background-image': `url(${this.mainProductImageSrc});` } : {};
+    },
+    faqGroups() {
+      return (this.product.faq || []).length > 0
+        ? [{ type: 'product', entities: this.product.faq, name: 'Product FAQ' }]
+        : null;
+    }
+  },
+  created() {
+    this.fillBreadcrumbs();
+  },
+  async mounted() {
+    const { slug } = this.$route.params;
+    const { color, colour, multipack } = this.$route.query;
+    const data = {
+      shop: this.shop._id,
+      slug,
+      country: this.country?._id,
+      currency: this.currency?._id,
+      defaultColor: color || colour
+    };
+    if (!this.product) {
+      await this.fetchProduct(data);
+      await this.fetchProductDetails(data);
+    }
+
+    if (this.preSetPrint) {
+      const data = {
+        colorId: this.editableColor._id,
+        type: 'text',
+        properties: {
+          notes: '',
+          copy: '',
+          printArea: this.preSetPrint.printArea,
+          printSize: this.preSetPrint.printSize,
+          printType: this.preSetPrint.printType,
+          required: true
+        }
+      };
+      const layer = await getLayerModel(data);
+      this.addTemplateLayer(layer);
+    }
+    this.fillBreadcrumbs();
+
+    if (multipack) {
+      const [SKU, qty] = multipack.split('-multipack-');
+      const simpleProduct = this.simpleProducts.find(sp => sp.SKU === SKU);
+      if (simpleProduct) {
+        this.setSimpleProductAmount({
+          colorId: simpleProduct.color._id,
+          sizeId: simpleProduct.size._id,
+          amount: inRange(+qty, 0, simpleProduct.quantityStock || 999),
+          currency: this.currency
+        });
+      }
+    }
+
+    gtm.viewItem(this.product);
+  },
+  beforeDestroy() {
+    this.clearTemplate();
+    this.clearProduct();
+  },
+  methods: {
+    ...mapActions(['fetchProduct', 'fetchProductDetails', 'selectColor']),
+    ...mapMutations(['clearProduct', 'clearTemplate', 'addTemplateLayer', 'setSimpleProductAmount']),
+    staticLink,
+    goToInfoTab(tab) {
+      this.$refs.infoTabs.selectedTab = tab;
+      const { $el } = this.$refs.infoTabs;
+      if ($el?.scrollIntoView) {
+        $el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+      }
+    },
+    fillBreadcrumbs() {
+      this.breadcrumbs = [{
+        to: '/products',
+        text: 'Products'
+      }, {
+        to: `/products/${this.product.productType.alias}`,
+        text: this.product.productType.name
+      }, {
+        text: this.product.name
+      }];
+    }
+  },
+  getRoute() {
+    return '/shop/:shop/:sku/:product/editor';
+  },
+  jsonld() {
+    const { name, aggregateRating, reviews, brand, SKU } = this.product;
+    const url = `https://${this.shop.url}/${this.product.brand.alias}/${this.product.productType.alias}/${this.product.alias}`;
+    let brandAdditionalProductsRichSnippet = {};
+    try {
+      brandAdditionalProductsRichSnippet = JSON.parse(this.product.brand.additionalProductsRichSnippet);
+    } catch (e) {}
+
+    const productSchema = {
+      '@context': 'https://schema.org',
+      '@type': 'Product',
+      description: this.product.gsFeedDescription || this.product.description,
+      name,
+      offers: this.productDetails?.simpleProducts.map(sp => {
+        const spMaxPrice = (sp.pricing || []).reduce((price, pricing) => Math.max(price, pricing.price), 0);
+        const maxPrice = this.preSetPrint ? spMaxPrice + this.preSetPrintPriceRange.max : spMaxPrice;
+        const availability = sp.quantityStock > 0 ? 'InStock' : 'OutOfStock';
+    
+        const offer = {
+          '@type': 'Offer',
+          name: `${sp.size?.name || ''} / ${sp.color?.name || ''}`,
+          url,
+          availability: `https://schema.org/${availability}`,
+          price: +tax(maxPrice, this.gstTax).toFixed(2),
+          priceCurrency: 'AUD',
+          priceValidUntil: '31-12-2030',
+          sku: sp.SKU,
+          ...(brandAdditionalProductsRichSnippet.offers || {})
+        };
+        const availableStoreCode = STORE_CODES.find(code => sp.storeCode === code);
+        if (availableStoreCode) {
+          offer.availableAtOrFrom = {
+            '@type': 'Place',
+            name: availableStoreCode,
+            branchCode: availableStoreCode
+          };
+          offer.potentialAction = {
+            '@type': 'http://schema.org/BuyAction'
+          };
+          offer.itemCondition = 'https://schema.org/NewCondition';
+          offer.availableDeliveryMethod = 'https://schema.org/OnSitePickup';
+          offer.deliveryLeadTime = 'https://schema.org/OnSitePickup';
+          offer.deliveryLeadTime = {
+            '@type': 'http://schema.org/QuantitativeValue',
+            value: this.product.sameDayDispatch ? 1 : 0
+          };
+        }
+
+        return offer;
+      })
+    };
+
+    if (brand) {
+      productSchema.brand = {
+        '@type': 'Brand',
+        logo: staticLink(brand.logo),
+        name: brand.name
+      };
+    }
+
+    if (SKU) {
+      productSchema.sku = SKU;
+      // schema.gtin = SKU;
+    }
+
+    if (aggregateRating?.count > 0) {
+      productSchema.aggregateRating = {
+        '@type': 'AggregateRating',
+        ratingValue: aggregateRating?.value || 0,
+        reviewCount: aggregateRating?.count || 0
+      };
+    }
+
+    productSchema.review = (reviews || []).map(review => ({
+      '@type': 'Review',
+      author: {
+        '@type': 'Person',
+        name: review.name
+      },
+      datePublished: review.createdAt,
+      reviewBody: review.text,
+      reviewRating: {
+        '@type': 'Rating',
+        bestRating: '5',
+        ratingValue: review.mark,
+        worstRating: '1'
+      }
+    }));
+
+    const image = getProductLargeCover(this.product, 'front');
+    if (image) {
+      productSchema.image = image;
+    }
+
+    const breadcrumbSchema = {
+      '@context': 'https://schema.org',
+      '@type': 'BreadcrumbList',
+      itemListElement: [
+        {
+          '@type': 'ListItem',
+          position: 1,
+          name: 'Home',
+          item: `https://${process.env.HOST_NAME}/`
+        },
+        ...this.breadcrumbs
+          .map((b, index) => ({
+            '@type': 'ListItem',
+            position: index + 2,
+            name: b.text,
+            item: b.to ? `https://${process.env.HOST_NAME}${b.to}` : undefined
+          }))
+      ]
+    };
+
+    const mainEntity = (this.faqGroups || []).reduce((items, group) => {
+      return [
+        ...items,
+        group.entities.map(item => ({
+          '@type': 'Question',
+          name: item.question,
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: item.answer
+          }
+        }))
+      ];
+    }, []);
+
+    const faqSchema = {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity
+    };
+
+    return [
+      productSchema,
+      breadcrumbSchema,
+      mainEntity.length > 0 ? faqSchema : null
+    ].filter(s => !!s);
+  }
+});

package/nuxt.config.js

@@ -129,11 +129,6 @@ module.exports = (config, axios, { raygunClient, publicPath } = {}) => ({
     async get() {
       return await feeds.reviewsFeed(axios, config);
     }
-  }, {
-    path: '/google-shopping.xml',
-    async get() {
-      return await feeds.googleShoppingFeed(axios, config);
-    }
   }],
   router: {
     extendRoutes(routes, resolve) {

package/package.json

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

package/pages/checkout/cart.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="CheckoutCartPage__wrapper">
+    <div class="lc_h1 mb-10">
+      YOUR CART
+    </div>
+    <div :data-aos="aosFadeLeft">
+      <cart />
+    </div>
+  </div>
+</template>
+
+<script>
+import metaInfo from '@lancom/shared/mixins/meta-info';
+
+export default {
+  name: 'CheckoutCartPage',
+  components: {
+    Cart: () => import('@lancom/shared/components/checkout/cart/cart')
+  },
+  mixins: [metaInfo]
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/variables";
+
+.CheckoutCartPage {
+  &__wrapper {
+    margin-top: 50px;
+    @media (max-width: $bp-small-max) {
+      margin-top: 10px;
+    }
+    &>.lc_h1 {
+      @media (max-width: $bp-small-max) {
+        font-size: 25px;
+      }
+    }
+  }
+}
+</style>

package/pages/checkout/order.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    :data-aos="aosFadeRight"
+    class="CheckoutOrderPage__wrapper">
+    <order>
+      <cart-price-info
+        slot="after-steps"
+        class="CheckoutOrderPage__pricing"
+        @loaded="loadedPricing($event)" />
+    </order>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import metaInfo from '@lancom/shared/mixins/meta-info';
+import CartMixin from '@lancom/shared/components/checkout/cart/cart.mixin';
+import gtm from '@lancom/shared/assets/js/utils/gtm';
+
+export default {
+  name: 'CheckoutOrderPage',
+  components: {
+    Order: () => import('@lancom/shared/components/checkout/order/order'),
+    CartPriceInfo: () => import('@lancom/shared/components/checkout/cart/cart_price_info/cart-price-info')
+  },
+  mixins: [metaInfo, CartMixin],
+  computed: {
+    ...mapGetters('cart', ['entities', 'coupon', 'cartPricing'])
+  },
+  methods: {
+    loadedPricing() {
+      gtm.push({
+        event: 'begin_checkout',
+        value: this.cartPricing.totalPriceWithoutTax,
+        currency: 'AUD',
+        coupon: this.cartPricing.coupon?.code,
+        items: this.entities.reduce((products, { guid: productGuid, product, simpleProducts }) => {
+          return [
+            ...products,
+            ...simpleProducts
+              .filter(({ amount }) => amount > 0)
+              .map(({ SKU, amount, guid }) => ({
+                item_id: SKU,
+                item_name: product.name,
+                item_brand: product.brand.name,
+                price: this.cartPricing.products[productGuid]?.products[guid]?.totalPriceWithoutTax,
+                currency: 'AUD',
+                quantity: amount
+              }))
+          ];
+        }, [])
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  @import "@/assets/scss/variables";
+
+  .CheckoutOrderPage {
+    &__pricing {
+      width: 413px;
+      margin-left: 77px;
+      @media (max-width: $bp-small-max) {
+        width: auto;
+        margin-left: 0;
+        margin-top: 30px;
+      }
+    }
+  }
+</style>

package/pages/customer/create.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    :data-aos="aosFadeRight"
+    class="CustomerCreatePage__wrapper">
+    <customer :active-register="true" />
+  </div>
+</template>
+
+<script>
+import metaInfo from '@lancom/shared/mixins/meta-info';
+
+export default {
+  name: 'CustomerCreatePage',
+  components: {
+    Customer: () => import('@lancom/shared/components/customer/customer')
+  },
+  mixins: [metaInfo]
+};
+</script>
+
+<style lang="scss" scoped>
+  @import "@/assets/scss/variables";
+
+  .CustomerCreatePage {
+    &__wrapper {
+      margin: 40px auto;
+      width: 700px;
+      @media (max-width: $bp-extra-small-max) {
+        width: auto;
+      }
+    }
+  }
+</style>

package/pages/customer/password/_token.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    :data-aos="aosFadeLeft"
+    class="CustomerUpdate__wrapper">
+    <div class="CustomerUpdate__from">
+      <div v-if="isSuccessfullySaved" class="alert alert-success">
+        Password successfully updated
+        <br /><br />
+        <a
+          href="/customer/signin"
+          class="btn-green">
+          Go to Sign In
+        </a>
+      </div>
+      <customer-password
+        v-else
+        :customer="customer"
+        @save="onSave" />
+    </div>
+  </div>
+</template>
+
+<script>
+import api from '@lancom/shared/assets/js/api';
+import metaInfo from '@lancom/shared/mixins/meta-info';
+
+export default {
+  name: 'CustomerUpdate',
+  components: {
+    CustomerPassword: () => import('@lancom/shared/components/customer/customer_password/customer-password')
+  },
+  mixins: [metaInfo],
+  async asyncData({ store, params, error }) {
+    const shop = store.getters.shop._id;
+    try {
+      const customer = await api.fetchCustomerByResetToken(params.token, shop);
+      return { customer };
+    } catch (e) {
+      const { status, data } = e?.response || {};
+      const statusCode = status || 500;
+      error({
+        statusCode,
+        error: data?.error || 'Token not found'
+      });
+    }
+  },
+  data() {
+    return {
+      isSuccessfullySaved: false,
+      customer: {}
+    };
+  },
+  methods: {
+    onSave(customer) {
+      this.isSuccessfullySaved = true;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  @import "@/assets/scss/variables";
+
+  .UserUpdate {
+    &__wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      min-height: 100vh;
+    }
+    &__form {
+      width: 400px;
+      @media (max-width: $bp-extra-small-max) {
+        width: auto;
+      }
+    }
+  }
+</style>

package/pages/customer/recovery.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    :data-aos="aosFadeLeft"
+    class="CustomerRecoveryPage__wrapper">
+    <customer-recovery />
+  </div>
+</template>
+
+<script>
+import metaInfo from '@lancom/shared/mixins/meta-info';
+
+export default {
+  name: 'CustomerRecoveryPage',
+  components: {
+    CustomerRecovery: () => import('@lancom/shared/components/pages/customer/recovery/recovery')
+  },
+  mixins: [metaInfo]
+};
+</script>
+
+<style lang="scss" scoped>
+  @import "@/assets/scss/variables";
+
+  .CustomerRecoveryPage {
+    &__wrapper {
+      margin: 100px auto;
+      width: 500px;
+      @media (max-width: $bp-extra-small-max) {
+        width: auto;
+      }
+    }
+  }
+</style>

package/pages/customer/settings.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    :data-aos="aosFadeRight"
+    class="CustomerSettingsPage__wrapper">
+    <customer-settings />
+  </div>
+</template>
+
+<script>
+import metaInfo from '@lancom/shared/mixins/meta-info';
+
+export default {
+  name: 'CustomerCreatePage',
+  components: {
+    CustomerSettings: () => import('@lancom/shared/components/pages/customer/settings/settings')
+  },
+  mixins: [metaInfo]
+};
+</script>
+
+<style lang="scss" scoped>
+  @import "@/assets/scss/variables";
+
+  .CustomerSettingsPage {
+    &__wrapper {
+      margin: 100px auto;
+      width: 500px;
+      @media (max-width: $bp-extra-small-max) {
+        width: auto;
+      }
+    }
+  }
+</style>

package/pages/customer/signin.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    :data-aos="aosFadeLeft"
+    class="CustomerSigninPage__wrapper">
+    <customer />
+  </div>
+</template>
+
+<script>
+import metaInfo from '@lancom/shared/mixins/meta-info';
+
+export default {
+  name: 'CustomerSigninPage',
+  components: {
+    Customer: () => import('@lancom/shared/components/customer/customer')
+  },
+  mixins: [metaInfo]
+};
+</script>
+
+<style lang="scss" scoped>
+  @import "@/assets/scss/variables";
+
+  .CustomerSigninPage {
+    &__wrapper {
+      margin: 50px auto;
+      width: 700px;
+      @media (max-width: $bp-extra-small-max) {
+        width: auto;
+      }
+    }
+  }
+</style>