Prototyping transfer flows

README.md

@@ -63,6 +63,7 @@ Vercel CLI 33.5.5
 - Set the "Base URL" to your deployed project's URL e.g. https://example-marketplace-integration.vercel.app
 - Set the "Redirect Login URL" to your deployed projects URL with the path `/callback` e.g. https://example-marketplace-integration.vercel.app/callback
 - Click the "Update" button at the bottom to save your changes.
+-
 
 6. In the same Marketplace Integration Settings, create a product for your Vercel Integration using the "Create Product" button. A "product" maps to your own products you want to sell on Vercel. Depending on the product type (e.g. storage), the Vercel dashboard will understand how to interact with your product.
 

app/connect/configure/actions.ts

@@ -0,0 +1,21 @@
+"use server";
+
+import { requestTransferToMarketplace } from "@/lib/vercel/marketplace-api";
+import { billingPlans } from "@/lib/partner";
+
+export async function requestTransferToVercelAction(formData: FormData) {
+  const installationId = formData.get("installationId") as string;
+  const transferId = Math.random().toString(36).substring(2);
+  const requester = "Vanessa";
+  const billingPlan = billingPlans.find((plan) => plan.paymentMethodRequired);
+  if (!billingPlan) {
+    throw new Error("No billing plan found.");
+  }
+  const result = await requestTransferToMarketplace(
+    installationId,
+    transferId,
+    requester,
+    billingPlan
+  );
+  return result;
+}

app/connect/configure/page.tsx

@@ -1,12 +1,85 @@
+import TransferToVercelRedirect from "./transfer-to-vercel-redirect";
+
 export default async function Page({
   searchParams: { configurationId },
 }: {
   searchParams: { configurationId: string };
 }) {
   return (
-    <div className="space-y-10 text-center p-10">
-      <h1 className="text-lg font-medium">Nothing to configure here. 👀</h1>
-      <h3 className="font-mono">{configurationId}</h3>
+    <div className="container mx-auto py-6 max-w-5xl">
+      <div className="flex items-center justify-between border-b pb-4 mb-8">
+        <div className="flex items-center gap-4">
+          <div className="w-10 h-10 bg-gray-100"></div>
+          <h1 className="text-2xl font-bold text-blue-600">ACME Corp</h1>
+        </div>
+        <div className="font-mono text-sm ">
+          Configuration ID: {configurationId}
+        </div>
+        <div className="text-lg font-medium">ACME</div>
+      </div>
+
+      <div className="space-y-8">
+        <div>
+          <h1 className="text-4xl font-bold mb-2">Billing</h1>
+          <p className="text-gray-500 text-lg">
+            Manage your billing information and payment methods
+          </p>
+        </div>
+
+        <div className="border-b mb-6">
+          <div className="flex space-x-6">
+            <button className="py-2 px-1 border-b-2 border-black font-medium">
+              Payment Methods
+            </button>
+            <button className="py-2 px-1 text-gray-500">Billing History</button>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg border p-6 mb-6">
+          <div className="pb-3 mb-4">
+            <h2 className="text-2xl font-semibold">Payment Methods</h2>
+            <p className="text-gray-500 text-base">
+              Manage your payment methods for ACME services
+            </p>
+          </div>
+
+          <div className="border-t pt-6">
+            <div className="flex items-center justify-between p-4 border rounded-lg mb-6">
+              <div className="flex items-center gap-4">
+                <div>
+                  <div className="font-medium">Visa ending in 4242</div>
+                  <div className="text-gray-500">Expires 04/2025</div>
+                </div>
+              </div>
+              <button className="px-4 py-2 border rounded-md" disabled={true}>
+                Edit
+              </button>
+            </div>
+
+            <button className="w-full py-2 border rounded-md" disabled={true}>
+              Add Payment Method
+            </button>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg border p-6">
+          <div className="pb-3 mb-4">
+            <h2 className="text-2xl font-semibold">Account Ownership</h2>
+            <p className="text-gray-500 text-base">
+              Transfer your account ownership and billing to your Vercel team
+            </p>
+          </div>
+
+          <div className="space-y-6">
+            <p className="text-gray-600">
+              Transferring ownership will move all billing responsibilities to
+              the selected Vercel team.
+            </p>
+
+            <TransferToVercelRedirect configurationId={configurationId} />
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

app/connect/configure/transfer-to-vercel-redirect.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import { requestTransferToVercelAction } from "./actions";
+
+interface TransferToVercelRedirectProps {
+  configurationId: string;
+}
+
+export default function TransferToVercelRedirect({
+  configurationId,
+}: TransferToVercelRedirectProps) {
+  const [continueUrl, setContinueUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleTransfer() {
+    setLoading(true);
+    const formData = new FormData();
+    formData.append("installationId", configurationId);
+
+    try {
+      const result = await requestTransferToVercelAction(formData);
+      setContinueUrl(result.continueUrl);
+    } catch (error: any) {
+      console.error("Transfer failed:", error.message);
+    }
+    setLoading(false);
+  }
+
+  function handleCancel() {
+    setContinueUrl(null);
+  }
+
+  return (
+    <div className="flex flex-col items-center space-y-4">
+      {continueUrl ? (
+        <section className="p-4 border rounded text-center">
+          <p className="mb-4">
+            Please go to Vercel Marketplace to complete the transfer.
+          </p>
+          <div className="flex justify-center gap-4">
+            <a
+              href={continueUrl}
+              target="_blank"
+              className="rounded bg-green-500 text-white px-4 py-2 inline-block"
+              rel="noreferrer"
+            >
+              Proceed to Vercel
+            </a>
+            <button
+              onClick={handleCancel}
+              className="rounded bg-red-500 text-white px-4 py-2"
+            >
+              Cancel
+            </button>
+          </div>
+        </section>
+      ) : (
+        <button
+          onClick={handleTransfer}
+          disabled={loading}
+          className="rounded bg-blue-500 text-white px-4 py-2 disabled:opacity-50"
+        >
+          {loading ? "Loading..." : "Transfer to Vercel"}
+        </button>
+      )}
+    </div>
+  );
+}

app/dashboard/auth.ts

@@ -1,4 +1,4 @@
-import { OidcClaims, verifyToken } from "@/lib/vercel/auth";
+import { type OidcClaims, verifyToken } from "@/lib/vercel/auth";
 import { cookies } from "next/headers";
 
 export async function getSession(): Promise<OidcClaims> {

app/dashboard/installation/actions.ts

@@ -9,8 +9,9 @@ import {
   getResourceBalance,
   listResources,
 } from "@/lib/partner";
-import { Balance } from "@/lib/vercel/schemas";
+import type { Balance } from "@/lib/vercel/schemas";
 import {
+  requestTransferFromMarketplace,
   sendBillingData,
   submitPrepaymentBalances,
 } from "@/lib/vercel/marketplace-api";
@@ -49,3 +50,15 @@ export async function sendBillingDataAction() {
   await sendBillingData(installationId, billingData);
   await submitPrepaymentBalances(installationId, balances);
 }
+
+export async function requestTransferFromVercelAction(formData: FormData) {
+  const installationId = formData.get("installationId") as string;
+  const transferId = Math.random().toString(36).substring(2);
+  const requester = "Vanessa";
+  const result = await requestTransferFromMarketplace(
+    installationId,
+    transferId,
+    requester
+  );
+  return result;
+}

app/dashboard/installation/page.tsx

@@ -4,6 +4,7 @@ import { getAccountInfo } from "@/lib/vercel/marketplace-api";
 import { Section } from "../components/section";
 import { addInstallationBalance, sendBillingDataAction } from "./actions";
 import { FormButton } from "../components/form-button";
+import TransferFromVercelRedirect from "./transfer-from-vercel-redirect";
 
 export const dynamic = "force-dynamic";
 
@@ -74,6 +75,9 @@ export default async function IntallationPage() {
           </FormButton>
         </form>
       </Section>
+      <Section title="Transfer from Vercel">
+        <TransferFromVercelRedirect configurationId={session.installation_id} />
+      </Section>
     </main>
   );
 }

app/dashboard/installation/transfer-from-vercel-redirect.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import { requestTransferFromVercelAction } from "./actions";
+
+interface TransferFromVercelRedirectProps {
+  configurationId: string;
+}
+
+export default function TransferFromVercelRedirect({
+  configurationId,
+}: TransferFromVercelRedirectProps) {
+  const [continueUrl, setContinueUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleTransfer() {
+    setLoading(true);
+    const formData = new FormData();
+    formData.append("installationId", configurationId);
+
+    try {
+      const result = await requestTransferFromVercelAction(formData);
+      setContinueUrl(result.continueUrl);
+    } catch (error: any) {
+      console.error("Transfer failed:", error.message);
+    }
+    setLoading(false);
+  }
+
+  function handleCancel() {
+    setContinueUrl(null);
+  }
+
+  return (
+    <div className="flex flex-col items-center space-y-4">
+      {continueUrl ? (
+        <section className="p-4 border rounded text-center">
+          <p className="mb-4">
+            Please go to Vercel Marketplace to complete the transfer.
+          </p>
+          <div className="flex justify-center gap-4">
+            <a
+              href={continueUrl}
+              target="_blank"
+              className="rounded bg-green-500 text-white px-4 py-2 inline-block"
+              rel="noreferrer"
+            >
+              Proceed to Vercel
+            </a>
+            <button
+              onClick={handleCancel}
+              className="rounded bg-red-500 text-white px-4 py-2"
+            >
+              Cancel
+            </button>
+          </div>
+        </section>
+      ) : (
+        <button
+          onClick={handleTransfer}
+          disabled={loading}
+          className="rounded bg-blue-500 text-white px-4 py-2 disabled:opacity-50"
+        >
+          {loading ? "Loading..." : "Transfer from Vercel"}
+        </button>
+      )}
+    </div>
+  );
+}

app/dashboard/resources/[resourceId]/actions.ts

@@ -9,7 +9,7 @@ import {
   updateResource,
   updateResourceNotification,
 } from "@/lib/partner";
-import { Notification, Resource } from "@/lib/vercel/schemas";
+import type { Notification, Resource } from "@/lib/vercel/schemas";
 import { dispatchEvent, updateSecrets } from "@/lib/vercel/marketplace-api";
 import { getSession } from "../../auth";
 import { revalidatePath } from "next/cache";

app/v1/installations/[installationId]/transfers/from-marketplace/route.ts

@@ -0,0 +1,24 @@
+import { installIntegration } from "@/lib/partner";
+import { readRequestBodyWithSchema } from "@/lib/utils";
+import { withAuth } from "@/lib/vercel/auth";
+import { transferInstallationFromMarketplaceRequestSchema } from "@/lib/vercel/schemas";
+
+export const POST = withAuth(async (claims, request) => {
+  const requestBody = await readRequestBodyWithSchema(
+    request,
+    transferInstallationFromMarketplaceRequestSchema
+  );
+
+  if (!requestBody.success) {
+    return new Response(null, { status: 400 });
+  }
+
+  await installIntegration(claims.installation_id, {
+    type: "external",
+    scopes: requestBody.data.scopes,
+    credentials: requestBody.data.credentials,
+    acceptedPolicies: {},
+  });
+
+  return Response.json({});
+});

app/v1/installations/[installationId]/transfers/to-marketplace/route.ts

@@ -0,0 +1,22 @@
+import { installIntegration } from "@/lib/partner";
+import { readRequestBodyWithSchema } from "@/lib/utils";
+import { withAuth } from "@/lib/vercel/auth";
+import { TransferInstallationToMarketplaceRequestSchema } from "@/lib/vercel/schemas";
+
+export const POST = withAuth(async (claims, request) => {
+  const requestBody = await readRequestBodyWithSchema(
+    request,
+    TransferInstallationToMarketplaceRequestSchema
+  );
+
+  if (!requestBody.success) {
+    return new Response(null, { status: 400 });
+  }
+
+  await installIntegration(claims.installation_id, {
+    type: "marketplace",
+    ...requestBody.data,
+  });
+
+  return Response.json({});
+});