@ecomplus/widget-martan 1.1.0

package/src/widgets/reviews/Score.vue

@@ -0,0 +1,186 @@
+<template>
+  <ul class="mt-average__options" ref="options">
+    <li class="mt-rating__list" v-for="index in maxReviews" :key="index"
+      @click="(reviews.total === 0 ? null : setRating($event, index))">
+      <div class="mt-rating-star">
+        <span>{{ index }}</span>
+
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" stroke-width="2"
+          stroke="#E6E3E3" style="color:#E6E3E3;" fill="none" stroke-linecap="round" stroke-linejoin="round">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
+            stroke-width="0" fill="currentColor" />
+        </svg>
+      </div>
+
+
+      <div class="mt-rating-meter">
+        <div class="mt-rating-bar" v-bind:style="{
+          width: getWidth(reviews, index),
+          'background-color': starColor || 'red',
+        }" />
+      </div>
+
+      <div class="mt-rating-total">
+        <span>{{ reviews.average[numberToText(index)] }}</span>
+        <span>({{ getWidth(reviews, index) }})</span>
+
+        <span class="mt-rating-remove"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x"
+            width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+            stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M18 6l-12 12"></path>
+            <path d="M6 6l12 12"></path>
+          </svg></span>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { getWidth } from './../../utils/get-width'
+import { numberToText } from './../../utils/textToNumber'
+
+export default {
+  name: 'Score',
+
+  props: {
+    reviews: {
+      type: Object,
+      default: {
+        list: [],
+        orderRating: null,
+        total: 0,
+        average: {
+          one: 0,
+          two: 0,
+          three: 0,
+          four: 0,
+          five: 0
+        },
+        averageTotal: 0,
+        offset: 0,
+      }
+    },
+
+    starColor: {
+      type: String,
+      default: '#212529'
+    },
+  },
+
+  data () {
+    return {
+      maxReviews: 5,
+    };
+  },
+
+  methods: {
+    getWidth,
+    numberToText,
+    setRating: async function (e, rating) {
+      const removeClass = () =>
+        new Promise((resolve) => {
+          const res = Array.from(this.$refs.options.children).map((option) => {
+            option.style.removeProperty("opacity");
+            option.children[0].childNodes[2].style.stroke = "rgb(227, 230, 230)";
+            option.children[0].childNodes[2].style.color = 'rgb(227, 230, 230)';
+
+            return option.classList.remove("is-active");
+          });
+          resolve(res);
+        });
+
+      await removeClass().catch(e => console.error(e))
+
+      if (rating !== this.reviews.orderRating) {
+        const el = Array.from(this.$refs.options.children)[rating - 1];
+        el.classList.add("is-active");
+        el.style.opacity = 1;
+        el.children[0].childNodes[2].style.stroke = this.starColor;
+        el.children[0].childNodes[2].style.color = this.starColor;
+        Array.from(this.$refs.options.children).forEach((option, index) => {
+          if (index !== rating - 1) {
+            option.style.opacity = ".5";
+          }
+        });
+      }
+
+      this.$parent.$emit('updateOrderByAverage', { rating })
+    },
+  },
+};
+</script>
+
+
+<style>
+.mt-rating-remove {
+  visibility: hidden;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.mt-rating__list.is-active .mt-rating-remove {
+  visibility: visible;
+}
+
+.mt-average__options li:hover {
+  cursor: pointer;
+}
+
+.mt-rating__list {
+  display: flex;
+  align-items: center;
+  height: 23px;
+  transition: opacity .25s ease-in-out;
+}
+
+.mt-rating__list.is-active .mt-rating-total,
+.mt-rating__list:hover .mt-rating-total {
+  visibility: visible;
+}
+
+.mt-rating__list:hover {
+  opacity: 0.9;
+}
+
+.mt-rating-meter {
+  overflow: hidden;
+  box-shadow: inset 0 0 0 1px #e3e6e6;
+  background-color: #e3e6e6;
+  height: 10px;
+  width: 100%;
+  border-radius: 50px;
+  display: flex;
+}
+
+.mt-average__options {
+  margin: 0;
+  list-style: none;
+  padding: 0;
+  max-width: 800px;
+  width: 100%;
+}
+
+.mt-rating-star {
+  display: flex;
+  width: 30px;
+  justify-content: space-around;
+  font-size: 12px;
+  color: #757373;
+  align-items: center;
+  margin-left: 5px;
+}
+
+.mt-rating-total {
+  visibility: hidden;
+  width: 50px;
+  font-size: 12px;
+  color: #757373;
+  margin-left: 2px;
+  display: flex;
+  gap: 3px;
+}
+</style>

package/src/widgets/reviews/Sort.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="mt-rating__order_by">
+    <svg width="24px" height="24px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+      <title />
+      <path d="M110.22,117.75h-80a10,10,0,0,0,0,20h80a10,10,0,0,0,0-20Z" />
+      <path
+        d="M177.22,125.75a9.67,9.67,0,0,0-14,0l-8,7.5V42.75a10,10,0,0,0-20,0v113.5a8.29,8.29,0,0,0,3,8,9.67,9.67,0,0,0,14,0l24.5-24.5a10.13,10.13,0,0,0,.5-14Z" />
+      <path d="M110.22,37.75h-80a10,10,0,0,0,0,20h80a10,10,0,0,0,0-20Z" />
+      <path d="M30.22,97.75h70a10,10,0,0,0,0-20h-70a10,10,0,0,0,0,20Z" />
+    </svg>
+
+    <select class="mt-select" @change="e => $emit('onSort', { order: e.target.value })">
+      <option selected disabled>Ordenar</option>
+      <option v-for="option in orderOptions" :value="option.key" :key="option.key">
+        {{ option.name }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+const orderOptions = [
+  {
+    key: "most_recent",
+    name: "Recentes",
+  },
+  {
+    key: "most_voted",
+    name: "Mais úteis",
+  },
+  {
+    key: "most_positive",
+    name: "Positivas",
+  },
+  {
+    key: "most_negative",
+    name: "Negativas",
+  },
+];
+
+export default {
+  name: 'Sort',
+
+  data() {
+    return {
+      orderOptions,
+    };
+  },
+};
+</script>
+
+<style>
+.mt-rating__order_by {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  max-width: 130px;
+  width: 100%;
+  justify-content: flex-end;
+
+  svg {
+    fill: #6b6d76;
+  }
+}
+
+.mt-select {
+  height: 30px;
+  border: none;
+  background: #fff;
+  line-height: 1.14;
+  font-weight: 400;
+  letter-spacing: normal;
+  color: #6b6d76;
+  font-size: 14px;
+}
+</style>

package/src/widgets/reviews/ThumbsPictures.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="media">
+    <ul v-if="pictures.length || video" class="media__list">
+      <li
+        v-if="pictures.length"
+        class="mt-lazy-image"
+        v-for="(picture, index) in pictures"
+        :key="picture.thumb"
+        @click="onClick(index)"
+      >
+        <img
+          :alt="title"
+          :data-src="picture.thumb"
+          data-loaded="false"
+          class="media__preview"
+        />
+      </li>
+
+      <li
+        v-if="video"
+        class="lazy-image"
+        @click="onClick(pictures.length)"
+        :key="video"
+        title="Abrir vídeo"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="30"
+          height="30"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="#ffffff"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+          <path d="M7 4v16l13 -8z"></path>
+        </svg>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ThumbsPictures",
+
+  props: {
+    review: {
+      type: Object,
+      required: true
+    },
+  },
+
+  computed: {
+    pictures: function () {
+      return this.review.pictures || [];
+    },
+
+    video: function () {
+      return this.review.video_url || null;
+    },
+
+    title: function () {
+      return this.review.title || null;
+    },
+  },
+
+  mounted() {
+    const images = Array.from(document.querySelectorAll(".mt-lazy-image img"));
+    const imageObserver = new IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && entry.target.dataset.loaded === "false") {
+          const image = entry.target;
+          image.dataset.loaded = true;
+          image.src = image.dataset.src;
+          imageObserver.unobserve(image);
+        }
+      });
+    });
+
+    images.forEach((img) => imageObserver.observe(img));
+  },
+
+  methods: {
+    onClick(slide) {
+      const { review } = this;
+      this.$emit("onClick", { review, slide });
+    },
+  },
+};
+</script>
+
+<style lang="css">
+.media--open {
+  width: 500px;
+}
+
+.media__preview {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.media__list {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  padding-top: 0.75rem;
+}
+
+.media__list li {
+  -webkit-tap-highlight-color: transparent;
+  box-sizing: border-box;
+  position: relative;
+  user-select: none;
+  overflow: hidden;
+  border-radius: 5px;
+  text-decoration: none;
+  border: 0.125rem solid #383a3e;
+  background-color: #383a3e;
+  padding: 0;
+  width: 2.375rem;
+  min-width: 2.375rem;
+  height: 2.375rem;
+  margin-right: 0.25rem;
+  transition: all ease 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+</style>

package/src/widgets/reviews/Total.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="mt-rating__average__sort">
+    <span class="mt-rating__count" v-if="!!reviews.orderRating">{{ Array.isArray(reviews.list) ? reviews.list.length : 0
+    }}
+      {{
+        Array.isArray(reviews.list) && reviews.list.length > 1 || reviews.list.length === 0
+        ? i19reviews 
+        : i19review
+      }}
+      <span>{{ reviews.orderRating }} {{
+        Array.isArray(reviews.list) && reviews.list.length > 1 || reviews.list.length === 0
+        ? i19stars
+        : i19star
+      }}</span>
+    </span>
+
+    <span class="mt-rating__count" v-else>
+      {{ reviews.total }}
+      {{
+        reviews.total > 1 || reviews.total === 0 
+        ? i19reviews 
+        : i19review
+      }}
+    </span>
+
+    <sort @onSort="onSort"/>
+  </div>
+</template>
+
+<script>
+import Sort from './Sort.vue';
+
+export default {
+  name: 'Total',
+
+  props: {
+    reviews: {
+      type: Object,
+      default: {
+        list: [],
+        orderRating: null,
+        total: 0
+      }
+    }
+  },
+
+  computed: {
+
+    i19stars: () => 'Estrelas',
+    i19star: () => 'Estrela',
+    i19reviews: () => 'Avaliações',
+    i19review: () => 'Avaliação',
+    orderRating () {
+      return reviews.orderRating;
+    },
+  },
+
+  components: { Sort },
+
+  methods: {
+    onSort(value) {
+      this.$emit('onSort', value)
+    }
+  }
+};
+</script>
+
+<style lang="css">
+.mt-rating__average__sort {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 00;
+}
+
+.mt-rating__count {
+  color: #6b6d76;
+}
+</style>

package/src/widgets/reviews/VerifiedPurchase.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <div class="mt-rating__verified">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon icon-tabler icon-tabler-discount-check-filled"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path
+          d="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
+          stroke-width="0"
+          fill="currentColor"
+        />
+      </svg>
+
+      <span> {{ i19verifiedBuyer }} </span>
+    </div>
+    <div class="collapse multi-collapse" :id="collapseId">
+      <div class="card card-body">
+        <h5> {{ i19howProcessVerifiedMsg }} </h5>
+
+        <p>
+          {{ i19useMartanPrivacyMsg }}
+        </p>
+
+        <p>
+          {{ i19howWeCollectMsg }}
+        </p>
+
+        <p>
+          {{ i19howClientsReviewMsg }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { i18n } from "@ecomplus/utils";
+import $ from "../../../../storefront-twbs/src";
+
+export default {
+  name: "VerifiedPurchase",
+
+  props: {
+    showVerified: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data () {
+    return {
+      collapseId: null,
+    };
+  },
+
+  computed: {
+    i19verifiedBuyer: () => 'Comprador verificado',
+    i19howProcessVerifiedMsg: () => i18n({
+        en_us: 'How we verify and process reviews',
+        pt_br: 'Como verificamos e processamos avaliações'
+    }),
+    i19useMartanPrivacyMsg: () => i18n({
+      en_us: 'We use Martan, a web-based application that provides an online reviews and marketing solution, to collect, source, process and display reviews on our website.',
+      pt_br: 'Utilizamos o Martan, uma aplicação baseada na web que oferece uma solução de avaliações online e marketing, para coletar, originar, processar e exibir avaliações em nosso site.'
+    }),
+    i19howWeCollectMsg: () => i18n({
+      en_us: 'We automatically send review requests through Martan to customers for whom we have a record of purchasing products directly from our website. This allows us to verify the reliability of the review through technical means such as the customers email address. Reviews submitted directly through these requests are marked as "Verified Purchase", and the following statement will be displayed in the interface where the review is published: "This review was collected from a verified customer who purchased this item."',
+      pt_br: 'Enviamos automaticamente solicitações de avaliações por meio do Martan aos clientes para os quais temos registro de que compraram produtos diretamente em nosso site. Isso nos permite verificar a confiabilidade da avaliação por meio de meios técnicos, como o endereço de e-mail do cliente. As avaliações enviadas diretamente por essas solicitações são marcadas como "Compra verificada", e a seguinte declaração será exibida na interface em que a avaliação for publicada: "Esta avaliação foi coletada de um cliente verificado que comprou este item".'
+    }),
+    i19howClientsReviewMsg: () => i18n({
+      en_us: 'Customers can choose how to rate reviewed products with a score between 1 and 5. The average review score is calculated using a simple mathematical average, which is then rounded to a half or full star rating using standard rounding rules. The average review score includes reviews for which customers received discounts on future purchases for adding a photo or video to their review.',
+      pt_br: 'Os clientes podem escolher como avaliar os produtos avaliados com uma pontuação entre 1 e 5. A pontuação média das avaliações é calculada usando uma média matemática simples, que é então arredondada para uma meia ou uma avaliação de estrela completa usando regras padrão de arredondamento. A pontuação média das avaliações inclui avaliações para as quais os clientes receberam descontos em compras futuras por adicionar uma foto ou um vídeo à sua avaliação.'
+    })
+  },
+
+  methods: {
+    open: function () {
+      $("#" + this.collapseId).collapse("toggle");
+    },
+  },
+
+  mounted: function () {
+    this.collapseId = "mt-verified-" + Date.now();
+  },
+};
+</script>
+
+<style lang="scss">
+
+.mt-rating__verified {
+  font-size: 12px;
+  color: #6b6d76;
+  font-weight: 400;
+
+  svg {
+    width: 15px;
+    color: var(--success);
+  }
+}
+</style>