Fixed cookbook steps, rendering issues, image inlining

* Fixed cookbook steps, only try to read actual text files

* Trying triple tildes for code blocks

* Regenerating all cookbook recipes

* Fixing shopify.dev rendering of recipes

* fix formatting of notes on shopify.dev render

* Update recipes from feedback on shopify.dev versions

* Update render command to render all recipes if none specified

* in Hydrogen in Hydrogen

* More shopify.dev format fixing

* Switch to string only steps

* Regenerate all recipes

* Fixing schema

* Pulling across new step names from shopify.dev PR

* Fixing null descriptions in recipes

* I'd accidentally overwritten descriptions rather than names

Author: rbshop

cookbook/llms/b2b.prompt.md

@@ -47,21 +47,9 @@ with buyer information (company location + customer token) to ensure accurate B2
 
 ## Notes
 
-> [!NOTE]
-> This recipe requires a Shopify Plus plan for B2B functionality
-
-> [!NOTE]
-> Your store must use new customer accounts (not classic accounts)
-
-> [!NOTE]
-> Only the product display page uses contextualized queries in this example
-
 > [!NOTE]
 > For production, all product queries should be contextualized with buyer information
 
-> [!NOTE]
-> The location selector appears automatically for customers with multiple company locations
-
 ## Requirements
 
 - Shopify Plus plan with B2B enabled
@@ -80,13 +68,13 @@ with buyer information (company location + customer token) to ensure accurate B2
 
 ## Steps
 
-### Step 1: README.md
-
+### Step 1: Document B2B features, requirements, and implementation details in the project README
 
+Update the README file with comprehensive B2B commerce documentation, explaining features like company locations, quantity rules, and volume pricing implementation
 
 #### File: /README.md
 
-```diff
+~~~diff
 @@ -18,6 +18,45 @@ Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dov
  - TypeScript and JavaScript flavors
  - Minimal setup of components and routes
@@ -133,15 +121,15 @@ with buyer information (company location + customer token) to ensure accurate B2
  ## Getting started
 
  **Requirements:**
-```
+~~~
 
-### Step 1: app/components/B2BLocationProvider.tsx
+### Step 2: Create a React context provider to manage company location state across the app
 
+Create a React context provider that manages the selected company location state and provides location switching functionality throughout the B2B application
 
+#### File: [B2BLocationProvider.tsx](https://github.com/Shopify/hydrogen/blob/0511444a026f5b80c3927fbc2e31b1ab827cfeae/cookbook/recipes/b2b/ingredients/templates/skeleton/app/components/B2BLocationProvider.tsx)
 
-#### File: [B2BLocationProvider.tsx](https://github.com/Shopify/hydrogen/blob/25290311dd1d135ab90bca26fb496d2b92c8631a/cookbook/recipes/b2b/ingredients/templates/skeleton/app/components/B2BLocationProvider.tsx)
-
-```tsx
+~~~tsx
 import {createContext, useContext, useEffect, useState, useMemo} from 'react';
 import {useFetcher} from 'react-router';
 import {type CustomerCompany} from '~/root';
@@ -193,15 +181,15 @@ export function B2BLocationProvider({children}: {children: React.ReactNode}) {
 export function useB2BLocation(): B2BLocationContextValue {
   return useContext(B2BLocationContext);
 }
-```
-
-### Step 2: app/components/CartLineItem.tsx
+~~~
 
+### Step 3: Update quantity controls to respect B2B minimum, maximum, and increment rules
 
+Update cart line item quantity controls to honor B2B quantity rules including minimum order quantities, maximum limits, and increment requirements
 
 #### File: /app/components/CartLineItem.tsx
 
-```diff
+~~~diff
 @@ -76,8 +76,13 @@ export function CartLineItem({
  function CartLineQuantity({line}: {line: CartLine}) {
    if (!line || typeof line?.quantity === 'undefined') return null;
@@ -238,15 +226,15 @@ export function useB2BLocation(): B2BLocationContextValue {
          >
            <span>&#43;</span>
          </button>
-```
+~~~
 
-### Step 2: app/components/B2BLocationSelector.tsx
+### Step 4: Build a modal that lets customers choose which company location to use for pricing
 
+Create a modal component that displays available company locations and allows B2B customers to select the appropriate location for contextualized pricing
 
+#### File: [B2BLocationSelector.tsx](https://github.com/Shopify/hydrogen/blob/0511444a026f5b80c3927fbc2e31b1ab827cfeae/cookbook/recipes/b2b/ingredients/templates/skeleton/app/components/B2BLocationSelector.tsx)
 
-#### File: [B2BLocationSelector.tsx](https://github.com/Shopify/hydrogen/blob/25290311dd1d135ab90bca26fb496d2b92c8631a/cookbook/recipes/b2b/ingredients/templates/skeleton/app/components/B2BLocationSelector.tsx)
-
-```tsx
+~~~tsx
 import {CartForm} from '@shopify/hydrogen';
 import type {
   CustomerCompanyLocation,
@@ -317,15 +305,15 @@ export function B2BLocationSelector() {
     </div>
   );
 }
-```
-
-### Step 3: app/components/Header.tsx
+~~~
 
+### Step 5: Add a location selector button to the header for switching between company locations
 
+Add a location selector button to the site header that allows B2B customers to easily switch between their company's different locations
 
 #### File: /app/components/Header.tsx
 
-```diff
+~~~diff
 @@ -7,6 +7,9 @@ import {
  } from '@shopify/hydrogen';
  import type {HeaderQuery, CartApiQueryFragment} from 'storefrontapi.generated';
@@ -375,15 +363,15 @@ export function B2BLocationSelector() {
  const FALLBACK_HEADER_MENU = {
    id: 'gid://shopify/Menu/199655587896',
    items: [
-```
-
-### Step 3: app/components/PriceBreaks.tsx
+~~~
 
+### Step 6: Display volume pricing tiers that show bulk purchase discounts
 
+Create a component that displays volume pricing breaks, showing customers the discounted prices they'll receive for bulk purchases at different quantity thresholds
 
-#### File: [PriceBreaks.tsx](https://github.com/Shopify/hydrogen/blob/25290311dd1d135ab90bca26fb496d2b92c8631a/cookbook/recipes/b2b/ingredients/templates/skeleton/app/components/PriceBreaks.tsx)
+#### File: [PriceBreaks.tsx](https://github.com/Shopify/hydrogen/blob/0511444a026f5b80c3927fbc2e31b1ab827cfeae/cookbook/recipes/b2b/ingredients/templates/skeleton/app/components/PriceBreaks.tsx)
 
-```tsx
+~~~tsx
 import {Money} from '@shopify/hydrogen';
 import type {MoneyV2} from '@shopify/hydrogen/storefront-api-types';
 
@@ -423,15 +411,15 @@ export function PriceBreaks({priceBreaks}: PriceBreaksProps) {
     </>
   );
 }
-```
-
-### Step 4: app/components/ProductForm.tsx
+~~~
 
+### Step 7: Accept quantity parameter to support B2B minimum quantity and increment rules
 
+Update the ProductForm component to accept and handle quantity parameters that enforce B2B minimum quantities and increment rules when adding products to cart
 
 #### File: /app/components/ProductForm.tsx
 
-```diff
+~~~diff
 @@ -8,12 +8,15 @@ import {AddToCartButton} from './AddToCartButton';
  import {useAside} from './Aside';
  import type {ProductFragment} from 'storefrontapi.generated';
@@ -458,15 +446,15 @@ export function PriceBreaks({priceBreaks}: PriceBreaksProps) {
                    selectedVariant,
                  },
                ]
-```
-
-### Step 4: app/components/QuantityRules.tsx
+~~~
 
+### Step 8: Show minimum, maximum, and increment quantity requirements for B2B products
 
+Create a component that displays B2B quantity rules to customers, showing minimum order quantities, maximum limits, and required increments for business products
 
-#### File: [QuantityRules.tsx](https://github.com/Shopify/hydrogen/blob/25290311dd1d135ab90bca26fb496d2b92c8631a/cookbook/recipes/b2b/ingredients/templates/skeleton/app/components/QuantityRules.tsx)
+#### File: [QuantityRules.tsx](https://github.com/Shopify/hydrogen/blob/0511444a026f5b80c3927fbc2e31b1ab827cfeae/cookbook/recipes/b2b/ingredients/templates/skeleton/app/components/QuantityRules.tsx)
 
-```tsx
+~~~tsx
 import type {Maybe} from '@shopify/hydrogen/customer-account-api-types';
 
 export type QuantityRulesProps = {
@@ -511,15 +499,15 @@ export function QuantityRules({
     </>
   );
 }
-```
-
-### Step 5: app/lib/fragments.ts
+~~~
 
+### Step 9: Add quantity rules and price breaks to cart GraphQL fragments
 
+Update GraphQL fragments to include quantity rules and price break data needed for B2B functionality in cart queries
 
 #### File: /app/lib/fragments.ts
 
-```diff
+~~~diff
 @@ -52,6 +52,21 @@ export const CART_QUERY_FRAGMENT = `#graphql
            name
            value
@@ -564,15 +552,15 @@ export function QuantityRules({
        }
      }
    }
-```
+~~~
 
-### Step 5: app/graphql/customer-account/CustomerLocationsQuery.ts
+### Step 10: Query company locations from the Customer Account API for B2B customers
 
+Create a GraphQL query that fetches all available company locations for B2B customers from the Customer Account API
 
+#### File: [CustomerLocationsQuery.ts](https://github.com/Shopify/hydrogen/blob/0511444a026f5b80c3927fbc2e31b1ab827cfeae/cookbook/recipes/b2b/ingredients/templates/skeleton/app/graphql/customer-account/CustomerLocationsQuery.ts)
 
-#### File: [CustomerLocationsQuery.ts](https://github.com/Shopify/hydrogen/blob/25290311dd1d135ab90bca26fb496d2b92c8631a/cookbook/recipes/b2b/ingredients/templates/skeleton/app/graphql/customer-account/CustomerLocationsQuery.ts)
-
-```ts
+~~~ts
 // NOTE: https://shopify.dev/docs/api/customer/latest/objects/Customer
 export const CUSTOMER_LOCATIONS_QUERY = `#graphql
   query CustomerLocations {
@@ -606,15 +594,15 @@ export const CUSTOMER_LOCATIONS_QUERY = `#graphql
     }
   }
 ` as const;
-```
-
-### Step 6: app/root.tsx
+~~~
 
+### Step 11: Wrap the app with B2B location provider and add company location types
 
+Wrap the application with the B2B location provider context and add TypeScript type definitions for company location data
 
 #### File: /app/root.tsx
 
-```diff
+~~~diff
 @@ -16,9 +16,39 @@ import {FOOTER_QUERY, HEADER_QUERY} from '~/lib/fragments';
  import resetStyles from '~/styles/reset.css?url';
  import appStyles from '~/styles/app.css?url';
@@ -672,15 +660,15 @@ export const CUSTOMER_LOCATIONS_QUERY = `#graphql
      </Analytics.Provider>
    );
  }
-```
-
-### Step 6: app/routes/b2blocations.tsx
+~~~
 
+### Step 12: Handle location selection and automatically set location if customer has only one
 
+Create a route handler that processes location selection requests and automatically sets the location if a B2B customer only has access to one company location
 
-#### File: [b2blocations.tsx](https://github.com/Shopify/hydrogen/blob/25290311dd1d135ab90bca26fb496d2b92c8631a/cookbook/recipes/b2b/ingredients/templates/skeleton/app/routes/b2blocations.tsx)
+#### File: [b2blocations.tsx](https://github.com/Shopify/hydrogen/blob/0511444a026f5b80c3927fbc2e31b1ab827cfeae/cookbook/recipes/b2b/ingredients/templates/skeleton/app/routes/b2blocations.tsx)
 
-```tsx
+~~~tsx
 import {useLoaderData} from 'react-router';
 import type {Route} from './+types/b2blocations';
 import {B2BLocationSelector} from '../components/B2BLocationSelector';
@@ -719,15 +707,15 @@ export async function loader({context}: Route.LoaderArgs) {
 export default function CartRoute() {
   return <B2BLocationSelector />;
 }
-```
-
-### Step 7: app/routes/account_.logout.tsx
+~~~
 
+### Step 13: Clear company location and customer data from cart when logging out
 
+Update the logout process to clear B2B-specific data including selected company location and customer context from the cart session
 
 #### File: /app/routes/account_.logout.tsx
 
-```diff
+~~~diff
 @@ -7,5 +7,10 @@ export async function loader() {
  }
 
@@ -739,15 +727,15 @@ export default function CartRoute() {
 +  });
    return context.customerAccount.logout();
  }
-```
-
-### Step 8: app/routes/products.$handle.tsx
+~~~
 
+### Step 14: Contextualize product queries with buyer information and display B2B pricing details
 
+Update product queries to include buyer context (company location and customer token) and display B2B-specific pricing, quantity rules, and volume discounts on product pages
 
 #### File: /app/routes/products.$handle.tsx
 
-```diff
+~~~diff
 @@ -15,6 +15,19 @@ import {ProductPrice} from '~/components/ProductPrice';
  import {ProductImage} from '~/components/ProductImage';
  import {ProductForm} from '~/components/ProductForm';
@@ -889,6 +877,6 @@ export default function CartRoute() {
      product(handle: $handle) {
        ...Product
      }
-```
+~~~
 
 </recipe_implementation>