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

package/src/features/budgets/components/CreateBudgetDrawer/CreateBudgetDrawer.tsx

@@ -15,6 +15,7 @@ import {
   useAnalytics,
   useBuyerPortal,
 } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { logMutationFailure } from "../../../shared/services/logger";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import {
@@ -22,7 +23,6 @@ import {
   sortingOptionsAllocations,
 } from "../../../shared/utils";
 import { parseAmount } from "../../../shared/utils/budgetAmountParse";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import { getKeyByValue } from "../../../shared/utils/getKeyByValue";
 import { useCreateBudget } from "../../hooks/useCreateBudget";
 import { useGetAllocations } from "../../hooks/useGetAllocations";
@@ -79,6 +79,7 @@ export const CreateBudgetDrawer = ({
   readonly = false,
   ...props
 }: CreateBudgetDrawerProps) => {
+  const { t } = useLocalization();
   const {
     clientContext: { cookie },
   } = useBuyerPortal();
@@ -218,7 +219,9 @@ export const CreateBudgetDrawer = ({
           });
 
           pushToast({
-            message: `Budget added successfully.\n${CHANGES_TIMEOUT_MESSAGE}`,
+            message: `${t("budgets.toasts.budgetAdded")}\n${t(
+              "shared.messages.changesTimeout"
+            )}`,
             status: "INFO",
           });
           close();
@@ -269,14 +272,18 @@ export const CreateBudgetDrawer = ({
           }
 
           pushToast({
-            message: `Budget added successfully.\n${CHANGES_TIMEOUT_MESSAGE}`,
+            message: `${t("budgets.toasts.budgetAdded")}\n${t(
+              "shared.messages.changesTimeout"
+            )}`,
             status: "INFO",
           });
 
           setTimeout(
             () =>
               pushToast({
-                message: `Budget policy added successfully.\n${CHANGES_TIMEOUT_MESSAGE}`,
+                message: `${t("budgets.toasts.budgetPolicyAdded")}\n${t(
+                  "shared.messages.changesTimeout"
+                )}`,
                 status: "INFO",
               }),
             1500
@@ -308,7 +315,7 @@ export const CreateBudgetDrawer = ({
           });
 
           pushToast({
-            message: error?.message || "An error occurred. Please try again.",
+            message: error?.message || t("budgets.errors.genericRetry"),
             status: "ERROR",
           });
         },
@@ -351,7 +358,10 @@ export const CreateBudgetDrawer = ({
     );
 
     if (!isBudgetValid(budget)) {
-      pushToast({ message: "Fill in all required fields.", status: "ERROR" });
+      pushToast({
+        message: t("budgets.validation.fillRequiredFields"),
+        status: "ERROR",
+      });
       return;
     }
     const notifState = getBudgetNotificationSubmitState(budget.notifications);
@@ -363,7 +373,7 @@ export const CreateBudgetDrawer = ({
         setShowNotificationsEmailError(true);
       }
       pushToast({
-        message: BUDGET_NOTIFICATION_BLOCK_MESSAGES[notifState.reason],
+        message: t(BUDGET_NOTIFICATION_BLOCK_MESSAGES[notifState.reason]),
         status: "ERROR",
       });
       return;
@@ -411,7 +421,9 @@ export const CreateBudgetDrawer = ({
         setShowNotificationsEmailError(true);
       }
       pushToast({
-        message: BUDGET_NOTIFICATION_BLOCK_MESSAGES[confirmNotifState.reason],
+        message: t(
+          BUDGET_NOTIFICATION_BLOCK_MESSAGES[confirmNotifState.reason]
+        ),
         status: "ERROR",
       });
       return;
@@ -460,11 +472,11 @@ export const CreateBudgetDrawer = ({
         data-fs-bp-create-budget-drawer-step-success={step === "confirmation"}
         title={
           step === "form" ? (
-            "Add new budget"
+            t("budgets.create.addNewBudget")
           ) : step === "allocations" ? (
             <div data-fs-bp-create-budget-drawer-header-arrow>
               <Icon name="ArrowPointLeft" onClick={() => setStep("form")} />
-              <span>Add budget allocations</span>
+              <span>{t("budgets.create.addBudgetAllocations")}</span>
             </div>
           ) : (
             ""
@@ -540,7 +552,7 @@ export const CreateBudgetDrawer = ({
         {step === "form" && (
           <>
             <BasicDrawer.Button variant="ghost" onClick={close}>
-              Cancel
+              {t("shared.buttons.cancel")}
             </BasicDrawer.Button>
             <BasicDrawer.Button
               variant="confirm"
@@ -560,7 +572,7 @@ export const CreateBudgetDrawer = ({
                   if (notificationsEnabled && !hasUsers)
                     setShowNotificationsUsersError(true);
                   pushToast({
-                    message: "Fill in all required fields.",
+                    message: t("budgets.validation.fillRequiredFields"),
                     status: "ERROR",
                   });
                   return;
@@ -583,10 +595,11 @@ export const CreateBudgetDrawer = ({
                     setShowNotificationsEmailError(true);
                   }
                   pushToast({
-                    message:
+                    message: t(
                       BUDGET_NOTIFICATION_BLOCK_MESSAGES[
                         continueNotifState.reason
-                      ],
+                      ]
+                    ),
                     status: "ERROR",
                   });
                   return;
@@ -596,7 +609,7 @@ export const CreateBudgetDrawer = ({
                 setStep("allocations");
               }}
             >
-              Continue
+              {t("shared.buttons.continue")}
             </BasicDrawer.Button>
           </>
         )}
@@ -607,7 +620,7 @@ export const CreateBudgetDrawer = ({
               variant="ghost"
               onClick={() => handleAddBudget({ skipAllocations: true })}
             >
-              Skip
+              {t("shared.buttons.skip")}
             </BasicDrawer.Button>
             <BasicDrawer.Button
               isLoading={isCreatingBudget || listBudgetsLoading}
@@ -615,7 +628,7 @@ export const CreateBudgetDrawer = ({
               disabled={!selectedAllocations.length}
               onClick={() => handleAddBudget({})}
             >
-              Add
+              {t("shared.buttons.add")}
             </BasicDrawer.Button>
           </>
         )}
@@ -626,7 +639,7 @@ export const CreateBudgetDrawer = ({
             isLoading={isUpdateBudgetLoading}
             onClick={handleConfirm}
           >
-            Confirm
+            {t("shared.buttons.confirm")}
           </BasicDrawer.Button>
         )}
       </BasicDrawer.Footer>

package/src/features/budgets/components/DeleteBudgetAllocationDrawer/DeleteBudgetAllocationDrawer.tsx

@@ -10,7 +10,7 @@ import {
   type BasicDrawerProps,
 } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { useDeleteAllocation } from "../../hooks/useDeleteAllocations";
 
 import type { BudgetAllocation } from "../../types";
@@ -35,6 +35,7 @@ export const DeleteBudgetAllocationDrawer = ({
   contractId,
   ...otherProps
 }: DeleteBudgetAllocationDrawerProps) => {
+  const { t } = useLocalization();
   const [allocationNameConfirmation, setAllocationNameConfirmation] =
     useState("");
   const {
@@ -48,7 +49,9 @@ export const DeleteBudgetAllocationDrawer = ({
       options: {
         onSuccess: () => {
           pushToast({
-            message: `Allocation deleted successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+            message: `${t("budgets.toasts.allocationDeleted")}\n${t(
+              "shared.messages.changesTimeout"
+            )}`,
             status: "INFO",
           });
 
@@ -85,22 +88,24 @@ export const DeleteBudgetAllocationDrawer = ({
       data-fs-bp-delete-allocation-drawer
       close={close}
     >
-      <BasicDrawer.Heading title="Delete allocation" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("budgets.delete.allocationTitle")}
+        onClose={close}
+      />
       <BasicDrawer.Body data-fs-bp-delete-allocation-drawer-body>
         <p>
-          Permanently delete <a href="#">{allocation.name}</a>?
+          {t("budgets.delete.permanentlyDeleteAllocation", [
+            <span key="allocation-name">{allocation.name}</span>,
+          ])}
         </p>
         <br />
-        <p>
-          Deleting this allocation will permanently remove all its data, but
-          usage history will be kept for audit. This action cannot be undone.
-        </p>
+        <p>{t("budgets.delete.allocationWarning")}</p>
         <br />
-        <p>Confirm by typing the allocation name below:</p>
+        <p>{t("budgets.delete.confirmAllocationName")}</p>
         <br />
 
         <InputText
-          label="Allocation name"
+          label={t("budgets.forms.allocationName")}
           value={allocationNameConfirmation}
           onChange={(event) =>
             setAllocationNameConfirmation(event.currentTarget.value)
@@ -110,7 +115,7 @@ export const DeleteBudgetAllocationDrawer = ({
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -118,7 +123,7 @@ export const DeleteBudgetAllocationDrawer = ({
           disabled={!isDeleteButtonEnabled || isLoadingDeleteAllocation}
           isLoading={isLoadingDeleteAllocation}
         >
-          Delete
+          {t("shared.buttons.delete")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/budgets/components/EditBudgetDrawer/EditBudgetDrawer.tsx

@@ -6,9 +6,9 @@ import { useUI } from "@faststore/ui";
 
 import { BasicDrawer, type BasicDrawerProps } from "../../../shared/components";
 import { useAnalytics, useBuyerPortal } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { parseAmount } from "../../../shared/utils/budgetAmountParse";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import { useUpdateBudget } from "../../hooks";
 import { BUDGET_NOTIFICATION_BLOCK_MESSAGES } from "../../messages/budgetNotifications";
 import {
@@ -82,6 +82,7 @@ export const EditBudgetDrawer = ({
   initialBudget,
   ...props
 }: EditBudgetDrawerProps) => {
+  const { t } = useLocalization();
   const { clientContext } = useBuyerPortal();
   const { pushToast } = useUI();
   const router = useRouter();
@@ -120,7 +121,9 @@ export const EditBudgetDrawer = ({
         });
 
         pushToast({
-          message: `Budget updated successfully.\n${CHANGES_TIMEOUT_MESSAGE}`,
+          message: `${t("budgets.toasts.budgetUpdated")}\n${t(
+            "shared.messages.changesTimeout"
+          )}`,
           status: "INFO",
         });
         onSubmit?.(budget);
@@ -140,7 +143,7 @@ export const EditBudgetDrawer = ({
         );
 
         pushToast({
-          message: error?.message || "An error occurred. Please try again.",
+          message: error?.message || t("budgets.errors.genericRetry"),
           status: "ERROR",
         });
       },
@@ -175,7 +178,7 @@ export const EditBudgetDrawer = ({
 
     if (!isBudgetValid(budget)) {
       pushToast({
-        message: "Please fill all required fields correctly.",
+        message: t("budgets.validation.fillRequiredFieldsCorrectly"),
         status: "ERROR",
       });
       return;
@@ -190,7 +193,7 @@ export const EditBudgetDrawer = ({
         setShowNotificationsEmailError(true);
       }
       pushToast({
-        message: BUDGET_NOTIFICATION_BLOCK_MESSAGES[notifState.reason],
+        message: t(BUDGET_NOTIFICATION_BLOCK_MESSAGES[notifState.reason]),
         status: "ERROR",
       });
       return;
@@ -225,7 +228,10 @@ export const EditBudgetDrawer = ({
       size="large"
       {...props}
     >
-      <BasicDrawer.Heading title="Edit Budget Settings" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("budgets.edit.budgetSettings")}
+        onClose={close}
+      />
 
       <BasicDrawer.Body>
         <BudgetAddForm
@@ -254,14 +260,14 @@ export const EditBudgetDrawer = ({
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
           isLoading={isLoading}
           onClick={handleSubmit}
         >
-          Save
+          {t("shared.buttons.save")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/budgets/components/EmptyState.tsx/EmptyState.tsx

@@ -1,13 +1,16 @@
 import { Icon } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 export function EmptyState() {
+  const { t } = useLocalization();
+
   return (
     <div data-fs-empty-state>
       <div>
         <Icon name="Paid" height={40} />
       </div>
       <div>
-        <p>No budgets yet</p>
+        <p>{t("budgets.empty.noBudgets")}</p>
       </div>
     </div>
   );

package/src/features/budgets/layouts/BudgetsDetailsLayout/BudgetsDetailsLayout.tsx

@@ -13,6 +13,7 @@ import {
   useDrawerProps,
 } from "../../../shared/hooks";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { BudgetAllocationsTable } from "../../components/BudgetAllocationsTable/BudgetAllocationsTable";
 import { BudgetDeleteDrawer } from "../../components/BudgetDeleteDrawer/BudgetDeleteDrawer";
@@ -30,6 +31,7 @@ export type BudgetsDetailsLayoutProps = {
 };
 
 export const BudgetsDetailsLayout = ({ budget }: BudgetsDetailsLayoutProps) => {
+  const { t } = useLocalization();
   const { currentOrgUnit: orgUnit, currentContract: contract } =
     useBuyerPortal();
 
@@ -131,7 +133,7 @@ export const BudgetsDetailsLayout = ({ budget }: BudgetsDetailsLayoutProps) => {
 
         pushToast({
           status: "ERROR",
-          message: err.message || "Unexpected error loading allocations list",
+          message: err.message || t("budgets.errors.unexpectedAllocationsLoad"),
         });
       },
     },
@@ -144,7 +146,7 @@ export const BudgetsDetailsLayout = ({ budget }: BudgetsDetailsLayoutProps) => {
         orgUnitId={orgUnit?.id ?? ""}
         contractName={contract?.name ?? ""}
         contractId={contract?.id ?? ""}
-        pageName="Budgets"
+        pageName={t("budgets.titles.budgets")}
       >
         <div data-fs-bp-budgets-details-layout>
           <header data-fs-bp-budgets-details-header-wrapper>
@@ -169,14 +171,14 @@ export const BudgetsDetailsLayout = ({ budget }: BudgetsDetailsLayoutProps) => {
                   onClick={openEditDrawer}
                 >
                   <Icon name="Edit" width={20} height={20} />
-                  <span>Edit settings</span>
+                  <span>{t("budgets.dropdown.editSettings")}</span>
                 </DropdownItem>
                 <DropdownItem
                   data-fs-bp-testid="budget-details-dropdown-allocation"
                   onClick={openAddAllocationDrawer}
                 >
                   <Icon name="Add" width={20} height={20} />
-                  <span>Add allocations</span>
+                  <span>{t("budgets.dropdown.addAllocations")}</span>
                 </DropdownItem>
                 <BasicDropdownMenu.Separator />
                 <DropdownItem
@@ -185,7 +187,7 @@ export const BudgetsDetailsLayout = ({ budget }: BudgetsDetailsLayoutProps) => {
                   onClick={openDeleteDrawer}
                 >
                   <Icon name="Delete" width={20} height={20} />
-                  <span>Delete</span>
+                  <span>{t("shared.buttons.delete")}</span>
                 </DropdownItem>
               </BasicDropdownMenu>
             </Dropdown>

package/src/features/budgets/layouts/BudgetsLayout/BudgetsLayout.tsx

@@ -10,6 +10,7 @@ import {
 } from "../../../shared/hooks";
 import { FinanceTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import { SumaPageLayout } from "../../../shared/layouts/SumaPageLayout/SumaPageLayout";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { BudgetDeleteDrawer } from "../../components/BudgetDeleteDrawer/BudgetDeleteDrawer";
 import { BudgetEditNotificationDrawer } from "../../components/BudgetEditNotificationDrawer/BudgetEditNotificationDrawer";
 import { BudgetsTable } from "../../components/BudgetsTable/BudgetsTable";
@@ -33,6 +34,7 @@ export type BudgetsLayoutProps = {
 };
 
 export const BudgetsLayout = ({ data }: BudgetsLayoutProps) => {
+  const { t } = useLocalization();
   const {
     clientContext: { cookie },
     currentOrgUnit: orgUnit,
@@ -166,13 +168,13 @@ export const BudgetsLayout = ({ data }: BudgetsLayoutProps) => {
   const budgetsSection = (
     <section data-fs-bp-budgets-layout>
       <main data-fs-bp-main>
-        <HeaderInside title="Budgets">
+        <HeaderInside title={t("budgets.titles.budgets")}>
           <HeaderInside.Button onClick={openBudgetDrawer} />
         </HeaderInside>
 
         {budgetContent.length === 0 ? (
           <div data-fs-empty-state>
-            <EmptyState title="No budgets yet" iconName="Paid" />
+            <EmptyState title={t("budgets.empty.noBudgets")} iconName="Paid" />
           </div>
         ) : (
           <section data-fs-bp-budgets-content>
@@ -277,7 +279,7 @@ export const BudgetsLayout = ({ data }: BudgetsLayoutProps) => {
       {featureFlags?.suma ? (
         <SumaPageLayout>{budgetsSection}</SumaPageLayout>
       ) : (
-        <FinanceTabsLayout pageName="Finance and Compliance">
+        <FinanceTabsLayout pageName={t("budgets.titles.financeAndCompliance")}>
           {budgetsSection}
         </FinanceTabsLayout>
       )}

package/src/features/budgets/messages/budgetNotifications.ts

@@ -5,17 +5,17 @@ export const BUDGET_NOTIFICATION_BLOCK_MESSAGES: Record<
   string
 > = {
   [BUDGET_NOTIFICATION_REASONS.NO_USERS]:
-    "Add at least one user to notifications or turn it off.",
+    "budgets.messages.noUsersNotification",
   [BUDGET_NOTIFICATION_REASONS.NO_THRESHOLDS]:
-    "Add at least one notification threshold.",
+    "budgets.messages.noThresholdsNotification",
   [BUDGET_NOTIFICATION_REASONS.INVALID_EMAIL]:
-    "Every notified user must have a valid email on file. Remove invalid users or turn off notifications.",
+    "budgets.messages.invalidEmailNotification",
 };
 
 /** Inline helper under the "Add users" Autocomplete when submit blocked for no users. */
 export const BUDGET_NOTIFICATION_FORM_HELPER_NO_USERS =
-  "Select at least one user.";
+  "budgets.validation.selectAtLeastOneUser";
 
 /** Inline helper when selected users include invalid emails while notifications are on. */
 export const BUDGET_NOTIFICATION_FORM_HELPER_INVALID_EMAIL =
-  "All notified users must have a valid email. Remove users without email or disable notifications.";
+  "budgets.validation.allUsersValidEmail";

package/src/features/budgets/utils/handleBudgetError.tsx

@@ -6,8 +6,6 @@ import type {
   ToastConfig,
 } from "./handleBudgetError.types";
 
-const DEFAULT_ERROR_MESSAGE = "An error occurred. Please try again.";
-
 const parseError = (error: Error): ParsedError => {
   try {
     return JSON.parse(error.message);
@@ -15,8 +13,7 @@ const parseError = (error: Error): ParsedError => {
     const errorObj = error as Error;
 
     return {
-      message:
-        errorObj && errorObj.message ? errorObj.message : DEFAULT_ERROR_MESSAGE,
+      message: errorObj?.message ?? "",
     };
   }
 };
@@ -25,6 +22,7 @@ export const handleBudgetError = ({
   error,
   orgUnitId,
   onNavigateToUser,
+  t,
 }: HandleBudgetErrorParams): ToastConfig => {
   const parsedError = parseError(error as Error);
 
@@ -33,8 +31,7 @@ export const handleBudgetError = ({
     const userId = userIdMatch?.[1];
 
     return {
-      message:
-        "The selected user does not have any available email to receive the budget notifications.",
+      message: t("budgets.errors.userEmailNotFound"),
       status: "ERROR",
       icon:
         userId && onNavigateToUser ? (
@@ -50,14 +47,14 @@ export const handleBudgetError = ({
               );
             }}
           >
-            See user details
+            {t("budgets.actions.seeUserDetails")}
           </button>
         ) : undefined,
     };
   }
 
   return {
-    message: parsedError.message || DEFAULT_ERROR_MESSAGE,
+    message: parsedError.message || t("budgets.errors.genericRetry"),
     status: "ERROR",
   };
 };

package/src/features/budgets/utils/handleBudgetError.types.ts

@@ -1,7 +1,10 @@
+import type { LocalizeFn } from "../../shared/localization/types";
+
 export type HandleBudgetErrorParams = {
   error: unknown;
   orgUnitId: string;
   onNavigateToUser?: (path: string) => void;
+  t: LocalizeFn;
 };
 
 export type ParsedError = {

package/src/features/buying-policies/components/AccountingFieldCriteriaSelector/AccountingFieldCriteriaSelector.tsx

@@ -5,6 +5,7 @@ import { useUI } from "@faststore/ui";
 import { useListAccountingFields } from "../../../accounting-fields/hooks";
 import { CustomDropdown } from "../../../shared/components/CustomDropdown/CustomDropdown";
 import { useBuyerPortal } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import {
   extractFieldFromCriteria,
   loadingOption,
@@ -22,6 +23,7 @@ export const AccountingFieldCriteriaSelector = ({
   criteria,
   onCriteriaChange,
 }: AccountingFieldCriteriaSelectorProps) => {
+  const { t } = useLocalization();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [fieldId, setFieldId] = useState<string>(
     extractFieldFromCriteria(criteria)
@@ -39,7 +41,7 @@ export const AccountingFieldCriteriaSelector = ({
       {
         onError: () => {
           pushToast({
-            message: "Failed to fetch accounting fields",
+            message: t("buyingPolicies.errors.failedToFetchAccountingFields"),
             status: "ERROR",
           });
         },
@@ -61,11 +63,11 @@ export const AccountingFieldCriteriaSelector = ({
   };
 
   const triggerLabel = listAccountingFieldLoading
-    ? loadingOption[0].label
+    ? t(loadingOption[0].label)
     : field?.name;
 
   const options = listAccountingFieldLoading
-    ? loadingOption
+    ? [{ label: t(loadingOption[0].label), value: loadingOption[0].value }]
     : listAccountingFieldData?.map(({ name, id }) => ({
         label: name,
         value: id,