{"version":3,"file":"contractor-reviews-6d669d86.js","sources":["../../../../src/scripts/modules/contractor-reviews.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport RatingStars from './rating-stars';\nimport Swiper, { Navigation, Pagination, Keyboard } from 'swiper';\nimport 'swiper/css/bundle';\nimport { BREAKPOINTS } from '../helpers/breakpoints';\n\ninterface ContractorReviewsResponse {\n  data: UserReview[];\n  reviewUrl: string;\n}\n\ninterface UserReview {\n  id: number;\n  review: string;\n  authorName: string;\n  authorUrl: string;\n  language: string;\n  profilePhotoUrl: string;\n  rating: string;\n  relativeTimeDescription: string;\n  Etime: string;\n  mapUrl: string;\n  deleted: number;\n  timestamp: Date;\n}\n\nclass ContractorReviews extends Component {\n  private reviewsEndpoint: string;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.reviewsEndpoint = this.el.dataset.reviewsEndpoint || '';\n\n    this.getReviews();\n  }\n\n  setupDefaults() {\n    this.dom = {\n      reviewsWrapper: this.el.querySelector<HTMLElement>(\n        '.contractor-reviews__reviews'\n      ),\n      noReviewsMessage: this.el.querySelector<HTMLElement>(\n        '.contractor-reviews__message'\n      ),\n      controls: this.el.querySelector<HTMLElement>(\n        '.contractor-reviews__controls'\n      ),\n      allReviewsButton: this.el.querySelector<HTMLElement>(\n        '.contractor-reviews__cta'\n      ),\n      pagination: this.el.querySelector<HTMLElement>('.swiper-pagination'),\n      nextArrow: this.el.querySelector<HTMLElement>('.swiper-button-next'),\n      prevArrow: this.el.querySelector<HTMLElement>('.swiper-button-prev')\n    };\n  }\n\n  initSwiper(element: HTMLElement) {\n    Swiper.use([Navigation, Pagination, Keyboard]);\n    const { pagination, nextArrow, prevArrow } = this.dom;\n\n    new Swiper(element, {\n      spaceBetween: 28,\n      slidesPerView: 1,\n      pagination: {\n        el: pagination as HTMLElement\n      },\n      navigation: {\n        prevEl: prevArrow as HTMLElement,\n        nextEl: nextArrow as HTMLElement\n      },\n      breakpoints: {\n        [BREAKPOINTS.tabletLandscape]: {\n          enabled: false,\n          slidesPerView: 3\n        }\n      },\n      on: {\n        init: swiper => {\n          this.updateLayers(swiper);\n        },\n        activeIndexChange: swiper => {\n          this.updateLayers(swiper);\n        }\n      },\n      keyboard: {\n        enabled: true,\n        onlyInViewport: true\n      }\n    });\n  }\n\n  updateLayers(swiper: Swiper) {\n    const dataLayer = (this.dom.nextArrow as HTMLElement).dataset.layer;\n    if (dataLayer) {\n      const dataLayerObj = JSON.parse(dataLayer);\n      dataLayerObj.event_label = `${swiper.activeIndex + 1} of ${\n        swiper.slides.length\n      }`;\n      (this.dom.nextArrow as HTMLElement).dataset.layer =\n        JSON.stringify(dataLayerObj);\n      (this.dom.prevArrow as HTMLElement).dataset.layer =\n        JSON.stringify(dataLayerObj);\n    }\n  }\n\n  generateRatingStars(rating: string) {\n    return `\n    <div class=\"rating-stars\" data-rating=\"${rating}\">\n      <div class=\"rating-stars__stars\">\n        <div class=\"rating-star\"></div>\n        <div class=\"rating-star\"></div>\n        <div class=\"rating-star\"></div>\n        <div class=\"rating-star\"></div>\n        <div class=\"rating-star\"></div>\n      </div>\n    </div>\n    `;\n  }\n\n  generateReviews(reviews: UserReview[]) {\n    let reviewsHTML = '';\n\n    reviews.forEach(review => {\n      const author = review.authorName.split(' ');\n      const firstNameInitial = author[0]?.charAt(0)?.toUpperCase();\n      const lastNameInitial = author[1]?.charAt(0)?.toUpperCase();\n      // Create a Date object from the timestamp\n      const date = new Date(review.timestamp);\n      // Format the date in \"Month Day, Year\" format.\n      const formattedDate = date.toLocaleDateString('en-US', {\n        year: 'numeric',\n        month: 'short',\n        day: 'numeric'\n      });\n\n      reviewsHTML += `\n      <li class=\"contractor-reviews__item swiper-slide\">\n        <blockquote class=\"contractor-reviews__blockquote\">\n          ${this.generateRatingStars(review.rating)}\n          <p class=\"contractor-reviews__quote\">\n          <span class=\"contractor-reviews__quote-text\">${review.review}</span>\n          </p>\n          <cite class=\"contractor-reviews__cite\">\n          ${\n            firstNameInitial\n              ? `${firstNameInitial}${\n                  lastNameInitial ? `.${lastNameInitial}` : ''\n                }, `\n              : ''\n          }\n          ${formattedDate}</cite>\n        </blockquote>\n      </li>\n      `;\n    });\n\n    return reviewsHTML;\n  }\n\n  async getReviews() {\n    const controls = this.dom.controls as HTMLElement;\n    const reviewsWrapper = this.dom.reviewsWrapper as HTMLElement;\n    const allReviewsButton = this.dom.allReviewsButton as HTMLAnchorElement;\n\n    controls?.style.setProperty('display', 'none');\n    reviewsWrapper?.style.setProperty('display', 'none');\n    allReviewsButton?.style.setProperty('display', 'none');\n\n    try {\n      const response = await fetch(this.reviewsEndpoint);\n      const data = (await response.json()) as ContractorReviewsResponse;\n      const reviews = data.data;\n\n      allReviewsButton.href = data.reviewUrl;\n\n      if (reviews.length > 0 && this.dom.reviewsWrapper) {\n        reviewsWrapper.innerHTML = `\n        <ul class=\"contractors-reviews__list swiper-wrapper\">\n        ${this.generateReviews(reviews)}     \n        </ul>\n        `;\n\n        (this.dom.noReviewsMessage as HTMLElement)?.style.setProperty(\n          'display',\n          'none'\n        );\n\n        const ratingStars =\n          this.el.querySelectorAll<HTMLElement>('.rating-stars');\n        const slides = this.el.querySelectorAll<HTMLElement>('.swiper-slide');\n\n        if (slides.length > 1) {\n          controls?.style.removeProperty('display');\n        }\n\n        ratingStars.forEach(ratingStar => {\n          new RatingStars(ratingStar);\n        });\n\n        reviewsWrapper.style.removeProperty('display');\n        allReviewsButton.style.removeProperty('display');\n\n        if (this.dom.reviewsWrapper) {\n          this.initSwiper(this.dom.reviewsWrapper as HTMLElement);\n        }\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  }\n}\n\nexport default ContractorReviews;\n"],"names":["ContractorReviews","Component","el","__publicField","element","Swiper","Navigation","Pagination","Keyboard","pagination","nextArrow","prevArrow","BREAKPOINTS","swiper","dataLayer","dataLayerObj","rating","reviews","reviewsHTML","review","author","firstNameInitial","_b","_a","lastNameInitial","_d","_c","formattedDate","controls","reviewsWrapper","allReviewsButton","data","ratingStars","ratingStar","RatingStars","error"],"mappings":"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"}