{"version":3,"file":"CostToRunBreakdown-bbce21e9.js","sources":["../../src/components/car-stats/CostToRunBreakdown.vue"],"sourcesContent":["<template>\r\n  <article class=\"cost-to-run-breakdown blue-card\">\r\n    <div v-for=\"dataPoint in costToRunData\" :key=\"dataPoint.label\" class=\"cost-to-run-data\">\r\n      <p class=\"cost-to-run-data__label\" v-text=\"dataPoint.label\" />\r\n      <p class=\"cost-to-run-data__value\">\r\n        {{ dataPoint.value }}\r\n        <ExplanationModal with-icon :title=\"runningCostsModalContent.title.value\" :description=\"runningCostsModalContent.description.value\" />\r\n      </p>\r\n    </div>\r\n  </article>\r\n\r\n  <article class=\"cost-to-run-breakdown white-card\">\r\n    <div class=\"cost-to-run-data\">\r\n      <p class=\"cost-to-run-data__label\" v-text=\"carDetailsProps.registrationLabel\" />\r\n\r\n      <p class=\"cost-to-run-data__value\">\r\n        {{ costToRunRegoCost }}\r\n        <ExplanationModal with-icon :title=\"runningCostsModalContent.title.value\" :description=\"runningCostsModalContent.description.value\" />\r\n      </p>\r\n    </div>\r\n  </article>\r\n\r\n  <article class=\"cost-to-run-breakdown white-card\">\r\n    <div v-for=\"dataPoint in costToRunLinks\" :key=\"dataPoint.label\" class=\"cost-to-run-data\">\r\n      <p class=\"cost-to-run-data__label\" v-text=\"dataPoint.label\" />\r\n      <p class=\"cost-to-run-data__value\">\r\n        <a :href=\"dataPoint.hyperlink\" class=\"link\" @click=\"goToLink(dataPoint)\" v-text=\"dataPoint.value\" />\r\n      </p>\r\n    </div>\r\n  </article>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport { useRoute } from 'vue-router';\r\nimport { AnalyticsEventNames, AnalyticsEvents, AnalyticsEventTypes } from '../../foundation/enums/AnalyticsEvents';\r\nimport { useCarComparisonStore } from '../../foundation/stores/carComparisonStore';\r\nimport ExplanationModal from '../modals/ExplanationModal.vue';\r\nimport useRunningCosts from '../../composables/useRunningCosts';\r\nimport { ICarDetailsProps, IRegistrationCosts, RegistrationCost } from '../../foundation/interfaces/datasources/IDataSourceProps';\r\nimport { useContentStore } from '../../foundation/stores/contentStore';\r\n\r\nconst props = defineProps<{\r\n  carData: any;\r\n  carDetailsProps: ICarDetailsProps;\r\n  registrationCosts: IRegistrationCosts;\r\n}>();\r\n\r\nconst route = useRoute();\r\nconst carComparisonStore = useCarComparisonStore();\r\n\r\nconst contentStore = useContentStore();\r\ncontentStore.fetchModalDatasources();\r\nconst runningCostsModalContent = contentStore.modalDatasources?.modalContentItems?.runningCosts;\r\n\r\nconst { costToRunData } = useRunningCosts(props.carData, {\r\n  isSearchResult: false,\r\n  costToFillLabel: props.carDetailsProps.costToFillLabel,\r\n  costPer100KmLabel: props.carDetailsProps.costPer100kmLabel,\r\n});\r\n\r\nfunction pushToAnalytics(url: string, isRoadside: boolean) {\r\n  try {\r\n    carComparisonStore.pushToAnalytics(\r\n      route.params.carId as string,\r\n      AnalyticsEvents.NavigationLinkClick,\r\n      isRoadside ? AnalyticsEventNames.RoadsideQuote : AnalyticsEventNames.InsuranceQuote,\r\n      AnalyticsEventTypes.Promo,\r\n      url\r\n    );\r\n  } catch (error) {\r\n    console.log('fail to push to analytics', error);\r\n  }\r\n}\r\n\r\nfunction goToLink(dataPoint: any) {\r\n  const url = dataPoint.hyperlink;\r\n  pushToAnalytics(url, dataPoint.label == 'Roadside assist');\r\n  window.location.href = url;\r\n}\r\n\r\nconst costToRunLinks = computed(() => {\r\n  return [\r\n    {\r\n      label: props.carDetailsProps.batteriesLabel,\r\n      value: props.carDetailsProps?.batteriesLink?.text,\r\n      hyperlink: props.carDetailsProps?.batteriesLink?.href,\r\n    },\r\n    {\r\n      label: props.carDetailsProps.insuranceLabel,\r\n      value: props.carDetailsProps?.insuranceLink?.text,\r\n      hyperlink: props.carDetailsProps?.insuranceLink?.href,\r\n    },\r\n    {\r\n      label: props.carDetailsProps.roadsideLabel,\r\n      value: props.carDetailsProps?.roadsideLink?.text,\r\n      hyperlink: props.carDetailsProps?.roadsideLink?.href,\r\n    },\r\n  ];\r\n});\r\n\r\nconst costToRunRegoCost = computed(() => {\r\n  const cylinders: string = props.carData.Combustion_Cylinders || 0;\r\n  const match = props.registrationCosts.registrationCosts.find((item: RegistrationCost) => {\r\n    return Number(item.cylinders) === Number(cylinders);\r\n  });\r\n\r\n  return match?.registrationCost ? '$' + match?.registrationCost : 'Data not available';\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cost-to-run-breakdown {\r\n  margin: 0 0 1rem;\r\n}\r\n\r\n.cost-to-run-data {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n\r\n  &__value,\r\n  &__label {\r\n    width: 50%;\r\n    color: $racq-dark-grey;\r\n    margin-top: 0.5rem;\r\n    margin-bottom: 0.5rem;\r\n  }\r\n\r\n  &__value {\r\n    padding-left: 2rem;\r\n    text-align: right;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1rem;\r\n  }\r\n\r\n  @media screen and (min-width: #{$breakpoint-md}) {\r\n    justify-content: start;\r\n\r\n    .cost-to-run-data__value {\r\n      text-align: left;\r\n      display: flex;\r\n\r\n      gap: 0.5rem;\r\n    }\r\n  }\r\n}\r\n</style>\r\n"],"names":["route","useRoute","carComparisonStore","useCarComparisonStore","contentStore","useContentStore","runningCostsModalContent","_b","_a","costToRunData","useRunningCosts","props","pushToAnalytics","url","isRoadside","AnalyticsEvents","AnalyticsEventNames","AnalyticsEventTypes","error","goToLink","dataPoint","costToRunLinks","computed","_d","_c","_f","_e","_h","_g","_j","_i","_l","_k","costToRunRegoCost","cylinders","match","item"],"mappings":"u8BAgDMA,EAAQC,IACRC,EAAqBC,IAErBC,EAAeC,IACrBD,EAAa,sBAAsB,EAC7B,MAAAE,GAA2BC,GAAAC,EAAAJ,EAAa,mBAAb,YAAAI,EAA+B,oBAA/B,YAAAD,EAAkD,aAE7E,CAAE,cAAAE,CAAkB,EAAAC,EAAgBC,EAAM,QAAS,CACvD,eAAgB,GAChB,gBAAiBA,EAAM,gBAAgB,gBACvC,kBAAmBA,EAAM,gBAAgB,iBAAA,CAC1C,EAEQ,SAAAC,EAAgBC,EAAaC,EAAqB,CACrD,GAAA,CACiBZ,EAAA,gBACjBF,EAAM,OAAO,MACbe,EAAgB,oBAChBD,EAAaE,EAAoB,cAAgBA,EAAoB,eACrEC,EAAoB,MACpBJ,CAAA,QAEKK,GACC,QAAA,IAAI,4BAA6BA,CAAK,CAChD,CACF,CAEA,SAASC,EAASC,EAAgB,CAChC,MAAMP,EAAMO,EAAU,UACNR,EAAAC,EAAKO,EAAU,OAAS,iBAAiB,EACzD,OAAO,SAAS,KAAOP,CACzB,CAEM,MAAAQ,EAAiBC,EAAS,IAAM,6BAC7B,MAAA,CACL,CACE,MAAOX,EAAM,gBAAgB,eAC7B,OAAOJ,GAAAC,EAAAG,EAAM,kBAAN,YAAAH,EAAuB,gBAAvB,YAAAD,EAAsC,KAC7C,WAAWgB,GAAAC,EAAAb,EAAM,kBAAN,YAAAa,EAAuB,gBAAvB,YAAAD,EAAsC,IACnD,EACA,CACE,MAAOZ,EAAM,gBAAgB,eAC7B,OAAOc,GAAAC,EAAAf,EAAM,kBAAN,YAAAe,EAAuB,gBAAvB,YAAAD,EAAsC,KAC7C,WAAWE,GAAAC,EAAAjB,EAAM,kBAAN,YAAAiB,EAAuB,gBAAvB,YAAAD,EAAsC,IACnD,EACA,CACE,MAAOhB,EAAM,gBAAgB,cAC7B,OAAOkB,GAAAC,EAAAnB,EAAM,kBAAN,YAAAmB,EAAuB,eAAvB,YAAAD,EAAqC,KAC5C,WAAWE,GAAAC,EAAArB,EAAM,kBAAN,YAAAqB,EAAuB,eAAvB,YAAAD,EAAqC,IAClD,CAAA,CACF,CACD,EAEKE,EAAoBX,EAAS,IAAM,CACjC,MAAAY,EAAoBvB,EAAM,QAAQ,sBAAwB,EAC1DwB,EAAQxB,EAAM,kBAAkB,kBAAkB,KAAMyB,GACrD,OAAOA,EAAK,SAAS,IAAM,OAAOF,CAAS,CACnD,EAED,OAAOC,GAAA,MAAAA,EAAO,iBAAmB,KAAMA,GAAA,YAAAA,EAAO,kBAAmB,oBAAA,CAClE"}