{"version":3,"file":"search-BIeGBoRN.js","sources":["../../../app/assets/javascripts/page_includes/search.js"],"sourcesContent":["import axios from 'axios'\n\ndocument.addEventListener('DOMContentLoaded', () => {\n  $('#vm-cause-area-select').select2({\n    placeholder: 'ex. Animals',\n    minimumInputLength: 0,\n    ajax: {\n      url: '/volunteer_match_api/filters',\n      dataType: 'json',\n      delay: 0,\n      data: function (params) {\n        return {\n          q: params.term // search term\n        }\n      },\n      processResults: function (data, _params) {\n        // parse the results into the format expected by Select2\n        // TODO: Clean up formatting function\n        return {\n          results: data.map((el) => {\n            return {\n              id: el['name'],\n              text: el['name']\n                //Prepend capital letters with space\n                .replace(/([A-Z])/g, ' $1')\n                .trim()\n                // Lowercase all first letters\n                .replace(/\\b[A-Z][a-z]+\\b/g, (word) => word.toLowerCase())\n                // Capitalize first letter\n                .replace(/^[a-z]/g, (first) => first.toUpperCase())\n            }\n          }),\n          cache: true\n        }\n      }\n    }\n  })\n\n  $('#vm-great-for-select').select2({\n    placeholder: 'ex. Great for Groups'\n  })\n\n  $(document).on('select2:select', '.autocomplete-search-general', async (e) => {\n    const { params: eventParams, currentTarget } = e\n    // The flow here is that, if the user selects a charity that exists in Candid but but not in our database,\n    // we show the charity info in the UI immediately and spool off a request to create the charity in our database afterward.\n    // This keeps the user experience snappy and gives us time to work behind-the-scenes\n    if (eventParams?.data?.charity?.source === 'candid') {\n      const { data: apiData } = await axios.post('/charities/search', {\n        ein: eventParams.data.charity.ein\n      })\n\n      // Since our donation flow works off of charity IDs, we need to update the value of the placeholder\n      // option elements to match the new ID created in our database.\n      //\n      // Failure is handled by failing the entire donation. This _should_ be a rare edge case, but at least\n      // with this approach we'll be notified that something's up\n      if (apiData?.charity?.id) {\n        // Select2 doesn't handle updating the value of an option in-place well. This manifests by options\n        // changing order and, in rare cases, hiding when you add further options (only seems to impact firefox and only sometimes)\n        // I imagine they keep some internal cache of the options and don't update it when the value changes.\n        // Given that, we have to remove the old option and add a new one with the updated value.\n        // In practice this actually works really well and doesn't provide any UI hiccups.\n        const { text: optionLabel, id: optionValue } = eventParams.data\n        const updatedCharityOption = new Option(optionLabel, String(apiData.charity.id), true, true)\n        // Preserve title for chip formatting\n        updatedCharityOption.setAttribute('title', eventParams.data.title)\n\n        document.querySelector(`option[value=\"${optionValue}\"]`)?.remove()\n\n        $(currentTarget)\n          .append(updatedCharityOption)\n          .trigger('change')\n          // This will effectively call this parent function again since we're\n          // re-triggering the select2:select event. However, since we're now saying\n          // the source is local (which it is), we don't repeat this block. That said,\n          // be mindful in future updates to not cause an infinite loop.\n          .trigger({\n            type: 'select2:select',\n            params: {\n              data: {\n                ...eventParams.data,\n                id: String(apiData.charity.id),\n                charity: {\n                  ...eventParams.data.charity,\n                  id: String(apiData.charity.id),\n                  source: 'local'\n                }\n              }\n            }\n          })\n      }\n    }\n  })\n\n  $(document).on('change', '.autocomplete-search-general', (e) => {\n    // This is to allow Stimulus to consume Select2 events as normal JS events\n    e.target.dispatchEvent(new Event('select2:change'))\n  })\n})\n"],"names":["params","data","_params","el","word","first","e","eventParams","currentTarget","_b","_a","apiData","axios","_c","optionLabel","optionValue","updatedCharityOption","_d"],"mappings":"wCAEA,SAAS,iBAAiB,mBAAoB,IAAM,CAClD,EAAE,uBAAuB,EAAE,QAAQ,CACjC,YAAa,cACb,mBAAoB,EACpB,KAAM,CACJ,IAAK,+BACL,SAAU,OACV,MAAO,EACP,KAAM,SAAUA,EAAQ,CACtB,MAAO,CACL,EAAGA,EAAO,IACpB,CACO,EACD,eAAgB,SAAUC,EAAMC,EAAS,CAGvC,MAAO,CACL,QAASD,EAAK,IAAKE,IACV,CACL,GAAIA,EAAG,KACP,KAAMA,EAAG,KAEN,QAAQ,WAAY,KAAK,EACzB,KAAI,EAEJ,QAAQ,mBAAqBC,GAASA,EAAK,YAAa,CAAA,EAExD,QAAQ,UAAYC,GAAUA,EAAM,YAAa,CAAA,CAClE,EACW,EACD,MAAO,EACjB,CACA,CACA,CACG,CAAA,EAED,EAAE,sBAAsB,EAAE,QAAQ,CAChC,YAAa,sBACd,CAAA,EAED,EAAE,QAAQ,EAAE,GAAG,iBAAkB,+BAAgC,MAAOC,GAAM,aAC5E,KAAM,CAAE,OAAQC,EAAa,cAAAC,GAAkBF,EAI/C,KAAIG,GAAAC,EAAAH,GAAA,YAAAA,EAAa,OAAb,YAAAG,EAAmB,UAAnB,YAAAD,EAA4B,UAAW,SAAU,CACnD,KAAM,CAAE,KAAME,CAAO,EAAK,MAAMC,EAAM,KAAK,oBAAqB,CAC9D,IAAKL,EAAY,KAAK,QAAQ,GAC/B,CAAA,EAOD,IAAIM,EAAAF,GAAA,YAAAA,EAAS,UAAT,MAAAE,EAAkB,GAAI,CAMxB,KAAM,CAAE,KAAMC,EAAa,GAAIC,CAAW,EAAKR,EAAY,KACrDS,EAAuB,IAAI,OAAOF,EAAa,OAAOH,EAAQ,QAAQ,EAAE,EAAG,GAAM,EAAI,EAE3FK,EAAqB,aAAa,QAAST,EAAY,KAAK,KAAK,GAEjEU,EAAA,SAAS,cAAc,iBAAiBF,CAAW,IAAI,IAAvD,MAAAE,EAA0D,SAE1D,EAAET,CAAa,EACZ,OAAOQ,CAAoB,EAC3B,QAAQ,QAAQ,EAKhB,QAAQ,CACP,KAAM,iBACN,OAAQ,CACN,KAAM,CACJ,GAAGT,EAAY,KACf,GAAI,OAAOI,EAAQ,QAAQ,EAAE,EAC7B,QAAS,CACP,GAAGJ,EAAY,KAAK,QACpB,GAAI,OAAOI,EAAQ,QAAQ,EAAE,EAC7B,OAAQ,OAC1B,CACA,CACA,CACW,CAAA,CACX,CACA,CACG,CAAA,EAED,EAAE,QAAQ,EAAE,GAAG,SAAU,+BAAiCL,GAAM,CAE9DA,EAAE,OAAO,cAAc,IAAI,MAAM,gBAAgB,CAAC,CACnD,CAAA,CACH,CAAC"}