{"version":3,"file":"Testimonials.4e6975b4.js","sources":["../../../../../../../../libs/fe/center-kit/src/components/common/StarRating.svelte","../../../../../../../../libs/fe/center-kit/src/ui-utils/swipe.util.ts","../../../../../../../../libs/fe/center-kit/src/components/common/Carousel3D.svelte","../../../../../../../../libs/fe/center-kit/src/constants/testimonies.constant.ts","../../../../../../../../libs/fe/center-kit/src/components/site/payer/Testimonials.svelte"],"sourcesContent":["<script lang=\"ts\">\n  let starRatios: number[] = [];\n\n  export let maxRating = 5;\n  export let rating: number;\n  export let parentBackgroundColor = 'rgb(218, 218, 218)';\n  export let childBackgroundColor = '#f1c40f';\n\n  const constructStarRatios = (rate: number) => {\n    const whole = Math.floor(Number(rate));\n    const fraction = Number(rate) - whole;\n\n    const starsConstruct: number[] = [];\n\n    const isLessThanMaxRating = () => starsConstruct.length < maxRating;\n\n    for (let i = 0; i < whole && isLessThanMaxRating(); i++) {\n      starsConstruct.push(1);\n    }\n    if (fraction) {\n      starsConstruct.push(fraction);\n    }\n    while (isLessThanMaxRating()) {\n      starsConstruct.push(0);\n    }\n\n    return starsConstruct;\n  };\n\n  $: starRatios = constructStarRatios(rating);\n</script>\n\n<div class=\"stars-wrapper\">\n  {#each starRatios as ratio, index (index)}\n    <div class=\"star-container\" style={`background: ${parentBackgroundColor}`}>\n      <div\n        class=\"star-glider\"\n        style={`background: ${childBackgroundColor}; transform: ${`translateX(${\n          (1 - ratio) * -100\n        }%)`}`}\n      />\n    </div>\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  .stars-wrapper {\n    @apply flex items-center justify-center w-max h-full gap-1;\n\n    --width: 15.92px;\n    --height: var(--width);\n\n    @screen xl {\n      @apply gap-2;\n      --width: 24px;\n    }\n\n    .star-container {\n      @apply relative;\n      width: var(--width);\n      height: var(--width);\n      background: rgb(218, 218, 218);\n      clip-path: polygon(\n        50% 0%,\n        61% 35%,\n        98% 35%,\n        68% 57%,\n        79% 91%,\n        50% 70%,\n        21% 91%,\n        32% 57%,\n        2% 35%,\n        39% 35%\n      );\n\n      .star-glider {\n        @apply bg-yellow absolute inset-0;\n        width: var(--width);\n        height: var(--width);\n      }\n    }\n  }\n</style>\n","let xAxis = null;\nlet yAxis = null;\n\nexport const handleTouchStart = (event: TouchEvent): void => {\n  const firstTouch = event.touches[0];\n  xAxis = firstTouch.clientX;\n  yAxis = firstTouch.clientY;\n};\n\ninterface IConfig {\n  callback: (direction: 1 | -1) => void;\n  swipeUpDown?: boolean;\n  swipeLeftRight?: boolean;\n}\n\nexport const handleTouchMove =\n  ({ callback, swipeUpDown = false, swipeLeftRight = true }: IConfig) =>\n  (event: TouchEvent): void => {\n    if (!xAxis || !yAxis) return;\n\n    const xUp = event.touches[0].clientX;\n    const yUp = event.touches[0].clientY;\n\n    const xDiff = xAxis - xUp;\n    const yDiff = yAxis - yUp;\n\n    if (Math.abs(xDiff) > Math.abs(yDiff) && swipeLeftRight) {\n      if (xDiff > 0) {\n        // Swipe right\n        callback(-1);\n      } else {\n        // Swipe left\n        callback(1);\n      }\n    } else if (swipeUpDown) {\n      if (yDiff > 0) {\n        // Swipe down\n        callback(1);\n      } else {\n        // Swipe up\n        callback(-1);\n      }\n    }\n\n    /* reset values */\n    xAxis = null;\n    yAxis = null;\n  };\n","<script lang=\"ts\">\n  import { onMount } from 'svelte';\n  import {\n    StarRating,\n    Icon,\n    ICarousel,\n    ICarouselSlice,\n    ICarouselDictionary,\n  } from '@centerhealth/fe/center-kit';\n  import { handleTouchStart, handleTouchMove } from '../../ui-utils';\n\n  export let data: ICarousel[];\n  export let maxRating = 5;\n\n  const MAX_DISPLAY = 3;\n\n  // raw data length must be a multiple of three (3)\n  if (data.length % MAX_DISPLAY !== 0) {\n    const errorMessage = `Carousel array data length must be a multiple of ${MAX_DISPLAY} to display all slices`;\n    throw new Error(errorMessage);\n  }\n\n  onMount(() => {\n    // preload images on client\n    data.forEach(({ image }) => {\n      new Image().src = image;\n    });\n  });\n\n  const createDataSlice = (rawData: ICarousel[]): ICarouselSlice[][] => {\n    const collection: ICarouselSlice[][] = [];\n    let tempSlice = [];\n    let count = 0;\n\n    for (let i = 0; i < rawData.length; i++) {\n      if (tempSlice.length < MAX_DISPLAY) {\n        tempSlice.push({ ...rawData[i], carouselId: count + 1, isActive: false });\n      }\n\n      if (tempSlice.length === MAX_DISPLAY) {\n        collection.push(tempSlice);\n        tempSlice = [];\n        count = 0;\n        continue;\n      }\n      count += 1;\n    }\n\n    return collection;\n  };\n\n  const dataSlice = createDataSlice(data);\n  let currentSlice = 0;\n\n  const initializeData = (sliceIndex: number): ICarouselDictionary => {\n    return dataSlice[sliceIndex].reduce((acc, cv) => ({ ...acc, [cv.carouselId]: cv }), {});\n  };\n\n  const getCurrentData = (slideData: ICarouselDictionary, slideId: number) => {\n    slideData[slideId].isActive = true;\n    return slideData[slideId];\n  };\n\n  let currentId = dataSlice[currentSlice].length;\n  let dataArrayToObject = initializeData(currentSlice);\n  $: dataArrayToObject = initializeData(currentSlice);\n  let currentCarouselData = dataArrayToObject[currentId];\n  $: currentCarouselData = getCurrentData(dataArrayToObject, currentId);\n\n  const handleCarouselDataChange = (direction: -1 | 1) => {\n    let nextId: number;\n    if (direction === -1) {\n      // backwards\n      if (currentId === 3) {\n        currentSlice = currentSlice === 0 ? dataSlice.length - 1 : currentSlice - 1;\n      }\n      nextId = currentId + 1 > dataSlice[currentSlice].length ? 1 : currentId + 1;\n    } else {\n      // forward\n      if (currentId === 1) {\n        currentSlice = currentSlice === dataSlice.length - 1 ? 0 : currentSlice + 1;\n      }\n      nextId = currentId - 1 < 1 ? dataSlice[currentSlice].length : currentId - 1;\n    }\n\n    // set previous display active state to false\n    dataArrayToObject[currentId].isActive = false;\n\n    // set new display\n    currentCarouselData = dataArrayToObject[nextId];\n    // update currentId to the nextId\n    currentId = nextId;\n  };\n\n  const allowableRotation = 360 / MAX_DISPLAY;\n  let rotationDegree = 0;\n  let imagesContainerRef: HTMLDivElement;\n\n  const handleCarousel = (direction: -1 | 1) => {\n    rotationDegree = rotationDegree + direction * allowableRotation;\n    imagesContainerRef.style.transform = `rotateY(${rotationDegree}deg)`;\n    handleCarouselDataChange(direction);\n  };\n</script>\n\n<div class=\"carousel\">\n  <div class=\"display-container\">\n    <div class=\"container-3d\">\n      <div class=\"images-container\" bind:this={imagesContainerRef}>\n        {#each Object.values(dataArrayToObject) as { carouselId, image, label, isActive } (carouselId)}\n          <div\n            class=\"img-wrapper\"\n            class:not-active={!isActive}\n            on:touchstart={handleTouchStart}\n            on:touchmove={handleTouchMove({ callback: handleCarousel })}\n          >\n            <img width=\"210\" height=\"320\" src={image} alt={label} loading=\"lazy\" />\n          </div>\n        {/each}\n      </div>\n    </div>\n  </div>\n\n  <div class=\"informations\">\n    <div class=\"carousel-text\">\n      <p>{@html currentCarouselData.text}</p>\n    </div>\n    <div class=\"label-container\">\n      <p>{currentCarouselData.label}</p>\n    </div>\n    <div class=\"rating\">\n      <StarRating {maxRating} rating={currentCarouselData.rating} />\n    </div>\n\n    <div class=\"controls\">\n      <button type=\"button\" class=\"previous-btn\" on:click={() => handleCarousel(-1)}>\n        <Icon svgName=\"chevron-blue\" type=\"svg\" size=\"medium\" />\n      </button>\n\n      <button type=\"button\" class=\"rotate-180 next-btn\" on:click={() => handleCarousel(1)}>\n        <Icon svgName=\"chevron-blue\" type=\"svg\" size=\"medium\" />\n      </button>\n    </div>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @mixin childTransform($dim) {\n    @for $i from 1 through 6 {\n      &:nth-child(#{$i}) {\n        transform: rotateY(#{$i * 120}deg) translateZ(#{$dim}px);\n      }\n    }\n  }\n\n  .carousel {\n    margin-top: 50px;\n\n    @screen xxl {\n      @apply grid grid-cols-2;\n    }\n\n    .display-container {\n      .container-3d {\n        @apply relative;\n        margin: 0 auto;\n        width: 220px;\n        height: 320px;\n        perspective: 1000px;\n\n        .images-container {\n          @apply w-full h-full absolute;\n          transform-style: preserve-3d;\n          transition: transform 0.5s;\n\n          .img-wrapper {\n            @apply overflow-hidden rounded-2xl block absolute;\n            width: 210px;\n            height: 320px;\n\n            &.not-active {\n              filter: blur(2px);\n              &::after {\n                @apply absolute inset-0;\n                content: '';\n                opacity: 1;\n                background: linear-gradient(\n                  108.02deg,\n                  rgba(47, 152, 249, 0.5) 21.82%,\n                  rgba(106, 184, 255, 0.5) 83.88%\n                );\n                animation: fade 1s ease;\n\n                @keyframes fade {\n                  from {\n                    opacity: 0;\n                  }\n                  to {\n                    opacity: 1;\n                  }\n                }\n              }\n            }\n\n            @include childTransform(100);\n\n            @media screen and (min-width: 425px) {\n              @include childTransform(130);\n            }\n\n            @media screen and (min-width: 550px) {\n              @include childTransform(160);\n            }\n\n            @screen sm {\n              @include childTransform(180);\n            }\n\n            @screen md {\n              @include childTransform(200);\n            }\n\n            @screen xxl {\n              @include childTransform(225);\n            }\n\n            img {\n              @apply w-full h-full;\n            }\n          }\n        }\n      }\n    }\n\n    .informations {\n      .carousel-text {\n        @apply px-3;\n        margin-top: 10vw;\n\n        @screen md {\n          @apply m-0 p-0;\n          margin-top: 100px;\n        }\n\n        @screen xxl {\n          @apply m-0;\n        }\n\n        p {\n          @apply text-center text-sm text-gray-dark;\n          line-height: 21px;\n          max-width: 700px;\n          margin: 0 auto;\n\n          @screen sm {\n            @apply text-base;\n            line-height: 25px;\n          }\n\n          @screen lg {\n            @apply text-lg;\n            line-height: 29px;\n          }\n\n          @screen xxl {\n            @apply text-lg text-left;\n            line-height: 32px;\n            min-width: 500px;\n          }\n        }\n      }\n\n      .label-container {\n        margin-top: 16px;\n        p {\n          @apply text-center font-semibold text-lg;\n          text-transform: capitalize;\n          line-height: 32px;\n\n          @screen xxl {\n            @apply text-xl text-left;\n            line-height: 44px;\n          }\n        }\n      }\n\n      .rating {\n        @apply flex justify-center items-center;\n        margin-top: 10px;\n\n        @screen xxl {\n          @apply justify-start;\n        }\n      }\n\n      .controls {\n        @apply flex items-center justify-center  gap-5;\n        margin-top: 16px;\n\n        --width: 48px;\n\n        @screen xxl {\n          @apply justify-start;\n          margin-top: 32px;\n          --width: 40px;\n        }\n\n        .previous-btn,\n        .next-btn {\n          @apply bg-white rounded-2xl flex items-center justify-center;\n          width: var(--width);\n          height: var(--width);\n          box-shadow: 1.45972px 2.91945px 5.83889px rgba(149, 197, 255, 0.14);\n        }\n        .next-btn {\n          box-shadow: 1.45972px -2.91945px 5.83889px rgba(149, 197, 255, 0.14);\n        }\n      }\n    }\n  }\n</style>\n","/* eslint-disable max-len */\nexport const TESTIMONIES = [\n  {\n    image: '/assets/images/testimonials/Jessyka.webp',\n    rating: 5,\n    label: 'Jessyka',\n    text: 'Having Center Health on my side is the easiest thing for me. As a new mom, I need all the help I can get! I can check my blood sugar from my phone, no more dealing with pharmacies, and I get all the supplies shipped straight to my door!',\n  },\n  {\n    image: '/assets/images/testimonials/MoniqueN.webp',\n    rating: 5,\n    label: 'Monique',\n    text: 'Super easy, super convenient, what more can you ask for?',\n  },\n  {\n    image: '/assets/images/testimonials/LindsayCrenshaw.webp',\n    rating: 5,\n    label: 'Lindsay',\n    text: 'Center Health makes it effortless to manage your diabetes, manage your diabetic supplies, and if you’re a busy mom like me: it is the absolute best solution out there for Type 2 diabetes management!',\n  },\n  {\n    image: '/assets/images/testimonials/AJLove.webp',\n    rating: 5,\n    label: 'AJ',\n    text: '<b>I would 100% recommend this product and it has made my life so much easier, thank you Center Health!</b><br/><br/><p>To all of my fellow diabetics out there: do yourself a favor and get yourself one of these meters, cause it has made my life so much easier.</p>',\n  },\n  {\n    image: '/assets/images/testimonials/HaydenHandy.webp',\n    rating: 5,\n    label: 'Hayden',\n    text: \"I love Center, it is absolutely amazing and such a game changer in my diabetes management. The Center app has so many insights on what my blood sugar’s doing, I can log absolutely everything in here. RUN, don't walk -- go get a Center Health meter!\",\n  },\n  {\n    image: '/assets/images/testimonials/HayleyFord.webp',\n    rating: 5,\n    label: 'Hayley',\n    text: \"One of the things I love the most is that everything is stored in one place! Your glucose levels, your insulin doses, your exercise, the amount of carbs you’re eating - it's all stored in one spot and makes tracking trends so much easier! <br/><br/>Another thing that I love is that it's so slim and compact, and not bulky at all.\",\n  },\n];\n","<script lang=\"ts\">\n  import { Carousel3D } from '@centerhealth/fe/center-kit';\n  import { TESTIMONIES } from '@centerhealth/fe/center-kit';\n</script>\n\n<section class=\"testimonial-section\">\n  <div class=\"testimonials\">\n    <div class=\"section-title\">\n      <h2 class=\"pb-3\">\n        <span class=\"text-blue\">Born and bred</span> as a direct to consumer product\n      </h2>\n      <p>Loved by thousands of patients across the US</p>\n    </div>\n\n    <Carousel3D data={TESTIMONIES} />\n  </div>\n</section>\n\n<style lang=\"scss\">\n  .testimonial-section {\n    @apply bg-white mt-8 mb-[146px];\n\n    .testimonials {\n      @apply container mx-auto;\n\n      .section-title {\n        @apply mb-7;\n        @screen xxl {\n          @apply pl-10;\n        }\n\n        h2 {\n          @apply text-center;\n\n          @screen xs {\n            @apply text-center;\n          }\n\n          @screen xxl {\n            @apply text-left;\n            width: 760px;\n          }\n        }\n\n        p {\n          @apply text-lg text-gray-dark text-center mb-32;\n\n          @screen xxl {\n            @apply text-xl text-left;\n          }\n        }\n      }\n    }\n  }\n</style>\n"],"names":["attr","div0","div0_style_value","ctx","insert_hydration","target","div1","anchor","append_hydration","dirty","i","div","xAxis","yAxis","handleTouchStart","event","firstTouch","handleTouchMove","callback","swipeUpDown","swipeLeftRight","xUp","yUp","xDiff","yDiff","img","img_src_value","raw_value","t2_value","div8","div2","div7","div3","p0","div4","p1","div5","div6","button0","button1","current","set_data","t2","starrating_changes","imagesContainerRef","$$value","click_handler","handleCarousel","click_handler_1","TESTIMONIES","section","h2","span","p"],"mappings":"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"}