{"version":3,"file":"230.bundle.js","mappings":"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","sources":["webpack:///./components/search-bar/index.js"],"sourcesContent":["/* eslint-disable max-statements */\nimport axios from 'axios'\nimport {\n  BodyText,\n  SearchIcon,\n  CloseSmIcon,\n  AutoSuggest,\n  SuggestionList,\n  Link,\n} from '@paypalcorp/pp-react'\nimport React, { useEffect, useState, useMemo } from 'react'\nimport classNames from 'classnames'\nimport { componentNames, fptiTypes } from '../../utils/analytics/fpti-constants'\nimport * as constants from '../../constants/index'\nimport _debouce from 'lodash/debounce'\nimport _isEmpty from 'lodash/isEmpty'\nimport _get from 'lodash/get'\n\n// Hooks\nimport { useMessage } from '../../hooks/useMessage'\nimport useTracking from '../../hooks/useTracking'\nimport { useAppContext } from '../../contexts/app-context'\nimport { useHelper } from '../../hooks/useHelper'\n\n// Utils\nimport {\n  filterSearchResponse,\n  getFaqUrlFromTitle,\n  getSanitizedValue,\n} from '../../utils/helper'\nimport serverData from '../../utils/server-data'\n\n// styles\nimport './search-bar.less'\n\nlet suggestionsCache = {}\n\nfunction SearchBar() {\n  // Initial State\n  const [inputText, setInputText] = useState('')\n  const [suggestions, setSuggestions] = useState([])\n  const [inputFocus, setInputFocus] = useState(false)\n  const [currentChar, setCurrentChar] = useState(0)\n  const [isMaxCharError, setIsMaxCharError] = useState(false)\n  const [isDisplayPopularArticles, setIsDisplayPopularArticles] =\n    useState(false)\n  const [isLoadingSuggestions, setisLoadingSuggestions] = useState(false)\n  const [autoSuggestionsErrorMsg, setAutoSuggestionsErrorMsg] = useState('')\n\n  // Consume hooks\n  const { getMessage } = useMessage()\n  const { trackActivity, trackClick } = useTracking()\n  const { generateLinkWithCoBrand } = useHelper()\n\n  // App Context\n  const appCtx = useAppContext()\n  const {\n    pageProps: {\n      apiData: { searchPopularArticles: defaultPopularArticles },\n    },\n  } = appCtx\n\n  // i18n Message constants\n  const i18nMessages = {\n    searchPlaceHolder: getMessage('app.helpcenter.search'),\n    viewSearchResult: getMessage('app.helpcenter.viewSearchResult'),\n    autoSuggestionTopHeader: getMessage('app.helpcenter.helpCenterResults'),\n    maxCharError: getMessage('app.helpcenter.maxCharError'),\n    noSuggestionError: getMessage('app.helpcenter.noSuggestionsFound'),\n  }\n\n  // Variables\n  let suggestSelected = false\n  const searchResult = { searchResultText: '' }\n\n  const filteredDefaultPopularArticles = useMemo(\n    () => filterSearchResponse(defaultPopularArticles),\n    [defaultPopularArticles],\n  )\n\n  // Methods\n\n  // Fetch autocomplete results from search API\n  const fetchAutocompleteResults = async (searchString) => {\n    const { data } = await axios.post(`/cshelp/api/search-auto-complete`, {\n      _csrf: _get(serverData, '_csrf', ''),\n      searchString,\n    })\n    const filteredData = filterSearchResponse({ data })\n    return filteredData\n  }\n\n  // update the auto complete results, condition to check the same query from cache\n  const updateSuggestions = async (query) => {\n    const formattedSuggestionsArr = [\n      {\n        id: 'helpCenterSearchResults',\n        title: i18nMessages.autoSuggestionTopHeader,\n      },\n    ]\n    // Check if suggestions exists in cache from the previous search queries\n    if (query in suggestionsCache) {\n      formattedSuggestionsArr[0].suggestions =\n        suggestionsCache[query][0].suggestions\n      setisLoadingSuggestions(false)\n      return setSuggestions(formattedSuggestionsArr)\n    }\n    const newResults = await fetchAutocompleteResults(query)\n\n    if (!(Array.isArray(newResults) && newResults.length)) {\n      setAutoSuggestionsErrorMsg(i18nMessages.noSuggestionError)\n      trackActivity({\n        name: componentNames.SEARCH_AUTO_SUGGESTIONS,\n        type: fptiTypes.ERROR,\n        link: 'search-autocomplete-no-suggestions-found',\n        srch: query,\n      })\n    }\n\n    formattedSuggestionsArr[0].suggestions = newResults\n    suggestionsCache[query] = formattedSuggestionsArr\n    setisLoadingSuggestions(false)\n    setSuggestions(formattedSuggestionsArr)\n    return trackActivity({\n      name: componentNames.SEARCH_AUTO_SUGGESTIONS,\n      type: fptiTypes.SUCCESS,\n      link: `search-autocomplete-suggestions-shown|suggestions-length-${newResults.length}`,\n      srch: query,\n    })\n  }\n\n  // show the popular articles when user focus on the search input box\n  const showPopularArticles = () => {\n    setIsDisplayPopularArticles(true)\n  }\n\n  // hide the popular articles when user clears the search keyword in the input box\n  const hidePopularArticles = () => {\n    setIsDisplayPopularArticles(false)\n  }\n\n  // Method to check the minimum search characters\n  const hasMinimimSearchCharacters = () => {\n    searchResult.searchResultText = inputText\n    const sanitizedInputText = inputText ? inputText.trim() : ''\n    return sanitizedInputText.length >= constants.MIN_LENGTH_SEARCH_CHAR\n  }\n\n  // condition checking to enable the popular articles\n  // const isDisplayDefaultPopularArticles = () => {\n  const isTopPopularArticlesPresent = () => {\n    return (\n      !hasMinimimSearchCharacters() &&\n      Array.isArray(filteredDefaultPopularArticles) &&\n      filteredDefaultPopularArticles.length > 0\n    )\n  }\n\n  // on change event handler\n  const onChange = (event) => {\n    const { value } = event.target\n    if (event.type === 'change') {\n      setInputText(value)\n      setCurrentChar(value.length)\n    }\n    if (value && value.length === constants.MAX_LENGTH_SEARCH_CHAR) {\n      setIsMaxCharError(true)\n      trackActivity({\n        name: componentNames.SEARCH_BAR,\n        type: fptiTypes.ON_CLICK,\n        link: 'search-char-limit-error',\n        srch: inputText,\n      })\n    } else {\n      setIsMaxCharError(false)\n    }\n    if (value && value.length > 0) {\n      hidePopularArticles()\n    }\n  }\n\n  // on Blur event handler\n  const onBlur = () => {\n    if (inputText.length === 0) {\n      setInputFocus(false)\n    }\n    if (isTopPopularArticlesPresent()) {\n      hidePopularArticles()\n    }\n  }\n\n  // on Focus event handler\n  const onFocus = (event) => {\n    event.preventDefault()\n    event.stopPropagation()\n    setInputFocus(true)\n\n    // FPTI: click on the search box\n    trackClick({\n      name: componentNames.SEARCH_BAR,\n      type: fptiTypes.ON_CLICK,\n      link: 'search-bar-focused',\n    })\n\n    // Default popular articles handler\n    if (isTopPopularArticlesPresent()) {\n      showPopularArticles()\n\n      // FPTI: quicklinks for common questions shown activity\n      trackActivity({\n        name: componentNames.SEARCH_TOP_POPULAR_ARTICLES,\n        type: fptiTypes.SUCCESS,\n        link: 'search-bar-popular-articles-quicklinks-shown',\n      })\n    }\n  }\n\n  const returnSanitizedValue = (val) => {\n    return getSanitizedValue(val)\n  }\n\n  const goToSearchResultsPage = () => {\n    window.location = `${generateLinkWithCoBrand(\n      `/smarthelp/search?q=${returnSanitizedValue(inputText)}`,\n    )}`\n  }\n\n  const submitForm = (e) => {\n    e.preventDefault()\n    if (\n      returnSanitizedValue(inputText).length < constants.MIN_LENGTH_SEARCH_CHAR\n    ) {\n      return\n    }\n\n    // Empty search text will not fire FPTI request\n    trackClick({\n      name: componentNames.SEARCH_BAR,\n      type: fptiTypes.ON_CLICK,\n      link: 'search-input-entered-full-search',\n      srch: inputText,\n    })\n\n    // go to the full search help page\n    goToSearchResultsPage()\n  }\n\n  // render the character count place holder\n  const renderCharCount = () => {\n    if (inputText.length > 0) {\n      return (\n        <BodyText\n          name=\"search-input-char-count\"\n          data-testid=\"search-input-char-count\"\n          className={classNames('hc_search-input__character-count', {\n            'hc_search-input__character-count-error': isMaxCharError,\n          })}\n        >\n          {`${currentChar}/${constants.MAX_LENGTH_SEARCH_CHAR}`}\n        </BodyText>\n      )\n    }\n    return ''\n  }\n\n  // clear the search\n  const clearSearch = () => {\n    trackClick({\n      name: componentNames.SEARCH_BAR,\n      type: fptiTypes.ON_CLICK,\n      link: 'search-input-clear-button-clicked',\n    })\n    setInputText('')\n    setIsMaxCharError(false)\n    setSuggestions([])\n    setInputFocus(false)\n    setAutoSuggestionsErrorMsg('')\n  }\n\n  // Handle the clear(x) icon key press\n  const handleClearKeyPress = (event) => {\n    if (event.key === 'Enter') {\n      clearSearch()\n    }\n  }\n\n  // on KeyUp event handler\n  const onKeyUp = (event) => {\n    if (event.key === 'Enter') {\n      event.target.blur()\n      submitForm(event)\n    }\n  }\n\n  // render the clear button\n  const renderClearButton = () => {\n    if (!inputText.trim()) return null\n    return (\n      <div\n        className=\"hc_search-input__clear-search-btn\"\n        data-testid=\"hc-search-input-clear-search-btn\"\n        tabIndex=\"0\"\n        role=\"button\"\n        aria-label=\"clear search\"\n        onKeyPress={(event) => handleClearKeyPress(event)}\n        onClick={() => clearSearch()}\n      >\n        <CloseSmIcon size=\"xs\" />\n      </div>\n    )\n  }\n\n  // call the autocomplete API when onSuggestionsFetchRequested\n  const onSuggestionsFetchRequested = (newValue) => {\n    // Cancel fetching the auto-complete event after selecting one of the suggestions\n    if (suggestSelected) {\n      suggestSelected = false\n      return null\n    }\n\n    const sanitizedNewValue = returnSanitizedValue(newValue)\n    const sanitizedInputText = returnSanitizedValue(inputText)\n    // dont show the result when max char is reached\n    if (\n      sanitizedInputText !== sanitizedNewValue &&\n      sanitizedNewValue.length > constants.MIN_LENGTH_SEARCH_CHAR &&\n      sanitizedNewValue.length < constants.MAX_LENGTH_SEARCH_CHAR\n    ) {\n      setisLoadingSuggestions(true)\n      setAutoSuggestionsErrorMsg('')\n      updateSuggestions(sanitizedNewValue)\n    }\n\n    if (isMaxCharError) {\n      setAutoSuggestionsErrorMsg('')\n    }\n\n    return null\n  }\n\n  // On suggestion selected logic\n  const onSuggestionSelected = (event, suggestion) => {\n    event.preventDefault()\n    event.stopPropagation()\n\n    // articles clicked from auto search. Useful for qulatrics intercepts\n    suggestSelected = true // Mark one suggestion be selected\n    const formattedTitle = getFaqUrlFromTitle(suggestion.value)\n    const articleId = _get(suggestion, 'docid') || ''\n    const rank = _get(suggestion, 'rank')\n    const searchResultsLength = isDisplayPopularArticles\n      ? suggestions.length\n      : suggestions[0].suggestions.length\n\n    if (isDisplayPopularArticles) {\n      trackClick({\n        name: componentNames.SEARCH_TOP_POPULAR_ARTICLES,\n        type: fptiTypes.ON_CLICK,\n        link: `top-popular-article-quick-link-clicked|${articleId}`,\n        help_doc_id: articleId,\n      })\n    } else {\n      trackClick({\n        name: componentNames.SEARCH_AUTO_SUGGESTIONS,\n        type: fptiTypes.ON_CLICK,\n        link: `search-auto-complete-suggestion-clicked|${articleId}|rank-${rank}|suggestions-length-${searchResultsLength}`,\n        help_doc_id: articleId,\n        srch: inputText,\n      })\n    }\n\n    return (window.location = `${generateLinkWithCoBrand(\n      `/cshelp/article/${formattedTitle}-${articleId}`,\n    )}`)\n  }\n\n  const renderAutoSuggestionArticlesList = () => {\n    return (\n      <SuggestionList\n        className=\"autosuggest__query-suggestions-container\"\n        data-testid=\"autosuggest-query-suggestions-container\"\n        query={inputText}\n        onSelect={onSuggestionSelected}\n        suggestions={suggestions}\n        hasSections\n      />\n    )\n  }\n\n  // Render default top popular articles\n  const renderPopularArticlesSuggestionList = () => {\n    if (inputFocus && inputText.length === 0 && isTopPopularArticlesPresent()) {\n      return (\n        <div\n          className=\"hc_autosuggest__popular-articles-container\"\n          data-testid=\"hc-autosuggest-popular-articles-container\"\n        >\n          <SuggestionList\n            suggestions={filteredDefaultPopularArticles}\n            onSelect={onSuggestionSelected}\n          />\n        </div>\n      )\n    }\n    return null\n  }\n\n  // Renders \"View all Results\" link in the suggestions footer section\n  const suggestionListFooter = (\n    <Link\n      href={`${generateLinkWithCoBrand(\n        `/smarthelp/search?q=${returnSanitizedValue(inputText)}`,\n      )}`}\n      onClick={() => {\n        // FPTI: click on the suggestion selected\n        trackClick({\n          name: componentNames.SEARCH_AUTO_SUGGESTIONS,\n          type: fptiTypes.ON_CLICK,\n          link: 'auto-suggestions-view-all-results-clicked',\n          srch: inputText,\n        })\n      }}\n      size=\"sm\"\n    >\n      {i18nMessages.viewSearchResult}\n    </Link>\n  )\n\n  // component onmount\n  useEffect(() => {\n    // track fpti\n    trackActivity({ name: componentNames.SEARCH_BAR, type: fptiTypes.SUCCESS })\n  }, [trackActivity])\n\n  return (\n    <div data-testid=\"hc-search-box\">\n      <form role=\"search\" onSubmit={(e) => submitForm(e)}>\n        <div>\n          <AutoSuggest\n            onChange={onChange}\n            onBlur={onBlur}\n            onKeyUp={onKeyUp}\n            onFocus={(event) => onFocus(event)}\n            fetchSuggestions={onSuggestionsFetchRequested}\n            autoComplete=\"on\"\n            suggestionList={renderAutoSuggestionArticlesList()}\n            id=\"searchInput\"\n            name=\"searchInput\"\n            label={i18nMessages.searchPlaceHolder}\n            debounceTimeout={300}\n            maxLength={constants.MAX_LENGTH_SEARCH_CHAR}\n            value={inputText}\n            error={isMaxCharError}\n            suggestionListErrorMessage={autoSuggestionsErrorMsg}\n            suggestionListFooter={\n              !isDisplayPopularArticles && suggestionListFooter\n            }\n            suggestionListFooterClassName=\"autosuggestion__view-results-footer\"\n            errorText={isMaxCharError ? i18nMessages.maxCharError : ''}\n            leftIcon={\n              <SearchIcon\n                size=\"sm\"\n                className=\"hc_search-input__icon\"\n                data-testid=\"hc-search-input-icon\"\n                aria-label=\"Search\"\n              />\n            }\n            rightIcon={\n              <div>\n                {renderCharCount()}\n                {renderClearButton()}\n              </div>\n            }\n            data-testid=\"hc-autosuggestion-container\"\n            isLabelHidden={false}\n            isLoadingSuggestions={isLoadingSuggestions}\n          />\n          {/* Render Suggestions List */}\n          {renderPopularArticlesSuggestionList()}\n        </div>\n      </form>\n    </div>\n  )\n}\n\nexport default SearchBar\n"],"names":["suggestionsCache","useState","inputText","setInputText","suggestions","setSuggestions","inputFocus","setInputFocus","currentChar","setCurrentChar","isMaxCharError","setIsMaxCharError","isDisplayPopularArticles","setIsDisplayPopularArticles","isLoadingSuggestions","setisLoadingSuggestions","autoSuggestionsErrorMsg","setAutoSuggestionsErrorMsg","getMessage","useMessage","useTracking","trackActivity","trackClick","generateLinkWithCoBrand","useHelper","defaultPopularArticles","useAppContext","pageProps","apiData","searchPopularArticles","i18nMessages","searchPlaceHolder","viewSearchResult","autoSuggestionTopHeader","maxCharError","noSuggestionError","suggestSelected","searchResult","searchResultText","filteredDefaultPopularArticles","useMemo","filterSearchResponse","fetchAutocompleteResults","searchString","axios","_csrf","_get","serverData","data","filteredData","updateSuggestions","query","formattedSuggestionsArr","id","title","newResults","Array","isArray","length","name","componentNames","type","fptiTypes","link","srch","hidePopularArticles","isTopPopularArticlesPresent","trim","constants","returnSanitizedValue","val","getSanitizedValue","submitForm","e","preventDefault","window","location","clearSearch","onSuggestionSelected","event","suggestion","stopPropagation","formattedTitle","getFaqUrlFromTitle","value","articleId","rank","searchResultsLength","help_doc_id","suggestionListFooter","href","onClick","size","useEffect","role","onSubmit","onChange","target","onBlur","onKeyUp","key","blur","onFocus","fetchSuggestions","newValue","sanitizedNewValue","autoComplete","suggestionList","className","onSelect","hasSections","label","debounceTimeout","maxLength","error","suggestionListErrorMessage","suggestionListFooterClassName","errorText","leftIcon","rightIcon","classNames","tabIndex","onKeyPress","handleClearKeyPress","isLabelHidden"],"sourceRoot":""}