Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Data Model — delivery-promise-components
vtex.delivery-promise-components
Version: 1.1.4
Latest version: 1.1.4

This document describes the main entities and relationships managed by this app. The app does not own a persistent data store; all state is either session-scoped (VTEX Session) or transient (React context / component state).


Store Framework Blocks

Declared in store/interfaces.json. Each block maps to one React component.

BlockComponentContent Schema Props
shopper-location-setterShopperLocationSetterrequired: boolean, mode: "default"|"icon", showLocationDetectorButton: boolean
shipping-method-selectorShippingMethodSelectorrequired: boolean, mode: "default"|"icon"
pickup-point-selectorPickupPointSelectormode: "default"|"icon"
availability-badgesAvailabilityBadges(no explicit props; reads ProductSummaryContext)

React Context State (DeliveryPromiseContext)

Managed by DeliveryPromiseContext.tsx and shared across all blocks via DeliveryPromiseProvider.

FieldTypeDescription
postalCodestring | nullCurrent shopper postal code. Drives all Delivery Promise queries.
deliveryPromiseMethod"delivery" | "pickup" | nullShipping method chosen by the shopper.
shippingMethodModalRequestIdnumberIncremented to signal shipping-method-selector to open its modal.
registeredBlocks{ shopperLocation?: { required: boolean }; shippingMethod?: { required: boolean } }Registry of mounted blocks and their required flags; drives reload and sequencing logic.

Block Registry Actions

ActionRegistered ByEffect
REGISTER_SHOPPER_LOCATION_BLOCKShopperLocationSetterAdds entry to registry with required flag.
REGISTER_SHIPPING_METHOD_BLOCKShippingMethodSelectorAdds entry to registry with required flag.
REQUEST_OPEN_SHIPPING_METHOD_MODALHook / ShopperLocationSetter (post postal-code)Increments shippingMethodModalRequestId.
UPDATE_ZIPCODEShopperLocationSetterWrites postal code to VTEX Session and context. May trigger effectiveReload.

VTEX Platform Integrations

Platform entityHow used
VTEX SessionSource of truth for postalCode and deliveryPromiseMethod across the storefront. Written via vtex.session-client.
Order ItemsRead via vtex.order-items to check cart items when computing unavailability.
Product Summary ContextRead by AvailabilityBadges to get delivery promise data for the current product in a shelf.
Address FormUsed inside postal code input components via vtex.address-form.
Device DetectorUsed to adapt UI layout for mobile/desktop contexts.
Pixel ManagerFires analytics events on delivery promise interactions.

i18n Messages

Managed in messages/. The reference locale is en (messages/en.json). All other locales must have an equivalent key set, enforced by intl-equalizer (yarn lint:locales).

Key namespace: store/delivery-promise-components.*


CSS Handles

Stable class anchors for store theme customization. Full list in docs/README.md under the Customization section. Handles follow the naming pattern <componentName><Element>.

See also
Vtex.delivery Promise Components
VTEX IO Apps
VTEX App Store
VTEX IO Apps
Was this helpful?