{"version":3,"file":"PharmacySearcher.f905eafd.js","sources":["../../../app/javascript/vue/components/shared/LocationSearcher/LocationSearcher.vue?vue&type=template&lang.js","../../../app/javascript/vue/components/shared/LocationSearcher/LocationSearcher.vue","../../../app/javascript/vue/components/shared/PharmacySearcher/PharmacySearcher.vue?vue&type=template&lang.js","../../../app/javascript/vue/components/shared/PharmacySearcher/PharmacySearcher.vue"],"sourcesContent":["\n<div>\n  <InputSearch\n    :id=\"'drug-search-location-input'\"\n    :name=\"'drug-search-drug-location'\"\n    :aria-label=\"'Address, ZIP code, etc.'\"\n    :placeholder=\"'Address, ZIP code, etc.'\"\n    :searching=\"searchingLocation\"\n    :suggestions=\"suggestions\"\n    :value=\"query\"\n    :is-location-search=\"true\"\n    @selectAction=\"onSelectGPS\"\n    @change=\"onChange\"\n    @select=\"onSelectLocation\"\n  />\n\n  <div class=\"ml--m\">\n    <span v-if=\"searchingGPS\" class=\"text--s mt--xs\" aria-live=\"polite\">\n      Searching for your location\n      <DecorationEllipses />\n    </span>\n\n    <button class=\"link--info\" @click=\"onSelectGPS\">\n      Find current location\n    </button>\n  </div>\n\n  <p\n    v-if=\"errorGPS\"\n    class=\"card card--error navigation-selection__content\"\n    aria-live=\"polite\"\n  >\n    We couldn't find your current location. Please make sure you have location\n    services turned on and that your browser is allowed access. In the\n    meantime, you can search using an address, ZIP code, or city.\n  </p>\n</div>\n","<template>\n  <div>\n    <InputSearch\n      :id=\"'drug-search-location-input'\"\n      :name=\"'drug-search-drug-location'\"\n      :aria-label=\"'Address, ZIP code, etc.'\"\n      :placeholder=\"'Address, ZIP code, etc.'\"\n      :searching=\"searchingLocation\"\n      :suggestions=\"suggestions\"\n      :value=\"query\"\n      :is-location-search=\"true\"\n      @selectAction=\"onSelectGPS\"\n      @change=\"onChange\"\n      @select=\"onSelectLocation\"\n    />\n\n    <div class=\"ml--m\">\n      <span v-if=\"searchingGPS\" class=\"text--s mt--xs\" aria-live=\"polite\">\n        Searching for your location\n        <DecorationEllipses />\n      </span>\n\n      <button class=\"link--info\" @click=\"onSelectGPS\">\n        Find current location\n      </button>\n    </div>\n\n    <p\n      v-if=\"errorGPS\"\n      class=\"card card--error navigation-selection__content\"\n      aria-live=\"polite\"\n    >\n      We couldn't find your current location. Please make sure you have location\n      services turned on and that your browser is allowed access. In the\n      meantime, you can search using an address, ZIP code, or city.\n    </p>\n  </div>\n</template>\n\n<script>\nimport { getCachedLocation, setCachedLocation } from '~/helpers/userHelpers'\nimport QUERIES from '~/graphql/queries'\nimport MUTATIONS from '~/graphql/mutations'\nimport InputSearch from '~/vue/components/Input/InputSearch.vue'\nimport DecorationEllipses from '~/vue/components/Decoration/DecorationEllipses.vue'\nimport analytics from '~/helpers/analytics/analytics'\n\nexport default {\n  props: {\n    preventOnLoad: { type: Boolean, required: false },\n  },\n  components: {\n    DecorationEllipses,\n    InputSearch,\n  },\n  mounted() {\n    if (this.preventOnLoad) return\n    this.checkCachedLocation()\n  },\n  data() {\n    return {\n      errorGPS: false,\n      errorLocation: false,\n      query: '',\n      searchingGPS: false,\n      searchingLocation: false,\n      suggestions: [],\n    }\n  },\n  methods: {\n    checkCachedLocation() {\n      const cachedLocation = getCachedLocation()\n      if (!cachedLocation) return\n      const { latitude, longitude, query, zip } = cachedLocation\n      this.query = query\n      this.$emit('set-location', { latitude, longitude })\n    },\n\n    async onChange(q) {\n      this.errorGPS = false\n      if (q.length < 3) {\n        this.suggestions = []\n        return\n      }\n      try {\n        this.searchingLocation = true\n        const query = QUERIES.GET_LOCATION_SUGGESTIONS\n        const variables = { q }\n        const response = await this.$apollo.query({ query, variables })\n        const suggestions = response.data.locationSuggestions\n        this.suggestions = suggestions\n      } catch (error) {\n        this.errorLocation = true\n      } finally {\n        this.searchingLocation = false\n      }\n    },\n\n    onSelectGPS() {\n      this.searchingGPS = true\n      analytics.location.gpsSelected()\n      navigator.geolocation.getCurrentPosition(\n        (position) => {\n          const params = {\n            latitude: position.coords.latitude,\n            longitude: position.coords.longitude,\n            text: 'Current location',\n            zip: null,\n          }\n          this.setLocationSelection(params)\n          this.searchingGPS = false\n        },\n        (error) => {\n          this.searchingGPS = false\n          this.errorGPS = true\n        }\n      )\n    },\n\n    onSelectLocation(index) {\n      analytics.location.userEnteredSelected()\n      if (!this.suggestions[index]) this.errorLocation = true\n      const { latitude, longitude, state, text, zip } = this.suggestions[index]\n      this.setLocationSelection({ latitude, longitude, text, zip, state })\n    },\n\n    async setLocationSelection({ latitude, longitude, text, zip, state }) {\n      try {\n        this.searchingLocation = true\n        this.query = text\n        const mutation = MUTATIONS.CREATE_LOCATION_SELECTION\n        const variables = { latitude, longitude, query: text, zip, state }\n        const response = await this.$apollo.mutate({ mutation, variables })\n        const locationSelection =\n          response.data.createLocationSelection.locationSelection\n        setCachedLocation({\n          latitude: locationSelection.latitude,\n          longitude: locationSelection.longitude,\n          query: locationSelection.query,\n          zip: locationSelection.zip,\n          state: locationSelection.state,\n        })\n        this.$emit('set-location', {\n          latitude: locationSelection.latitude,\n          longitude: locationSelection.longitude,\n          state: locationSelection.state,\n        })\n      } catch (error) {\n        this.errorLocation = true\n      } finally {\n        this.searchingLocation = false\n      }\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '~/scss/v3/globals.scss';\n.navigation-selection__underlay {\n  background-color: $color-white;\n  height: 100%;\n  position: absolute;\n  width: 100%;\n}\n.navigation-selection__header {\n  display: flex;\n  justify-content: space-between;\n  padding: 0 0.5rem;\n  width: 100%;\n  > :first-child {\n    align-items: center;\n    margin: 0 1rem 0 0;\n  }\n}\n.navigation-selection__input {\n  background-color: $color-white;\n  padding: 0 1rem;\n}\n.navigation-selection__icon {\n  height: 1.5rem;\n}\n.navigation-selection__item {\n  padding: 0.3rem 2rem 0.2rem 0.5rem;\n}\n.navigation-selection__cityscape {\n  bottom: 0;\n  height: auto;\n  position: absolute;\n  width: 100%;\n  z-index: -1;\n}\n.navigation-selection__content {\n  padding: 0.5rem 1rem;\n}\n.slide-enter-to {\n  transform: translateX(0);\n}\n.slide-enter,\n.slide-leave-to {\n  transform: translateX(100%);\n}\n.slide-enter-active,\n.slide-leave-active {\n  transition: 0.2s;\n}\n.gps-button {\n  color: $color-tertiary-2;\n  font-size: 0.8rem;\n  padding: 1rem 0.5rem;\n  > * {\n    @include vert-align;\n    > :nth-child(2) {\n      color: $color-black;\n      margin-left: 0.5rem;\n    }\n  }\n}\n</style>\n","\n<div>\n  <InputFilterSearch\n    ref=\"inputSearch\"\n    :id=\"'pharmacy-search-pharmacy-input'\"\n    :name=\"'pharmacy-search-pharmacy-name'\"\n    :aria-label=\"'Filter by pharmacy name'\"\n    :placeholder=\"'Filter by pharmacy name'\"\n    :error=\"false\"\n    @resetValue=\"resetFilteredPharmacies\"\n    @searchAlgorithm=\"onChange\"\n  />\n  <p v-if=\"noMatch\" class=\"mt--l\" aria-live=\"polite\">\n    Oh no! We were unable to find a pharmacy with that name. Please try\n    another name or enter a new address or ZIP code.\n  </p>\n</div>\n","<template>\n  <div>\n    <InputFilterSearch\n      ref=\"inputSearch\"\n      :id=\"'pharmacy-search-pharmacy-input'\"\n      :name=\"'pharmacy-search-pharmacy-name'\"\n      :aria-label=\"'Filter by pharmacy name'\"\n      :placeholder=\"'Filter by pharmacy name'\"\n      :error=\"false\"\n      @resetValue=\"resetFilteredPharmacies\"\n      @searchAlgorithm=\"onChange\"\n    />\n    <p v-if=\"noMatch\" class=\"mt--l\" aria-live=\"polite\">\n      Oh no! We were unable to find a pharmacy with that name. Please try\n      another name or enter a new address or ZIP code.\n    </p>\n  </div>\n</template>\n\n<script>\nimport InputFilterSearch from '~/vue/components/Input/InputFilterSearch.vue'\n\nexport default {\n  components: {\n    InputFilterSearch,\n  },\n  props: {\n    suggestions: Array,\n  },\n  data() {\n    return {\n      noMatch: false,\n    }\n  },\n  methods: {\n    onChange(q) {\n      if (!q.length) {\n        this.resetFilteredPharmacies()\n        this.noMatch = false\n        return\n      }\n      const filteredPharmacies = this.suggestions.filter((pharmacy) =>\n        pharmacy.name.toLowerCase().startsWith(q.toLowerCase())\n      )\n      if (filteredPharmacies.length == 0) {\n        this.noMatch = true\n      } else {\n        this.noMatch = false\n      }\n      this.$emit('set-filtered-pharmacies', filteredPharmacies)\n    },\n    resetFilteredPharmacies() {\n      this.$emit('set-filtered-pharmacies', null)\n    },\n  },\n  watch: {\n    suggestions: {\n      handler() {\n        this.$refs.inputSearch.setCurrentValue('')\n        this.resetFilteredPharmacies()\n      },\n    },\n  },\n}\n</script>\n"],"names":["render","staticRenderFns","__vue2_script","MUTATIONS"],"mappings":"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"}