@ecomplus/widget-martan 1.1.0

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@ecomplus/widget-martan",
+  "version": "1.1.0",
+  "description": "Storefront plugin for martan product reviews, product q&a",
+  "main": "dist/widget-martan.min.js",
+  "module": "src/index.js",
+  "browser": "dist/widget-martan.min.js",
+  "jsdelivr": "dist/public/widget-martan.var.min.js",
+  "unpkg": "dist/public/widget-martan.var.min.js",
+  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack",
+    "serve": "webpack-dev-server"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ecomplus/storefront.git",
+    "directory": "@ecomplus/widget-martan"
+  },
+  "keywords": [
+    "ecomplus",
+    "storefront",
+    "widget",
+    "martan",
+    "reviews"
+  ],
+  "author": "Talisson Trindade <tt@martan.app>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ecomplus/storefront/issues"
+  },
+  "homepage": "https://github.com/ecomplus/storefront/tree/master/@ecomplus/widget-martan#readme",
+  "webpackOutput": {
+    "library": "widgetMartan",
+    "filename": "widget-martan.min.js"
+  }
+}

package/src/append/body.ejs

@@ -0,0 +1,79 @@
+<script>
+  document.addEventListener("DOMContentLoaded", function (event) {
+    const scriptUrl =
+      "<%- options.widgets_src || 'https://unpkg.com/@martan-app/widgets-js@1.1.23/dist/martan.umd.js' %>"
+
+    const startWidget = () => {
+      const color =
+        "<%- options.widget_rating && options.widget_rating.star_color || '#000' %>"
+      const fontSize =
+        "<%- options.widget_rating && options.widget_rating.font_size || 14 %>"
+
+      const storeId = "<%- options.store_id %>"
+      const widgetKey = "<%- options.widget_key %>"
+      const webId = "<%- options.web_id %>"
+
+      setTimeout(() => {
+        try {
+          const martan = new window.Martan({
+            storeId: parseInt(storeId, 10),
+            widgetKey,
+            webId
+          })
+
+          const init = () =>
+            martan
+              .average({
+                fontSize,
+                color,
+                classes: ['.product-card__rating']
+              })
+              .start()
+
+          const $searchEngine = document.getElementById("search-engine")
+          if (!$searchEngine) {
+            init()
+          } else {
+            const displayOnSearchPage =
+              "<%- options.widget_rating && options.widget_rating.search_page %>"
+
+            if (displayOnSearchPage === "true") {
+              const callback = () => {
+                searchEngineObserver.disconnect()
+                const $retailRow = $searchEngine.querySelectorAll(
+                  ".search-engine__retail > .row"
+                )[0]
+
+                const rowObserver = new MutationObserver(() => {
+                  setTimeout(() => init(), 100)
+                  rowObserver.disconnect()
+                })
+                rowObserver.observe($retailRow, {
+                  childList: true,
+                  subtree: true,
+                })
+              }
+              const searchEngineObserver = new MutationObserver(callback)
+              searchEngineObserver.observe($searchEngine, {
+                attributes: true,
+                childList: true,
+              })
+            }
+          }
+        } catch (error) {}
+      }, 50)
+    }
+
+    const isEnabled =
+      "<%- options.widget_rating && options.widget_rating.is_enabled %>"
+
+    if (isEnabled === "true") {
+      const script = document.createElement("script")
+      script.setAttribute("src", scriptUrl)
+      script.setAttribute("id", "martan-scripts")
+      script.async = true
+      document.body.appendChild(script)
+      script.onload = startWidget
+    }
+  })
+</script>

package/src/append/head.ejs

@@ -0,0 +1,5 @@
+<style>
+  #reviews_widget {
+    min-height: 230px;
+  }
+</style>

package/src/append/product-block.ejs

@@ -0,0 +1,5 @@
+<section id="reviews">
+  <div class="container" id="<%- options.martanReviewsTarget || 'reviews_widget' %>" data-product="<%- _.state.sku %>" style="margin-bottom: 1rem; display: <%- options && options.widget_rating && options.widget_rating.is_enabled
+    ? 'initial' : 'none' %>;">
+  </div>
+</div>

package/src/append/product-card-slots.ejs

@@ -0,0 +1,3 @@
+<div data-slot="rating">
+  <div data-total="0" data-martan-display="<%- options && options.widget_rating && options.widget_rating.display %>" data-martan-product-id="<%- opt.item && opt.item.sku %>" class="mt-review-average"></div>
+</div>

package/src/append/product-slots.ejs

@@ -0,0 +1,25 @@
+<div data-slot="rating" class="d-none">
+  <div
+    id="martan-rating__action"
+    style="margin-bottom: 1rem; display: <%- options && options.widget_rating && options.widget_rating.is_enabled ? 'initial' : 'none' %>;"
+  >
+    <a
+      class="martan-widget-rating"
+      title="Pergunte e veja opiniões de quem já comprou"
+      href="#reviews"
+    >
+      <div
+        data-martan-style="completed"
+        data-martan-product-id="<%- _.state.sku %>"
+        class="mt-review-average d-inline-block"
+      ></div>
+    </a>
+  </div>
+
+  <div
+    class="d-none"
+    id="snippet_widget"
+    data-sku="<%- _.state.sku %>"
+    style="margin-bottom: 1rem; height: 60px"
+  ></div>
+</div>

package/src/append/stamps.ejs

@@ -0,0 +1,3 @@
+<% if (!options.disable_certificate) { %>
+  <div />
+<% } %>

package/src/index.js

@@ -0,0 +1,22 @@
+import Reviews from './widgets/reviews'
+import Snippets from './widgets/snippets'
+
+export const MARTAN_API = 'https://widgets.martan.app/v1'
+
+export default (options) => {
+  if (options && options.store_id && options.web_id) {
+    if (options.widget_snippet && options.widget_snippet.is_enabled) {
+      Snippets(options)
+    }
+
+    if (options.widget_review && options.widget_review.is_enabled) {
+      Reviews(options)
+    }
+  } else {
+    console.error(
+      new Error(
+        "Can't setup Martan widget without `martanStoreId` and `martanWidgetKey`"
+      )
+    )
+  }
+}

package/src/utils/get-width.js

@@ -0,0 +1,11 @@
+import { numberToText } from './textToNumber'
+
+// calcula a % usando a média de avaliacoes / total de avaliacoes do produto
+export function getWidth(reviews, rating) {
+  if (reviews.total === 0) return '0%'
+
+  return `${(
+    (100 * reviews.average[numberToText(rating)]) /
+    reviews.total
+  ).toFixed()}%`
+}

package/src/utils/textToNumber.js

@@ -0,0 +1,31 @@
+const textToNumber = (number) => {
+  switch (number) {
+    case 'one':
+      return 1
+    case 'two':
+      return 2
+    case 'three':
+      return 3
+    case 'four':
+      return 4
+    case 'five':
+      return 5
+  }
+}
+
+const numberToText = (text) => {
+  switch (text) {
+    case 1:
+      return 'one'
+    case 2:
+      return 'two'
+    case 3:
+      return 'three'
+    case 4:
+      return 'four'
+    case 5:
+      return 'five'
+  }
+}
+
+export { textToNumber, numberToText }

package/src/utils/time-ago.js

@@ -0,0 +1,35 @@
+// Retorna uma hora em formato humanizade
+export function timeAgo (date) {
+  const segundos = Math.floor((new Date() - new Date(date)) / 1000)
+
+  const intervalos = {
+    ano: 31536000,
+    mês: 2592000,
+    semana: 604800,
+    dia: 86400,
+    hora: 3600,
+    minuto: 60,
+    segundo: 1
+  }
+
+  let contador
+
+  if (segundos === 0) {
+    return 'Agora'
+  }
+
+  for (const intervalo in intervalos) {
+    contador = Math.floor(segundos / intervalos[intervalo])
+
+    if (contador > 0) {
+      if (contador === 1) {
+        return `${contador} ${intervalo} atrás`
+      } else {
+        if (intervalo === 'mês') {
+          return `${contador} meses atrás`
+        }
+        return `${contador} ${intervalo}s atrás`
+      }
+    }
+  }
+}

package/src/widgets/reviews/AuthorAndRating.vue

@@ -0,0 +1,30 @@
+<template>
+  <div style="display: flex;align-items: baseline; justify-content: space-between">
+    <div style="display: flex; height: 20px; align-items: center; gap: 5px">
+      <div class="mt-review__author" style="padding-right: 2px">
+        <span>{{ isAnonymous ? "Anônimo" : author }}</span>
+      </div>
+
+      <rating :rating="rating" :color="starColor" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Rating from "../snippets/Rating.vue";
+
+export default {
+  name: "AuthorAndRating",
+
+  props: {
+    isAnonymous: Boolean,
+    author: String,
+    rating: Number,
+    starColor: String,
+  },
+
+  components: {
+    Rating,
+  },
+};
+</script>

package/src/widgets/reviews/AverageScore.vue

@@ -0,0 +1,160 @@
+<template>
+  <ul class="mt-rating__options" ref="options">
+    <li class="mt-rating__list" v-for="index in maxReviews" :key="index"
+      v-on:click="(e) => (reviews.total === 0 ? null : setRating(e, index))">
+      <div class="mt-rating-star">
+        <span>{{ index }}</span>
+
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="14" height="14"
+          viewBox="0 0 24 24" stroke-width="2" stroke="#e3e6e6" fill="none" stroke-linecap="round"
+          stroke-linejoin="round">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="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" />
+        </svg>
+      </div>
+
+      <div class="mt-rating-meter">
+        <div class="mt-rating-bar" v-bind:style="{
+          width: reviews.getWidth(index),
+          'background-color': config.star_color || 'red',
+        }" />
+      </div>
+
+      <div class="mt-rating-total">
+        <span>{{ reviews.average[numberToText(index)] }}</span>
+        <span>({{ reviews.getWidth(index) }})</span>
+
+        <span class="mt-rating-remove"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x"
+            width="15" height="15" 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>
+            <path d="M18 6l-12 12"></path>
+            <path d="M6 6l12 12"></path>
+          </svg></span>
+      </div>
+    </li>
+  </ul>
+</template>
+
+
+<script>
+export default {
+  name: 'AverageScore',
+
+  props: {
+  },
+
+  data() {
+    return {
+      maxReviews: 5
+    };
+  },
+
+  methods: {
+    async setRating(e, rating) {
+      const removeClass = () =>
+        new Promise((resolve) => {
+          const res = Array.from(options.value.children).map((option) => {
+            option.style.removeProperty("opacity")
+            option.children[0].childNodes[1].style.stroke = "rgb(227, 230, 230)"
+            return option.classList.remove("is-active")
+          })
+
+          resolve(res)
+        })
+
+      await removeClass().then(() => {
+        if (rating !== reviews.orderRating) {
+          const el = Array.from(options.value.children)[rating - 1]
+          el.classList.add("is-active")
+          el.style.opacity = 1
+          el.children[0].childNodes[1].style.stroke = config.star_color
+          Array.from(options.value.children).forEach((option, index) => {
+            if (index !== rating - 1) {
+              option.style.opacity = ".5"
+            }
+          })
+        }
+      })
+
+      if (rating === reviews.orderRating) {
+        reviews.orderRating = null
+      } else {
+        reviews.offset = 0
+        reviews.orderRating = rating
+      }
+    }
+  },
+};
+</script>
+
+<style>
+.mt-rating-remove {
+  visibility: hidden;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.mt-rating__list.is-active .mt-rating-remove {
+  visibility: visible;
+}
+
+.mt-rating__options li:hover {
+  cursor: pointer;
+}
+
+.mt-rating__list {
+  display: flex;
+  align-items: center;
+  height: 23px;
+}
+
+.mt-rating__list.is-active .mt-rating-total,
+.mt-rating__list:hover .mt-rating-total {
+  visibility: visible;
+}
+
+.mt-rating__list:hover {
+  opacity: 0.9;
+}
+
+.mt-rating-meter {
+  overflow: hidden;
+  box-shadow: inset 0 0 0 1px #e3e6e6;
+  background-color: #e3e6e6;
+  height: 10px;
+  width: 100%;
+  border-radius: 50px;
+  display: flex;
+}
+
+.mt-rating__options {
+  margin: 0;
+  list-style: none;
+  padding: 0;
+  max-width: 800px;
+  width: 100%;
+}
+
+.mt-rating-star {
+  display: flex;
+  width: 30px;
+  justify-content: space-around;
+  font-size: 12px;
+  color: #757373;
+  align-items: center;
+  margin-left: 5px;
+}
+
+.mt-rating-total {
+  visibility: hidden;
+  width: 50px;
+  font-size: 12px;
+  color: #757373;
+  margin-left: 2px;
+  display: flex;
+  gap: 3px;
+}
+</style>

package/src/widgets/reviews/AverageTotal.vue

@@ -0,0 +1,35 @@
+<script>
+export default {
+  name: 'AverageTotal',
+
+  props: {
+    average: {
+      type: Number,
+      default: 0
+    }
+  },
+};
+</script>
+
+<template>
+  <div class="mt-rating__resume" :title="'Nota média ' + average">
+    <div class="mt-rating__average">
+      <div class="mt-rating__average__wrapper">
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star-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="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"
+            stroke-width="0" fill="currentColor" />
+        </svg>
+      </div>
+
+      <div style="margin-left: 10px">
+        <p class="mt-rating__average--total">
+          {{ average }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

package/src/widgets/reviews/CardReview.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="mt-review">
+    <div class="mt-rating__group">
+      <author-and-rating
+        v-if="review"
+        :author="review.display_name"
+        :isAnonymous="review.is_anonymous"
+        :rating="review.rating"
+        :starColor="starColor"
+      />
+
+      <is-recommended  v-if="review" :recommended="review.is_recommended" />
+
+      <verified-purchase v-if="isVerified" />
+    </div>
+
+    <thumbs-pictures
+      :review="review"
+      @onClick="(e) => $emit('openQuickview', e)"
+    />
+
+    <review-body
+      v-if="review"
+      :body="review.body"
+      :createdAt="review.created_at"
+    />
+
+    <review-reply :reply="review.reply" />
+  </div>
+</template>
+
+<script>
+import Rating from "../snippets/Rating.vue";
+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";
+
+export default {
+  name: "CardReview",
+
+  props: {
+    review: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+
+    starColor: {
+      type: String,
+      default: "#212529",
+    },
+  },
+
+  components: {
+    ThumbsPictures,
+    Rating,
+    VerifiedPurchase,
+    AuthorAndRating,
+    IsRecommended,
+    ReviewBody,
+    ReviewReply,
+  },
+
+  computed: {
+    isVerified: function () {
+      return this.review && this.review.verified_purchase;
+    },
+  },
+};
+</script>
+
+<style>
+.mt-reply__wrapper {
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 580px) {
+  .body-wrapper {
+    padding: 0px;
+  }
+}
+</style>

package/src/widgets/reviews/GridView.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="mt-gridview">
+    <div class="mt-gridview__card" v-for="review in reviews.list" :key="review.id" @click="(e) => openQuickview(review)">
+      <div class="mt-gridview__thumb" v-if="getPictureURL(review)">
+        <img :src="getPictureURL(review)" :alt="review.title" @click="() => openQuickview(review)" />
+      </div>
+
+      <div class="mt-gridview__detail">
+        <span class="mt-gridview__author">{{ review.display_name.substr(0, 16) }}</span>
+        <rating :rating="review.rating" :color="starColor" />
+        <verified-purchase v-if="review.verified_purchase" />
+        <span class="mt-gridview__body">{{ review.body.substr(0, 250) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Rating from '../snippets/Rating.vue';
+import CardReview from "./CardReview.vue";
+import VerifiedPurchase from './VerifiedPurchase.vue';
+
+export default {
+  name: "GridView",
+
+  components: {
+    CardReview,
+    Rating,
+    VerifiedPurchase,
+  },
+
+  props: {
+    starColor: {
+      type: String,
+      default: "#212529",
+    },
+
+    reviews: {
+      type: Object,
+      default: {
+        list: [],
+        orderRating: null,
+        total: 0,
+      },
+    },
+  },
+
+  methods: {
+    openQuickview: function (review) {
+      this.$emit('openQuickview', { review })
+    },
+
+    getPictureURL(review) {
+      if (review && review.pictures && review.pictures.length && review.pictures[0].normal) {
+        return review.pictures[0].normal
+      }
+
+      return false
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.mt-gridview {
+  transition: all 0.7s ease;
+  column-count: 2;
+  column-gap: 10px;
+  margin-right: auto;
+  margin-left: auto;
+
+  @media only screen and (min-width: 600px) {
+    column-count: 3;
+  }
+
+  @media only screen and (min-width: 768px) {
+    column-count: 4;
+  }
+
+  @media only screen and (min-width: 992px) {
+    column-count: 5;
+  }
+
+  &__card {
+    width: 100%;
+    border: 1px #d5d9d9 solid;
+    border-radius: 6px;
+    cursor: pointer;
+    margin: 0;
+    display: grid;
+    grid-template-rows: 1fr auto;
+    margin-bottom: 10px;
+    break-inside: avoid;
+  }
+
+  &__detail {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__thumb {
+    img {
+      max-width: 250px;
+      width: 100%;
+      object-fit: contain;
+      border-top-right-radius: 5px;
+      border-top-left-radius: 5px;
+    }
+  }
+}
+</style>