@ecomplus/widget-martan 1.1.22 → 1.2.0

package/src/widgets/reviews/VerifiedPurchase.vue

@@ -1,110 +0,0 @@
-<template>
-  <div>
-    <div class="mt-rating__verified">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="icon icon-tabler icon-tabler-discount-check-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="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
-          stroke-width="0"
-          fill="currentColor"
-        />
-      </svg>
-
-      <span> {{ i19verifiedBuyer }} </span>
-    </div>
-    <div class="collapse multi-collapse" :id="collapseId">
-      <div class="card card-body">
-        <h5> {{ i19howProcessVerifiedMsg }} </h5>
-
-        <p>
-          {{ i19useMartanPrivacyMsg }}
-        </p>
-
-        <p>
-          {{ i19howWeCollectMsg }}
-        </p>
-
-        <p>
-          {{ i19howClientsReviewMsg }}
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { i18n } from "@ecomplus/utils";
-import { $ } from "@ecomplus/storefront-twbs";
-
-export default {
-  name: "VerifiedPurchase",
-
-  props: {
-    showVerified: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data () {
-    return {
-      collapseId: null,
-    };
-  },
-
-  computed: {
-    i19verifiedBuyer: () => 'Comprador verificado',
-    i19howProcessVerifiedMsg: () => i18n({
-        en_us: 'How we verify and process reviews',
-        pt_br: 'Como verificamos e processamos avaliações'
-    }),
-    i19useMartanPrivacyMsg: () => i18n({
-      en_us: 'We use Martan, a web-based application that provides an online reviews and marketing solution, to collect, source, process and display reviews on our website.',
-      pt_br: 'Utilizamos o Martan, uma aplicação baseada na web que oferece uma solução de avaliações online e marketing, para coletar, originar, processar e exibir avaliações em nosso site.'
-    }),
-    i19howWeCollectMsg: () => i18n({
-      en_us: 'We automatically send review requests through Martan to customers for whom we have a record of purchasing products directly from our website. This allows us to verify the reliability of the review through technical means such as the customers email address. Reviews submitted directly through these requests are marked as "Verified Purchase", and the following statement will be displayed in the interface where the review is published: "This review was collected from a verified customer who purchased this item."',
-      pt_br: 'Enviamos automaticamente solicitações de avaliações por meio do Martan aos clientes para os quais temos registro de que compraram produtos diretamente em nosso site. Isso nos permite verificar a confiabilidade da avaliação por meio de meios técnicos, como o endereço de e-mail do cliente. As avaliações enviadas diretamente por essas solicitações são marcadas como "Compra verificada", e a seguinte declaração será exibida na interface em que a avaliação for publicada: "Esta avaliação foi coletada de um cliente verificado que comprou este item".'
-    }),
-    i19howClientsReviewMsg: () => i18n({
-      en_us: 'Customers can choose how to rate reviewed products with a score between 1 and 5. The average review score is calculated using a simple mathematical average, which is then rounded to a half or full star rating using standard rounding rules. The average review score includes reviews for which customers received discounts on future purchases for adding a photo or video to their review.',
-      pt_br: 'Os clientes podem escolher como avaliar os produtos avaliados com uma pontuação entre 1 e 5. A pontuação média das avaliações é calculada usando uma média matemática simples, que é então arredondada para uma meia ou uma avaliação de estrela completa usando regras padrão de arredondamento. A pontuação média das avaliações inclui avaliações para as quais os clientes receberam descontos em compras futuras por adicionar uma foto ou um vídeo à sua avaliação.'
-    })
-  },
-
-  methods: {
-    open: function () {
-      $("#" + this.collapseId).collapse("toggle");
-    },
-  },
-
-  mounted: function () {
-    this.collapseId = "mt-verified-" + Date.now();
-  },
-};
-</script>
-
-<style lang="scss">
-
-.mt-rating__verified {
-  font-size: 12px;
-  color: #6b6d76;
-  font-weight: 400;
-
-  svg {
-    width: 15px;
-    color: var(--success);
-  }
-}
-</style>

package/src/widgets/reviews/isRecommended.vue

@@ -1,44 +0,0 @@
-<template>
-  <div
-    class="mt-is__recomended"
-    :title="
-      recommended
-        ? i19customerRecommendProduct
-        : i19customerNoRecommendProduct
-    "
-  >
-    <span> {{ i19recommendProductQn }} </span>
-    <span>{{ recommended ? i19yes : i19no }}</span>
-  </div>
-</template>
-
-<script>
-
-import {
-  i19yes,
-  i19no
-} from '@ecomplus/i18n'
-
-import { i18n } from '@ecomplus/utils'
-
-export default {
-
-  name: "isRecommended",
-
-  props: {
-    recommended: {
-      type: Boolean,
-      default: true
-    }
-  },
-
-  computed: {
-    i19customerRecommendProduct: () => 'Cliente recomendaria o produto',
-    i19customerNoRecommendProduct: () => 'Cliente não recomendaria o produto',
-    i19no: () => i18n(i19no),
-    i19recommendProductQn: () => 'Recomendaria o produto ?',
-    i19yes: () => i18n(i19yes),
-  },
-
-};
-</script>

package/src/widgets/snippets/Rating.vue

@@ -1,71 +0,0 @@
-<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="`${stars[index]} ? 'icon-tabler-star-filled' : icon-tabler-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 }"
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <path
-        :d="stars[index] ? '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' : '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'"
-        :fill="stars[index] ? 'currentColor' : 'none'" />
-    </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(false)
-    };
-  },
-
-  mounted() {
-    this.updateStars();
-  },
-
-  methods: {
-    updateStars() {
-      const filledStars = Math.floor(this.rating);
-      this.stars = this.stars.map((star, index) => index < filledStars);
-    }
-  },
-
-  watch: {
-    rating: 'updateStars'
-  }
-};
-</script>
-
-<style lang="css">
-.martan-rating {
-  display: flex;
-  gap: 4px;
-}
-</style>

package/src/widgets/snippets/Snippets.vue

@@ -1,311 +0,0 @@
-<template>
-  <div
-    id="mt-snippet"
-    ref="wrapper"
-    class="glide martan-snippets d-none"
-    style="margin-bottom: 1rem; height: 85px"
-  >
-    <div class="glide__track" data-glide-el="track">
-      <ul class="glide__slides">
-        <li class="glide__slide" v-for="review in list" :key="review.id">
-          <div class="martan-snippets__galery" v-if="getImageUrl(review)">
-            <img
-              :alt="`Foto da avaliação do produto feita por ${review.display_name}`"
-              :src="getImageUrl(review)"
-            />
-          </div>
-
-          <div class="martan-snippets__reviews snippet-review">
-            <div class="martan-snippets__reviews-info snippet-review__info">
-              <span>{{ review.display_name }}</span>
-              <rating :rating="review.rating" :color="starColor" />
-            </div>
-
-            <div
-              class="martan-snippets__reviews-body snippet-review__body"
-              v-if="review.body"
-            >
-              <span>{{ review.body.substring(0, 115) }}...</span>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-
-    <div class="martan-snippets__controls" data-glide-el="controls">
-      <button
-        v-if="glide && glide.index > 0"
-        :title="i19previous"
-        :aria-label="i19previous"
-        class="left"
-        data-glide-dir="<"
-        v-on:click="glide.go('<')"
-      >
-        <i class="i-chevron-left"></i>
-      </button>
-
-      <button
-        v-if="glide && glide.index !== list.length - 1"
-        :title="i19next"
-        :aria-label="i19next"
-        class="right"
-        data-glide-dir=">"
-        v-on:click="glide.go('>')"
-        :data-glide="glide.index"
-      >
-        <i class="i-chevron-right"></i>
-      </button>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-import Glide, { Breakpoints } from "@glidejs/glide";
-import { i19next, i19previous } from "@ecomplus/i18n";
-import { i18n } from "@ecomplus/utils";
-
-import Rating from "./Rating.vue";
-import Quickview from "../reviews/Quickview.vue";
-import { MARTAN_API } from "../..";
-
-export default {
-  name: "SnippetWidget",
-
-  components: {
-    Rating,
-    Quickview,
-  },
-
-  data: function () {
-    return {
-      list: [],
-      glide: null,
-      isVisible: false,
-      isOpenQuickView: false,
-      selectedReview: null,
-    };
-  },
-
-  computed: {
-    i19next: () => i18n(i19next),
-    i19previous: () => i18n(i19previous),
-  },
-
-  props: {
-    storeId: {
-      type: Number,
-      required: true,
-    },
-    webId: {
-      type: String,
-      required: true,
-    },
-    product: {
-      type: String,
-      required: true,
-    },
-    starColor: {
-      type: String,
-      required: true,
-    },
-    backgroundColor: {
-      type: String,
-      default: "#f8f9fa",
-    },
-    textColor: {
-      type: String,
-      default: "#212529",
-    },
-    border: {
-      type: Boolean,
-      default: false,
-    },
-    borderColor: {
-      type: String,
-      default: "#212529",
-    },
-  },
-
-  methods: {
-    openQuickview: function ({ review, slide }) {
-      this.selectedReview = review;
-      this.isOpenQuickView = true;
-    },
-
-    onCloseQuickview: function () {
-      this.isOpenQuickView = false;
-      this.selectedReview = null;
-    },
-
-    fetch() {
-      axios({
-        url: MARTAN_API + "/reviews.json",
-        headers: {
-          "X-Store-Id": this.storeId,
-          "X-Web-Id": this.webId,
-        },
-        params: {
-          sku: this.product,
-          limit: 10,
-          offset: 0,
-        },
-      })
-        .then(({ data }) => {
-          if (data && data.result) {
-            const filted = data.result.filter((r) => r.body);
-            this.list = filted || [];
-
-            this.glide = new Glide("#mt-snippet", {
-              keyboard: false,
-              rewind: false,
-              type: "slider",
-              startAt: 0,
-              perView: 1,
-              touchAngle: 0,
-              breakpoints: {
-                1900: {
-                  perView: 1,
-                },
-                1024: {
-                  perView: 1,
-                },
-                600: {
-                  perView: 1,
-                },
-              },
-            });
-
-            return filted;
-          }
-
-          return []
-        })
-        .then((data) => {
-          if (data.length >= 2) {
-            this.$refs.wrapper.classList.remove("d-none");
-            this.glide.mount();
-            this.isVisible = true;
-          }
-
-          return this;
-        })
-        .then((t) => {
-          if (t.isVisible) {
-            this.glide.update({ perView: 1 });
-          }
-        });
-    },
-
-    getImageUrl(review) {
-      if (
-        review &&
-        review.pictures &&
-        review.pictures.length &&
-        review.pictures[0].thumb
-      ) {
-        return review.pictures[0].thumb;
-      }
-      return null;
-    },
-
-    loadWidgetOptions() {
-      this.$refs.wrapper.style.color = this.textColor;
-      this.$refs.wrapper.style.backgroundColor = this.backgroundColor;
-      if (this.border) {
-        this.$refs.wrapper.style.border = `1px solid ${this.borderColor}`;
-      }
-    },
-  },
-
-  mounted: function () {
-    if (this.storeId && this.webId && this.product) {
-      this.fetch();
-      this.loadWidgetOptions();
-    }
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.martan-snippets {
-  max-width: 525px;
-  border-radius: 8px;
-  display: flex;
-  overflow: hidden;
-  background-color: #e3e3e3;
-  box-shadow: none;
-
-  &__galery {
-    img {
-      border-radius: 6px;
-      aspect-ratio: 1 / 1;
-      width: 60px;
-      object-fit: cover;
-    }
-  }
-
-  &__reviews {
-    height: 60px;
-    max-width: fit-content;
-    flex: 1 1 0%;
-    display: flex;
-    flex-direction: column;
-    // overflow: hidden;
-
-    &-info {
-      font-weight: 500;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-  }
-
-  &__controls {
-    button {
-      background: #fff;
-      border-radius: 50%;
-      border: none;
-      color: var(--secondary);
-      cursor: pointer;
-      display: block;
-      font-size: 10px;
-      line-height: 1;
-      opacity: 0.9;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      transition: opacity 0.2s;
-      z-index: 2;
-      height: 20px;
-      width: 20px;
-      box-shadow: 0px -2px 12px rgba(0, 0, 0, 0.08);
-      transition: all ease-in-out 0.3s;
-      &:hover {
-        opacity: 0.7;
-      }
-      &.left {
-        left: -5px;
-      }
-
-      &.right {
-        right: -5px;
-      }
-    }
-  }
-
-  .glide__slide {
-    margin-left: 5px;
-    margin-right: 5px;
-    font-size: 14px;
-    line-height: 1.5;
-    font-weight: normal;
-    scroll-snap-align: start;
-    display: flex;
-    align-items: center;
-    justify-content: stretch;
-    padding: 12px;
-    gap: 12px;
-  }
-}
-</style>

package/src/widgets/snippets/index.js

@@ -1,45 +0,0 @@
-import Vue from 'vue'
-import Snippets from './Snippets.vue'
-
-export default (options = {}, elId = 'snippet_widget') => {
-  const $el = document.getElementById(elId)
-
-  if (!options || !$el || !$el.dataset || !$el.dataset.sku) {
-    return
-  }
-
-  const { sku } = $el.dataset
-
-  const storeId = options.store_id
-  const webId = options.web_id
-  const widgetOptions = options.widget_snippet || {}
-
-  const starColor = widgetOptions.star_color || null
-  const border = widgetOptions.border || false
-  const backgroundColor = widgetOptions.background_color || null
-  const textColor = widgetOptions.text_color || null
-  const borderColor = widgetOptions.border_color || null
-
-  const obs = new IntersectionObserver((_, observe) => {
-    new Vue({
-      render(h) {
-        return h(Snippets, {
-          props: {
-            product: sku,
-            storeId,
-            webId,
-            starColor,
-            border,
-            borderColor,
-            backgroundColor,
-            textColor
-          }
-        })
-      }
-    }).$mount($el)
-
-    observe.disconnect()
-  })
-
-  obs.observe($el)
-}