{"version":3,"file":"Vertical.DqupOpJe.js","sources":["../../../../components/ProductTile/Overall/Vertical.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { VerticalProps } from \"./Vertical.props\"\nimport { formatMoney, formattedPricePerUnit } 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, addToCartPosition } from \"~/utils/constants\"\nimport type { GA4Entities } from \"nuxt-ga4\"\nimport { ProductCardButtonsProps } from \"~/components/Utils/ProductCardButtons.props\"\nimport { isGreaterThan } from \"~/utils/productPrice\"\nimport { productUtils } from \"~/utils/product\"\nimport { SaveForLaterProductForAction } from \"~/composables/useSavedForLater\"\nimport { getSkuItemMetadata } from \"~/utils/savedForLater/savedForLater\"\nimport { cleanObject } from \"~/utils/analytics/analytics\"\n\nconst props = withDefaults(defineProps<VerticalProps>(), {\n  oldPrice: 0,\n  pricePerUnit: 0,\n  reviews: 0,\n  rating: 0,\n  availableIn: 0,\n  inStock: false,\n  isInSavedForLater: false,\n  sellabilityStatus: \"sellable\",\n  lastItems: false,\n  showQuantity: false,\n  userLogged: false,\n  unitType: \"\",\n  showSaveForLater: true,\n  itemList: \"\",\n  brandTitle: \"\"\n})\n\nconst { addToCart } = useCart()\nconst { closeModal } = useModal()\nconst skuState = useState(\"product-unavailable-state\", () => \"\")\n\nconst emit =\n  defineEmits<{\n    (e: \"notification\"): void\n  }>()\n\nconst isAddingToCart = ref(false)\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  if (props.isInPrecheckout) {\n    closeModal(\"pre-checkout\")\n  }\n}\n\n/** Define single GA4 item */\nconst GAItemCart = computed((): GA4Entities[\"gaItem\"] => {\n  return {\n    item_id: props?.productCode ?? \"\",\n    item_name: props.title ?? \"\",\n    index: 0,\n    price: props.currentPrice,\n    item_list_name: props.itemList ?? \"\",\n    item_brand: props.brand?.name ?? \"\",\n    item_category: props.categories?.main ?? \"\",\n    item_category2: props.categories?.second ?? \"\",\n    item_category3: props.categories?.third ?? \"\",\n    item_category4: props.categories?.fourth ?? \"\",\n    item_category5: props.categories?.fifth ?? \"\",\n    currency: \"EUR\",\n    discount: props.oldPrice - props.currentPrice,\n    available: props.inStock || props.sellabilityStatus ? \"si\" : \"no\",\n    quantity: 1\n  }\n})\n\nconst handleAddToCart = (quantity: number) => {\n  const { sendEventAddToCart } = useGA4SiteEvents()\n  isAddingToCart.value = true\n\n  useTimeoutFn(() => {\n    isAddingToCart.value = false\n  }, 2000)\n  emit(\"notification\")\n\n  addToCart(\n    {\n      sku_code: props.productCode,\n      metadata: {\n        product_image: props?.productImage!,\n        slug: props.path,\n        price: props.currentPrice,\n        oldPrice: props.oldPrice,\n        inStock: props.inStock,\n        expirationDate: props?.expirationDate ?? \"\",\n        unitType: props?.unitType,\n        isDeductable: props?.isDeductable,\n        ga4Item: GAItemCart?.value ?? {}\n      }\n    },\n    quantity\n  )\n\n  if (Object.keys(GAItemCart?.value ?? {}).length) {\n    sendEventAddToCart(GAItemCart?.value ?? {}, {\n      currentPrice: props.currentPrice?.toString() ?? \"\",\n      position: addToCartPosition.carousel\n    })\n  }\n}\n\nconst handleNotifyMe = () => {\n  skuState.value = props?.productCode ?? \"\"\n\n  emit(\"notification\")\n}\n\nconst product = computed((): SaveForLaterProductForAction => {\n  return {\n    productId: props?.productCode ?? \"\",\n    skuId: \"\",\n    metadata: getSkuItemMetadata(\n      props?.productImage,\n      props?.slug ?? \"\",\n      props.currentPrice ?? 0,\n      props.oldPrice,\n      props.inStock ? 1 : 0,\n      props.unitType,\n      props.expirationDate,\n      props.isDeductable,\n      GAItemCart.value ? cleanObject(GAItemCart.value) : {}\n    )\n  }\n})\n\nconst productCardButton = computed((): ProductCardButtonsProps => {\n  return {\n    inStock: props.inStock,\n    sellabilityStatus: props.sellabilityStatus,\n    showQuantity: props.showQuantity,\n    userLogged: props.userLogged,\n    queryID: props.queryID,\n    position: props.position,\n    productCode: props.productCode,\n    path: props.path,\n    product: product.value,\n    showSaveForLater: props.showSaveForLater,\n    brandTitle: props.brandTitle\n  }\n})\n</script>\n\n<template>\n  <div\n    class=\"\n      product_tile-overall-vertical\n      relative\n      flex\n      h-full\n      w-[242px]\n      transform-gpu\n      rounded-lg\n      bg-white\n      px-4\n      py-2\n      drop-shadow-01\n      transition\n      hover:drop-shadow-02\n      md:w-auto\n    \"\n  >\n    <GAItem\n      :id=\"`${itemList}${productCode}`\"\n      :item=\"[props]\"\n      :list-name=\"itemList\"\n      :key=\"productCode ?? ''\"\n    >\n      <div class=\"flex h-full w-full flex-col justify-between gap-2\">\n        <!-- Top (image + title + reviews) -->\n        <div>\n          <div\n            class=\"\n              pointer-events-none\n              absolute\n              left-4\n              top-2\n              z-20\n              flex flex-wrap\n              gap-2\n            \"\n          >\n            <BadgeProduct v-for=\"promo in promotions\" v-bind=\"promo\" />\n          </div>\n          <div class=\"product-image-container mb-2\">\n            <GASelectItem :eventID=\"productCode\">\n              <AppLink :to=\"path\" @click=\"clickProductEvent\">\n                <UtilsWrapperImage\n                  v-if=\"productImage\"\n                  v-bind=\"productImage\"\n                  sizes=\"sm:242px md:18vw lg:18vw xl:18vw\"\n                  class=\"wrapper-image-fixed-164 wrapper-image-fit-contain\"\n                />\n\n                <UtilsWrapperImage\n                  v-else\n                  v-bind=\"fallbackImage\"\n                  class=\"wrapper-image-fixed-164 wrapper-image-fit-contain\"\n                />\n              </AppLink>\n            </GASelectItem>\n          </div>\n          <div\n            class=\"\n              title\n              beaver-bold\n              flex\n              h-fit\n              cursor-pointer\n              items-start\n              justify-self-start\n              px-1\n              text-left\n            \"\n          >\n            <GASelectItem :eventID=\"productCode\">\n              <AppLink :to=\"path\" @click=\"clickProductEvent\">\n                {{ title }}\n              </AppLink>\n            </GASelectItem>\n          </div>\n        </div>\n        <!-- Bottom -->\n        <div class=\"h-max\">\n          <div class=\"mb-2 px-1\">\n            <div\n              v-if=\"rating > 0 && reviews > 0\"\n              class=\"rating-container flex items-center gap-1\"\n            >\n              <UtilsStars :stars=\"rating\" />\n              <span class=\"mouse\">\n                {{ reviews }}\n              </span>\n            </div>\n            <div v-if=\"inStock\" class=\"price-container mt-2\">\n              <div class=\"flex items-center\">\n                <span\n                  v-if=\"currentPrice !== undefined\"\n                  class=\"discount-price elephant-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              <template\n                v-if=\"\n                  productUtils.isDisplayablePricePerUnit(pricePerUnit, unitType)\n                \"\n              >\n                <span class=\"unit-per-price mouse text-black-80\">\n                  {{\n                    formattedPricePerUnit(formatMoney(pricePerUnit), unitType)\n                  }}\n                </span>\n              </template>\n            </div>\n            <div v-else class=\"available-container\">\n              <span class=\"mouse text-negative-main\">{{\n                availableIn\n                  ? `${$t(\n                      \"productTile.overall.availableIn\"\n                    )} ${availableIn} ${$t(\n                      availableIn > 1\n                        ? \"productTile.overall.days\"\n                        : \"productTile.overall.day\"\n                    )}`\n                  : $t(\"productTile.overall.notAvailable\")\n              }}</span>\n            </div>\n          </div>\n          <div\n            class=\"button-container\"\n            v-if=\"\n              !props.disableCallToActionOnCard &&\n              currentPrice &&\n              currentPrice > 0\n            \"\n          >\n            <UtilsProductCardButtons\n              v-bind=\"productCardButton\"\n              @on-add-to-cart=\"handleAddToCart($event)\"\n              @on-notify-me=\"handleNotifyMe\"\n            />\n          </div>\n        </div>\n      </div>\n    </GAItem>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n\n.chips-container {\n  padding: inherit;\n}\n\n</style>\n"],"names":["props","__props","addToCart","useCart","closeModal","useModal","skuState","useState","emit","__emit","isAddingToCart","ref","clickProductEvent","algolia","algoliaSearch","algoliaEventClickProductAfterSearch","PRODUCT_CLICKED","algoliaEventClickProduct","GAItemCart","computed","_a","_b","_c","_d","_e","_f","handleAddToCart","quantity","sendEventAddToCart","useGA4SiteEvents","useTimeoutFn","addToCartPosition","handleNotifyMe","product","getSkuItemMetadata","cleanObject","productCardButton"],"mappings":"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"}