Understanding Delivery Promise components

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

This feature is in closed beta, meaning only selected customers can access it. If you're interested in implementing it, please contact our Support team.

This guide provides an overview of the Delivery Promise components 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. To learn more about the packages, see 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 hasn't added a postal code, a Popover is displayed, and the button label adjusts depending on whether a default postal code is present.
If a postal code is set, the button shows the location and suppresses the Popover.
When a shopper sets their location, the RegionModal component is triggered.

${"base64":" ","img":{"width":1440,"height":212,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":29233,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/region-button___ccb03f5e9e36d837a4b03aae6a0a58ff.png"}}$

If you have customized the NavBar, you can still use the native RegionButton by integrating it into your custom NavBar component. 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 mandatory location entry if specified in the discovery.config.js file, meaning the modal cannot be closed without providing a location. It checks for valid postal codes and verifies product availability for the given location.

${"base64":" ","img":{"width":1440,"height":752,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":269961,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/region-modal___6352f280eeb8eb77ee4674a5caf4f328.png"}}$

This component leverages the following:

UI Components: RegionModal
Hooks: useRegion

RegionBar

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

Its behavior is context-dependent:

If a shopper hasn't added a postal code, a Popover is displayed, and the button label adjusts depending on whether a default postal code is present.
If a postal code is set, the button shows the location and suppresses the Popover.
When a shopper sets their location, the RegionModal component is triggered.

${"base64":" ","img":{"width":662,"height":261,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":38484,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/regionbar80___52615261c9d206fd8e305d92751c00b5.png"}}$

Even if you have customized the NavBar, you can still use the native RegionBar component to enable 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. It is compatible with mobile and desktop browsers.

It includes three interaction types: setting a new location (when no postal code is set); changing an existing location (when a postal code is set); and selecting a pickup point (for filtering) to refine delivery options.

No postal code set: The user clicks the Set location button, and the RegionSlider appears, allowing the user 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, and the RegionSlider appears, allowing the user 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":" ","img":{"width":1266,"height":790,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":418580,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/change-pickup-point___458c47c2a06d40385e47058bcbfeaac2.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 integrates with all search and PLP filters.

${"base64":" ","img":{"width":389,"height":737,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":40881,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/filter-desktop___b7c358c72f742ab91467621e4d19839a.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 integrates with all search and PLP filters.

${"base64":" ","img":{"width":478,"height":942,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":64551,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/filter-slider___f885f64836ae3bf247ab7b849575230d.png"}}$