{"version":3,"file":"search.js","mappings":"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","sources":["webpack://empori-primeflow-base/./src/search/search.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { useState, useEffect, useRef } from 'react';\r\n\r\n// Models from typing - Should be moved to types and generated from backend\r\nexport interface SearchResultResponse {\r\n  totalCount: number;\r\n  searchTerm: string;\r\n  results: SearchResultItem[];\r\n}\r\n\r\nexport interface SearchResultItem {\r\n  title: string;\r\n  price: string;\r\n  url: string;\r\n  imagePreview: string;\r\n  sku: string;\r\n  variants: number;\r\n  inStock: boolean;\r\n}\r\n\r\nexport interface SearchTranslations {\r\n  searchBarPhrase: string; // Jag vill köpa\r\n  searchResultInStock: string; // I lager\r\n  searchResultOutOfStock: string; // Slut i lager\r\n  searchResultFrom: string; // Från\r\n  searchResultShowAll: string; // Show all\r\n  searchResults: string; // search results\r\n  searchResultsNoResults: string;// Inga resultat\r\n}\r\n\r\nexport interface SearchOptions {\r\n  translations: SearchTranslations;\r\n  storeUrl: string;\r\n}\r\n\r\n// --------------------------------------\r\n\r\ninterface ISearchProps {\r\n  searchOptions: SearchOptions;\r\n}\r\ninterface IsearchBarProp {\r\n  searchTerm: string;\r\n  translations: SearchTranslations;\r\n  handleSearchTermChange: (inputVal: string) => void;\r\n  handleSearchClear: () => void;\r\n  showAllSearchResults: (searchTerm: string) => void;\r\n}\r\n\r\ninterface ISearchResultProp{\r\n  searchResultItem: SearchResultItem;\r\n  translations: SearchTranslations;\r\n}\r\n\r\ninterface INoResultProp{\r\n  translations: SearchTranslations;\r\n}\r\n\r\ninterface IsearchResultListProps {\r\n  response: SearchResultResponse;\r\n  hasMore: boolean;\r\n  setHasMore: (isSet: boolean) => void;\r\n  handleSearchClear: () => void;\r\n  listRef: React.RefObject<HTMLDivElement>;\r\n  showAllSearchResults: (searchTerm: string) => void;\r\n  translations: SearchTranslations;\r\n}\r\n\r\nexport interface ISearchRequest {\r\n  searchTerm: string;\r\n}\r\n\r\nconst Image = (props: { src?: string; alt?: string }) => {\r\n  return props.src\r\n    ? <img src={props.src} loading='lazy' alt={props.alt ?? ''} />\r\n    : <i className='fa-regular fa-box'></i>;\r\n};\r\n\r\nconst SearchBar = (props: IsearchBarProp) => {\r\n  const { translations } = props;\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n    if (e.key === 'Enter') {\r\n      props.showAllSearchResults(props.searchTerm);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div className='search-bar-wrapper'>\r\n      <div className='input-container'>\r\n        <input\r\n          className='search-input'\r\n          placeholder={translations.searchBarPhrase}\r\n          value={props.searchTerm}\r\n          onChange={(e) => props.handleSearchTermChange(e.target.value)}\r\n          onKeyDown={handleKeyDown}\r\n        />\r\n        {props.searchTerm && (\r\n          <button className='clear-icon search-clear' onClick={props.handleSearchClear}>\r\n            <i className='fa-solid fa-xmark' />\r\n          </button>\r\n        )}\r\n      </div>\r\n      <button className='search-button' onClick={() => props.showAllSearchResults(props.searchTerm)}>\r\n        <i className='fa-regular fa-magnifying-glass'></i>\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n\r\nconst SearchResult = (props: ISearchResultProp) => {\r\n  const { translations, searchResultItem } = props;\r\n  return (\r\n    <a href={searchResultItem.url} className='search-result'>\r\n      <div className='content'>\r\n        <p className='title'>{searchResultItem.title}</p>\r\n        {searchResultItem.variants < 2 && (\r\n          <>\r\n            <p className='info'>{searchResultItem.sku}</p>\r\n            {searchResultItem.inStock &&\r\n              <p className='info'>\r\n                <i className='fa-regular fa-box in-stock'></i> {translations.searchResultInStock}\r\n              </p>\r\n            }\r\n            {!searchResultItem.inStock &&\r\n              <p className='info'>\r\n                <i className='fa-regular fa-box not-in-stock'></i> {translations.searchResultOutOfStock}\r\n              </p>\r\n            }\r\n            <p className='info price'>{searchResultItem.price}</p>\r\n          </>\r\n        )}\r\n        {searchResultItem.variants > 1 && (\r\n          <>\r\n            <p className='info'>\r\n              {' '}\r\n              {translations.searchResultFrom} <span className='price'>{searchResultItem.price}</span>\r\n            </p>\r\n          </>\r\n        )}\r\n      </div>\r\n      <div className='product-image'>\r\n        <p>\r\n          <Image src={searchResultItem.imagePreview} alt={searchResultItem.title} />\r\n        </p>\r\n      </div>\r\n    </a>\r\n  );\r\n};\r\n\r\nconst SearchResultsList = (props: IsearchResultListProps) => {\r\n  const { translations } = props;\r\n  const handleClickOutside = (event: MouseEvent) => {\r\n    if (props.listRef.current && !props.listRef.current.contains(event.target as Node)) {\r\n      props.handleSearchClear();\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    document.addEventListener('mousedown', handleClickOutside);\r\n    return () => {\r\n      document.removeEventListener('mousedown', handleClickOutside);\r\n    };\r\n  }, []);\r\n\r\n  return (\r\n    <div className='result-list'>\r\n      <p className='total-count'>{props.response.totalCount} {translations.searchResults}</p>\r\n      {props.response.results.length > 0 &&\r\n        props.response.results.map(\r\n          (searchItem: SearchResultItem, id: number) => {\r\n            return <SearchResult key={id} translations={translations} searchResultItem={searchItem} />;\r\n          })}\r\n      {props.hasMore &&\r\n        <div className='empori-button' onClick={() => props.showAllSearchResults(props.response.searchTerm)}>\r\n          {translations.searchResultShowAll}({props.response.totalCount})\r\n        </div>\r\n      }\r\n    </div>\r\n  );\r\n};\r\n\r\nconst NoResult = (props: INoResultProp) => {\r\n  const { translations } = props;\r\n  return (\r\n    <div className='result-list no-search-result'>\r\n      <i className='fa-regular fa-magnifying-glass'></i>\r\n      {translations.searchResultsNoResults}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default function Search(props: ISearchProps) {\r\n  const { searchOptions } = props;\r\n  const translations = searchOptions.translations;\r\n  const [response, setResults] = useState<SearchResultResponse>({\r\n    totalCount: 0,\r\n    searchTerm: '',\r\n    results: []\r\n  });\r\n  const [searchTerm, setSearchTerm] = useState('');\r\n  const [timer, setTimer] = useState<NodeJS.Timeout>();\r\n  const [hasMore, setHasMore] = useState(true);\r\n\r\n  const fetchData = (value: string) => {\r\n    const searchReq: ISearchRequest = {\r\n      searchTerm: value\r\n    };\r\n\r\n    fetch('/umbraco/EmporiApi/PrimeflowSearch/Search', {\r\n      method: 'post',\r\n      headers: {\r\n        Accept: 'application/json, text/plain, */*',\r\n        'Content-type': 'application/json; charset=UTF-8'\r\n      },\r\n      body: JSON.stringify(searchReq)\r\n    })\r\n      .then((res) => res.json())\r\n      .then((json) => {\r\n        setHasMore(json.totalCount > 4);\r\n        setResults(json);\r\n      });\r\n  };\r\n\r\n  const handleChange = async (inputVal: string) => {\r\n    setSearchTerm(inputVal);\r\n    if (inputVal) {\r\n      if (timer) {\r\n        clearTimeout(timer);\r\n      }\r\n\r\n      const timeOutIdentifier = setTimeout(() => {\r\n        fetchData(inputVal);\r\n      }, 500);\r\n      setTimer(timeOutIdentifier);\r\n    }\r\n  };\r\n\r\n  const clearSearch = () => {\r\n    setSearchTerm('');\r\n    setResults({\r\n      totalCount: 0,\r\n      searchTerm: '',\r\n      results: []\r\n    });\r\n  };\r\n\r\n  const showAllSearchResults = (term: string) => {\r\n    window.location.href = `${searchOptions.storeUrl}/search?q=${term}&mode=text`;\r\n  };\r\n\r\n  const listRef = useRef<HTMLDivElement>(null);\r\n\r\n  return (\r\n    <div className='empori-primeflow-search' ref={listRef}>\r\n      <SearchBar\r\n        searchTerm={searchTerm}\r\n        translations={translations}\r\n        handleSearchTermChange={handleChange}\r\n        handleSearchClear={clearSearch}\r\n        showAllSearchResults={showAllSearchResults}\r\n      />\r\n\r\n      {searchTerm &&\r\n        response &&\r\n        (response.totalCount > 0 ? (\r\n          <SearchResultsList\r\n            response={response}\r\n            setHasMore={setHasMore}\r\n            hasMore={hasMore}\r\n            handleSearchClear={clearSearch}\r\n            listRef={listRef}\r\n            showAllSearchResults={showAllSearchResults}\r\n            translations={translations}\r\n          />\r\n        ) : (\r\n          <NoResult\r\n            translations={translations}\r\n          />\r\n        ))}\r\n    </div>\r\n  );\r\n}"],"names":["Image","props","src","loading","alt","className","SearchBar","translations","placeholder","searchBarPhrase","value","searchTerm","onChange","e","handleSearchTermChange","target","onKeyDown","key","showAllSearchResults","onClick","handleSearchClear","SearchResult","searchResultItem","href","url","title","variants","sku","inStock","searchResultInStock","searchResultOutOfStock","price","searchResultFrom","imagePreview","SearchResultsList","handleClickOutside","event","listRef","current","contains","useEffect","document","addEventListener","removeEventListener","response","totalCount","searchResults","results","length","map","searchItem","id","hasMore","searchResultShowAll","NoResult","searchResultsNoResults","Search","searchOptions","useState","setResults","setSearchTerm","timer","setTimer","setHasMore","clearSearch","term","window","location","storeUrl","useRef","ref","inputVal","clearTimeout","timeOutIdentifier","setTimeout","searchReq","fetch","method","headers","Accept","body","JSON","stringify","then","res","json"],"sourceRoot":""}