{"version":3,"file":"Product.Cx4DsNVv.js","sources":["../../../../components/ProductTile/Overall/ListingMostSold.vue","../../../../components/Rails/Product.carouselOptions.ts","../../../../components/Rails/Product.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ListingMostSoldProps } from \"./ListingMostSold.props\"\nimport { truncateString } from \"~/utils/truncateString\"\nimport { formatMoney } from \"~/utils/formatters\"\nimport { PRODUCT_CLICKED } from \"~/config/algolia-insights\"\nimport {\n  algoliaEventClickProductAfterSearch,\n  algoliaEventClickProduct\n} from \"~/utils/algolia\"\nimport { algoliaSearch } from \"~/config/algolia\"\nimport { fallbackImage } from \"~/utils/constants\"\nimport { isGreaterThan } from \"~/utils/productPrice\"\nimport { VerticalProps } from \"./Vertical.props\"\n\nconst props = defineProps<ListingMostSoldProps>()\n\nconst truncateTitle = computed(() => truncateString(props.title, 25))\n\nconst clickProductEvent = () => {\n  const algolia = algoliaSearch()\n  localStorage.setItem(\n    \"algolia-last-clicked-product\",\n    `{\"queryID\": \"${props?.queryID ?? \"\"}\",\"path\": \"${props?.path ?? \"\"}\"}`\n  )\n  if (props.queryID) {\n    algoliaEventClickProductAfterSearch(\n      algolia.indices.products,\n      `${PRODUCT_CLICKED}`,\n      [`product_${props.productCode}`],\n      props.queryID,\n      [props.position ?? 1]\n    )\n  } else {\n    algoliaEventClickProduct(algolia.indices.products, `${PRODUCT_CLICKED}`, [\n      `product_${props.productCode}`\n    ])\n  }\n}\n\nconst isRatingVisible = computed(\n  () => props.rating && props.rating > 0 && props.reviews && props.reviews > 0\n)\n</script>\n\n<template>\n  <div\n    class=\"\n      relative\n      block\n      h-full\n      w-[184px]\n      transform-gpu\n      cursor-pointer\n      overflow-hidden\n      rounded-lg\n      bg-white\n      drop-shadow-01\n      hover:drop-shadow-02\n      md:w-auto\n    \"\n  >\n    <GAItem\n      :id=\"`most--sold--${props.productCode}`\"\n      :item=\"[props as VerticalProps]\"\n    >\n      <div>\n        <div class=\"relative\">\n          <div\n            v-for=\"promo in promotions\"\n            class=\"\n              absolute\n              left-0\n              top-0\n              z-40\n              mb-2\n              flex flex-wrap\n              gap-2\n              px-4\n              py-2\n            \"\n          >\n            <BadgeProduct\n              v-if=\"promo.theme == 'SCONTO'\"\n              :key=\"`promo-${promo.theme}`\"\n              v-bind=\"promo\"\n            />\n          </div>\n        </div>\n        <div>\n          <GASelectItem class=\"flex h-full flex-col\" :eventID=\"productCode\">\n            <AppLink :to=\"path\" @click=\"clickProductEvent\">\n              <UtilsWrapperImage\n                v-if=\"productImage\"\n                v-bind=\"productImage\"\n                class=\"wrapper-image-fit-contain wrapper-image-fixed-132\"\n                sizes=\"200px md:300px lg:300px\"\n              />\n              <UtilsWrapperImage\n                v-else\n                v-bind=\"fallbackImage\"\n                class=\"wrapper-image-fit-contain wrapper-image-fixed-132\"\n              />\n            </AppLink>\n          </GASelectItem>\n        </div>\n      </div>\n      <div class=\"flex grow flex-col justify-between px-4 py-2\">\n        <div class=\"block text-start\">\n          <p class=\"title beaver-bold mb-2\">\n            <GASelectItem class=\"flex h-full flex-col\" :eventID=\"productCode\">\n              <AppLink :to=\"path\" @click=\"clickProductEvent\">\n                {{ truncateTitle }}\n              </AppLink>\n            </GASelectItem>\n          </p>\n        </div>\n        <div>\n          <div\n            v-if=\"isRatingVisible\"\n            class=\"rating-container mb-2 flex items-center gap-1\"\n          >\n            <UtilsStars :stars=\"rating\" />\n            <span class=\"mouse\"> {{ reviews }}</span>\n          </div>\n          <div class=\"price-container\">\n            <div class=\"flex flex-wrap items-baseline\">\n              <span\n                v-if=\"currentPrice\"\n                class=\"discount-price hyppo-bold text-black-800\"\n              >\n                {{ formatMoney(currentPrice) }}\n              </span>\n              <span\n                v-if=\"isGreaterThan(oldPrice, currentPrice)\"\n                class=\"full-price beaver ml-2 text-black-80 line-through\"\n              >\n                {{ formatMoney(oldPrice) }}\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </GAItem>\n  </div>\n</template>\n","import { Navigation, Pagination } from \"swiper/modules\"\nimport { CarouselProps } from \"~/utils/carouselProps\"\n\nexport const smOptionsMostSold: CarouselProps = {\n  slidesPerView: \"auto\",\n  grabCursor: true,\n  pagination: {\n    enabled: true\n  },\n  modules: [Pagination],\n  theme: \"pagination-tiffany-tiffany30-bigger-padding\"\n}\n\nexport const optionsMostSold: CarouselProps = {\n  slidesPerView: \"auto\",\n  breakpoints: {\n    1024: {\n      slidesPerView: 6,\n      slidesPerGroup: 6\n    }\n  },\n  grabCursor: true,\n  navigation: true,\n  modules: [Navigation],\n  theme: \"navigation-dark-middle\"\n}\n\nexport const smOptionsCardsWithCTA: CarouselProps = {\n  slidesPerView: \"auto\",\n  grabCursor: true,\n  pagination: {\n    enabled: true\n  },\n  modules: [Pagination],\n  theme: \"pagination-tiffany-tiffany30-bigger-padding\"\n}\n\nexport const mdOptionsCardsWithCTA: CarouselProps = {\n  slidesPerView: \"auto\",\n  slidesPerGroup: 4,\n  grabCursor: true,\n  navigation: true,\n  modules: [Navigation],\n  theme: \"navigation-dark-middle\"\n}\n","<script setup lang=\"ts\">\nimport { ProductProps } from \"./Product.props\"\nimport {\n  optionsMostSold,\n  smOptionsMostSold,\n  mdOptionsCardsWithCTA,\n  smOptionsCardsWithCTA\n} from \"./Product.carouselOptions\"\nimport { sm } from \"~/utils/breakpoints\"\nimport { VerticalProps } from \"~/components/ProductTile/Overall/Vertical.props\"\n\nconst props = withDefaults(defineProps<ProductProps>(), {\n  backgroundColor: \"white\",\n  skip: \"\"\n})\n\nconst currentOptions = computed(() => {\n  if (props.typeCard === \"MostSold\") {\n    return sm.value ? smOptionsMostSold : optionsMostSold\n  } else {\n    return sm.value ? smOptionsCardsWithCTA : mdOptionsCardsWithCTA\n  }\n})\n\nconst cards = props.suggestedCards?.filter(\n  (item) => item.productCode != props.skip\n)\n\nconst chunkedProductList = chunk(cards as VerticalProps[], 12)\n\nconst itemList = props.title.toLowerCase().replace(\" \", \"\")\n</script>\n\n<template>\n  <div\n    class=\"px-4 pb-7 pt-9 md:pb-9\"\n    :class=\"{\n      'bg-white': backgroundColor === 'white',\n      'bg-tiffany-10': backgroundColor === 'tiffany',\n      'bg-grey-main': backgroundColor === 'grey'\n    }\"\n  >\n    <div class=\"relative\">\n      <div\n        class=\"\n          padded\n          mb-4\n          flex flex-wrap\n          items-center\n          justify-between\n          gap-4\n          md:mb-8\n          md:flex-nowrap\n          md:gap-8\n        \"\n        :class=\"[\n          {\n            ' flex-nowrap md:justify-normal': typeCard === 'MostSold'\n          }\n        ]\"\n      >\n        <p v-if=\"title\" class=\"dolphin-bold md:elephant-bold\">\n          {{ title }}\n        </p>\n        <UtilsButton\n          v-if=\"showAllProducts\"\n          class=\"custom-btn-pig-medium hidden w-fit cursor-pointer md:block\"\n          v-bind=\"showAllProducts\"\n          order=\"last\"\n        >\n        </UtilsButton>\n      </div>\n\n      <div class=\"padded mb-6 md:mb-8\">\n        <UtilsMarkdown v-if=\"text\" :content=\"text\" class=\"pig text-black-80\" />\n      </div>\n\n      <div v-if=\"cards?.length\" class=\"carousel-container-overflowed padded\">\n        <GAListCarouselProductRails :name=\"title\">\n          <GAItem\n            :id=\"`suggested-product-${itemList}-${\n              $route.params.product || typeCard\n            }--${j}`\"\n            :item=\"products\"\n            v-for=\"(products, j) in chunkedProductList\"\n          >\n            <GAViewItemList> </GAViewItemList>\n          </GAItem>\n\n          <AppCarousel\n            class=\"carousel-overflowed select-none\"\n            :items=\"typeCard === 'MostSold' ? cards.slice(0, 6) : cards\"\n            :swiper-props=\"currentOptions\"\n            :theme=\"currentOptions?.theme\"\n            :key=\"sm ? 1 : 0\"\n          >\n            <template #default=\"{ item }\">\n              <template v-if=\"!item.cardType\">\n                <ProductTileOverallListingMostSold\n                  class=\"swiper-tile-6\"\n                  :key=\"item.productCode\"\n                  v-if=\"typeCard === 'MostSold'\"\n                  v-bind=\"item\"\n                />\n                <ProductTileOverallVertical\n                  v-else\n                  class=\"swiper-tile-4\"\n                  v-bind=\"item\"\n                  :itemList=\"`Outlet: ${title}`\"\n                />\n              </template>\n            </template>\n          </AppCarousel>\n        </GAListCarouselProductRails>\n      </div>\n\n      <div class=\"px-4 pt-4 md:hidden\">\n        <UtilsButton\n          v-if=\"showAllProducts\"\n          class=\"custom-btn-pig-medium w-full cursor-pointer\"\n          v-bind=\"showAllProducts\"\n          order=\"last\"\n          theme=\"outlined-green\"\n        >\n        </UtilsButton>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n\n:deep(.swiper-slide:first-child > div) {\n  margin-left: 0;\n}\n\n:deep(.swiper-slide:last-child > div) {\n  margin-right: 0;\n}\n.swiper-tile-6 {\n  margin: 0 8px;\n}\n.swiper-tile-4 {\n  margin: 0 8px;\n}\n\n@screen md {\n  .swiper-tile-6 {\n    margin: 0 12px;\n    width: calc(((100vw - 142px) / 6) - 24px);\n  }\n  .swiper-tile-4 {\n    margin: 0 12px;\n    width: calc(((100vw - 142px) / 4) - 24px);\n  }\n}\n\n@screen lg {\n  .swiper-tile-6 {\n    width: calc(((100vw - 456px) / 6) - 24px);\n  }\n  .swiper-tile-4 {\n    width: calc(((100vw - 456px) / 4) - 24px);\n  }\n}\n\n</style>\n"],"names":["props","__props","truncateTitle","computed","truncateString","clickProductEvent","algolia","algoliaSearch","algoliaEventClickProductAfterSearch","PRODUCT_CLICKED","algoliaEventClickProduct","isRatingVisible","smOptionsMostSold","Pagination","optionsMostSold","Navigation","smOptionsCardsWithCTA","mdOptionsCardsWithCTA","currentOptions","sm","cards","_a","item","chunkedProductList","chunk","itemList"],"mappings":"+iDAcA,MAAAA,EAAAC,EAEAC,EAAAC,EAAA,IAAAC,EAAAJ,EAAA,MAAA,EAAA,CAAA,EAEAK,EAAA,IAAA,CACA,MAAAC,EAAAC,IACA,aAAA,QAAA,+BACA,iBAAAP,GAAA,YAAAA,EAAA,UAAA,EAAA,eAAAA,GAAA,YAAAA,EAAA,OAAA,EAAA,IACA,EAEAA,EAAA,QACAQ,EAAAF,EAAA,QAAA,SACA,GAAAG,CAAA,GACA,CAAA,WAAAT,EAAA,WAAA,EAAA,EACAA,EAAA,QACA,CAAAA,EAAA,UAAA,CAAA,CACA,EAGAU,EAAAJ,EAAA,QAAA,SAAA,GAAAG,CAAA,GAAA,CAAA,WAAAT,EAAA,WAAA,EACA,CAAA,CAEA,EAGAW,EAAAR,EAAA,IAAAH,EAAA,QAAAA,EAAA,OAAA,GAAAA,EAAA,SAAAA,EAAA,QAAA,CACA,4+CCrCaY,GAAmC,CAC9C,cAAe,OACf,WAAY,GACZ,WAAY,CACV,QAAS,EACX,EACA,QAAS,CAACC,CAAU,EACpB,MAAO,6CACT,EAEaC,GAAiC,CAC5C,cAAe,OACf,YAAa,CACX,KAAM,CACJ,cAAe,EACf,eAAgB,CAClB,CACF,EACA,WAAY,GACZ,WAAY,GACZ,QAAS,CAACC,CAAU,EACpB,MAAO,wBACT,EAEaC,GAAuC,CAClD,cAAe,OACf,WAAY,GACZ,WAAY,CACV,QAAS,EACX,EACA,QAAS,CAACH,CAAU,EACpB,MAAO,6CACT,EAEaI,GAAuC,CAClD,cAAe,OACf,eAAgB,EAChB,WAAY,GACZ,WAAY,GACZ,QAAS,CAACF,CAAU,EACpB,MAAO,wBACT,uWCjCA,MAAAf,EAAAC,EAKAiB,EAAAf,EAAA,IACAH,EAAA,WAAA,WACAmB,EAAA,MAAAP,GAAAE,GAEAK,EAAA,MAAAH,GAAAC,EACA,EAGAG,GAAAC,EAAArB,EAAA,iBAAA,YAAAqB,EAAA,OAAAC,GAAAA,EAAA,aAAAtB,EAAA,MAIAuB,EAAAC,GAAAJ,EAAA,EAAA,EAEAK,EAAAzB,EAAA,MAAA,YAAA,EAAA,QAAA,IAAA,EAAA"}