Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a redirect to login page after user signs out from checkout page #1172

Merged
merged 4 commits into from
May 8, 2023

Conversation

vcua-mobify
Copy link
Contributor

@vcua-mobify vcua-mobify commented May 4, 2023

Small change that fixes #1142

Description

Currently, when a logged in user goes to checkout and then clicks the sign out button on the contact info, the system will log the user out but remain on the checkout page (and leave the sign out confirmation dialog open!)

The current behavior is weird because when a user signs out, they are considered a brand new user, with a new basket, with no items in their basket. The user should not remain on the checkout page if they have an empty basket so this PR adds a redirect to navigate the user to the login page after signing out.

Types of Changes

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Documentation update
  • Breaking change (could cause existing functionality to not work as expected)
  • Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

  • Removing a public function or component or prop
  • Adding a required argument to a function
  • Changing the data type of a function parameter or return value
  • Adding a new peer dependency to package.json

Changes

  • Add a redirect to login page after user signs out from checkout page
  • Remove extra basket creation. Not quite sure why it was there since we create a new basket for the now-guest user elsewhere.

How to Test-Drive This PR

  • Start the retail react app
  • Log in
  • Add an item to your cart
  • Go to the checkout page
  • Click sign out

Expected results: You are signed out and redirected to the login page (the same behavior seen if you log out via the header or menu)

Checklists

General

  • Changes are covered by test cases
  • CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

  • There are no changes to UI

or...

Localization

  • Changes include a UI text update in the Retail React App (which requires translation)

@vcua-mobify vcua-mobify requested a review from a team as a code owner May 4, 2023 22:10
@alexvuong
Copy link
Collaborator

alexvuong commented May 4, 2023

Does it make sense to redirect users to login page while they are checking out an item? I don't think we should redirect users to login page, it breaks the checkout flow, the user will have to go back to checkout to purchase the item as guest or re-login.

@vcua-mobify
Copy link
Contributor Author

@alexvuong I think in this case it makes sense. The redirect to login page only occurs if the user signs out, which also has the side effect of giving the user a brand new empty basket (so there's nothing for them to checkout in the first place)

@alexvuong
Copy link
Collaborator

@vcua-mobify, hmm from UX perspective, I'd see that could be a bad experience for shoppers, but I can understand if that is how the API behaves.

@vcua-mobify
Copy link
Contributor Author

@alexvuong The basket being reset when a user transitions from logged in -> guest is expected behavior I believe. The alternative would be to do a cart merge from a registered user to a guest user, which seems bizarre and potentially a security issue (if the user logs out, the now-guest user should not see what was in the logged in user's cart).

@bfeister
Copy link
Collaborator

bfeister commented May 5, 2023

@vcua-mobify can we get a vid / GIF screenshot of the before / after as a way of seeing the change in action?

@vcua-mobify
Copy link
Contributor Author

@vcua-mobify vcua-mobify requested a review from kevinxh May 5, 2023 17:31
@kevinxh
Copy link
Collaborator

kevinxh commented May 5, 2023

curious, can you remind me what's the difference between useHistory and useNavigate again? Seems useNavigate is working but I'd love to understand why.

@bfeister
Copy link
Collaborator

bfeister commented May 5, 2023

UX question: do we want the redirect to just go to / (home)?

@alexvuong
Copy link
Collaborator

curious, can you remind me what's the difference between useHistory and useNavigate again? Seems useNavigate is working but I'd love to understand why.

useNavigation take the multi-site into the account, it will re-build the url with site and locale for the given url, while useHistory does not

@vcua-mobify
Copy link
Contributor Author

@bfeister I opted to route to the login page for consistency because that is the page we route to when signing out via the header or menu. However, if we decide the home page is better, I can make that change as well

@vcua-mobify vcua-mobify added this pull request to the merge queue May 8, 2023
Merged via the queue into develop with commit 0882a53 May 8, 2023
vcua-mobify added a commit that referenced this pull request May 11, 2023
* Update `develop` with `release-v2.7.0` (#1033)

* Starting release process for 2.7.0

* Update Create MRT credentials file (#1025)

* Release 2.7: fix order of hooks (#1027)

* Return early only after all of the hooks are called

* Bumper version

---------

Co-authored-by: Ben Chypak <bchypak@salesforce.com>

* Quick fix for einstein data (#1028)

* Quick fix for einstein data

* Bump Version

* Re-lock package-lock files with npm 8

* Update package-lock.json

* Update einstein.js

* Regenerate lock files (#1030)

* Regenerate lock files

* Bump version to 2.7.0-alpha.3

* Bump to 2.7.0 (#1032)

* Begin development on 2.8.0

---------

Co-authored-by: Adam Raya <adamraya@users.noreply.github.com>
Co-authored-by: Vincent Marta <vmarta@salesforce.com>

* Move the MRT reference app to the SDKs, so that we can verify eg. Node support (#966)

* BUG: Changed type of the phone number field to bring up numberic keyboard on mobile devices - W-9871940 (#1016)

Co-authored-by: Ben Chypak <bchypak@mobify.com>

* Update Retail React App Page Designer integration README (#1041)

Co-authored-by: Richard Sexton <rsexton404@users.noreply.github.com>

* Implement `updateCustomerPassword` as no-op. (#1031)

* Allow query hook parameters to be `null`. (#1046)

* Remove unused util.

* Allow query hook parameters to be `null`.

* Fix addresses not having preferred address first. (#1051)

* Fix addresses not having preferred address first.

* Include all addresses, not just preferred address twice.

* Correctly include preferred address.

* Make `mergeBasket` Conditional More Robust (#1048)

* Update merge logic

* Update CHANGELOG.md

* Lint

* PR feedback

* Rename isNewlyRegisters to isNew for simplicity

* Lint

* [commerce-sdk-react] Decode pre-fetched token and save auth data in storage (#1052)

* add test

* decode jwt data

* lint

* Update packages/commerce-sdk-react/src/auth/index.ts

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* rename parseSlasJWT

* Update packages/commerce-sdk-react/src/auth/index.test.ts

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* convert all .thens to await

* make fake token in tests more clear

* lint

---------

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* Prevent modal to open when it fails to add an item to cart (#1053)

* prevent modal to open when it fails to add an item to cart

* Update comment

---------

Co-authored-by: Alex Vuong <alex.vuong@salesforce.com>

* Fix `getConfig` referencing config from incorrect location (#1049)

* Initial Commit

* Update CHANGELOG.md

* Revert some testing code

* Get test coverage back up

* Test build directory folder before proceeding.

* fix(template-retail-react-app): product-list refinements  (#957)

* fix(template-retail-react-app): product-list refinements

+ Ensure that the `selectedFilters` provided to the `Refinements` value components is always an array. And update said value components (checkbox, color, radio & size) to handle always receiving an array.
+ Apply some loose equality checks, catering for cases where a refinement URL param is parsed as a number but the refinement `.value` is a stringified number.
+ Fix bug where non-multiple filters could not be unchecked by selecting themselves (e.g. clicking an already checked checkbox).
+ Fix bug where a refinement URL param is parsed as a number, but was handled as a string (with `.split()`).
+ Fix bug where radio refinements would still appear as checked after clearing the value via `SelectedRefinements`.
+ Deprecate unused proptypes in `SizeRefinements`

* feat(retail-react-app): update `CheckboxRefinements`

+ Adjust the `onChange` logic so that multiple checkbox refinements can be selected

---------

Co-authored-by: Ben Chypak <bchypak@mobify.com>

* update docs for shopper-experience scope (#1059)

* add docs for experience scope

* Add `merge_group` event to trigger GA builds

---------

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>
Co-authored-by: Adam Raya Navarro <arayanavarro@salesforce.com>

* Update lockfiles to reflect current version. (#1071)

* [commerce-sdk-react] Implement remaining Shopper Baskets cache logic (#1070)

* Refactor Shopper Basket cache following new pattern

* Fix types

* Update packages/commerce-sdk-react/src/hooks/ShopperBaskets/cache.ts

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* PR Feedback

* Clean up unused utils and types after refactor

* Add missing response basketId to queryKey

* Implement cache for the remaining mutations

* Tests WIP

* PR Feedback & Use query key path in `deleteBasket` cache

* Add tests for mutations returning void response

* PR Feedback

* Remove unused `and` hooks util

* Revert "Remove unused `and` hooks util"

This reverts commit c0a364a.

---------

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* [commerce-sdk-react] Fix Shopper Baskets Test case (#1082)

* Fix Shopper Basket empty response test cases

* lint

* feat(pwa-kit-dev): minor performance improvements and added comments (#974)

* feat(pwa-kit-dev): minor performance improvements and added comments

* docs(pwa-kit-dev): clean up comments

* refactor(pwa-kit-dev): update condition from PR feedback

---------

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* Update dependencies. (#1079)

* Remove internal packages to bypass lerna nonsense.

Include output.json to make restoring deps easier.

* Disable build scripts to make changing deps easier.

* Update root deps.

* Fix typescript issue.

* Create restore script to restore internal deps/scripts.

* Update commerce-sdk-react deps.

* Update test-commerce-sdk-react deps.

* Update template-typescript-minimal deps

* Improve restore script.

* Fix trailing comma.

* Update template-retail-react-app deps

* npm prune everything

* Update pwa-kit-runtime deps

* Update pwa-kit-react-sdk deps

* Update pwa-kit-create-app deps

* Update pwa-kit-dev deps (except eslint)

* Update pwa-kit-dev eslint deps

* Update internal-lib-build deps (except eslint)

* Update pwa-kit eslint deps

* Restore internal deps.

* Restore build scripts.

* Remove temporary helper files.

* Bump ua-parser-js to avoid vulnerable version.

* Anchor cross-env common dep to version used by internal-lib-build.

* Re-enable eslint.

* Implement Cache Logic for Shopper APIs (Contexts/Customers/Login/Orders) (#1073)

* Initial commit

* Update packages/commerce-sdk-react/src/hooks/useAuthHelper.ts

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* Update packages/commerce-sdk-react/src/hooks/ShopperOrders/cache.ts

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* Update packages/commerce-sdk-react/src/hooks/ShopperOrders/cache.ts

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* Added root to all query keys, use remove over clear

* Remove previous impemented "clear" from utils

* Initial tests for shoppercontexts

* Update ShopperLogin tests

* Fix order tests

* Update packages/commerce-sdk-react/src/hooks/ShopperContexts/cache.ts

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* Update cache.ts

* Lint!

* Update Json.tsx

* Lint!

* Testing race condition in tests

* Re-add tests in other order.

* Update CHANGELOG.md

* Add todo to complete context cache work

* Update packages/commerce-sdk-react/src/hooks/ShopperBaskets/mutation.test.ts

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* Update packages/commerce-sdk-react/src/components/ShopperExperience/Page/index.tsx

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* Update useAuthHelper.ts

* Update packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts

Co-authored-by: Adam Raya <adamraya@users.noreply.github.com>

---------

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>
Co-authored-by: Adam Raya <adamraya@users.noreply.github.com>

* remove site alias and locale from location.state.directedFrom path (#1065)

* remove site alias and locale from location.state.directedFrom path

* moving call to removeSiteLocaleFromPath into use-navigation hook

* fixing failing test, added tests for removeSiteLocaleFromPath

* per code review, skipping failed test instead of using mocking

* Fix Page Designer ImageWithText Link component (#1092)

* Fix PD ImageWithText Link component by using Chakra UI Link

* Use isAbsoluteURL to use react-router Link or Chakra Link component

* PR Feedback

* Clean up

* Update packages/template-retail-react-app/app/page-designer/assets/image-with-text/index.jsx

Co-authored-by: Ben Chypak <bchypak@mobify.com>

* Remove temporal page-viewer page to facilitate review

---------

Co-authored-by: Ben Chypak <bchypak@mobify.com>

* split ssr build on local (#1155)

* add suffix to ssr build files (#1157)

* Added session bridge call to login for phased launch (#1159)

* Added session bridge call to login for phased launch

* Fix code smell for session-bridge in hybrid

* Fix multi-value query params being lost (#1150)

* Fix multi-value query params being lost

* Update CHANGELOG.md

* Snyk dependency updates (#1169)

* Dependency updates

* Update runtime package lock

* Bump cosmiconfig version to latest

* [Hybrid] PWA Kit should have a mechanism for replacing the access token when a SFRA login state is changed (#1171)

* Implement mechanism to store refresh token copy and compare with sfra

* Update tests and mocks for util function to check SFRA login state

* Fix linting issues

* FIx param types for util functionn

* Rename old isTokenValid to isTokenExpired

* Remove expiry for refresh_token in localstorage

* Update packages/template-retail-react-app/app/commerce-api/utils.js

Co-authored-by: Kevin He <kevin.he@salesforce.com>

* fix test

* Fix linting on use-auth-modal.test.js

* Update hasSFRAStateChanged logic to compare keys and values

* Fix linting

---------

Co-authored-by: Kevin He <kevin.he@salesforce.com>

* Add a redirect to login page after user signs out from checkout page (#1172)

* Add a redirect to login page after user signs out from checkout page

* Update CHANGELOG.md

* Remove history since navigate handles similarly

* Bump version number to 2.7.1-alpha.0

* Update changelogs

* #1174 Replace invalid value for wrap property (#1179)

* Update changelogs

* Version bump to 2.7.1-preview.0

* Revert "Version bump to 2.7.1-preview.0"

This reverts commit 985a7e0.

* Update CHANGELOG.md

* Rebuild lock files and fix ShopperLogin mutation test

* Revert "Rebuild lock files and fix ShopperLogin mutation test"

This reverts commit d9cfe50.

* Add additional properties to ShopperLogin test types (#1185)

* [V2] Re-generate lock files and fix hook lib tests (#1186)

* re-generate lock files and fix test

* Update packages/commerce-sdk-react/src/hooks/ShopperBaskets/index.test.ts

* Rebuild lockfiles using node 14 npm 8

* Revert "Rebuild lockfiles using node 14 npm 8"

This reverts commit 3d5c0cb.

* Use pwa-kit-dev for lint and format

* Revert "Use pwa-kit-dev for lint and format"

This reverts commit f46d83e.

* Add typescript to internal-lib-build and rebuild lock files

---------

Co-authored-by: vcua-mobify <47404250+vcua-mobify@users.noreply.github.com>
Co-authored-by: vcua-mobify <vcua@salesforce.com>

* [V2] Internal lib build typescript dev dependency (#1194)

* Move typescript to dev and peer dependency

* Update package lock file

* Lockfile updates

---------

Co-authored-by: Ben Chypak <bchypak@mobify.com>
Co-authored-by: Adam Raya <adamraya@users.noreply.github.com>
Co-authored-by: Vincent Marta <vmarta@salesforce.com>
Co-authored-by: Oliver Brook <o.brook@salesforce.com>
Co-authored-by: echessman <37908171+echessman@users.noreply.github.com>
Co-authored-by: John Boxall <jboxall@salesforce.com>
Co-authored-by: Richard Sexton <rsexton404@users.noreply.github.com>
Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>
Co-authored-by: Kevin He <kevin.he@salesforce.com>
Co-authored-by: Alex Vuong <alex.vuong@salesforce.com>
Co-authored-by: Brad Adams <hi@breadadams.com>
Co-authored-by: Charles Lavery <clavery@salesforce.com>
Co-authored-by: Adam Raya Navarro <arayanavarro@salesforce.com>
Co-authored-by: ecRobertEngel <56021158+ecRobertEngel@users.noreply.github.com>
Co-authored-by: Sandra Golden <sgolden@salesforce.com>
Co-authored-by: Jainam Sheth <99490559+shethj@users.noreply.github.com>
Co-authored-by: mdenchev-aiopsgroup <62266016+mdenchev-aiopsgroup@users.noreply.github.com>
bfeister added a commit that referenced this pull request May 23, 2023
* develop: (34 commits)
  [Phased Launch] Call Session bridge after login (#1220)
  [v3] Add multi-site suffix to auth token keys (#1208)
  Footer: fix hydration error with the locale dropdown (#1210)
  remove unused peerDependency @chakra-ui/system (#1212)
  @W-12582733: Expose env vars endpoint for E2E smoke tests (#1207)
  Upgrade to React 18 (#1166)
  Remove v3 branch name related actions (#1206)
  add test to reach test coverage threshold
  remove commerce-api folder
  Feature: Extract einstein RefArch-specific values to constant (#1200)
  Bump version number to 2.7.1 and update changelogs (#1197)
  store usid in cookies (#1193)
  make sure static files are copied on dev environment (#1196)
  [WIP] PWA Kit 2.7.1 release (#1181)
  [V2] Internal lib build typescript dev dependency (#1194)
  [V2] Re-generate lock files and fix hook lib tests (#1186)
  Add additional properties to ShopperLogin test types (#1185)
  Revert 2.7.0 branch to prep for 2.7.1 changes (#1182)
  #1174 Replace invalid value for wrap property (#1179)
  Add a redirect to login page after user signs out from checkout page (#1172)
  ...

# Conflicts:
#	package-lock.json
#	packages/commerce-sdk-react/CHANGELOG.md
#	packages/commerce-sdk-react/package-lock.json
#	packages/internal-lib-build/package-lock.json
#	packages/pwa-kit-create-app/package-lock.json
#	packages/pwa-kit-dev/package-lock.json
#	packages/pwa-kit-dev/package.json
#	packages/pwa-kit-react-sdk/package-lock.json
#	packages/pwa-kit-runtime/package-lock.json
#	packages/template-mrt-reference-app/package-lock.json
#	packages/template-retail-react-app/app/components/confirmation-modal/index.test.js
#	packages/template-retail-react-app/app/components/footer/index.jsx
#	packages/template-retail-react-app/app/components/header/index.jsx
#	packages/template-retail-react-app/app/components/list-menu/index.test.js
#	packages/template-retail-react-app/app/components/product-scroller/index.test.js
#	packages/template-retail-react-app/app/components/product-view-modal/index.test.js
#	packages/template-retail-react-app/app/components/search/index.test.js
#	packages/template-retail-react-app/app/hoc/with-registration/index.test.js
#	packages/template-retail-react-app/app/hooks/use-add-to-cart-modal.js
#	packages/template-retail-react-app/app/hooks/use-auth-modal.test.js
#	packages/template-retail-react-app/app/hooks/use-currency.test.js
#	packages/template-retail-react-app/app/hooks/use-multi-site.test.js
#	packages/template-retail-react-app/app/hooks/use-navigation.test.js
#	packages/template-retail-react-app/app/pages/account/addresses.test.js
#	packages/template-retail-react-app/app/pages/account/index.jsx
#	packages/template-retail-react-app/app/pages/account/wishlist/partials/wishlist-primary-action.test.js
#	packages/template-retail-react-app/app/pages/cart/index.test.js
#	packages/template-retail-react-app/app/pages/cart/partials/cart-secondary-button-group.test.js
#	packages/template-retail-react-app/app/pages/checkout/index.test.js
#	packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx
#	packages/template-retail-react-app/app/pages/checkout/partials/contact-info.test.js
#	packages/template-retail-react-app/app/pages/home/index.test.js
#	packages/template-retail-react-app/app/pages/product-list/partials/empty-results.jsx
#	packages/template-retail-react-app/app/pages/product-list/partials/page-header.jsx
#	packages/template-retail-react-app/app/pages/registration/index.test.jsx
#	packages/template-retail-react-app/app/utils/site-utils.js
#	packages/template-retail-react-app/package-lock.json
#	packages/template-typescript-minimal/package-lock.json
#	packages/test-commerce-sdk-react/package-lock.json
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[BUG] User stuck on confirmation modal when signing out on checkout
4 participants