{"version":3,"file":"CarPriceGuide-f771a652.js","sources":["../../src/assets/img/piggy-bank-dollar-coin.svg","../../src/assets/img/calculator.svg","../../src/components/global/CarPriceGuide.vue"],"sourcesContent":["export default \"__VITE_ASSET__82e4ebd9__\"","export default \"__VITE_ASSET__a6731e56__\"","<template>\r\n  <section class=\"car-price-guide\">\r\n    <h3 class=\"car-price-guide__heading\">Price guide</h3>\r\n\r\n    <div class=\"car-price-guide__grid\">\r\n      <div class=\"car-price-guide__grid-item white-card border-bottom-thick yellow-border text-left\">\r\n        <h4 class=\"car-price-heading\" v-text=\"formattedCarPrice\" />\r\n        <p class=\"car-price-desc\">{{ priceCaption }}</p>\r\n        <ExplanationModal\r\n          button-text=\"Calculation explanation\"\r\n          with-icon\r\n          :title=\"marketValueCalculationModalContent.title.value\"\r\n          :description=\"marketValueCalculationModalContent.description.value\"\r\n        />\r\n      </div>\r\n\r\n      <button @click=\"gotoCarLoanLink\" class=\"car-price-guide__grid-item white-card border-bottom-thick navy-border with-icon text-left\">\r\n        <div class=\"d-flex space-between pt-2 items-flex-start\">\r\n          <img :src=\"CalculatorIcon\" class=\"calculator-icon\" alt=\"An icon of a piggy bank\" />\r\n\r\n          <div class=\"car-price-guide__grid-item content-card\">\r\n            <h4 class=\"white-card__title\">Car loan calculator</h4>\r\n            <p class=\"car-price-guide-text\">Work out your weekly repayments</p>\r\n          </div>\r\n          <p class=\"top-3 relative button-as-link arrow-icon\">&rarr;</p>\r\n        </div>\r\n      </button>\r\n\r\n      <button @click=\"goToApplyForCarLoanLink\" class=\"car-price-guide__grid-item white-card border-bottom-thick navy-border with-icon text-left\">\r\n        <div class=\"d-flex space-between pt-2 items-flex-start\">\r\n          <img :src=\"PiggyBankIcon\" class=\"piggy-bank-icon\" alt=\"An icon of a calculator\" />\r\n          <div class=\"car-price-guide__grid-item content-card\">\r\n            <h4 class=\"white-card__title\">Apply for a car loan</h4>\r\n            <p class=\"car-price-guide-text\">Breeze through your next car purchase with an RACQ Bank Car Loan</p>\r\n          </div>\r\n          <p class=\"top-3 relative button-as-link arrow-icon\" arrow-icon>&rarr;</p>\r\n        </div>\r\n      </button>\r\n    </div>\r\n\r\n    <hr class=\"car-price-guide-hr\" />\r\n  </section>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport ExplanationModal from '../modals/ExplanationModal.vue';\r\nimport PiggyBankIcon from '@/assets/img/piggy-bank-dollar-coin.svg';\r\nimport CalculatorIcon from '@/assets/img/calculator.svg';\r\nimport { AnalyticsEventNames, AnalyticsEvents, AnalyticsEventTypes } from '../../foundation/enums/AnalyticsEvents';\r\nimport { useCarComparisonStore } from '../../foundation/stores/carComparisonStore';\r\nimport { useRoute } from 'vue-router';\r\nimport { useContentStore } from '../../foundation/stores/contentStore';\r\n\r\nconst props = defineProps({\r\n  carPrice: {\r\n    type: String,\r\n    required: true,\r\n    default: 'No price available',\r\n  },\r\n  isCurrent: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n});\r\n\r\nconst carComparisonStore = useCarComparisonStore();\r\nconst route = useRoute();\r\nconst contentStore = useContentStore();\r\n\r\ncontentStore.fetchModalDatasources();\r\nconst marketValueCalculationModalContent = contentStore.modalDatasources?.modalContentItems?.marketValueCalculation;\r\n\r\nconst formattedCarPrice = computed(() => {\r\n  if (Number(props.carPrice) > 0) {\r\n    return new Intl.NumberFormat('en-US', {\r\n      style: 'currency',\r\n      currency: 'AUD',\r\n      currencyDisplay: 'narrowSymbol',\r\n      currencySign: 'accounting',\r\n      maximumFractionDigits: 0,\r\n    }).format(Number(props.carPrice));\r\n  }\r\n\r\n  return 'N/A';\r\n});\r\n\r\nconst priceCaption = computed(() =>\r\n  props.carPrice === 'N/A' ? 'Pricing data not available' : props.isCurrent ? 'Estimated on-road price, QLD' : 'Indicative average used car price'\r\n);\r\n\r\nfunction pushToAdobe(link: string, isApplyLink: boolean) {\r\n  try {\r\n    carComparisonStore.pushToAnalytics(\r\n      route.params.carId as string,\r\n      AnalyticsEvents.NavigationLinkClick,\r\n      isApplyLink ? AnalyticsEventNames.ApplyForACarLoan : AnalyticsEventNames.CarLoanCalculator,\r\n      AnalyticsEventTypes.Promo,\r\n      link\r\n    );\r\n  } catch (error) {\r\n    console.log('fail to push to analytics', error);\r\n  }\r\n}\r\n\r\nfunction gotoCarLoanLink() {\r\n  const url = 'https://www.racq.com.au/car/car-loans/car-loan-calculator';\r\n  pushToAdobe(url, false);\r\n  window.location.href = url;\r\n}\r\n\r\nfunction goToApplyForCarLoanLink() {\r\n  const url = 'https://www.racq.com.au/car/car-loans#products';\r\n  pushToAdobe(url, true);\r\n  window.location.href = url;\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.car-price-guide {\r\n  padding-top: 0;\r\n  margin-top: 3.75rem;\r\n\r\n  &__heading {\r\n    font-size: 2rem;\r\n    margin-bottom: 1.5rem;\r\n  }\r\n\r\n  &__grid {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    gap: 1rem;\r\n\r\n    @media screen and (min-width: #{$breakpoint-lg}) {\r\n      flex-direction: row;\r\n    }\r\n  }\r\n\r\n  &__grid-item {\r\n    box-sizing: border-box;\r\n    padding-left: 1.25rem;\r\n    width: 100%;\r\n    max-width: 27.5rem;\r\n\r\n    @media screen and (min-width: #{$breakpoint-xl}) {\r\n      max-width: 100%;\r\n    }\r\n\r\n    .content-card {\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-items: start;\r\n      align-items: start;\r\n      padding-left: 0.25rem;\r\n      padding-right: 0.25rem;\r\n      width: 70%;\r\n\r\n      @media screen and (min-width: #{$breakpoint-md}) {\r\n        width: 75%;\r\n      }\r\n    }\r\n\r\n    &.with-icon {\r\n      padding-left: 1rem;\r\n      padding-right: 1.5rem;\r\n    }\r\n\r\n    .white-card__title {\r\n      font-size: 1.25rem;\r\n      line-height: 1.25;\r\n      margin: 0;\r\n      color: $racq-navy;\r\n    }\r\n\r\n    .car-price-heading {\r\n      margin: 0.75rem 0 0.5rem;\r\n      font-weight: bold;\r\n      color: $racq-navy;\r\n      font-size: 1.75rem;\r\n    }\r\n\r\n    .car-price-guide-text {\r\n      height: 2rem;\r\n      text-align: left;\r\n      margin-top: 0.5rem;\r\n      line-height: 1.125;\r\n    }\r\n\r\n    .car-price-desc {\r\n      margin: 0 0 0.5rem;\r\n    }\r\n  }\r\n}\r\n\r\n.car-price-guide-hr {\r\n  border: 1px solid $racq-pale-blue;\r\n  margin: 4rem 0 0;\r\n}\r\n\r\n.calculator-icon,\r\n.piggy-bank-icon {\r\n  width: 50px;\r\n  position: relative;\r\n  top: 0.125rem;\r\n}\r\n</style>\r\n"],"names":["PiggyBankIcon","CalculatorIcon","carComparisonStore","useCarComparisonStore","route","useRoute","contentStore","useContentStore","marketValueCalculationModalContent","_b","_a","formattedCarPrice","computed","props","priceCaption","pushToAdobe","link","isApplyLink","AnalyticsEvents","AnalyticsEventNames","AnalyticsEventTypes","error","gotoCarLoanLink","url","goToApplyForCarLoanLink"],"mappings":"iaAAA,MAAeA,EAAA,GAAA,IAAA,IAAA,sCAAA,YAAA,GAAA,EAAA,KCAAC,EAAA,GAAA,IAAA,IAAA,0BAAA,YAAA,GAAA,EAAA,kvCCkETC,EAAqBC,IACrBC,EAAQC,IACRC,EAAeC,IAErBD,EAAa,sBAAsB,EAC7B,MAAAE,GAAqCC,GAAAC,EAAAJ,EAAa,mBAAb,YAAAI,EAA+B,oBAA/B,YAAAD,EAAkD,uBAEvFE,EAAoBC,EAAS,IAC7B,OAAOC,EAAM,QAAQ,EAAI,EACpB,IAAI,KAAK,aAAa,QAAS,CACpC,MAAO,WACP,SAAU,MACV,gBAAiB,eACjB,aAAc,aACd,sBAAuB,CACxB,CAAA,EAAE,OAAO,OAAOA,EAAM,QAAQ,CAAC,EAG3B,KACR,EAEKC,EAAeF,EAAS,IAC5BC,EAAM,WAAa,MAAQ,6BAA+BA,EAAM,UAAY,+BAAiC,mCAAA,EAGtG,SAAAE,EAAYC,EAAcC,EAAsB,CACnD,GAAA,CACiBf,EAAA,gBACjBE,EAAM,OAAO,MACbc,EAAgB,oBAChBD,EAAcE,EAAoB,iBAAmBA,EAAoB,kBACzEC,EAAoB,MACpBJ,CAAA,QAEKK,GACC,QAAA,IAAI,4BAA6BA,CAAK,CAChD,CACF,CAEA,SAASC,GAAkB,CACzB,MAAMC,EAAM,4DACZR,EAAYQ,EAAK,EAAK,EACtB,OAAO,SAAS,KAAOA,CACzB,CAEA,SAASC,GAA0B,CACjC,MAAMD,EAAM,iDACZR,EAAYQ,EAAK,EAAI,EACrB,OAAO,SAAS,KAAOA,CACzB"}