{"version":3,"file":"CarDetailExpertReviewStats-b85d0cda.js","sources":["../../src/components/car-detail/CarDetailExpertReviewStats.vue"],"sourcesContent":["<template>\r\n  <article class=\"expert-review-stats\">\r\n    <ExpertReviewScore id=\"review-rating\" :expert-review-data=\"expertReviewData\" :api-status=\"apiStatus\" />\r\n    <ExpertReviewAuthor id=\"review-author\" :expert-review-data=\"expertReviewData\" :api-status=\"apiStatus\" card-bg=\"white\" />\r\n\r\n    <div id=\"review-list\" :class=\"['review-card', apiStatus === 'LOADING' ? 'skeleton-box' : 'white-card']\">\r\n      <ExpertReviewProsCons :expert-review-data=\"expertReviewData\" />\r\n      <a @click=\"redirectToExpertReview\" class=\"expert-review-link button-as-link\"> Read full review &rarr;</a>\r\n    </div>\r\n  </article>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { IExpertReview } from '../../foundation/interfaces/IExpertReview';\r\nimport { ApiStatusTypes } from '../../foundation/types/apiStatusTypes';\r\nimport ExpertReviewScore from '../expert-reviews/ExpertReviewScore.vue';\r\nimport ExpertReviewAuthor from '../expert-reviews/ExpertReviewAuthor.vue';\r\nimport ExpertReviewProsCons from '../expert-reviews/ExpertReviewProsCons.vue';\r\nimport { useUrlBuilder } from '../../composables/useUrlBuilder';\r\nimport { useCarComparisonStore } from '../../foundation/stores/carComparisonStore';\r\nimport { computed } from 'vue';\r\nimport { AnalyticsEventNames, AnalyticsEvents, AnalyticsEventTypes } from '../../foundation/enums/AnalyticsEvents';\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    expertReviewData: Partial<IExpertReview>;\r\n    apiStatus: ApiStatusTypes;\r\n    carData: any;\r\n  }>(),\r\n  { apiStatus: 'LOADING' }\r\n);\r\n\r\nconst urlBuilder = useUrlBuilder();\r\nconst carComparisonStore = useCarComparisonStore();\r\n\r\nconst expertReviewsPageUrl = computed(() => {\r\n  return urlBuilder.getExpertReviewsUrl(\r\n    props.carData.Vehicle_UID as string,\r\n    props.expertReviewData.Id as string,\r\n    `${props.carData?.Year_low}-${props.carData?.Year_high}`,\r\n    props.carData?.Make,\r\n    props.carData?.Model\r\n  );\r\n});\r\n\r\nfunction addToAdobeAnalytics() {\r\n  try {\r\n    carComparisonStore.pushToAnalytics(\r\n      props.carData.Vehicle_UID as string,\r\n      AnalyticsEvents.NavigationLinkClick,\r\n      AnalyticsEventNames.ReadFullReview,\r\n      AnalyticsEventTypes.ReviewLink,\r\n      expertReviewsPageUrl.value\r\n    );\r\n  } catch (error) {\r\n    console.error('Fail to push data to analytics', error);\r\n  }\r\n}\r\n\r\nfunction redirectToExpertReview() {\r\n  addToAdobeAnalytics();\r\n  window.location.href = expertReviewsPageUrl.value;\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.expert-review-stats {\r\n  display: grid;\r\n  grid-template-rows: 1fr 1fr;\r\n  grid-template-columns: 1fr 1fr 1fr;\r\n  grid-column-gap: 16px;\r\n  grid-row-gap: 8px;\r\n  height: 100%;\r\n\r\n  #review-rating {\r\n    grid-area: review-rating;\r\n  }\r\n\r\n  #review-author {\r\n    grid-area: review-author;\r\n    min-width: 20rem;\r\n  }\r\n\r\n  #review-list {\r\n    grid-area: review-list;\r\n    align-items: start;\r\n    padding-top: 1.25rem;\r\n    padding-bottom: 3rem;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    @media screen and (min-width: #{$breakpoint-lg}) {\r\n      padding-bottom: 0;\r\n      flex-direction: row;\r\n    }\r\n  }\r\n\r\n  grid-template-areas:\r\n    'review-rating review-rating review-rating'\r\n    'review-author review-author review-author'\r\n    'review-list   review-list   review-list';\r\n\r\n  @media screen and (min-width: #{$breakpoint-md}) {\r\n    grid-template-areas:\r\n      'review-rating review-list review-list'\r\n      'review-author review-list review-list';\r\n    min-height: 15.75rem;\r\n  }\r\n\r\n  @media screen and (min-width: #{$breakpoint-xxl}) {\r\n    padding: 0;\r\n  }\r\n\r\n  .review-card {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1rem;\r\n\r\n    &__score {\r\n      border-radius: 50%;\r\n      background: $racq-pale-blue;\r\n      border: 1px solid $racq-pale-blue-border;\r\n      min-width: 4.375rem;\r\n      min-height: 4.375rem;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: $racq-navy;\r\n    }\r\n  }\r\n}\r\n\r\n.expert-review-link {\r\n  text-decoration: none;\r\n  position: absolute;\r\n  right: 1rem;\r\n  bottom: 0.5rem;\r\n  font-size: 1rem;\r\n  font-family: $firasans-regular-font;\r\n  color: $racq-blue;\r\n}\r\n\r\n.loading {\r\n  * {\r\n    opacity: 0;\r\n  }\r\n}\r\n</style>\r\n"],"names":["urlBuilder","useUrlBuilder","carComparisonStore","useCarComparisonStore","expertReviewsPageUrl","computed","props","_a","_b","_c","_d","addToAdobeAnalytics","AnalyticsEvents","AnalyticsEventNames","AnalyticsEventTypes","error","redirectToExpertReview"],"mappings":"krBAgCMA,EAAaC,IACbC,EAAqBC,IAErBC,EAAuBC,EAAS,IAAM,aAC1C,OAAOL,EAAW,oBAChBM,EAAM,QAAQ,YACdA,EAAM,iBAAiB,GACvB,IAAGC,EAAAD,EAAM,UAAN,YAAAC,EAAe,aAAYC,EAAAF,EAAM,UAAN,YAAAE,EAAe,aAC7CC,EAAAH,EAAM,UAAN,YAAAG,EAAe,MACfC,EAAAJ,EAAM,UAAN,YAAAI,EAAe,KAAA,CACjB,CACD,EAED,SAASC,GAAsB,CACzB,GAAA,CACiBT,EAAA,gBACjBI,EAAM,QAAQ,YACdM,EAAgB,oBAChBC,EAAoB,eACpBC,EAAoB,WACpBV,EAAqB,KAAA,QAEhBW,GACC,QAAA,MAAM,iCAAkCA,CAAK,CACvD,CACF,CAEA,SAASC,GAAyB,CACZL,IACb,OAAA,SAAS,KAAOP,EAAqB,KAC9C"}