@vtex/faststore-plugin-buyer-portal 1.1.106 → 1.1.108

package/src/pages/users.tsx

@@ -1,17 +1,15 @@
 import { getOrgUnitBasicDataService } from "../features/org-units/services";
 import { getRolesIdsService } from "../features/roles/services";
 import { RoleData } from "../features/roles/types";
-import {
-  BuyerPortalProvider,
-  withErrorBoundary,
-} from "../features/shared/components";
+import { withErrorBoundary } from "../features/shared/components";
 import { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
 import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
 import {
   type ClientContext,
-  getClientContext,
   getValidPage,
   withLoaderErrorBoundary,
+  withAuthLoader,
+  withProviders,
 } from "../features/shared/utils";
 import { UsersLayout } from "../features/users/layouts";
 import {
@@ -20,7 +18,7 @@ import {
 } from "../features/users/services";
 
 import type { OrgUnitBasicData } from "../features/org-units/types";
-import type { LoaderData } from "../features/shared/types";
+import type { AuthRouteProps, LoaderData } from "../features/shared/types";
 import type {
   GetUsersByOrgUnitIdServiceProps,
   UserData,
@@ -52,77 +50,80 @@ export type UsersPageQuery = GetUsersByOrgUnitIdServiceProps & {
 
 const loaderFunction = async (
   data: LoaderData<UsersPageQuery>
-): Promise<UsersPageData> => {
-  const { cookie, userId, ...clientContext } = await getClientContext(data);
-
+): Promise<AuthRouteProps<UsersPageData>> => {
   const { orgUnitId, search = "", page = "1" } = data.query;
-  const validPage = getValidPage(page);
 
-  if (!orgUnitId) {
-    return {
-      data: {
-        users: [],
-        total: 0,
-        search: "",
-        page: 1,
-        rolesOptions: [],
-      },
-      context: {
-        clientContext: { cookie, userId, ...clientContext },
-        currentUser: null,
-        currentOrgUnit: null,
-        rolesOptions: [],
-      },
-    };
-  }
+  return withAuthLoader(
+    data,
+    async ({ cookie, userId, customerId, ...clientContext }) => {
+      const validPage = getValidPage(page);
 
-  const [currentOrgUnit, usersResponse, user, rolesOptions] = await Promise.all(
-    [
-      getOrgUnitBasicDataService({
-        id: orgUnitId,
-        cookie,
-      }),
-      getUsersByOrgUnitIdService({
-        cookie,
-        orgUnitId,
-        search: search ?? "",
-        page: validPage ?? 1,
-      }),
-      getUserByIdService({ orgUnitId, userId, cookie }),
-      getRolesIdsService({
-        unitId: orgUnitId,
-        cookie,
-        customerId: clientContext.customerId,
-      }),
-    ]
-  );
+      if (!orgUnitId) {
+        return {
+          data: {
+            users: [],
+            total: 0,
+            search: "",
+            page: 1,
+            rolesOptions: [],
+          },
+          context: {
+            clientContext: { cookie, userId, customerId, ...clientContext },
+            currentUser: null,
+            currentOrgUnit: null,
+            rolesOptions: [],
+          },
+        };
+      }
 
-  const { users, total } = usersResponse;
+      const [currentOrgUnit, usersResponse, user, rolesOptions] =
+        await Promise.all([
+          getOrgUnitBasicDataService({
+            id: orgUnitId,
+            cookie,
+          }),
+          getUsersByOrgUnitIdService({
+            cookie,
+            orgUnitId,
+            search: search ?? "",
+            page: validPage ?? 1,
+          }),
+          getUserByIdService({ orgUnitId, userId, cookie }),
+          getRolesIdsService({
+            unitId: orgUnitId,
+            cookie,
+            customerId,
+          }),
+        ]);
 
-  const mappedUsers = users.map((user) => ({
-    ...user,
-    id: user.id,
-    name: user.name ?? user.email ?? "",
-    email: user.email ?? "",
-  }));
+      const { users, total } = usersResponse;
 
-  return {
-    data: {
-      users: search
-        ? mappedUsers.filter((user) => user.name.includes(search))
-        : mappedUsers,
-      total,
-      search: search,
-      page: validPage,
-      rolesOptions,
-    },
-    context: {
-      clientContext: { cookie, userId, ...clientContext },
-      currentOrgUnit,
-      currentUser: user,
-      rolesOptions,
-    },
-  };
+      const mappedUsers = users.map((user) => ({
+        ...user,
+        id: user.id,
+        name: user.name ?? user.email ?? "",
+        email: user.email ?? "",
+      }));
+
+      return {
+        data: {
+          users: search
+            ? mappedUsers.filter((user) => user.name.includes(search))
+            : mappedUsers,
+          total,
+          search: search,
+          page: validPage,
+          rolesOptions,
+        },
+        context: {
+          clientContext: { cookie, userId, customerId, ...clientContext },
+          currentOrgUnit,
+          currentUser: user,
+          rolesOptions,
+        },
+      };
+    }
+  );
 };
 
 export const loader = withLoaderErrorBoundary(loaderFunction, {
@@ -130,15 +131,17 @@ export const loader = withLoaderErrorBoundary(loaderFunction, {
   redirectToError: true,
 });
 
-const UsersPage = ({ data, context, hasError, error }: UsersPageData) => (
-  <BuyerPortalProvider {...context}>
+const UsersPage = ({ data, hasError, error }: UsersPageData) => (
+  <>
     {hasError ? <ErrorTabsLayout error={error} /> : <UsersLayout data={data} />}
-  </BuyerPortalProvider>
+  </>
 );
 
-export default withErrorBoundary(UsersPage, {
-  tags: {
-    component: "UsersPage",
-    errorType: "users_error",
-  },
-});
+export default withProviders(
+  withErrorBoundary(UsersPage, {
+    tags: {
+      component: "UsersPage",
+      errorType: "users_error",
+    },
+  })
+);