@ecomplus/widget-martan 1.1.22 → 1.2.0

package/src/widgets/reviews/components/ReviewCard.vue

@@ -0,0 +1,223 @@
+x<template>
+  <div class="review-card" v-if="review">
+    <div class="review-card__header">
+      <div class="review-card__author">
+        <span class="review-card__name">{{ review.display_name }}</span>
+        <span class="review-card__date" :title="timeAgo(review.created_at)">{{
+          formatDate(review.created_at)
+          }}</span>
+
+        <VerifiedPurchase v-if="review.verified_purchase" />
+      </div>
+      <div class="review-card__rating">
+        <div v-for="star in 5" :key="star" class="review-card__star">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
+            :stroke="star <= review.rating ? starColor : '#E6E3E3'" :fill="star <= review.rating ? starColor : 'none'"
+            stroke-width="2" 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" />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="review-card__content">
+      <p class="review-card__title" v-if="review.title">
+        {{ review.title }}
+      </p>
+
+      <p class="review-card__text" v-if="review.body">
+        {{ showFullText ? review.body : truncatedText }}
+        <span v-if="review.body.length > 200" class="review-card__text-toggle" @click="showFullText = !showFullText">
+          {{ showFullText ? "Ver menos" : "Ver mais" }}
+        </span>
+      </p>
+      <p class="review-card__text-empty" v-else>(Avaliação sem comentário)</p>
+
+      <div v-if="review.pictures && review.pictures.length" class="review-card__images">
+        <img v-for="(image, index) in review.pictures" :key="index" data-loaded="false" :data-src="image.thumb"
+          :alt="`Review image ${index + 1}`" @click="$emit('openQuickview', { review, imageIndex: index })"
+          v-show="image.thumb" class="mt-lazy-image" />
+      </div>
+
+      <div class="review-card__recommendation">
+        <i class="i-happy-line"></i>
+        <span class="text-sm">Eu comprei e recomendo esse produto</span>
+      </div>
+    </div>
+
+    <div class="review-card-reply" v-if="review.reply">
+      <ReviewReply :reply="review.reply" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { timeAgo } from "../../../utils/time-ago";
+import ReviewReply from "./ReviewReply.vue";
+import VerifiedPurchase from "./VerifiedPurchase.vue";
+
+export default {
+  name: "ReviewCard",
+
+  components: {
+    ReviewReply,
+    VerifiedPurchase,
+  },
+
+  data() {
+    return {
+      showFullText: false,
+    };
+  },
+
+  props: {
+    review: {
+      type: Object,
+      required: true,
+    },
+    starColor: {
+      type: String,
+      default: "#212529",
+    },
+    truncateBody: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  methods: {
+    timeAgo,
+    formatDate(date) {
+      return new Date(date).toLocaleDateString("pt-BR", {
+        timeZone: "America/Sao_Paulo",
+      });
+    },
+  },
+
+  computed: {
+    truncatedText() {
+      return this.review.body.substring(0, 200) + "...";
+    },
+  },
+
+  mounted() {
+    const images = Array.from(document.querySelectorAll(".mt-lazy-image"));
+    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));
+    this.showFullText = !this.truncateBody;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.review-card {
+  background-color: #F3F3F3;
+  border-radius: 8px;
+  padding: 16px;
+  width: 100%;
+  height: max-content;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+  }
+
+  &__author {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__name {
+    font-weight: bold;
+    margin-bottom: 0.25rem;
+  }
+
+  &__date {
+    font-size: 70%;
+    color: rgb(113 113 122 / 1);
+  }
+
+  &__rating {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  &__content {
+    font-size: 0.9375rem;
+  }
+
+  &__text {
+    margin-bottom: 1rem;
+    line-height: 1.5;
+  }
+
+  &__text-toggle {
+    cursor: pointer;
+    color: #047857;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  &__images {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+
+    img {
+      width: 80px;
+      height: 80px;
+      object-fit: cover;
+      border-radius: 0.25rem;
+      cursor: pointer;
+    }
+  }
+
+  &__text-empty {
+    font-size: 70%;
+    color: rgb(113 113 122 / 1);
+  }
+
+  &__title {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+  }
+
+  &__recommendation {
+    margin-top: 1rem;
+    color: #047857;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+.i-happy-line {
+  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='middle' margin-bottom='0.22rem' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='currentColor' d='M12 4a8 8 0 1 0 0 16a8 8 0 0 0 0-16M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12m6.5-2c-.195 0-.444.124-.606.448a1 1 0 0 1-1.788-.896C6.542 8.68 7.413 8 8.5 8s1.957.68 2.394 1.552a1 1 0 0 1-1.788.896C8.944 10.124 8.696 10 8.5 10m7 0c-.195 0-.444.124-.606.448a1 1 0 1 1-1.788-.896C13.543 8.68 14.413 8 15.5 8s1.957.68 2.394 1.552a1 1 0 0 1-1.788.896c-.162-.324-.41-.448-.606-.448m-6.896 4.338a1 1 0 0 1 1.412-.088c.53.468 1.223.75 1.984.75s1.455-.282 1.984-.75a1 1 0 1 1 1.324 1.5A4.98 4.98 0 0 1 12 17a4.98 4.98 0 0 1-3.308-1.25a1 1 0 0 1-.088-1.412'/%3E%3C/g%3E%3C/svg%3E");
+  -webkit-mask: var(--un-icon) no-repeat;
+  mask: var(--un-icon) no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  background-color: #047857;
+  color: inherit;
+  display: inline-block;
+  vertical-align: middle;
+  margin-bottom: 0.22rem;
+  width: 1em;
+  height: 1em;
+}
+</style>

package/src/widgets/reviews/{ReviewReply.vue → components/ReviewReply.vue}

@@ -33,7 +33,7 @@
 
 <script>
 import { formatDate } from "@ecomplus/utils";
-import { timeAgo } from "../../utils/time-ago";
+import { timeAgo } from "../../../utils/time-ago";
 
 export default {
 
@@ -55,3 +55,44 @@ export default {
   }
 };
 </script>
+<style lang="css" scoped>
+.mt-reply {
+  margin: 10px 0 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--white);
+  padding: 20px;
+  border-radius: 12px;
+  font-size: 15px;
+  line-height: 1.6;
+  gap: 10px;
+  border-right: 1px solid #1717171a;
+  border-left: 3px solid rgb(230, 230, 230);
+  width: 100%;
+}
+
+@media (max-width: 580px) {
+  .mt-reply {
+    margin: 10px 0;
+  }
+}
+
+.mt-reply__date {
+  font-weight: normal;
+  font-size: 14px;
+  text-decoration: none;
+  color: #475569;
+  color: #777;
+}
+
+.mt-reply__body {
+  font-weight: 600;
+  font-size: 14px;
+  text-decoration: none;
+}
+
+.mt-reply__wrapper {
+  display: flex;
+  align-items: center;
+}
+</style>

package/src/widgets/reviews/{Score.vue → components/Score.vue}

@@ -39,8 +39,8 @@
 </template>
 
 <script>
-import { getWidth } from './../../utils/get-width'
-import { numberToText } from './../../utils/textToNumber'
+import { getWidth } from './../../../utils/get-width'
+import { numberToText } from './../../../utils/textToNumber'
 
 export default {
   name: 'Score',
@@ -106,7 +106,7 @@ export default {
           }
         });
       }
-
+      this.$emit('updateOrderByAverage', { rating })
       this.$parent.$emit('updateOrderByAverage', { rating })
     },
   },
@@ -160,7 +160,6 @@ export default {
   margin: 0;
   list-style: none;
   padding: 0;
-  max-width: 800px;
   width: 100%;
 }
 

package/src/widgets/reviews/{Sort.vue → components/Sort.vue}

@@ -66,7 +66,7 @@ export default {
 .mt-select {
   height: 30px;
   border: none;
-  background: #fff;
+  background: transparent;
   line-height: 1.14;
   font-weight: 400;
   letter-spacing: normal;

package/src/widgets/reviews/components/SortDropdown.vue

@@ -0,0 +1,184 @@
+<template>
+  <div v-if="visible" ref="dropdown" class="mrtn-sort-dropdown">
+    <div class="mrtn-sort-dropdown__header">
+      <h3 class="mrtn-sort-dropdown__title">Ordenar por</h3>
+    </div>
+
+    <div class="mrtn-sort-dropdown__options">
+      <div
+        v-for="option in sortOptions"
+        :key="option.value"
+        class="mrtn-sort-option"
+        :class="{ 'mrtn-sort-option--active': currentSort === option.value }"
+        @click="selectSort(option.value)"
+      >
+        <span class="mrtn-sort-option__text">{{ option.label }}</span>
+        <svg
+          v-if="currentSort === option.value"
+          class="mrtn-sort-option__check"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+        >
+          <path d="M13.5 4.5L6 12L2.5 8.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </div>
+    </div>
+
+    <div class="mrtn-sort-dropdown__footer">
+      <span class="mrtn-sort-dropdown__powered">Powered by MARTAN.app</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SortDropdown',
+
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+
+    currentSort: {
+      type: String,
+      default: 'most_recent'
+    }
+  },
+
+  data() {
+    return {
+      sortOptions: [
+        { value: 'most_recent', label: 'Recentes' },
+        { value: 'most_voted', label: 'Mais úteis' },
+        { value: 'most_positive', label: 'Positivas' },
+        { value: 'most_negative', label: 'Negativas' }
+      ]
+    }
+  },
+
+  mounted() {
+    this.addClickOutsideListener()
+  },
+
+  beforeDestroy() {
+    this.removeClickOutsideListener()
+  },
+
+  watch: {
+    visible(newValue) {
+      if (newValue) {
+        this.$nextTick(() => {
+          this.addClickOutsideListener()
+        })
+      } else {
+        this.removeClickOutsideListener()
+      }
+    }
+  },
+
+  methods: {
+    selectSort(sortValue) {
+      this.$emit('sort-selected', sortValue)
+    },
+
+    addClickOutsideListener() {
+      document.addEventListener('click', this.handleClickOutside)
+    },
+
+    removeClickOutsideListener() {
+      document.removeEventListener('click', this.handleClickOutside)
+    },
+
+    handleClickOutside(event) {
+      if (!this.visible) return
+      if (
+        event.target &&
+        event.target.classList &&
+        event.target.classList.contains('mrtn-filter-btn') &&
+        event.target.nodeName !== 'svg' &&
+        event.target.nodeName !== 'SVG'
+      ) {
+        return
+      }
+      if (this.$refs.dropdown && !this.$refs.dropdown.contains(event.target)) {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mrtn-sort-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: white;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  margin-top: 8px;
+  padding: 16px;
+  min-width: 200px;
+}
+
+.mrtn-sort-dropdown__header {
+  margin-bottom: 12px;
+}
+
+.mrtn-sort-dropdown__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #000000;
+  margin: 0;
+}
+
+.mrtn-sort-dropdown__options {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.mrtn-sort-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background: #f8f8f8;
+  }
+
+  &--active {
+    background: #f0f0f0;
+  }
+}
+
+.mrtn-sort-option__text {
+  font-size: 14px;
+  color: #000000;
+  font-weight: 400;
+}
+
+.mrtn-sort-option__check {
+  color: #000000;
+  flex-shrink: 0;
+}
+
+.mrtn-sort-dropdown__footer {
+  margin-top: 12px;
+  text-align: right;
+}
+
+.mrtn-sort-dropdown__powered {
+  font-size: 11px;
+  color: #999999;
+}
+</style>

package/src/widgets/reviews/components/VerifiedPurchase.vue

@@ -0,0 +1,121 @@
+<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 title="Esta compra foi auditada por Martan.app"> {{ 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 {
+  color: #9e9e9e;
+  font-size: 10px;
+  font-weight: 400;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  svg {
+    width: 15px;
+    color: var(--success);
+  }
+}
+</style>