C2 subscritions selling plans frontend

.github/workflows/cicd.yml

@@ -13,12 +13,12 @@ jobs:
     concurrency: ${{ github.workflow }}-${{ github.ref }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6 # v6.0.2
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v5 # v5.0.0
       - name: Setup Node.js
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6 # v6.3.0
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'

.github/workflows/codeql-analysis.yml

@@ -35,11 +35,11 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v5
+      uses: actions/checkout@v6 # v6.0.2
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v4
+      uses: github/codeql-action/init@v4 # v4.34.1
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -50,7 +50,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v4
+      uses: github/codeql-action/autobuild@v4 # v4.34.1
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -64,4 +64,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v4
+      uses: github/codeql-action/analyze@v4 # v4.34.1

.github/workflows/release.yaml

@@ -7,19 +7,24 @@ on:
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
+permissions:
+  id-token: write  # Required for OIDC
+  contents: write # Required to push tags and releases
+  pull-requests: write # Required for changesets to create release PRs
+
 jobs:
   release:
     name: Release
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6 # v6.0.2
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v5 # v5.0.0
 
       - name: Setup Node
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6 # v6.3.0
         with:
           node-version-file: ".nvmrc"
           cache: "pnpm"
@@ -29,10 +34,9 @@ jobs:
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets
-        uses: changesets/action@v1
+        uses: changesets/action@v1 # v1.7.0
         with:
           version: pnpm run version
           publish: pnpm publish -r
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_SECRET }}

.github/workflows/stale.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Close Stale Issues
-      uses: actions/stale@v10
+      uses: actions/stale@v10 # v10.2.0
       with:
         repo-token: ${{ secrets.GITHUB_TOKEN }}
         stale-pr-message: |

examples/nextjs/CHANGELOG.md

@@ -1,5 +1,48 @@
 # nextjs
 
+## 0.1.33
+
+### Patch Changes
+
+- Updated dependencies [8d3f2c2]
+  - @godaddy/[email protected]
+
+## 0.1.32
+
+### Patch Changes
+
+- Updated dependencies [57d6115]
+  - @godaddy/[email protected]
+
+## 0.1.31
+
+### Patch Changes
+
+- Updated dependencies [353dc8b]
+  - @godaddy/[email protected]
+  - @godaddy/[email protected]
+
+## 0.1.30
+
+### Patch Changes
+
+- Updated dependencies [ed3cbef]
+  - @godaddy/[email protected]
+
+## 0.1.29
+
+### Patch Changes
+
+- Updated dependencies [b3c0dad]
+  - @godaddy/[email protected]
+
+## 0.1.28
+
+### Patch Changes
+
+- Updated dependencies [c1ebb52]
+  - @godaddy/[email protected]
+
 ## 0.1.27
 
 ### Patch Changes

examples/nextjs/app/page.tsx

@@ -68,7 +68,7 @@ export default async function Home() {
         },
         paypal: {
           processor: 'paypal',
-          checkoutTypes: ['express', 'standard'],
+          checkoutTypes: ['standard'],
         },
       },
       operatingHours: {

examples/nextjs/app/store/actions.ts

@@ -3,6 +3,41 @@
 import { createCheckoutSession } from '@godaddy/react/server';
 import { redirect } from 'next/navigation';
 
+/**
+ * Fetches selling plans for given SKU IDs from the external (or local) selling-plans API.
+ * Only runs when SELLING_PLANS_API_URL is set (e.g. in .env.local). If unset, returns
+ * empty so no request is made and no 404 is logged.
+ */
+export async function getSellingPlans(storeId: string, options: any) {
+  const base = process.env.SELLING_PLANS_API_URL;
+  if (!base) {
+    return null;
+  }
+  // API shape: GET /api/v1/selling-plans/{storeId}/groups?skuIds=...
+  const path = `/api/v1/selling-plans/${encodeURIComponent(storeId)}/groups`
+  const url = new URL(path, base);
+  for (const id of options.skuIds ?? []) {
+    url.searchParams.append('skuIds', id);
+  }
+  for (const id of options.skuGroupIds ?? []) {
+    url.searchParams.append('skuGroupIds', id);
+  }
+  url.searchParams.append('includes', 'catalogPrices');
+  url.searchParams.append('includes', 'allocations');
+  // url.searchParams.append('planStatus', 'ACTIVE'); // uncomment it when push to repo
+  try {
+    const res = await fetch(url.toString(), { cache: 'no-store' });
+    if (!res.ok) {
+      return null;
+    }
+    const data = await res.json();
+    return data.groups;
+  } catch {
+    // Network/socket errors (e.g. selling-plans API not running): fail silently so product page still works
+    return null;
+  }
+}
+
 export async function checkoutWithOrder(orderId: string) {
   const session = await createCheckoutSession(
     {

examples/nextjs/app/store/product/[productId]/product.tsx

@@ -3,10 +3,20 @@
 import { ProductDetails } from '@godaddy/react';
 import { ArrowLeft } from 'lucide-react';
 import Link from 'next/link';
+import { useState } from 'react';
+import { SellingPlanDropdown } from '../selling-plan-dropdown';
 import { useCart } from '../../layout';
 
+/** Route param productId is the SKU Group id (product id from catalog skuGroups). */
 export default function Product({ productId }: { productId: string }) {
   const { openCart } = useCart();
+  const [selectedSellingPlanId, setSelectedSellingPlanId] = useState<string | null>(null);
+  const [selectedSellingPlan, setSelectedSellingPlan] = useState<any>(null);
+
+  const handleSellingPlanChange = (planId: string | null, plan: any) => {
+    setSelectedSellingPlanId(planId);
+    setSelectedSellingPlan(plan);
+  };
 
   return (
     <div className='container mx-auto'>
@@ -17,7 +27,23 @@ export default function Product({ productId }: { productId: string }) {
         <ArrowLeft className='h-4 w-4' />
         Back to Store
       </Link>
-      <ProductDetails productId={productId} onAddToCartSuccess={openCart} />
+      <ProductDetails
+        productId={productId}
+        onAddToCartSuccess={openCart}
+        selectedSellingPlanId={selectedSellingPlanId}
+        selectedSellingPlan={selectedSellingPlan}
+        targets={{
+          'product-details.add-to-cart.before': ({ skuId, storeId }) => (
+            <SellingPlanDropdown
+              storeId={storeId ?? process.env.NEXT_PUBLIC_GODADDY_STORE_ID ?? ''}
+              skuId={skuId}
+              skuGroupId={productId}
+              selectedPlanId={selectedSellingPlanId}
+              onSelectionChange={handleSellingPlanChange}
+            />
+          ),
+        }}
+      />
     </div>
   );
 }

examples/nextjs/app/store/product/selling-plan-dropdown.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { getSellingPlans } from '../actions';
+
+/**
+ * Resolve checkout price for the current SKU from the plan's catalogPrices.
+ * API shape: plan.catalogPrices[] has { skuId, checkoutPrices: [{ value, currency }] }.
+ * Picks the entry matching skuId and returns checkoutPrices[0] as { value, currencyCode }.
+ * Value is in minor units (cents).
+ */
+function normalizeCheckoutPrice(
+  plan: any,
+  skuId: string | null
+): { value: number; currencyCode?: string } | undefined {
+  if (plan.checkoutPrice?.value != null) {
+    return {
+      value: Number(plan.checkoutPrice.value),
+      currencyCode: plan.checkoutPrice.currencyCode ?? plan.checkoutPrice.currency,
+    };
+  }
+  if (skuId && Array.isArray(plan.catalogPrices)) {
+    const forSku = plan.catalogPrices.find((c: any) => c.skuId === skuId);
+    const checkout = forSku?.checkoutPrices?.[0];
+    if (checkout?.value != null) {
+      return {
+        value: Number(checkout.value),
+        currencyCode: checkout.currencyCode ?? checkout.currency,
+      };
+    }
+  }
+  const first = plan.catalogPrices?.[0];
+  const checkoutFirst = first?.checkoutPrices?.[0];
+  if (checkoutFirst?.value != null) {
+    return {
+      value: Number(checkoutFirst.value),
+      currencyCode: checkoutFirst.currencyCode ?? checkoutFirst.currency,
+    };
+  }
+  if (plan.priceAtCheckout?.value != null) {
+    return {
+      value: Number(plan.priceAtCheckout.value),
+      currencyCode: plan.priceAtCheckout.currencyCode ?? plan.priceAtCheckout.currency,
+    };
+  }
+  return undefined;
+}
+
+export function SellingPlanDropdown({
+  storeId,
+  skuId,
+  skuGroupId,
+  selectedPlanId,
+  onSelectionChange,
+}: {
+  storeId: string;
+  skuId: string | null;
+  skuGroupId: string | null;
+  selectedPlanId: string | null;
+  onSelectionChange: (planId: string | null, plan: any) => void;
+}) {
+  const [plans, setPlans] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  /**
+   * Loads selling plans from the selling-plans API for the current skuId/skuGroupId.
+   *
+   * Production note: This triggers one API call per product (or per PDP visit). To reduce
+   * requests, consider a strategy to preload selling groups on the store list page: fetch 
+   * groups for all visible skuIds and skuGroupIds once, pass the result (e.g. via context 
+   * or cache) into this component.
+   */ 
+  const loadPlans = useCallback(async () => {
+    if (!storeId || (!skuId && !skuGroupId)) {
+      setPlans([]);
+      return;
+    }
+    setLoading(true);
+    try {
+      const groups: any = await getSellingPlans(storeId, {
+        skuIds: skuId ? [skuId] : [],
+        skuGroupIds: skuGroupId ? [skuGroupId] : [],
+      }) ?? [];
+      // 1. Max 2 selling groups: one for skuId, one for skuGroupId
+      // 2. Each group has sellingPlans and allocations
+      // 3. Each allocation has resourceType (SKU | SKU_GROUP) and resourceId
+      // 4. Prefer group that matches skuId; else group that matches skuGroupId; else []
+      const forSku = groups?.find((g: any) =>
+        (g.allocations ?? []).some(
+          (a: any) => a.resourceType === 'SKU' && a.resourceId === skuId
+        )
+      );
+      const forSkuGroup = groups?.find((g: any) =>
+        (g.allocations ?? []).some(
+          (a: any) =>
+            a.resourceType === 'SKU_GROUP' && a.resourceId === skuGroupId
+        )
+      );
+      const sellingPlans = (forSku ?? forSkuGroup)?.sellingPlans ?? [];
+      setPlans(sellingPlans);
+      if (sellingPlans.length === 0) {
+        onSelectionChange(null, null);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [storeId, skuId, skuGroupId, onSelectionChange]);
+
+  useEffect(() => {
+    loadPlans();
+  }, [loadPlans]);
+
+  if (loading || plans.length === 0) {
+    return null;
+  }
+
+  const value = selectedPlanId ?? '';
+
+  return (
+    <div className='space-y-2'>
+      <label className='text-sm font-medium text-foreground' htmlFor='selling-plan'>
+        Subscription
+      </label>
+      <select
+        id='selling-plan'
+        className='flex h-10 w-full items-center justify-between rounded-md border border-border bg-input px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring'
+        value={value}
+        onChange={e => {
+          const val = e.target.value;
+          const raw = val ? plans.find(p => p.planId === val) ?? null : null;
+          const plan = raw
+            ? {
+                ...raw,
+                checkoutPrice: normalizeCheckoutPrice(raw, skuId),
+              }
+            : null;
+          onSelectionChange(val || null, plan);
+        }}
+      >
+        <option value=''>One-time purchase</option>
+        {plans.map(p => (
+          <option key={p.planId} value={p.planId}>
+            {p.name ?? p.planId}
+            {p.category ? ` · ${p.category}` : ''}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

examples/nextjs/env.sample

@@ -25,3 +25,7 @@ NEXT_PUBLIC_PAYPAL_CLIENT_ID=
 # MercadoPago Credentials
 NEXT_PUBLIC_MERCADOPAGO_PUBLIC_KEY=
 NEXT_PUBLIC_MERCADOPAGO_COUNTRY=AR
+
+# Selling plans API (external or local in dev)
+# In local development set to your local API base URL (e.g. http://localhost:8443)
+SELLING_PLANS_API_URL=