{"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\n// --------------------------------------\r\n\r\ninterface IsearchBarProp {\r\n  searchTerm: string;\r\n  placeHolder: string;\r\n  handleSearchTermChange: (inputVal: string) => void;\r\n  handleSearchClear: () => void;\r\n  showAllSearchResults: (searchTerm: string) => void;\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}\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 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={props?.placeHolder ?? 'Jag vill köpa...'}\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: SearchResultItem) => {\r\n  return (\r\n    <a href={props.url} className='search-result'>\r\n      <div className='content'>\r\n        <p className='title'>{props.title}</p>\r\n        {props.variants < 2 && (\r\n          <>\r\n            <p className='info'>{props.sku}</p>\r\n            {props.inStock &&\r\n              <p className='info'>\r\n                <i className='fa-regular fa-box in-stock'></i> I lager\r\n              </p>\r\n            }\r\n            {!props.inStock &&\r\n              <p className='info'>\r\n                <i className='fa-regular fa-box not-in-stock'></i> Slut i lager\r\n              </p>\r\n            }\r\n            <p className='info price'>{props.price}</p>\r\n          </>\r\n        )}\r\n        {props.variants > 1 && (\r\n          <>\r\n            <p className='info'>\r\n              {' '}\r\n              Från <span className='price'>{props.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={props.imagePreview} alt={props.title}/>\r\n        </p>\r\n      </div>\r\n    </a>\r\n  );\r\n};\r\n\r\nconst SearchResultsList = (props: IsearchResultListProps) => {\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} search results</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} {...searchItem} />;\r\n                })}\r\n      {props.hasMore &&\r\n        <div className='empori-button' onClick={() => props.showAllSearchResults(props.response.searchTerm)}>\r\n          Show all({props.response.totalCount})\r\n        </div>\r\n      }\r\n    </div>\r\n  );\r\n};\r\n\r\nconst NoResult = () => {\r\n  return (\r\n    <div className='result-list no-search-result'>\r\n      <i className='fa-regular fa-magnifying-glass'></i>\r\n      Inga resultat\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default function Search() {\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 = `/butik/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        placeHolder={'Jag vill köpa...'}\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          />\r\n        ) : (\r\n          <NoResult />\r\n        ))}\r\n    </div>\r\n  );\r\n}"],"names":["Image","props","src","loading","alt","className","SearchBar","placeholder","placeHolder","value","searchTerm","onChange","e","handleSearchTermChange","target","onKeyDown","key","showAllSearchResults","onClick","handleSearchClear","SearchResult","href","url","title","variants","sku","inStock","price","imagePreview","SearchResultsList","handleClickOutside","event","listRef","current","contains","useEffect","document","addEventListener","removeEventListener","response","totalCount","results","length","map","searchItem","id","hasMore","NoResult","Search","useState","setResults","setSearchTerm","timer","setTimer","setHasMore","clearSearch","term","window","location","useRef","ref","inputVal","clearTimeout","timeOutIdentifier","setTimeout","searchReq","fetch","method","headers","Accept","body","JSON","stringify","then","res","json"],"sourceRoot":""}