@shopgate/engage/locations/components/StoreList/StoreListLocations.js

Shopgate's ENGAGE library.

import React, { useContext } from 'react';
import { CardList, SurroundPortals } from '@shopgate/engage/components';
import PlaceholderLabel from '@shopgate/pwa-ui-shared/PlaceholderLabel';
import { FulfillmentContext } from "../../locations.context";
import { StoreContext } from "./Store.context";
import { StoreCard } from "./StoreCard";
import { stores, storeCard, storeCardPlaceholder } from "./Store.style";
import { FULFILLMENT_SHEET_STORE_LIST } from "../../constants/Portals";

/**
 * Renders the locations.
 * @returns {JSX.Element}
 */
import { jsx as _jsx } from "react/jsx-runtime";
function StoreListLocations() {
  const {
    locations,
    isLoading
  } = useContext(FulfillmentContext);
  if (!isLoading && (!locations || locations.length === 0)) {
    return null;
  }
  const showPlaceholder = isLoading && (!locations || locations.length === 0);
  return /*#__PURE__*/_jsx(SurroundPortals, {
    portalName: FULFILLMENT_SHEET_STORE_LIST,
    portalProps: {
      locations
    },
    children: /*#__PURE__*/_jsx(CardList, {
      className: stores,
      children: /*#__PURE__*/_jsx(PlaceholderLabel, {
        className: storeCardPlaceholder,
        ready: !showPlaceholder,
        children: locations.map(location => /*#__PURE__*/_jsx(CardList.Item, {
          className: storeCard,
          children: /*#__PURE__*/_jsx(StoreContext.Provider, {
            value: location,
            children: /*#__PURE__*/_jsx(StoreCard, {})
          })
        }, location.code))
      })
    })
  });
}
export default StoreListLocations;