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

package/src/features/credit-cards/components/CreditCardSettingsDrawer/CreditCardSettingsDrawer.tsx

@@ -10,7 +10,7 @@ import {
   createListTypeOptions,
 } from "../../../shared/components";
 import { useSetScopeConfig, SCOPE_KEYS } from "../../../shared/hooks";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 export type CreditCardSettingsDrawerProps = Omit<
   BasicDrawerProps,
@@ -19,28 +19,30 @@ export type CreditCardSettingsDrawerProps = Omit<
   readonly?: boolean;
 };
 
-const CREDIT_CARD_LIST_TYPE_OPTIONS = createListTypeOptions("credit cards");
-
 export const CreditCardSettingsDrawer = ({
   close,
   ...otherProps
 }: CreditCardSettingsDrawerProps) => {
   const { pushToast } = useUI();
   const router = useRouter();
+  const { t } = useLocalization();
+  const creditCardListTypeOptions = createListTypeOptions("credit cards", t);
 
   const [listType, setListType] = useState<"sync" | "custom">("custom");
 
   const { setScopeConfig, isSetScopeConfigLoading } = useSetScopeConfig({
     onSuccess: () => {
       pushToast({
-        message: `Scope configuration updated successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+        message: `${t("creditCards.toasts.scopeConfigUpdated")}\n${t(
+          "shared.messages.changesTimeout"
+        )}`,
         status: "INFO",
       });
       close();
     },
     onError: () => {
       pushToast({
-        message: "Failed to update scope configuration",
+        message: t("creditCards.toasts.scopeConfigUpdateFailed"),
         status: "ERROR",
       });
     },
@@ -57,7 +59,7 @@ export const CreditCardSettingsDrawer = ({
 
   return (
     <SettingsDrawer
-      title="Credit cards settings"
+      title={t("creditCards.settings.title")}
       {...otherProps}
       close={close}
       onPrimaryAction={handleConfirmClick}
@@ -67,11 +69,11 @@ export const CreditCardSettingsDrawer = ({
       data-fs-bp-edit-credit-card-settings-drawer
     >
       <SettingsDrawer.ListType
-        title="List type"
+        title={t("creditCards.settings.listType")}
         name="credit-card-list-type"
         value={listType}
         onChange={setListType}
-        options={CREDIT_CARD_LIST_TYPE_OPTIONS}
+        options={creditCardListTypeOptions}
       />
     </SettingsDrawer>
   );

package/src/features/credit-cards/components/DeleteCreditCardDrawer/DeleteCreditCardDrawer.tsx

@@ -10,7 +10,7 @@ import {
   InputText,
 } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { useDeleteCreditCard } from "../../hooks";
 
 export type DeleteCreditCardDrawerProps = Omit<BasicDrawerProps, "children"> & {
@@ -28,6 +28,7 @@ export const DeleteCreditCardDrawer = ({
   const { pushToast } = useUI();
   const router = useRouter();
   const { currentOrgUnit } = useBuyerPortal();
+  const { t } = useLocalization();
   const [unitNameConfirmation, setUnitNameConfirmation] = useState("");
 
   const handleConfirmClick = async () => {
@@ -37,7 +38,9 @@ export const DeleteCreditCardDrawer = ({
     });
 
     pushToast({
-      message: `Credit card deleted successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("creditCards.toasts.creditCardDeleted")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     router.reload();
@@ -50,24 +53,26 @@ export const DeleteCreditCardDrawer = ({
 
   return (
     <BasicDrawer data-fs-bp-remove-credit-card-drawer close={close} {...props}>
-      <BasicDrawer.Heading title="Delete credit card" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("creditCards.delete.title")}
+        onClose={close}
+      />
       <BasicDrawer.Body>
         <div>
           <p>
-            Permanently delete <span data-fs-bp-drawer-label>{cardName} </span>?
+            {t("creditCards.delete.permanentlyDeleteConfirm", [
+              <span key="card-name" data-fs-bp-drawer-label>
+                {cardName}
+              </span>,
+            ])}
           </p>
           <br />
-          <p>
-            This credit card may be used by multiple units. Deleting it will
-            permanently remove it and all iits data from all associated units,
-            though usage history will be kept for audit. This action can't be
-            undone
-          </p>
+          <p>{t("creditCards.delete.warning")}</p>
           <br />
-          <p>Confirm by typing the organizational unit name below:</p>
+          <p>{t("creditCards.delete.confirmUnitName")}</p>
           <br />
           <InputText
-            label="Organizational Unit"
+            label={t("creditCards.labels.organizationalUnit")}
             value={unitNameConfirmation}
             onChange={(event) =>
               setUnitNameConfirmation(event.currentTarget.value)
@@ -78,7 +83,7 @@ export const DeleteCreditCardDrawer = ({
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -86,7 +91,7 @@ export const DeleteCreditCardDrawer = ({
           disabled={!isDeleteButtonEnabled}
           isLoading={isDeleteCreditCardLoading}
         >
-          Delete
+          {t("shared.buttons.delete")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/credit-cards/components/EditCreditCardDrawer/EditCreditCardDrawer.tsx

@@ -9,7 +9,7 @@ import {
   BasicDrawer,
   InputText,
 } from "../../../shared/components";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 import type { CreditCardData } from "../../types";
 
@@ -24,20 +24,22 @@ export const EditCreditCardDrawer = ({
   ...props
 }: EditCreditCardDrawerProps) => {
   const { pushToast } = useUI();
-
   const router = useRouter();
+  const { t } = useLocalization();
 
   const [cardToModify, setCardToModify] = useState<CreditCardData>(creditCard);
   const [onConfirmationStep, setOnConfirmationStep] = useState(false);
 
   const drawerTitle = onConfirmationStep
-    ? "Confirm credit card update"
-    : "Rename credit card";
+    ? t("creditCards.update.confirmTitle")
+    : t("creditCards.edit.title");
 
   const handleConfirmClick = () => {
     if (onConfirmationStep) {
       pushToast({
-        message: `Credit card updated successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+        message: `${t("creditCards.toasts.creditCardUpdated")}\n${t(
+          "shared.messages.changesTimeout"
+        )}`,
         status: "INFO",
       });
       router.reload();
@@ -55,17 +57,14 @@ export const EditCreditCardDrawer = ({
       <BasicDrawer.Body>
         {onConfirmationStep ? (
           <div>
-            <p>
-              Thid credit card may be used by multiple units. Updates will
-              affect all of them
-            </p>
+            <p>{t("creditCards.edit.multiUnitWarning")}</p>
             <br />
-            <p>Proceed with the update?</p>
+            <p>{t("creditCards.edit.proceedConfirm")}</p>
             <br />
           </div>
         ) : (
           <InputText
-            label="Card nickname"
+            label={t("creditCards.labels.cardNickname")}
             value={cardToModify.cardLabel}
             wrapperProps={{ style: { marginTop: 16 } }}
             onChange={(event) =>
@@ -80,7 +79,7 @@ export const EditCreditCardDrawer = ({
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -88,7 +87,9 @@ export const EditCreditCardDrawer = ({
           onClick={handleConfirmClick}
           isLoading={false}
         >
-          {onConfirmationStep ? "Confirm" : "Save"}
+          {onConfirmationStep
+            ? t("shared.buttons.confirm")
+            : t("shared.buttons.save")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/credit-cards/components/RemoveCreditCardDrawer/RemoveCreditCardDrawer.tsx

@@ -4,7 +4,7 @@ import { useUI } from "@faststore/ui";
 
 import { type BasicDrawerProps, BasicDrawer } from "../../../shared/components";
 import { useRemoveFromScope, useBuyerPortal } from "../../../shared/hooks";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 export type RemoveCreditCardDrawerProps = Omit<BasicDrawerProps, "children"> & {
   readonly?: boolean;
@@ -21,10 +21,13 @@ export const RemoveCreditCardDrawer = ({
   const { pushToast } = useUI();
   const router = useRouter();
   const { currentOrgUnit } = useBuyerPortal();
+  const { t } = useLocalization();
 
   const handeRemoveFromScopeSuccess = () => {
     pushToast({
-      message: `Credit card removed successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("creditCards.toasts.creditCardRemoved")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     router.reload();
@@ -35,8 +38,7 @@ export const RemoveCreditCardDrawer = ({
     onSuccess: handeRemoveFromScopeSuccess,
     onError: () => {
       pushToast({
-        message:
-          "An error occurred while removing the credit card from the unit",
+        message: t("creditCards.errors.removeFromUnit"),
         status: "ERROR",
       });
     },
@@ -53,31 +55,32 @@ export const RemoveCreditCardDrawer = ({
   return (
     <BasicDrawer data-fs-bp-remove-credit-card-drawer close={close} {...props}>
       <BasicDrawer.Heading
-        title="Remove credit card from unit"
+        title={t("creditCards.delete.removeFromUnitTitle")}
         onClose={close}
       />
       <BasicDrawer.Body>
         <div>
           <p>
-            {" "}
-            Remove <span data-fs-bp-drawer-label>{cardName}</span> credit card
-            from <span data-fs-bp-drawer-label>{currentOrgUnit?.name} </span>{" "}
-            organizational unit?
+            {t("creditCards.delete.removeFromUnitConfirm", [
+              <span key="card-name" data-fs-bp-drawer-label>
+                {cardName}
+              </span>,
+              <span key="unit-name" data-fs-bp-drawer-label>
+                {currentOrgUnit?.name}
+              </span>,
+            ])}
           </p>
           <br />
-          <p>
-            This action will prevent users in this unit from accessing this
-            credit card during checkout
-          </p>
+          <p>{t("creditCards.delete.removeFromUnitDescription")}</p>
         </div>
       </BasicDrawer.Body>
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button variant="confirm" onClick={handleConfirmClick}>
-          Confirm
+          {t("shared.buttons.confirm")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/credit-cards/layouts/CreditCardsLayout/CreditCardLayout.tsx

@@ -15,6 +15,7 @@ import {
   usePageItems,
 } from "../../../shared/hooks";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import {
   CreateCreditCardDrawer,
   CreditCardDropdownMenu,
@@ -30,6 +31,8 @@ export type CreditCardsLayoutProps = {
 };
 
 export const CreditCardLayout = ({ data }: CreditCardsLayoutProps) => {
+  const { t } = useLocalization();
+
   const {
     open: openCreateDrawer,
     isOpen: isCreateCreditCardDrawerOpen,
@@ -93,7 +96,7 @@ export const CreditCardLayout = ({ data }: CreditCardsLayoutProps) => {
 
   const columns = getTableColumns({
     actionsLength: 3,
-    nameColumnLabel: "Card Nickname",
+    nameColumnLabel: t("creditCards.table.cardNickname"),
   });
 
   const renderRowActions = (creditCard: CreditCardData) => {
@@ -134,10 +137,10 @@ export const CreditCardLayout = ({ data }: CreditCardsLayoutProps) => {
         orgUnitId={orgUnit?.id ?? ""}
         contractName={contract?.name ?? ""}
         contractId={contract?.id ?? ""}
-        pageName="Contract"
+        pageName={t("shared.labels.contract")}
       >
         <section data-fs-credit-card-section>
-          <HeaderInside title="Credit cards">
+          <HeaderInside title={t("creditCards.titles.creditCards")}>
             <HeaderInside.Button
               iconName="EditSettings"
               style={{ backgroundColor: "transparent", color: "#1f1f1f" }}
@@ -146,7 +149,10 @@ export const CreditCardLayout = ({ data }: CreditCardsLayoutProps) => {
             <HeaderInside.Button onClick={openCreateDrawer} />
           </HeaderInside>
           {data.length === 0 ? (
-            <EmptyState iconName="CreditCard" title="No credit cards yet" />
+            <EmptyState
+              iconName="CreditCard"
+              title={t("creditCards.empty.noCreditCards")}
+            />
           ) : (
             <Table layoutFixed>
               <Table.Head columns={columns} />

package/src/features/order-entry/layouts/OrderEntryLayout.tsx

@@ -4,6 +4,7 @@ import storeConfig from "discovery.config";
 
 import { useRouter } from "next/router";
 
+import { useLocalization } from "../../shared/localization/LocalizationContext";
 import { isDevelopment } from "../../shared/utils/environment";
 
 const B2B_AGENT_URL = isDevelopment()
@@ -46,6 +47,7 @@ export const OrderEntryLayout = ({
   customerId,
   userId,
 }: OrderEntryLayoutProps) => {
+  const { t } = useLocalization();
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const router = useRouter();
 
@@ -179,7 +181,7 @@ export const OrderEntryLayout = ({
         style={iframeStyle}
         data-fs-bp-b2b-agent-iframe
         src={B2B_AGENT_URL}
-        title="Order Entry Agent"
+        title={t("orderEntry.titles.orderEntryAgent")}
         allow="clipboard-read; clipboard-write"
         sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
       />

package/src/features/org-units/components/AddAllToOrgUnitDropdown/AddAllToOrgUnitDropdown.tsx

@@ -13,6 +13,7 @@ import { CreateCreditCardDrawer } from "../../../credit-cards/components";
 import { useGetRolesOptions } from "../../../roles/hooks";
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
 import { useDrawerProps } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { CreateUserDrawerSelector } from "../../../users/components";
 
 export type AddAllToOrgUnitDropdownProps = {
@@ -34,6 +35,7 @@ export const AddAllToOrgUnitDropdown = ({
   align = "right",
   onCreateAccountingField,
 }: AddAllToOrgUnitDropdownProps) => {
+  const { t } = useLocalization();
   const sizeProps = { width: 20, height: 20 };
   const { rolesOptions } = useGetRolesOptions(unitId);
 
@@ -111,7 +113,7 @@ export const AddAllToOrgUnitDropdown = ({
 
         <DropdownItem onClick={openUpdateDrawer}>
           <Icon name="FormatSize" {...sizeProps} />
-          Rename
+          {t("shared.orgUnitDropdown.rename")}
         </DropdownItem>
         <BasicDropdownMenu.Separator />
 
@@ -119,15 +121,15 @@ export const AddAllToOrgUnitDropdown = ({
           <>
             <DropdownItem onClick={openAddressDrawer}>
               <Icon name="LocalPostOffice" {...sizeProps} />
-              Add address
+              {t("shared.orgUnitDropdown.addAddress")}
             </DropdownItem>
             <DropdownItem onClick={openCreditCardDrawer}>
               <Icon name="CreditCard" {...sizeProps} />
-              Add credit card
+              {t("shared.orgUnitDropdown.addCreditCard")}
             </DropdownItem>
             <DropdownItem onClick={openAccountingFieldDrawer}>
               <Icon name="TableEdit" {...sizeProps} />
-              Add accounting fields
+              {t("shared.orgUnitDropdown.addAccountingFields")}
             </DropdownItem>
           </>
         )}
@@ -135,21 +137,21 @@ export const AddAllToOrgUnitDropdown = ({
 
         <DropdownItem onClick={openUserDrawer}>
           <Icon name="Profile" {...sizeProps} />
-          Add user
+          {t("shared.orgUnitDropdown.addUser")}
         </DropdownItem>
         <DropdownItem onClick={openOrganizationDrawer}>
           <Icon name="Folder" {...sizeProps} />
-          Add organization unit
+          {t("shared.orgUnitDropdown.addOrganizationUnit")}
         </DropdownItem>
         <BasicDropdownMenu.Separator />
 
         <DropdownItem onClick={openBudgetDrawer}>
           <Icon name="Paid" {...sizeProps} />
-          Add budget
+          {t("shared.orgUnitDropdown.addBudget")}
         </DropdownItem>
         <DropdownItem onClick={openBuyingPolicyDrawer}>
           <Icon name="Rebase" {...sizeProps} />
-          Add buying policy
+          {t("shared.orgUnitDropdown.addBuyingPolicy")}
         </DropdownItem>
 
         <BasicDropdownMenu.Separator />
@@ -159,7 +161,7 @@ export const AddAllToOrgUnitDropdown = ({
           data-fs-bp-dropdown-menu-item-mode="danger"
         >
           <Icon name="Delete" {...sizeProps} />
-          Delete
+          {t("shared.buttons.delete")}
         </DropdownItem>
       </BasicDropdownMenu>
 

package/src/features/org-units/components/AuthSetupDrawer/AuthSetupDrawer.tsx

@@ -11,7 +11,7 @@ import {
   Icon,
 } from "../../../shared/components";
 import { useAnalytics, useBuyerPortal } from "../../../shared/hooks";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { useUpdateOrgUnitSettings } from "../../hooks";
 import { AuthenticationMethod, type OrgUnitSettings } from "../../types";
 
@@ -38,26 +38,28 @@ function getAuthMethodOptions(
 
   const options: AuthMethodOption[] = [];
   if (password) {
-    options.push({ method: AuthenticationMethod.PASSWORD, label: "Password" });
+    options.push({
+      method: AuthenticationMethod.PASSWORD,
+      label: "orgUnitDetails.auth.password",
+    });
   }
   if (authSettings?.email_access_code) {
     options.push({
       method: AuthenticationMethod.EMAIL_ACCESS_CODE,
-      label: "Email access code",
+      label: "orgUnitDetails.auth.emailAccessCode",
     });
   }
   if (authSettings?.sms_access_code) {
     options.push({
       method: AuthenticationMethod.SMS_ACCESS_CODE,
-      label: "SMS access code",
+      label: "orgUnitDetails.auth.smsAccessCode",
     });
   }
   if (sso) {
     options.push({
       method: AuthenticationMethod.SSO,
-      label: "PingFederate (SSO)",
-      tooltip:
-        "Enables login through external identity providers, such as Google, Microsoft, or other supported IdPs",
+      label: "orgUnitDetails.auth.pingFederateSso",
+      tooltip: "orgUnitDetails.auth.ssoTooltip",
     });
   }
   return options;
@@ -96,6 +98,7 @@ export const AuthSetupDrawer = ({
   ...props
 }: AuthSetupDrawerProps) => {
   const { featureFlags } = useBuyerPortal();
+  const { t } = useLocalization();
   const authMethodOptions = useMemo(
     () => getAuthMethodOptions(featureFlags?.authSettings),
     [featureFlags?.authSettings]
@@ -128,7 +131,9 @@ export const AuthSetupDrawer = ({
     });
 
     pushToast({
-      message: `Authentication settings saved successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("orgUnitDetails.toasts.authSettingsSaved")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
 
@@ -153,7 +158,7 @@ export const AuthSetupDrawer = ({
         );
 
         pushToast({
-          message: "An error occurred while updating authentication settings",
+          message: t("orgUnitDetails.errors.authSettingsUpdateFailed"),
           status: "ERROR",
         });
       },
@@ -202,14 +207,19 @@ export const AuthSetupDrawer = ({
 
   return (
     <BasicDrawer data-fs-bp-auth-setup-drawer close={close} {...props}>
-      <BasicDrawer.Heading title="Authentication" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("orgUnitDetails.drawers.authentication.title")}
+        onClose={close}
+      />
       <BasicDrawer.Body>
         <section data-fs-bp-auth-setup-section>
           <div data-fs-bp-auth-setup-section-header>
-            <h2 data-fs-bp-auth-setup-section-title>Authentication methods</h2>
+            <h2 data-fs-bp-auth-setup-section-title>
+              {t("orgUnitDetails.auth.authenticationMethods")}
+            </h2>
           </div>
           <p data-fs-bp-auth-setup-section-description>
-            Control which authentication methods are available
+            {t("orgUnitDetails.auth.controlMethodsDescription")}
           </p>
 
           <div
@@ -226,10 +236,12 @@ export const AuthSetupDrawer = ({
                     disabled={isOnlyActiveMethod(method)}
                     onChange={() => handleAuthMethodChange(method)}
                   />
-                  <span data-fs-bp-auth-setup-checkbox-label-text>{label}</span>
+                  <span data-fs-bp-auth-setup-checkbox-label-text>
+                    {t(label)}
+                  </span>
                 </label>
                 {tooltip && (
-                  <Tooltip content={tooltip} placement="left-center">
+                  <Tooltip content={t(tooltip)} placement="left-center">
                     <Icon
                       name="InfoFilled"
                       width={20}
@@ -282,7 +294,7 @@ export const AuthSetupDrawer = ({
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -290,7 +302,7 @@ export const AuthSetupDrawer = ({
           onClick={handleConfirmClick}
           isLoading={isUpdateOrgUnitSettingsLoading}
         >
-          Save
+          {t("shared.buttons.save")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>