[2025-07] Add cartGiftCardCodesRemove mutation support #3128
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
Contributor
|
Oxygen deployed a preview of your
Learn more about Hydrogen's GitHub integration. |
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR adds support for the new cartGiftCardCodesRemove mutation introduced in Storefront API 2025-07, addressing the inability to remove individual gift cards when multiple are applied to a cart.
- Added
cartGiftCardCodesRemoveDefaultmutation handler and corresponding cart method - Added
GiftCardCodesRemoveaction to CartForm for form-based gift card removal - Updated cart fragments to include gift card
idfield required for removal operations
Reviewed Changes
Copilot reviewed 13 out of 18 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| templates/skeleton/app/routes/cart.tsx | Added handler for GiftCardCodesRemove action |
| templates/skeleton/app/lib/fragments.ts | Added id field to appliedGiftCards fragment |
| templates/skeleton/app/components/CartSummary.tsx | Updated UI with individual remove buttons per gift card |
| packages/hydrogen/src/index.ts | Added export for cartGiftCardCodesRemoveDefault |
| packages/hydrogen/src/cart/queries/cartGiftCardCodesRemoveDefault.ts | New mutation handler implementation |
| packages/hydrogen/src/cart/queries/cartGiftCardCodesRemoveDefault.test.ts | Added test coverage for new mutation |
| packages/hydrogen/src/cart/queries/cartGiftCardCodesRemoveDefault.example.ts | TypeScript usage example |
| packages/hydrogen/src/cart/queries/cartGiftCardCodesRemoveDefault.example.js | JavaScript usage example |
| packages/hydrogen/src/cart/queries/cartGiftCardCodesRemoveDefault.doc.ts | Documentation configuration |
| packages/hydrogen/src/cart/queries/cartGetDefault.ts | Added appliedGiftCards to default cart fragment |
| packages/hydrogen/src/cart/createCartHandler.ts | Added removeGiftCardCodes method to HydrogenCart |
| packages/hydrogen/src/cart/CartForm.tsx | Added GiftCardCodesRemove action type and props |
| .changeset/gift-card-removal.md | Added changeset documentation |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
juanpprieto
force-pushed
the
feat-cartGiftCardCodesRemove
branch
from
7bf52b5 to
8c4eed6
Compare
kdaviduik
force-pushed
the
2025-07-sfapi-caapi-update
branch
from
2912d7e to
ac77705
Compare
kdaviduik
force-pushed
the
feat-cartGiftCardCodesRemove
branch
from
4d8e1be to
d4eb3d7
Compare
Contributor
Note
|
…3091) * fix: Complete React Router 7 migration for Express example The Express example was partially migrated to React Router 7 but missing critical configuration and dependencies, causing CI failures. Changes: - Add react-router.config.ts with proper preset and app directory configuration - Fix vite.config.ts to call reactRouter() without arguments (RR7 API change) - Add @react-router/dev as devDependency for TypeScript types - Update entry.server.tsx to remove unnecessary @remix-run/web-fetch import (Node 20+ provides native Response globally) - Fix environment variable loading using getEnv() helper - Add .gitignore for React Router generated type files - Update tsconfig.json to exclude generated directories The example now builds successfully with React Router 7's framework mode. * fix: Fix CLI build checks and TypeScript configuration Multiple CLI-specific issues were causing CI failures after recent refactoring. Changes: - Fix build-check.mjs to expect .jsx extensions (tsup outputs .tsx→.jsx) - Exclude assets/routes from TypeScript checking (template files for user projects) - Align ast-grep to version 0.33.0 to match @shopify/cli's bundled version - Fix isHydrogenMonorepo() detection to work in both dev and npm package contexts - Add 'as const' assertions for ast-grep 0.33.0 API compatibility Background: - Template files were moved to assets/routes in May 2024 and inadvertently included in TypeScript scope - ast-grep 0.34.1 conflicted with @shopify/cli's bundled 0.33.0 * fix: Fix CI workflow and monorepo build orchestration The CI workflow and Turbo configuration had multiple issues causing intermittent build failures, particularly the "No lockfile found" error. Changes: - Add SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK=false to typecheck step in CI (was only on build:all, but typecheck also triggers builds via Turbo) - Add SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK to turbo.json globalEnv - Add explicit build dependencies for all examples in turbo.json - Remove docs-preview from workspaces to prevent React Router version conflicts - Regenerate package-lock.json for dependency resolution The root cause was that the typecheck step depends on build tasks (per turbo.json) but wasn't receiving the lockfile check flag, causing skeleton builds to fail. This has been a source of CI instability since the monorepo migration.
Regenerated all cookbook recipes to update patch file hashes after recent changes to the skeleton template. This ensures the cookbook validation passes in CI by keeping the patches in sync with the current state of the skeleton template. The regeneration updates: - All patch files with new content hashes - Recipe YAML files with updated patch references - README and prompt files with current examples This fixes the 'Validate Recipes' CI job failure.
* Fix React Context errors in Vite dev server This fixes "Cannot read properties of null (reading 'useContext')" errors that occur when React Context hooks are used in development mode. Root Cause: Vite's module federation can cause multiple React instances to be loaded when @shopify/hydrogen is served as an external module. React Context requires a single React instance to function properly - when multiple instances exist, Context providers from one instance cannot be consumed by hooks from another instance, resulting in null context values. Solution: 1. Added resolve.dedupe for react, react-dom, and @shopify/hydrogen to ensure Vite uses a single instance of these packages 2. Modified optimizeDeps.include to conditionally optimize @shopify/hydrogen: - In production/regular projects: Optimize @shopify/hydrogen to prevent context errors - In monorepo development: Skip optimization to allow live reload of source changes This maintains development workflow in the monorepo while fixing the production build issue. * Fix React Context error during client-side hydration Resolves 'Cannot read properties of null (reading useContext)' error that occurred on first page load when using CSP with nonces. The issue was caused by NonceProvider being present during SSR but missing during client hydration, creating a React Context mismatch. Changes: - Export NonceProvider from @shopify/hydrogen for client-side usage - Add NonceProvider wrapper to skeleton's entry.client.tsx - Simplify Vite config to improve React Context stability
* Update Vitest from v1.0.4 to v3.2.4 across all packages - Upgrade vitest to ^3.2.4 in all 5 packages that use it - Upgrade @vitest/coverage-v8 to ^3.2.4 to match vitest version - Add vitest as devDependency to create-hydrogen package (was missing) - Add explicit coverage provider configuration (required in v3+) - Set provider: 'v8' in cli and hydrogen-react vitest configs Breaking change: Vitest v2+ requires explicit coverage provider config * Fix Vitest v3 Mock type breaking changes In Vitest v3, vi.fn() returns Mock<() => unknown> instead of Mock<any[], any>, requiring explicit type assertions or type parameters for mocks with specific return types. Changes: - Add type assertion for fetchWithServerCache mock in storefront.test.ts - Simplify Promise creation in session mocks (Promise.resolve instead of new Promise) - Fix Mock type usage in Image.test.tsx for console.warn assertions - Add vitest/globals to tsconfig for packages using global test functions - Keep jest types alongside vitest types for @testing-library/jest-dom compatibility The stricter typing in v3 catches more potential issues at compile time but requires updating existing mocks that relied on v1's permissive typing. * Fix formatting
…ustomer-account-push flag (#3123) * Fix MiniOxygen to support React Router's redirectDocument for external redirects The Miniflare v4 update introduced a breaking change where dispatchFetch automatically follows redirects internally, preventing external OAuth redirects from working properly. React Router's redirectDocument() expects the browser to handle external redirects, but Miniflare was intercepting and following them within the worker runtime. This fix adds {redirect: 'manual'} to all dispatchFetch calls in MiniOxygen, which prevents Miniflare from following redirects automatically. This ensures that: - External redirects (like OAuth flows to Shopify's Customer Account API) are passed to the browser as intended - React Router's redirectDocument() works correctly for cross-origin navigation - The X-Remix-Reload-Document header is respected for full document reloads The implementation uses Function.prototype.call to pass both arguments to dispatchFetch while maintaining TypeScript compatibility, as the property accessor doesn't properly expose the second parameter in TypeScript definitions. Also adds .tryhydrogen.dev to Vite's allowedHosts for development testing. References: - cloudflare/workers-sdk#5018 - cloudflare/workers-sdk#5191 * Stabilize customer-account-push flag - Changed from customer-account-push__unstable to customer-account-push - Removed hidden: true to make flag visible in help - Fixed typo: Oauth → OAuth in description - Flag now works via CLI argument or SHOPIFY_HYDROGEN_FLAG_CUSTOMER_ACCOUNT_PUSH env var * Fix MiniOxygen redirect handling for OAuth flows Apply {redirect: 'manual'} to Miniflare's dispatchFetch calls to prevent automatic redirect following. This ensures external redirects (like OAuth) are passed to the browser instead of being followed internally. Changes: - Add redirect: 'manual' parameter to dispatchFetch in both worker and node environments - Fix Headers.getSetCookie() usage for proper Set-Cookie header handling - Add comprehensive tests for redirect behavior in both environments - Stabilize customer-account-push CLI flag (remove __unstable prefix) This fixes OAuth/PKCE authentication flows in React Router 7 where redirectDocument() and external redirects need to be handled by the browser, not the server. * Add changeset for OAuth redirect fixes and stabilized CLI flag * Fix intermittent CI test failures in MiniOxygen tests - Use dynamic port allocation (port: 0) for all test servers to prevent EADDRINUSE errors - Properly handle OS-assigned ports when using port 0 - Add server tracking and cleanup to ensure all servers are properly closed - Fix proxy server test to use dynamic port allocation This resolves race conditions and port conflicts that occur when tests run in parallel in CI environments. * Fix TypeScript errors in MiniOxygen tests - Change MiniOxygenOptions to MiniOxygenPreviewOptions in test files - Add proper type imports for Request, Response, and DispatchFetch - Add explicit types for onRequest callback parameters This resolves TypeScript compilation errors that were failing CI.
- Add new cartGiftCardCodesRemove mutation handler for removing specific gift cards by ID - Integrate removeGiftCardCodes method into cart handler - Add GiftCardCodesRemove action to CartForm - Update cart fragments to include appliedGiftCards.id field - Implement gift card removal UI in skeleton template - Maintain existing additive behavior for adding/updating gift cards - Add tests for new mutation handler
rbshop
force-pushed
the
feat-cartGiftCardCodesRemove
branch
from
e082e3d to
6384e78
Compare
Resolved conflicts:
- Deleted examples/{b2b,custom-cart-method,subscriptions}/app/lib/fragments.ts
(examples moved to cookbook in main)
- Regenerated GraphQL schemas for hydrogen-react package
The id field for appliedGiftCards is preserved in skeleton template
…conflict detection - Fix TypeScript import errors in account_.login.multipass.tsx by using standard React Router types instead of generated route types - Regenerate all multipass recipe patches to work with the gift card removal feature added to cart.tsx - Add comprehensive patch conflict detection to apply.ts and validate.ts that: - Detects .orig and .rej files created during patching - Shows rejected patch content for easier debugging - Provides clear instructions for resolving conflicts - Throws errors early to prevent confusing TypeScript errors - Update enhanced error logging in validate.ts to properly decode Buffer outputs This ensures the multipass recipe validates successfully in CI with the new cartGiftCardCodesRemove feature.
…od and metaobjects - Regenerated all patches for both recipes to work with gift card removal feature - Fixed incorrect shared patch file issue (both recipes had same hash but different content) - Added human-readable descriptions to all recipe.yaml patch entries - Both recipes now validate successfully in CI The root cause was that the git card removal feature (cartGiftCardCodesRemove) changed the cart.tsx structure, causing patch conflicts in fragments.ts for both recipes.
Merged
juanpprieto
added a commit
that referenced
this pull request
Sep 17, 2025
* Update package-lock.json for @shopify/cli dependency update * [2025-07] Fix Monorepo RR7 CI build failures and improve reliability (#3091) * fix: Complete React Router 7 migration for Express example The Express example was partially migrated to React Router 7 but missing critical configuration and dependencies, causing CI failures. Changes: - Add react-router.config.ts with proper preset and app directory configuration - Fix vite.config.ts to call reactRouter() without arguments (RR7 API change) - Add @react-router/dev as devDependency for TypeScript types - Update entry.server.tsx to remove unnecessary @remix-run/web-fetch import (Node 20+ provides native Response globally) - Fix environment variable loading using getEnv() helper - Add .gitignore for React Router generated type files - Update tsconfig.json to exclude generated directories The example now builds successfully with React Router 7's framework mode. * fix: Fix CLI build checks and TypeScript configuration Multiple CLI-specific issues were causing CI failures after recent refactoring. Changes: - Fix build-check.mjs to expect .jsx extensions (tsup outputs .tsx→.jsx) - Exclude assets/routes from TypeScript checking (template files for user projects) - Align ast-grep to version 0.33.0 to match @shopify/cli's bundled version - Fix isHydrogenMonorepo() detection to work in both dev and npm package contexts - Add 'as const' assertions for ast-grep 0.33.0 API compatibility Background: - Template files were moved to assets/routes in May 2024 and inadvertently included in TypeScript scope - ast-grep 0.34.1 conflicted with @shopify/cli's bundled 0.33.0 * fix: Fix CI workflow and monorepo build orchestration The CI workflow and Turbo configuration had multiple issues causing intermittent build failures, particularly the "No lockfile found" error. Changes: - Add SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK=false to typecheck step in CI (was only on build:all, but typecheck also triggers builds via Turbo) - Add SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK to turbo.json globalEnv - Add explicit build dependencies for all examples in turbo.json - Remove docs-preview from workspaces to prevent React Router version conflicts - Regenerate package-lock.json for dependency resolution The root cause was that the typecheck step depends on build tasks (per turbo.json) but wasn't receiving the lockfile check flag, causing skeleton builds to fail. This has been a source of CI instability since the monorepo migration. * chore: regenerate cookbook recipes with updated patch hashes Regenerated all cookbook recipes to update patch file hashes after recent changes to the skeleton template. This ensures the cookbook validation passes in CI by keeping the patches in sync with the current state of the skeleton template. The regeneration updates: - All patch files with new content hashes - Recipe YAML files with updated patch references - README and prompt files with current examples This fixes the 'Validate Recipes' CI job failure. * [2025-07] Fix React Context error during client-side hydration (#3101) * Fix React Context errors in Vite dev server This fixes "Cannot read properties of null (reading 'useContext')" errors that occur when React Context hooks are used in development mode. Root Cause: Vite's module federation can cause multiple React instances to be loaded when @shopify/hydrogen is served as an external module. React Context requires a single React instance to function properly - when multiple instances exist, Context providers from one instance cannot be consumed by hooks from another instance, resulting in null context values. Solution: 1. Added resolve.dedupe for react, react-dom, and @shopify/hydrogen to ensure Vite uses a single instance of these packages 2. Modified optimizeDeps.include to conditionally optimize @shopify/hydrogen: - In production/regular projects: Optimize @shopify/hydrogen to prevent context errors - In monorepo development: Skip optimization to allow live reload of source changes This maintains development workflow in the monorepo while fixing the production build issue. * Fix React Context error during client-side hydration Resolves 'Cannot read properties of null (reading useContext)' error that occurred on first page load when using CSP with nonces. The issue was caused by NonceProvider being present during SSR but missing during client hydration, creating a React Context mismatch. Changes: - Export NonceProvider from @shopify/hydrogen for client-side usage - Add NonceProvider wrapper to skeleton's entry.client.tsx - Simplify Vite config to improve React Context stability * Update Vitest from v1.0.4 to v3.2.4 across all packages (#3126) * Update Vitest from v1.0.4 to v3.2.4 across all packages - Upgrade vitest to ^3.2.4 in all 5 packages that use it - Upgrade @vitest/coverage-v8 to ^3.2.4 to match vitest version - Add vitest as devDependency to create-hydrogen package (was missing) - Add explicit coverage provider configuration (required in v3+) - Set provider: 'v8' in cli and hydrogen-react vitest configs Breaking change: Vitest v2+ requires explicit coverage provider config * Fix Vitest v3 Mock type breaking changes In Vitest v3, vi.fn() returns Mock<() => unknown> instead of Mock<any[], any>, requiring explicit type assertions or type parameters for mocks with specific return types. Changes: - Add type assertion for fetchWithServerCache mock in storefront.test.ts - Simplify Promise creation in session mocks (Promise.resolve instead of new Promise) - Fix Mock type usage in Image.test.tsx for console.warn assertions - Add vitest/globals to tsconfig for packages using global test functions - Keep jest types alongside vitest types for @testing-library/jest-dom compatibility The stricter typing in v3 catches more potential issues at compile time but requires updating existing mocks that relied on v1's permissive typing. * Fix formatting * [2025-06] Fix MiniOxygen/Miniflare v4 redirects handling + Stable --customer-account-push flag (#3123) * Fix MiniOxygen to support React Router's redirectDocument for external redirects The Miniflare v4 update introduced a breaking change where dispatchFetch automatically follows redirects internally, preventing external OAuth redirects from working properly. React Router's redirectDocument() expects the browser to handle external redirects, but Miniflare was intercepting and following them within the worker runtime. This fix adds {redirect: 'manual'} to all dispatchFetch calls in MiniOxygen, which prevents Miniflare from following redirects automatically. This ensures that: - External redirects (like OAuth flows to Shopify's Customer Account API) are passed to the browser as intended - React Router's redirectDocument() works correctly for cross-origin navigation - The X-Remix-Reload-Document header is respected for full document reloads The implementation uses Function.prototype.call to pass both arguments to dispatchFetch while maintaining TypeScript compatibility, as the property accessor doesn't properly expose the second parameter in TypeScript definitions. Also adds .tryhydrogen.dev to Vite's allowedHosts for development testing. References: - cloudflare/workers-sdk#5018 - cloudflare/workers-sdk#5191 * Stabilize customer-account-push flag - Changed from customer-account-push__unstable to customer-account-push - Removed hidden: true to make flag visible in help - Fixed typo: Oauth → OAuth in description - Flag now works via CLI argument or SHOPIFY_HYDROGEN_FLAG_CUSTOMER_ACCOUNT_PUSH env var * Fix MiniOxygen redirect handling for OAuth flows Apply {redirect: 'manual'} to Miniflare's dispatchFetch calls to prevent automatic redirect following. This ensures external redirects (like OAuth) are passed to the browser instead of being followed internally. Changes: - Add redirect: 'manual' parameter to dispatchFetch in both worker and node environments - Fix Headers.getSetCookie() usage for proper Set-Cookie header handling - Add comprehensive tests for redirect behavior in both environments - Stabilize customer-account-push CLI flag (remove __unstable prefix) This fixes OAuth/PKCE authentication flows in React Router 7 where redirectDocument() and external redirects need to be handled by the browser, not the server. * Add changeset for OAuth redirect fixes and stabilized CLI flag * Fix intermittent CI test failures in MiniOxygen tests - Use dynamic port allocation (port: 0) for all test servers to prevent EADDRINUSE errors - Properly handle OS-assigned ports when using port 0 - Add server tracking and cleanup to ensure all servers are properly closed - Fix proxy server test to use dynamic port allocation This resolves race conditions and port conflicts that occur when tests run in parallel in CI environments. * Fix TypeScript errors in MiniOxygen tests - Change MiniOxygenOptions to MiniOxygenPreviewOptions in test files - Add proper type imports for Request, Response, and DispatchFetch - Add explicit types for onRequest callback parameters This resolves TypeScript compilation errors that were failing CI. * Update subscriptions recipe with account/subscriptions (#3124) * Delete unused variable * 2025-07 generated types * Add cartGiftCardCodesRemove mutation support - Add new cartGiftCardCodesRemove mutation handler for removing specific gift cards by ID - Integrate removeGiftCardCodes method into cart handler - Add GiftCardCodesRemove action to CartForm - Update cart fragments to include appliedGiftCards.id field - Implement gift card removal UI in skeleton template - Maintain existing additive behavior for adding/updating gift cards - Add tests for new mutation handler * Fix linting issues: sort exports and remove duplicate imports * Fix tests for cartGiftCardCodesRemove mutation support * Add missing appliedGiftCards id field * fixing up after rebase * Undoing an accidental non-change from the rebase * Merge branch 'main' into feat-cartGiftCardCodesRemove Resolved conflicts: - Deleted examples/{b2b,custom-cart-method,subscriptions}/app/lib/fragments.ts (examples moved to cookbook in main) - Regenerated GraphQL schemas for hydrogen-react package The id field for appliedGiftCards is preserved in skeleton template * Update lock * Update multipass recipe * fix multipass * Fix multipass recipe for gift card removal feature and enhance patch conflict detection - Fix TypeScript import errors in account_.login.multipass.tsx by using standard React Router types instead of generated route types - Regenerate all multipass recipe patches to work with the gift card removal feature added to cart.tsx - Add comprehensive patch conflict detection to apply.ts and validate.ts that: - Detects .orig and .rej files created during patching - Shows rejected patch content for easier debugging - Provides clear instructions for resolving conflicts - Throws errors early to prevent confusing TypeScript errors - Update enhanced error logging in validate.ts to properly decode Buffer outputs This ensures the multipass recipe validates successfully in CI with the new cartGiftCardCodesRemove feature. * fix: resolve cookbook recipe validation failures for custom-cart-method and metaobjects - Regenerated all patches for both recipes to work with gift card removal feature - Fixed incorrect shared patch file issue (both recipes had same hash but different content) - Added human-readable descriptions to all recipe.yaml patch entries - Both recipes now validate successfully in CI The root cause was that the git card removal feature (cartGiftCardCodesRemove) changed the cart.tsx structure, causing patch conflicts in fragments.ts for both recipes. --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com> Co-authored-by: Kara Daviduik <kara.daviduik@shopify.com> Co-authored-by: rbshop <rheese.burgess@shopify.com>
5 tasks
This was referenced Sep 26, 2025
Add --version=next support to
upgrade command & improve upgrade e2e tests to validate 2025.7.0
#3221
Merged
20 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
WHY are these changes introduced?
Addresses https://github.com/Shopify/hydrogen-internal/issues/231
The Storefront API 2025-07 release deprecated
cartGiftCardCodesUpdatein favor of separatecartGiftCardCodesAddandcartGiftCardCodesRemovemutations. This change addresses a critical UX issue where users couldn't remove individual gift cards when multiple were applied, since the API only returns the last 4 digits of gift card codes for security reasons.WHAT is this pull request doing?
This PR adds support for the new
cartGiftCardCodesRemovemutation to enable removing specific gift cards by their IDs.Key Changes
removeGiftCardCodesmethodGiftCardCodesRemoveactionidfield toappliedGiftCardsTechnical Details
cartGiftCardCodesRemoveDefaultappliedGiftCardIdsparameter (notgiftCardCodes)as anyusageHOW to test your changes?
Start the skeleton dev server:
cd templates/skeleton npm run devAdd a product to the cart
Apply multiple gift cards
Verify:
Checklist