@lancom/shared 0.0.207 → 0.0.208

package/components/product/product_reviews/add_review/add-review.scss

@@ -30,6 +30,53 @@
       margin-right: 22px;
     }
   }
+  &__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;
+      }
+    }
+  }
+  &__error {
+    margin-top: 5px;
+    font-size: 12px;
+    color: $error;
+  }
 }
 ::v-deep .AddReview__content {
   input,

package/components/product/product_reviews/add_review/add-review.vue

@@ -9,7 +9,7 @@
         tag="form"
         class="AddReview__form">
         <div class="row">
-          <div class="col-sm-6 col-12">
+          <div class="col-sm-7 col-12">
             <validation-provider
               v-slot="{ errors }"
               tag="div"
@@ -40,7 +40,7 @@
               </span>
             </validation-provider>
           </div>
-          <div class="col-sm-6 col-12">
+          <div class="col-sm-5 col-12">
             <validation-provider
               v-slot="{ errors }"
               tag="div"
@@ -72,8 +72,10 @@
             </validation-provider>
           </div>
         </div>
-        <div class="row">
-          <div class="col-12">
+        <div
+          class="row"
+          style="margin-top: -20px;">
+          <div class="col-sm-7 col-12">
             <validation-provider
               v-slot="{ errors }"
               tag="div"
@@ -103,6 +105,113 @@
               </span>
             </validation-provider>
           </div>
+          <div class="col-sm-5 col-12">
+            <div>
+              <validation-provider
+                v-slot="{ errors }"
+                tag="div"
+                name="Pro"
+                class="form-row">
+                <input
+                  id="add-review-pro"
+                  ref="pro"
+                  v-model="form.pro"
+                  name="pro"
+                  type="text"
+                  class="form-field"
+                  :class="{
+                    'is-danger': errors.length,
+                    filled: form.pro
+                  }" />
+                <label
+                  for="add-review-pro"
+                  class="form-label label-inner">
+                  Pro
+                </label>
+                <span
+                  v-if="errors.length"
+                  class="form-help is-danger">
+                  {{ errors[0] }}
+                </span>
+              </validation-provider>
+            </div>
+            <div class="mt-10">
+              <validation-provider
+                v-slot="{ errors }"
+                tag="div"
+                name="Cons"
+                class="form-row">
+                <input
+                  id="add-review-cons"
+                  ref="cons"
+                  v-model="form.cons"
+                  name="cons"
+                  type="text"
+                  class="form-field"
+                  :class="{
+                    'is-danger': errors.length,
+                    filled: form.cons
+                  }" />
+                <label
+                  for="add-review-cons"
+                  class="form-label label-inner">
+                  Cons
+                </label>
+                <span
+                  v-if="errors.length"
+                  class="form-help is-danger">
+                  {{ errors[0] }}
+                </span>
+              </validation-provider>
+            </div>
+          </div>
+        </div>
+        <div class="form-row">
+          <file-uploader
+            url="reviews/image"
+            :multiple="false"
+            :has-conversion-error-modal="false"
+            :show-error-message="false"
+            @onchange="handleUploadChange"
+            @onerror="handleUploadError"
+            @onuploaded="handleUploaded">
+            <template v-slot:toggle="{ uploading }">
+              <div
+                class="AddReview__upload"
+                :class="{
+                  'AddReview__upload--uploading': uploading
+                }">
+                <div
+                  class="AddReview__upload-btn"
+                  :class="{
+                    'AddReview__upload-btn--disabled': uploading,
+                    'AddReview__upload-btn--uploaded': form.image
+                  }">
+                  Upload
+                </div>
+                <div class="AddReview__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="AddReview__upload-progress">
+                <spinner background="black" />
+              </div>
+            </template>
+          </file-uploader>
+          <div
+            v-if="uploadError"
+            class="AddReview__error">
+            {{ uploadError }}
+          </div>
+          <product-review-image
+            v-if="form.image"
+            style="margin-top: 10px;"
+            :review="form" />
         </div>
         <div class="AddReview__mark">
           <div class="AddReview__mark-label">
@@ -128,14 +237,18 @@
 </template>
 
 <script>
+import FileUploader from '@lancom/shared/components/common/file_uploader';
 import StarsMark from '@lancom/shared/components/common/stars-mark';
 import api from '@lancom/shared/assets/js/api';
 import { mapGetters } from 'vuex';
+import ProductReviewImage from './../product_review/product_review_image/product-review-image';
 
 export default {
   name: 'AddReview',
   components: {
-    StarsMark
+    FileUploader,
+    StarsMark,
+    ProductReviewImage
   },
   props: {
     product: {
@@ -145,11 +258,16 @@ export default {
   },
   data() {
     return {
+      uploadError: null,
+      processing: false,
       form: {
         name: '',
         email: '',
         text: '',
-        mark: 4
+        pro: '',
+        cons: '',
+        mark: 4,
+        image: null
       }
     };
   },
@@ -157,6 +275,17 @@ export default {
     ...mapGetters(['shop'])
   },
   methods: {
+    handleUploaded(file) {
+      this.form.image = file;
+    },
+    handleUploadError(e) {
+      const { error, message } = e?.response?.data || {};
+      this.uploadError = error || message || 'Failed upload image';
+    },
+    handleUploadChange() {
+      this.uploadError = null;
+      this.form.image = null;
+    },
     async submit() {
       try {
         this.processing = true;

package/components/product/product_reviews/product-reviews.vue

@@ -39,6 +39,20 @@ export default {
     ProductReview
   },
   mixins: [],
+  data() {
+    const reviews = this.product.reviews || [];
+    const [, mainReviewId] = (this.$route.hash || '').match(/review-([a-z0-9]+)/i) || [];
+    const mainReview = reviews.find(review => review._id === mainReviewId);
+    console.log('mainReviewId: ', mainReviewId);
+    return {
+      scrollInterval: null,
+      mainReview,
+      reviews: [
+        mainReview,
+        ...reviews.filter(review => review !== mainReview)
+      ].filter(review => !!review)
+    };
+  },
   props: {
     product: {
       type: Object,
@@ -48,11 +62,31 @@ export default {
   computed: {
     hasReviews() {
       return this.reviews.length > 0;
-    },
-    reviews() {
-      return this.product.reviews || [];
     }
   },
+  mounted() {
+    setTimeout(() => {
+      if (this.mainReview) {
+        const [first, second] = document.querySelectorAll(`#review-${this.mainReview._id}`) || [];
+        const mainReviewEl = second || first;
+        let top = 0;
+        if (mainReviewEl) {
+          this.scrollInterval = setInterval(() => {
+            top += 50;
+            window.scroll(0, top);
+            const rect = mainReviewEl.getBoundingClientRect();
+            console.log('mainReviewEl: ', mainReviewEl, rect.top);
+            if (rect.top < 300) {
+              clearInterval(this.scrollInterval);
+            }
+          }, 50);
+        }
+      }
+    }, 100);
+  },
+  destroyed() {
+    clearInterval(this.scrollInterval);
+  },
   methods: {
     showAddReviewModal() {
       const params = {

package/components/product/product_reviews/product_review/product-review.scss

@@ -37,6 +37,14 @@
       margin-bottom: 10px;
     }
   }
+  &__info {
+    font-size: 11px;
+    margin-top: 6px;
+    color: grey;
+  }
+  &__info-wrapper {
+    display: flex;
+  }
   &__readmore {
     font-weight: 800;
     font-size: 16px;

package/components/product/product_reviews/product_review/product-review.vue

@@ -1,11 +1,36 @@
 <template>
-  <div class="ProductReview__wrapper">
+  <div
+    :id="`review-${review._id}`"
+    class="ProductReview__wrapper">
     <div class="ProductReview__name">
       {{ review.name }}
     </div>
     <div class="ProductReview__mark">
       <stars-mark v-model="review.mark" :disabled="true" />
     </div>
+    <div
+      v-if="review.pro || review.cons || review.image"
+      class="ProductReview__info-wrapper">
+      <div
+        v-if="review.image"
+        style="margin-right: 10px; margin-top: 7px;">
+        <product-review-image
+          :review="review"
+          :size="50" />
+      </div>
+      <div>
+        <div
+          v-if="review.pro"
+          class="ProductReview__info">
+          Pro: {{ review.pro }}
+        </div>
+        <div
+          v-if="review.cons"
+          class="ProductReview__info">
+          Cons: {{ review.cons }}
+        </div>
+      </div>
+    </div>
     <div
       ref="text"
       class="ProductReview__text"
@@ -24,11 +49,13 @@
 <script>
 import StarsMark from '@lancom/shared/components/common/stars-mark';
 import { nl2p } from '@lancom/shared/assets/js/utils/filters';
+import ProductReviewImage from './product_review_image/product-review-image';
 
 export default {
   name: 'ProductReviews',
   components: {
-    StarsMark
+    StarsMark,
+    ProductReviewImage
   },
   props: {
     review: {

package/components/product/product_reviews/product_review/product_review_image/product-review-image.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="ProductReviewImage__wrapper">
+    <img
+      :src="review.image.small"
+      :style="{
+        width: `${size}px`
+      }"
+      @click="showImage">
+  </div>
+</template>
+
+<script>
+import ImageViewer from '@lancom/shared/components/common/image_viewer/image-viewer';
+
+export default {
+  name: 'ProductReviewImage',
+  props: {
+    review: {
+      type: Object,
+      required: true
+    },
+    size: {
+      type: Number,
+      default: 100
+    }
+  },
+  methods: {
+    showImage() {
+      this.$modal.show(
+        ImageViewer,
+        {
+          items: [{
+            src: this.review.image.large
+          }],
+          index: 0
+        },
+        {
+          name: 'image-viewer-modal',
+          root: this.$root,
+          width: '100%',
+          height: 'auto',
+          adaptive: true,
+          clickToClose: true,
+          transition: 'from-top-to-bottom'
+        }
+      );
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-review-image.scss';
+</style>

package/components/quotes/quote_view/quote-view.vue

@@ -30,12 +30,12 @@
       <tr>
         <td>
           <div><b>QUOTE</b></div>
-          <div>{{ quote.fullName }}</div>
-          <div v-if="quote.company">{{ quote.company }}</div>
-          <div v-if="quote.phone">{{ quote.phone }}</div>
-          <div>{{ quote.email }}</div>
+          <div>{{ quote.address.fullName }}</div>
+          <div v-if="quote.address.company">{{ quote.address.company }}</div>
+          <div v-if="quote.address.phone">{{ quote.address.phone }}</div>
+          <div>{{ quote.address.email }}</div>
           <div>{{ quoteAddress }}</div>
-          <div>{{ quote.additionalInfo }}</div>
+          <div>{{ quote.address.additionalInfo }}</div>
         </td>
         <td class="w-50">
           <div><b>DIRECT DEPOSIT DETAILS</b></div>

package/nuxt.config.js

@@ -99,7 +99,7 @@ module.exports = (config, axios, { raygunClient, publicPath } = {}) => ({
         config.devtool = 'source-map';
       }
     },
-    extractCSS: true,
+    extractCSS: !config.IS_LOCAL,
   },
   hooks: {
     render: {
@@ -111,12 +111,112 @@ module.exports = (config, axios, { raygunClient, publicPath } = {}) => ({
     },
   },
   feed: [{
+    path: '/pr-rev-au.xml',
+    async get() {
+      const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/reviews?host=${config.HOST_NAME}`);
+      
+      return {
+        _declaration: { _attributes: { version: "1.0", encoding: "utf-8" } },
+        feed: {
+          _attributes: {
+            'xmlns:vc': 'http://www.w3.org/2007/XMLSchema-versioning',
+            'xmlns:xsi': 'http://www.w3.org/2001/XMLSchema-instance',
+            'xsi:noNamespaceSchemaLocation': 'http://www.google.com/shopping/reviews/schema/product/2.3/product_reviews.xsd'
+          },
+          version: { _text: '2.3' },
+          publisher: {
+            name: { _text: 'Workdepot Australia' },
+            favicon: { _text: 'https://www.workdepot.com.au/favicon.png' }
+          },
+          reviews: {
+            review: [
+              ...data
+                .filter(review => !!review.product)
+                .map(review => {
+                  const { product } = review;
+                  const productUrl = `https://${config.HOST_NAME}/${product.brand.alias}/${product.productType.alias}/${product.alias}`;
+                  const item = {
+                    review_id: { _text: review._id },
+                    reviewer: {
+                      name: {
+                        _attributes: {
+                          is_anonymous: 'false'
+                        },
+                        _text: review.name
+                      }
+                    },
+                    review_timestamp: { _text: review.createdAt },
+                    content: { _text: review.text },
+                    review_url: {
+                      _attributes: {
+                        type: 'singleton'
+                      },
+                      _text: `${productUrl}#review-${review._id}`
+                    },
+                    ratings: {
+                      overall: {
+                        _attributes: {
+                          min: 1,
+                          max: 5
+                        },
+                        _text: review.mark
+                      }
+                    },
+                    products: {
+                      product: {
+                        product_ids: {
+                          // gtins: {
+                          //   gtin: { _text: '541710238425' }
+                          // },
+                          // mpns: {
+                          //   mpn: { _text: '60101-10000' }
+                          // },
+                          skus: {
+                            sku: { _text: review.product.SKU }
+                          },
+                          brands: {
+                            brand: { _text: review.product.brand.name }
+                          },
+                          // asins: {
+                          //   asin: { _text: 'B07YMJ57MB' }
+                          // }
+                        },
+                        product_name: { _text: review.product.name },
+                        product_url: { _text: productUrl }
+                      }
+                    }
+                  };
+                  if (review.pro) {
+                    item.pros = {
+                      pro: [{ _text: review.pro }]
+                    };
+                  }
+                  if (review.cons) {
+                    item.cons = {
+                      con: [{ _text: review.cons }]
+                    };
+                  }
+                  if (review.image) {
+                    item.reviewer_images = {
+                      reviewer_image: [{
+                        url: { _text: review.image.large }
+                      }]
+                    };
+                  }
+                  return item;
+                })
+            ]
+          }
+        }
+      };
+    }
+  }, {
     path: '/google-shopping.xml',
     async get() {
       const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/products?host=${config.HOST_NAME}`);
       const spliceFirstImage = images => (images || []).splice(0, 1)[0];
       const getImages = images => (images || []).length > 0 ? images : null;
-      return {
+      const channel = {
         title: { _text: 'All products' },
         link: { _text: `https://${config.HOST_NAME}` },
         generator: { _text: config.HOST_NAME },
@@ -183,6 +283,18 @@ module.exports = (config, axios, { raygunClient, publicPath } = {}) => ({
           ];
         }, [])
       };
+      
+      return {
+        _declaration: { _attributes: { version: "1.0", encoding: "utf-8" } },
+        rss: {
+          _attributes: { version: "2.0", 'xmlns:g': "http://base.google.com/ns/1.0" },
+          channel: {
+            lastBuildDate: { _text: new Date().toUTCString() },
+            docs: { _text: "https://validator.w3.org/feed/docs/rss2.html" },
+            ...channel
+          },
+        },
+      }
     }
   }],
   router: {

package/package.json

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