@ecomplus/widget-martan 1.1.22 → 1.2.0

package/src/widgets/reviews/Quickview.vue

@@ -1,397 +0,0 @@
-<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 "@ecomplus/storefront-twbs";
-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

@@ -1,39 +0,0 @@
-<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>

package/src/widgets/reviews/ThumbsPictures.vue

@@ -1,135 +0,0 @@
-<template>
-  <div class="media">
-    <ul v-if="pictures.length || video" class="media__list">
-      <li
-        v-if="pictures.length"
-        class="mt-lazy-image"
-        v-for="(picture, index) in pictures"
-        :key="picture.thumb"
-        @click="onClick(index)"
-      >
-        <img
-          :alt="title"
-          :data-src="picture.thumb"
-          data-loaded="false"
-          class="media__preview"
-        />
-      </li>
-
-      <li
-        v-if="video"
-        class="lazy-image"
-        @click="onClick(pictures.length)"
-        :key="video"
-        title="Abrir vídeo"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="30"
-          height="30"
-          viewBox="0 0 24 24"
-          stroke-width="2"
-          stroke="#ffffff"
-          fill="none"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-          <path d="M7 4v16l13 -8z"></path>
-        </svg>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "ThumbsPictures",
-
-  props: {
-    review: {
-      type: Object,
-      required: true
-    },
-  },
-
-  computed: {
-    pictures: function () {
-      return this.review.pictures || [];
-    },
-
-    video: function () {
-      return this.review.video_url || null;
-    },
-
-    title: function () {
-      return this.review.title || null;
-    },
-  },
-
-  mounted() {
-    const images = Array.from(document.querySelectorAll(".mt-lazy-image img"));
-    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));
-  },
-
-  methods: {
-    onClick(slide) {
-      const { review } = this;
-      this.$emit("onClick", { review, slide });
-    },
-  },
-};
-</script>
-
-<style lang="css">
-.media--open {
-  width: 500px;
-}
-
-.media__preview {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.media__list {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  padding-top: 0.75rem;
-}
-
-.media__list li {
-  -webkit-tap-highlight-color: transparent;
-  box-sizing: border-box;
-  position: relative;
-  user-select: none;
-  overflow: hidden;
-  border-radius: 5px;
-  text-decoration: none;
-  border: 0.125rem solid #383a3e;
-  background-color: #383a3e;
-  padding: 0;
-  width: 2.375rem;
-  min-width: 2.375rem;
-  height: 2.375rem;
-  margin-right: 0.25rem;
-  transition: all ease 0.3s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-</style>

package/src/widgets/reviews/Total.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="mt-rating__average__sort">
-    <span class="mt-rating__count" v-if="!!reviews.orderRating">{{ Array.isArray(reviews.list) ? reviews.list.length : 0
-    }}
-      {{
-        Array.isArray(reviews.list) && reviews.list.length > 1 || reviews.list.length === 0
-        ? i19reviews 
-        : i19review
-      }}
-      <span>{{ reviews.orderRating }} {{
-        Array.isArray(reviews.list) && reviews.list.length > 1 || reviews.list.length === 0
-        ? i19stars
-        : i19star
-      }}</span>
-    </span>
-
-    <span class="mt-rating__count" v-else>
-      {{ reviews.total }}
-      {{
-        reviews.total > 1 || reviews.total === 0 
-        ? i19reviews 
-        : i19review
-      }}
-    </span>
-
-    <sort @onSort="onSort"/>
-  </div>
-</template>
-
-<script>
-import Sort from './Sort.vue';
-
-export default {
-  name: 'Total',
-
-  props: {
-    reviews: {
-      type: Object,
-      default: {
-        list: [],
-        orderRating: null,
-        total: 0
-      }
-    }
-  },
-
-  computed: {
-
-    i19stars: () => 'Estrelas',
-    i19star: () => 'Estrela',
-    i19reviews: () => 'Avaliações',
-    i19review: () => 'Avaliação',
-    orderRating () {
-      return reviews.orderRating;
-    },
-  },
-
-  components: { Sort },
-
-  methods: {
-    onSort(value) {
-      this.$emit('onSort', value)
-    }
-  }
-};
-</script>
-
-<style lang="css">
-.mt-rating__average__sort {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px 00;
-}
-
-.mt-rating__count {
-  color: #6b6d76;
-}
-</style>