{"version":3,"file":"CpProductCard.s_SaMQGn.js","sources":["../../../../components/cp/CpProductCard/CpProductCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import {useI18n} from 'vue-i18n';\n    import {computed} from 'vue';\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 CpNuxtLink from '~/components/cp/CpNuxtLink/CpNuxtLink.vue';\n    import CpTextParser from '~/components/cp/CpTextParser/CpTextParser.vue';\n    import {getEtaMessage} from '~/utils/etaUtils';\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      rowLarge?: boolean,\n      rowShort?: 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      /** indicate that the card is not used in home page or catalog  */\n      standard?: boolean,\n      etaData?: IEtaInfo | { messages: IEtaInfo['messages'] }\n    }>();\n\n    const {b, e, em} = useCpBem('cp-product-card');\n    const {t} = useI18n();\n\n    // props.productType === 'physical' ? 'physical' : 'esd'\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<template>\n    <CpNuxtLink :class=\"b\" data-testid=\"product-card\" page-name=\"details\" :link=\"link\">\n        <!--Pills-->\n        <div v-if=\"kind || productType === 'esd'\" :class=\"e('pills')\">\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            <CpPillCard\n                v-if=\"productType === 'physical' && rowLarge\"\n                variant=\"rowProduct\"\n                :class=\"e('first')\"\n            />\n            <CpPillCard\n                v-if=\"productType === 'physical' && rowShort\"\n                variant=\"rowProduct\"\n                short\n                :class=\"kind !== 'Standard' ? e('esd-pill') : ''\"\n            />\n        </div>\n        <!--Image-->\n        <div :class=\"em('image-container', {standard: standard})\">\n            <CpProductImage\n                :class=\"e('image')\"\n                :picture=\"picture\"\n                :title=\"imageTitle\"\n                :height=\"standard ? 120 : 140\"\n                :width=\"standard ? 120 : 140\"\n            />\n        </div>\n        <!--Product Info-->\n        <div :class=\"em('info-container', {'eta': eta})\" data-testid=\"product-card-info\">\n            <CpProductRate\n                v-if=\"rate\"\n                :rate=\"rateValue\"\n                :total-reviews=\"reviews\"\n                :hide-count=\"reviews < 1\"\n            />\n            <div class=\"pt-1\">\n                <CpText variant=\"body-regular\" type=\"primary\" :truncate-lines=\"3\" data-testid=\"product-card-title\">\n                    {{ title }}\n                </CpText>\n            </div>\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('shipping')\"\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                data-testid=\"product-price\"\n            >\n                {{ priceFormat }}\n            </CpText>\n        </div>\n    </CpNuxtLink>\n</template>\n\n<style scoped lang=\"scss\">\n    .cp-product-card {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        padding: 8px;\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: 2;\n        }\n        &__pills {\n          margin-top: -9px;\n          margin-left: -9px;\n          display: flex;\n          position: absolute;\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\n        &__shipping {\n          padding-top: 1px;\n        }\n        &__image-container {\n          height: 140px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          &--standard {\n            height: 120px;\n            max-width: 120px;\n            align-self: center;\n          }\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          height: 40px;\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-end;\n          align-items: flex-end;\n        }\n        &__discount-price {\n          text-decoration: line-through;\n        }\n        &__esd-pill {\n          margin-left: -6px;\n          z-index: 1;\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"],"names":["props","__props","b","e","em","useCpBem","t","useI18n","displayMessage","computed","getEtaMessage","priceFormat","tPriceFormat"],"mappings":"2nCAaI,MAAMA,EAAQC,EA0BR,CAAC,EAAAC,EAAG,EAAAC,EAAG,GAAAC,CAAE,EAAIC,EAAS,iBAAiB,EACvC,CAAC,EAAAC,GAAKC,IAGNC,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"}