@salesforce/b2c-dx-mcp 3.2.1 → 3.4.0

package/content/guidance/storefront-next/sfnext-custom-apis/SKILL.md

@@ -1,221 +0,0 @@
----
-name: sfnext-custom-apis
-description: End-to-end workflow for consuming custom SCAPI endpoints from a Storefront Next project — adding them as typed clients via `b2c sfnext scapi add custom`, discovering their schema, and calling them from loaders/actions/useScapiFetcher. Use this skill whenever the user wants to call a custom API from their Storefront Next app, gets a 404 or 401 when calling a custom endpoint from their sfnext loader, needs to add a custom API as a typed client in their storefront, asks about the full workflow from custom API cartridge to sfnext consumption, or says 'custom API in storefront next'. Also use when they ask how createApiClients exposes custom API methods or how to use useScapiFetcher with a custom endpoint. NOT for writing the custom API cartridge files (schema.yaml/script.js) from scratch — see b2c:b2c-custom-api-development. NOT for just checking registration status — see b2c-cli:b2c-scapi-custom.
----
-
-# Custom APIs in Storefront Next
-
-This skill covers the end-to-end workflow for implementing and consuming custom SCAPI endpoints from a Storefront Next project.
-
-## Overview
-
-Custom APIs let you define your own REST endpoints on B2C Commerce. In a Storefront Next project, you call these from loaders and actions just like standard SCAPI clients — with full type safety.
-
-### End-to-End Workflow
-
-```
-Create custom API    →  Deploy & register  →  Add typed client  →  Discover schema  →  Call from loader
-(cartridge)             (b2c code deploy)     (sfnext scapi add)   (scapi schemas)     (createApiClients)
-```
-
-## Step 1: Create the Custom API
-
-A custom API consists of three files in a cartridge:
-
-```
-my-cartridge/cartridge/rest-apis/my-loyalty-api/
-├── schema.yaml     # OpenAPI 3.0 schema (endpoints, params, responses)
-├── api.json        # API metadata (version, security scheme)
-└── script.js       # Implementation (controller script)
-```
-
-For full details on writing these files, see the `b2c:b2c-custom-api-development` skill.
-
-**Key choices that affect the client:**
-
-| Choice | Impact |
-|--------|--------|
-| Directory name (`my-loyalty-api`) | Becomes the API name for `scapi add` |
-| `type` in api.json (`shopper` or `admin`) | Determines auth scheme and whether `siteId` is required |
-| Paths in schema.yaml | Become the methods on the typed client |
-
-## Step 2: Deploy and Register
-
-Deploy the cartridge and verify the custom API is registered:
-
-```bash
-# deploy the cartridge
-b2c code deploy ./my-cartridge --activate
-
-# verify registration
-b2c scapi custom status
-```
-
-A successful registration shows `status: active` for your endpoints. If you see `not_registered`, debug with:
-
-```bash
-b2c scapi custom status --status not_registered --columns type,apiName,endpointPath,errorReason
-```
-
-See `b2c-cli:b2c-scapi-custom` for full diagnostics.
-
-## Step 3: Add as Typed Client
-
-Once registered, add the custom API to your Storefront Next project:
-
-```bash
-b2c sfnext scapi add custom my-loyalty-api v1
-```
-
-This generates typed client code. The client becomes available as:
-
-```typescript
-const clients = createApiClients(context);
-clients.myLoyaltyApi.getPoints({...});
-```
-
-## Step 4: Discover the API Shape
-
-Use schema browsing to understand your custom API's endpoints and response types:
-
-```bash
-# list endpoints
-b2c scapi schemas get custom my-loyalty-api v1 --list-paths
-
-# expand a specific endpoint
-b2c scapi schemas get custom my-loyalty-api v1 \
-  --expand-paths /loyalty/points/{customerId}
-```
-
-This shows you the exact parameter names and response shape to use in your loader.
-
-## Step 5: Call from Loaders and Actions
-
-### Calling from a Loader (Shopper API)
-
-```typescript
-import { createApiClients } from '@/lib/api-clients';
-
-export function loader({ params, context }: LoaderFunctionArgs) {
-    const clients = createApiClients(context);
-    return {
-        loyaltyPoints: clients.myLoyaltyApi.getPoints({
-            params: {
-                path: { customerId: params.customerId },
-                query: { siteId: context.siteId }
-            }
-        }).then(({ data }) => data),
-    };
-}
-```
-
-### Calling from an Action (Mutation)
-
-```typescript
-import { data } from 'react-router';
-import { createApiClients } from '@/lib/api-clients';
-
-export async function action({ request, context }: ActionFunctionArgs) {
-    const formData = await request.formData();
-    const clients = createApiClients(context);
-
-    try {
-        await clients.myLoyaltyApi.redeemPoints({
-            params: {
-                path: { customerId: formData.get('customerId') as string },
-                query: { siteId: context.siteId },
-                body: { points: Number(formData.get('points')) }
-            }
-        });
-        return data({ success: true });
-    } catch (error) {
-        return data({ success: false, error: error.message }, { status: 400 });
-    }
-}
-```
-
-### Using useScapiFetcher (Interactive)
-
-For on-demand fetching triggered by user interactions:
-
-```typescript
-import { useScapiFetcher } from '@/hooks/use-scapi-fetcher';
-
-export function useLoyaltyPoints(customerId: string) {
-    const parameters = useMemo(
-        () => ({
-            params: {
-                path: { customerId },
-                query: { siteId: getSiteId() }
-            }
-        }),
-        [customerId]
-    );
-
-    const fetcher = useScapiFetcher(
-        'myLoyaltyApi',
-        'getPoints',
-        parameters
-    );
-
-    return {
-        points: fetcher.data,
-        isLoading: fetcher.state === 'loading',
-        refresh: () => fetcher.load(),
-    };
-}
-```
-
-## Step 6: Debug Issues
-
-| Issue | Cause | Solution |
-|-------|-------|----------|
-| Client property not available | Forgot `sfnext scapi add` | Run `b2c sfnext scapi add custom <name> <version>` |
-| 404 from custom endpoint | API not registered | Check `b2c scapi custom status`; redeploy with `--activate` |
-| 401 Unauthorized | Wrong security scheme | Shopper APIs use ShopperToken; Admin APIs use BearerToken |
-| Missing `siteId` error | Shopper custom APIs require siteId | Always include `siteId` in query params for Shopper APIs |
-| Schema returns empty | API not yet registered | Deploy and activate the cartridge first, then browse schemas |
-| Types outdated after schema change | Stale generated types | Re-run `b2c sfnext scapi add custom <name> <version> --force` |
-
-## Custom API Client Naming
-
-The API directory name maps to a camelCase property on `createApiClients()`:
-
-| Directory Name | Client Property | Example Call |
-|---------------|-----------------|-------------|
-| `my-loyalty-api` | `clients.myLoyaltyApi` | `clients.myLoyaltyApi.getPoints({...})` |
-| `order-status` | `clients.orderStatus` | `clients.orderStatus.getStatus({...})` |
-| `inventory-check` | `clients.inventoryCheck` | `clients.inventoryCheck.checkStock({...})` |
-
-## Shopper vs Admin Custom APIs
-
-| Aspect | Shopper API | Admin API |
-|--------|-------------|-----------|
-| Auth scheme | ShopperToken (SLAS) | BearerToken (Account Manager) |
-| Requires `siteId` | Yes | No |
-| Called from | Storefront loaders/actions | Admin tools, batch jobs |
-| Typical use | Customer-facing features | Back-office operations |
-
-Most Storefront Next custom APIs are **Shopper** type since they serve storefront pages.
-
-## Common Pitfalls
-
-| Pitfall | Problem | Solution |
-|---------|---------|----------|
-| Using admin auth for a shopper endpoint | 401 errors in storefront context | Set `type: "shopper"` in api.json |
-| Forgetting to redeploy after schema changes | Stale endpoints | Redeploy cartridge and re-add client with `--force` |
-| Not including `siteId` for shopper APIs | Request rejected | Always pass `siteId` in query params |
-| Calling custom API before registration completes | Intermittent 404s | Wait for `status: active` in `b2c scapi custom status` |
-
-## Related Skills
-
-- `storefront-next:sfnext-scapi-management` - Managing typed clients (add/remove/list)
-- `storefront-next:sfnext-data-fetching` - Loader/action/useScapiFetcher patterns
-- `b2c:b2c-custom-api-development` - Creating the custom API cartridge (schema + script + mapping)
-- `b2c-cli:b2c-scapi-custom` - Checking custom API registration status
-- `b2c-cli:b2c-scapi-schemas` - Schema discovery commands
-- `b2c-cli:b2c-code` - Deploying and activating code versions
-
-## Reference Documentation
-
-- [Workflow Examples](references/WORKFLOW-EXAMPLES.md) - Complete end-to-end worked examples

package/content/guidance/storefront-next/sfnext-custom-apis/references/WORKFLOW-EXAMPLES.md

@@ -1,294 +0,0 @@
-# Workflow Examples
-
-Complete end-to-end examples showing the full lifecycle from custom API creation through calling from a Storefront Next storefront.
-
-## Example 1: Shopper Custom API — Loyalty Points
-
-A customer-facing API that retrieves and redeems loyalty points.
-
-### Cartridge Structure
-
-```
-loyalty-cartridge/cartridge/rest-apis/loyalty-points/
-├── schema.yaml
-├── api.json
-└── script.js
-```
-
-### schema.yaml
-
-```yaml
-openapi: "3.0.0"
-info:
-  title: Loyalty Points API
-  version: "v1"
-paths:
-  /points/{customerId}:
-    get:
-      operationId: getPoints
-      parameters:
-        - name: customerId
-          in: path
-          required: true
-          schema:
-            type: string
-        - name: siteId
-          in: query
-          required: true
-          schema:
-            type: string
-      responses:
-        "200":
-          description: Customer loyalty points
-          content:
-            application/json:
-              schema:
-                $ref: "#/components/schemas/LoyaltyBalance"
-  /points/{customerId}/redeem:
-    post:
-      operationId: redeemPoints
-      parameters:
-        - name: customerId
-          in: path
-          required: true
-          schema:
-            type: string
-        - name: siteId
-          in: query
-          required: true
-          schema:
-            type: string
-      requestBody:
-        required: true
-        content:
-          application/json:
-            schema:
-              $ref: "#/components/schemas/RedeemRequest"
-      responses:
-        "200":
-          description: Redemption result
-          content:
-            application/json:
-              schema:
-                $ref: "#/components/schemas/RedeemResult"
-components:
-  schemas:
-    LoyaltyBalance:
-      type: object
-      properties:
-        customerId:
-          type: string
-        points:
-          type: integer
-        tier:
-          type: string
-          enum: [bronze, silver, gold, platinum]
-        lastUpdated:
-          type: string
-          format: date-time
-    RedeemRequest:
-      type: object
-      required: [points]
-      properties:
-        points:
-          type: integer
-          minimum: 1
-    RedeemResult:
-      type: object
-      properties:
-        success:
-          type: boolean
-        remainingPoints:
-          type: integer
-        transactionId:
-          type: string
-```
-
-### api.json
-
-```json
-{
-  "type": "shopper",
-  "version": "v1"
-}
-```
-
-### Deploy and Register
-
-```bash
-# deploy the cartridge
-b2c code deploy ./loyalty-cartridge --activate
-
-# verify registration
-b2c scapi custom status --api-name loyalty-points
-```
-
-### Add to Storefront Next Project
-
-```bash
-b2c sfnext scapi add custom loyalty-points v1
-```
-
-### Discover and Use
-
-```bash
-# check endpoints
-b2c scapi schemas get custom loyalty-points v1 --list-paths
-
-# inspect response shape
-b2c scapi schemas get custom loyalty-points v1 \
-  --expand-paths /points/{customerId} \
-  --expand-schemas LoyaltyBalance
-```
-
-### Storefront Code
-
-```typescript
-// src/routes/_app.account.loyalty.tsx
-import { createApiClients } from '@/lib/api-clients';
-import { createPage } from '@/lib/create-page';
-
-interface LoyaltyPageData {
-    balance: Promise<LoyaltyBalance>;
-}
-
-export function loader({ context }: LoaderFunctionArgs): LoyaltyPageData {
-    const clients = createApiClients(context);
-    const customerId = context.session.customerId;
-
-    return {
-        balance: clients.loyaltyPoints.getPoints({
-            params: {
-                path: { customerId },
-                query: { siteId: context.siteId }
-            }
-        }).then(({ data }) => data),
-    };
-}
-
-export default createPage<LoyaltyPageData>(({ data }) => (
-    <div className="space-y-4">
-        <h1 className="text-2xl font-bold">Loyalty Points</h1>
-        <Suspense fallback={<Skeleton className="h-24" />}>
-            <Await resolve={data.balance}>
-                {(balance) => (
-                    <div className="rounded-lg border p-6">
-                        <p className="text-4xl font-bold">{balance.points}</p>
-                        <p className="text-muted-foreground">
-                            {balance.tier} tier
-                        </p>
-                    </div>
-                )}
-            </Await>
-        </Suspense>
-    </div>
-));
-```
-
----
-
-## Example 2: Admin Custom API — Inventory Check
-
-An admin API for back-office inventory operations. Admin APIs use BearerToken auth and do not require `siteId`.
-
-### Key Differences from Shopper APIs
-
-| Aspect | This Example | Example 1 (Shopper) |
-|--------|-------------|---------------------|
-| api.json `type` | `"admin"` | `"shopper"` |
-| Auth | BearerToken (Account Manager) | ShopperToken (SLAS) |
-| `siteId` param | Not required | Required |
-| Typical caller | Admin tools, cron jobs | Storefront loaders |
-
-### api.json
-
-```json
-{
-  "type": "admin",
-  "version": "v1"
-}
-```
-
-### Usage in Storefront Context
-
-Admin APIs are typically NOT called from storefront loaders (since storefronts use shopper auth). If you need admin-level data in a storefront, consider:
-
-1. Using a shopper API that exposes the same data with appropriate access controls
-2. Pre-computing results and storing them in a custom object accessible via shopper APIs
-
----
-
-## Example 3: useScapiFetcher with Custom API
-
-Interactive pattern for fetching custom API data after page load (e.g., showing loyalty points in a modal that opens on click).
-
-```typescript
-// src/hooks/use-loyalty-points.ts
-import { useScapiFetcher } from '@/hooks/use-scapi-fetcher';
-import { useMemo, useCallback } from 'react';
-
-export function useLoyaltyPoints(customerId: string | undefined) {
-    const parameters = useMemo(
-        () => customerId ? {
-            params: {
-                path: { customerId },
-                query: { siteId: getSiteId() }
-            }
-        } : null,
-        [customerId]
-    );
-
-    const fetcher = useScapiFetcher(
-        'loyaltyPoints',
-        'getPoints',
-        parameters
-    );
-
-    const refresh = useCallback(async () => {
-        if (parameters) {
-            await fetcher.load();
-        }
-    }, [fetcher, parameters]);
-
-    return {
-        points: fetcher.data?.points ?? 0,
-        tier: fetcher.data?.tier ?? 'bronze',
-        isLoading: fetcher.state === 'loading',
-        refresh,
-    };
-}
-```
-
-```typescript
-// src/components/loyalty-badge.tsx
-import { useLoyaltyPoints } from '@/hooks/use-loyalty-points';
-
-export function LoyaltyBadge({ customerId }: { customerId: string }) {
-    const { points, tier, isLoading, refresh } = useLoyaltyPoints(customerId);
-
-    useEffect(() => {
-        refresh();
-    }, [refresh]);
-
-    if (isLoading) return <Skeleton className="h-6 w-16" />;
-
-    return (
-        <Badge variant={tier === 'platinum' ? 'default' : 'secondary'}>
-            {points} pts
-        </Badge>
-    );
-}
-```
-
-### How It Works
-
-```
-LoyaltyBadge renders
-  → useLoyaltyPoints calls useScapiFetcher('loyaltyPoints', 'getPoints', params)
-  → fetcher.load() sends GET to /resource/api/client/{encoded-params}
-  → Resource route runs ON SERVER
-  → createApiClients(context).loyaltyPoints.getPoints({...}) calls SCAPI
-  → JSON response returned to component
-```
-
-The custom API call happens server-side even though it's triggered from a client component.

package/content/guidance/storefront-next/sfnext-data-fetching/references/LOADER-PATTERNS.md

@@ -1,102 +0,0 @@
-# Loader Patterns Reference
-
-## Data Flow
-
-### Initial Page Load (SSR)
-
-```
-Browser request → MRT Server
-                  ↓
-             loader() runs on server
-                  ↓
-             SCAPI requests on MRT
-                  ↓
-             HTML response streamed → Browser
-```
-
-### Subsequent Navigation (SPA)
-
-```
-User clicks link → React Router intercepts
-                   ↓
-              Browser fetches from server
-                   ↓
-              MRT Server runs same loader()
-                   ↓
-              SCAPI requests on MRT
-                   ↓
-              JSON response → Browser
-                   ↓
-              React updates DOM
-```
-
-The loader code is identical for SSR and SPA navigation — only the response format differs (HTML vs JSON).
-
-## Decision Tree: Which Pattern to Use
-
-```
-Need data for page render?
-├── Critical for SEO / above-the-fold?
-│   └── Use awaited data (async loader with await)
-├── Non-critical / below-the-fold?
-│   └── Use deferred data (sync loader, return promises)
-└── Mix of both?
-    └── Use mixed strategy (await critical, stream rest)
-
-Need to handle mutations?
-└── Use action function
-
-Need data after page load (user interaction)?
-└── Use useScapiFetcher
-```
-
-## Pattern: Multiple API Calls with Dependencies
-
-When one API call depends on another's result:
-
-```typescript
-export async function loader({ params, context }: LoaderFunctionArgs) {
-    const clients = createApiClients(context);
-
-    // First call — must resolve before dependent calls
-    const category = await clients.shopperProducts.getCategory({
-        params: { path: { id: params.categoryId } }
-    }).then(({ data }) => data);
-
-    // Dependent calls — can run in parallel with each other
-    return {
-        category,
-        products: clients.shopperSearch.productSearch({
-            params: { query: { refine: `cgid=${category.id}` } }
-        }).then(({ data }) => data),
-        refinements: clients.shopperSearch.getSearchSuggestions({
-            params: { query: { q: category.name } }
-        }).then(({ data }) => data),
-    };
-}
-```
-
-## Pattern: Conditional Data Loading
-
-```typescript
-export function loader({ params, context }: LoaderFunctionArgs) {
-    const clients = createApiClients(context);
-    const auth = getAuth(context);
-
-    const base = {
-        product: clients.shopperProducts.getProduct({
-            params: { path: { id: params.productId } }
-        }).then(({ data }) => data),
-    };
-
-    // Only fetch wishlist for registered users
-    if (auth.userType === 'registered') {
-        return {
-            ...base,
-            wishlist: clients.shopperCustomers.getWishlist({...}).then(({ data }) => data),
-        };
-    }
-
-    return base;
-}
-```

package/content/guidance/storefront-next/sfnext-project-setup/references/ENV-VARIABLES.md

@@ -1,82 +0,0 @@
-# Environment Variables Reference
-
-## Naming Convention
-
-Environment variables use the `PUBLIC__` prefix with double underscore (`__`) separators to map to configuration paths:
-
-```bash
-# Pattern: PUBLIC__app__{path}__{to}__{property}=value
-PUBLIC__app__commerce__api__clientId=abc123
-# Maps to: config.app.commerce.api.clientId
-# Accessed as: getConfig(context).commerce.api.clientId
-```
-
-## Rules
-
-1. **`PUBLIC__` prefix** — Exposed to browser (client-safe values only)
-2. **No prefix** — Server-only secrets (never sent to client)
-3. **`__` separator** — Navigates nested config paths
-4. **Case-insensitive** — All casings work (normalized to match `config.server.ts`)
-5. **Auto-parsing** — Strings, numbers, booleans, JSON arrays/objects parsed automatically
-6. **Validation** — Paths must exist in `config.server.ts` (prevents typos)
-7. **Depth limit** — Maximum 10 levels deep (use JSON for deeper nesting)
-8. **Path precedence** — More specific paths override less specific ones
-9. **Protected paths** — `app__engagement` cannot be overridden via environment variables
-10. **MRT limits** — Variable names max 512 characters, total `PUBLIC__` values max 32KB
-
-## Required Variables
-
-| Variable | Description |
-|----------|-------------|
-| `PUBLIC__app__commerce__api__clientId` | SLAS client ID |
-| `PUBLIC__app__commerce__api__organizationId` | Commerce Cloud organization ID |
-| `PUBLIC__app__commerce__api__siteId` | Default site ID |
-| `PUBLIC__app__commerce__api__shortCode` | API short code |
-| `PUBLIC__app__defaultSiteId` | Default site ID for routing |
-| `PUBLIC__app__commerce__sites` | JSON array of site configurations |
-
-## Server-Only Variables
-
-```bash
-# Server-only secrets (no PUBLIC__ prefix)
-COMMERCE_API_SLAS_SECRET=your-slas-secret
-```
-
-Access server-only secrets via `process.env` directly — never add them to the config system.
-
-## Multi-Site Configuration
-
-The `commerce.sites` array defines site configurations:
-
-```bash
-PUBLIC__app__commerce__sites='[
-  {
-    "id": "RefArchGlobal",
-    "defaultLocale": "en-US",
-    "defaultCurrency": "USD",
-    "supportedLocales": [
-      {"id": "en-US", "preferredCurrency": "USD"},
-      {"id": "de-DE", "preferredCurrency": "EUR"}
-    ],
-    "supportedCurrencies": ["USD", "EUR"]
-  }
-]'
-```
-
-## Setting Complex Values
-
-```bash
-# Individual variables
-PUBLIC__app__myFeature__option1=value1
-PUBLIC__app__myFeature__option2=value2
-
-# Or as a single JSON value
-PUBLIC__app__myFeature='{"option1":"value1","option2":"value2"}'
-```
-
-## Security Guidelines
-
-| Prefix | Visibility | Use For |
-|--------|-----------|---------|
-| `PUBLIC__` | Browser + Server | Client IDs, site IDs, feature flags |
-| (none) | Server only | API secrets, private keys, credentials |