@vtex/faststore-plugin-buyer-portal 1.1.72-experimental.4 → 1.1.72-experimental.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.1.72-experimental.4",
+  "version": "1.1.72-experimental.5",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

package/src/pages/user-details.tsx

@@ -1,3 +1,7 @@
+/**
+ * User Details Page with integrated debug functionality
+ */
+
 import {
   getOrgUnitBasicDataService,
   getOrgUnitByUserIdService,
@@ -57,8 +61,43 @@ export async function loader(
     );
   }
 
+  function createErrorResponse(errorMessage: string, errorDetails?: any) {
+    return {
+      data: { user: null, orgUnit: { id: "", name: "" } },
+      context: {
+        clientContext: {
+          cookie: "",
+          vtexIdclientAutCookie: "",
+          customerId: "",
+          userId: "",
+        },
+        currentOrgUnit: null,
+        currentUser: null,
+      },
+      debug: {
+        logs,
+        error: {
+          message: errorMessage,
+          details: errorDetails,
+          timestamp: new Date().toISOString(),
+        },
+      },
+    };
+  }
+
   addLog("info", "START", "Starting user-details loader");
 
+  // Proteção extra contra dados malformados
+  if (!data) {
+    addLog("error", "VALIDATION", "LoaderData is undefined");
+    return createErrorResponse("LoaderData is undefined - request malformed");
+  }
+
+  if (!data.query) {
+    addLog("error", "VALIDATION", "Query parameters missing");
+    return createErrorResponse("Query parameters missing from request");
+  }
+
   try {
     addLog("info", "REQUEST", "Request info", {
       cookies: Object.keys(data.req?.cookies || {}),
@@ -80,7 +119,10 @@ export async function loader(
         userId,
         orgUnitId,
       });
-      throw new Error("Missing required query parameters: userId or orgUnitId");
+      return createErrorResponse(
+        "Missing required query parameters: userId or orgUnitId",
+        { providedUserId: userId, providedOrgUnitId: orgUnitId }
+      );
     }
 
     addLog("info", "VALIDATION", "Query params validated ✅", {
@@ -96,22 +138,8 @@ export async function loader(
     });
 
     if (!user) {
-      addLog("warn", "USER_SERVICE", "User not found - redirecting");
-      data.res?.writeHead(302, { Location: "/buyer-portal" });
-      data.res?.end();
-
-      return {
-        data: { user: null, orgUnit: { id: "", name: "" } },
-        context: {
-          clientContext: { cookie, ...clientContext },
-          currentOrgUnit: null,
-          currentUser: null,
-        },
-        debug: {
-          logs,
-          error: { message: "User not found", userId, orgUnitId },
-        },
-      };
+      addLog("warn", "USER_SERVICE", "User not found");
+      return createErrorResponse("User not found", { userId, orgUnitId });
     }
 
     addLog("info", "ORG_UNIT_BASIC", "Fetching current org unit...");
@@ -161,118 +189,72 @@ export async function loader(
 
     return result;
   } catch (error) {
+    const errorMessage =
+      error instanceof Error ? error.message : "Unknown error occurred";
+    const errorDetails =
+      error instanceof Error
+        ? {
+            name: error.name,
+            stack: error.stack,
+          }
+        : { rawError: error };
+
     addLog("error", "FATAL_ERROR", "Loader failed with error", {
-      error: error instanceof Error ? error.message : "Unknown error",
-      stack: error instanceof Error ? error.stack : undefined,
+      message: errorMessage,
+      details: errorDetails,
     });
 
-    // Return error page instead of throwing
-    return {
-      data: { user: null, orgUnit: { id: "", name: "" } },
-      context: {
-        clientContext: {
-          cookie: "",
-          vtexIdclientAutCookie: "",
-          customerId: "",
-          userId: "",
-        },
-        currentOrgUnit: null,
-        currentUser: null,
-      },
-      debug: {
-        logs,
-        error:
-          error instanceof Error
-            ? {
-                message: error.message,
-                name: error.name,
-                stack: error.stack,
-              }
-            : { message: "Unknown error", error },
-      },
-    };
+    // Always return a valid response, never throw
+    return createErrorResponse(errorMessage, errorDetails);
   }
 }
 
-const UserDetailsPage = ({ data, context, debug }: UserDetailsPageData) => {
-  // Se tiver debug info (erros), mostrar página de debug
-  if (debug) {
+const UserDetailsPage = (props?: UserDetailsPageData) => {
+  // Se props estiver undefined
+  if (!props) {
     return (
-      <div
-        style={{
-          maxWidth: "900px",
-          margin: "0 auto",
-          padding: "20px",
-          fontFamily: "system-ui, sans-serif",
-        }}
-      >
+      <div style={{ padding: "40px", textAlign: "center" }}>
+        <h1>🚨 Erro de Carregamento</h1>
+        <p>Não foi possível carregar os dados da página.</p>
+        <p>Tente recarregar a página ou verificar sua conexão.</p>
+      </div>
+    );
+  }
+
+  const { data, context, debug } = props;
+
+  // Se tiver debug info (erros), mostrar página simples de debug
+  if (debug?.error) {
+    return (
+      <div style={{ maxWidth: "800px", margin: "0 auto", padding: "20px" }}>
         <div
           style={{
             background: "#fff3cd",
-            border: "1px solid #ffc107",
-            borderRadius: "8px",
             padding: "20px",
             marginBottom: "20px",
+            borderRadius: "8px",
           }}
         >
-          <h1 style={{ color: "#856404", margin: "0 0 10px 0" }}>
-            🚨 Erro na Página User Details
-          </h1>
-          <p style={{ color: "#856404", margin: 0 }}>
-            Ocorreu um erro ao carregar a página. Veja os detalhes abaixo:
-          </p>
+          <h1>🚨 Erro na Página User Details</h1>
+          <p>Ocorreu um erro ao carregar a página.</p>
         </div>
 
-        {/* Logs em tempo real */}
-        <div style={{ marginBottom: "30px" }}>
-          <h2
-            style={{
-              color: "#333",
-              borderBottom: "2px solid #007bff",
-              paddingBottom: "10px",
-            }}
-          >
-            📝 Logs de Execução
-          </h2>
+        <div style={{ marginBottom: "20px" }}>
+          <h2>📝 Logs de Execução</h2>
           <div
             style={{
               background: "#1e1e1e",
-              color: "#ffffff",
+              color: "#fff",
               padding: "20px",
               borderRadius: "8px",
-              fontFamily: "Monaco, Consolas, monospace",
-              fontSize: "13px",
-              maxHeight: "500px",
+              fontFamily: "monospace",
+              fontSize: "12px",
+              maxHeight: "400px",
               overflowY: "auto",
-              border: "1px solid #333",
             }}
           >
-            {debug.logs.map((log, index) => (
-              <div
-                key={index}
-                style={{
-                  marginBottom: "12px",
-                  borderLeft: `4px solid ${
-                    log.level === "error"
-                      ? "#ff4444"
-                      : log.level === "warn"
-                      ? "#ff9800"
-                      : "#4caf50"
-                  }`,
-                  paddingLeft: "15px",
-                  paddingBottom: "8px",
-                }}
-              >
-                <div
-                  style={{
-                    color: "#888",
-                    fontSize: "11px",
-                    marginBottom: "4px",
-                  }}
-                >
-                  {new Date(log.timestamp).toLocaleTimeString("pt-BR")} -{" "}
-                  {log.step}
-                </div>
+            {debug.logs?.map((log, index) => (
+              <div key={index} style={{ marginBottom: "10px" }}>
                 <div
                   style={{
                     color:
@@ -281,24 +263,13 @@ const UserDetailsPage = ({ data, context, debug }: UserDetailsPageData) => {
                         : log.level === "warn"
                         ? "#ffa726"
                         : "#81c784",
-                    fontWeight: "bold",
-                    marginBottom: log.data ? "8px" : 0,
                   }}
                 >
-                  [{log.level.toUpperCase()}] {log.message}
+                  [{log.level.toUpperCase()}] {log.step}: {log.message}
                 </div>
                 {log.data && (
                   <pre
-                    style={{
-                      fontSize: "11px",
-                      color: "#ccc",
-                      background: "#2d2d2d",
-                      padding: "8px",
-                      borderRadius: "4px",
-                      margin: 0,
-                      whiteSpace: "pre-wrap",
-                      overflow: "auto",
-                    }}
+                    style={{ fontSize: "10px", color: "#ccc", margin: "5px 0" }}
                   >
                     {JSON.stringify(log.data, null, 2)}
                   </pre>
@@ -308,27 +279,16 @@ const UserDetailsPage = ({ data, context, debug }: UserDetailsPageData) => {
           </div>
         </div>
 
-        {/* Detalhes do erro */}
         {debug.error && (
-          <div style={{ marginBottom: "30px" }}>
-            <h2
-              style={{
-                color: "#dc3545",
-                borderBottom: "2px solid #dc3545",
-                paddingBottom: "10px",
-              }}
-            >
-              ❌ Detalhes do Erro
-            </h2>
+          <div style={{ marginBottom: "20px" }}>
+            <h2>❌ Detalhes do Erro</h2>
             <pre
               style={{
                 background: "#f8d7da",
-                color: "#721c24",
-                padding: "20px",
+                padding: "15px",
                 borderRadius: "8px",
-                border: "1px solid #f5c6cb",
+                fontSize: "12px",
                 overflow: "auto",
-                fontSize: "13px",
               }}
             >
               {JSON.stringify(debug.error, null, 2)}
@@ -336,47 +296,30 @@ const UserDetailsPage = ({ data, context, debug }: UserDetailsPageData) => {
           </div>
         )}
 
-        {/* Próximos passos */}
         <div
           style={{
             background: "#d1ecf1",
-            border: "1px solid #bee5eb",
+            padding: "15px",
             borderRadius: "8px",
-            padding: "20px",
           }}
         >
-          <h3 style={{ color: "#0c5460", margin: "0 0 15px 0" }}>
-            🔧 Como resolver:
-          </h3>
-          <ol style={{ color: "#0c5460", paddingLeft: "20px" }}>
+          <h3>🔧 Como resolver:</h3>
+          <ol>
             <li>Verifique se você está logado na VTEX</li>
             <li>Confirme se os IDs da URL estão corretos</li>
             <li>Tente fazer logout e login novamente</li>
-            <li>Se o erro persistir, entre em contato com o suporte</li>
+            <li>Abra o console do browser (F12) para ver logs adicionais</li>
           </ol>
-
-          <div
-            style={{
-              marginTop: "15px",
-              padding: "10px",
-              background: "#b8daff",
-              borderRadius: "4px",
-            }}
-          >
-            <strong>💡 Dica:</strong> Abra o console do browser (F12) para ver
-            logs adicionais
-          </div>
         </div>
 
         <script
           dangerouslySetInnerHTML={{
             __html: `
-            // Log debug info to browser console
-            console.group('🔍 USER DETAILS DEBUG INFO');
-            console.log('Error Details:', ${JSON.stringify(debug.error)});
-            console.log('Execution Logs:', ${JSON.stringify(debug.logs)});
-            console.groupEnd();
-          `,
+              console.group('🔍 USER DETAILS DEBUG INFO');
+              console.log('Error Details:', ${JSON.stringify(debug.error)});
+              console.log('Execution Logs:', ${JSON.stringify(debug.logs)});
+              console.groupEnd();
+            `,
           }}
         />
       </div>