feat: Delivery Promise 2.1 - tags by Delivery Option and Dynamic Estimate #2960
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
lariciamota
force-pushed
the
feat/delivery-promise-tags
branch
from
38bbb91 to
18d6fb2
Compare
lariciamota
changed the base branch from
main
to
feat/delivery-promise-dynamic-estimate
lariciamota
force-pushed
the
feat/delivery-promise-dynamic-estimate
branch
from
12abaa2 to
e041e22
Compare
Base automatically changed from
feat/delivery-promise-dynamic-estimate
to
feat/delivery-promise-2.1
August 11, 2025 18:40
hellofanny
force-pushed
the
feat/delivery-promise-2.1
branch
from
0ca62e4 to
7bf250e
Compare
lariciamota
force-pushed
the
feat/delivery-promise-2.1
branch
2 times, most recently
from
3b1d897 to
4575d7a
Compare
lariciamota
changed the base branch from
main
to
feat/delivery-promise-2.1-dynamic-estimate
lariciamota
force-pushed
the
feat/delivery-promise-2.1-dynamic-estimate
branch
from
6bf8083 to
edcd87e
Compare
lariciamota
force-pushed
the
feat/delivery-promise-tags
branch
from
2408afa to
347be37
Compare
lariciamota
force-pushed
the
feat/delivery-promise-2.1-dynamic-estimate
branch
2 times, most recently
from
9ea61ce to
6dfa85a
Compare
This PR implements the Editing the store in the PLP delivery filter flow. The main changes added were: - Adds `changePickupPoint` type to `regionSliderType` - List pickup points given a valid zipcode - Updates shipping filter with selected pickup point reminder: After merging, run `cms sync` to update new section fields. (Few new fields were added: `changePickupPoint`, `changePickupPointApplyButtonLabel`, `noStoresAvailableInLocation` and `errorMessageHelper`) 1. Buyer can edit the pickup store by clicking in the pickup filter in PLP. The SliderOver should appear. |Desktop|Mobile| |-|-| |<img width="936" alt="image" src="https://github.com/user-attachments/assets/981b704b-ffe5-4ab9-9426-ef5b9b6d8703" />|<img width="423" alt="image" src="https://github.com/user-attachments/assets/602cc21b-97ab-4dc5-8a63-4ece2325b16a" />| 2. If the pickup filter is selected, the slider already opens with the field focused and the current location filled in. |Desktop|Mobile| |-|-| <img width="936" alt="image" src="https://github.com/user-attachments/assets/e5052ab9-88a2-4469-a71b-cabc696f341b" />|<img width="423" alt="image" src="https://github.com/user-attachments/assets/7fba073e-634a-4189-bb13-45d04cebd597" />| 3. If the buyer doesn't change the postal code and selects another store, `Update` button should be available. - postal code stays the same and pickup point store should be updated in the PLP filters |Desktop|Mobile| |-|-| |<img width="941" alt="image" src="https://github.com/user-attachments/assets/2e1fa6e8-1e85-4c15-b0db-12ee880e5ec1" />|<img width="425" alt="image" src="https://github.com/user-attachments/assets/8ae9945b-29dd-42e3-89ae-5cc8b22d688e" />| 4. If the buyer changes the postal code and selects a new store. - after updating the pickup point is updated in the PLP filter 5. If buyer changes the postal code that returns invalid or unavailable items for the location, `Update` button should be disabled and a message should be displayed. |Desktop|Mobile| |-|-| |<img width="936" alt="image" src="https://github.com/user-attachments/assets/c8342e1e-b6b9-4833-9b32-67ef123a4129" />|<img width="391" alt="image" src="https://github.com/user-attachments/assets/c14b19ca-ac02-4af0-bfdb-aa5b9bde368e" />| _this error message layout could be slightly different - discussing with design team_ 6. If buyer changes the postal code and no pickup stores available for the location, `Update` button should be disabled and a message should be displayed. |Desktop|Mobile| |-|-| |<img width="938" alt="image" src="https://github.com/user-attachments/assets/ccdec434-6b47-4681-ad79-472ea9f71f88" />|<img width="398" alt="image" src="https://github.com/user-attachments/assets/0b2fa62a-b3cd-469b-994e-739d8c17943d" /> - You can run locally and point the account to `vendemo` or try on this preview [link](https://vendemo-cm9sir9v900u7z6llkl62l70j-kiasokde8.b.vtex.app). - Reproduce the scenarios listed above in desktop and mobile. - [preview link](https://vendemo-cm9sir9v900u7z6llkl62l70j-kiasokde8.b.vtex.app) --------- Co-authored-by: Lucas Feijó <[email protected]> Co-authored-by: Larícia Mota <[email protected]>
Delivery Options will be added in feature branch 2.1 and the global
settings need a restructuring to support it and keep organized.
- Separate settings between `Regionalization` and `Delivery Promise`
- In `Delivery Promise` there are configs strict to DP
- In `Regionalization` there are configs that affects not only stores
with DP enabled.
- Rename `deliverySettings` to `deliveryMethods`
- Those configs were only related to Delivery Methods, but since we'll
introduce Delivery Options and Dynamic Estimate on feature branch 2.1 we
should change it.
- Move `regionSlider` from `deliverySettings` (which was renamed to
`deliveryMethods`) to inside of `deliveryPromise`
- Rename the `deliveryMethods` that was inside of `deliverySettings`
- Since `deliverySettings` was renamed to `deliveryMethods`, it doesn't
make sense to have another `deliveryMethods` inside. I've only moved
those configs to the new `deliveryMethods`.
Check that messages are coming correctly from hCMS Global Sections. If
testing RegionModal or RegionPopover, keep in mind that we merge the
deprecated configs from those sections to the ones in Global Sections
and the ones from the section takes precedence.
| Desktop | Mobile |
| ---- | ---- |
| <img width="355" alt="Screenshot 2025-07-09 at 21 30 25"
src="https://github.com/user-attachments/assets/80ac0988-1768-42ab-85f7-d663aa1587aa"
/> | <img width="312" alt="Screenshot 2025-07-09 at 21 30 45"
src="https://github.com/user-attachments/assets/7f254d50-1ed0-41c4-a8f9-b99ccb0b1f21"
/> |
| <img width="1497" alt="Screenshot 2025-07-09 at 21 35 51"
src="https://github.com/user-attachments/assets/c763c2e5-7390-4756-ab70-5113d28843d4"
/> | <img width="316" alt="Screenshot 2025-07-09 at 21 30 54"
src="https://github.com/user-attachments/assets/6095a501-5fb1-4fb8-ade2-4c30a4a54b76"
/> |
| <img width="334" alt="Screenshot 2025-07-09 at 21 31 23"
src="https://github.com/user-attachments/assets/ff8947fd-aa55-45cc-ac66-fc78555f79a9"
/> | <img width="316" alt="Screenshot 2025-07-09 at 21 31 35"
src="https://github.com/user-attachments/assets/216a0996-28dc-4c7f-8a7e-89e62855842f"
/> |
| <img width="509" alt="Screenshot 2025-07-09 at 21 30 17"
src="https://github.com/user-attachments/assets/4f1fe847-bc73-4bbc-bf67-75c86a2981c1"
/> | <img width="312" alt="Screenshot 2025-07-09 at 21 35 16"
src="https://github.com/user-attachments/assets/4720ce68-78b4-4188-8323-e4ec7e5a10b2"
/> |
| <img width="719" alt="Screenshot 2025-07-09 at 21 29 59"
src="https://github.com/user-attachments/assets/172faab7-1ba4-4cb8-a466-1b83a16cb1a0"
/> | <img width="311" alt="Screenshot 2025-07-09 at 21 35 36"
src="https://github.com/user-attachments/assets/9f32ff45-04d8-47bd-be7b-168117706026"
/> |
[PR](dp-faststore-org/vendemo-dp#48)
Preview: https://vendemo-cm9sir9v900u7z6llkl62l70j-j25zty24c.b.vtex.app/
- [Jira task](https://vtex-dev.atlassian.net/browse/SFS-2639)
- [Slack
thread](https://my.slack.com/archives/C08SZUBMFDK/p1752080463304509)
When Delivery Promise enabled: - Adds Shipping Filters component in PLP - List Shipping options available to filter - Enable add custom labels for shipping option via hCMS - Adds `Set Location` button when no zip code provided note: Button actions and facets filters is not fully integrated yet. - List Shipping options available to filter (according to the zipcode provided) |Desktop| Mobile| |-|-| |<img width="559" alt="image" src="https://github.com/user-attachments/assets/580c5e0c-9bb2-485a-8746-514f938cf54d" />|<img width="300" alt="image" src="https://github.com/user-attachments/assets/b4f23fa4-99ab-474e-9484-ab13cd7ff516" />| |Desktop| Mobile| |-|-| |<img width="691" alt="image" src="https://github.com/user-attachments/assets/c1b6a448-5e2e-46e4-9969-742e6a35649b" />|<img width="200" alt="image" src="https://github.com/user-attachments/assets/2ffe9385-da5f-4417-8d9b-7d1e207ebd1e" />| - Show `Set Location` Button when no zipcode is provided |Desktop| Mobile| |-|-| |<img width="518" alt="image" src="https://github.com/user-attachments/assets/d66d972b-fa25-4e0e-b07a-51300f5ff787" />|<img width="392" alt="image" src="https://github.com/user-attachments/assets/2e4bfe9b-412f-4f1f-b3f4-04055834424a" />| - CMS <img width="500" alt="image" src="https://github.com/user-attachments/assets/bb83b8b1-95f0-4bea-b49b-7f750a57b052" /> if you test using an account that delivery promise is not enabled, nothing should be changed. Run locally pointing to `vendemo` account, ou try this preview. 1. if deliveryPromise.enabled is `false` in `discovery.config, no changes are expected. Enable deliveryPromise in `discovery.config`, and test the scenarios below: 1. Navigate to a PLP, you should be able to see a `Delivery` section in the Filters component. (Also try in the mobile resolution) 2. If no zipCode provided, you should be able to see `Set Location` button 3. If zipCode provided, you should be able to see the list of available shipping options for that zipCode vtex-sites/faststoreqa.store#799 --------- Co-authored-by: Lucas Feijó <[email protected]> Co-authored-by: Larícia Mota <[email protected]>
Delivery Options will be added in feature branch 2.1 and the global
settings need a restructuring to support it and keep organized.
- Separate settings between `Regionalization` and `Delivery Promise`
- In `Delivery Promise` there are configs strict to DP
- In `Regionalization` there are configs that affects not only stores
with DP enabled.
- Rename `deliverySettings` to `deliveryMethods`
- Those configs were only related to Delivery Methods, but since we'll
introduce Delivery Options and Dynamic Estimate on feature branch 2.1 we
should change it.
- Move `regionSlider` from `deliverySettings` (which was renamed to
`deliveryMethods`) to inside of `deliveryPromise`
- Rename the `deliveryMethods` that was inside of `deliverySettings`
- Since `deliverySettings` was renamed to `deliveryMethods`, it doesn't
make sense to have another `deliveryMethods` inside. I've only moved
those configs to the new `deliveryMethods`.
Check that messages are coming correctly from hCMS Global Sections. If
testing RegionModal or RegionPopover, keep in mind that we merge the
deprecated configs from those sections to the ones in Global Sections
and the ones from the section takes precedence.
| Desktop | Mobile |
| ---- | ---- |
| <img width="355" alt="Screenshot 2025-07-09 at 21 30 25"
src="https://github.com/user-attachments/assets/80ac0988-1768-42ab-85f7-d663aa1587aa"
/> | <img width="312" alt="Screenshot 2025-07-09 at 21 30 45"
src="https://github.com/user-attachments/assets/7f254d50-1ed0-41c4-a8f9-b99ccb0b1f21"
/> |
| <img width="1497" alt="Screenshot 2025-07-09 at 21 35 51"
src="https://github.com/user-attachments/assets/c763c2e5-7390-4756-ab70-5113d28843d4"
/> | <img width="316" alt="Screenshot 2025-07-09 at 21 30 54"
src="https://github.com/user-attachments/assets/6095a501-5fb1-4fb8-ade2-4c30a4a54b76"
/> |
| <img width="334" alt="Screenshot 2025-07-09 at 21 31 23"
src="https://github.com/user-attachments/assets/ff8947fd-aa55-45cc-ac66-fc78555f79a9"
/> | <img width="316" alt="Screenshot 2025-07-09 at 21 31 35"
src="https://github.com/user-attachments/assets/216a0996-28dc-4c7f-8a7e-89e62855842f"
/> |
| <img width="509" alt="Screenshot 2025-07-09 at 21 30 17"
src="https://github.com/user-attachments/assets/4f1fe847-bc73-4bbc-bf67-75c86a2981c1"
/> | <img width="312" alt="Screenshot 2025-07-09 at 21 35 16"
src="https://github.com/user-attachments/assets/4720ce68-78b4-4188-8323-e4ec7e5a10b2"
/> |
| <img width="719" alt="Screenshot 2025-07-09 at 21 29 59"
src="https://github.com/user-attachments/assets/172faab7-1ba4-4cb8-a466-1b83a16cb1a0"
/> | <img width="311" alt="Screenshot 2025-07-09 at 21 35 36"
src="https://github.com/user-attachments/assets/9f32ff45-04d8-47bd-be7b-168117706026"
/> |
[PR](dp-faststore-org/vendemo-dp#48)
Preview: https://vendemo-cm9sir9v900u7z6llkl62l70j-j25zty24c.b.vtex.app/
- [Jira task](https://vtex-dev.atlassian.net/browse/SFS-2639)
- [Slack
thread](https://my.slack.com/archives/C08SZUBMFDK/p1752080463304509)
When Delivery Promise enabled: - Adds Shipping Filters component in PLP - List Shipping options available to filter - Enable add custom labels for shipping option via hCMS - Adds `Set Location` button when no zip code provided note: Button actions and facets filters is not fully integrated yet. - List Shipping options available to filter (according to the zipcode provided) |Desktop| Mobile| |-|-| |<img width="559" alt="image" src="https://github.com/user-attachments/assets/580c5e0c-9bb2-485a-8746-514f938cf54d" />|<img width="300" alt="image" src="https://github.com/user-attachments/assets/b4f23fa4-99ab-474e-9484-ab13cd7ff516" />| |Desktop| Mobile| |-|-| |<img width="691" alt="image" src="https://github.com/user-attachments/assets/c1b6a448-5e2e-46e4-9969-742e6a35649b" />|<img width="200" alt="image" src="https://github.com/user-attachments/assets/2ffe9385-da5f-4417-8d9b-7d1e207ebd1e" />| - Show `Set Location` Button when no zipcode is provided |Desktop| Mobile| |-|-| |<img width="518" alt="image" src="https://github.com/user-attachments/assets/d66d972b-fa25-4e0e-b07a-51300f5ff787" />|<img width="392" alt="image" src="https://github.com/user-attachments/assets/2e4bfe9b-412f-4f1f-b3f4-04055834424a" />| - CMS <img width="500" alt="image" src="https://github.com/user-attachments/assets/bb83b8b1-95f0-4bea-b49b-7f750a57b052" /> if you test using an account that delivery promise is not enabled, nothing should be changed. Run locally pointing to `vendemo` account, ou try this preview. 1. if deliveryPromise.enabled is `false` in `discovery.config, no changes are expected. Enable deliveryPromise in `discovery.config`, and test the scenarios below: 1. Navigate to a PLP, you should be able to see a `Delivery` section in the Filters component. (Also try in the mobile resolution) 2. If no zipCode provided, you should be able to see `Set Location` button 3. If zipCode provided, you should be able to see the list of available shipping options for that zipCode vtex-sites/faststoreqa.store#799 --------- Co-authored-by: Lucas Feijó <[email protected]> Co-authored-by: Larícia Mota <[email protected]>
It creates a new tab inside the Global Sections CMS. In the new Settings tab, it will be possible to configure settings related to regionalization, which will be used by components such as the Region Modal and Region Popover. This PR doesn't update all components/sections, it'll be done after. In this PR, there is an update to `FilterDesktop` so we can validate the change. The merchant will be able to configure their regionalization-related message in a single place (Global Sections Settings tab) instead of duplicate messages through sections. To avoid introducing breaking changes, I haven't removed the messages from the sections yet - this will be done in v4. I've added a deprecation notice in every field that was created in the Settings tab. In v3, the components/sections will use the messages defined in the sections CMS; if they're blank, they will use the messages in the Global Sections Settings tab. <img width="1227" alt="Screenshot 2025-05-15 at 10 30 42" src="https://github.com/user-attachments/assets/e1b9b32f-7270-43a7-8016-abb536c08272" /> In the CMS of the vendemo store, I've added messages in the Global Sections Settings tab using a `[GS]` at the beginning of every message so we can identify the ones that are coming from this tab. - PLP I've only removed (left blank) the messages in `Product List Page > Product Gallery > Filter > Delivery Settings > **Delivery Section description**` and `Product List Page > Product Gallery > Filter > Delivery Settings > Delivery Custom labels > **Shipping label**`, those are the ones that should use the GS one. - Search page The messages from `Search Page > Product Gallery > Filter > Delivery Settings` were all left blank (we hadn't updated this page to add the messages -- so this page didn't have messages defined for those cases, and we hadn't noticed 😣). | PLP | Search Page | | ---- | ---- | | <img width="649" alt="Screenshot 2025-05-15 at 09 59 40" src="https://github.com/user-attachments/assets/199d8e0d-a638-4b3e-ade2-95bbeaaf3a86" /> | <img width="772" alt="Screenshot 2025-05-15 at 10 09 08" src="https://github.com/user-attachments/assets/8edc352e-bf44-46bd-92a2-f9232b407d77" /> | | <img width="1496" alt="Screenshot 2025-05-15 at 10 15 40" src="https://github.com/user-attachments/assets/17284640-fb0e-45d0-b44b-8c7db98fc7be" /> | <img width="1499" alt="Screenshot 2025-05-15 at 10 16 30" src="https://github.com/user-attachments/assets/97801ddd-3b87-4c1f-a166-f8ef7b8d6fcd" /> | | <img width="1495" alt="Screenshot 2025-05-15 at 10 17 37" src="https://github.com/user-attachments/assets/1eb5023c-b724-41f3-8b4f-8cc57f7c4b4c" /> | <img width="1495" alt="Screenshot 2025-05-15 at 10 18 05" src="https://github.com/user-attachments/assets/4457b88e-31a7-4aa2-83ed-8038290a1e2c" /> | - Vendemo [[PR](dp-faststore-org/vendemo-dp#17) / [preview](https://vendemo-cm9sir9v900u7z6llkl62l70j-7sfv6u49l.b.vtex.app/)] - [Slack discussion thread](https://vtex.slack.com/archives/C03L3CRCDC4/p1747248599365189)
Create the Region Slider component to be used for setting and changing the location (postal code). It's triggered when the shopper clicks on the "Set location" button in the PLP filters and when they click on the postal code link in the PLP filters. The first one is the set location type of this Region Slider, and the second is the change location type. I've added a new state in the UIProvider and functions to handle its change for the Region Slider. In the preview, test both the set and change location scenarios: When no postal code is defined yet, the "Set location" button is displayed in the PLP filters. When the shopper clicks this button, a slideover is displayed to set the postal code. | Desktop | Mobile | | ---- | ---- | | <img width="1505" alt="Screenshot 2025-05-19 at 13 42 54" src="https://github.com/user-attachments/assets/06abcd1e-f963-4746-ad45-6003c675f49a" /> | <img width="218" alt="Screenshot 2025-05-19 at 13 47 14" src="https://github.com/user-attachments/assets/75db72a0-7f3b-45a1-ba6d-4c27617c5e55" /> | | <img width="1507" alt="Screenshot 2025-05-19 at 13 44 04" src="https://github.com/user-attachments/assets/3cf4a05d-a58b-47dc-bf19-bac99a53be55" /> | <img width="216" alt="Screenshot 2025-05-19 at 13 47 50" src="https://github.com/user-attachments/assets/bd87d1ed-9fdd-40f7-b009-e6480d10c89d" /> | When a postal code was previously set, this postal code is displayed as a link in the PLP filters. When the shopper clicks this link, a slideover is displayed to change the postal code. | Desktop | Mobile | | ---- | ---- | | <img width="1503" alt="Screenshot 2025-05-19 at 13 44 24" src="https://github.com/user-attachments/assets/f2f5cbe7-5c11-47b1-9769-f1223a1a3339" /> | <img width="216" alt="Screenshot 2025-05-19 at 13 48 14" src="https://github.com/user-attachments/assets/9b1b513f-e3be-4f81-8328-7728dec1e876" /> | | <img width="1506" alt="Screenshot 2025-05-19 at 13 44 45" src="https://github.com/user-attachments/assets/06a8e8dc-d7b7-41d0-80f8-2462abd52058" /> | <img width="218" alt="Screenshot 2025-05-19 at 13 48 29" src="https://github.com/user-attachments/assets/62f1fc05-f24e-4fbb-83de-4c90d2342d63" /> | [Preview](https://vendemo-cm9sir9v900u7z6llkl62l70j-k5r6r35q4.b.vtex.app/) [PR](dp-faststore-org/vendemo-dp#19) - [Jira task](https://vtex-dev.atlassian.net/browse/SFS-2449) --------- Co-authored-by: Fanny Chien <[email protected]> Co-authored-by: Otavio Moreira Meirelles <[email protected]> Co-authored-by: Fanny Chien <[email protected]>
This PR implements the Editing the store in the PLP delivery filter flow. The main changes added were: - Adds `changePickupPoint` type to `regionSliderType` - List pickup points given a valid zipcode - Updates shipping filter with selected pickup point reminder: After merging, run `cms sync` to update new section fields. (Few new fields were added: `changePickupPoint`, `changePickupPointApplyButtonLabel`, `noStoresAvailableInLocation` and `errorMessageHelper`) 1. Buyer can edit the pickup store by clicking in the pickup filter in PLP. The SliderOver should appear. |Desktop|Mobile| |-|-| |<img width="936" alt="image" src="https://github.com/user-attachments/assets/981b704b-ffe5-4ab9-9426-ef5b9b6d8703" />|<img width="423" alt="image" src="https://github.com/user-attachments/assets/602cc21b-97ab-4dc5-8a63-4ece2325b16a" />| 2. If the pickup filter is selected, the slider already opens with the field focused and the current location filled in. |Desktop|Mobile| |-|-| <img width="936" alt="image" src="https://github.com/user-attachments/assets/e5052ab9-88a2-4469-a71b-cabc696f341b" />|<img width="423" alt="image" src="https://github.com/user-attachments/assets/7fba073e-634a-4189-bb13-45d04cebd597" />| 3. If the buyer doesn't change the postal code and selects another store, `Update` button should be available. - postal code stays the same and pickup point store should be updated in the PLP filters |Desktop|Mobile| |-|-| |<img width="941" alt="image" src="https://github.com/user-attachments/assets/2e1fa6e8-1e85-4c15-b0db-12ee880e5ec1" />|<img width="425" alt="image" src="https://github.com/user-attachments/assets/8ae9945b-29dd-42e3-89ae-5cc8b22d688e" />| 4. If the buyer changes the postal code and selects a new store. - after updating the pickup point is updated in the PLP filter 5. If buyer changes the postal code that returns invalid or unavailable items for the location, `Update` button should be disabled and a message should be displayed. |Desktop|Mobile| |-|-| |<img width="936" alt="image" src="https://github.com/user-attachments/assets/c8342e1e-b6b9-4833-9b32-67ef123a4129" />|<img width="391" alt="image" src="https://github.com/user-attachments/assets/c14b19ca-ac02-4af0-bfdb-aa5b9bde368e" />| _this error message layout could be slightly different - discussing with design team_ 6. If buyer changes the postal code and no pickup stores available for the location, `Update` button should be disabled and a message should be displayed. |Desktop|Mobile| |-|-| |<img width="938" alt="image" src="https://github.com/user-attachments/assets/ccdec434-6b47-4681-ad79-472ea9f71f88" />|<img width="398" alt="image" src="https://github.com/user-attachments/assets/0b2fa62a-b3cd-469b-994e-739d8c17943d" /> - You can run locally and point the account to `vendemo` or try on this preview [link](https://vendemo-cm9sir9v900u7z6llkl62l70j-kiasokde8.b.vtex.app). - Reproduce the scenarios listed above in desktop and mobile. - [preview link](https://vendemo-cm9sir9v900u7z6llkl62l70j-kiasokde8.b.vtex.app) --------- Co-authored-by: Lucas Feijó <[email protected]> Co-authored-by: Larícia Mota <[email protected]>
Delivery Options will be added in feature branch 2.1 and the global
settings need a restructuring to support it and keep organized.
- Separate settings between `Regionalization` and `Delivery Promise`
- In `Delivery Promise` there are configs strict to DP
- In `Regionalization` there are configs that affects not only stores
with DP enabled.
- Rename `deliverySettings` to `deliveryMethods`
- Those configs were only related to Delivery Methods, but since we'll
introduce Delivery Options and Dynamic Estimate on feature branch 2.1 we
should change it.
- Move `regionSlider` from `deliverySettings` (which was renamed to
`deliveryMethods`) to inside of `deliveryPromise`
- Rename the `deliveryMethods` that was inside of `deliverySettings`
- Since `deliverySettings` was renamed to `deliveryMethods`, it doesn't
make sense to have another `deliveryMethods` inside. I've only moved
those configs to the new `deliveryMethods`.
Check that messages are coming correctly from hCMS Global Sections. If
testing RegionModal or RegionPopover, keep in mind that we merge the
deprecated configs from those sections to the ones in Global Sections
and the ones from the section takes precedence.
| Desktop | Mobile |
| ---- | ---- |
| <img width="355" alt="Screenshot 2025-07-09 at 21 30 25"
src="https://github.com/user-attachments/assets/80ac0988-1768-42ab-85f7-d663aa1587aa"
/> | <img width="312" alt="Screenshot 2025-07-09 at 21 30 45"
src="https://github.com/user-attachments/assets/7f254d50-1ed0-41c4-a8f9-b99ccb0b1f21"
/> |
| <img width="1497" alt="Screenshot 2025-07-09 at 21 35 51"
src="https://github.com/user-attachments/assets/c763c2e5-7390-4756-ab70-5113d28843d4"
/> | <img width="316" alt="Screenshot 2025-07-09 at 21 30 54"
src="https://github.com/user-attachments/assets/6095a501-5fb1-4fb8-ade2-4c30a4a54b76"
/> |
| <img width="334" alt="Screenshot 2025-07-09 at 21 31 23"
src="https://github.com/user-attachments/assets/ff8947fd-aa55-45cc-ac66-fc78555f79a9"
/> | <img width="316" alt="Screenshot 2025-07-09 at 21 31 35"
src="https://github.com/user-attachments/assets/216a0996-28dc-4c7f-8a7e-89e62855842f"
/> |
| <img width="509" alt="Screenshot 2025-07-09 at 21 30 17"
src="https://github.com/user-attachments/assets/4f1fe847-bc73-4bbc-bf67-75c86a2981c1"
/> | <img width="312" alt="Screenshot 2025-07-09 at 21 35 16"
src="https://github.com/user-attachments/assets/4720ce68-78b4-4188-8323-e4ec7e5a10b2"
/> |
| <img width="719" alt="Screenshot 2025-07-09 at 21 29 59"
src="https://github.com/user-attachments/assets/172faab7-1ba4-4cb8-a466-1b83a16cb1a0"
/> | <img width="311" alt="Screenshot 2025-07-09 at 21 35 36"
src="https://github.com/user-attachments/assets/9f32ff45-04d8-47bd-be7b-168117706026"
/> |
[PR](dp-faststore-org/vendemo-dp#48)
Preview: https://vendemo-cm9sir9v900u7z6llkl62l70j-j25zty24c.b.vtex.app/
- [Jira task](https://vtex-dev.atlassian.net/browse/SFS-2639)
- [Slack
thread](https://my.slack.com/archives/C08SZUBMFDK/p1752080463304509)
Revision order: 1) #2889 2) #2890 These changes will introduce global filtering by pickup point for the selected zip code. We are changing the `RegionSlider` opening: the component it's a global section now, so it should be able to be rendered everywhere in the store, still using the `UI Provider` actions but no longer need to import it. Furthermore, we made adjustments to the the `RegionBar` component, adding new data-atributes and matching new design prototype, but we keep backward compatibility by leaving the current props and data-attributes unaltered. Although, the core of this implementation it's to support global filtering (including shelves' queries) by available pickup points, and for that we created the Delivery Promise's reducer and provider to handle this global context through shopper navigation, leveraging from the `useDeliveryPromise` hook towards managing all state and actions. First, you can use the Starter preview below, but for local development you'll need to use the `vendemo` account we already set up for Delivery Promise: on `discovery.config` you should change the following attributes: - `api: { storeId: 'vendemo', ... }`; - `session: { currency: { code: 'BRL', symbol: 'R$' }, locale: 'pt-BR', country: 'BRA', ... }`; - `deliveryPromise: { enabled: true, mandatory: false }`; After that, specify one of the following zip codes (using the `RegionButton` on the navbar) to test Delivery Promise features: `50030-260`, `20070-001` or `04538-132`. Then, try to set a global pickup point and see if the store name is added on the navbar, navigate to PLP and you should see the `Delivery` facet section, you can filter by other methods. Everything should keep working as before. Also, try the mobile version. vtex-sites/faststoreqa.store#834 --------- Co-authored-by: Larícia Mota <[email protected]> Co-authored-by: Fanny Chien <[email protected]>
When Delivery Promise enabled: - Adds Shipping Filters component in PLP - List Shipping options available to filter - Enable add custom labels for shipping option via hCMS - Adds `Set Location` button when no zip code provided note: Button actions and facets filters is not fully integrated yet. - List Shipping options available to filter (according to the zipcode provided) |Desktop| Mobile| |-|-| |<img width="559" alt="image" src="https://github.com/user-attachments/assets/580c5e0c-9bb2-485a-8746-514f938cf54d" />|<img width="300" alt="image" src="https://github.com/user-attachments/assets/b4f23fa4-99ab-474e-9484-ab13cd7ff516" />| |Desktop| Mobile| |-|-| |<img width="691" alt="image" src="https://github.com/user-attachments/assets/c1b6a448-5e2e-46e4-9969-742e6a35649b" />|<img width="200" alt="image" src="https://github.com/user-attachments/assets/2ffe9385-da5f-4417-8d9b-7d1e207ebd1e" />| - Show `Set Location` Button when no zipcode is provided |Desktop| Mobile| |-|-| |<img width="518" alt="image" src="https://github.com/user-attachments/assets/d66d972b-fa25-4e0e-b07a-51300f5ff787" />|<img width="392" alt="image" src="https://github.com/user-attachments/assets/2e4bfe9b-412f-4f1f-b3f4-04055834424a" />| - CMS <img width="500" alt="image" src="https://github.com/user-attachments/assets/bb83b8b1-95f0-4bea-b49b-7f750a57b052" /> if you test using an account that delivery promise is not enabled, nothing should be changed. Run locally pointing to `vendemo` account, ou try this preview. 1. if deliveryPromise.enabled is `false` in `discovery.config, no changes are expected. Enable deliveryPromise in `discovery.config`, and test the scenarios below: 1. Navigate to a PLP, you should be able to see a `Delivery` section in the Filters component. (Also try in the mobile resolution) 2. If no zipCode provided, you should be able to see `Set Location` button 3. If zipCode provided, you should be able to see the list of available shipping options for that zipCode vtex-sites/faststoreqa.store#799 --------- Co-authored-by: Lucas Feijó <[email protected]> Co-authored-by: Larícia Mota <[email protected]>
It creates a new tab inside the Global Sections CMS. In the new Settings tab, it will be possible to configure settings related to regionalization, which will be used by components such as the Region Modal and Region Popover. This PR doesn't update all components/sections, it'll be done after. In this PR, there is an update to `FilterDesktop` so we can validate the change. The merchant will be able to configure their regionalization-related message in a single place (Global Sections Settings tab) instead of duplicate messages through sections. To avoid introducing breaking changes, I haven't removed the messages from the sections yet - this will be done in v4. I've added a deprecation notice in every field that was created in the Settings tab. In v3, the components/sections will use the messages defined in the sections CMS; if they're blank, they will use the messages in the Global Sections Settings tab. <img width="1227" alt="Screenshot 2025-05-15 at 10 30 42" src="https://github.com/user-attachments/assets/e1b9b32f-7270-43a7-8016-abb536c08272" /> In the CMS of the vendemo store, I've added messages in the Global Sections Settings tab using a `[GS]` at the beginning of every message so we can identify the ones that are coming from this tab. - PLP I've only removed (left blank) the messages in `Product List Page > Product Gallery > Filter > Delivery Settings > **Delivery Section description**` and `Product List Page > Product Gallery > Filter > Delivery Settings > Delivery Custom labels > **Shipping label**`, those are the ones that should use the GS one. - Search page The messages from `Search Page > Product Gallery > Filter > Delivery Settings` were all left blank (we hadn't updated this page to add the messages -- so this page didn't have messages defined for those cases, and we hadn't noticed 😣). | PLP | Search Page | | ---- | ---- | | <img width="649" alt="Screenshot 2025-05-15 at 09 59 40" src="https://github.com/user-attachments/assets/199d8e0d-a638-4b3e-ade2-95bbeaaf3a86" /> | <img width="772" alt="Screenshot 2025-05-15 at 10 09 08" src="https://github.com/user-attachments/assets/8edc352e-bf44-46bd-92a2-f9232b407d77" /> | | <img width="1496" alt="Screenshot 2025-05-15 at 10 15 40" src="https://github.com/user-attachments/assets/17284640-fb0e-45d0-b44b-8c7db98fc7be" /> | <img width="1499" alt="Screenshot 2025-05-15 at 10 16 30" src="https://github.com/user-attachments/assets/97801ddd-3b87-4c1f-a166-f8ef7b8d6fcd" /> | | <img width="1495" alt="Screenshot 2025-05-15 at 10 17 37" src="https://github.com/user-attachments/assets/1eb5023c-b724-41f3-8b4f-8cc57f7c4b4c" /> | <img width="1495" alt="Screenshot 2025-05-15 at 10 18 05" src="https://github.com/user-attachments/assets/4457b88e-31a7-4aa2-83ed-8038290a1e2c" /> | - Vendemo [[PR](dp-faststore-org/vendemo-dp#17) / [preview](https://vendemo-cm9sir9v900u7z6llkl62l70j-7sfv6u49l.b.vtex.app/)] - [Slack discussion thread](https://vtex.slack.com/archives/C03L3CRCDC4/p1747248599365189)
This PR contains the shipping methods integration with API. We already have some of the shipping facets being rendered, but no action was being made. After these changes, the filters should work depending on the selected scenario. The `usePickupPoints` hook is responsible to get the list of pickup points available for the specific location in session. Based on that list, we create the `pickup-in-point` facet on the client-side (it's not delivered by the IS API) and inject on the facets list. When the `pickup-in-point` is selected, a additional facet called `pickupPoint` is also added on the facets list, then on the Search client (`@faststore/api`) we transform it on query string param and send it in the `product_search` IS request. | Desktop | Mobile | | - | - | |  |  | - Use the following postal code: `50030-260`; - Pay attention to the behavior of each different filter: each one must send the correct parameters/variables in the query (check the `Network` tab); - Observe the behavior and visibility of the filters on both desktop and mobile, the logic is similar but they have some different details that can impact navigation; vtex-sites/faststoreqa.store#812
This PR implements the Editing the store in the PLP delivery filter flow. The main changes added were: - Adds `changePickupPoint` type to `regionSliderType` - List pickup points given a valid zipcode - Updates shipping filter with selected pickup point reminder: After merging, run `cms sync` to update new section fields. (Few new fields were added: `changePickupPoint`, `changePickupPointApplyButtonLabel`, `noStoresAvailableInLocation` and `errorMessageHelper`) 1. Buyer can edit the pickup store by clicking in the pickup filter in PLP. The SliderOver should appear. |Desktop|Mobile| |-|-| |<img width="936" alt="image" src="https://github.com/user-attachments/assets/981b704b-ffe5-4ab9-9426-ef5b9b6d8703" />|<img width="423" alt="image" src="https://github.com/user-attachments/assets/602cc21b-97ab-4dc5-8a63-4ece2325b16a" />| 2. If the pickup filter is selected, the slider already opens with the field focused and the current location filled in. |Desktop|Mobile| |-|-| <img width="936" alt="image" src="https://github.com/user-attachments/assets/e5052ab9-88a2-4469-a71b-cabc696f341b" />|<img width="423" alt="image" src="https://github.com/user-attachments/assets/7fba073e-634a-4189-bb13-45d04cebd597" />| 3. If the buyer doesn't change the postal code and selects another store, `Update` button should be available. - postal code stays the same and pickup point store should be updated in the PLP filters |Desktop|Mobile| |-|-| |<img width="941" alt="image" src="https://github.com/user-attachments/assets/2e1fa6e8-1e85-4c15-b0db-12ee880e5ec1" />|<img width="425" alt="image" src="https://github.com/user-attachments/assets/8ae9945b-29dd-42e3-89ae-5cc8b22d688e" />| 4. If the buyer changes the postal code and selects a new store. - after updating the pickup point is updated in the PLP filter 5. If buyer changes the postal code that returns invalid or unavailable items for the location, `Update` button should be disabled and a message should be displayed. |Desktop|Mobile| |-|-| |<img width="936" alt="image" src="https://github.com/user-attachments/assets/c8342e1e-b6b9-4833-9b32-67ef123a4129" />|<img width="391" alt="image" src="https://github.com/user-attachments/assets/c14b19ca-ac02-4af0-bfdb-aa5b9bde368e" />| _this error message layout could be slightly different - discussing with design team_ 6. If buyer changes the postal code and no pickup stores available for the location, `Update` button should be disabled and a message should be displayed. |Desktop|Mobile| |-|-| |<img width="938" alt="image" src="https://github.com/user-attachments/assets/ccdec434-6b47-4681-ad79-472ea9f71f88" />|<img width="398" alt="image" src="https://github.com/user-attachments/assets/0b2fa62a-b3cd-469b-994e-739d8c17943d" /> - You can run locally and point the account to `vendemo` or try on this preview [link](https://vendemo-cm9sir9v900u7z6llkl62l70j-kiasokde8.b.vtex.app). - Reproduce the scenarios listed above in desktop and mobile. - [preview link](https://vendemo-cm9sir9v900u7z6llkl62l70j-kiasokde8.b.vtex.app) --------- Co-authored-by: Lucas Feijó <[email protected]> Co-authored-by: Larícia Mota <[email protected]>
Delivery Options will be added in feature branch 2.1 and the global
settings need a restructuring to support it and keep organized.
- Separate settings between `Regionalization` and `Delivery Promise`
- In `Delivery Promise` there are configs strict to DP
- In `Regionalization` there are configs that affects not only stores
with DP enabled.
- Rename `deliverySettings` to `deliveryMethods`
- Those configs were only related to Delivery Methods, but since we'll
introduce Delivery Options and Dynamic Estimate on feature branch 2.1 we
should change it.
- Move `regionSlider` from `deliverySettings` (which was renamed to
`deliveryMethods`) to inside of `deliveryPromise`
- Rename the `deliveryMethods` that was inside of `deliverySettings`
- Since `deliverySettings` was renamed to `deliveryMethods`, it doesn't
make sense to have another `deliveryMethods` inside. I've only moved
those configs to the new `deliveryMethods`.
Check that messages are coming correctly from hCMS Global Sections. If
testing RegionModal or RegionPopover, keep in mind that we merge the
deprecated configs from those sections to the ones in Global Sections
and the ones from the section takes precedence.
| Desktop | Mobile |
| ---- | ---- |
| <img width="355" alt="Screenshot 2025-07-09 at 21 30 25"
src="https://github.com/user-attachments/assets/80ac0988-1768-42ab-85f7-d663aa1587aa"
/> | <img width="312" alt="Screenshot 2025-07-09 at 21 30 45"
src="https://github.com/user-attachments/assets/7f254d50-1ed0-41c4-a8f9-b99ccb0b1f21"
/> |
| <img width="1497" alt="Screenshot 2025-07-09 at 21 35 51"
src="https://github.com/user-attachments/assets/c763c2e5-7390-4756-ab70-5113d28843d4"
/> | <img width="316" alt="Screenshot 2025-07-09 at 21 30 54"
src="https://github.com/user-attachments/assets/6095a501-5fb1-4fb8-ade2-4c30a4a54b76"
/> |
| <img width="334" alt="Screenshot 2025-07-09 at 21 31 23"
src="https://github.com/user-attachments/assets/ff8947fd-aa55-45cc-ac66-fc78555f79a9"
/> | <img width="316" alt="Screenshot 2025-07-09 at 21 31 35"
src="https://github.com/user-attachments/assets/216a0996-28dc-4c7f-8a7e-89e62855842f"
/> |
| <img width="509" alt="Screenshot 2025-07-09 at 21 30 17"
src="https://github.com/user-attachments/assets/4f1fe847-bc73-4bbc-bf67-75c86a2981c1"
/> | <img width="312" alt="Screenshot 2025-07-09 at 21 35 16"
src="https://github.com/user-attachments/assets/4720ce68-78b4-4188-8323-e4ec7e5a10b2"
/> |
| <img width="719" alt="Screenshot 2025-07-09 at 21 29 59"
src="https://github.com/user-attachments/assets/172faab7-1ba4-4cb8-a466-1b83a16cb1a0"
/> | <img width="311" alt="Screenshot 2025-07-09 at 21 35 36"
src="https://github.com/user-attachments/assets/9f32ff45-04d8-47bd-be7b-168117706026"
/> |
[PR](dp-faststore-org/vendemo-dp#48)
Preview: https://vendemo-cm9sir9v900u7z6llkl62l70j-j25zty24c.b.vtex.app/
- [Jira task](https://vtex-dev.atlassian.net/browse/SFS-2639)
- [Slack
thread](https://my.slack.com/archives/C08SZUBMFDK/p1752080463304509)
When Delivery Promise enabled: - Adds Shipping Filters component in PLP - List Shipping options available to filter - Enable add custom labels for shipping option via hCMS - Adds `Set Location` button when no zip code provided note: Button actions and facets filters is not fully integrated yet. - List Shipping options available to filter (according to the zipcode provided) |Desktop| Mobile| |-|-| |<img width="559" alt="image" src="https://github.com/user-attachments/assets/580c5e0c-9bb2-485a-8746-514f938cf54d" />|<img width="300" alt="image" src="https://github.com/user-attachments/assets/b4f23fa4-99ab-474e-9484-ab13cd7ff516" />| |Desktop| Mobile| |-|-| |<img width="691" alt="image" src="https://github.com/user-attachments/assets/c1b6a448-5e2e-46e4-9969-742e6a35649b" />|<img width="200" alt="image" src="https://github.com/user-attachments/assets/2ffe9385-da5f-4417-8d9b-7d1e207ebd1e" />| - Show `Set Location` Button when no zipcode is provided |Desktop| Mobile| |-|-| |<img width="518" alt="image" src="https://github.com/user-attachments/assets/d66d972b-fa25-4e0e-b07a-51300f5ff787" />|<img width="392" alt="image" src="https://github.com/user-attachments/assets/2e4bfe9b-412f-4f1f-b3f4-04055834424a" />| - CMS <img width="500" alt="image" src="https://github.com/user-attachments/assets/bb83b8b1-95f0-4bea-b49b-7f750a57b052" /> if you test using an account that delivery promise is not enabled, nothing should be changed. Run locally pointing to `vendemo` account, ou try this preview. 1. if deliveryPromise.enabled is `false` in `discovery.config, no changes are expected. Enable deliveryPromise in `discovery.config`, and test the scenarios below: 1. Navigate to a PLP, you should be able to see a `Delivery` section in the Filters component. (Also try in the mobile resolution) 2. If no zipCode provided, you should be able to see `Set Location` button 3. If zipCode provided, you should be able to see the list of available shipping options for that zipCode vtex-sites/faststoreqa.store#799 --------- Co-authored-by: Lucas Feijó <[email protected]> Co-authored-by: Larícia Mota <[email protected]>
Create the Region Slider component to be used for setting and changing the location (postal code). It's triggered when the shopper clicks on the "Set location" button in the PLP filters and when they click on the postal code link in the PLP filters. The first one is the set location type of this Region Slider, and the second is the change location type. I've added a new state in the UIProvider and functions to handle its change for the Region Slider. In the preview, test both the set and change location scenarios: When no postal code is defined yet, the "Set location" button is displayed in the PLP filters. When the shopper clicks this button, a slideover is displayed to set the postal code. | Desktop | Mobile | | ---- | ---- | | <img width="1505" alt="Screenshot 2025-05-19 at 13 42 54" src="https://github.com/user-attachments/assets/06abcd1e-f963-4746-ad45-6003c675f49a" /> | <img width="218" alt="Screenshot 2025-05-19 at 13 47 14" src="https://github.com/user-attachments/assets/75db72a0-7f3b-45a1-ba6d-4c27617c5e55" /> | | <img width="1507" alt="Screenshot 2025-05-19 at 13 44 04" src="https://github.com/user-attachments/assets/3cf4a05d-a58b-47dc-bf19-bac99a53be55" /> | <img width="216" alt="Screenshot 2025-05-19 at 13 47 50" src="https://github.com/user-attachments/assets/bd87d1ed-9fdd-40f7-b009-e6480d10c89d" /> | When a postal code was previously set, this postal code is displayed as a link in the PLP filters. When the shopper clicks this link, a slideover is displayed to change the postal code. | Desktop | Mobile | | ---- | ---- | | <img width="1503" alt="Screenshot 2025-05-19 at 13 44 24" src="https://github.com/user-attachments/assets/f2f5cbe7-5c11-47b1-9769-f1223a1a3339" /> | <img width="216" alt="Screenshot 2025-05-19 at 13 48 14" src="https://github.com/user-attachments/assets/9b1b513f-e3be-4f81-8328-7728dec1e876" /> | | <img width="1506" alt="Screenshot 2025-05-19 at 13 44 45" src="https://github.com/user-attachments/assets/06a8e8dc-d7b7-41d0-80f8-2462abd52058" /> | <img width="218" alt="Screenshot 2025-05-19 at 13 48 29" src="https://github.com/user-attachments/assets/62f1fc05-f24e-4fbb-83de-4c90d2342d63" /> | [Preview](https://vendemo-cm9sir9v900u7z6llkl62l70j-k5r6r35q4.b.vtex.app/) [PR](dp-faststore-org/vendemo-dp#19) - [Jira task](https://vtex-dev.atlassian.net/browse/SFS-2449) --------- Co-authored-by: Fanny Chien <[email protected]> Co-authored-by: Otavio Moreira Meirelles <[email protected]> Co-authored-by: Fanny Chien <[email protected]>
Delivery Options will be added in feature branch 2.1 and the global
settings need a restructuring to support it and keep organized.
- Separate settings between `Regionalization` and `Delivery Promise`
- In `Delivery Promise` there are configs strict to DP
- In `Regionalization` there are configs that affects not only stores
with DP enabled.
- Rename `deliverySettings` to `deliveryMethods`
- Those configs were only related to Delivery Methods, but since we'll
introduce Delivery Options and Dynamic Estimate on feature branch 2.1 we
should change it.
- Move `regionSlider` from `deliverySettings` (which was renamed to
`deliveryMethods`) to inside of `deliveryPromise`
- Rename the `deliveryMethods` that was inside of `deliverySettings`
- Since `deliverySettings` was renamed to `deliveryMethods`, it doesn't
make sense to have another `deliveryMethods` inside. I've only moved
those configs to the new `deliveryMethods`.
Check that messages are coming correctly from hCMS Global Sections. If
testing RegionModal or RegionPopover, keep in mind that we merge the
deprecated configs from those sections to the ones in Global Sections
and the ones from the section takes precedence.
| Desktop | Mobile |
| ---- | ---- |
| <img width="355" alt="Screenshot 2025-07-09 at 21 30 25"
src="https://github.com/user-attachments/assets/80ac0988-1768-42ab-85f7-d663aa1587aa"
/> | <img width="312" alt="Screenshot 2025-07-09 at 21 30 45"
src="https://github.com/user-attachments/assets/7f254d50-1ed0-41c4-a8f9-b99ccb0b1f21"
/> |
| <img width="1497" alt="Screenshot 2025-07-09 at 21 35 51"
src="https://github.com/user-attachments/assets/c763c2e5-7390-4756-ab70-5113d28843d4"
/> | <img width="316" alt="Screenshot 2025-07-09 at 21 30 54"
src="https://github.com/user-attachments/assets/6095a501-5fb1-4fb8-ade2-4c30a4a54b76"
/> |
| <img width="334" alt="Screenshot 2025-07-09 at 21 31 23"
src="https://github.com/user-attachments/assets/ff8947fd-aa55-45cc-ac66-fc78555f79a9"
/> | <img width="316" alt="Screenshot 2025-07-09 at 21 31 35"
src="https://github.com/user-attachments/assets/216a0996-28dc-4c7f-8a7e-89e62855842f"
/> |
| <img width="509" alt="Screenshot 2025-07-09 at 21 30 17"
src="https://github.com/user-attachments/assets/4f1fe847-bc73-4bbc-bf67-75c86a2981c1"
/> | <img width="312" alt="Screenshot 2025-07-09 at 21 35 16"
src="https://github.com/user-attachments/assets/4720ce68-78b4-4188-8323-e4ec7e5a10b2"
/> |
| <img width="719" alt="Screenshot 2025-07-09 at 21 29 59"
src="https://github.com/user-attachments/assets/172faab7-1ba4-4cb8-a466-1b83a16cb1a0"
/> | <img width="311" alt="Screenshot 2025-07-09 at 21 35 36"
src="https://github.com/user-attachments/assets/9f32ff45-04d8-47bd-be7b-168117706026"
/> |
[PR](dp-faststore-org/vendemo-dp#48)
Preview: https://vendemo-cm9sir9v900u7z6llkl62l70j-j25zty24c.b.vtex.app/
- [Jira task](https://vtex-dev.atlassian.net/browse/SFS-2639)
- [Slack
thread](https://my.slack.com/archives/C08SZUBMFDK/p1752080463304509)
With these changes, Delivery Promise tags will be displayed on PLP's and Search page's product cards when available for specific products. First, it will check if it should display the tags. If so, we display the chosen tag (Delivery Option or Dynamic Estimate) on Headless CMS if the product has available tags from Intelligent Search. With DP enabled on `discovery.config`, use the `vendemo` account and set the following zip code: `50030-260`. Open any PLP and you should see available tags being displayed on product cards there. dp-faststore-org/vendemo-dp#62 --------- Co-authored-by: Fanny Chien <[email protected]> Co-authored-by: Larícia Mota <[email protected]> Co-authored-by: Fanny Chien <[email protected]> Co-authored-by: Otavio Moreira Meirelles <[email protected]>
- Delivery Promise tags will be displayed on PDP when available for specific products. (if enabled) First, verify if it should display the tags. If so, we display the chosen tag (Delivery Option or Dynamic Estimate) on the product's page if the product has available tags from Intelligent Search. Example of Delivery Promise tag in Product Title along with discount badge and ref number: |Desktop|Mobile| |-|-| |<img width="1005" height="625" alt="desk" src="https://github.com/user-attachments/assets/2a387015-b7ef-4ffa-a982-4e956b6be479" />|<img width="390" height="843" alt="mob" src="https://github.com/user-attachments/assets/67afef57-cb93-4ed7-9c8a-3c580ba7f69e" />| - Run the application locally. - Change the account to `vendemo` to test. - Enable `deliveryPromise` in `discovery.config` - Change postal code to `50030-260` - Go to a PDP, you will be able to see the available delivery promise tag. note: In the moment, you probably will only see the `dynamic-estimate` tag. [Preview link](https://vendemo-cm9sir9v900u7z6llkl62l70j-4794z295w.b.vtex.app) Preview Repo: dp-faststore-org/vendemo-dp#68 - [Jira Task](https://vtex-dev.atlassian.net/jira/software/c/projects/SFS/boards/1051?selectedIssue=SFS-2555)
When Delivery Promise enabled: - Adds Shipping Filters component in PLP - List Shipping options available to filter - Enable add custom labels for shipping option via hCMS - Adds `Set Location` button when no zip code provided note: Button actions and facets filters is not fully integrated yet. - List Shipping options available to filter (according to the zipcode provided) |Desktop| Mobile| |-|-| |<img width="559" alt="image" src="https://github.com/user-attachments/assets/580c5e0c-9bb2-485a-8746-514f938cf54d" />|<img width="300" alt="image" src="https://github.com/user-attachments/assets/b4f23fa4-99ab-474e-9484-ab13cd7ff516" />| |Desktop| Mobile| |-|-| |<img width="691" alt="image" src="https://github.com/user-attachments/assets/c1b6a448-5e2e-46e4-9969-742e6a35649b" />|<img width="200" alt="image" src="https://github.com/user-attachments/assets/2ffe9385-da5f-4417-8d9b-7d1e207ebd1e" />| - Show `Set Location` Button when no zipcode is provided |Desktop| Mobile| |-|-| |<img width="518" alt="image" src="https://github.com/user-attachments/assets/d66d972b-fa25-4e0e-b07a-51300f5ff787" />|<img width="392" alt="image" src="https://github.com/user-attachments/assets/2e4bfe9b-412f-4f1f-b3f4-04055834424a" />| - CMS <img width="500" alt="image" src="https://github.com/user-attachments/assets/bb83b8b1-95f0-4bea-b49b-7f750a57b052" /> if you test using an account that delivery promise is not enabled, nothing should be changed. Run locally pointing to `vendemo` account, ou try this preview. 1. if deliveryPromise.enabled is `false` in `discovery.config, no changes are expected. Enable deliveryPromise in `discovery.config`, and test the scenarios below: 1. Navigate to a PLP, you should be able to see a `Delivery` section in the Filters component. (Also try in the mobile resolution) 2. If no zipCode provided, you should be able to see `Set Location` button 3. If zipCode provided, you should be able to see the list of available shipping options for that zipCode vtex-sites/faststoreqa.store#799 --------- Co-authored-by: Lucas Feijó <[email protected]> Co-authored-by: Larícia Mota <[email protected]>
It creates a new tab inside the Global Sections CMS. In the new Settings tab, it will be possible to configure settings related to regionalization, which will be used by components such as the Region Modal and Region Popover. This PR doesn't update all components/sections, it'll be done after. In this PR, there is an update to `FilterDesktop` so we can validate the change. The merchant will be able to configure their regionalization-related message in a single place (Global Sections Settings tab) instead of duplicate messages through sections. To avoid introducing breaking changes, I haven't removed the messages from the sections yet - this will be done in v4. I've added a deprecation notice in every field that was created in the Settings tab. In v3, the components/sections will use the messages defined in the sections CMS; if they're blank, they will use the messages in the Global Sections Settings tab. <img width="1227" alt="Screenshot 2025-05-15 at 10 30 42" src="https://github.com/user-attachments/assets/e1b9b32f-7270-43a7-8016-abb536c08272" /> In the CMS of the vendemo store, I've added messages in the Global Sections Settings tab using a `[GS]` at the beginning of every message so we can identify the ones that are coming from this tab. - PLP I've only removed (left blank) the messages in `Product List Page > Product Gallery > Filter > Delivery Settings > **Delivery Section description**` and `Product List Page > Product Gallery > Filter > Delivery Settings > Delivery Custom labels > **Shipping label**`, those are the ones that should use the GS one. - Search page The messages from `Search Page > Product Gallery > Filter > Delivery Settings` were all left blank (we hadn't updated this page to add the messages -- so this page didn't have messages defined for those cases, and we hadn't noticed 😣). | PLP | Search Page | | ---- | ---- | | <img width="649" alt="Screenshot 2025-05-15 at 09 59 40" src="https://github.com/user-attachments/assets/199d8e0d-a638-4b3e-ade2-95bbeaaf3a86" /> | <img width="772" alt="Screenshot 2025-05-15 at 10 09 08" src="https://github.com/user-attachments/assets/8edc352e-bf44-46bd-92a2-f9232b407d77" /> | | <img width="1496" alt="Screenshot 2025-05-15 at 10 15 40" src="https://github.com/user-attachments/assets/17284640-fb0e-45d0-b44b-8c7db98fc7be" /> | <img width="1499" alt="Screenshot 2025-05-15 at 10 16 30" src="https://github.com/user-attachments/assets/97801ddd-3b87-4c1f-a166-f8ef7b8d6fcd" /> | | <img width="1495" alt="Screenshot 2025-05-15 at 10 17 37" src="https://github.com/user-attachments/assets/1eb5023c-b724-41f3-8b4f-8cc57f7c4b4c" /> | <img width="1495" alt="Screenshot 2025-05-15 at 10 18 05" src="https://github.com/user-attachments/assets/4457b88e-31a7-4aa2-83ed-8038290a1e2c" /> | - Vendemo [[PR](dp-faststore-org/vendemo-dp#17) / [preview](https://vendemo-cm9sir9v900u7z6llkl62l70j-7sfv6u49l.b.vtex.app/)] - [Slack discussion thread](https://vtex.slack.com/archives/C03L3CRCDC4/p1747248599365189)
This PR contains the shipping methods integration with API. We already have some of the shipping facets being rendered, but no action was being made. After these changes, the filters should work depending on the selected scenario. The `usePickupPoints` hook is responsible to get the list of pickup points available for the specific location in session. Based on that list, we create the `pickup-in-point` facet on the client-side (it's not delivered by the IS API) and inject on the facets list. When the `pickup-in-point` is selected, a additional facet called `pickupPoint` is also added on the facets list, then on the Search client (`@faststore/api`) we transform it on query string param and send it in the `product_search` IS request. | Desktop | Mobile | | - | - | |  |  | - Use the following postal code: `50030-260`; - Pay attention to the behavior of each different filter: each one must send the correct parameters/variables in the query (check the `Network` tab); - Observe the behavior and visibility of the filters on both desktop and mobile, the logic is similar but they have some different details that can impact navigation; vtex-sites/faststoreqa.store#812
This PR implements the Editing the store in the PLP delivery filter flow. The main changes added were: - Adds `changePickupPoint` type to `regionSliderType` - List pickup points given a valid zipcode - Updates shipping filter with selected pickup point reminder: After merging, run `cms sync` to update new section fields. (Few new fields were added: `changePickupPoint`, `changePickupPointApplyButtonLabel`, `noStoresAvailableInLocation` and `errorMessageHelper`) 1. Buyer can edit the pickup store by clicking in the pickup filter in PLP. The SliderOver should appear. |Desktop|Mobile| |-|-| |<img width="936" alt="image" src="https://github.com/user-attachments/assets/981b704b-ffe5-4ab9-9426-ef5b9b6d8703" />|<img width="423" alt="image" src="https://github.com/user-attachments/assets/602cc21b-97ab-4dc5-8a63-4ece2325b16a" />| 2. If the pickup filter is selected, the slider already opens with the field focused and the current location filled in. |Desktop|Mobile| |-|-| <img width="936" alt="image" src="https://github.com/user-attachments/assets/e5052ab9-88a2-4469-a71b-cabc696f341b" />|<img width="423" alt="image" src="https://github.com/user-attachments/assets/7fba073e-634a-4189-bb13-45d04cebd597" />| 3. If the buyer doesn't change the postal code and selects another store, `Update` button should be available. - postal code stays the same and pickup point store should be updated in the PLP filters |Desktop|Mobile| |-|-| |<img width="941" alt="image" src="https://github.com/user-attachments/assets/2e1fa6e8-1e85-4c15-b0db-12ee880e5ec1" />|<img width="425" alt="image" src="https://github.com/user-attachments/assets/8ae9945b-29dd-42e3-89ae-5cc8b22d688e" />| 4. If the buyer changes the postal code and selects a new store. - after updating the pickup point is updated in the PLP filter 5. If buyer changes the postal code that returns invalid or unavailable items for the location, `Update` button should be disabled and a message should be displayed. |Desktop|Mobile| |-|-| |<img width="936" alt="image" src="https://github.com/user-attachments/assets/c8342e1e-b6b9-4833-9b32-67ef123a4129" />|<img width="391" alt="image" src="https://github.com/user-attachments/assets/c14b19ca-ac02-4af0-bfdb-aa5b9bde368e" />| _this error message layout could be slightly different - discussing with design team_ 6. If buyer changes the postal code and no pickup stores available for the location, `Update` button should be disabled and a message should be displayed. |Desktop|Mobile| |-|-| |<img width="938" alt="image" src="https://github.com/user-attachments/assets/ccdec434-6b47-4681-ad79-472ea9f71f88" />|<img width="398" alt="image" src="https://github.com/user-attachments/assets/0b2fa62a-b3cd-469b-994e-739d8c17943d" /> - You can run locally and point the account to `vendemo` or try on this preview [link](https://vendemo-cm9sir9v900u7z6llkl62l70j-kiasokde8.b.vtex.app). - Reproduce the scenarios listed above in desktop and mobile. - [preview link](https://vendemo-cm9sir9v900u7z6llkl62l70j-kiasokde8.b.vtex.app) --------- Co-authored-by: Lucas Feijó <[email protected]> Co-authored-by: Larícia Mota <[email protected]>
Delivery Options will be added in feature branch 2.1 and the global
settings need a restructuring to support it and keep organized.
- Separate settings between `Regionalization` and `Delivery Promise`
- In `Delivery Promise` there are configs strict to DP
- In `Regionalization` there are configs that affects not only stores
with DP enabled.
- Rename `deliverySettings` to `deliveryMethods`
- Those configs were only related to Delivery Methods, but since we'll
introduce Delivery Options and Dynamic Estimate on feature branch 2.1 we
should change it.
- Move `regionSlider` from `deliverySettings` (which was renamed to
`deliveryMethods`) to inside of `deliveryPromise`
- Rename the `deliveryMethods` that was inside of `deliverySettings`
- Since `deliverySettings` was renamed to `deliveryMethods`, it doesn't
make sense to have another `deliveryMethods` inside. I've only moved
those configs to the new `deliveryMethods`.
Check that messages are coming correctly from hCMS Global Sections. If
testing RegionModal or RegionPopover, keep in mind that we merge the
deprecated configs from those sections to the ones in Global Sections
and the ones from the section takes precedence.
| Desktop | Mobile |
| ---- | ---- |
| <img width="355" alt="Screenshot 2025-07-09 at 21 30 25"
src="https://github.com/user-attachments/assets/80ac0988-1768-42ab-85f7-d663aa1587aa"
/> | <img width="312" alt="Screenshot 2025-07-09 at 21 30 45"
src="https://github.com/user-attachments/assets/7f254d50-1ed0-41c4-a8f9-b99ccb0b1f21"
/> |
| <img width="1497" alt="Screenshot 2025-07-09 at 21 35 51"
src="https://github.com/user-attachments/assets/c763c2e5-7390-4756-ab70-5113d28843d4"
/> | <img width="316" alt="Screenshot 2025-07-09 at 21 30 54"
src="https://github.com/user-attachments/assets/6095a501-5fb1-4fb8-ade2-4c30a4a54b76"
/> |
| <img width="334" alt="Screenshot 2025-07-09 at 21 31 23"
src="https://github.com/user-attachments/assets/ff8947fd-aa55-45cc-ac66-fc78555f79a9"
/> | <img width="316" alt="Screenshot 2025-07-09 at 21 31 35"
src="https://github.com/user-attachments/assets/216a0996-28dc-4c7f-8a7e-89e62855842f"
/> |
| <img width="509" alt="Screenshot 2025-07-09 at 21 30 17"
src="https://github.com/user-attachments/assets/4f1fe847-bc73-4bbc-bf67-75c86a2981c1"
/> | <img width="312" alt="Screenshot 2025-07-09 at 21 35 16"
src="https://github.com/user-attachments/assets/4720ce68-78b4-4188-8323-e4ec7e5a10b2"
/> |
| <img width="719" alt="Screenshot 2025-07-09 at 21 29 59"
src="https://github.com/user-attachments/assets/172faab7-1ba4-4cb8-a466-1b83a16cb1a0"
/> | <img width="311" alt="Screenshot 2025-07-09 at 21 35 36"
src="https://github.com/user-attachments/assets/9f32ff45-04d8-47bd-be7b-168117706026"
/> |
[PR](dp-faststore-org/vendemo-dp#48)
Preview: https://vendemo-cm9sir9v900u7z6llkl62l70j-j25zty24c.b.vtex.app/
- [Jira task](https://vtex-dev.atlassian.net/browse/SFS-2639)
- [Slack
thread](https://my.slack.com/archives/C08SZUBMFDK/p1752080463304509)
We should use the endpoint from logistics to have access to the active pickup points. This endpoints returns the `isActive` info that we can use to filter the results and only show to the shopper the active pickup points. Test CEPs from Recife and RJ, the first one should have a valid pickup point, while RJ shouldn't show anything in the pickup list since all pickup points in `vendemo` account that could work for RJ are inactive. | Recife | Rio de Janeiro | | ---- | ---- | | <img width="414" height="675" alt="Screenshot 2025-07-23 at 15 17 58" src="https://github.com/user-attachments/assets/51f5f13a-6648-4720-b35b-3d03a4a80a66" /> | <img width="416" height="675" alt="Screenshot 2025-07-23 at 15 17 45" src="https://github.com/user-attachments/assets/42e681b3-672b-408e-8c90-6c4c815f27b5" /> | PR: dp-faststore-org/vendemo-dp#56 Preview: https://vendemo-cm9sir9v900u7z6llkl62l70j-9iq2gg4ij.b.vtex.app/ [Jira task](https://vtex-dev.atlassian.net/browse/SFS-2678)
Feature branch for the Delivery Promise feature - phase 2.1 - filters by dynamic estimate. - #2958 - #2963 <!--- Tell us the role of the new feature, or component, in its context. Provide details about what you have implemented and screenshots if applicable. ---> <!--- Describe the steps with bullet points. Is there any external link that can be used to better test it or an example? ---> <!--- Add a link to a deploy preview from `starter.store` with this branch being used. ---> <!--- Tip: You can get an installable version of this branch from the CodeSandbox generated when this PR is created. ---> - [Jira epic](https://vtex-dev.atlassian.net/browse/SFS-2294) **Documentation** - [ ] For documentation changes, ping `@Mariana-Caetano` to review and update (Or submit a doc request) --------- Co-authored-by: Fanny Chien <[email protected]> Co-authored-by: Lucas Feijó <[email protected]> Co-authored-by: Fanny Chien <[email protected]> Co-authored-by: Otavio Moreira Meirelles <[email protected]> Co-authored-by: Artur Santiago <[email protected]>
…delivery" (#3041) Display dynamic estimate tag only when the shipping method is "delivery". Now IS returns the shipping method information for the tags object, so we can take this into consideration when displaying tags. For now, the IS update is only in a workspace, so you'll have to test it locally. Make sure that the `gabiru` workspace (`vtex login vendemo -w gabiru`) has the app `vtex.intelligent-search-api` installed in the version `0.58.0-beta.999` (`vtex ls`). Then, make some changes in the `packages/core/discovery.config.default.js` and `packages/api/src/platforms/vtex/clients/search/index.ts`: - Use the `vendemo` account, `BRA` country and `pt-BR` locale. - Add the workspace to the `base` URL in `index.ts`, it should be: ``` const base = `https://gabiru--${account}.${environment}.com.br/api/io` ``` After setting a postal code, go to the Power tools category, see that the product `BLACK+DECKER 20V MAX 5-1/2-Inch Cordless Circular Saw, Tool Only (BDCCS20B)` doesn't have a tag associated. <img width="1501" height="792" alt="Screenshot 2025-09-17 at 14 58 02" src="https://github.com/user-attachments/assets/a2c91587-3957-46e7-87ec-36f5d7e978f0" /> In the case of this req to IS, this product has only the pickup dynamic estimate, so we don't display it. <img width="1001" height="639" alt="Screenshot 2025-09-17 at 15 16 32" src="https://github.com/user-attachments/assets/9f45ec28-710f-482b-9a9a-8d5597872eb8" /> The other products in this query have the `delivery` estimate for `next-day` only, so it displays `Receive tomorrow`. <img width="1038" height="650" alt="Screenshot 2025-09-17 at 15 17 35" src="https://github.com/user-attachments/assets/583e34c0-0ad5-4f47-9a44-a9c3fec5e354" /> You can compare how it was before this change using this preview https://vendemo-cm9sir9v900u7z6llkl62l70j-g96ol5wx6.b.vtex.app/ -⚠️ note that it'll show "Receive today" because there is the "pickup-in-point" tag for `same-day` and we weren't checking the shipping method. <img width="1492" height="771" alt="Screenshot 2025-09-17 at 15 20 50" src="https://github.com/user-attachments/assets/7c4092b4-8127-400e-aab6-85a1029a7b83" /> - [Jira task](https://vtex-dev.atlassian.net/browse/SFS-2858) - [Slack thread](https://vtex.slack.com/archives/C08SZUBMFDK/p1758113222697079)
lariciamota
force-pushed
the
feat/delivery-promise-tags
branch
from
aa03158 to
3bf07e2
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What's the purpose of this pull request?
Feature branch for the Delivery Promise feature - phase 2.1 - tags by Delivery Option and Dynamic Estimate.
How it works?
How to test it?
Starters Deploy Preview
References
Checklist
Documentation
@Mariana-Caetanoto review and update (Or submit a doc request)