@arcteryx/components-click-and-collect

Components for click and collect; StoreAddress, StoreBlock, StoreBlockFullDetails, StoreFinder, StoreFinderSearch, StoreInventory, StoreName.

Install

npm install --save @arcteryx/components-click-and-collect

Translations

• See root README file for translation workflow details

Usage

import { StoreFinder } from "@arcteryx/components-click-and-collect";
import { useLocation } from "@arcteryx/js-geolocation";

const Page = () => {
  const { country, market } = useSiteContext();
  const [location, setLocation] = useState(useLocation);
  const [storeInventoryList, setStoreInventoryList] = useState(null);
  const [selectedStore, setSelectedStore] = useState(getMyLocalStore());
  const [store, setStore] = useState(null);
  const [storeList, setStoreList] = useState(null);
  const [searchResultText, setSearchResultText] = useState(null);


  const handleSearchForm = () => { ... }
  const handleStoreSelected = () => { ... }

  const handleSearchForm = async (searchQuery) => {
    handleForm(searchQuery);
    const stores = await mockSearchStores();
    setStoreList(stores);
    setSearchResultText(getResultText(country));
    const inventory = await mockGetStoreInventory();
    setStoreInventoryList(inventory);
  }

  const handleStoreSelected = (store) => {
    setSelectedStore(store);
    saveMyLocalStore(market, store);
  }

  useEffect(() => {
    const getStoreInventory = async () => {
      setStoreInventoryList = await (location) => { .... }
    }

    getStoreInventory();
  }, [location]);

  return (
    <StoreFinderSearch
    country={country}
    sku={product.sku}
    onSearchForm={handleSearchForm}
    onStoreSelected={handleStoreSelected}
    selectedStore={selectedStore}
    storeInventoryList={storeInventoryList}
    storeList={storeList}
    searchResultText={searchResultText}
   />
  );
};