{"version":3,"file":"ListingCard.C-giyhbO.js","sources":["../../src/components/ListingCard.vue"],"sourcesContent":["<script setup>\nimport { computed } from 'vue'\nimport {relativeUrl, formatPrice, snakeCase} from '@helpers/utils'\nimport Image from '@components/Image.vue'\nimport Icon from '@components/Icon.vue'\nimport ListingRating from '@components/ListingRating.vue'\nimport ListingTags from '@components/ListingTags.vue'\nimport AddToCartButton from '@components/AddToCartButton.vue'\n\nconst props = defineProps({\n  listing: {\n    type: Object,\n    required: true,\n  },\n  showTag: {\n    type: Boolean,\n    default: true,\n  },\n})\n\nconst url = computed(() => {\n  return relativeUrl(props.listing.url)\n})\n\nconst mainImage = computed(() => {\n  return props.listing?.images?.[0]\n})\n\nconst availableProducts = computed(() => {\n  return props.listing?.products?.filter(p => p.available_for_sale) || []\n})\n\nconst selectedProduct = computed(() => {\n  return availableProducts?.value?.[0] || props.listing?.products?.[0]\n})\n\nconst price = computed(() => {\n  return selectedProduct.value?.price\n})\nconst compareAtPrice = computed(() => {\n  return selectedProduct.value?.compare_at_price\n})\nconst hasDiscount = computed(() => {\n  return Number(compareAtPrice.value) > Number(price.value)\n})\nconst isBundle = computed(() => {\n  return selectedProduct.value?.quantity > 1\n})\nconst savings = computed(() => {\n  return Math.round(((compareAtPrice.value - price.value) / compareAtPrice.value) * 100)\n})\nconst pieces = computed(() => {\n  return selectedProduct.value?.stocks?.length === 1\n      ? (selectedProduct.value?.stocks?.[0]?.pieces * selectedProduct.value?.stocks?.[0]?.pivot?.quantity)\n      : 0\n})\nconst addToCartPayload = computed(() => {\n  return {\n    product_id: selectedProduct.value?.id,\n    listing_plan_id: null,\n    quantity: 1,\n  }\n})\n\nfunction navigate(e) {\n  if (e.target.classList.contains('rating__text--total')) {\n    e.preventDefault()\n    window.location.href = url.value + '#reviews'\n  }\n}\n\nconst tag = computed(() => {\n  let availableTags = ['New', 'New Look', 'Low Stock', 'Flash Sale', 'Limited Release']\n  return props.listing?.tags?.find(tag => availableTags.includes(tag)) || ''\n})\n</script>\n\n<template>\n  <div class=\"listing\">\n    <template v-if=\"showTag && tag\">\n      <div :class=\"['listing__tag', 'listing__tag--' + snakeCase(tag)]\">{{ tag }}</div>\n    </template>\n\n    <a :href=\"url\" class=\"listing__link\" @click=\"navigate\">\n      <div class=\"listing__image\" v-if=\"mainImage\">\n        <Image\n            :src=\"mainImage\"\n            :alt=\"mainImage.alt || listing.title\"\n            sizes=\"(max-width: 768px) calc(50vw - 56px), 100vw\"\n            loading=\"lazy\"\n        />\n      </div>\n      <div class=\"listing__info\">\n        <div v-if=\"savings > 0\" class=\"listing__savings\">\n          <span>{{ savings }}% Off</span>\n        </div>\n\n        <div class=\"listing__stats\">\n          <div>\n            <ListingRating\n                class=\"listing__rating\"\n                :total=\"listing.total_reviews\"\n                :rating=\"listing.rating\"\n            />\n          </div>\n\n          <div v-if=\"price !== null\" class=\"listing__price\">\n            <span v-if=\"hasDiscount\" class=\"listing__price--compare\">${{ formatPrice(compareAtPrice) }}</span>\n            <span>${{ formatPrice(price) }}</span>\n            <small v-if=\"pieces > 1\">/{{ pieces }}ct</small>\n          </div>\n        </div>\n        <h5 class=\"listing__title\">{{ listing.title }}</h5>\n        <ListingTags :listing=\"listing\" />\n      </div>\n    </a>\n    <slot name=\"button\">\n      <AddToCartButton class=\"listing__button\" :listing=\"listing\" :payload=\"addToCartPayload\" :disabled=\"availableProducts.length === 0 || price === null\">Add To Cart</AddToCartButton>\n    </slot>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.listing {\n  display: flex;\n  flex-direction: column;\n  border-radius: 12px;\n  background: var(--shades-white, #FFF);\n  box-shadow: 0 4px 6px rgba(16, 24, 40, 0.1), 0 10px 15px rgba(16, 24, 40, 0.1);\n  height: 100%;\n  position: relative;\n\n  @media screen and (min-width: 768px) {\n    border-radius: 16px;\n  }\n\n  &:hover {\n    .listing__title {\n      text-decoration: underline;\n    }\n  }\n\n  .listing__savings {\n    text-align: center;\n    padding: 4px 10px;\n    border-radius: 6px;\n    background: rgba(215, 88, 88, 0.15);\n    color: var(--Watermelon, #D75858);\n    font-family: Outfit, 'Outfit Fallback', Arial, serif;\n    font-size: 14px;\n    font-style: italic;\n    font-weight: 700;\n    line-height: 17.6px;\n    z-index: 1;\n    margin-bottom: 8px;\n  }\n\n  .listing__tag {\n    position: absolute;\n    background-color: #3B717B;\n    top: 10px;\n    left: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    padding: 6px 10px;\n    z-index: 1;\n    color: #FFF;\n    text-align: center;\n    font-family: Outfit, serif;\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 17.6px; /* 110% */\n    text-transform: uppercase;\n\n    &.listing__tag--flash-sale {\n      background: var(--Orange---terracotta, #DB7E5A);\n    }\n\n    &.listing__tag--low-stock {\n      background: var(--Watermelon, #D75858);\n    }\n\n    &.listing__tag--new {\n      background: var(--Green-Bright, #79B36E);\n    }\n\n    &.listing__tag--limited-edition {\n      background: var(--Light-navy, #183D4F);\n    }\n\n    &.listing__tag--new-look {\n      background: var(--Green-Bright, #79B36E);\n    }\n  }\n\n  .listing__link {\n    display: flex;\n    flex-direction: column;\n    text-decoration: none;\n    flex-grow: 1;\n  }\n\n  .listing__image {\n    position: relative;\n\n    img {\n      border-radius: 8px 8px 0 0;\n      width: 100%;\n      height: auto;\n      text-align: center;\n    }\n  }\n\n  .listing__info {\n    padding: 8px;\n    overflow: hidden;\n\n    @media screen and (min-width: 768px) {\n      padding: 0 16px 16px 16px;\n    }\n\n    .listing__title {\n      color: var(--neutral-1000, #3C3833);\n      font-family: Outfit, 'Outfit Fallback', Arial, serif;\n      font-size: 18px;\n      font-weight: 700;\n      line-height: 18px;\n      margin: 4px 0 8px 0;\n\n      @media screen and (min-width: 768px) {\n        font-size: 20px;\n        line-height: 24px;\n        margin: 8px 0;\n      }\n    }\n\n    .listing__stats {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n\n      :deep(.rating) {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 2px;\n\n        .rating__text {\n          font-size: 12px;\n          padding-left: 0;\n          font-weight: 500;\n\n          @media screen and (min-width: 768px) {\n            padding-top: 0;\n            font-size: 14px;\n          }\n\n          &.rating__text--total {\n            color: #3B717B;\n            text-decoration-line: underline;\n          }\n        }\n\n        img {\n          height: 12px;\n\n          @media screen and (min-width: 768px) {\n            height: 16px;\n          }\n        }\n      }\n\n      .listing__price {\n        color: var(--neutral-1000, #3C3833);\n        font-family: Outfit, 'Outfit Fallback', Arial, serif;\n        font-size: 14px;\n        font-weight: 600;\n        line-height: 20px;\n        text-align: right;\n\n        @media screen and (min-width: 768px) {\n          font-size: 16px;\n        }\n\n        .listing__price--compare {\n          text-decoration: line-through;\n          color: var(--Neutral-400, #B1AFAD);\n          font-weight: 300;\n          padding-right: 2px;\n\n          @media screen and (max-width: 520px) {\n            line-height: 12px;\n            display: block;\n          }\n        }\n\n        small {\n          color: var(--Neutral-1000, #3C3833);\n          font-size: 10px;\n          font-weight: 300;\n\n          @media screen and (min-width: 768px) {\n            font-size: 12px;\n          }\n        }\n      }\n    }\n  }\n\n  :deep(.listing__button) {\n    cursor: pointer;\n    border-radius: 0 0 8px 8px;\n    background: #DB7E5A;\n    box-shadow: 0 4px 6px -4px rgba(16, 24, 40, 0.10), 0px 10px 15px -3px rgba(16, 24, 40, 0.10);\n\n    color: var(--shades-white, #FFF);\n    text-align: center;\n    font-family: Outfit, 'Outfit Fallback', Arial, serif;\n    font-size: 12px;\n    font-weight: 800;\n    line-height: 20px;\n    text-transform: uppercase;\n    padding: 6px;\n\n    width: 100%;\n    outline: none;\n    border: 0;\n\n    @media screen and (min-width: 768px) {\n      padding: 12px 10px;\n      font-size: 16px;\n    }\n\n    &:hover {\n      background: var(--Light-Orange, #EFA670);\n    }\n  }\n}\n</style>\n"],"names":["props","__props","url","computed","relativeUrl","mainImage","availableProducts","p","selectedProduct","price","compareAtPrice","hasDiscount","isBundle","savings","pieces","addToCartPayload","navigate","e","tag","availableTags","_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_6","_hoisted_10","_openBlock","_createElementBlock","$props","$setup","_normalizeClass","_createCommentVNode","_createElementVNode","_hoisted_3","_createVNode","_hoisted_5","_toDisplayString","_hoisted_7","_hoisted_8","_hoisted_9","_renderSlot","_ctx","_withCtx","_createTextVNode"],"mappings":"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"}