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.

Sign up for GitHub

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

Jump to bottom

Use Customer Account API in templates/skeleton & template/demo-store #1576

Merged
merged 22 commits into from
Jan 18, 2024
Merged

Use Customer Account API in templates/skeleton & template/demo-store #1576

merged 22 commits into from
Jan 18, 2024

Conversation

michenly
Copy link
Contributor

@michenly michenly commented Dec 14, 2023 •
edited

WHY are these changes introduced?

The Customer Account API will be officially release in Jan of 2024. This PR aim to replaced all current storefront API customer usage with the new API.

WHAT is this pull request doing?

  • Add app/graphql/customer folder to contain all Customer Account API GraphQL query & mutation. This is needed because currently you cannot use the #graphql comment annotation in type generation with multiple schema in one file.

  • Change codegen to exclude graphql type generation for app/graphql folder. This folder will be dedicated for any graphql usage that is not Storefront API.

  • 🔥 remove account activate, recover, register and reset. Since these are not supported in the new CA API with new customer flow.

  • Create customerClient in remix context like the example and also set up login/logout flow.

Pages to update in templates/skeleton

  • /account fall back wild card
  • /account index
  • /account/orders
  • /account/order/$id
  • /account/profile
  • /account/addresses
  • root.tsx
  • cart.tsx (no change, but add run customerAccessToken into customerAccount utility to keep it uniform in case for future change)
  • Add error when createCustomerClient is use without all the variables. ie. when using mock.shop

Other templates & examples with usage of customerAccessToken:

  • templates/demo-store
  • examples/multipass/ (keeping it as it. new project coming for this)

HOW to test your changes?

Follow customer-api example for ngrok setup and interact with any /account route.

Ensure the customer information will be passed to cart when a login customer try to view cart.

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

@michenly michenly force-pushed the mc-customer-account-templates-update branch from 589937e to 1ea00be Compare December 14, 2023 21:59
@michenly michenly self-assigned this Dec 14, 2023
@michenly michenly force-pushed the mc-customer-account-templates-update branch from 1ea00be to a345d38 Compare December 14, 2023 22:12
@michenly michenly force-pushed the mc-customer-account-templates-update branch from a345d38 to 59045a0 Compare December 14, 2023 22:19
@michenly michenly force-pushed the mc-customer-account-templates-update branch from 59045a0 to edb3e3b Compare December 14, 2023 22:23
frandiox
frandiox reviewed Dec 15, 2023
View reviewed changes
Copy link
Contributor

@frandiox frandiox left a comment •
edited

Choose a reason for hiding this comment

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

Great job! I've left a few comments with issues related to GraphQL / Codegen 🙏 (especially #1576 (comment) is important).

Also, I noticed the generated types for CAAPI weren't prettified... I've fixed that in #1578 👍

packages/cli/src/lib/codegen.ts Outdated Show resolved Hide resolved
packages/cli/src/lib/codegen.ts Outdated Show resolved Hide resolved
packages/hydrogen-codegen/src/pluck.ts Outdated Show resolved Hide resolved
templates/skeleton/app/graphql/customer/CustomerDetailsQuery.ts Outdated Show resolved Hide resolved
templates/skeleton/app/graphql/customer/CustomerOrdersQuery.ts Outdated Show resolved Hide resolved
templates/skeleton/server.ts Outdated Show resolved Hide resolved
@michenly michenly force-pushed the mc-customer-account-templates-update branch 2 times, most recently from 255e4e2 to 3745ee2 Compare December 16, 2023 03:03
@michenly michenly force-pushed the mc-customer-account-templates-update branch 2 times, most recently from 7eceba3 to 8dc58a0 Compare December 18, 2023 22:09
@michenly michenly force-pushed the mc-customer-account-templates-update branch 2 times, most recently from a5bda1d to f611d85 Compare December 19, 2023 15:45
michenly and others added 5 commits January 17, 2024 16:35
@michenly @blittle
Update packages/hydrogen/src/customer/customer.ts
2d65a51 
Co-authored-by: Bret Little <bret.little@shopify.com>
@michenly @blittle
Update packages/hydrogen/src/customer/customer.ts
be2fdbe 
Co-authored-by: Bret Little <bret.little@shopify.com>
@michenly @blittle
demo-store customer account api update (#1647)
843360b 
* ✨ move demo-store to caapi

* update login button

* login flow + account page

* customer profile edit

* address edit

* cart edit

* order id page

* fix eslint error, strange my VS code is giving different suggestions

* Update packages/hydrogen/src/customer/customer.ts

Co-authored-by: Bret Little <bret.little@shopify.com>

* Update packages/hydrogen/src/customer/customer.ts

Co-authored-by: Bret Little <bret.little@shopify.com>

* remove redirectPath from authorize

---------

Co-authored-by: Bret Little <bret.little@shopify.com>
@michenly
implement redirectPath for skeleton template
a8848e1
@michenly
use /account/authorize as the default authUrl
444e92e
@michenly michenly force-pushed the mc-customer-account-templates-update branch from 5da532b to 64514f7 Compare January 17, 2024 21:35
@michenly michenly force-pushed the mc-customer-account-templates-update branch from 64514f7 to c93bd39 Compare January 17, 2024 21:42
@michenly michenly force-pushed the mc-customer-account-templates-update branch from c93bd39 to e22157b Compare January 17, 2024 21:43
blittle
blittle approved these changes Jan 18, 2024
View reviewed changes
Copy link
Contributor

@blittle blittle left a comment

Choose a reason for hiding this comment

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

Looking good!

@michenly michenly force-pushed the mc-customer-account-templates-update branch 2 times, most recently from 0e7edf5 to 84b99be Compare January 18, 2024 22:52
@michenly michenly force-pushed the mc-customer-account-templates-update branch from 84b99be to 41cd7e0 Compare January 18, 2024 22:55
@michenly michenly force-pushed the mc-customer-account-templates-update branch from 41cd7e0 to 3f085ba Compare January 18, 2024 23:24
@michenly michenly merged commit 1820241 into main Jan 18, 2024
10 checks passed
@michenly michenly deleted the mc-customer-account-templates-update branch January 18, 2024 23:50
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Jan 18, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gfscott gfscott gfscott left review comments

@frandiox frandiox frandiox left review comments

@wizardlyhel wizardlyhel wizardlyhel left review comments

@juanpprieto juanpprieto juanpprieto left review comments

@blittle blittle blittle approved these changes

Assignees

@michenly michenly

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
7 participants
@michenly @benjaminsehl @frandiox @blittle @gfscott @wizardlyhel @juanpprieto