{"version":3,"file":"CarDetails-a4abfadc.js","sources":["../../node_modules/nanoid/index.browser.js","../../src/views/CarDetails.vue"],"sourcesContent":["export { urlAlphabet } from './url-alphabet/index.js'\nexport let random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\nexport let customRandom = (alphabet, defaultSize, getRandom) => {\n  let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1\n  let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n  return (size = defaultSize) => {\n    let id = ''\n    while (true) {\n      let bytes = getRandom(step)\n      let j = step\n      while (j--) {\n        id += alphabet[bytes[j] & mask] || ''\n        if (id.length === size) return id\n      }\n    }\n  }\n}\nexport let customAlphabet = (alphabet, size = 21) =>\n  customRandom(alphabet, size, random)\nexport let nanoid = (size = 21) =>\n  crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {\n    byte &= 63\n    if (byte < 36) {\n      id += byte.toString(36)\n    } else if (byte < 62) {\n      id += (byte - 26).toString(36).toUpperCase()\n    } else if (byte > 62) {\n      id += '-'\n    } else {\n      id += '_'\n    }\n    return id\n  }, '')\n","<template>\r\n  <PageLayout>\r\n    <template #page-hero>\r\n      <div id=\"overview\">\r\n        <CarDetailHero\r\n          v-if=\"objectHasEntries(carData)\"\r\n          @update:variant-update=\"(vehicleId) => initCarDetailsPage(vehicleId)\"\r\n          :car-data=\"carData\"\r\n          :vehicle-images=\"vehicleImages\"\r\n          :api-status=\"apiStatus\"\r\n        />\r\n\r\n        <CarDetailNoResult v-if=\"apiStatus === 'IDLE' && !objectHasEntries(carData)\" :car-details-no-result-props=\"carDetailsProps\" />\r\n      </div>\r\n    </template>\r\n\r\n    <StickyScrollSpyNav :nav-items=\"navItems\" :car-data=\"carData\" v-if=\"carData && Object.keys(carData).length\">\r\n      <template #default>\r\n        <div v-for=\"navData in matchingNavElements\" :key=\"navData.id\" :id=\"navData.id\" :data-scrollspy-id=\"navData.id\" class=\"qmove-container\">\r\n          <component :is=\"navData.component\" v-bind=\"navData.data\" :key=\"variantKey\"></component>\r\n        </div>\r\n      </template>\r\n    </StickyScrollSpyNav>\r\n  </PageLayout>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, onBeforeMount, computed } from 'vue';\r\nimport { useRoute } from 'vue-router';\r\nimport { carAdvisoryService } from '../foundation/apiCarAdvisoryService';\r\nimport { useCarComparisonStore } from '../foundation/stores/carComparisonStore';\r\nimport { ApiStatusTypes } from '../foundation/types/apiStatusTypes';\r\nimport { IVehicleImage } from '../foundation/interfaces/IVehicleImage';\r\nimport PageLayout from '../layouts/PageLayout.vue';\r\nimport CarDetailHero from '../components/car-detail/CarDetailHero.vue';\r\nimport CarDetailNoResult from '../components/car-detail/CarDetailNoResult.vue';\r\nimport StickyScrollSpyNav from '../components/global/StickyScrollSpyNav.vue';\r\nimport CarDetailExpertReview from '../components/car-detail/CarDetailExpertReview.vue';\r\nimport { IExpertReview } from '../foundation/interfaces/IExpertReview';\r\nimport CarPriceGuide from '../components/global/CarPriceGuide.vue';\r\nimport CarDetailCostToRun from '../components/car-detail/CarDetailCostToRun.vue';\r\nimport CarSpecsTabularAccordions from '../components/car-stats/CarSpecsTabularAccordions.vue';\r\nimport { storeToRefs } from 'pinia';\r\nimport { objectHasEntries } from '../foundation/helpers';\r\nimport { useCarReviewStore } from '../foundation/stores/carReviewStore';\r\nimport { useContentStore } from '../foundation/stores/contentStore';\r\nimport { nanoid } from 'nanoid';\r\n// Get the datasourceId from the dynamic component props and pass to GraphQL as a query variable\r\nconst props = defineProps<{\r\n  datasourceId: string;\r\n}>();\r\n\r\n// Composables\r\nconst route = useRoute();\r\nconst comparisonStore = useCarComparisonStore();\r\nconst carReviewStore = useCarReviewStore();\r\nconst contentStore = useContentStore();\r\n\r\ncontentStore.fetchCarDetailsProps(props.datasourceId);\r\ncontentStore.fetchCarDetailsTabularDataProps(props.datasourceId);\r\ncontentStore.fetchRegistrationCosts();\r\n\r\nconst { carDetailsProps, carDetailsTabularDataProps, registrationCosts } = storeToRefs(contentStore);\r\n\r\nconst variantKey = ref<string>(nanoid());\r\nconst apiStatus = ref<ApiStatusTypes>('LOADING');\r\nconst vehicleImages = ref<IVehicleImage[]>([]);\r\nconst carData = ref<Record<string, any> | undefined>(undefined);\r\nconst expertReviewData = ref<Partial<IExpertReview>>({});\r\nconst { showCarComparisonFooter } = storeToRefs(comparisonStore);\r\nshowCarComparisonFooter.value = false;\r\n\r\n// Initialize car details page\r\nonBeforeMount(() => initCarDetailsPage(''));\r\n\r\n/**\r\n * Nav items are hard coded but this may change in the future\r\n */\r\nconst navItems = computed(() => {\r\n  const items = [\r\n    {\r\n      id: 'overview',\r\n      label: 'Overview',\r\n      component: undefined,\r\n      data: undefined,\r\n    },\r\n    {\r\n      id: 'price-guide',\r\n      label: 'Price Guide',\r\n      component: undefined,\r\n      data: undefined,\r\n    },\r\n    {\r\n      id: 'running-costs',\r\n      label: 'Running costs',\r\n      component: undefined,\r\n      data: undefined,\r\n    },\r\n    {\r\n      id: 'specifications',\r\n      label: 'Specifications',\r\n      component: undefined,\r\n      data: undefined,\r\n    },\r\n    {\r\n      id: 'features',\r\n      label: 'Features',\r\n      component: undefined,\r\n      data: undefined,\r\n    },\r\n    {\r\n      id: 'advice',\r\n      label: 'Advice',\r\n      component: undefined,\r\n      data: undefined,\r\n      showInComponent: false,\r\n    },\r\n    {\r\n      id: 'insurance-and-roadside',\r\n      label: 'Insurance and roadside',\r\n      component: undefined,\r\n      data: undefined,\r\n      showInComponent: false,\r\n    },\r\n  ];\r\n\r\n  if (objectHasEntries(expertReviewData.value)) {\r\n    items.splice(1, 0, {\r\n      id: 'expert-review',\r\n      label: 'Review',\r\n      component: undefined,\r\n      data: undefined,\r\n    });\r\n  }\r\n\r\n  return items.map((item) => ({\r\n    ...item,\r\n    ...getComponentToRender(item.id),\r\n  }));\r\n});\r\n\r\n// Only show specific components on the page based on settings in the navItems data.\r\n// In this case, don't show an \"overview\" component but show the \"Overview\"\r\n// menu item so the user can scroll to the top of the page.\r\nconst matchingNavElements = computed(() => {\r\n  return navItems.value.filter((item: any) => item.showInComponent !== false);\r\n});\r\n\r\n/**\r\n * Reload the car details data whenever variant selection is updated.\r\n */\r\nfunction reloadDetailsDueToVariantUpdate() {\r\n  variantKey.value = nanoid();\r\n}\r\n\r\n/**\r\n * Fetch car details data including expert reviews.\r\n */\r\nasync function initCarDetailsPage(vehicleId: string) {\r\n  reloadDetailsDueToVariantUpdate();\r\n\r\n  const carId = vehicleId == '' ? (route.params.carId as string) : vehicleId;\r\n  apiStatus.value = 'LOADING';\r\n  if (carId && comparisonStore.fetchedVehicles[carId]) {\r\n    carData.value = comparisonStore.fetchedVehicles[carId];\r\n  }\r\n\r\n  try {\r\n    if (!carData.value || carData.value.Vehicle_UID != carId) {\r\n      const data: Record<string, any> = await carAdvisoryService.fetchVehicleById(carId);\r\n      comparisonStore.updateFetchedVehicles(carId, data);\r\n      carData.value = data;\r\n    }\r\n\r\n    await carReviewStore.searchReviewByMakeAndModel(carData.value.Make, carData.value.Model);\r\n    const reviews = carReviewStore.getRelevantReview(carData.value.Make, carData.value.Model, carData.value.Trim);\r\n\r\n    if (reviews?.document?.review_id) {\r\n      // Fetch expert review data here so that we can update the sticky nav if  review exists\r\n      await carReviewStore.fetchReviewById(reviews.document.review_id);\r\n      expertReviewData.value = carReviewStore.getReviewById(reviews.document.review_id);\r\n    }\r\n\r\n    // Fetch vehicle images for the hero carousel\r\n    const vehicleImaData = await carAdvisoryService.fetchVehicleImagesById(carId);\r\n    vehicleImages.value = vehicleImaData.images;\r\n    apiStatus.value = 'IDLE';\r\n  } catch (err) {\r\n    console.error('vehicleDataRequestsError', err);\r\n    apiStatus.value = 'ERROR';\r\n  }\r\n}\r\n\r\n/**\r\n * Get the corresponding Vue component that matches\r\n * the id of the scroll spy nav id.\r\n *\r\n * This allows us to build a unique list of nav items\r\n * with their own matching custom Vue components.\r\n *\r\n * @param id\r\n */\r\nfunction getComponentToRender(id: string) {\r\n  switch (id) {\r\n    case 'overview': {\r\n      return {\r\n        showInComponent: false,\r\n      };\r\n    }\r\n\r\n    case 'expert-review': {\r\n      return {\r\n        component: CarDetailExpertReview,\r\n        data: {\r\n          expertReviewData: expertReviewData.value,\r\n          apiStatus: apiStatus.value,\r\n          carData: carData?.value,\r\n        },\r\n      };\r\n    }\r\n\r\n    case 'price-guide': {\r\n      return {\r\n        component: CarPriceGuide,\r\n        data: {\r\n          isCurrent: carData.value?.Status?.toLowerCase() === 'current',\r\n          carPrice: carData.value?.RACQ_PRICE,\r\n        },\r\n      };\r\n    }\r\n\r\n    case 'running-costs': {\r\n      return {\r\n        component: CarDetailCostToRun,\r\n        data: {\r\n          carData: carData?.value,\r\n          carDetailsProps: carDetailsProps.value,\r\n          registrationCosts: registrationCosts.value,\r\n        },\r\n      };\r\n    }\r\n\r\n    case 'specifications': {\r\n      return {\r\n        component: CarSpecsTabularAccordions,\r\n        data: {\r\n          tabularData: carDetailsTabularDataProps.value.tabularData,\r\n          carsToCompare: [carData.value],\r\n          applyFilters: true,\r\n          sectionToShow: 'specifications',\r\n        },\r\n      };\r\n    }\r\n\r\n    case 'features': {\r\n      return {\r\n        component: CarSpecsTabularAccordions,\r\n        data: {\r\n          tabularData: carDetailsTabularDataProps.value.tabularData,\r\n          carsToCompare: [carData.value],\r\n          applyFilters: true,\r\n          sectionToShow: 'features',\r\n        },\r\n      };\r\n    }\r\n\r\n    default: {\r\n      return undefined;\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.car-detail {\r\n  &__page-title {\r\n    padding-top: 2rem;\r\n    margin-bottom: -1rem;\r\n  }\r\n\r\n  &__year {\r\n    font-size: 1rem;\r\n    color: $racq-navy;\r\n    font-weight: bold;\r\n    margin: 0;\r\n  }\r\n\r\n  &__title {\r\n    font-weight: bold;\r\n    font-size: 2rem;\r\n    margin: 0;\r\n  }\r\n\r\n  &__subtitle {\r\n    font-size: 1.75rem;\r\n    margin: 0;\r\n  }\r\n}\r\n</style>\r\n"],"names":["nanoid","size","id","byte","route","useRoute","comparisonStore","useCarComparisonStore","carReviewStore","useCarReviewStore","contentStore","useContentStore","props","carDetailsProps","carDetailsTabularDataProps","registrationCosts","storeToRefs","variantKey","ref","apiStatus","vehicleImages","carData","expertReviewData","showCarComparisonFooter","onBeforeMount","initCarDetailsPage","navItems","computed","items","objectHasEntries","item","getComponentToRender","matchingNavElements","reloadDetailsDueToVariantUpdate","vehicleId","carId","data","carAdvisoryService","reviews","_a","vehicleImaData","err","CarDetailExpertReview","CarPriceGuide","_b","_c","CarDetailCostToRun","CarSpecsTabularAccordions"],"mappings":"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"}