{"version":3,"file":"CarDetailOverview-871adb56.js","sources":["../../src/components/car-detail/CarDetailOverview.vue"],"sourcesContent":["<template>\r\n  <div :class=\"{ 'skeleton-box': apiStatus === 'LOADING' && !objectHasEntries(selectedVariant) }\">\r\n    <div class=\"car-detail-overview white-card\">\r\n      <div class=\"d-flex items-center space-between\">\r\n        <h3 class=\"no-margin\">Overview</h3>\r\n        <CompareButton :vehicle-id=\"carData.Vehicle_UID\" style=\"width: 8rem\" variant=\"primary\" />\r\n      </div>\r\n\r\n      <DropDown\r\n        v-if=\"badgeList?.length\"\r\n        class=\"car-tile__badge-list\"\r\n        :selected-item=\"selectedVariant\"\r\n        @selected-changed=\"updateVariant\"\r\n        :list-data=\"badgeList\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, ref, onMounted } from 'vue';\r\nimport DropDown from '../form-fields/DropDown.vue';\r\nimport CompareButton from '../buttons/CompareButton.vue';\r\nimport { useUrlBuilder } from '../../composables/useUrlBuilder';\r\nimport { useCarAvailableStore } from '../../foundation/stores/carAvailableStore';\r\nimport { IDropDownItem } from '../../foundation/interfaces/IDropDownItem';\r\nimport { IVariant } from '../../foundation/interfaces/IVariant';\r\nimport { useAnalytics } from '../../composables/useAnalytics';\r\nimport { AnalyticsEventNames, AnalyticsEventTypes, AnalyticsEvents } from '../../foundation/enums/AnalyticsEvents';\r\nimport { objectHasEntries } from '../../foundation/helpers';\r\nimport { NO_VARIANT_TEXT } from '../../foundation/appConstants';\r\nimport { useCarData } from '../../composables/useCarData';\r\nimport { IVehicleGroup } from '../../foundation/interfaces/IVehicleGroup';\r\n\r\nconst props = defineProps({\r\n  carData: {\r\n    type: Object,\r\n    required: true,\r\n  },\r\n  apiStatus: {\r\n    type: String,\r\n    default: 'LOADING',\r\n  },\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  (e: 'update:variantUpdate', vehicleId: string): void;\r\n}>();\r\n\r\nconst carAvailableStore = useCarAvailableStore();\r\nconst vehicleGroup = ref<IVehicleGroup | null>();\r\nconst analytics = useAnalytics();\r\nconst urlBuilder = useUrlBuilder();\r\nconst selectedVariant = ref({} as IDropDownItem);\r\nconst { getVariantYearRange } = useCarData(props.carData);\r\n\r\nonMounted(async () => {\r\n  await getVehicleGroup(); // Get the list of variants for this vehicle\r\n  pushToAnalytics();\r\n});\r\n\r\nasync function getVehicleGroup() {\r\n  vehicleGroup.value = (await carAvailableStore.getVehicleGroupByVehicleUid(props.carData.Vehicle_UID)) as IVehicleGroup;\r\n  if (!vehicleGroup?.value) {\r\n    return;\r\n  }\r\n  const currentVariant = vehicleGroup.value.variants.filter((x) => x.id === props.carData.Vehicle_UID)[0];\r\n  selectedVariant.value = setVariantValues(currentVariant) as IDropDownItem;\r\n}\r\n\r\nfunction setVariantValues(currentVariant: IVariant): IDropDownItem {\r\n  const labelText = currentVariant?.badgeDetails === '-' ? NO_VARIANT_TEXT : currentVariant.badgeDetails;\r\n  return {\r\n    label: labelText,\r\n    value: currentVariant.id,\r\n    suffix: '(' + getVariantYearRange(currentVariant) + ')',\r\n    tooltip: labelText,\r\n  } as IDropDownItem;\r\n}\r\n\r\nfunction updateVariant(selectedId: IDropDownItem) {\r\n  window.history.pushState(\r\n    null,\r\n    '',\r\n    urlBuilder.getCarDetailsUrl(selectedId.value, `${props.carData.Year_low}-${props.carData.Year_high}`, props.carData.Make, props.carData.Model)\r\n  );\r\n  emit('update:variantUpdate', selectedId.value);\r\n}\r\n\r\nconst badgeList = computed(() => {\r\n  let dropList = [] as IDropDownItem[];\r\n\r\n  if (vehicleGroup?.value?.variants?.length) {\r\n    dropList.push(selectedVariant.value);\r\n\r\n    vehicleGroup.value.variants\r\n      .filter((x) => x.id !== props.carData.Vehicle_UID)\r\n      .forEach((currentVariant) => {\r\n        dropList.push({\r\n          ...setVariantValues(currentVariant),\r\n        });\r\n      });\r\n  }\r\n\r\n  return dropList;\r\n});\r\n\r\nfunction pushToAnalytics() {\r\n  try {\r\n    analytics.push(AnalyticsEvents.NavigationClickToView, {\r\n      eventInfo: {\r\n        navigation: {\r\n          name: AnalyticsEventNames.View,\r\n          type: AnalyticsEventTypes.CarResults,\r\n          makeName: props.carData.Make,\r\n          modelName: props.carData.Model,\r\n          badgeName: props.carData.Trim,\r\n          year: `${props.carData.Year_low} - ${props.carData.Year_high}`,\r\n          bodyType: props.carData.Body_type,\r\n          engineType: props.carData.Overall_FuelType,\r\n          URL: urlBuilder.getCarDetailsUrl(\r\n            props.carData.Vehicle_UID,\r\n            `${props.carData.Year_low} - ${props.carData.Year_high}`,\r\n            props.carData.Make?.toLowerCase(),\r\n            props.carData.Model.toLowerCase()\r\n          ),\r\n        },\r\n      },\r\n    });\r\n  } catch (error) {\r\n    console.warn('fail to push data to analytics', error);\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.car-detail-overview {\r\n  padding: 1rem;\r\n  margin: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 1rem;\r\n}\r\n</style>\r\n"],"names":["carAvailableStore","useCarAvailableStore","vehicleGroup","ref","analytics","useAnalytics","urlBuilder","useUrlBuilder","selectedVariant","getVariantYearRange","useCarData","props","onMounted","getVehicleGroup","pushToAnalytics","currentVariant","x","setVariantValues","labelText","NO_VARIANT_TEXT","updateVariant","selectedId","emit","badgeList","computed","dropList","_b","_a","AnalyticsEvents","AnalyticsEventNames","AnalyticsEventTypes","error"],"mappings":"i0BAiDMA,EAAoBC,IACpBC,EAAeC,IACfC,EAAYC,IACZC,EAAaC,IACbC,EAAkBL,EAAI,CAAA,CAAmB,EACzC,CAAE,oBAAAM,CAAwB,EAAAC,EAAWC,EAAM,OAAO,EAExDC,EAAU,SAAY,CACpB,MAAMC,EAAgB,EACNC,GAAA,CACjB,EAED,eAAeD,GAAkB,CAE3B,GADJX,EAAa,MAAS,MAAMF,EAAkB,4BAA4BW,EAAM,QAAQ,WAAW,EAC/F,EAACT,GAAA,MAAAA,EAAc,OACjB,OAEF,MAAMa,EAAiBb,EAAa,MAAM,SAAS,OAAQc,GAAMA,EAAE,KAAOL,EAAM,QAAQ,WAAW,EAAE,GACrFH,EAAA,MAAQS,EAAiBF,CAAc,CACzD,CAEA,SAASE,EAAiBF,EAAyC,CACjE,MAAMG,GAAYH,GAAA,YAAAA,EAAgB,gBAAiB,IAAMI,EAAkBJ,EAAe,aACnF,MAAA,CACL,MAAOG,EACP,MAAOH,EAAe,GACtB,OAAQ,IAAMN,EAAoBM,CAAc,EAAI,IACpD,QAASG,CAAA,CAEb,CAEA,SAASE,EAAcC,EAA2B,CAChD,OAAO,QAAQ,UACb,KACA,GACAf,EAAW,iBAAiBe,EAAW,MAAO,GAAGV,EAAM,QAAQ,YAAYA,EAAM,QAAQ,YAAaA,EAAM,QAAQ,KAAMA,EAAM,QAAQ,KAAK,CAAA,EAE1IW,EAAA,uBAAwBD,EAAW,KAAK,CAC/C,CAEM,MAAAE,EAAYC,EAAS,IAAM,SAC/B,IAAIC,EAAW,CAAA,EAEX,OAAAC,GAAAC,EAAAzB,GAAA,YAAAA,EAAc,QAAd,YAAAyB,EAAqB,WAArB,MAAAD,EAA+B,SACxBD,EAAA,KAAKjB,EAAgB,KAAK,EAEnCN,EAAa,MAAM,SAChB,OAAQc,GAAMA,EAAE,KAAOL,EAAM,QAAQ,WAAW,EAChD,QAASI,GAAmB,CAC3BU,EAAS,KAAK,CACZ,GAAGR,EAAiBF,CAAc,CAAA,CACnC,CAAA,CACF,GAGEU,CAAA,CACR,EAED,SAASX,GAAkB,OACrB,GAAA,CACQV,EAAA,KAAKwB,EAAgB,sBAAuB,CACpD,UAAW,CACT,WAAY,CACV,KAAMC,EAAoB,KAC1B,KAAMC,EAAoB,WAC1B,SAAUnB,EAAM,QAAQ,KACxB,UAAWA,EAAM,QAAQ,MACzB,UAAWA,EAAM,QAAQ,KACzB,KAAM,GAAGA,EAAM,QAAQ,cAAcA,EAAM,QAAQ,YACnD,SAAUA,EAAM,QAAQ,UACxB,WAAYA,EAAM,QAAQ,iBAC1B,IAAKL,EAAW,iBACdK,EAAM,QAAQ,YACd,GAAGA,EAAM,QAAQ,cAAcA,EAAM,QAAQ,aAC7CgB,EAAAhB,EAAM,QAAQ,OAAd,YAAAgB,EAAoB,cACpBhB,EAAM,QAAQ,MAAM,YAAY,CAClC,CACF,CACF,CAAA,CACD,QACMoB,GACC,QAAA,KAAK,iCAAkCA,CAAK,CACtD,CACF"}