A React component that renders VTEX's instore pickup points modal
$ npm install @vtex/instore-pickup-points-modalThis component renders the modal with a list of pickup points and a map with markers
-
closePickupPointsModal: Callback function to be called when PickupPointsModal is closed -
changeActiveSLAOption: Callback function to be called when a pickup is selected -
changeActivePickupDetails: Callback function to be called when PickupPointDetails state is changed -
googleMapsKey: The Google Maps API Key -
items: Items array fromorderFormto get the products information -
isPickupDetailsActive: (default:false) If the PickupPointDetails is active and should be rendered -
logisticsInfo: LogisticsInfo array fromorderFormto get sla information -
onAddressChange: Callback function to be called when a the search field has changed -
pickupOptions: Array of pickup points (SLAs of typepickup-in-point) -
searchAddress: The current address used for the search input in the shape ofAddressShapeWithValidation -
selectedPickupPoint: Current selected SLA of typepickup-in-point -
rules: The selected country rules fromAddressForm -
sellerId: The Id of the seller when the list of pickups is filtered by seller -
storePreferencesData: Object fromorderFormto get currency preferences from store
PickupPointsModal.propTypes = {
activePickupPoint: PropTypes.object,
askForGeolocation: PropTypes.bool,
askForGeolocationStatus: PropTypes.string,
changeActivePickupDetails: PropTypes.func.isRequired,
changeActiveSLAOption: PropTypes.func.isRequired,
closePickupPointsModal: PropTypes.func.isRequired,
googleMaps: PropTypes.object,
googleMapsKey: PropTypes.string.isRequired,
intl: intlShape,
isSearching: PropTypes.bool,
items: PropTypes.array.isRequired,
loading: PropTypes.bool,
logisticsInfo: PropTypes.array.isRequired,
onAddressChange: PropTypes.func.isRequired,
pickupOptions: PropTypes.array.isRequired,
pickupPoints: PropTypes.array.isRequired,
rules: PropTypes.object,
searchAddress: AddressShapeWithValidation,
selectedPickupPoint: PropTypes.object,
sellerId: PropTypes.string,
storePreferencesData: PropTypes.object.isRequired,
}<PickupPointsModal
activePickupPoint={activePickupPoint}
askForGeolocation={false}
closePickupPointsModal={onClosePickupPointsModal}
changeActivePickupDetails={handleChangeActivePickupDetails}
changeActiveSLAOption={handleChangeActiveSLAOption}
googleMapsKey={googleMapsApiKey}
intl={intl}
isPickupDetailsActive
items={items}
logisticsInfo={logisticsInfo}
pickupOptions={pickupOptions}
pickupPoints={pickupPoints}
availablePickupPoints={availablePickupPoints}
onAddressChange={noop}
rules={countryRule}
searchAddress={searchAddress}
selectedPickupPoint={activePickupPoint}
storePreferencesData={storePreferencesData}
/>