hydrogen icon indicating copy to clipboard operation
hydrogen copied to clipboard

Adding an example for B2B

Open dustinfirman opened this issue 1 year ago • 2 comments

Adding an example for B2B, along with an update to the customer account client to support a storefront customer access token via the storefrontCustomerAccessTokenCreate mutation.

WHY are these changes introduced?

Resolves #1677

Hydrogen utilities method for b2b merchant to use.

here is the flow for a typical B2B Hydrogen store

  1. Land on the site and Login
  2. Take the customerAccountAccessToken, and exchange it for storefrontCustomerAccountAccessToken immediately after authorize
  3. At this point if the customer have access to 1 location, set that to update BuyerIdentityUpdate. Or if the customer have multiple locations, FORCE show (dont show anything else) a location selector and set it to cookie + update BuyerIdentityUpdate
  4. Offer a location selector in the header menu to make changes to the location in the future.
  5. Ensure Cart is create is created with buyer identity
  6. At this point use the buyer in session to call SF API query with buyer in context

WHAT is this pull request doing?

Encapsulating common tasks into hydrogen utilities

  1. In storefront client, if b2b option is true, a query variable will get automatically created by using buyer = customerAccount.UNSTABLE_getBuyer()
  2. In customerAccount, at the end of authorize(), do a token exchange and saved to session.
  3. In customerAccount, expose UNSTABLE_setBuyer and UNSTABLE_getBuyer to get and set Buyer on the session. the getter will do a login + expire check, if customerAccessToken is expired and need refresh, the storefrontCustomerAccessToken will automatically follow as well
  4. in createCartHandler, when we create the cart, the mutation will be run with buyerIdentity coming from customerAccount.UNSTABLE_getBuyer() directly

HOW to test your changes?

Post-merge steps

Checklist

  • [ ] I've read the Contributing Guidelines
  • [ ] I've considered possible cross-platform impacts (Mac, Linux, Windows)
  • [ ] I've added a changeset if this PR contains user-facing or noteworthy changes
  • [ ] I've added tests to cover my changes
  • [ ] I've added or updated the documentation

dustinfirman avatar Mar 21 '24 21:03 dustinfirman

Oxygen deployed a preview of your df/b2b-example branch. Details:

Storefront Status Preview link Deployment details Last update (UTC)
subscriptions ✅ Successful (Logs) Preview deployment Inspect deployment May 7, 2024 7:48 PM
custom-cart-method ✅ Successful (Logs) Preview deployment Inspect deployment May 7, 2024 7:48 PM
third-party-queries-caching ✅ Successful (Logs) Preview deployment Inspect deployment May 7, 2024 7:48 PM
vite ✅ Successful (Logs) Preview deployment Inspect deployment May 7, 2024 7:48 PM
optimistic-cart-ui ✅ Successful (Logs) Preview deployment Inspect deployment May 7, 2024 7:48 PM
Skeleton (skeleton.hydrogen.shop) ✅ Successful (Logs) Preview deployment Inspect deployment May 7, 2024 7:48 PM

Learn more about Hydrogen's GitHub integration.

shopify[bot] avatar Mar 21 '24 21:03 shopify[bot]

We detected some changes in packages/*/package.json or packages/*/src, and there are no updates in the .changeset. If the changes are user-facing and should cause a version bump, run npm run changeset add to track your changes and include them in the next release CHANGELOG. If you are making simple updates to examples or documentation, you do not need to add a changeset.

github-actions[bot] avatar Apr 02 '24 20:04 github-actions[bot]

Got error in logged out state on the product page. Looks like just need to avoid destructuring when buyer doesn't exists.

Screenshot 2024-05-03 at 4 06 33 PM

wizardlyhel avatar May 03 '24 23:05 wizardlyhel

I also did some clean up on the createCartHandler updates. I push the customer account changes into the individual mutation queries themselves to handle adding the customerAccountToken to buyerIdentity

wizardlyhel avatar May 03 '24 23:05 wizardlyhel