Products

Author: simonredfern

src/lib/config/navigation.ts

@@ -26,6 +26,7 @@ import {
   Star,
   Plug,
   Package,
+  CircleHelp,
 } from "@lucide/svelte";
 import { env } from "$env/dynamic/public";
 
@@ -362,12 +363,13 @@ export function getActiveDynamicEndpointsMenuItem(pathname: string) {
 // Products navigation items
 function buildProductsItems(): NavigationItem[] {
   const items: NavigationItem[] = [
-    { href: "/products", label: "Products", iconComponent: Package },
+    { href: "/products", label: "API Products", iconComponent: Package },
     {
       href: "/products/collections",
       label: "Product Collections",
       iconComponent: FolderOpen,
     },
+    { href: "/products/help", label: "Help", iconComponent: CircleHelp },
   ];
 
   return items;

src/routes/(protected)/products/+page.svelte

@@ -90,41 +90,39 @@
 </script>
 
 <svelte:head>
-  <title>Products - API Manager</title>
+  <title>API Products - API Manager</title>
 </svelte:head>
 
 <div class="container mx-auto px-4 py-8">
   <!-- Header -->
   <div class="mb-6 flex items-center justify-between">
     <div>
       <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">
-        Products
+        API Products
       </h1>
       <p class="mt-1 text-gray-600 dark:text-gray-400">
-        Manage bank financial products that TPPs can subscribe to
+        Manage API products that TPPs can subscribe to
       </p>
     </div>
-    {#if selectedBankId}
-      <a
-        href="/products/create?bank_id={selectedBankId}"
-        class="inline-flex items-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
+    <a
+      href="/products/create{selectedBankId ? `?bank_id=${selectedBankId}` : ''}"
+      class="inline-flex items-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
+    >
+      <svg
+        class="mr-2 h-4 w-4"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
       >
-        <svg
-          class="mr-2 h-4 w-4"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 4v16m8-8H4"
-          />
-        </svg>
-        Create Product
-      </a>
-    {/if}
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M12 4v16m8-8H4"
+        />
+      </svg>
+      Create an API Product
+    </a>
   </div>
 
   <!-- Bank Selector -->

src/routes/(protected)/products/create/+page.server.ts

@@ -0,0 +1,69 @@
+import type { PageServerLoad } from "./$types";
+import { error } from "@sveltejs/kit";
+import { createLogger } from "$lib/utils/logger";
+import { obp_requests } from "$lib/obp/requests";
+import { SessionOAuthHelper } from "$lib/oauth/sessionHelper";
+
+const logger = createLogger("CreateProductPageServer");
+
+interface ApiCollection {
+  api_collection_id: string;
+  user_id: string;
+  api_collection_name: string;
+  is_sharable: boolean;
+  description: string;
+}
+
+interface ApiCollectionsResponse {
+  api_collections: ApiCollection[];
+}
+
+export const load: PageServerLoad = async ({ locals }) => {
+  const session = locals.session;
+
+  if (!session?.data?.user) {
+    throw error(401, "Unauthorized");
+  }
+
+  // Get the OAuth session data
+  const sessionOAuth = SessionOAuthHelper.getSessionOAuth(session);
+  const accessToken = sessionOAuth?.accessToken;
+
+  if (!accessToken) {
+    logger.warn("No access token available for create product page");
+    return {
+      collections: [],
+      hasApiAccess: false,
+      error: "No API access token available",
+    };
+  }
+
+  try {
+    logger.info("=== FETCHING API COLLECTIONS FOR PRODUCT CREATE ===");
+    const endpoint = `/obp/v6.0.0/my/api-collections`;
+    logger.info(`Request: ${endpoint}`);
+
+    const response: ApiCollectionsResponse = await obp_requests.get(
+      endpoint,
+      accessToken,
+    );
+
+    logger.info(
+      `Response: ${response.api_collections?.length || 0} collections`,
+    );
+
+    return {
+      collections: response.api_collections || [],
+      hasApiAccess: true,
+    };
+  } catch (err) {
+    logger.error("Error loading API collections:", err);
+
+    return {
+      collections: [],
+      hasApiAccess: false,
+      error:
+        err instanceof Error ? err.message : "Failed to load API collections",
+    };
+  }
+};