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

Adding an example for B2B #1886

Merged
merged 36 commits into from May 7, 2024
Merged

Adding an example for B2B #1886

merged 36 commits into from May 7, 2024

Conversation

dustinfirman
Copy link
Contributor

@dustinfirman dustinfirman commented Mar 21, 2024

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

Copy link
Contributor

shopify bot commented Mar 21, 2024

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.

@dustinfirman dustinfirman marked this pull request as ready for review March 28, 2024 22:06
new Date(
new Date().getTime() + (expires_in! - 120) * 1000,
).getTime() + '',
new Date(new Date().getTime() + (expires_in - 120) * 1000).getTime() +
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed the ! in this line.

This comment has been minimized.

examples/b2b/README.md Outdated Show resolved Hide resolved

// if the url is internal, we strip the domain
const url =
item.url.includes('myshopify.com') ||

Check failure

Code scanning / CodeQL

Incomplete URL substring sanitization

'[myshopify.com](1)' can be anywhere in the URL, and arbitrary hosts may come before or after it.
examples/b2b/app/components/B2BLocationProvider.tsx Outdated Show resolved Hide resolved
@wizardlyhel
Copy link
Contributor

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
Copy link
Contributor

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

dustinfirman and others added 3 commits May 7, 2024 10:54
working queries

contextualized queries

quantity and volume prices

added header selector

login redirect

handle single location buyers

convert location selector to form

convert location dropdown to form

update input type
move token exchange and add get set buyer

move set buyer into customerAccount

remove buyer expire

remove locations and use cart instead

automatically get buyeridentity from customerAccount
Copy link
Contributor

@michenly michenly left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏 👏 👏

Overall really well done and it looks great and works well!

I made a bunch of suggestions on the PR but the really important ones that's must fix are:

  • missing maximum rule from Cart.tsx
  • 🐛 quantity increment rule in Cart.tsx
  • 🐛 updating Cart after logout
  • do not cache storefront query with customer account token
  • add a changeset for @shopify/hydrogen unstable features

examples/b2b/README.md Outdated Show resolved Hide resolved
examples/b2b/app/components/Cart.tsx Outdated Show resolved Hide resolved
examples/b2b/app/components/Cart.tsx Outdated Show resolved Hide resolved
examples/b2b/README.md Outdated Show resolved Hide resolved
examples/b2b/app/components/Header.tsx Show resolved Hide resolved
examples/b2b/README.md Outdated Show resolved Hide resolved
examples/b2b/app/routes/products.$handle.tsx Outdated Show resolved Hide resolved
examples/b2b/app/routes/products.$handle.tsx Outdated Show resolved Hide resolved
examples/b2b/README.md Outdated Show resolved Hide resolved
examples/b2b/README.md Show resolved Hide resolved
@dustinfirman dustinfirman dismissed wizardlyhel’s stale review May 7, 2024 20:25

Addressed the comments and got approval from @michenly

@michenly michenly merged commit ae262b6 into main May 7, 2024
13 checks passed
@michenly michenly deleted the df/b2b-example branch May 7, 2024 20:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add B2B examples to hydrogen
4 participants