Feat/payments redesign 4 activity

apps/sdp-web/playwright/tests/payments-command-center.e2e.spec.ts

@@ -29,7 +29,7 @@ test.describe("payments command center and transaction ledger", () => {
     const destinations = [
       ["Pay", "/dashboard/payments/pay"],
       ["Deposit", "/dashboard/payments/deposit"],
-      ["Request payment", "/dashboard/payments/requests"],
+      ["Request", "/dashboard/payments/requests"],
       ["Schedule", "/dashboard/payments/recurring/create"],
     ] as const;
     for (const [name, href] of destinations) {
@@ -38,15 +38,20 @@ test.describe("payments command center and transaction ledger", () => {
       ).toHaveAttribute("href", href);
     }
 
-    for (const section of ["balance", "activity", "upcoming", "network"]) {
+    for (const section of ["balance", "summary", "actions", "activity"]) {
       await expect(
         commandCenter.locator(`[data-payments-overview-section="${section}"]`)
       ).toBeVisible({
         timeout: 120_000,
       });
     }
+    // With transfers the activity list ends on "View all transactions"; a project with none
+    // shows the empty state, whose one way on is "Open Transactions".
     await expect(
-      commandCenter.getByRole("link", { name: "View all transactions" })
+      commandCenter
+        .locator('[data-payments-overview-section="activity"]')
+        .getByRole("link", { name: /^(View all transactions|Open Transactions)$/ })
+        .first()
     ).toHaveAttribute("href", "/dashboard/payments/transactions");
   });
 
@@ -57,7 +62,7 @@ test.describe("payments command center and transaction ledger", () => {
     await page.emulateMedia({ reducedMotion: "reduce" });
     await page.goto("/dashboard/payments/transactions", { waitUntil: "domcontentloaded" });
 
-    const search = page.getByRole("textbox", { name: /search transactions/i });
+    const search = page.getByRole("searchbox", { name: /search transactions/i });
     await expect(search).toBeVisible();
     await search.fill("invoice-42");
     await search.press("Enter");

apps/sdp-web/playwright/tests/payments-recurring.e2e.spec.ts

@@ -64,56 +64,62 @@ test.describe
     test("creates and displays a recurring payment", async ({ page }) => {
       await page.goto("/dashboard/payments");
 
-      await expect(page.getByRole("link", { name: "Recurring", exact: true })).toBeVisible();
-      await page.getByRole("link", { name: "Recurring", exact: true }).click();
+      await expect(page.getByRole("link", { name: "Scheduled", exact: true })).toBeVisible();
+      await page.getByRole("link", { name: "Scheduled", exact: true }).click();
       await expect(page).toHaveURL(/\/dashboard\/payments\/recurring$/);
       await expect(
-        page.locator("main").getByRole("heading", { name: "Recurring payments" }).first()
+        page.locator("main").getByRole("heading", { name: "Schedules" }).first()
       ).toBeVisible();
       await expect(
-        page.getByText("No recurring payments yet.").or(page.locator("tbody tr").first())
+        page.getByText("You haven't created a schedule yet").or(page.locator("tbody tr").first())
       ).toBeVisible({ timeout: 120_000 });
 
-      await page.getByRole("link", { name: "Create recurring payment" }).first().click();
+      await page.getByRole("link", { name: "New", exact: true }).click();
       await expect(page).toHaveURL(/\/dashboard\/payments\/recurring\/create$/);
 
       const app = page.locator("main");
-      const next = app.getByRole("button", { name: "Next", exact: true });
+      const next = app.getByRole("button", { name: "Continue", exact: true });
 
-      await app.getByRole("button", { name: "Counterparty", exact: true }).click();
-      await page.getByPlaceholder("Search counterparties").fill(recurringCounterpartyName);
+      // Payment: the contact's only Solana address is the destination; a contact with several
+      // gets a Destination field instead.
+      await app.getByRole("button", { name: "Contact", exact: true }).click();
+      await page.getByPlaceholder("Search contacts").fill(recurringCounterpartyName);
       await page.getByRole("button", { name: recurringCounterpartyName }).click();
-      await expect(next).toBeEnabled({ timeout: 120_000 });
-      await next.click();
-
-      await app.getByRole("button", { name: "Destination account", exact: true }).click();
-      await page.getByRole("button", { name: recurringAccountLabel }).click();
-      await expect(next).toBeEnabled({ timeout: 120_000 });
-      await next.click();
+      const destination = app.getByRole("button", { name: "Destination", exact: true });
+      if (await destination.isVisible()) {
+        await destination.click();
+        await page.getByRole("button", { name: recurringAccountLabel }).click();
+      }
 
-      await app.getByRole("button", { name: "Funding wallet", exact: true }).click();
+      await app.getByRole("button", { name: "Source wallet", exact: true }).click();
       await page.getByPlaceholder("Search wallets").fill(recurringWalletLabel);
       await page.getByRole("button", { name: recurringWalletLabel }).click();
 
-      await app.getByRole("button", { name: "Asset", exact: true }).click();
+      await app.getByRole("button", { name: "Token", exact: true }).click();
       await expect(page.getByRole("button", { name: /^SOL(?:\s|$)/ })).toHaveCount(0);
       await page
         .getByRole("button", { name: new RegExp(`^${recurringTokenSymbol}( SDP-Minted)?$`) })
         .click();
 
       await app.getByLabel("Amount", { exact: true }).fill("7.5");
-      await app.getByRole("button", { name: "Billing interval", exact: true }).click();
+      await expect(next).toBeEnabled({ timeout: 120_000 });
+      await next.click();
+
+      // When: every day, starting after activation.
+      await app.getByRole("button", { name: "Repeats", exact: true }).click();
       await page.getByRole("button", { name: "Every day" }).click();
       await expect(next).toBeEnabled({ timeout: 120_000 });
       await next.click();
 
-      await expect(app.getByText("Review recurring payment")).toBeVisible();
-      await expect(app.getByText(recurringCounterpartyName)).toBeVisible();
-      await expect(app.getByText(recurringWalletLabel)).toBeVisible();
-      await expect(app.getByText(`7.5 ${recurringTokenSymbol}`)).toBeVisible();
+      // Review.
+      await expect(
+        app.getByText(`7.50 ${recurringTokenSymbol} to ${recurringCounterpartyName}`)
+      ).toBeVisible();
+      await expect(app.getByText(`From ${recurringWalletLabel}`)).toBeVisible();
+      await expect(app.getByText("Every day", { exact: true })).toBeVisible();
 
       const createButton = app.getByRole("button", {
-        name: "Create recurring payment",
+        name: "Create the schedule",
         exact: true,
       });
       await expect(createButton).toBeEnabled({ timeout: 120_000 });
@@ -129,28 +135,36 @@ test.describe
       await expect(page.getByText("Pending activation", { exact: true })).toBeVisible();
       await expect(page.getByText("Every day", { exact: true }).first()).toBeVisible();
 
-      await page.getByRole("link", { name: "Back to recurring payments" }).click();
+      await page.getByRole("link", { name: "Schedules", exact: true }).click();
       await expect(page).toHaveURL(/\/dashboard\/payments\/recurring$/);
       const recurringRow = page
-        .getByRole("button")
+        .locator("tbody tr")
         .filter({ hasText: recurringCounterpartyName })
         .first();
       await expect(recurringRow).toBeVisible();
       await expect(recurringRow).toContainText(recurringWalletLabel);
       await expect(recurringRow).toContainText(`7.50 ${recurringTokenSymbol}`);
 
-      await recurringRow.getByText(`7.50 ${recurringTokenSymbol}`, { exact: true }).click();
+      // The row's title, "<amount> to <contact>", is its link.
+      await recurringRow
+        .getByRole("link", { name: `7.50 ${recurringTokenSymbol} to ${recurringCounterpartyName}` })
+        .click();
       await expect(page).toHaveURL(
         new RegExp(`/dashboard/payments/recurring/${recurringPaymentId}$`)
       );
+      // The header names the schedule by what it pays and to whom.
       await expect(
-        page.locator("main").getByRole("heading", { level: 1, name: "Recurring payment" })
+        page.locator("main").getByRole("heading", {
+          level: 1,
+          name: `7.50 ${recurringTokenSymbol} to ${recurringCounterpartyName}`,
+        })
       ).toBeVisible();
-      await expect(page.getByRole("link", { name: "Back to recurring payments" })).toBeVisible();
-      await expect(page.getByText("Payment reference", { exact: true })).toBeVisible();
-      await expect(page.getByText("Billing interval", { exact: true })).toBeVisible();
-      await expect(page.getByText("Funding wallet", { exact: true })).toBeVisible();
-      await expect(page.getByText("Receiving wallet", { exact: true })).toBeVisible();
+      await expect(page.getByRole("link", { name: "Schedules", exact: true })).toBeVisible();
+      // The plan reads as labelled lines; the schedule's identifiers sit under Details.
+      const recordLabels = page.locator("main dt");
+      for (const label of ["Pays", "To", "From", "Repeats", "Next run", "Schedule ID"]) {
+        await expect(recordLabels.getByText(label, { exact: true })).toBeVisible();
+      }
       await expect(page.locator("main").getByText("Token mint", { exact: true })).toHaveCount(0);
       await expect(page.locator("main").getByText("Plan PDA", { exact: true })).toHaveCount(0);
       await expect(page.locator("main").getByText("Subscription PDA", { exact: true })).toHaveCount(

apps/sdp-web/src/app/dashboard/payments/counterparty/counterparty-playground-config.redesign.ts

@@ -0,0 +1,183 @@
+import { COUNTERPARTY_ENTITY_TYPES } from "@sdp/types";
+import type {
+  ApiPlaygroundEndpointConfig,
+  ApiPlaygroundFieldConfig,
+} from "@/components/api-playground-shell";
+import type { MessageKey, TranslationValues } from "@/i18n/messages";
+import { mergeOpenApiPlaygroundEndpoints } from "@/lib/api-playground-openapi-catalog";
+
+export interface CounterpartyPlaygroundView {
+  id: string;
+  displayName: string;
+}
+
+const exampleCounterpartyId = "cpty_abc123";
+const exampleDisplayName = "Acme Corp";
+
+type Translate = (key: MessageKey, values?: TranslationValues) => string;
+const counterpartyIdPathLabel = ["{", "counterpartyId", "}"].join("");
+
+function buildCounterpartyIdField(t: Translate): ApiPlaygroundFieldConfig {
+  return {
+    key: "counterpartyId",
+    label: counterpartyIdPathLabel,
+    placeholder: t("DashboardPayments.counterparty.playgroundCounterpartyIdPlaceholder"),
+    required: true,
+  };
+}
+
+export function buildCounterpartyPlaygroundEndpointConfigs(
+  counterparties: CounterpartyPlaygroundView[],
+  t: Translate
+): ApiPlaygroundEndpointConfig[] {
+  const entityTypeOptions = COUNTERPARTY_ENTITY_TYPES.map((value) => ({
+    label:
+      value === "individual"
+        ? t("DashboardPayments.counterparty.individual")
+        : t("DashboardPayments.counterparty.business"),
+    value,
+  }));
+  const counterpartyOptions = counterparties.map((cp) => ({
+    value: cp.id,
+    label: cp.displayName,
+  }));
+  const firstCounterpartyOption = counterpartyOptions[0];
+  const counterpartyIdField: ApiPlaygroundFieldConfig =
+    firstCounterpartyOption === undefined
+      ? buildCounterpartyIdField(t)
+      : {
+          key: "counterpartyId",
+          label: counterpartyIdPathLabel,
+          placeholder: t("DashboardPayments.counterparty.playgroundCounterpartyIdPlaceholder"),
+          kind: "select",
+          options: counterpartyOptions,
+          defaultValue: firstCounterpartyOption.value,
+          required: true,
+        };
+
+  const firstId = counterparties[0]?.id ?? exampleCounterpartyId;
+  const firstName = counterparties[0]?.displayName ?? exampleDisplayName;
+
+  const curatedEndpoints: ApiPlaygroundEndpointConfig[] = [
+    {
+      id: "list-counterparties",
+      title: t("DashboardPayments.counterparty.listCounterparties"),
+      method: "GET",
+      path: "/v1/counterparties",
+      pathFields: [],
+      bodyFields: [],
+      expectedResponse: {
+        counterparties:
+          counterparties.length > 0
+            ? counterparties.map((cp) => ({ id: cp.id, displayName: cp.displayName }))
+            : [{ id: exampleCounterpartyId, displayName: exampleDisplayName }],
+        total: counterparties.length || 1,
+        page: 1,
+        pageSize: 100,
+      },
+    },
+    {
+      id: "get-counterparty",
+      title: t("DashboardPayments.counterparty.getCounterparty"),
+      method: "GET",
+      path: "/v1/counterparties/{counterpartyId}",
+      pathFields: [counterpartyIdField],
+      bodyFields: [],
+      expectedResponse: {
+        counterparty: {
+          id: firstId,
+          displayName: firstName,
+          entityType: "business",
+          status: "active",
+        },
+      },
+    },
+    {
+      id: "create-counterparty",
+      title: t("DashboardPayments.counterparty.createCounterparty"),
+      method: "POST",
+      path: "/v1/counterparties",
+      pathFields: [],
+      bodyFields: [
+        {
+          key: "displayName",
+          label: "displayName",
+          placeholder: t("DashboardPayments.counterparty.businessNamePlaceholder"),
+          defaultValue: exampleDisplayName,
+          required: true,
+        },
+        {
+          key: "entityType",
+          label: "entityType",
+          placeholder: t("DashboardPayments.counterparty.selectEntityType"),
+          kind: "select",
+          options: entityTypeOptions,
+          defaultValue: "business",
+          required: true,
+        },
+        {
+          key: "externalId",
+          label: "externalId",
+          placeholder: t("DashboardPayments.newDesign.counterparty.externalIdPlaceholder"),
+        },
+      ],
+      expectedResponse: {
+        counterparty: {
+          id: exampleCounterpartyId,
+          displayName: exampleDisplayName,
+          entityType: "business",
+          status: "active",
+          createdAt: new Date().toISOString(),
+        },
+      },
+    },
+    {
+      id: "update-counterparty",
+      title: t("DashboardPayments.counterparty.updateCounterparty"),
+      method: "PATCH",
+      path: "/v1/counterparties/{counterpartyId}",
+      pathFields: [counterpartyIdField],
+      bodyFields: [
+        {
+          key: "displayName",
+          label: "displayName",
+          placeholder: t("DashboardPayments.counterparty.updatedDisplayNamePlaceholder"),
+        },
+        {
+          key: "entityType",
+          label: "entityType",
+          placeholder: t("DashboardPayments.counterparty.selectEntityType"),
+          kind: "select",
+          options: entityTypeOptions,
+        },
+        {
+          key: "externalId",
+          label: "externalId",
+          placeholder: t("DashboardPayments.newDesign.counterparty.externalIdPlaceholder"),
+        },
+      ],
+      expectedResponse: {
+        counterparty: {
+          id: firstId,
+          displayName: firstName,
+          entityType: "business",
+          status: "active",
+        },
+      },
+    },
+    {
+      id: "delete-counterparty",
+      title: t("DashboardPayments.counterparty.deleteCounterparty"),
+      method: "DELETE",
+      path: "/v1/counterparties/{counterpartyId}",
+      pathFields: [counterpartyIdField],
+      bodyFields: [],
+      expectedResponse: {
+        deleted: true,
+        counterpartyId: firstId,
+      },
+    },
+  ];
+
+  return mergeOpenApiPlaygroundEndpoints("counterparties", curatedEndpoints);
+}