Working with Delivery Promise components

Explore the core components of the Delivery Promise feature in FastStore, their functions, and how they integrate into your store.

This guide explains the components of the Delivery Promise feature for FastStore. You will understand the purpose of each component, how they function, and where they are located in the FastStore architecture. This knowledge will help you effectively implement and customize the Delivery Promise feature in your store.

To learn how to implement Delivery Promise in your store, see the guide Implementing Delivery Promise.

Components

Delivery Promise introduces modular components and hooks organized within the @faststore/core and @faststore/ui packages.

This guide focuses on the core components provided by the @faststore/core package, which are included by default in FastStore projects. Learn more about the packages in Understanding the project structure.

Below are the core components related to the Delivery Promise feature in FastStore.

RegionButton

RegionButton is a desktop-only component integrated into the NavBar section, under the Global Sections content type in the Headless CMS.

Its behavior is context-dependent. If a shopper doesn’t enter a postal code, a Popover is displayed, and the button label changes depending on whether a default postal code is set. When a shopper enters a postal code, the button displays the location and suppresses the Popover. Additionally, if a shopper sets their location, the RegionModal component is triggered.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAFklEQVR4nGNQkJE9cuTI69evz1+8BAAo6QfZ9nsBRAAAAABJRU5ErkJggg==","img":{"src":"https://vtexhelp.vtexassets.com/assets/docs/src/region-button___ccb03f5e9e36d837a4b03aae6a0a58ff.png","width":1440,"height":212,"type":"png"}}$

If you have customized the NavBar, you must also customize the RegionButton component to use Delivery Promise. However, depending on your customization, you may need to implement your own version of RegionButton.

This component leverages the following:

UI Components: Button and Icon.
Hooks: useSession

RegionModal

RegionModal is a component that serves as a section under the Global Sections content type in the Headless CMS. It contains logic to enforce required location input if specified in the discovery.config.js file, which means the modal can't be closed without providing a location. It checks for valid postal codes and verifies product availability for the given location.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAI0lEQVR4nGNgYNdtnL3377c/UXGZDAyCJoGF01ZNW2hs7QEAiRAKUhiyjNkAAAAASUVORK5CYII=","img":{"src":"https://vtexhelp.vtexassets.com/assets/docs/src/region-modal___6352f280eeb8eb77ee4674a5caf4f328.png","width":1440,"height":752,"type":"png"}}$

If you have customized the NavBar, you must also customize the RegionModal component to use Delivery Promise.

This component leverages the following:

UI Components: RegionModal
Hooks: useRegion

RegionBar

RegionBar is a mobile-only component that acts as a section under the Global Sections content type in the Headless CMS.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAJUlEQVR4nAEaAOX/AEpHSiAcHffy83d4gQDEwsLs6+zc2dr38vOmrw/3SGqdcQAAAABJRU5ErkJggg==","img":{"src":"https://vtexhelp.vtexassets.com/assets/docs/src/regionbar80___52615261c9d206fd8e305d92751c00b5.png","width":662,"height":261,"type":"png"}}$

Even if you have customized the NavBar, you can still utilize the native RegionBar component to use Delivery Promise.

This component leverages the following:

UI Components: RegionBar
Hooks: useSession

RegionPopover

RegionPopover is a component that serves as a section under the Global Sections content type in the Headless CMS. When a default postal code is set in the discovery.config.js file, the location data (city and postal code) is displayed in a Popover.

${"base64":" ","img":{"width":2851,"height":1135,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1097984,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/regionpopover___dedb0aad756657e71d4c8d40cb2ef5e7.png"}}$

If you have customized RegionBar or RegionButton, you can still use the native RegionPopover by integrating it into your custom components. However, depending on your customization, you may need to implement your own version of RegionPopover.

This component leverages the following:

UI Components: Icon, InputField, Link, and Popover.
Hooks: useSession, useRegion

RegionSlider

The RegionSlider component enables shoppers to manage their delivery-related location settings and pickup point filters in the Product Listing Pages (PLPs) or search pages. This component is implemented as a Global Section, making it available throughout the store on mobile and desktop browsers.

It includes three interaction types: Setting a new location (no postal code set), changing an existing location (postal code set), and selecting a pickup point (pickup point filter) for more precise delivery options.

No postal code set: The user clicks the "Set location" button, then the RegionSlider opens, allowing them to set a postal code.

${"base64":" ","img":{"width":1622,"height":822,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":404407,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/set-location___8887a7be647d76a0584e1b977233a672.png"}}$

Postal code set: The user clicks the postal code link, then the RegionSlider opens, allowing them to change the location.

${"base64":" ","img":{"width":1617,"height":824,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":423329,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/change-location___ada68e0df1bac1e8a20abc9040dbf82f.png"}}$

Pickup point filter: The user applies or clears filters related to pickup points. When filters are cleared, the RegionSlider resets its state and removes selected pickup points without closing the component.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAIklEQVR4nGNg4DBhYDOsrWz+/fs3Q2ZJg3dAVEFu3oUbjwFycAsGV0UZowAAAABJRU5ErkJggg==","img":{"src":"https://vtexhelp.vtexassets.com/assets/docs/src/change-pickup-point___458c47c2a06d40385e47058bcbfeaac2.png","width":1266,"height":790,"type":"png"}}$

This component leverages the following:

UI Components: SlideOver
Hooks: useRegion and useDeliveryPromise

FilterDesktop

FilterDesktop is a desktop-only component integrated into the ProductGallery section, under the Global Sections content type in the Headless CMS. It adds a delivery-based filter option that combines all search and PLP filters.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAECAIAAAArjXluAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAJElEQVR4nGNwtncozM5hkJaQTIiOZSgtKd63aydDXX3DvXv3AHksCxPkFAiwAAAAAElFTkSuQmCC","img":{"src":"https://vtexhelp.vtexassets.com/assets/docs/src/filter-desktop___b7c358c72f742ab91467621e4d19839a.png","width":389,"height":737,"type":"png"}}$

FilterSlider

FilterSlider is a mobile-only component integrated into the ProductGallery section under the Global Sections content type in the Headless CMS. It adds a delivery-based filter option that combines all search and PLP filters.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAECAIAAAArjXluAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAIElEQVR4nGNQU1P7//8/g7u7B4hyc3ICUTy8/LPnzgcAuOwNCXZHXnQAAAAASUVORK5CYII=","img":{"src":"https://vtexhelp.vtexassets.com/assets/docs/src/filter-slider___f885f64836ae3bf247ab7b849575230d.png","width":478,"height":942,"type":"png"}}$