@ecomplus/widget-martan 1.1.22 → 1.2.0

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

@@ -0,0 +1,390 @@
+<template>
+  <div
+    class="modal fade"
+    id="martan-quickview"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="quickviewModal"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+      <div class="modal-content">
+        <div class="modal-header" v-show="false">
+          <h5 class="modal-title" id="quickviewModal">{{ i19quickview }}</h5>
+          <button
+            type="button"
+            class="close"
+            data-dismiss="modal"
+            aria-label="Close"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+
+        <div class="modal-body mt-quickview">
+          <button
+            type="button"
+            class="close"
+            data-dismiss="modal"
+            aria-label="Close"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+
+          <div class="mt-quickview__content">
+            <!-- Image Gallery Column -->
+            <div class="mt-quickview__gallery-column">
+              <!-- Main Image Display -->
+              <div class="mt-quickview__main-image">
+                <img
+                  :src="currentImage"
+                  :alt="'Review image'"
+                  v-if="currentImage"
+                />
+                <VideoPlayer v-else-if="video" :videoUrl="video" />
+              </div>
+
+              <!-- Thumbnails -->
+              <div
+                class="mt-quickview__thumbnails"
+                v-if="pictures.length || video"
+              >
+                <div
+                  v-for="(pic, index) in pictures"
+                  :key="`thumb-${index}`"
+                  class="mt-quickview__thumb"
+                  :class="{ active: currentImageIndex === index }"
+                  @click="setCurrentImage(index)"
+                >
+                  <img :src="pic.thumb" :alt="'Thumbnail ' + (index + 1)" />
+                </div>
+                <div
+                  v-if="video"
+                  class="mt-quickview__thumb"
+                  :class="{ active: currentImageIndex === pictures.length }"
+                  @click="setCurrentImage(pictures.length)"
+                >
+                  <i class="fas fa-play-circle"></i>
+                </div>
+              </div>
+            </div>
+
+            <!-- Review Info Column -->
+            <div class="mt-quickview__info-column" v-if="review">
+              <div class="mt-review">
+                <div class="mt-rating__group">
+                  <ReviewCard
+                    :truncate-body="false"
+                    :review="review"
+                    :star-color="starColor"
+                    :full="true"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { i19next, i19previous } from "@ecomplus/i18n";
+import { i18n, formatDate } from "@ecomplus/utils";
+
+import { timeAgo } from "../../../utils/time-ago";
+import VideoPlayer from "./VideoPlayer.vue";
+import ReviewCard from "./ReviewCard.vue";
+
+export default {
+  name: "Quickview",
+
+  components: {
+    VideoPlayer,
+    ReviewCard,
+  },
+
+  props: {
+    review: Object,
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
+    starColor: String,
+  },
+
+  data() {
+    return {
+      currentImageIndex: 0,
+      currentImage: null,
+    };
+  },
+
+  computed: {
+    i19quickview: () => "Quickview",
+    i19next: () => i18n(i19next),
+    i19previous: () => i18n(i19previous),
+
+    reviewId: function () {
+      if (this.review && this.review.id) {
+        return this.review.id;
+      }
+
+      return null;
+    },
+
+    pictures: function () {
+      if (this.review && this.review.pictures) {
+        return this.review.pictures;
+      }
+      return [];
+    },
+
+    video: function () {
+      if (this.review && this.review.video_url) {
+        return this.review.video_url;
+      }
+      return null;
+    },
+
+    title: function () {
+      if (this.review && this.review.title) {
+        return this.review.title;
+      }
+      return null;
+    },
+
+    author: function () {
+      if (this.review && this.review.display_name) {
+        return this.review.display_name;
+      }
+      return null;
+    },
+
+    rating: function () {
+      if (this.review && this.review.rating) {
+        return this.review.rating;
+      }
+      return null;
+    },
+
+    recommended: function () {
+      if (this.review && this.review.is_recommended) {
+        return this.review.is_recommended;
+      }
+      return null;
+    },
+
+    isVerified: function () {
+      if (this.review && this.review.verified_purchase) {
+        return this.review.verified_purchase;
+      }
+      return null;
+    },
+
+    reply: function () {
+      if (this.review && this.review.reply) {
+        return this.review.reply;
+      }
+      return null;
+    },
+
+    created: function () {
+      if (this.review && this.review.created_at) {
+        return this.review.created_at;
+      }
+      return null;
+    },
+
+    body: function () {
+      if (this.review && this.review.body) {
+        return this.review.body;
+      }
+      return null;
+    },
+  },
+
+  watch: {
+    isOpen: function (isOpened) {
+      if (isOpened) {
+        $("#martan-quickview").modal("show");
+      }
+    },
+    pictures: {
+      immediate: true,
+      handler(newPics) {
+        if (newPics && newPics.length) {
+          this.currentImage = newPics[0].big || newPics[0].normal;
+        }
+      },
+    },
+  },
+
+  mounted() {
+    $("#martan-quickview").on("hidden.bs.modal", this.close);
+    $("#martan-quickview").on("shown.bs.modal", this.mount);
+  },
+
+  methods: {
+    formatDate,
+    timeAgo,
+    close: function () {
+      this.$emit("onClose", true);
+    },
+    setCurrentImage(index) {
+      this.currentImageIndex = index;
+      if (index < this.pictures.length) {
+        this.currentImage = this.pictures[index].big;
+      } else {
+        this.currentImage = null; // Will show video player
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+#martan-quickview {
+  padding: 0 !important;
+  .modal-dialog {
+    margin: 0 auto;
+  }
+}
+
+.mt-quickview {
+  .review-card {
+    width: 100% !important;
+    margin-top: 0 !important;
+  }
+  .review-card__images {
+    display: none;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.mt-quickview {
+  padding: 0;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+
+    @media (min-width: 992px) {
+      flex-direction: row;
+    }
+  }
+
+  &__gallery-column {
+    flex: 1;
+    max-width: 500px;
+    width: 100%;
+  }
+
+  &__main-image {
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      border-top-left-radius: 3px;
+      @media (max-width: 992px) {
+        border-top-right-radius: 3px;
+      }
+    }
+  }
+
+  &__thumbnails {
+    display: flex;
+    gap: 0.5rem;
+    overflow-x: auto;
+    padding: 0.5rem;
+
+    @media (min-width: 992px) {
+      flex-wrap: wrap;
+      max-height: 100px;
+    }
+  }
+
+  &__thumb {
+    width: 60px;
+    height: 60px;
+    border: 2px solid transparent;
+    cursor: pointer;
+    flex-shrink: 0;
+
+    &.active {
+      border-color: var(--primary);
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    i {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #f8f9fa;
+      font-size: 1.5rem;
+    }
+  }
+
+  &__info-column {
+    flex: 1;
+    @media (min-width: 992px) {
+      max-height: 500px;
+      overflow-y: auto;
+    }
+  }
+
+  .close {
+    position: absolute;
+    z-index: 1;
+    padding: 8px 1rem;
+  }
+
+  &__galery {
+    max-width: 500px;
+    min-height: 500px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    img {
+      max-width: 500px;
+      max-height: 500px;
+      height: 100%;
+      object-fit: contain;
+      width: 100%;
+    }
+
+    .glide__slides {
+      align-items: center;
+    }
+  }
+
+  &__review {
+    padding: 1rem;
+
+    @media (min-width: 992px) {
+      max-height: 500px;
+      overflow: auto;
+    }
+
+    @media (min-width: 1200px) {
+      max-height: 500px;
+      overflow: auto;
+    }
+  }
+
+  .video-wrapper {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

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

@@ -0,0 +1,106 @@
+<template>
+  <span class="martan-rating">
+    <svg
+      v-for="(star, index) in stars"
+      :key="index"
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon icon-tabler"
+      :class="getStarClass(star)"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke="currentColor"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      :style="{ color }"
+    >
+      <defs v-if="star === 0.5">
+        <linearGradient :id="`gradient-${index}`" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="50%" :style="`stop-color:${color};stop-opacity:1`" />
+          <stop offset="50%" :style="`stop-color:${color};stop-opacity:0`" />
+        </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="getStarFill(star, index)" />
+    </svg>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'Rating',
+
+  props: {
+    rating: {
+      type: Number,
+      default: 5
+    },
+
+    color: {
+      type: String,
+      default: "#000000"
+    },
+  },
+
+  data() {
+    return {
+      stars: Array(5).fill(0)
+    };
+  },
+
+  mounted() {
+    this.updateStars();
+  },
+
+  methods: {
+    updateStars() {
+      const rating = Math.max(0, Math.min(5, this.rating));
+      this.stars = Array(5).fill(0).map((_, index) => {
+        const starPosition = index + 1;
+        if (rating >= starPosition) {
+          return 1;
+        } else if (rating > index) {
+          return 0.5;
+        } else {
+          return 0;
+        }
+      });
+    },
+
+    getStarClass(star) {
+      if (star === 1) {
+        return 'icon-tabler-star-filled';
+      } else if (star === 0.5) {
+        return 'icon-tabler-star-half';
+      } else {
+        return 'icon-tabler-star';
+      }
+    },
+
+    getStarFill(star, index) {
+      if (star === 1) {
+        return 'currentColor';
+      } else if (star === 0.5) {
+        return `url(#gradient-${index})`;
+      } else {
+        return 'none';
+      }
+    }
+  },
+
+  watch: {
+    rating: 'updateStars'
+  }
+};
+</script>
+
+<style lang="css">
+.martan-rating {
+  display: flex;
+  gap: 4px;
+}
+</style>

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

@@ -0,0 +1,171 @@
+<template>
+  <div class="mrtn-rating-breakdown" :style="'--hover-color: ' + houverColor" :class="{ 'mrtn-rating-breakdown--has-active': currentActive !== null }">
+    <div v-for="(count, stars) in ratingBreakdown" :key="stars" class="mrtn-rating-row"
+      :class="{ 'mrtn-rating-row--active': currentActive === stars }" @click="selectRating(stars)">
+      <div class="mrtn-rating-stars">
+        <Rating :rating="parseInt(stars)" :color="config.widget_review.star_color" />
+      </div>
+
+      <div class="mrtn-rating-bar">
+        <div class="mrtn-rating-bar__fill" :style="{
+          width: getBarWidth(count) + '%',
+          backgroundColor: config.widget_review.star_color
+        }"></div>
+      </div>
+
+      <span class="mrtn-rating-count">({{ count }})</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { configProp } from "../../../utils/configProps";
+import Rating from "./Rating.vue";
+import { lightenColor } from "../../../utils/lighten-color";
+
+export default {
+  name: 'RatingBreakdown',
+
+  props: {
+    ...configProp,
+    rating: {
+      type: Object,
+      default: () => ({
+        five: 0,
+        four: 0,
+        three: 0,
+        two: 0,
+        one: 0
+      })
+    },
+
+    totalRating: {
+      type: Number,
+      default: 0
+    },
+
+
+    average: {
+      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
+      }
+    },
+
+    houverColor() {
+      if (!this.config.widget_review.star_color) return null
+      return lightenColor(this.config.widget_review.star_color, 0.9)
+    }
+  },
+
+  methods: {
+    lightenColor,
+    getBarWidth(count) {
+      if (this.totalRating === 0) return 0
+      return (count / this.totalRating) * 100
+    },
+
+    selectRating(rating) {
+      if (this.currentActive === rating) {
+        this.currentActive = null
+      } else {
+        this.currentActive = rating
+      }
+      this.$emit('rating-selected', this.currentActive)
+    }
+  },
+
+  components: {
+    Rating
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mrtn-rating-breakdown {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.mrtn-rating-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+
+  &:hover {
+    background: var(--hover-color);
+  }
+
+  &--active {
+    background: var(--hover-color);
+    box-shadow: 0 0 0 2px var(--hover-color);
+    transform: scale(1.02);
+    z-index: 10;
+  }
+}
+
+.mrtn-rating-breakdown--has-active .mrtn-rating-row:not(.mrtn-rating-row--active) {
+  opacity: 0.4;
+  filter: grayscale(0.8);
+}
+
+.mrtn-rating-stars {
+  display: flex;
+  gap: 2px;
+  min-width: 80px;
+}
+
+.mrtn-rating-star {
+  font-size: 14px;
+  color: #e5e5e5;
+
+  &--filled {
+    color: #000000;
+  }
+}
+
+.mrtn-rating-bar {
+  flex: 1;
+  height: 8px;
+  background: #f0f0f0;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.mrtn-rating-bar__fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.mrtn-rating-count {
+  font-size: 12px;
+  color: #666666;
+  min-width: 40px;
+  text-align: right;
+}
+</style>