@ecomplus/widget-martan 1.1.24 → 1.2.0

package/src/widgets/reviews/headers/Padrao.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="widget-sort" v-if="totalRating > 0">
+    <span class="average_geral">
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" :stroke="config.widget_review.star_color"
+        :fill="average > 0 ? config.widget_review.star_color : 'none'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <defs>
+          <linearGradient :id="'starGradient' + average">
+            <stop offset="0%" :stop-color="config.widget_review.star_color" />
+            <stop :offset="((average < 5 ? average - 1 : average) / 5) *
+              100 +
+              '%'
+              " :stop-color="config.widget_review.star_color" />
+            <stop :offset="((average < 5 ? average - 1 : average) / 5) *
+              100 +
+              '%'
+              " stop-color="transparent" />
+            <stop offset="100%" stop-color="transparent" />
+          </linearGradient>
+        </defs>
+        <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"
+          :fill="`url(#starGradient${average})`" />
+      </svg>
+
+      <strong>{{ average.toFixed(1) }}</strong> / 5
+
+      <span class="baseado" style="font-size: 10px; opacity: 0.8">
+        ({{
+          totalRating > 1
+            ? i19basedOn$1Reviews.replace("$1", totalRating)
+            : i19basedOn$1Review.replace("$1", totalRating)
+        }})
+      </span>
+    </span>
+
+    <sort @onSort="onSort" />
+  </div>
+</template>
+
+<script>
+import { configProp } from "../../../utils/configProps";
+import Sort from "../components/Sort.vue";
+
+export default {
+  name: "Padrao",
+
+  props: {
+    ...configProp,
+    config: {
+      type: Object,
+      required: true,
+    },
+    totalRating: {
+      type: Number,
+      required: true,
+    },
+    average: {
+      type: Number,
+      required: true,
+    },
+  },
+
+  computed: {
+    i19basedOn$1Reviews: () => "Baseado em $1 avaliações",
+    i19basedOn$1Review: () => "Baseado em $1 avaliação",
+  },
+
+  methods: {
+    onSort({ order }) {
+      this.$emit('onSort', { order });
+    },
+  },
+
+  components: {
+    Sort,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.widget-sort {
+  background-color: #ffecdb1a;
+  border: 1px solid #ffecdb1a;
+  border-radius: 0.25rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  // padding: 1rem 2rem;
+  max-height: 30px;
+  width: 100%;
+  font-size: 1.25rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .average_geral {
+    svg {
+      vertical-align: baseline;
+    }
+
+    .baseado {
+      @media (max-width: 580px) {
+        display: none;
+      }
+    }
+  }
+
+  @media (max-width: 580px) {
+    padding: 0;
+  }
+
+}
+</style>

package/src/widgets/reviews/headers/Summary.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="mrtn-header--summary">
+    <RatingBreakdown :config="config" :rating="rating" :total-rating="totalRating" :current-active="currentActive"
+      @rating-selected="onRatingSelected" />
+
+    <div class="mrtn-summary-container">
+      <div class="mrtn-summary-title">
+        <div class="mrtn-total-responses">{{ formatReviewsCount }} {{ this.totalRating > 1 ? 'Avaliações' : 'Avaliação' }}</div>
+        <div v-if="recommended > 0" class="mrtn-recommendation">
+          {{ Math.round(recommended) }}% dos clientes recomendam esse produto
+        </div>
+      </div>
+
+      <div class="mrtn-average-section">
+        <div class="mrtn-average-display">
+          <div class="mrtn-stars-container">
+            <Rating :rating="average" :color="config.widget_review.star_color" />
+          </div>
+          <div class="mrtn-average-badge" :style="{ backgroundColor: config.widget_review.star_color }">
+            {{ average.toFixed(1) }} / 5
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Rating from '../components/Rating.vue'
+import RatingBreakdown from '../components/RatingBreakdown.vue'
+import { configProp } from "../../../utils/configProps";
+
+export default {
+  name: 'Summary',
+
+  components: {
+    Rating,
+    RatingBreakdown
+  },
+
+  props: {
+    ...configProp,
+
+    rating: {
+      type: Object,
+      default: () => ({
+        five: 0,
+        four: 0,
+        three: 0,
+        two: 0,
+        one: 0
+      })
+    },
+
+    recommended: {
+      type: Number,
+      default: 0
+    },
+
+    average: {
+      type: Number,
+      default: 0
+    },
+
+    totalRating: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data() {
+    return {
+      currentActive: null
+    }
+  },
+
+  computed: {
+    ratingBreakdown() {
+      return {
+        5: this.rating.five,
+        4: this.rating.four,
+        3: this.rating.three,
+        2: this.rating.two,
+        1: this.rating.one
+      }
+    },
+
+    formatReviewsCount() {
+      if (this.totalRating >= 1000) {
+        return (this.totalRating / 1000).toFixed(1).replace('.0', '') + 'k'
+      }
+      return this.totalRating.toLocaleString()
+    }
+  },
+
+  methods: {
+    getBarWidth(count) {
+      if (this.totalRating === 0) return 0
+      return (count / this.totalRating) * 100
+    },
+
+    onRatingSelected(rating) {
+      this.currentActive = rating
+      this.$emit('rating-selected', rating)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mrtn-summary-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 1rem;
+}
+
+.mrtn-summary-title {
+  margin-bottom: 20px;
+
+  .mrtn-title {
+    font-size: 24px;
+    font-weight: 700;
+    color: #000000;
+    margin: 0 0 8px 0;
+  }
+
+  .mrtn-total-responses {
+    font-size: 20px;
+    color: #333333;
+    font-weight: 300;
+  }
+}
+
+.mrtn-recommendation {
+  font-size: 16px;
+  color: #666666;
+  font-weight: 100;
+
+  @media (max-width: 580px) {
+    font-size: 12px;
+  }
+}
+
+.mrtn-average-section {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.mrtn-average-display {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.mrtn-stars-container {
+  display: flex;
+  align-items: center;
+
+  @media (max-width: 580px) {
+    display: none;
+  }
+}
+
+.mrtn-average-badge {
+  background: #ff6b35;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.mrtn-rating-breakdown {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mrtn-rating-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 4px 0;
+}
+
+.mrtn-rating-label {
+  font-size: 12px;
+  color: #666666;
+  min-width: 70px;
+  text-align: left;
+}
+
+.mrtn-rating-bar {
+  flex: 1;
+  height: 12px;
+  background: #f0f0f0;
+  border-radius: 6px;
+  overflow: hidden;
+  position: relative;
+}
+
+.mrtn-rating-bar__fill {
+  height: 100%;
+  border-radius: 6px;
+  transition: width 0.3s ease;
+}
+
+.mrtn-rating-count {
+  font-size: 12px;
+  color: #666666;
+  min-width: 40px;
+  text-align: right;
+  font-weight: 500;
+}
+</style>

package/src/widgets/reviews/index.js

@@ -1,52 +1,6 @@
-import Vue from 'vue'
+import widgetInitializer from '../../utils/widget-initializer'
 import Reviews from './Reviews.vue'
 
 export default (options = {}, elId = 'reviews_widget') => {
-  const $el = document.getElementById(elId)
-  if (!options || !$el || !$el.dataset || !$el.dataset.product) {
-    return
-  }
-
-  const { product } = $el.dataset
-
-  const storeId = options.store_id
-  const webId = options.web_id
-  const widgetOptions = options.widget_review || {}
-
-  const starColor = widgetOptions.star_color || null
-  const title = widgetOptions.title || null
-  const headerLayout = widgetOptions.header_layout || null
-  const reviewsLayout = widgetOptions.reviews_layout || null
-
-  const obs = new IntersectionObserver(
-    (entries, observe) => {
-      entries.forEach(function (entry) {
-        const { isIntersecting, intersectionRatio } = entry
-        if (isIntersecting === true || intersectionRatio > 0) {
-          new Vue({
-            render(h) {
-              return h(Reviews, {
-                props: {
-                  product,
-                  storeId,
-                  webId,
-                  title,
-                  starColor,
-                  headerLayout,
-                  reviewsLayout
-                }
-              })
-            }
-          }).$mount($el)
-
-          observe.disconnect()
-        }
-      })
-    },
-    {
-      rootMargin: '250px'
-    }
-  )
-
-  obs.observe($el)
+  return widgetInitializer(options, elId, Reviews)
 }

package/src/append/body.ejs

@@ -1,79 +0,0 @@
-<script>
-  document.addEventListener("DOMContentLoaded", function (event) {
-    const scriptUrl =
-      "<%- options.widgets_src || 'https://unpkg.com/@martan-app/widgets-js@1.1.23/dist/martan.umd.js' %>"
-
-    const startWidget = () => {
-      const color =
-        "<%- options.widget_rating && options.widget_rating.star_color || '#000' %>"
-      const fontSize =
-        "<%- options.widget_rating && options.widget_rating.font_size || 14 %>"
-
-      const storeId = "<%- options.store_id %>"
-      const widgetKey = "<%- options.widget_key %>"
-      const webId = "<%- options.web_id %>"
-
-      setTimeout(() => {
-        try {
-          const martan = new window.Martan({
-            storeId: parseInt(storeId, 10),
-            widgetKey,
-            webId
-          })
-
-          const init = () =>
-            martan
-              .average({
-                fontSize,
-                color,
-                classes: ['.product-card__rating']
-              })
-              .start()
-
-          const $searchEngine = document.getElementById("search-engine")
-          if (!$searchEngine) {
-            init()
-          } else {
-            const displayOnSearchPage =
-              "<%- options.widget_rating && options.widget_rating.search_page %>"
-
-            if (displayOnSearchPage === "true") {
-              const callback = () => {
-                searchEngineObserver.disconnect()
-                const $retailRow = $searchEngine.querySelectorAll(
-                  ".search-engine__retail > .row"
-                )[0]
-
-                const rowObserver = new MutationObserver(() => {
-                  setTimeout(() => init(), 100)
-                  rowObserver.disconnect()
-                })
-                rowObserver.observe($retailRow, {
-                  childList: true,
-                  subtree: true,
-                })
-              }
-              const searchEngineObserver = new MutationObserver(callback)
-              searchEngineObserver.observe($searchEngine, {
-                attributes: true,
-                childList: true,
-              })
-            }
-          }
-        } catch (error) {}
-      }, 50)
-    }
-
-    const isEnabled =
-      "<%- options.widget_rating && options.widget_rating.is_enabled %>"
-
-    if (isEnabled === "true") {
-      const script = document.createElement("script")
-      script.setAttribute("src", scriptUrl)
-      script.setAttribute("id", "martan-scripts")
-      script.async = true
-      document.body.appendChild(script)
-      script.onload = startWidget
-    }
-  })
-</script>

package/src/append/head.ejs

@@ -1,5 +0,0 @@
-<style>
-  #reviews_widget {
-    min-height: 230px;
-  }
-</style>

package/src/append/stamps.ejs

@@ -1,3 +0,0 @@
-<% if (!options.disable_certificate) { %>
-  <div />
-<% } %>

package/src/widgets/reviews/AuthorAndRating.vue

@@ -1,30 +0,0 @@
-<template>
-  <div style="display: flex;align-items: baseline; justify-content: space-between">
-    <div style="display: flex; height: 20px; align-items: center; gap: 5px">
-      <div class="mt-review__author" style="padding-right: 2px">
-        <span>{{ isAnonymous ? "Anônimo" : author }}</span>
-      </div>
-
-      <rating :rating="rating" :color="starColor" />
-    </div>
-  </div>
-</template>
-
-<script>
-import Rating from "../snippets/Rating.vue";
-
-export default {
-  name: "AuthorAndRating",
-
-  props: {
-    isAnonymous: Boolean,
-    author: String,
-    rating: Number,
-    starColor: String,
-  },
-
-  components: {
-    Rating,
-  },
-};
-</script>

package/src/widgets/reviews/AverageScore.vue

@@ -1,160 +0,0 @@
-<template>
-  <ul class="mt-rating__options" ref="options">
-    <li class="mt-rating__list" v-for="index in maxReviews" :key="index"
-      v-on:click="(e) => (reviews.total === 0 ? null : setRating(e, index))">
-      <div class="mt-rating-star">
-        <span>{{ index }}</span>
-
-        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="14" height="14"
-          viewBox="0 0 24 24" stroke-width="2" stroke="#e3e6e6" fill="none" stroke-linecap="round"
-          stroke-linejoin="round">
-          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
-        </svg>
-      </div>
-
-      <div class="mt-rating-meter">
-        <div class="mt-rating-bar" v-bind:style="{
-          width: reviews.getWidth(index),
-          'background-color': config.star_color || 'red',
-        }" />
-      </div>
-
-      <div class="mt-rating-total">
-        <span>{{ reviews.average[numberToText(index)] }}</span>
-        <span>({{ reviews.getWidth(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>
-export default {
-  name: 'AverageScore',
-
-  props: {
-  },
-
-  data() {
-    return {
-      maxReviews: 5
-    };
-  },
-
-  methods: {
-    async setRating(e, rating) {
-      const removeClass = () =>
-        new Promise((resolve) => {
-          const res = Array.from(options.value.children).map((option) => {
-            option.style.removeProperty("opacity")
-            option.children[0].childNodes[1].style.stroke = "rgb(227, 230, 230)"
-            return option.classList.remove("is-active")
-          })
-
-          resolve(res)
-        })
-
-      await removeClass().then(() => {
-        if (rating !== reviews.orderRating) {
-          const el = Array.from(options.value.children)[rating - 1]
-          el.classList.add("is-active")
-          el.style.opacity = 1
-          el.children[0].childNodes[1].style.stroke = config.star_color
-          Array.from(options.value.children).forEach((option, index) => {
-            if (index !== rating - 1) {
-              option.style.opacity = ".5"
-            }
-          })
-        }
-      })
-
-      if (rating === reviews.orderRating) {
-        reviews.orderRating = null
-      } else {
-        reviews.offset = 0
-        reviews.orderRating = 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-rating__options li:hover {
-  cursor: pointer;
-}
-
-.mt-rating__list {
-  display: flex;
-  align-items: center;
-  height: 23px;
-}
-
-.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-rating__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/AverageTotal.vue

@@ -1,35 +0,0 @@
-<script>
-export default {
-  name: 'AverageTotal',
-
-  props: {
-    average: {
-      type: Number,
-      default: 0
-    }
-  },
-};
-</script>
-
-<template>
-  <div class="mt-rating__resume" :title="'Nota média ' + average">
-    <div class="mt-rating__average">
-      <div class="mt-rating__average__wrapper">
-        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star-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="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 style="margin-left: 10px">
-        <p class="mt-rating__average--total">
-          {{ average }}
-        </p>
-      </div>
-    </div>
-  </div>
-</template>