@ecomplus/widget-martan 1.1.22 → 1.2.0

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

@@ -0,0 +1,248 @@
+<template>
+  <div class="mrtn-header--center">
+    <div class="mrtn-header__main">
+      <div class="mrtn-average-section">
+        <div class="mrtn-average-icon" :style="{ backgroundColor: lightenColor(config.widget_review.star_color, 0.8) }">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>
+        </div>
+        <div class="mrtn-average-info">
+          <span class="mrtn-average-score">{{ average.toFixed(1) }}</span>
+          <span class="mrtn-total-reviews">{{ formatReviewsCount }} Avaliações</span>
+        </div>
+      </div>
+    </div>
+
+    <RatingBreakdown :config="config" :rating="rating" :total-rating="totalRating" :current-active="currentActive"
+      @rating-selected="onRatingSelected" />
+
+    <div class="mrtn-filter-container">
+      <button class="mrtn-filter-btn" @click="toggleFilter">
+        Ordenar por
+      </button>
+
+      <SortDropdown :visible="showFilter" :current-sort="currentSort" @sort-selected="onSortSelected" @close="showFilter = false" />
+    </div>
+  </div>
+</template>
+
+<script>
+import RatingBreakdown from '../components/RatingBreakdown.vue'
+import SortDropdown from '../components/SortDropdown.vue'
+import { configProp } from "../../../utils/configProps";
+import { lightenColor } from "../../../utils/lighten-color";
+
+export default {
+  name: 'Center',
+
+  components: {
+    RatingBreakdown,
+    SortDropdown
+  },
+
+  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 {
+      showDropdown: true,
+      showFilter: false,
+      currentSort: 'most_recent',
+      currentActive: null
+    }
+  },
+
+  computed: {
+    formatReviewsCount() {
+      if (this.totalRating >= 1000) {
+        return (this.totalRating / 1000).toFixed(1).replace('.0', '') + 'k'
+      }
+      return this.totalRating.toLocaleString()
+    }
+  },
+
+  methods: {
+    lightenColor,
+    toggleDropdown() {
+      this.showDropdown = !this.showDropdown
+    },
+
+    onRatingSelected(rating) {
+      if (this.currentActive === rating) {
+        this.currentActive = null
+        this.$emit('rating-selected', null)
+      } else {
+        this.currentActive = rating
+        this.$emit('rating-selected', rating)
+      }
+    },
+
+    onSortSelected(sortValue) {
+      this.currentSort = sortValue
+      this.showFilter = false
+      this.$emit('sort-selected', sortValue)
+    },
+
+    toggleFilter() {
+      this.showFilter = !this.showFilter
+      this.$emit('filter-toggle', this.showFilter)
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.mrtn-header--center .mrtn-rating-breakdown {
+  max-width: 520px;
+  width: 100%;
+}
+</style>
+
+<style lang="scss" scoped>
+.mrtn-filter-container {
+  position: relative;
+
+  .mrtn-filter-btn {
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: #000000;
+    transition: all 0.2s ease;
+
+    &:hover {
+      color: #666666;
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+}
+
+.mrtn-header--center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: white;
+  position: relative;
+  gap: 12px;
+}
+
+.mrtn-header__main {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  max-width: 320px;
+  width: 100%;
+  justify-content: center;
+}
+
+.mrtn-average-section {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.mrtn-average-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+}
+
+.mrtn-average-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.mrtn-average-score {
+  font-size: 32px;
+  font-weight: 700;
+  color: #000000;
+  line-height: 1;
+}
+
+.mrtn-total-reviews {
+  font-size: 14px;
+  color: #666666;
+  margin-top: 4px;
+}
+
+.mrtn-dropdown-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  background: white;
+  cursor: pointer;
+  color: #000000;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: #cccccc;
+    background: #f8f8f8;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+</style>

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

@@ -0,0 +1,225 @@
+<template>
+  <div class="mrtn-header--compact">
+    <div class="mrtn-header__rating">
+      <div class="mrtn-stars">
+        <Rating :rating="average" :color="config.widget_review.star_color" />
+      </div>
+
+      <div class="mrtn-header__info">
+        <span class="mrtn-reviews-count" @click="toggleDropdown">{{ formatReviewsCount }} Avaliações</span>
+        <button class="mrtn-dropdown-toggle" @click="toggleDropdown"
+          :class="{ 'mrtn-dropdown-toggle--active': showDropdown }">
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+            <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+              stroke-linejoin="round" />
+          </svg>
+        </button>
+
+        <RatingSummary :config="config" :visible="showDropdown" :rating="rating" :average="average"
+          :total-ratings="totalRating" :recommended="recommended" @rating-selected="onRatingSelected"
+          @close="showDropdown = false" />
+      </div>
+    </div>
+
+    <div class="mrtn-filter-container">
+      <button class="mrtn-filter-btn" @click="toggleFilter">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M2 4H14M4 8H12M6 12H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          <circle cx="4" cy="4" r="1.5" fill="currentColor" />
+          <circle cx="12" cy="8" r="1.5" fill="currentColor" />
+          <circle cx="8" cy="12" r="1.5" fill="currentColor" />
+        </svg>
+      </button>
+
+      <SortDropdown :visible="showFilter" :current-sort="currentSort" @sort-selected="onSortSelected" @close="showFilter = false" />
+    </div>
+  </div>
+</template>
+
+<script>
+import RatingSummary from '../components/RatingSummary.vue'
+import SortDropdown from '../components/SortDropdown.vue'
+import Rating from '../components/Rating.vue';
+
+import { configProp } from "../../../utils/configProps";
+
+export default {
+  name: 'Compact',
+
+  components: {
+    RatingSummary,
+    SortDropdown,
+    Rating
+  },
+
+  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 {
+      showDropdown: false,
+      showFilter: false,
+      currentSort: 'most_recent'
+    }
+  },
+
+  computed: {
+    formatReviewsCount() {
+      if (this.totalRating >= 1000) {
+        return (this.totalRating / 1000).toFixed(1).replace('.0', '') + 'k'
+      }
+      return this.totalRating.toLocaleString()
+    }
+  },
+
+  methods: {
+    toggleDropdown() {
+      this.showDropdown = !this.showDropdown
+    },
+
+    toggleFilter() {
+      this.showFilter = !this.showFilter
+      this.$emit('filter-toggle', this.showFilter)
+    },
+
+    onRatingSelected(rating) {
+      this.$emit('rating-selected', rating)
+    },
+
+    onSortSelected(sortValue) {
+      this.currentSort = sortValue
+      this.showFilter = false
+      this.$emit('sort-selected', sortValue)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mrtn-header--compact {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0;
+  background: white;
+}
+
+.mrtn-header__rating {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.mrtn-stars {
+  display: flex;
+  gap: 2px;
+}
+
+.mrtn-star {
+  font-size: 16px;
+  color: #e5e5e5;
+  transition: color 0.2s ease;
+
+  &--filled {
+    color: #000000;
+  }
+}
+
+.mrtn-header__info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+}
+
+.mrtn-reviews-count {
+  font-size: 14px;
+  font-weight: 500;
+  color: #000000;
+  cursor: pointer;
+}
+
+.mrtn-dropdown-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: #000000;
+  transition: transform 0.2s ease;
+
+  &:hover {
+    color: #666666;
+  }
+
+  &--active {
+    transform: rotate(180deg);
+  }
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.mrtn-filter-container {
+  position: relative;
+}
+
+.mrtn-filter-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  background: white;
+  cursor: pointer;
+  color: #000000;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: #cccccc;
+    background: #f8f8f8;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+</style>

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

@@ -0,0 +1,224 @@
+<template>
+  <div class="mrtn-header--histogram">
+
+    <div class="mrtn-summary-container">
+      <div class="mrtn-summary-title">
+        <div class="mrtn-total-responses">{{ formatReviewsCount }} Avaliações</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>
+
+    <RatingHistogram :config="config" :rating="rating" :total-rating="totalRating" :average="average" @rating-selected="onRatingSelected" />
+  </div>
+</template>
+
+<script>
+import Rating from '../components/Rating.vue'
+import RatingHistogram from '../components/RatingHistogram.vue'
+import { configProp } from "../../../utils/configProps";
+
+export default {
+  name: 'Histogram',
+
+  components: {
+    Rating,
+    RatingHistogram
+  },
+
+  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 {
+    }
+  },
+
+  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-header--histogram {
+  background-color: #f3f3f3;
+  border-radius: 8px;
+  padding: 8px 16px;
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+.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>