A React component that renders VTEX's pickup points modal
Through NPM:
$ npm install @vtex/pickup-points-modal
import PickupPointsModal from '@vtex/pickup-points-modal/PickupPointsModal'
Through vtex.io:
Add vtex.pickup-points-modal
to your manifest.json
dependencies
import { PickupPointsModal } from 'vtex.pickup-points-modal'
This component renders the modal with a list of pickup points and a map with markers
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 storesalesChannel
: String fromorderForm
to get the sales channel used in the checkout simulationorderFormId
: String fromorderForm
used in the checkout simulation
PickupPointsModal.propTypes = {
closePickupPointsModal: PropTypes.func.isRequired,
changeActivePickupDetails: PropTypes.func.isRequired,
changeActiveSLAOption: PropTypes.func.isRequired,
googleMapsKey: PropTypes.string.isRequired,
items: PropTypes.array.isRequired,
isPickupDetailsActive: PropTypes.bool,
logisticsInfo: PropTypes.array.isRequired
onAddressChange: PropTypes.func.isRequired,
pickupOptions: PropTypes.array.isRequired,
searchAddress: AddressShapeWithValidation,
selectedPickupPoint: PropTypes.object,
rules: PropTypes.object,
sellerId: PropTypes.string,
storePreferencesData: PropTypes.object.isRequired,
salesChannel: PropTypes.string.isRequired,
orderFormId: PropTypes.string.isRequired,
};
<PickupPointsModal
closePickupPointsModal={this.closePickupModal}
changeActivePickupDetails={this.changeActivePickupDetails}
changeActiveSLAOption={this.changeActiveSLAOption}
googleMapsKey={googleMapsKey}
intl={intl}
items={items}
isPickupDetailsActive={isPickupDetailsActive}
logisticsInfo={logisticsInfo}
onAddressChange={this.handleAddressChange}
orderFormId={orderFormId}
pickupOptions={pickupOptions}
searchAddress={searchAddress}
selectedPickupPoint={selectedPickupPoint}
selectedRules={selectedRules}
sellerId={sellerId}
storePreferencesData={storePreferencesData}
salesChannel={salesChannel}
/>