feat: Delivery Promise - navigation based on shopper location #2716
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
changed the title
hellofanny
force-pushed
the
feat/delivery-promise
branch
from
5d756ba to
3825b3c
Compare
hellofanny
reviewed
Mar 26, 2025
|
|
||
| // If user is logged try to get the location (postalCode / geoCoordinates / country) from the user's address | ||
| if (isLoggedIn) { | ||
| const userId = session.person?.id |
There was a problem hiding this comment.
note: current solution works for b2c accounts. But not sure about b2b accounts. Since we are using a different id for it (we will probably need to use b2b.customerId) ?
There was a problem hiding this comment.
Thanks for bringing it up! As discussed here we should change it to support B2B accounts also.
There was a problem hiding this comment.
We're working on it in #2760
There was a problem hiding this comment.
Due to the blocker on B2B user navigation, we decided to resolve #2760 in another Delivery Promises phase.
lariciamota
force-pushed
the
feat/delivery-promise
branch
from
3825b3c to
9742ded
Compare
lariciamota
force-pushed
the
feat/delivery-promise
branch
2 times, most recently
from
8805012 to
c540749
Compare
lariciamota
force-pushed
the
feat/delivery-promise
branch
from
c540749 to
b0aa3d3
Compare
lariciamota
force-pushed
the
feat/delivery-promise
branch
from
9e4c9b4 to
4358a91
Compare
Add in `discovery.config.js` the config that will be used for the new feature Delivery Promise and update code related to validate session to change the `postalCode` to the default one if it's null or empty. If the session's `postalCode` is null or empty, it changes to the initial/default one configured in `discovery.config.js` in the `session` object. In the starter preview's `discovery.config.js` file, I've added `90210` as the default postal code and enabled the deliveryPromise feature. Then if you test the preview you should see this postal code in the IndexedDB of the browser's devtools.  You can also test that it'll be updated to the default postal code if the postal code in the IDB is null or empty previously for some reason (like if you had already accessed the store before this change). It can be done by [editing the IDB through a script in the browser's devtools](https://developer.chrome.com/docs/devtools/storage/indexeddb). Here is the snippet I've used:  ``` var connection = indexedDB.open('keyval-store', 1); connection.onsuccess = (e) => { var database = e.target.result; var objectStore = database.transaction(['keyval'],'readwrite').objectStore('keyval'); var getRequest = objectStore.get('fs::session'); getRequest.onsuccess = (e) => { var data = e.target.result; data.postalCode = null; var updateRequest = objectStore.put(data, 'fs::session'); updateRequest.onsuccess = (event) => { console.log(event.target.result); } } } ``` https://github.com/user-attachments/assets/104164bf-80e8-4bec-bcd5-982f4fe60e04 https://storeframework-cm652ufll028lmgv665a6xv0g-8kzj40dcm.b.vtex.app/ ([PR](https://github.com/vtex-sites/starter.store/pull/705)) - [Jira task 1](https://vtex-dev.atlassian.net/browse/SFS-2199) - [Jira task 2](https://vtex-dev.atlassian.net/browse/SFS-2200) - [Delivery Promise RFC - related section 1](https://docs.google.com/document/d/15IUc7_sQ_MxM67TJJI4fqbnTyc9PVdy_jJb5M0iMhyE/edit?tab=t.0#heading=h.igtfl04jtxbb) - [Delivery Promise RFC - related section 2](https://docs.google.com/document/d/15IUc7_sQ_MxM67TJJI4fqbnTyc9PVdy_jJb5M0iMhyE/edit?tab=t.0#heading=h.h45g42imthwf) - [ ] For documentation changes, ping `@Mariana-Caetano` to review and update (Or submit a doc request)
This PR adds logic to ask for user's geolocation data consent (by using the `getCurrentPosition` function), then if granted save it on current session. It also ensures getting geo coordinates from postal code and country data when validating the current session. The geo coordinates data will be used by the Delivery Zones API. First we verify if there is any `geoCoordinates` data on the current session. If not, we ask for geolocation data consent then, if granted, we update the current session. 1. Using the `RegionModal`: - Click on `Set my location` and it will open the `RegionModal`. - Set any USA zip code (the starter store is using the USA locale); - After the store reload, check the IndexedDB for `geoCoordinates` data, it should be there both longitude and latitude. 2. Through Geolocation consent: - Navigate through the main pages (home, PDP and PLP). It should ask for geolocation consent; - After granted check the `ValidateSession` requests (Network tab) or inside the IndexedDB for the `session` data, `geoCoordinates` should have latitude and longitude data. vtex-sites/starter.store#720 Geolocation Web API: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation
) ## What's the purpose of this pull request? This PR implements the scenario where the user is logged in, and when the user's saved location (address and geo-coordinates) is available, it is saved in the current session. <img width="400" alt="Screenshot 2025-03-12 at 10 52 35" src="https://github.com/user-attachments/assets/f5c345cf-395b-4e48-bd84-c5f280e32d65" /> ## How it works? 1. First we check if user is loggedIn 2. If so, gets it's addresses 3. Check for saved address (using the first of the list) postalCode and geoCoordinate, If available we update the current session with those information. ## How to test it? First, we will need to simulate user logged. (you can follow this [docs](https://docs.google.com/document/d/1DSwrD19dOvzFc650UAlLg4diyxmYTHaBD_4lxWQT8YY/edit?tab=t.0) steps with more detail or follow the steps below) 1. Go to https://www.vtexfaststore.com/ and sign in, then copy the cookies: _VtexIdclientAutCookie_storeframework_, _vtex_session_ and _vtex_segment_ 2. Running the store locally, paste those cookies. 3. Update the indexDB you should be able to see `person` object with user's information (that was previously `null`) 4. Now, refresh the page. 5. if there is an address saved for this user, you should be able to see the `postalCode` and `geoCoordinates` in the session <img width="823" alt="image" src="https://github.com/user-attachments/assets/1ecbb614-aa9f-4a46-bc0c-51b7e756aba6" /> <img width="885" alt="image" src="https://github.com/user-attachments/assets/6dc80260-d705-4422-9c01-785a11982f94" /> ### Starters Deploy Preview https://github.com/vtex-sites/starter.store/pull/731 [Jira Task](https://vtex-dev.atlassian.net/jira/software/c/projects/SFS/boards/1051?selectedIssue=SFS-2205)
## What's the purpose of this pull request? This PR intends to ensure all location data (`postalCode`, `geoCoordinates` and `country`) is being synchronized when needed. ## How it works? 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. ## How to test it? - 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. ### Starters Deploy Preview vtex-sites/starter.store#734 --------- Co-authored-by: Fanny Chien <[email protected]> Co-authored-by: Larícia Mota <[email protected]>
## What's the purpose of this pull request? Update the Session with postal code, country, and geo-coordinates. The Intelligent Search will use this for the Delivery Promise feature. FastStore updates the session with the location information and IS access it. ## How it works? The update is a PATCH request to the Session Manager API. The fields that IS will use from the session are `postalCode`, `geoCoordinates` and `country`, inside the `public` namespace. ## How to test it? Run this code (or use the preview link below) and test changing the postal code and/or using a default one. The fields inside public namespace of the session should be updated accordingly. To check it you can run this request: ```curl curl --location 'https://storeframework.vtexcommercestable.com.br/api/sessions?items=public.postalCode,public.geoCoordinates,public.country' \ --header 'Cookie: vtex_session=ADD_HERE' ```⚠️ Substitute the "ADD_HERE" with the vtex_session cookie that you can get in the browser #### Preview with Delivery Promise NOT enabled https://storeframework-cm652ufll028lmgv665a6xv0g-lqicw1ez2.b.vtex.app/ The session shouldn't update the public field.   #### Preview with Delivery Promise enabled https://storeframework-cm652ufll028lmgv665a6xv0g-58v0e6a7h.b.vtex.app/ ##### Without postal code set The session shouldn't update the public field.   ##### With postal code (and country and geo coordinates) The session should update the public field!   ### Starters Deploy Preview https://github.com/vtex-sites/starter.store/pull/737 ## References - [Jira task](https://vtex-dev.atlassian.net/browse/SFS-2362) - [Slack thread](https://vtex.slack.com/archives/C069YM7R73P/p1741962308203469?thread_ts=1741782251.679469&cid=C069YM7R73P) - [Session Manager API - Edit session](https://developers.vtex.com/docs/api-reference/session-manager-api#patch-/api/sessions)
## What's the purpose of this pull request? The PR #2749 introduced a bug: when the store doesn't have the Delivery Promise feature enabled, the channel `regionId` wasn't being updated. ## How it works? The Checkout updates the session's `regionId` when we update the session to add info about `geoCoordinates`, `country`, and `postalCode`. But we were only doing that when the Delivery Promise feature was enabled. This conditional was removed. For the `sellers` info that we get from Checkout request, we only need to make this request if there is a `seller` info inside the `channel`. So a conditional was introduced to reduce the need of making this request every time. ## How to test it? Check it with Delivery Promise enabled and disabled. On both flows the session in the IndexedDB should be updated to add `regionId` inside the channel when a `postalCode` is added in the RegionBar. To check the `seller` info: an option is changing the config inside `discovery.config`: `channel: '{"salesChannel":"1","regionId":"","hasOnlyDefaultSalesChannel":"true", "seller":"storeframework01"}',` and also set a `postalCode` there: `postalCode: '90210',` The session in the IndexedDB should contain the valid seller (example: `storeframework01`) inside the channel if it was added (in config, for example). ### Starters Deploy Preview <!--- 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. ---> ## References <!--- 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 --->
…#2750) This PR implements the scenario where no address is available and the location is set as mandatory on `discovery.config` <img width="400" alt="image" src="https://github.com/user-attachments/assets/c37757e3-7d4f-4cbe-9ea6-9fabf781547e" /> **note**: The region modal and the flow implemented in this PR differ from the previous prototype. But I've already aligned with @renatamottam (design team) and she will update the figma file. (The main difference is that we won't be using the `Set Location` button, we agreed to use the `Apply` from the input field) <img width="263" alt="image" src="https://github.com/user-attachments/assets/827d0a3e-10c9-4628-99b3-3a86f0b6013e" /> We also made a fix in the current flow of the default `RegionModal`. - It won't automatically close if the added postalCode is invalid and not applied. Adds `buttonActionText` field in hCMS (the default is `Apply`) | hCMS | RegionModal| |-|-| |<img width="500" alt="image" src="https://github.com/user-attachments/assets/64b8aa01-a5e7-48a0-95fe-4d742d8b2f8d" />|<img width="589" alt="image" src="https://github.com/user-attachments/assets/cbe4c7e3-e6e9-4fad-bfbe-c4a8d10ed683" />| TODO: when merging the feature branch, remind to run cms-sync in the default account. 1. when accessing the website, If there is no address and location is set as mandatory, regardless of the page they are accessing, the region modal should appear "forcing" the user to add a valid postal code. 2. while the region modal is displayed the user won't see the modal's close button and won't be able to use the escape key to close it. 3. when a valid postal code is entered, the region modal will close automatically. <img width="500" alt="image" src="https://github.com/user-attachments/assets/662caa3b-3fad-4c45-9f2e-c492dc4776d3" /> <img width="500" alt="image" src="https://github.com/user-attachments/assets/eb6fcef6-f95c-4b92-aa72-0a5d56c42415" /> 1. Run locally or test via this [preview](https://starter-6czvt97g2-vtex.vercel.app) in the `discovery.config` file, sets `mandatory` as true: ``` deliveryPromise: { enabled: true, mandatory: true, }, ``` 2. **Logged in / postalCode available scenario** If there is a postalCode already set, you shouldn't see a region modal appearing when accessing the website. When clicking to edit the postalCode button (in this example `07008`), you should able to see the `RegionModal` with the close button and be able to close it using the esc key. <img width="500" alt="image" src="https://github.com/user-attachments/assets/65be27fe-a76a-40cd-81cf-6d13f014fca9" /> 3. **postalCode not defined** When accessing the website, `RegionModal` should appear "forcing" the user to add a valid postal code. There won't be a close button and you won't be able to close it using the esc key. <img width="500" alt="image" src="https://github.com/user-attachments/assets/99f4021a-9166-4c25-87bc-a27c27da5af3" /> https://github.com/vtex-sites/starter.store/pull/741
## What's the purpose of this pull request? This PR intends to display region data (on `RegionButton` and `RegionBar`) with `city` and `postalCode` information. ## How it works? 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" /> ## How to test it? Test both scenarios described in the section above to validate everything is working and displayed as expected. ### Starters Deploy Preview 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]>
## What's the purpose of this pull request? 1. Sets input focus on `RegionModal` 2. Sets input focus on `RegionPopover` 3. Fix Popover` z-index` priority ## How it works? 1. When opening the `RegionPopover`, if no zip code set the focus should be on the input field instead of the closing button. <img width="500" alt="image" src="https://github.com/user-attachments/assets/0c025d56-bdb3-43f9-95c3-6e677e8379b5" /> 2. When opening the `RegionModal`, the focus should be on the input field instead of the closing button. <img width="500" alt="image" src="https://github.com/user-attachments/assets/b458b995-f30c-4c4f-a6c3-e9fc3553953d" /> 3. Popover should be under the `Navbar` head when scrolling. <img width="500" alt="image" src="https://github.com/user-attachments/assets/d202b739-d1b8-4db8-b2d2-ce4d1a0d2d3a" /> ## How to test it? Run the project locally or use the [preview link ](https://storeframework-cm652ufll028lmgv665a6xv0g-fw7dvhgml.b.vtex.app) 1. If the Popover appears, the initial focus should be on the input field 1.a scroll the page, the popover should appear under the Navbar header. 3. Click to edit zip code, when the `RegionModal` appears, the focus should be on the input field ### Starters Deploy Preview vtex-sites/faststoreqa.store#784
## What's the purpose of this pull request? This PR intends to handle the scenario when shoppers are setting postal code and there is no available products for that specific location. ## How it works? 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. ## How to test it? - 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; ### Starters Deploy Preview 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]>
## What's the purpose of this pull request? When [this file ](https://github.com/vtex/faststore/pull/2716/files#diff-2ad0a54eceb2d4f46e9303b3120312373a87f561a8eed452a8886f034e83f7df) was moved to the /components folder, it broke this type of import: `import useOnClickOutside from "src/sdk/ui/useOnClickOutside";`, that some clients use. We do not recommend this import, but since it's used, we shouldn't break without a major release. ## How to test it? It should build without problems if the store uses `import useOnClickOutside from "src/sdk/ui/useOnClickOutside";`. It can be tested in the core, in the [SearchInput](https://github.com/vtex/faststore/blob/ed400bc738dd7d51e0a1fffce9c13ed843b90ee0/packages/core/src/components/search/SearchInput/SearchInput.tsx#L22) instead of importing from `@faststore/ui` import from `src/sdk/ui/useOnClickOutside`.
lariciamota
force-pushed
the
feat/delivery-promise
branch
from
789c99a to
b41c2a9
Compare
lariciamota
requested review from
gabpaladino and
hellofanny
and removed request for
gabpaladino
lucasfp13
approved these changes
May 12, 2025
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 1 (navigation based on shopper location).
cityandpostalCode#2772No products availablelabel from Headless CMS and code refactor #2824How it works?
How to test it?
Starters Deploy Preview
References
Checklist
@Mariana-Caetanoto review and update (Or submit a doc request)