@nuskin/product-components 3.18.0 → 4.0.0-cx15-11969.2

package/assets/imageplaceholder.svg

@@ -1,39 +0,0 @@
-<svg id="Layer_1"
-    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 164">
-    <style>.st0{fill:#fff}.st1{fill:#dadbdb}.st2{fill:#ececec}.st3{fill:#dadbda}</style>
-    <path class="st0" d="M67.87 136.71V96.66h62.34c3.58 0 6.5 2.92 6.5 6.5v33.55H67.87z"/>
-    <path class="st1" d="M130.21 97.16c3.31 0 6 2.69 6 6v33.05H68.37V97.16h61.84m0-1H67.37v41.05h69.84v-34.05c0-3.87-3.13-7-7-7z"/>
-    <path class="st0" d="M67.87 93.96V79.5h65.34c1.93 0 3.5 1.57 3.5 3.5v10.96H67.87z"/>
-    <path class="st1" d="M133.21 80c1.65 0 3 1.35 3 3v10.46H68.37V80h64.84m0-1H67.37v15.46h69.84V83c0-2.21-1.79-4-4-4z"/>
-    <path class="st0" d="M67.87 136.71V96.66h62.34c3.58 0 6.5 2.92 6.5 6.5v33.55H67.87z"/>
-    <path class="st1" d="M130.21 97.16c3.31 0 6 2.69 6 6v33.05H68.37V97.16h61.84m0-1H67.37v41.05h69.84v-34.05c0-3.87-3.13-7-7-7z"/>
-    <path class="st0" d="M67.87 93.96V79.5h65.34c1.93 0 3.5 1.57 3.5 3.5v10.96H67.87z"/>
-    <path class="st1" d="M133.21 80c1.65 0 3 1.35 3 3v10.46H68.37V80h64.84m0-1H67.37v15.46h69.84V83c0-2.21-1.79-4-4-4z"/>
-    <path class="st2" d="M129.63 100.03H67.37v37.18h65.66v-33.78c0-1.87-1.52-3.4-3.4-3.4zM131.33 82.87H67.37v11.58h65.66v-9.88c0-.94-.76-1.7-1.7-1.7z"/>
-    <path class="st1" d="M130.21 97.16c3.31 0 6 2.69 6 6v33.05H68.37V97.16h61.84m0-1H67.37v41.05h69.84v-34.05c0-3.87-3.13-7-7-7zM133.21 80c1.65 0 3 1.35 3 3v10.46H68.37V80h64.84m0-1H67.37v15.46h69.84V83c0-2.21-1.79-4-4-4z"/>
-    <path class="st3" d="M129.63 100.03H89.07v9.34h43.96v-5.94c0-1.87-1.52-3.4-3.4-3.4z"/>
-    <path class="st0" d="M76.37 136.71V124.5h27.56a2.5 2.5 0 0 1 2.5 2.5v9.71H76.37z"/>
-    <path class="st1" d="M103.93 125c1.1 0 2 .9 2 2v9.21H76.87V125h27.06m0-1H75.87v13.21h31.06V127c0-1.66-1.34-3-3-3z"/>
-    <path class="st0" d="M76.33 121.8l-7.06-86.11v-8.4h43.99v8.44l-7.07 86.07z"/>
-    <path class="st1" d="M112.76 27.79v7.9l-7.02 85.6H76.79l-7.02-85.6v-7.9h42.99m1-1H68.77v8.94l7.1 86.56h30.78l7.1-86.56v-8.94h.01z"/>
-    <path class="st2" d="M109.58 30.67H68.77v5.06l7.1 86.57h26.92l6.79-82.69zM101.9 127.87H75.87v9.34h26.88v-8.49a.85.85 0 0 0-.85-.85z"/>
-    <path class="st1" d="M103.93 125c1.1 0 2 .9 2 2v9.21H76.87V125h27.06m0-1H75.87v13.21h31.06V127c0-1.66-1.34-3-3-3z"/>
-    <path class="st3" d="M109.58 30.67H68.77v5.06l.35 4.27h40.42l.04-.39z"/>
-    <path class="st1" d="M112.76 27.79v7.9l-7.02 85.6H76.79l-7.02-85.6v-7.9h42.99m1-1H68.77v8.94l7.1 86.56h30.78l7.1-86.56v-8.94h.01z"/>
-    <g>
-        <path class="st0" d="M27.5 136.71V99.07c0-4.41-.07-8.1-.13-11.36-.35-19.29-.35-19.29 16.62-29.61.15-.09.24-.25.24-.43V43.4c0-1.13.92-2.05 2.05-2.05h14.98c1.13 0 2.05.92 2.05 2.05v14.28c0 .18.1.35.26.44 16.61 9.04 16.6 9.98 16.49 34.13-.01 2.1-.02 4.37-.02 6.83v37.64H27.5z"/>
-        <path class="st1" d="M61.26 41.85c.85 0 1.55.7 1.55 1.55v14.28c0 .37.2.7.52.88 8.46 4.61 12.37 7.06 14.32 11.2 2 4.27 1.97 10.74 1.92 22.48-.01 2.1-.02 4.37-.02 6.83v37.14H28V99.07c0-4.41-.07-8.11-.13-11.37-.35-19-.35-19 16.38-29.17.3-.18.48-.51.48-.85V43.4c0-.85.7-1.55 1.55-1.55h14.98m0-1H46.28c-1.41 0-2.55 1.14-2.55 2.55v14.28C23.65 69.88 27 68.21 27 99.07v38.14h53.55V99.07c0-30.86 1.6-31.42-16.73-41.4V43.4a2.563 2.563 0 0 0-2.56-2.55z"/>
-    </g>
-    <g>
-        <path class="st2" d="M59.63 59.85V47.27c0-1.41-1.14-2.55-2.55-2.55H43.73v12.95C23.65 69.88 27 68.21 27 99.07v38.14h49.37v-35.96c0-30.86 1.59-31.42-16.74-41.4z"/>
-    </g>
-    <g>
-        <path class="st3" d="M27 124h49.37v13.21H27z"/>
-    </g>
-    <g>
-        <path class="st1" d="M61.26 41.85c.85 0 1.55.7 1.55 1.55v14.28c0 .37.2.7.52.88 8.46 4.61 12.37 7.06 14.32 11.2 2 4.27 1.97 10.74 1.92 22.48-.01 2.1-.02 4.37-.02 6.83v37.14H28V99.07c0-4.41-.07-8.11-.13-11.37-.35-19-.35-19 16.38-29.17.3-.18.48-.51.48-.85V43.4c0-.85.7-1.55 1.55-1.55h14.98m0-1H46.28c-1.41 0-2.55 1.14-2.55 2.55v14.28C23.65 69.88 27 68.21 27 99.07v38.14h53.55V99.07c0-30.86 1.6-31.42-16.73-41.4V43.4a2.563 2.563 0 0 0-2.56-2.55z"/>
-    </g>
-    <circle class="st0" cx="53.69" cy="87.41" r="8.41"/>
-    <circle class="st0" cx="91.26" cy="56.88" r="8.41"/>
-    <path fill="none" d="M0 0h164v164H0z"/>
-</svg>

package/components/NsProductRecsCarousel.vue

@@ -1,155 +0,0 @@
-<template>
-  <div>
-    <NuHomeCloneProductCarousel
-      :title="title"
-      :product-ids="productIds"
-      :country="country"
-      :language="language"
-      :force-loading="loading"
-      referrer="product_recommendation_carousel"
-      @click-pdp="onClickPdp"
-      @click-atc="onClickAddToCart"
-    />
-  </div>
-</template>
-
-<script>
-import { CartService } from "@nuskin/ns-shop";
-import { events } from "@nuskin/ns-util";
-import {
-  getPersonalizedRecommendations,
-  getRelatedProducts
-} from "../services/NsProductRecommendationClient";
-import NuHomeCloneProductCarousel from "./NuHomeCloneProductCarousel/NuHomeCloneProductCarousel.vue";
-
-export default {
-  name: "NsProductRecsCarousel",
-  components: { NuHomeCloneProductCarousel },
-  props: {
-    title: {
-      type: String,
-      default: ""
-    },
-    productId: {
-      type: String,
-      default: ""
-    },
-    language: {
-      type: String,
-      required: true
-    },
-    country: {
-      type: String,
-      required: true
-    }
-  },
-  data() {
-    return {
-      loading: false,
-      recommendedProductIds: [],
-      productIdsToOmit: [],
-      productsLimit: 10
-    };
-  },
-  computed: {
-    productIds() {
-      // Filter out all products marked for omission
-      return this.recommendedProductIds.filter(
-        id => !this.productIdsToOmit.includes(id)
-      );
-    }
-  },
-  watch: {
-    /**
-     * @param {string | undefined} id
-     */
-    productId(id) {
-      this.initRecommendations(id);
-    }
-  },
-  created() {
-    // When items are added to the cart, omit them from recommendations.
-    events.subscribe(events.shop.CART_UPDATED, info => {
-      if (info.add) {
-        this.productIdsToOmit.push(info.add.item.sku);
-      }
-    });
-
-    // Get the current status of the cart-data-sync process,
-    // and subscribe to any further changes to that status.
-    events.getValue(
-      events.shop.CART_SYNCED_ON_LOAD,
-      status => {
-        // Abort if the cart hasn't been synced yet,
-        // and wait for the next sync event.
-        if (!status) return;
-
-        // Cart data has been synced; get current cart contents and
-        // set as the list of products to omit from recommendations.
-        const cartItems = CartService.getItemData() || [];
-        const cartSkus = cartItems.map(item => item.sku);
-        this.productIdsToOmit = cartSkus;
-      },
-      true
-    );
-  },
-  mounted() {
-    this.initRecommendations(this.productId);
-  },
-  methods: {
-    /**
-     * @param {{
-     * sku: string,
-     * slug: string
-     * }} pdpEvent
-     */
-    onClickPdp(pdpEvent) {
-      // TODO: emit GTM event
-      console.log("pdpEvent:", pdpEvent);
-    },
-    /**
-     * @param {{
-     * sku: string,
-     * qty: number,
-     * userId: string,
-     * cntryCd: string,
-     * isAdr: boolean,
-     * referrer: string,
-     * domain: string
-     * }} atcEvent
-     */
-    onClickAddToCart(atcEvent) {
-      // TODO: emit GTM event
-      console.log("atcEvent", atcEvent);
-    },
-    /**
-     * @param {string} [productId]
-     */
-    async initRecommendations(productId) {
-      this.loading = true;
-
-      try {
-        let productIds = [];
-        if (productId) {
-          // Related Products mode
-          productIds = await getRelatedProducts(productId, this.productsLimit);
-        } else {
-          // User-Personalized mode
-          productIds = await getPersonalizedRecommendations(this.productsLimit);
-        }
-        this.recommendedProductIds = productIds;
-      } catch (err) {
-        console.error(err);
-      }
-
-      this.loading = false;
-    }
-  }
-};
-</script>
-
-<style>
-.content {
-  padding: 0;
-}
-</style>

package/components/NuHomeCloneProductCarousel/Carousel.vue

@@ -1,209 +0,0 @@
-<template>
-  <div class="swiper" data-carousel="carousel">
-    <slot />
-  </div>
-</template>
-<script>
-import Swiper, { Navigation, Pagination } from "swiper";
-import "swiper/swiper.scss";
-import "swiper/modules/pagination/pagination.scss";
-
-export const CSS_CLASSES = {
-  SWIPER_WRAPPER: "swiper-wrapper",
-  SWIPER_NAV_PREV: "swiper-button-prev",
-  SWIPER_NAV_NEXT: "swiper-button-next",
-  SWIPER_SLIDE: "swiper-slide",
-  SWIPER_PAGINATION: "swiper-pagination",
-  SWIPER_VISIBLE: "swiper-slide-visible",
-  SWIPER_DUPLICATE: "swiper-slide-duplicate"
-};
-
-export const SELECTORS = {
-  WRAPPER: '[data-carousel="wrapper"]',
-  CHEVRON_LEFT: '[data-carousel="chevron-left"]',
-  CHEVRON_RIGHT: '[data-carousel="chevron-right"]',
-  ITEMS: '[data-carousel="item"]',
-  DISABLED_TAB: "[data-disabletab]",
-  DOTS: '[data-carousel="dots"]',
-  DOT_ELEMENT: "span"
-};
-
-export default {
-  name: "Carousel",
-  props: {
-    options: {
-      default: () => ({}),
-      type: Object
-    }
-  },
-  data() {
-    return {
-      swiper: {
-        type: Object,
-        default: undefined
-      }
-    };
-  },
-  computed: {
-    carouselWrapper() {
-      return this.$el.querySelector(SELECTORS.WRAPPER);
-    },
-    carouselChevrons() {
-      return [
-        this.$el.querySelector(SELECTORS.CHEVRON_LEFT),
-        this.$el.querySelector(SELECTORS.CHEVRON_RIGHT)
-      ];
-    },
-    carouselItems() {
-      return this.$el.querySelectorAll(SELECTORS.ITEMS);
-    },
-    carouselDotContainer() {
-      return this.$el.querySelector(SELECTORS.DOTS);
-    },
-    carouselDots() {
-      return this.$el.querySelectorAll(
-        `.${CSS_CLASSES.SWIPER_PAGINATION} ${SELECTORS.DOT_ELEMENT}`
-      );
-    }
-  },
-  mounted() {
-    this.setSwiperClasses();
-    const options = this.buildOptions();
-    this.swiper = new Swiper(this.$el, options);
-    this.bindEvents();
-    this.toggleTabItemIndex();
-    this.setDotsTabIndex();
-
-    this.swiper.on("slideChange", () => {
-      this.toggleTabItemIndex();
-    });
-  },
-  methods: {
-    toggleTabItemIndex() {
-      /**
-       *  Set all carousel slides, duplicates, and their anchor tags to be non-tabbable.
-       *  Note: We are using `methods` here instead of `computed` to fetch the updated DOM after carousel's slideChange
-       */
-      const carouselItems = this.getCarouselItems();
-      const duplicateCarouselItems = this.getDuplicateCarouselItems();
-      const visibleCarouselItems = this.getVisibleCarouselItems();
-
-      [...carouselItems, ...duplicateCarouselItems].forEach(el => {
-        el.tabIndex = "-1";
-
-        const links = el.querySelectorAll("a");
-        links.forEach(link => {
-          link.tabIndex = "-1";
-        });
-      });
-
-      /**
-       * Set all visible slides and their anchor tags (with no `data-disabletab`) to be tabbable.
-       */
-      visibleCarouselItems.forEach(el => {
-        if (el.firstChild instanceof HTMLAnchorElement) {
-          el.firstChild.tabIndex = "0";
-        } else {
-          el.tabIndex = "0";
-        }
-
-        const links = el.querySelectorAll(`a:not(${SELECTORS.DISABLED_TAB})`);
-        links.forEach(link => {
-          link.tabIndex = "0";
-        });
-      });
-    },
-    setDotsTabIndex() {
-      this.carouselDots.forEach(dot => {
-        dot.tabIndex = "0";
-      });
-    },
-    getCarouselItems() {
-      return this.$el.querySelectorAll(SELECTORS.ITEMS);
-    },
-    getDuplicateCarouselItems() {
-      return this.$el.querySelectorAll(
-        `.${CSS_CLASSES.SWIPER_DUPLICATE}${SELECTORS.ITEMS}`
-      );
-    },
-    getVisibleCarouselItems() {
-      return this.$el.querySelectorAll(
-        `.${CSS_CLASSES.SWIPER_VISIBLE}${SELECTORS.ITEMS}:not(${SELECTORS.DISABLED_TAB})`
-      );
-    },
-    setSwiperClasses() {
-      const {
-        SWIPER_WRAPPER,
-        SWIPER_NAV_PREV,
-        SWIPER_NAV_NEXT,
-        SWIPER_SLIDE,
-        SWIPER_PAGINATION
-      } = CSS_CLASSES;
-      if (this.carouselWrapper)
-        this.carouselWrapper.classList.add(SWIPER_WRAPPER);
-
-      this.carouselItems.forEach(carouselItem => {
-        carouselItem.classList.add(SWIPER_SLIDE);
-      });
-
-      if (this.carouselDotContainer)
-        this.carouselDotContainer.classList.add(SWIPER_PAGINATION);
-
-      const [left, right] = this.carouselChevrons;
-      if (left) left.classList.add(SWIPER_NAV_PREV);
-      if (right) right.classList.add(SWIPER_NAV_NEXT);
-    },
-    buildOptions() {
-      const { options } = this;
-      return {
-        ...options,
-        modules: [Navigation, Pagination]
-      };
-    },
-    bindEvents() {
-      const events = ["click"];
-      events.forEach(event => {
-        this.swiper.on(event, (swiperEvent, nativeEvent) =>
-          this.$emit(event, { swiperEvent, nativeEvent })
-        );
-      });
-
-      this.carouselDots.forEach(dot => {
-        dot.addEventListener("keypress", e => {
-          if (e.key === "Enter") e.target.click();
-        });
-      });
-    }
-  }
-};
-</script>
-<style lang="scss">
-.swiper-pagination {
-  position: static;
-  margin-top: 1.25rem;
-
-  .swiper-pagination-bullet {
-    height: 10px;
-    width: 10px;
-    margin: 5px 7px;
-
-    &.swiper-pagination-bullet-active {
-      background-color: #869791;
-    }
-  }
-}
-
-.carousel-chevron {
-  .swiper-button-prev,
-  .swiper-button-next {
-    position: static;
-    right: initial;
-    left: initial;
-
-    &::after {
-      content: "";
-      display: none;
-    }
-  }
-}
-</style>

package/components/NuHomeCloneProductCarousel/CarouselChevron.vue

@@ -1,93 +0,0 @@
-<template>
-  <div data-carousel="chevron" class="carousel-chevron">
-    <a data-carousel="chevron-left" class="arrow-left effect-black" href>
-      <svg
-        viewBox="0 0 24 24"
-        preserveAspectRatio="xMidYMid meet"
-        focusable="false"
-        size="icon-sm"
-        class="icon"
-        icon-size="icon-lg"
-        style="pointer-events: none; display: block;"
-      >
-        <g
-          id="icon-narrow-angle-left-24"
-          stroke="none"
-          stroke-width="1"
-          fill="none"
-          fill-rule="evenodd"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <g transform="translate(-196, -226)" stroke="currentColor">
-            <polyline
-              transform="translate(209.000000, 237.500000) scale(-1.2, 1.2) rotate(90.000000) translate(-209.000000, -237.500000) "
-              points="200 242 209 233 218 242"
-            />
-          </g>
-        </g>
-      </svg>
-    </a>
-    <a data-carousel="chevron-right" class="arrow-right effect-black" href>
-      <svg
-        viewBox="0 0 24 24"
-        preserveAspectRatio="xMidYMid meet"
-        focusable="false"
-        size="icon-sm"
-        class="icon"
-        icon-size="icon-lg"
-        style="pointer-events: none; display: block;"
-      >
-        <g
-          id="icon-narrow-angle-right-24"
-          stroke="none"
-          stroke-width="1"
-          fill="none"
-          fill-rule="evenodd"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <g transform="translate(-196, -226)" stroke="currentColor">
-            <polyline
-              transform="translate(209.000000, 237.500000) scale(-1.2, 1.2) rotate(-90.000000) translate(-209.000000, -237.500000) "
-              points="200 242 209 233 218 242"
-            />
-          </g>
-        </g>
-      </svg>
-    </a>
-  </div>
-</template>
-<script>
-export default {
-  name: "CarouselChevron"
-};
-</script>
-<style lang="scss">
-.carousel-chevron {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-
-  .arrow-left,
-  .arrow-right {
-    height: auto;
-    width: auto;
-    padding: 10px;
-    border: 2px solid black;
-    border-radius: 3px;
-    cursor: pointer;
-    color: inherit !important;
-
-    svg {
-      height: 20px;
-      width: 20px;
-
-      &:hover {
-        fill: var(--theme__color3);
-        color: var(--theme__color3);
-      }
-    }
-  }
-}
-</style>

package/components/NuHomeCloneProductCarousel/Loader.vue

@@ -1,72 +0,0 @@
-<template>
-  <div class="preloader">
-    <div class="loader"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Loader"
-};
-</script>
-
-<style scoped lang="scss">
-.preloader {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-
-  .loader {
-    display: inline-block;
-    position: relative;
-    width: 9.375rem;
-    height: 9.375rem;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #9370db;
-    animation: spin 2s linear infinite;
-    left: 50%;
-    top: 50%;
-    margin: -4.7rem 0 0 -4.7rem;
-
-    &::before,
-    &::after {
-      content: " ";
-      position: absolute;
-      border-radius: 50%;
-      border: 3px solid transparent;
-    }
-
-    &::before {
-      top: 5px;
-      left: 5px;
-      right: 5px;
-      bottom: 5px;
-      border-top-color: #ba55d3;
-      animation: spin 3s linear infinite;
-    }
-
-    &::after {
-      top: 15px;
-      left: 15px;
-      right: 15px;
-      bottom: 15px;
-      border-top-color: #f56767;
-      animation: spin 1.5s linear infinite;
-    }
-  }
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>