@vtex/faststore-plugin-buyer-portal 2.0.13 → 2.0.14

package/src/features/users/layouts/UserDetailsLayout/UserDetailsLayout.tsx

@@ -8,6 +8,7 @@ import {
 import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import { GlobalLayout } from "../../../shared/layouts";
 import { OrgUnitTabsLayout } from "../../../shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
 import { ReassignOrgUnitDrawer } from "../../components";
@@ -29,6 +30,7 @@ export const UserDetailsLayout = ({
   data: { user, rolesOptions },
 }: UserDetailsLayoutProps) => {
   const { currentOrgUnit } = useBuyerPortal();
+  const { t } = useLocalization();
 
   const {
     open: openReassignDrawer,
@@ -45,7 +47,7 @@ export const UserDetailsLayout = ({
   return (
     <GlobalLayout>
       {/* // TODO: Add org unit name and id */}
-      <OrgUnitTabsLayout pageName="Organization">
+      <OrgUnitTabsLayout pageName={t("shared.navigation.organization")}>
         <section data-fs-user-details-section>
           {/* TODO: add a link to the org unit users page */}
           <HeaderInside
@@ -60,7 +62,7 @@ export const UserDetailsLayout = ({
                 data-fs-buyer-portal-user-details-edit
                 onClick={openUpdateUser}
               >
-                Edit details
+                {t("users.actions.editDetails")}
               </button>
               <BasicDropdownMenu.Trigger />
               <UserDropdownMenu
@@ -72,12 +74,16 @@ export const UserDetailsLayout = ({
           </HeaderInside>
           <div data-fs-user-details>
             <div data-fs-buyer-portal-user-details-title>
-              <span data-fs-buyer-portal-user-details-title-label>Details</span>
+              <span data-fs-buyer-portal-user-details-title-label>
+                {t("users.titles.details")}
+              </span>
             </div>
             <hr data-fs-user-details-divider />
 
             <div data-fs-user-details-row>
-              <span data-fs-user-details-row-label>Name</span>
+              <span data-fs-user-details-row-label>
+                {t("users.labels.name")}
+              </span>
               <span data-fs-user-details-row-value>{user?.name}</span>
             </div>
 
@@ -85,7 +91,9 @@ export const UserDetailsLayout = ({
               <>
                 <hr data-fs-user-details-divider />
                 <div data-fs-user-details-row>
-                  <span data-fs-user-details-row-label>Username</span>
+                  <span data-fs-user-details-row-label>
+                    {t("users.labels.username")}
+                  </span>
                   <span data-fs-user-details-row-value>{user?.userName}</span>
                 </div>
               </>
@@ -94,7 +102,9 @@ export const UserDetailsLayout = ({
             <hr data-fs-user-details-divider />
 
             <div data-fs-user-details-row>
-              <span data-fs-user-details-row-label>Phone number</span>
+              <span data-fs-user-details-row-label>
+                {t("users.labels.phoneNumber")}
+              </span>
               <span data-fs-user-details-row-value>
                 {maskPhoneNumber(user?.phone ?? "", "USA")}
               </span>
@@ -103,7 +113,9 @@ export const UserDetailsLayout = ({
             <hr data-fs-user-details-divider />
 
             <div data-fs-user-details-row>
-              <span data-fs-user-details-row-label>Email</span>
+              <span data-fs-user-details-row-label>
+                {t("users.labels.email")}
+              </span>
               <a href={`mailto:${user?.email}`} data-fs-user-details-row-value>
                 {user?.email}
               </a>
@@ -112,7 +124,9 @@ export const UserDetailsLayout = ({
             <hr data-fs-user-details-divider />
 
             <div data-fs-user-details-row>
-              <span data-fs-user-details-row-label>Role</span>
+              <span data-fs-user-details-row-label>
+                {t("users.labels.role")}
+              </span>
               <span
                 data-fs-user-details-row-value
                 data-fs-user-details-row-value-roles
@@ -128,14 +142,16 @@ export const UserDetailsLayout = ({
             <hr data-fs-user-details-divider />
 
             <div data-fs-user-details-row data-fs-user-details-row-org-unit>
-              <span data-fs-user-details-row-label>Organizational Unit</span>
+              <span data-fs-user-details-row-label>
+                {t("users.labels.organizationalUnit")}
+              </span>
               <span data-fs-user-details-row-value>{user?.orgUnit.name}</span>
               <button
                 type="button"
                 data-fs-user-details-change
                 onClick={openReassignDrawer}
               >
-                Change
+                {t("users.actions.change")}
               </button>
             </div>
 

package/src/features/users/layouts/UsersLayout/UsersLayout.tsx

@@ -19,6 +19,7 @@ import {
 import { GlobalLayout } from "../../../shared/layouts";
 import { OrgUnitTabsLayout } from "../../../shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout";
 import { SumaPageLayout } from "../../../shared/layouts/SumaPageLayout/SumaPageLayout";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { CreateUserDrawerSelector } from "../../components";
 import { UserDropdownMenu } from "../../components/UserDropdownMenu/UserDropdownMenu";
@@ -47,6 +48,7 @@ export const UsersLayout = ({
     });
 
   const { currentOrgUnit, featureFlags } = useBuyerPortal();
+  const { t } = useLocalization();
 
   const {
     open: openCreateUserDrawer,
@@ -56,34 +58,34 @@ export const UsersLayout = ({
 
   const columns = getTableColumns({
     actionsLength: 1,
-    nameColumnLabel: "Login",
+    nameColumnLabel: t("users.table.columnLogin"),
     nameColumnKey: "login",
     nameColumnSize: "12rem",
     extraColumns: [
       {
         key: "fullname",
-        label: "Full Name",
+        label: t("users.table.columnFullName"),
         size: "10rem",
         align: "left",
         hideOnScreenSize: "phonemid",
       },
       {
         key: "email",
-        label: "E-mail",
+        label: t("users.table.columnEmail"),
         size: "8rem",
         align: "left",
         hideOnScreenSize: "phonemid",
       },
       {
         key: "phone",
-        label: "Phone",
+        label: t("users.table.columnPhone"),
         size: "8rem",
         align: "left",
         hideOnScreenSize: "tablet",
       },
       {
         key: "roles",
-        label: "Roles",
+        label: t("users.table.columnRoles"),
         size: "100%",
         align: "left",
         hideOnScreenSize: "phonemid",
@@ -116,7 +118,7 @@ export const UsersLayout = ({
 
   const usersSection = (
     <section data-fs-users-section>
-      <HeaderInside title="Users">
+      <HeaderInside title={t("shared.labels.users")}>
         <HeaderInside.Button onClick={openCreateUserDrawer} />
       </HeaderInside>
 
@@ -179,7 +181,9 @@ export const UsersLayout = ({
               onClick={increasePage}
               disabled={isLoading}
             >
-              {isLoading ? "Loading" : "Load More"}
+              {isLoading
+                ? t("shared.labels.loading")
+                : t("shared.buttons.loadMore")}
             </Paginator.NextPageButton>
           )}
 
@@ -207,7 +211,7 @@ export const UsersLayout = ({
       {featureFlags?.suma ? (
         <SumaPageLayout>{usersSection}</SumaPageLayout>
       ) : (
-        <OrgUnitTabsLayout pageName="Organization">
+        <OrgUnitTabsLayout pageName={t("shared.navigation.organization")}>
           {usersSection}
         </OrgUnitTabsLayout>
       )}

package/src/pages/accounting-field.tsx

@@ -4,6 +4,8 @@ import { getContractDetailsService } from "../features/contracts/services";
 import { getOrgUnitBasicDataService } from "../features/org-units/services";
 import { withErrorBoundary } from "../features/shared/components";
 import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
+import { LOCALIZATION_ENTRY_IDS } from "../features/shared/localization/constants";
+import { getLocalizationLabelsService } from "../features/shared/localization/services/get-localization-labels.service";
 import {
   withAuthLoader,
   withLoaderErrorBoundary,
@@ -16,6 +18,7 @@ import type { AccountingField } from "../features/accounting-fields/types";
 import type { ContractData } from "../features/contracts/types";
 import type { OrgUnitBasicData } from "../features/org-units/types";
 import type { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
+import type { LabelMap } from "../features/shared/localization/types";
 import type { AuthRouteProps, LoaderData } from "../features/shared/types";
 import type { UserData } from "../features/users/types";
 
@@ -28,6 +31,7 @@ type AccountingFieldPageData = {
     currentOrgUnit: OrgUnitBasicData | null;
     currentUser: UserData | null;
     currentContract: ContractData | null;
+    localization?: { labels: LabelMap };
   };
   hasError?: boolean;
   error?: ErrorBoundaryProps;
@@ -47,7 +51,12 @@ const loaderFunction = async (
   return withAuthLoader(
     data,
     async ({ customerId, cookie, userId, ...clientContext }) => {
-      const emptyState = {
+      const labelsPromise = getLocalizationLabelsService({
+        entryIds: LOCALIZATION_ENTRY_IDS.accountingFields,
+        locale: data.locale,
+      });
+
+      const buildEmptyState = (localizationLabels: LabelMap) => ({
         data: {
           accountingField: null,
         },
@@ -56,30 +65,33 @@ const loaderFunction = async (
           currentOrgUnit: null,
           currentUser: null,
           currentContract: null,
+          localization: { labels: localizationLabels },
         },
-      };
+      });
 
       if (!contractId || !orgUnitId || !accountingFieldId) {
-        return emptyState;
+        return buildEmptyState(await labelsPromise);
       }
 
-      const [orgUnit, contract, user, accountingField] = await Promise.all([
-        getOrgUnitBasicDataService({ id: orgUnitId, cookie }),
-        getContractDetailsService({ contractId, unitId: orgUnitId, cookie }),
-        getUserByIdService({ orgUnitId, userId, cookie }),
-        detailsAccoutingFieldService({
-          contractId,
-          orgUnitId,
-          cookie,
-          accountingFieldId,
-        }),
-      ]);
+      const [orgUnit, contract, user, accountingField, localizationLabels] =
+        await Promise.all([
+          getOrgUnitBasicDataService({ id: orgUnitId, cookie }),
+          getContractDetailsService({ contractId, unitId: orgUnitId, cookie }),
+          getUserByIdService({ orgUnitId, userId, cookie }),
+          detailsAccoutingFieldService({
+            contractId,
+            orgUnitId,
+            cookie,
+            accountingFieldId,
+          }),
+          labelsPromise,
+        ]);
 
       if (!accountingField) {
         data.res?.writeHead(302, { Location: "/" });
         data.res?.end();
 
-        return emptyState;
+        return buildEmptyState(localizationLabels);
       }
 
       return {
@@ -91,6 +103,7 @@ const loaderFunction = async (
           currentOrgUnit: orgUnit,
           currentUser: user,
           currentContract: contract,
+          localization: { labels: localizationLabels },
         },
       };
     }

package/src/pages/address-details.tsx

@@ -11,6 +11,8 @@ import {
   SEARCH_PARAMS,
 } from "../features/shared/hooks/usePageItems";
 import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
+import { LOCALIZATION_ENTRY_IDS } from "../features/shared/localization/constants";
+import { getLocalizationLabelsService } from "../features/shared/localization/services/get-localization-labels.service";
 import {
   type ClientContext,
   getValidPage,
@@ -27,6 +29,7 @@ import type {
 } from "../features/addresses/types/AddressData";
 import type { ContractData } from "../features/contracts/types";
 import type { OrgUnitBasicData } from "../features/org-units/types";
+import type { LabelMap } from "../features/shared/localization/types";
 import type { AuthRouteProps, LoaderData } from "../features/shared/types";
 import type { UserData } from "../features/users/types";
 
@@ -60,6 +63,7 @@ export type AddressDetailsPageData = {
     currentOrgUnit: OrgUnitBasicData | null;
     currentContract: ContractData | null;
     currentUser: UserData | null;
+    localization?: { labels: LabelMap };
   };
   hasError?: boolean;
   error?: ErrorBoundaryProps;
@@ -83,7 +87,14 @@ const loaderFunction = async (
   return withAuthLoader(
     data,
     async ({ customerId, cookie, userId, ...clientContext }) => {
+      const labelsPromise = getLocalizationLabelsService({
+        entryIds: LOCALIZATION_ENTRY_IDS.addresses,
+        locale: data.locale,
+      });
+
       if (!contractId || !orgUnitId) {
+        const localizationLabels = await labelsPromise;
+
         return {
           data: {
             addressDetails: null,
@@ -95,51 +106,50 @@ const loaderFunction = async (
             currentOrgUnit: null,
             currentContract: null,
             currentUser: null,
+            localization: { labels: localizationLabels },
           },
         };
       }
 
-      const orgUnit = await getOrgUnitBasicDataService({
-        cookie,
-        id: orgUnitId,
-      });
-
-      const contract = await getContractDetailsService({
-        contractId,
-        cookie,
-        unitId: orgUnitId,
-      });
-
-      const user = await getUserByIdService({ orgUnitId, userId, cookie });
-
-      const { data: recipients = [], total = 0 } =
-        await getAddressRecipientsService({
+      const [
+        orgUnit,
+        contract,
+        user,
+        { data: recipients = [], total = 0 },
+        { data: locations, total: totalLocations },
+        addressDetails,
+        localizationLabels,
+      ] = await Promise.all([
+        getOrgUnitBasicDataService({ cookie, id: orgUnitId }),
+        getContractDetailsService({
+          contractId,
+          cookie,
+          unitId: orgUnitId,
+        }),
+        getUserByIdService({ orgUnitId, userId, cookie }),
+        getAddressRecipientsService({
           unitId: orgUnitId,
           customerId: contractId,
           addressId,
           cookie,
           search: searchRecipients,
           page: pageRecipients,
-        });
-
-      const { data: locations, total: totalLocations } =
-        await getAddressLocationService({
+        }),
+        getAddressLocationService({
           contractId,
           addressId,
           cookie,
           unitId: orgUnitId,
           search: searchLocations,
           page: pageLocation,
-        });
+        }),
+        getAddressDetailsService(addressId, cookie, contractId, orgUnitId),
+        labelsPromise,
+      ]);
 
       return {
         data: {
-          addressDetails: await getAddressDetailsService(
-            addressId,
-            cookie,
-            contractId,
-            orgUnitId
-          ),
+          addressDetails,
           recipientsData: {
             data: recipients,
             total,
@@ -158,6 +168,7 @@ const loaderFunction = async (
           currentOrgUnit: orgUnit,
           currentContract: contract,
           currentUser: user,
+          localization: { labels: localizationLabels },
         },
       };
     }

package/src/pages/addresses.tsx

@@ -4,6 +4,8 @@ import { getOrgUnitBasicDataService } from "../features/org-units/services";
 import { withErrorBoundary } from "../features/shared/components";
 import { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
 import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
+import { LOCALIZATION_ENTRY_IDS } from "../features/shared/localization/constants";
+import { getLocalizationLabelsService } from "../features/shared/localization/services/get-localization-labels.service";
 import {
   type ClientContext,
   withLoaderErrorBoundary,
@@ -14,6 +16,7 @@ import { getUserByIdService } from "../features/users/services";
 
 import type { ContractData } from "../features/contracts/types";
 import type { OrgUnitBasicData } from "../features/org-units/types";
+import type { LabelMap } from "../features/shared/localization/types";
 import type { AuthRouteProps, LoaderData } from "../features/shared/types";
 import type { UserData } from "../features/users/types";
 
@@ -23,6 +26,7 @@ export type AddressesPageData = {
     clientContext: ClientContext;
     currentOrgUnit: OrgUnitBasicData | null;
     currentUser: UserData | null;
+    localization?: { labels: LabelMap };
   };
   hasError?: boolean;
   error?: ErrorBoundaryProps;
@@ -41,29 +45,39 @@ const loaderFunction = async (
   return withAuthLoader(
     data,
     async ({ cookie, userId, customerId, ...clientContext }) => {
+      const labelsPromise = getLocalizationLabelsService({
+        entryIds: LOCALIZATION_ENTRY_IDS.addresses,
+        locale: data.locale,
+      });
+
       if (!contractId || !orgUnitId) {
+        const localizationLabels = await labelsPromise;
+
         return {
           context: {
             clientContext: { customerId, cookie, userId, ...clientContext },
             currentOrgUnit: null,
             currentContract: null,
             currentUser: null,
+            localization: { labels: localizationLabels },
           },
         };
       }
 
-      const [currentOrgUnit, user, contract] = await Promise.all([
-        getOrgUnitBasicDataService({
-          id: orgUnitId,
-          cookie,
-        }),
-        getUserByIdService({ orgUnitId, userId, cookie }),
-        getContractDetailsService({
-          contractId,
-          cookie,
-          unitId: orgUnitId,
-        }),
-      ]);
+      const [currentOrgUnit, user, contract, localizationLabels] =
+        await Promise.all([
+          getOrgUnitBasicDataService({
+            id: orgUnitId,
+            cookie,
+          }),
+          getUserByIdService({ orgUnitId, userId, cookie }),
+          getContractDetailsService({
+            contractId,
+            cookie,
+            unitId: orgUnitId,
+          }),
+          labelsPromise,
+        ]);
 
       return {
         context: {
@@ -71,6 +85,7 @@ const loaderFunction = async (
           currentOrgUnit,
           currentUser: user,
           currentContract: contract,
+          localization: { labels: localizationLabels },
         },
       };
     }

package/src/pages/budgets-details.tsx

@@ -6,6 +6,8 @@ import { getOrgUnitBasicDataService } from "../features/org-units/services";
 import { withErrorBoundary } from "../features/shared/components";
 import { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
 import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
+import { LOCALIZATION_ENTRY_IDS } from "../features/shared/localization/constants";
+import { getLocalizationLabelsService } from "../features/shared/localization/services/get-localization-labels.service";
 import {
   type ClientContext,
   withLoaderErrorBoundary,
@@ -16,6 +18,7 @@ import { getUserByIdService } from "../features/users/services";
 
 import type { ContractData } from "../features/contracts/types";
 import type { OrgUnitBasicData } from "../features/org-units/types";
+import type { LabelMap } from "../features/shared/localization/types";
 import type { AuthRouteProps, LoaderData } from "../features/shared/types";
 import type { UserData } from "../features/users/types";
 
@@ -26,6 +29,7 @@ export type BudgetsDetailsData = {
     currentOrgUnit: OrgUnitBasicData | null;
     currentContract: ContractData | null;
     currentUser: UserData | null;
+    localization?: { labels: LabelMap };
   };
   hasError?: boolean;
   error?: ErrorBoundaryProps;
@@ -45,21 +49,26 @@ const loaderFunction = async (
   return withAuthLoader(
     data,
     async ({ customerId, cookie, userId, ...clientContext }) => {
-      const [orgUnit, contract, user, budgetsData] = await Promise.all([
-        getOrgUnitBasicDataService({ cookie, id: orgUnitId }),
-        getContractDetailsService({
-          contractId,
-          cookie,
-          unitId: orgUnitId,
-        }),
-        getUserByIdService({ orgUnitId, userId, cookie }),
-        getBudgetByIdService({
-          budgetId,
-          customerId,
-          unitId: orgUnitId,
-          cookie,
-        }),
-      ]);
+      const [orgUnit, contract, user, budgetsData, localizationLabels] =
+        await Promise.all([
+          getOrgUnitBasicDataService({ cookie, id: orgUnitId }),
+          getContractDetailsService({
+            contractId,
+            cookie,
+            unitId: orgUnitId,
+          }),
+          getUserByIdService({ orgUnitId, userId, cookie }),
+          getBudgetByIdService({
+            budgetId,
+            customerId,
+            unitId: orgUnitId,
+            cookie,
+          }),
+          getLocalizationLabelsService({
+            entryIds: LOCALIZATION_ENTRY_IDS.budgets,
+            locale: data.locale,
+          }),
+        ]);
 
       return {
         budget: budgetsData,
@@ -68,6 +77,7 @@ const loaderFunction = async (
           currentOrgUnit: orgUnit,
           currentContract: contract,
           currentUser: user,
+          localization: { labels: localizationLabels },
         },
       };
     }

package/src/pages/budgets.tsx

@@ -5,6 +5,8 @@ import { getOrgUnitBasicDataService } from "../features/org-units/services";
 import { withErrorBoundary } from "../features/shared/components";
 import { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
 import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
+import { LOCALIZATION_ENTRY_IDS } from "../features/shared/localization/constants";
+import { getLocalizationLabelsService } from "../features/shared/localization/services/get-localization-labels.service";
 import {
   type ClientContext,
   withLoaderErrorBoundary,
@@ -16,6 +18,7 @@ import { getUserByIdService } from "../features/users/services";
 import type { BudgetListResponse } from "../features/budgets/types";
 import type { ContractData } from "../features/contracts/types";
 import type { OrgUnitBasicData } from "../features/org-units/types";
+import type { LabelMap } from "../features/shared/localization/types";
 import type { AuthRouteProps, LoaderData } from "../features/shared/types";
 import type { UserData } from "../features/users/types";
 
@@ -26,6 +29,7 @@ export type BudgetPageData = {
     currentContract: ContractData | null;
     currentOrgUnit: OrgUnitBasicData | null;
     currentUser: UserData | null;
+    localization?: { labels: LabelMap };
   };
   hasError?: boolean;
   error?: ErrorBoundaryProps;
@@ -44,7 +48,13 @@ const loaderFunction = async (
   return withAuthLoader(
     data,
     async ({ customerId, cookie, userId, ...clientContext }) => {
+      const labelsPromise = getLocalizationLabelsService({
+        entryIds: LOCALIZATION_ENTRY_IDS.budgets,
+        locale: data.locale,
+      });
+
       if (!contractId || !orgUnitId) {
+        const localizationLabels = await labelsPromise;
         return {
           data: { data: [], total: 0 },
           context: {
@@ -52,27 +62,30 @@ const loaderFunction = async (
             currentOrgUnit: null,
             currentContract: null,
             currentUser: null,
+            localization: { labels: localizationLabels },
           },
         };
       }
 
-      const [orgUnit, contract, user, budgetsData] = await Promise.all([
-        getOrgUnitBasicDataService({
-          cookie,
-          id: orgUnitId,
-        }),
-        getContractDetailsService({
-          contractId,
-          unitId: orgUnitId,
-          cookie,
-        }),
-        getUserByIdService({ orgUnitId, userId, cookie }),
-        listBudgetsService({
-          customerId,
-          cookie,
-          unitId: orgUnitId,
-        }),
-      ]);
+      const [orgUnit, contract, user, budgetsData, localizationLabels] =
+        await Promise.all([
+          getOrgUnitBasicDataService({
+            cookie,
+            id: orgUnitId,
+          }),
+          getContractDetailsService({
+            contractId,
+            unitId: orgUnitId,
+            cookie,
+          }),
+          getUserByIdService({ orgUnitId, userId, cookie }),
+          listBudgetsService({
+            customerId,
+            cookie,
+            unitId: orgUnitId,
+          }),
+          labelsPromise,
+        ]);
 
       return {
         data: budgetsData,
@@ -81,6 +94,7 @@ const loaderFunction = async (
           currentOrgUnit: orgUnit,
           currentContract: contract,
           currentUser: user,
+          localization: { labels: localizationLabels },
         },
       };
     }