@ecomplus/widget-martan 1.1.0

package/src/widgets/reviews/HeaderExpanded.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="mt-header--expanded">
+    <average-total :average="reviews.averageTotal" />
+    <score 
+      :reviews="reviews" 
+      :starColor="starColor" 
+      @updateOrderByAverage="updateOrderBy" 
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    starColor: {
+      type: String,
+      default: '#212529'
+    },
+
+    reviews: {
+      type: Object,
+      default: {
+        list: [],
+        orderRating: null,
+        total: 0,
+        average: {
+          one: 0,
+          two: 0,
+          three: 0,
+          four: 0,
+          five: 0,
+        },
+        averageTotal: 0,
+      }
+    },
+  },
+
+  name: 'header-expanded',
+
+  components: {
+    AverageTotal: () => import("./AverageTotal.vue"),
+    AverageScore: () => import("./AverageScore.vue"),
+    Score: () => import("./Score.vue"),
+  },
+
+  methods: {
+    updateOrderBy: ({ rating }) => this.$emit('updateOrderByAverage', { rating })
+  }
+};
+</script>
+
+<style lang="scss">
+.mt-header--expanded {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e3e3e3;
+  padding-bottom: 25px;
+
+  .mt-rating__average {
+    display: flex;
+    align-items: center;
+  }
+
+  .mt-rating__average__wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    padding-top: 5px;
+  }
+
+  .mt-rating__average_total {
+    font-size: 48px;
+    margin: 0 18px 0 0;
+    padding: 0;
+  }
+}
+
+@media (max-width: 580px) {
+  .mt-rating__options {
+    max-width: 97%;
+  }
+}
+</style>

package/src/widgets/reviews/HeaderMinimal.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="mt-header--minimal">
+    <div class="rating">
+      <div style="display: flex; align-items: center; gap: 10px">
+        <rating :color="starColor" :rating="reviews.averageTotal" />
+
+        <span class="average" v-if="reviews.averageTotal > 0">
+          {{ reviews.averageTotal }}
+          <span class="baseado" style="font-size: 10px; opacity: 0.8"
+            >({{
+              reviews.total > 1
+                ? i19basedOn$1Reviews.replace("$1", reviews.total)
+                : i19basedOn$1Review.replace("$1", reviews.total)
+            }})</span
+          ></span
+        >
+        <span class="average" v-else>
+          {{ reviews.averageTotal }}
+          <span class="baseado" style="font-size: 10px; opacity: 0.8"
+            >({{ i19noReview }})</span
+          ></span
+        >
+      </div>
+
+      <Sort @onSort="onSort" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Rating from "../snippets/Rating.vue";
+import Sort from "./Sort.vue";
+
+export default {
+  props: {
+    starColor: {
+      type: String,
+      default: "#212529",
+    },
+
+    reviews: {
+      type: Object,
+      default: {
+        list: [],
+        orderRating: null,
+        total: 0,
+        average: {
+          one: 0,
+          two: 0,
+          three: 0,
+          four: 0,
+          five: 0,
+        },
+        averageTotal: 0,
+      },
+    },
+  },
+
+  name: "header-minimal",
+
+  components: {
+    Rating,
+    Sort,
+  },
+
+  computed: {
+    i19basedOn$1Reviews: () => "Baseado em $1 avaliações",
+    i19basedOn$1Review: () => "Baseado em $1 avaliação",
+    i19noReview: () => "Nenhuma avaliação",
+  },
+
+  methods: {
+    updateOrderBy: ({ rating }) =>
+      this.$emit("updateOrderByAverage", { rating }),
+
+    onSort(value) {
+      this.$emit("onSort", value);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.mt-header--minimal {
+  .rating {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    border-bottom: 1px solid #eee;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+  }
+
+  .average {
+    font-size: 26px;
+    color: #6c757d;
+  }
+
+  .mt-rating__average__sort {
+    width: 100%;
+  }
+
+  .baseado {
+    @media (max-width: 580px) {
+      display: none;
+    }
+  }
+}
+</style>

package/src/widgets/reviews/ListView.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="mt-reviews__list">
+    <card-review 
+      v-for="review in reviews.list" 
+      :key="review.id" 
+      :review="review" 
+      :starColor="starColor"
+      @openQuickview="openQuickview" 
+    />
+  </div>
+</template>
+
+<script>
+import CardReview from "./CardReview.vue";
+import Quickview from "./Quickview.vue";
+
+export default {
+  name: 'ListView',
+
+  components: {
+    CardReview,
+    Quickview,
+  },
+
+  props: {
+    starColor: {
+      type: String,
+      default: "#212529",
+    },
+
+    reviews: {
+      type: Object,
+      default: {
+        list: [],
+        orderRating: null,
+        total: 0,
+      },
+    },
+  },
+
+  methods: {
+    openQuickview: function ({ review, slide }) {
+      this.$emit('openQuickview', { review, slide })
+    },
+  },
+};
+</script>

package/src/widgets/reviews/Quickview.vue

@@ -0,0 +1,398 @@
+<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="glide mt-quickview__galery"
+            v-if="pictures.length || video"
+            ref="galery"
+          >
+            <div
+              class="mt-quickview__controls"
+              data-glide-el="controls"
+              :style="`--button--hover-color:${starColor || '#eeeeee'}`"
+            >
+              <button
+                :title="i19previous"
+                :aria-label="i19previous"
+                class="left"
+                data-glide-dir="<"
+                v-on:click="back"
+                v-if="glide && glide.index > 0"
+              >
+                <i class="i-chevron-left"></i>
+              </button>
+            </div>
+
+            <div class="glide__track" data-glide-el="track">
+              <ul class="glide__slides">
+                <li v-for="picture in pictures" :key="picture.id" class="glide__slide">
+                  <img
+                    :alt="`Foto da avaliação do produto feita por ${author}`"
+                    :src="picture.big"
+                  />
+                </li>
+
+                <li v-if="video" class="lazy-image video-wrapper" :key="video">
+                  <VideoPlayer :video="video" />
+                </li>
+              </ul>
+            </div>
+
+            <div
+              class="mt-quickview__controls"
+              data-glide-el="controls"
+              :style="`--button--hover-color:${starColor || '#eeeeee'}`"
+            >
+              <button
+                :title="i19next"
+                :aria-label="i19next"
+                data-glide-dir=">"
+                v-on:click="next"
+              >
+                <i class="i-chevron-right"></i>
+              </button>
+            </div>
+          </div>
+
+          <div class="mt-review">
+            <div class="mt-rating__group">
+              <AuthorAndRating
+                :author="author"
+                :isAnonymous="review.is_anonymous"
+                :rating="rating"
+                :starColor="starColor"
+                v-if="review"
+              />
+
+              <isRecommended :recommended="recommended" v-if="review" />
+
+              <VerifiedPurchase :showVerified="true" v-if="isVerified" />
+            </div>
+
+            <ThumbsPictures v-if="review" :review="review" @onClick="goToSlide" />
+
+            <ReviewBody :body="body" :createdAt="review.created_at" v-if="review" />
+
+            <ReviewReply :reply="reply" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Glide from "@glidejs/glide";
+import { i19next, i19previous } from "@ecomplus/i18n";
+import { i18n, formatDate } from "@ecomplus/utils";
+import $ from "../../../../storefront-twbs/src";
+import { timeAgo } from "./../../utils/time-ago";
+
+import ThumbsPictures from "./ThumbsPictures.vue";
+import VerifiedPurchase from "./VerifiedPurchase.vue";
+import AuthorAndRating from "./AuthorAndRating.vue";
+import IsRecommended from "./isRecommended.vue";
+import ReviewBody from "./ReviewBody.vue";
+import ReviewReply from "./ReviewReply.vue";
+import VideoPlayer from "./VideoPlayer.vue";
+import Rating from "../snippets/Rating.vue";
+
+export default {
+  name: "Quickview",
+
+  components: {
+    ThumbsPictures,
+    Rating,
+    VerifiedPurchase,
+    AuthorAndRating,
+    IsRecommended,
+    ReviewBody,
+    ReviewReply,
+    VideoPlayer,
+  },
+
+  props: {
+    review: Object,
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
+    starColor: String,
+  },
+
+  data() {
+    return {
+      glide: 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");
+      }
+    },
+  },
+
+  mounted() {
+    $("#martan-quickview").on("hidden.bs.modal", this.close);
+    $("#martan-quickview").on("shown.bs.modal", this.mount);
+
+    this.glide = new Glide(".mt-quickview__galery", {
+      keyboard: false,
+      rewind: true,
+      type: "carousel",
+      dragThreshold: false,
+      startAt: 0,
+      perView: 1,
+      perViewLg: 1,
+      perViewSm: 1,
+    });
+  },
+
+  beforeDestroy() {
+    if (this.glide) {
+      this.glide.destroy();
+    }
+  },
+
+  methods: {
+    mount: function () {
+      if (
+        (this.review && this.review.pictures) ||
+        (this.review && this.review.video_url)
+      ) {
+        setTimeout(() => {
+          try {
+            this.glide.mount();
+            this.glide.update({ perView: 1 });
+          } catch (error) {}
+        }, 5);
+      }
+    },
+
+    close: function () {
+      this.$emit("onClose", true);
+      try {
+        this.glide.destroy();
+      } catch (error) {}
+    },
+
+    next: function () {
+      try {
+        this.glide.go(">");
+        this.glide.update({ perView: 1 });
+      } catch (error) {}
+    },
+
+    back: function () {
+      try {
+        this.glide.go("<");
+        this.glide.update({ perView: 1 });
+      } catch (error) {}
+    },
+
+    goToSlide: function ({ slide }) {
+      try {
+        if (this.glide) this.glide.go(`=${slide}`).update({ perView: 1 });
+      } catch (error) {}
+    },
+
+    formatDate,
+    timeAgo,
+  },
+};
+</script>
+
+<style lang="scss">
+.mt-quickview {
+  padding: 0;
+
+  @media (min-width: 992px) {
+    display: flex;
+  }
+
+  @media (min-width: 1200px) {
+    display: flex;
+  }
+
+  .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;
+    }
+  }
+
+  &__info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding-bottom: 10px;
+  }
+
+  &__review {
+    padding: 1rem;
+
+    @media (min-width: 992px) {
+      max-height: 500px;
+      overflow: auto;
+    }
+
+    @media (min-width: 1200px) {
+      max-height: 500px;
+      overflow: auto;
+    }
+  }
+
+  &__controls {
+    padding: 5px;
+
+    button {
+      width: 30px;
+      height: 30px;
+      border: none;
+      border-radius: 50%;
+      transition: all ease-in-out 0.5s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        background-color: var(--button--hover-color);
+      }
+    }
+  }
+
+  .mt-review {
+    padding: 10px 20px;
+  }
+
+  .video-wrapper {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

package/src/widgets/reviews/ReviewBody.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="body-wrapper">
+    <div class="mt-review__body">{{ body }}</div>
+    <span class="mt-review__date" :title="formatDate(createdAt)">
+      {{ i19published }}
+      {{ timeAgo(createdAt) }}
+    </span>
+  </div>
+</template>
+
+<script>
+import { formatDate } from "@ecomplus/utils";
+import { timeAgo } from "../../utils/time-ago";
+
+export default {
+
+  name: "ReviewBody",
+
+  props: {
+    body: {
+      type: String,
+      required: true
+    },
+    createdAt: {
+      type: String,
+      required: true
+    },
+  },
+
+  computed: {
+    i19published: () => 'Publicado'
+  },
+
+  methods: { 
+    formatDate, 
+    timeAgo 
+  }
+};
+</script>