feat: Delivery Promise 2.1 - filters by Dynamic Estimate #3009
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-2.1-dynamic-estimate
branch
2 times, most recently
from
b829573 to
85e6a44
Compare
lariciamota
force-pushed
the
feat/delivery-promise-2.1-dynamic-estimate
branch
2 times, most recently
from
6bf8083 to
edcd87e
Compare
lariciamota
force-pushed
the
feat/delivery-promise-2.1-dynamic-estimate
branch
from
edcd87e to
c09d18f
Compare
This PR intends to ensure all location data (`postalCode`, `geoCoordinates` and `country`) is being synchronized when needed. It updates geo coordinates when users set a postal code and ensure location data won't be overwritten if users grant geo location consent late. - Enable Delivery Promise on discovery.config; - Open the localhost store on anon tab (to ensure no stale data); - First, consent geo location data from popup and look to the IDB `fs::session` value, it should fill `geoCoordinates` data after `useGeolocation` hook execution; - Then try to set a postal code, the `postalCode` should be set and `geoCoordinates` should be different now (based on the postal code); - Another test: open another anon tab and, while the popup asking for geo location consent set a postal code. Then, after the session is updated with the new location (based on the postal code), grant the geo location consent and nothing should happen since user have already set the postal code. vtex-sites/starter.store#734 --------- Co-authored-by: Fanny Chien <[email protected]> Co-authored-by: Larícia Mota <[email protected]>
This PR intends to display region data (on `RegionButton` and `RegionBar`) with `city` and `postalCode` information. For cases when users manually set their zip code, they should see both city name and zip code: <img width="342" alt="Screenshot 2025-04-09 at 09 25 16" src="https://github.com/user-attachments/assets/17b48ff7-37e6-497b-b520-a9d509787afa" /> <img width="256" alt="Screenshot 2025-04-09 at 09 25 02" src="https://github.com/user-attachments/assets/ac34f6d6-1e7f-44ad-99db-6ced59044187" /> Otherwise, if a default zip code is set on `discovery.config` and users do not manually set any zip code, they should see only the city name: <img width="382" alt="Screenshot 2025-04-09 at 09 24 08" src="https://github.com/user-attachments/assets/e9f0fb37-24cf-4e8b-80af-0b9129c5683c" /> <img width="201" alt="Screenshot 2025-04-09 at 09 24 24" src="https://github.com/user-attachments/assets/1f627fc7-9a1c-4bb9-bae4-959dccbfd141" /> Test both scenarios described in the section above to validate everything is working and displayed as expected. vtex-sites/faststoreqa.store#769
This PR's aims to cover the following scenarios: 1. When the buyer opens the site to start a session, display `RegionPopover` when location is optional, no location available and merchant has default zipCode. |Desktop|Mobile| |-|-| |<img width="500" alt="scenario-1-desk" src="https://github.com/user-attachments/assets/e074c8f1-8948-46c7-9da4-f741c3a28349" />|<img width="150" alt="scenario-1-mob" src="https://github.com/user-attachments/assets/b0879b12-a64a-4d62-b0b6-2eb1548a304d" />| 2. When the buyer opens the site to start a session, Display `RegionPopover` when location is optional and no location available. |Desktop|Mobile| |-|-| <img width="500" alt="scenario-2-desk" src="https://github.com/user-attachments/assets/7007fd03-fd25-40f8-9a37-cb79f72eecc5" />|<img width="150" alt="scenario-2-mob" src="https://github.com/user-attachments/assets/152aa08f-50fc-4fbe-802a-be8387b47c15" />| -Create Popover Component / Popover styles -Create RegionPopover / styles -Implements changes of session postalCode in `RegionPopover` -Creates `useSetLocation` to handle session changes in `RegionModal` and `RegionPopover` -Uses `useRegion` to handle setLocation and validation -Adds `RegionPopover` to `RegionButton` (desktop) -Adds `RegionPopover` to `RegionBar` (mobile) -Moves `useOnClickOutside` hook to `faststore/ui` Run the project locally or use this [preview link](https://storeframework-cm652ufll028lmgv665a6xv0g-k85hl97mm.b.vtex.app) In `discovery.config`, sets ``` deliveryPromise: { enabled: true, mandatory: false, }, ``` > When the buyer opens the site to start a session, display RegionPopover when location is optional, no location available and merchant has default zipCode. _Clear site data, if there is a previous session that a postalCode is set_ In `discovery.config`, in the default session, adds a zip code (use `12121`) ``` session: { postalCode: '12121', }, ``` 1. Refresh the page 2. You will be able to see the RegionPopover with the default zip code applied. 3. Click outside the Popover and it should disappear. 4. Refresh the page 5. Attempts to change the zip code 6. If you apply a valid zip code, after refreshing the page you shouldn't able to see the popover anymore. This should also work in the mobile. > When the buyer opens the site to start a session, Display `RegionPopover` when location is optional and no location available. _Clear site data, if there is a previous session that a postalCode is set_ In `discovery.config`, in the default session, sets a zip code to `null` ``` session: { postalCode: null, }, ``` 1. Refresh the page 2. You will be able to see the RegionPopover with the default description and no location applied. 3. Click outside the Popover and it should disappear. 4. Refresh the page 5. Attempts to change the zip code 6. If you apply a valid zip code, after refreshing the page you shouldn't able to see the popover anymore. This should also work in the mobile. _Clear site data, if there is a previous session that a postalCode is set_ 1. In `discovery.config`, changes `mandatory` to `true`. ``` deliveryPromise: { enabled: true, mandatory: true, }, ``` 2. Refresh the page, the Popover should not appear, instead the `RegionModal` will appear without the close button. <img width="500" alt="image" src="https://github.com/user-attachments/assets/6f8e8d30-4248-4b29-802e-183d9ebf5b5b" /> Also, added `RegionPopover` to Global section in hCMS. `storeframework` account You can also test it, changing the texts and see if it's working as expected. <img width="500" alt="image" src="https://github.com/user-attachments/assets/a362370a-33a3-403e-aa2c-b4edc84bf980" /> vtex-sites/faststoreqa.store#777 [Figma](https://www.figma.com/design/Ra4IaKe920E5rkXZkCz1D8/Cubos-–-FastStore-Features-B2C?node-id=226-20785&t=DHxk1r6kytn2lHC2-0) https://www.w3schools.com/cssref/sel_attr_begin.php TODO: Request Doc for PopOver TODO: Remind to run cms sync in the default account when the feature branch is merged since new section was added. --------- Co-authored-by: Larícia Mota <[email protected]> Co-authored-by: Lucas Feijó <[email protected]>
This PR intends to handle the scenario when shoppers are setting postal code and there is no available products for that specific location. For all Delivery Promises scenarios, when shoppers are setting their postal code an input error should be displayed if there is no available products for that location. - If there is a testing postal code with no products available you can use it on `RegionModal` or `RegionPopover`; - Or for local environment you can change the condition at `useSetLocation` hook to mock the `no products` scenario; vtex-sites/faststoreqa.store#788 --------- Co-authored-by: Larícia Mota <[email protected]>
…tor (#2824) ## What's the purpose of this pull request? This PR intends to apply some code refactor and receive the `no products available` error scenario. ## How to test it? Remember to apply `cms-sync` to a dev workspace to validate the new error message from hCMS. ### Starters Deploy Preview vtex-sites/faststoreqa.store#791 --------- Co-authored-by: Fanny Chien <[email protected]> Co-authored-by: Larícia Mota <[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)
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 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]>
…2886) Renames the `FilterDeliveryOption` component to clarify that it relates to delivery methods.
Make `RegionModal` and `RegionPopover` have access to global settings (hCMS -> Global Sections -> Settings) The Global Settings was created to remove duplications of messages in hCMS. `RegionModal`, `RegionPopover` and filter componentes have some messages in common that were being duplicated across sections and pages in hCMS. `FilterDesktop` and `FilterSlider` had already been modified to use global settings in a previous PR, but they were only in the context of PLP and Search pages, which is different from `RegionModal` and `RegionPopover` that are global sections. Therefore, in this current PR was necessary some changes related to page context, which involved adding `PageProvider` to ALL pages (that's why there is a lot of modified files) passing the globalSettings as its context. The prioritization order is: first check if there is the message inside the section, if not then use the message inside the global settings -- this avoids breaking changes. I've made some changes in the hCMS in `vendemo` admin so we can see the impact.⚠️ Make sure to test all different types of pages, example: PLP, Search, PDP, Landing Page, 404, 500. In Global Settings, the input field label is "Postal Code", the error message when there is no product available for the location has a "Oh no!" in the beginning, and there is a message for the "I don't know my postal code" link. <img width="350" alt="global settings" src="https://github.com/user-attachments/assets/bd0c28a5-a1d3-4ce7-8551-6be703bb9a05" /> <img width="350" alt="region popover" src="https://github.com/user-attachments/assets/69bc2aed-0019-441d-ae07-5bb92e46201f" /> Differences: - The input field label has a "!" in the end. - There is no message for the error of no product available What should happen: Since it was defined some messages in the section, those messages should be gotten from the **section**. The only one that should be from **global settings** is the one for the error of no product available, therefore: - The input field label should have a "!" in the end. - The error message should be "Oh no! There are no products available for %s." %s being replaced by the inserted postal code. | Desktop | Mobile | Error | | ---- | ---- | ---- | | <img width="607" alt="popover" src="https://github.com/user-attachments/assets/675da07d-20de-4fd0-8d8e-ac49b9c3b30c" /> | <img width="217" alt="popover mobile" src="https://github.com/user-attachments/assets/dcc731ea-4185-4162-ad2e-ec30341c1067" /> | <img width="600" alt="popover error" src="https://github.com/user-attachments/assets/2762ff82-46d7-44fb-ad3d-3808df24f93e" /> | <img width="350" alt="region modal" src="https://github.com/user-attachments/assets/f51c8bc5-c956-435a-9939-3ffca985b148" /> - The input field label has a "!" in the end. - There is no message for the "I don't know my postal code" link. What should happen: Since it was defined some messages in the section, those messages should be gotten from the **section**. The only one that should be from **global settings** is the one for the "I don't know my postal code" link, therefore: - The input field label should have a "!" in the end. - The "I don't know my postal code" link message should be "I don't know my Postal Code". | Desktop | Mobile | Error | | ---- | ---- | ---- | | <img width="1232" alt="modal" src="https://github.com/user-attachments/assets/042d3e12-98e5-4e53-9713-cab24d5e0a10" /> | <img width="215" alt="modal mobile" src="https://github.com/user-attachments/assets/a1e0f277-d45f-4927-9aaf-b6f0311f8cdf" /> | <img width="1240" alt="modal error" src="https://github.com/user-attachments/assets/c1eb84a3-c7e0-45d6-acae-79ae38a5a6c5" /> | - [Preview](https://vendemo-cm9sir9v900u7z6llkl62l70j-m66r5st5t.b.vtex.app/) - [PR](dp-faststore-org/vendemo-dp#39) - [Jira task](https://vtex-dev.atlassian.net/browse/SFS-2524)
…w usage by others (#2922) <!--- Considering the context, what is the problem we'll solve? Where in VTEX's big picture our issue fits in? Write a tweet about the context and the problem itself. ---> Making the logic of deliveryPromise reusable by stores which extends our components. <!--- Tell us the role of the new feature, or component, in its context. Provide details about what you have implemented and screenshots if applicable. ---> Created the `useDeliveryPromise` hook that exports all necessary logic to use delivery promise. Test if all the behaviour refactored in delivery promise is stil working as intended. <!--- 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. ---> <!--- Spread the knowledge: is there any content you used to create this PR that is worth sharing? ---> <!--- Extra tip: adding references to related issues or mentioning people important to this PR may be good for the documentation and reviewing process ---> <em>You may erase this after checking them all 😉</em> **PR Title and Commit Messages** - [ ] PR title and commit messages follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification - Available prefixes: `feat`, `fix`, `chore`, `docs`, `style`, `refactor`, `ci` and `test` **PR Description** - [ ] Added a label according to the PR goal - `breaking change`, `bug`, `contributing`, `performance`, `documentation`.. **Dependencies** - [ ] Committed the `pnpm-lock.yaml` file when there were changes to the packages **Documentation** - [ ] PR description - [ ] For documentation changes, ping `@Mariana-Caetano` to review and update (Or submit a doc request) [SFS-2532](https://vtex-dev.atlassian.net/browse/SFS-2532) [SFS-2532]: https://vtex-dev.atlassian.net/browse/SFS-2532?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --------- Co-authored-by: Lucas Feijó <[email protected]> Co-authored-by: Fanny Chien <[email protected]> Co-authored-by: Larícia Mota <[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)
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]>
## What's the purpose of this pull request?
With these changes, the shopper will be able to clear current pickup
points filters in the `RegionSlider` component.
## How it works?
This button will be displayed only when shopper is changing pickup
points (selected or global ones).
Than for applied filters it will clear everything, including from
selected facets.
## How to test it?
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 opening the `RegionSlider` and applying some pickup points and
clearing the filter. The `RegionSlider` should not close after clear
filters and all the state should be reset: `selectedFacets` should not
have the previously selected pickup point, and both `globalPickupPoint`
and `defaultSelectedPickup` also should be reset.
### Starters Deploy Preview
vtex-sites/faststoreqa.store#838
---------
Co-authored-by: Larícia Mota <[email protected]>
Co-authored-by: Fanny Chien <[email protected]>
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)
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
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]>
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]>
…ected (#3056) ## What's the purpose of this pull request? Filter by shipping method `delivery` when dynamic estimate is selected, so the products that are only for pickup in that dynamic estimate aren't returned. ## How it works? The following behaviors were introduced: - When selecting a dynamic estimate, the IS request will be built with the shipping method `delivery` - When selecting a dynamic estimate, the shipping method facets will be hidden for UX purposes - When deselecting a dynamic estimate, the shipping method facets will be displayed again - When deselecting a dynamic estimate, there won't be any shipping method facet selected - unless there is a global pickup point, in that case the pickup point will be selected. ## How to test it? In PLP/Search, use the dynamic estimate filter and note that the request to IS includes the shipping method delivery also. Test switching the DE toggle and using the shipping method filter when the toggle is deselected. Test also with and without a global pickup point. Examples: | 0 DE selected | 1 DE selected | 2 DE selected | | ---- | ---- | ---- | | <img width="1507" height="808" alt="Screenshot 2025-09-25 at 11 08 33" src="https://github.com/user-attachments/assets/346f2590-dabb-4cf5-ad5a-fbeef6583448" /> | <img width="1505" height="803" alt="Screenshot 2025-09-25 at 15 16 39" src="https://github.com/user-attachments/assets/90b6480e-0c53-4949-a4a1-a7be89d17930" /> | <img width="1502" height="800" alt="Screenshot 2025-09-25 at 15 17 24" src="https://github.com/user-attachments/assets/62c5d9ff-21b4-44d8-9727-8188a8f2f9c3" /> | | Note that the shipping method filters are displayed and there is no shipping method being sent to IS | Note that the shipping method filters aren't displayed and the `delivery` shipping method is sent to IS | | ### Starters Deploy Preview - PR: dp-faststore-org/vendemo-dp#100 - Preview: https://vendemo-cm9sir9v900u7z6llkl62l70j-78q3ujoh1.b.vtex.app/ ## References - [Jira task](https://vtex-dev.atlassian.net/browse/SFS-2767) - Slack threads ([[1](https://vtex.slack.com/archives/C069YM7R73P/p1758305111679099)], [[2](https://vtex.slack.com/archives/C08SZUBMFDK/p1758724584686339)])
lariciamota
force-pushed
the
feat/delivery-promise-2.1-dynamic-estimate
branch
from
9ea61ce to
6dfa85a
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 - filters by 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)