2.26.1 • Published 8 days ago
@vtexlab/instore-pickup-points-modal v2.26.1
InStore Pickup Points Modal
A React component that renders VTEX's instore pickup points modal
Setup
$ npm install @vtex/instore-pickup-points-modal
API
Base Component
Base Component
PickupPointsModal
This component renders the modal with a list of pickup points and a map with markers
Props
closePickupPointsModal
: Callback function to be called when PickupPointsModal is closedchangeActiveSLAOption
: Callback function to be called when a pickup is selectedchangeActivePickupDetails
: Callback function to be called when PickupPointDetails state is changedgoogleMapsKey
: The Google Maps API Keyitems
: Items array fromorderForm
to get the products informationisPickupDetailsActive
: (default:false
) If the PickupPointDetails is active and should be renderedlogisticsInfo
: LogisticsInfo array fromorderForm
to get sla informationonAddressChange
: Callback function to be called when a the search field has changedpickupOptions
: 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 sellerstorePreferencesData
: Object fromorderForm
to 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,
}
Example
<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}
/>
2.26.1
8 days ago
2.25.1
12 days ago
2.0.0
7 months ago
1.0.0
11 months ago
0.42.0
11 months ago
0.43.0
11 months ago
0.41.0
12 months ago
0.40.0
12 months ago
0.39.0
1 year ago
0.38.0
1 year ago
0.37.0
1 year ago
0.36.0
1 year ago
0.35.0
1 year ago
0.34.0
1 year ago
0.32.0
1 year ago
0.31.0
1 year ago
0.30.0
1 year ago
0.21.0
2 years ago
0.20.1
2 years ago
0.20.0
2 years ago
0.29.0
1 year ago
0.28.0
1 year ago
0.27.0
1 year ago
0.25.0
1 year ago
0.24.0
1 year ago
0.23.0
2 years ago
0.22.0
2 years ago
0.19.0
2 years ago
0.18.0
2 years ago
0.17.0
2 years ago
0.16.0
2 years ago
0.15.0
2 years ago
0.14.0
2 years ago
0.13.0
2 years ago