2024-07 - Update SFAPI & CA API (#2297)

* update to 2024-07 api types

* update test & examples api version to the latest

* ♻️ refactor hydrogen constants and get rid of duplication

* update hydrogen, hydrigen-react and skeleton version to 2024.7.0

* update dosc to 2024-07

* fix test

* update peer dep and dedup remix dependencies

* revert peerDep to previous version and run dedup again

* update generated docs

examples/b2b/README.md

@@ -5,7 +5,7 @@
 
 This is an example implementation of a B2B storefront using Hydrogen. It includes the following high level changes.
 
-1. Retrieving company location data from a logged in customer using the [Customer Account API](https://shopify.dev/docs/api/customer/2024-04/queries/customer)
+1. Retrieving company location data from a logged in customer using the [Customer Account API](https://shopify.dev/docs/api/customer/2024-07/queries/customer)
 2. Displaying a list of company locations and setting a `companyLocationId` in session
 3. Using a storefront `customerAccessToken` and `companyLocationId` to update cart and get B2B specific rules and pricing such as [volume pricing and quantity rules](https://help.shopify.com/en/manual/b2b/catalogs/quantity-pricing)
 4. Using a storefront `customerAccessToken` and `companyLocationId` to [contextualize queries](https://shopify.dev/docs/api/storefront#directives) using the `buyer` argument on the product display page
@@ -31,15 +31,15 @@ npm create @shopify/hydrogen@latest -- --template b2b
 
 This folder contains the minimal set of files needed to showcase the implementation.
 Not all queries where contextualized for B2B. `app/routes/products.$handle.tsx` provides
-reference on how to contextualize storefront queries. Files that aren’t included by default 
+reference on how to contextualize storefront queries. Files that aren’t included by default
 with Hydrogen and that you’ll need to create are labeled with 🆕.
 
-| File                                                 | Description                                                                                    |
-| ---------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| [`app/routes/b2blocations.tsx`](app/routes/b2blocations.tsx)                      | Includes a customer query to get B2B data. Set `companyLocationId` in session if there is only one location available to buy for the customer  |
-| [`app/components/B2BLocationProvider.tsx`](app/components/B2BLocationProvider.tsx)     | Provides context on if the current logged in customer is a B2B customer and keeping track of the location modal open status.   |
-| 🆕 [`app/graphql/CustomerLocationsQuery.ts`](app/graphql/CustomerLocationsQuery.ts)  | Customer query to fetch company locations        |
-| 🆕 [`app/components/B2BLocationSelector.tsx`](app/components/B2BLocationSelector.tsx) | Component to choose a Company location to buy for. Rendered if there is no `companyLocationId` set in session    |
-| [`app/routes/products.$handle.tsx`](app/routes/products.$handle.tsx)      | Added buyer context to the product and product varient queries. Includes logic and components to display quantity rules and quantity price breaks |
-| 🆕 [`app/components/PriceBreaks.tsx`](app/components/PriceBreaks.tsx)  | Component rendered on the product page to highlight quantity price breaks        |
-| 🆕 [`app/components/QuantityRules.tsx`](app/components/QuantityRules.tsx)  | Component rendered on the product page to highlight quantity rules        |
+| File                                                                                  | Description                                                                                                                                       |
+| ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`app/routes/b2blocations.tsx`](app/routes/b2blocations.tsx)                          | Includes a customer query to get B2B data. Set `companyLocationId` in session if there is only one location available to buy for the customer     |
+| [`app/components/B2BLocationProvider.tsx`](app/components/B2BLocationProvider.tsx)    | Provides context on if the current logged in customer is a B2B customer and keeping track of the location modal open status.                      |
+| 🆕 [`app/graphql/CustomerLocationsQuery.ts`](app/graphql/CustomerLocationsQuery.ts)   | Customer query to fetch company locations                                                                                                         |
+| 🆕 [`app/components/B2BLocationSelector.tsx`](app/components/B2BLocationSelector.tsx) | Component to choose a Company location to buy for. Rendered if there is no `companyLocationId` set in session                                     |
+| [`app/routes/products.$handle.tsx`](app/routes/products.$handle.tsx)                  | Added buyer context to the product and product varient queries. Includes logic and components to display quantity rules and quantity price breaks |
+| 🆕 [`app/components/PriceBreaks.tsx`](app/components/PriceBreaks.tsx)                 | Component rendered on the product page to highlight quantity price breaks                                                                         |
+| 🆕 [`app/components/QuantityRules.tsx`](app/components/QuantityRules.tsx)             | Component rendered on the product page to highlight quantity rules                                                                                |

examples/express/package.json

@@ -16,7 +16,7 @@
     "@remix-run/server-runtime": "^2.10.1",
     "@shopify/cli": "3.61.2",
     "@shopify/cli-hydrogen": "^8.1.1",
-    "@shopify/hydrogen": "2024.4.7",
+    "@shopify/hydrogen": "2024.7.0",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
     "express": "^4.19.2",

examples/infinite-scroll/README.md

@@ -1,6 +1,6 @@
 # Hydrogen example: infinite scroll collection page
 
-This folder contains an example implementation of [infinite scroll](https://shopify.dev/docs/custom-storefronts/hydrogen/data-fetching/pagination#automatically-load-pages-on-scroll) within a product collection page using the [Pagination component](https://shopify.dev/docs/api/hydrogen/2024-04/components/pagination).
+This folder contains an example implementation of [infinite scroll](https://shopify.dev/docs/custom-storefronts/hydrogen/data-fetching/pagination#automatically-load-pages-on-scroll) within a product collection page using the [Pagination component](https://shopify.dev/docs/api/hydrogen/2024-07/components/pagination).
 
 The example uses [`react-intersection-observer`](https://www.npmjs.com/package/react-intersection-observer) to detect when the `Load more` button is in view. A `useEffect` then triggers a navigation to the next page url, which seamlessly loads more products as the user scrolls.
 

packages/hydrogen-react/codegen.ts

@@ -4,8 +4,8 @@ import {
   customerAccountApiCustomScalars,
 } from './src/codegen.helpers';
 
-const SF_API_VERSION = '2024-04';
-const CA_API_VERSION = '2024-04';
+const SF_API_VERSION = '2024-07';
+const CA_API_VERSION = '2024-07';
 
 const storefrontAPISchema: CodegenConfig['schema'] = {
   [`https://hydrogen-preview.myshopify.com/api/${SF_API_VERSION}/graphql.json`]: