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

package/src/features/addresses/layouts/AddressDetailsLayout/AddressDetailsLayout.tsx

@@ -14,6 +14,7 @@ import { TabContent } from "../../../shared/components/Tab/TabContent";
 import { TabOption } from "../../../shared/components/Tab/TabOption";
 import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { addressLabelToPropMapping } from "../../../shared/utils";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import {
@@ -50,6 +51,7 @@ export const AddressDetailsLayout = ({
 }: AddressDetailsLayoutProps) => {
   const router = useRouter();
   const { pushToast } = useUI();
+  const { t } = useLocalization();
 
   // TODO: Implement the AddressDetailsLayout Fallback component
   if (!addressDetails) {
@@ -106,7 +108,7 @@ export const AddressDetailsLayout = ({
       {
         onError: () => {
           pushToast({
-            message: "Failed on fetch Addresses Location name",
+            message: t("addresses.errors.locationNameFetch"),
             status: "ERROR",
           });
         },
@@ -148,7 +150,7 @@ export const AddressDetailsLayout = ({
           data-fs-address-details-button
           onClick={openEditDrawer}
         >
-          Edit
+          {t("shared.buttons.edit")}
         </button>
       ),
       ["location-tab"]: (
@@ -157,7 +159,7 @@ export const AddressDetailsLayout = ({
           data-fs-address-details-button
           onClick={openLocationsDrawer}
         >
-          Add
+          {t("shared.buttons.add")}
         </button>
       ),
       ["recipient-tab"]: (
@@ -166,7 +168,7 @@ export const AddressDetailsLayout = ({
           data-fs-address-details-button
           onClick={openRecipientsDrawer}
         >
-          Add
+          {t("shared.buttons.add")}
         </button>
       ),
     }[activeTabId]);
@@ -178,7 +180,7 @@ export const AddressDetailsLayout = ({
         orgUnitId={orgUnit?.id ?? ""}
         contractName={contract?.name ?? ""}
         contractId={contract?.id ?? ""}
-        pageName="Contract"
+        pageName={t("shared.labels.contract")}
       >
         <section data-fs-address-details-section>
           <HeaderInside
@@ -210,11 +212,16 @@ export const AddressDetailsLayout = ({
                   />
                 ) : (
                   <TabBar>
-                    <TabOption id="address-tab">Details</TabOption>
+                    <TabOption id="address-tab">
+                      {t("addresses.tabs.details")}
+                    </TabOption>
                     <TabOption id="location-tab">
-                      {locationSettingsData?.name ?? "Locations"}
+                      {locationSettingsData?.name ??
+                        t("addresses.labels.locations")}
+                    </TabOption>
+                    <TabOption id="recipient-tab">
+                      {t("addresses.tabs.recipients")}
                     </TabOption>
-                    <TabOption id="recipient-tab">Recipients</TabOption>
                   </TabBar>
                 )}
 
@@ -240,7 +247,7 @@ export const AddressDetailsLayout = ({
                         data-fs-address-details-info-line-first={index === 0}
                       >
                         <span data-fs-address-details-info-line-label>
-                          {addressLabelToPropMapping[prop]}
+                          {t(addressLabelToPropMapping[prop])}
                         </span>
                         <span data-fs-address-details-info-line-value>
                           {displayValue}

package/src/features/addresses/layouts/AddressesLayout/AddressesLayout.tsx

@@ -21,6 +21,7 @@ import {
   SCOPE_KEYS,
 } from "../../../shared/hooks";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { AddressDropdownMenu, CreateAddressDrawer } from "../../components";
 import { CreateAddressSettingsDrawer } from "../../components/CreateAddressSettingsDrawer/CreateAddressSettingsDrawer";
@@ -33,6 +34,7 @@ export const AddressLayout = () => {
   const router = useRouter();
   const { currentOrgUnit } = useBuyerPortal();
   const { pushToast } = useUI();
+  const { t } = useLocalization();
 
   const {
     page,
@@ -53,7 +55,7 @@ export const AddressLayout = () => {
       {
         onError: () => {
           pushToast({
-            message: "Failed on fetch Addresses Location settings",
+            message: t("addresses.errors.locationSettingsFetchLayout"),
             status: "ERROR",
           });
         },
@@ -105,10 +107,11 @@ export const AddressLayout = () => {
   const columns = getTableColumns({
     nameColumnSize: "18.125rem",
     actionsLength: 2,
+    nameColumnLabel: t("shared.labels.name"),
     extraColumns: [
       {
         key: "type",
-        label: "Type",
+        label: t("addresses.table.type"),
         align: "left",
         hideOnScreenSize: "phonemid",
         size: "100%",
@@ -143,7 +146,7 @@ export const AddressLayout = () => {
         pageName=""
       >
         <section data-fs-addresses-section>
-          <HeaderInside title="Addresses">
+          <HeaderInside title={t("addresses.titles.addresses")}>
             {isLocationSettingsLoading ? (
               <>
                 <Skeleton
@@ -177,12 +180,12 @@ export const AddressLayout = () => {
             <EmptyState
               title={
                 committedSearch.length > 0
-                  ? "No results found"
-                  : "No addresses yet"
+                  ? t("addresses.empty.noResults")
+                  : t("addresses.empty.noAddressesYet")
               }
               description={
                 committedSearch.length > 0
-                  ? "Try using different terms or filters"
+                  ? t("addresses.empty.tryDifferentTerms")
                   : undefined
               }
               iconName={
@@ -247,14 +250,14 @@ export const AddressLayout = () => {
                   onClick={previousPage}
                   disabled={page <= 1}
                 >
-                  Previous Page
+                  {t("shared.pagination.previousPage")}
                 </Paginator.NextPageButton>
                 <Paginator.NextPageButton
                   data-fs-bp-addresses-next-page
                   onClick={nextPage}
                   disabled={page >= totalPages}
                 >
-                  Next Page
+                  {t("shared.pagination.nextPage")}
                 </Paginator.NextPageButton>
                 <Paginator.Interval {...intervalData} />
               </div>

package/src/features/b2b-agent/layouts/B2BAgentLayout/B2BAgentLayout.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef } from "react";
 
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { isDevelopment } from "../../../shared/utils/environment";
 
 const B2B_AGENT_URL = isDevelopment()
@@ -36,6 +37,7 @@ export const B2BAgentLayout = ({
   customerId,
   userId,
 }: B2BAgentLayoutProps) => {
+  const { t } = useLocalization();
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
   const agentOrigin = useMemo(() => new URL(B2B_AGENT_URL).origin, []);
@@ -107,7 +109,7 @@ export const B2BAgentLayout = ({
         style={iframeStyle}
         data-fs-bp-b2b-agent-iframe
         src={B2B_AGENT_URL}
-        title="B2B Agent"
+        title={t("b2bAgent.titles.b2bAgent")}
         allow="clipboard-read; clipboard-write"
         sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
       />

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

@@ -1,6 +1,7 @@
 import { Toggle, Tooltip } from "@faststore/ui";
 
 import { ErrorMessage, Icon, InputText } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { transformToDecimalMoney } from "../../../shared/utils";
 
 import type { BudgetInput } from "../../types";
@@ -22,6 +23,7 @@ export const BudgetAddForm = ({
   handleBlur,
   readonly = false,
 }: BudgetAddFormProps) => {
+  const { t } = useLocalization();
   const sizeProps = { width: 15, height: 15 };
   const today = new Date().toISOString().split("T")[0];
 
@@ -38,12 +40,12 @@ export const BudgetAddForm = ({
   return (
     <div data-fs-bp-add-budget-drawer>
       <div data-fs-bp-create-budget-drawer-section-label>
-        <span>Settings</span>
+        <span>{t("budgets.forms.settings")}</span>
       </div>
 
       <InputText
         data-fs-bp-budget-name
-        label="Name"
+        label={t("budgets.forms.name")}
         value={budget.name}
         wrapperProps={{ style: { marginTop: 16 } }}
         onChange={(e) => handleChange("name", e.target.value)}
@@ -53,12 +55,12 @@ export const BudgetAddForm = ({
       />
       <ErrorMessage
         show={touched.name && !budget.name.trim()}
-        message="Name is required"
+        message={t("budgets.validation.nameRequired")}
       />
 
       <InputText
         data-fs-bp-budget-amount
-        label="Amount"
+        label={t("budgets.forms.amount")}
         value={
           typeof budget.amount === "number"
             ? Number(budget.amount).toFixed(2)
@@ -68,13 +70,13 @@ export const BudgetAddForm = ({
         onChange={handleAmountChange}
         onBlur={() => handleBlur("amount")}
         variant="withPrefix"
-        prefix="USD"
+        prefix={t("budgets.currencies.usd")}
         disabled={readonly}
         hasError={touched.amount && !String(budget.amount).trim()}
       />
       <ErrorMessage
         show={touched.amount && !String(budget.amount).trim()}
-        message="Amount is required"
+        message={t("budgets.validation.amountRequired")}
       />
 
       <div
@@ -83,7 +85,7 @@ export const BudgetAddForm = ({
       >
         <div>
           <InputText
-            label="Start date"
+            label={t("budgets.forms.startDate")}
             type="date"
             data-fs-bp-budget-start-date
             value={budget.startDate?.split("T")[0] ?? ""}
@@ -98,14 +100,14 @@ export const BudgetAddForm = ({
           <div data-fs-bp-error-wrapper>
             <ErrorMessage
               show={touched.startDate && !budget.startDate}
-              message="Start date is required"
+              message={t("budgets.validation.startDateRequired")}
             />
           </div>
         </div>
 
         <div>
           <InputText
-            label="End date"
+            label={t("budgets.forms.endDate")}
             type="date"
             data-fs-bp-budget-end-date
             value={endDate ? endDate.split("T")[0] : ""}
@@ -120,7 +122,7 @@ export const BudgetAddForm = ({
           <div data-fs-bp-error-wrapper>
             <ErrorMessage
               show={touched.endDate && !endDate}
-              message="End date is required"
+              message={t("budgets.validation.endDateRequired")}
             />
           </div>
         </div>
@@ -131,12 +133,12 @@ export const BudgetAddForm = ({
         data-fs-bp-create-budget-renew
       >
         <span data-fs-bp-create-budget-renew-label>
-          Renew this budget amount and period upon expiration
+          {t("budgets.forms.renewBudgetLabel")}
         </span>
         <div data-fs-bp-create-budget-drawer-row-section-action>
           <Tooltip
             placement="top-end"
-            content="When this budget expires, both its amount and period will automatically renew. The new period will match the duration originally set."
+            content={t("budgets.tooltips.renewBudget")}
           >
             <Icon name="Information" {...sizeProps} />
           </Tooltip>

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

@@ -1,6 +1,7 @@
 import { Checkbox, Link, Toggle, Tooltip } from "@faststore/ui";
 
 import { Icon } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 export type BudgetAddSuccessProps = {
   enforcePolicy: boolean;
@@ -19,23 +20,25 @@ export const BudgetAddSuccess = ({
   blockOnExpiration,
   setBlockOnExpiration,
 }: BudgetAddSuccessProps) => {
+  const { t } = useLocalization();
+
   return (
     <div data-fs-bp-budget-add-success>
       <Icon name="CheckSuccess" width={60} height={60} />
       <h1 data-fs-bp-budget-add-success-header>
-        Your budget has been created.
+        {t("budgets.create.budgetCreated")}
       </h1>
 
       <div data-fs-bp-budget-add-success-description-wrapper>
         <span data-fs-bp-budget-add-success-description>
-          Because this is the first budget created in this organization, and no
-          budget-related buying policies exist yet, you have the option to
-          create a default policy now. This policy will apply to all budgets at
-          the same organization level where this budget was created.
+          {t("budgets.create.firstBudgetPolicyDescription")}
         </span>
         <span data-fs-bp-budget-add-success-description>
-          You can edit or remove this policy later in the{" "}
-          <Link>Buying Policies</Link> section.
+          {t("budgets.create.buyingPoliciesLink", [
+            <Link key="buying-policies">
+              {t("budgets.create.buyingPolicies")}
+            </Link>,
+          ])}
         </span>
       </div>
 
@@ -45,12 +48,12 @@ export const BudgetAddSuccess = ({
       >
         <div data-fs-bp-budget-add-success-section>
           <span data-fs-bp-budget-add-success-label>
-            Create budget enforcement policy
+            {t("budgets.create.enforcementPolicyLabel")}
           </span>
           <div data-fs-bp-budget-add-success-row-section-action>
             <Tooltip
               placement="top-end"
-              content="When enabled, a default policy will be created to control budget usage at checkout. You can edit its name and description later in the Buying Policies section. When disabled, no budget enforcement policy will be created."
+              content={t("budgets.tooltips.enforcementPolicy")}
             >
               <Icon name="Information" width={20} height={20} />
             </Tooltip>
@@ -70,11 +73,11 @@ export const BudgetAddSuccess = ({
             onChange={(e) => setBlockOnExceed(e.target.checked)}
           />
           <div data-fs-bp-budget-add-success-section-checkbox-action-option>
-            <span>Prevent checkout when budget is exceeded</span>
+            <span>{t("budgets.create.preventCheckoutExceeded")}</span>
             <span
               data-fs-bp-budget-add-success-section-checkbox-action-suboption
             >
-              Block orders when the budget amount has been fully used
+              {t("budgets.create.preventCheckoutExceededDescription")}
             </span>
           </div>
         </div>
@@ -86,12 +89,11 @@ export const BudgetAddSuccess = ({
             onChange={(e) => setBlockOnExpiration(e.target.checked)}
           />
           <div data-fs-bp-budget-add-success-section-checkbox-action-option>
-            <span>Prevent checkout when budget is expired</span>
+            <span>{t("budgets.create.preventCheckoutExpired")}</span>
             <span
               data-fs-bp-budget-add-success-section-checkbox-action-suboption
             >
-              Block orders when the budget is no longer valid due to its
-              expiration date
+              {t("budgets.create.preventCheckoutExpiredDescription")}
             </span>
           </div>
         </div>

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

@@ -15,6 +15,7 @@ import { Pagination } from "../../../shared/components/Pagination/Pagination";
 import { type TableColumn } from "../../../shared/components/Table/TableHead/TableHead";
 import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
 import { useBuyerPortal } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { IPagination } from "../../../shared/types";
 import { Dictionary } from "../../../shared/utils";
 import { useClickOutside } from "../../hooks";
@@ -52,6 +53,7 @@ export const BudgetAllocationsSelection = ({
   onSortChange,
   setFilter,
 }: BudgetAllocationsSelectionProps) => {
+  const { t } = useLocalization();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   const { currentContract: contract } = useBuyerPortal();
@@ -151,10 +153,11 @@ export const BudgetAllocationsSelection = ({
     },
     ...getTableColumns({
       nameColumnSize: "14rem",
+      nameColumnLabel: t("shared.labels.name"),
       extraColumns: [
         {
           key: "contract",
-          label: "Contract",
+          label: t("budgets.table.contract"),
           align: "left",
           size: "100%",
           hideOnScreenSize: "phonemid",
@@ -174,7 +177,7 @@ export const BudgetAllocationsSelection = ({
               data-fs-bp-budget-allocation-select-current
               onClick={() => setIsDropdownOpen((prev) => !prev)}
             >
-              {currentSort}
+              {t(currentSort)}
               <Icon
                 name="CaretRight"
                 width={16}
@@ -198,7 +201,7 @@ export const BudgetAllocationsSelection = ({
                     }
                   >
                     <div data-fs-bp-budget-allocation-selected-wrapper>
-                      <span>{option}</span>
+                      <span>{t(option)}</span>
                       {currentSort === option && (
                         <Icon name="Check" width={16} height={16} />
                       )}
@@ -212,7 +215,7 @@ export const BudgetAllocationsSelection = ({
 
         <Tooltip
           placement="bottom-center"
-          content="Allocations determine how this budget is applied at checkout, ensuring it’s available for use during orders. To grant users access to the budget, you must add at least one allocation."
+          content={t("budgets.tooltips.allocationsInfo")}
         >
           <Icon name="InfoFilled" width={16} height={16} />
         </Tooltip>
@@ -239,7 +242,7 @@ export const BudgetAllocationsSelection = ({
               >
                 <Icon name="Close" {...svgProps} color="#ADADAD" />
               </button>
-              {`${selected.length} selected`}
+              {t("budgets.pagination.selectedCount", [selected.length])}
             </div>
           </Tag>
         )}

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

@@ -9,6 +9,7 @@ import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
 import { Pagination } from "../../../shared/components/Pagination/Pagination";
 import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
 import { useDrawerProps, useQueryParams } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { IPagination } from "../../../shared/types";
 import { CreateBudgetAllocationDrawer } from "../CreateBudgetAllocationDrawer/CreateBudgetAllocationDrawer";
 import { DeleteBudgetAllocationDrawer } from "../DeleteBudgetAllocationDrawer/DeleteBudgetAllocationDrawer";
@@ -36,6 +37,7 @@ export const BudgetAllocationsTable = ({
   pagination,
   onSearch,
 }: BudgetAllocationsTableProps) => {
+  const { t } = useLocalization();
   const { setQueryString, removeQueryString } = useQueryParams();
   const searchParams = useSearchParams();
   const searchTerm = searchParams.get("search");
@@ -61,16 +63,17 @@ export const BudgetAllocationsTable = ({
   const columns = getTableColumns({
     nameColumnSize: "14rem",
     actionsLength: 1,
+    nameColumnLabel: t("shared.labels.name"),
     extraColumns: [
       {
-        label: "Type",
+        label: t("budgets.table.type"),
         key: "type",
         size: "8.25rem",
         align: "left",
         hideOnScreenSize: "tablet",
       },
       {
-        label: "Contract",
+        label: t("budgets.table.contract"),
         key: "contract",
         size: "100%",
         align: "left",
@@ -105,8 +108,8 @@ export const BudgetAllocationsTable = ({
 
   const renderEmptyState = () => (
     <EmptyState
-      title="No allocations yet"
-      description="Add at least one allocation so that this budget can be used at checkout."
+      title={t("budgets.empty.noAllocations")}
+      description={t("budgets.empty.noAllocationsDescription")}
     />
   );
 
@@ -161,14 +164,14 @@ export const BudgetAllocationsTable = ({
     <div data-fs-bp-budget-details-allocation-table>
       <div data-fs-budget-details-allocation-table-edit-line>
         <span data-fs-budget-details-allocation-table-edit-title>
-          Allocations
+          {t("budgets.allocationsTable.title")}
         </span>
         <button
           type="button"
           data-fs-budget-details-allocation-table-edit-button
           onClick={openAddAllocationDrawerProps}
         >
-          Add
+          {t("shared.buttons.add")}
         </button>
       </div>
 

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

@@ -11,8 +11,8 @@ import {
   InputText,
 } from "../../../shared/components";
 import { useAnalytics, useDebounce } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import { useDeleteBudget } from "../../hooks/useDeleteBudget";
 
 export interface BudgetDeleteDrawerProps
@@ -33,6 +33,7 @@ export function BudgetDeleteDrawer({
   redirect,
   ...props
 }: BudgetDeleteDrawerProps) {
+  const { t } = useLocalization();
   const { pushToast } = useUI();
   const router = useRouter();
   const { trackEvent } = useAnalytics({
@@ -49,13 +50,13 @@ export function BudgetDeleteDrawer({
 
   const errorMessage = useMemo(() => {
     if (isTouched && !inputValue) {
-      return "Budget name is required";
+      return t("budgets.validation.budgetNameRequired");
     }
 
     return debouncedValue && debouncedValue !== budgetName
-      ? "Budget name is invalid"
+      ? t("budgets.validation.budgetNameInvalid")
       : null;
-  }, [debouncedValue, isTouched, inputValue, budgetName]);
+  }, [debouncedValue, isTouched, inputValue, budgetName, t]);
 
   const { mutate: deleteBudget, isLoading: isLoadingDeleteBudget } =
     useDeleteBudget({
@@ -76,7 +77,7 @@ export function BudgetDeleteDrawer({
 
           pushToast({
             status: "ERROR",
-            message: "An error occurred while removing the budget",
+            message: t("budgets.errors.budgetRemoveFailed"),
           });
         },
       },
@@ -93,7 +94,9 @@ export function BudgetDeleteDrawer({
 
     pushToast({
       status: "INFO",
-      message: `Budget deleted successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("budgets.toasts.budgetDeleted")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
     });
 
     if (redirect) {
@@ -118,25 +121,28 @@ export function BudgetDeleteDrawer({
 
   return (
     <BasicDrawer data-fs-bp-budget-delete-drawer close={close} {...props}>
-      <BasicDrawer.Heading title="Delete budget" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("budgets.delete.budgetTitle")}
+        onClose={close}
+      />
       <BasicDrawer.Body>
         <div>
           <p>
-            Permanently delete{" "}
-            <span data-fs-bp-budget-delete-drawer-name>{budgetName}</span>?
+            {t("budgets.delete.permanentlyDeleteBudget", [
+              <span key="budget-name" data-fs-bp-budget-delete-drawer-name>
+                {budgetName}
+              </span>,
+            ])}
           </p>
           <br />
-          <p>
-            Deleting this budget will permanently remove all its data, but usage
-            history will be kept for audit. This action can't be undone.
-          </p>
+          <p>{t("budgets.delete.budgetWarning")}</p>
           <br />
-          <p>Confirm by typing the budget name below:</p>
+          <p>{t("budgets.delete.confirmBudgetName")}</p>
         </div>
 
         <br />
         <InputText
-          label="Budget name"
+          label={t("budgets.forms.budgetName")}
           value={inputValue}
           onBlur={() => setIsTouched(true)}
           onChange={(e) => setInputValue(e.target.value)}
@@ -150,7 +156,7 @@ export function BudgetDeleteDrawer({
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="danger"
@@ -158,7 +164,7 @@ export function BudgetDeleteDrawer({
           onClick={handleDelete}
           disabled={debouncedValue !== budgetName}
         >
-          Remove
+          {t("shared.buttons.remove")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>