{"version":3,"file":"CpProductCardHomeStream.FpfHXZSc.js","sources":["../../../../components/cp/CpProductCard/CpProductCardList/CpProductCardList.vue","../../../../components/cp/CpProductCard/CpProductCardHome/CpProductCardHomeStream/CpProductCardHomeStream.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import {computed} from 'vue';\n  import {useI18n} from 'vue-i18n';\n  import useCpBem from '~/composables/useCpBem';\n  import CpText from '~/components/cp/CpText/CpText.vue';\n  import CpProductImage from '~/components/cp/CpProductImage/CpProductImage.vue';\n  import CpPillCard from '~/components/cp/CpPill/CpPillCard/CpPillCard.vue';\n  import CpProductRate from '~/components/cp/CpProductRate/CpProductRate.vue';\n  import {getEtaMessage} from '~/utils/etaUtils';\n  import CpNuxtLink from '~/components/cp/CpNuxtLink/CpNuxtLink.vue';\n  import type {IEtaInfo} from '~/types';\n\n  const props = defineProps<{\n    kind: 'FeaturedOffer'|'Standard'|'Offer'|'Featured'|'Oos'|'OosOffer',\n    productType: 'physical'|'esd',\n    pillLarge: boolean,\n    pillShort: boolean,\n    rate: boolean,\n    rateValue: number,\n    reviews: number,\n    freeShipping: boolean,\n    link: string,\n    title: string,\n    hasDiscount: boolean,\n    discount: string | boolean,\n    picture: string,\n    imageTitle: string,\n    price: number,\n    tPrice: number,\n    id: string,\n    eta: boolean,\n    etaData?: IEtaInfo | { messages: IEtaInfo['messages'] }\n  }>();\n\n  const {b, e, em} = useCpBem('cp-product-card-list');\n  const {t} = useI18n();\n  const displayMessage = computed(() => getEtaMessage(props.etaData));\n  const priceFormat = props.price.toLocaleString('es-MX', {style: 'currency', currency: 'MXN'});\n  const tPriceFormat = props.tPrice.toLocaleString('es-MX', {style: 'currency', currency: 'MXN'});\n</script>\n\n<template>\n    <CpNuxtLink :class=\"b\" page-name=\"details\" :link=\"link\">\n        <div>\n            <!--Pills-->\n            <div v-if=\"kind || productType === 'esd'\" :class=\"em('pills', {'catalog': eta})\">\n                <CpPillCard\n                    v-if=\"kind === 'Featured'\"\n                    variant=\"featuredProduct\"\n                    kind=\"standard\"\n                    :class=\"e('first')\"\n                />\n                <CpPillCard\n                    v-if=\"discount && kind === 'FeaturedOffer'\"\n                    variant=\"featuredProduct\"\n                    kind=\"discount\"\n                    :discount=\"discount\"\n                    :class=\"e('first')\"\n                />\n                <CpPillCard\n                    v-if=\"discount && kind === 'Offer'\"\n                    variant=\"offer\"\n                    :discount=\"discount\"\n                    :class=\"e('first')\"\n                />\n                <CpPillCard\n                    v-if=\"kind === 'Oos' || kind === 'OosOffer'\"\n                    variant=\"oosEol\"\n                    :class=\"e('first')\"\n                />\n                <CpPillCard\n                    v-if=\"productType === 'esd' && pillLarge\"\n                    variant=\"esd\"\n                    :class=\"e('first')\"\n                />\n                <CpPillCard\n                    v-if=\"productType === 'esd' && pillShort\"\n                    variant=\"esd\"\n                    short\n                    :class=\"kind !== 'Standard' ? e('esd-pill') : ''\"\n                />\n            </div>\n            <!--Image-->\n            <div :class=\"e('image-container')\">\n                <CpProductImage\n                    :class=\"e('image')\"\n                    :picture=\"picture\"\n                    :title=\"imageTitle\"\n                    :height=\"120\"\n                    :width=\"120\"\n                />\n            </div>\n        </div>\n        <div :class=\"e('right-container')\">\n            <!--Product Info-->\n            <div :class=\"em('info-container', {'eta': eta})\">\n                <CpText\n                    :class=\"e('text')\"\n                    variant=\"body-regular\"\n                    type=\"primary\"\n                    data-testid=\"product-card-list-text\"\n                >\n                    {{ title }}\n                </CpText>\n                <CpProductRate\n                    v-if=\"rate\"\n                    :rate=\"rateValue\"\n                    :total-reviews=\"reviews\"\n                    :hide-count=\"reviews < 1\"\n                />\n                <div v-if=\"eta && productType === 'physical' && displayMessage\" :class=\"e('eta')\">\n                    <CpTextParser :text=\"displayMessage\" variant=\"caption\" />\n                </div>\n                <div v-if=\"eta && productType === 'esd'\" :class=\"e('eta')\">\n                    <CpText variant=\"caption-bold\">\n                        {{ t('immediateDelivery') }}\n                    </CpText>\n                    <CpText variant=\"caption-regular\">\n                        {{ t('processingOrder') }}\n                    </CpText>\n                </div>\n                <CpText\n                    v-if=\"freeShipping && productType !== 'esd'\"\n                    variant=\"caption-bold\"\n                    type=\"mkt-dark\"\n                    :class=\"e('link')\"\n                >\n                    {{ t('freeShipping') }}\n                </CpText>\n            </div>\n            <!--Price-->\n            <div :class=\"e('price-container')\">\n                <CpText v-if=\"hasDiscount\" :class=\"e('discount-price')\" variant=\"price-from\" type=\"neutral\">\n                    {{ tPriceFormat }}\n                </CpText>\n                <CpText\n                    :variant=\"hasDiscount ? 'price-offer' :'price-regular'\"\n                    :type=\"hasDiscount ? 'mkt-dark' : 'neutral-dark'\"\n                >\n                    {{ priceFormat }}\n                </CpText>\n            </div>\n        </div>\n    </CpNuxtLink>\n</template>\n\n<style scoped lang=\"scss\">\n  .cp-product-card-list {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px;\n    height: 100%;\n    text-decoration: none;\n    &__row {\n      display: flex;\n    }\n    &__column {\n      display: flex;\n      flex-direction: column;\n    }\n    &__first {\n      z-index: 1;\n    }\n    &__right-container {\n      display: flex;\n      flex-direction: column;\n      flex-grow: 1;\n      justify-content: space-between;\n      height: 100%;\n      gap: 8px;\n    }\n    &__pills {\n      margin-top: -13px;\n      margin-left: -9px;\n      display: flex;\n      position: absolute;\n        &--catalog {\n          margin-top: -22px;\n        }\n    }\n    &__text {\n      display: -webkit-box;\n      -webkit-line-clamp: 3;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    &__image-container {\n      height: 120px;\n      width: 120px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    &__info-container {\n      height: 88px;\n      display: flex;\n      flex-direction: column;\n      &--eta {\n        height: 116px;\n      }\n    }\n    &__eta {\n      line-height: 12px;\n      margin-top: 4px;\n    }\n    &__price-container {\n      display: flex;\n      justify-content: flex-end;\n      align-items: center;\n      gap:8px;\n      height: fit-content;\n    }\n    &__discount-price {\n      text-decoration: line-through;\n    }\n\n    &__esd-pill {\n      margin-left: -6px;\n    }\n  }\n</style>\n\n<i18n locale=\"es-US\">\n    freeShipping: \"+Envío gratis\"\n    receiveIt: \"Recibelo entre el \"\n    immediateDelivery: \"Entrega inmediata \"\n    processingOrder: \"al procesar tu pedido\"\n</i18n>\n","<script setup lang=\"ts\">\n    import useCpBem from '~/composables/useCpBem';\n    import CpProductCardList from '~/components/cp/CpProductCard/CpProductCardList/CpProductCardList.vue';\n\n    defineProps<{\n      kind: 'FeaturedOffer'|'Standard'|'Offer'|'Featured'|'Oos'|'OosOffer',\n      productType: 'physical'|'esd',\n      pillLarge: boolean,\n      pillShort: boolean,\n      rate: boolean,\n      rateValue: number,\n      reviews: number,\n      freeShipping: boolean,\n      link: string,\n      title: string,\n      hasDiscount: boolean,\n      discount: string | boolean,\n      picture: string,\n      imageTitle: string,\n      price: number,\n      tPrice: number,\n      id: string,\n    }>();\n\n    const {b, e} = useCpBem('cp-product-card-stream');\n</script>\n\n<template>\n    <div :class=\"b\">\n        <CpProductCardList\n            :id=\"id\"\n            :kind=\"kind\"\n            :product-type=\"productType\"\n            :pill-large=\"pillLarge\"\n            :pill-short=\"pillShort\"\n            :rate=\"rate\"\n            :rate-value=\"rateValue\"\n            :reviews=\"reviews\"\n            :free-shipping=\"freeShipping\"\n            :link=\"link\"\n            :title=\"title\"\n            :has-discount=\"hasDiscount\"\n            :discount=\"discount\"\n            :picture=\"picture\"\n            :image-title=\"imageTitle\"\n            :price=\"price\"\n            :t-price=\"tPrice\"\n        />\n    </div>\n</template>\n\n<style scoped lang=\"scss\">\n    .cp-product-card-stream {\n      border: 1px solid var(--color-neutral-extra-light);\n      border-radius: 8px;\n        //max-width: 330px;\n        height: 146px;\n    }\n</style>\n"],"names":["props","__props","b","e","em","useCpBem","t","useI18n","displayMessage","computed","getEtaMessage","priceFormat","tPriceFormat"],"mappings":"iiCAYE,MAAMA,EAAQC,EAsBR,CAAC,EAAAC,EAAG,EAAAC,EAAG,GAAAC,CAAE,EAAIC,EAAS,sBAAsB,EAC5C,CAAC,EAAAC,GAAKC,IACNC,EAAiBC,EAAS,IAAMC,EAAcV,EAAM,OAAO,CAAC,EAC5DW,EAAcX,EAAM,MAAM,eAAe,QAAS,CAAC,MAAO,WAAY,SAAU,KAAM,CAAA,EACtFY,EAAeZ,EAAM,OAAO,eAAe,QAAS,CAAC,MAAO,WAAY,SAAU,KAAM,CAAA,s3GCd5F,KAAM,CAAC,EAAAE,EAAG,EAAAC,CAAC,EAAIE,EAAS,wBAAwB"}