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

package/src/features/shared/utils/withAuthLoader.ts

@@ -1,3 +1,5 @@
+import { LOCALIZATION_ENTRY_IDS } from "../localization/constants";
+import { getLocalizationLabelsService } from "../localization/services/get-localization-labels.service";
 import { validateAccessService } from "../services";
 import { getBuyerPortalFeatureFlags } from "../services/feature-flags/get-feature-flags.service";
 
@@ -86,6 +88,12 @@ export const withAuthLoader = async <T>(
   } catch (error) {
     console.error("Auth validation failed:", error);
 
+    // Fetch shared labels for the error state; never throws, uses process-local cache.
+    const localizationLabels = await getLocalizationLabelsService({
+      entryIds: LOCALIZATION_ENTRY_IDS.shared,
+      locale: data.locale ?? "",
+    });
+
     return {
       authorized: false,
       hasError: true,
@@ -103,6 +111,9 @@ export const withAuthLoader = async <T>(
           errorType: "auth_error",
         },
       },
+      context: {
+        localization: { labels: localizationLabels },
+      },
     };
   }
 };

package/src/features/shared/utils/withLoaderErrorBoundary.ts

@@ -1,3 +1,5 @@
+import { LOCALIZATION_ENTRY_IDS } from "../localization/constants";
+import { getLocalizationLabelsService } from "../localization/services/get-localization-labels.service";
 import { logError } from "../services/logger";
 
 import { getClientContext } from "./getClientContext";
@@ -77,6 +79,12 @@ export function withLoaderErrorBoundary<TQuery, TReturn>(
           };
         }
 
+        // Fetch shared labels for the error state; never throws, uses process-local cache.
+        const localizationLabels = await getLocalizationLabelsService({
+          entryIds: LOCALIZATION_ENTRY_IDS.shared,
+          locale: data.locale ?? "",
+        });
+
         // Serialize query to ensure it's JSON-safe (use null instead of undefined)
         const serializedQuery = data.query
           ? JSON.parse(JSON.stringify(data.query))
@@ -104,6 +112,7 @@ export function withLoaderErrorBoundary<TQuery, TReturn>(
             currentOrgUnit: null,
             currentContract: null,
             currentUser: null,
+            localization: { labels: localizationLabels },
           },
           data: null,
         };

package/src/features/shared/utils/withProviders.tsx

@@ -1,5 +1,7 @@
 import { type ComponentType } from "react";
 
+import { withLocalization } from "../localization/withLocalization";
+
 import { withAuth } from "./withAuth";
 import { withBuyerPortal } from "./withBuyerPortal";
 
@@ -12,9 +14,18 @@ type ProviderHOC = (Component: ComponentType<any>) => ComponentType<any>;
 
 /**
  * Default project providers applied to all pages.
- * Order: right to left (like pipe/compose)
+ * Order: right to left (like pipe/compose).
+ * Resulting tree: withAuth › withLocalization › withBuyerPortal › Component
+ *
+ * withLocalization is placed before withBuyerPortal so it:
+ *   1. Receives `context` (withBuyerPortal strips it before rendering its child).
+ *   2. Wraps BuyerPortalProvider (and its LoadingTabsLayout), enabling localization in loading states.
  */
-const projectProviders: ProviderHOC[] = [withAuth, withBuyerPortal];
+const projectProviders: ProviderHOC[] = [
+  withAuth,
+  withLocalization,
+  withBuyerPortal,
+];
 
 /**
  * HOC that applies all default project providers.

package/src/features/users/components/CreateUserDrawer/CreateUserDrawer.tsx

@@ -2,7 +2,8 @@ import { useState } from "react";
 
 import { useRouter } from "next/router";
 
-import { Button, useUI } from "@faststore/ui";
+import { useLink_unstable as useLink } from "@faststore/core/experimental";
+import { Button, Link, useUI } from "@faststore/ui";
 
 import { RoleData } from "../../../roles/types";
 import {
@@ -13,10 +14,10 @@ import {
   InputText,
 } from "../../../shared/components";
 import { useAnalytics } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { isValidEmail } from "../../../shared/utils";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import {
   maskPhoneNumber,
   normalizePhoneNumber,
@@ -38,6 +39,8 @@ export const CreateUserDrawer = ({
 }: CreateUserDrawerProps) => {
   const { pushToast } = useUI();
   const router = useRouter();
+  const { t } = useLocalization();
+  const { resolveLink } = useLink();
   const { trackEntityCreated, trackEntityCreateError } = useAnalytics({
     entityType: "user",
     defaultTimerName: "user_creation",
@@ -98,7 +101,9 @@ export const CreateUserDrawer = ({
     });
 
     pushToast({
-      message: `User successfully added\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("users.create.toasts.userSuccessfullyAdded")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
       icon: (
         <button
@@ -111,7 +116,7 @@ export const CreateUserDrawer = ({
             });
           }}
         >
-          View
+          {t("shared.buttons.view")}
         </button>
       ),
     });
@@ -218,10 +223,10 @@ export const CreateUserDrawer = ({
                   data-fs-bp-create-user-drawer-back-icon
                 />
               </button>
-              User cannot be added
+              {t("users.create.drawerTitleUserCannotBeAdded")}
             </>
           ) : (
-            "Add User"
+            t("users.create.drawerTitle")
           )
         }
         onClose={close}
@@ -232,16 +237,16 @@ export const CreateUserDrawer = ({
             {hasRolesError ? (
               <div data-fs-bp-create-user-error-state>
                 <Icon name="Warning" height={48} width={48} />
-                <h3>Something went wrong</h3>
-                <p>The add user form could not be loaded.</p>
+                <h3>{t("shared.messages.somethingWentWrong")}</h3>
+                <p>{t("users.create.errors.formCouldNotBeLoaded")}</p>
                 <Button variant="secondary" onClick={handleRetryRoles}>
-                  Try again
+                  {t("shared.buttons.tryAgain")}
                 </Button>
               </div>
             ) : (
               <>
                 <InputText
-                  label="Full Name"
+                  label={t("users.forms.fullName")}
                   value={name}
                   hasError={isTouched && !name?.trim()}
                   onChange={(event) => updateField("name", event.target.value)}
@@ -249,11 +254,11 @@ export const CreateUserDrawer = ({
 
                 <ErrorMessage
                   show={isTouched && !name?.trim()}
-                  message="Full name is required"
+                  message={t("users.validation.fullNameRequired")}
                 />
 
                 <InputText
-                  label="E-mail"
+                  label={t("users.forms.email")}
                   value={email}
                   wrapperProps={{ style: { marginTop: 16, marginBottom: 16 } }}
                   hasError={isTouched && emailInvalid}
@@ -264,15 +269,16 @@ export const CreateUserDrawer = ({
                 <ErrorMessage
                   show={isTouched && emailInvalid}
                   message={
-                    !email.trim() ? "E-mail is required" : "E-mail is invalid"
+                    !email.trim()
+                      ? t("users.validation.emailRequired")
+                      : t("users.validation.emailInvalid")
                   }
                 />
 
                 <InputText
-                  label="Phone number (optional)"
+                  label={t("users.forms.phoneNumberOptional")}
                   value={maskPhoneNumber(phone, "USA")}
                   onChange={(event) =>
-                    // TODO: Update this when implementing i18n
                     updateField(
                       "phone",
                       normalizePhoneNumber(event.target.value)
@@ -281,7 +287,9 @@ export const CreateUserDrawer = ({
                 />
 
                 <div data-fs-bp-create-user-roles>
-                  <span data-fs-bp-create-user-roles-label>Roles</span>
+                  <span data-fs-bp-create-user-roles-label>
+                    {t("users.forms.roles")}
+                  </span>
 
                   {rolesOptions &&
                     rolesOptions.map((role) => {
@@ -316,7 +324,7 @@ export const CreateUserDrawer = ({
           </BasicDrawer.Body>
           <BasicDrawer.Footer>
             <BasicDrawer.Button variant="ghost" onClick={close}>
-              Cancel
+              {t("shared.buttons.cancel")}
             </BasicDrawer.Button>
             <BasicDrawer.Button
               variant="confirm"
@@ -324,7 +332,7 @@ export const CreateUserDrawer = ({
               onClick={handleConfirmClick}
               isLoading={isAddUserToOrgUnitLoading}
             >
-              Add
+              {t("users.create.buttons.add")}
             </BasicDrawer.Button>
           </BasicDrawer.Footer>
         </>
@@ -332,23 +340,27 @@ export const CreateUserDrawer = ({
       {drawerState === "USER_ALREADY_EXISTS" && (
         <>
           <BasicDrawer.Body data-fs-bp-create-user-drawer-body>
-            <p>This user is assigned to another organizational unit.</p>
+            <p>{t("users.create.messages.userAssignedToAnotherUnit")}</p>
             <br />
             <p>
-              Users can only belong to one organizational unit at a time. To add
-              <a
-                href={`/user/${userAlreadyInUse?.id}`}
-              >{` ${userAlreadyInUse?.name}`}</a>{" "}
-              to {orgUnitName}, go to their profile and move them from
-              {` ${userAlreadyInUse?.orgUnit}`}.
+              {t("users.create.messages.moveUserFromAnotherUnit", [
+                <Link
+                  key="user-name"
+                  href={resolveLink(`/user/${userAlreadyInUse?.id}`)}
+                >
+                  {userAlreadyInUse?.name}
+                </Link>,
+                orgUnitName,
+                userAlreadyInUse?.orgUnit,
+              ])}
             </p>
           </BasicDrawer.Body>
           <BasicDrawer.Footer>
             <BasicDrawer.Button variant="ghost" onClick={close}>
-              Cancel
+              {t("shared.buttons.cancel")}
             </BasicDrawer.Button>
             <BasicDrawer.Button variant="confirm" onClick={close}>
-              Ok
+              {t("shared.buttons.ok")}
             </BasicDrawer.Button>
           </BasicDrawer.Footer>
         </>

package/src/features/users/components/CreateUserDrawerWithUsername/CreateUserDrawerWithUsername.tsx

@@ -11,10 +11,10 @@ import {
   Icon,
 } 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 { isValidEmail } from "../../../shared/utils";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import { normalizePhoneNumber } from "../../../shared/utils/phoneNumber";
 import { useAddUserToOrgUnit, useResetPassword } from "../../hooks";
 import { detectLoginType } from "../../utils/detectLoginType";
@@ -48,6 +48,7 @@ export const CreateUserDrawerWithUsername = ({
   const { pushToast } = useUI();
   const router = useRouter();
   const { featureFlags } = useBuyerPortal();
+  const { t } = useLocalization();
   const { trackEntityCreated, trackEntityCreateError } = useAnalytics({
     entityType: "user",
     defaultTimerName: "user_creation",
@@ -149,13 +150,12 @@ export const CreateUserDrawerWithUsername = ({
 
   const handleResetPasswordError = useCallback(() => {
     pushToast({
-      message:
-        "Failed to generate access code. Please try resetting the password later.",
+      message: t("users.create.errors.failedToGenerateAccessCode"),
       status: "ERROR",
     });
     onCreate?.();
     close();
-  }, [pushToast, onCreate, close]);
+  }, [pushToast, onCreate, close, t]);
 
   const { resetPassword, isResetPasswordLoading } = useResetPassword({
     onSuccess: handleResetPasswordSuccess,
@@ -183,8 +183,10 @@ export const CreateUserDrawerWithUsername = ({
     }
 
     pushToast({
-      title: "User added successfully",
-      message: `An access code has been sent to [${effectiveEmail}](mailto:${effectiveEmail}) for first-time login.\n${CHANGES_TIMEOUT_MESSAGE}`,
+      title: t("users.create.toasts.userAddedSuccessfully"),
+      message: `${t("users.create.toasts.accessCodeSent", [
+        `[${email}](mailto:${email})`,
+      ])}\n${t("shared.messages.changesTimeout")}`,
       status: "INFO",
       icon: (
         <button
@@ -197,7 +199,7 @@ export const CreateUserDrawerWithUsername = ({
             });
           }}
         >
-          View
+          {t("shared.buttons.view")}
         </button>
       ),
     });
@@ -231,14 +233,15 @@ export const CreateUserDrawerWithUsername = ({
       if (error.code === "EMAIL_ALREADY_EXISTS") {
         setSharedEmailData({
           email: loginType === "email" ? login : email,
-          existingUserName: error.existingUserName || "another user",
+          existingUserName:
+            error.existingUserName || t("users.create.messages.anotherUser"),
         });
         setDrawerState("CONFIRM_SHARED_EMAIL");
         return;
       }
 
       pushToast({
-        message: error.message || "An error occurred while creating the user",
+        message: error.message || t("users.create.errors.failedToCreateUser"),
         status: "ERROR",
       });
     },
@@ -259,9 +262,15 @@ export const CreateUserDrawerWithUsername = ({
     try {
       await navigator.clipboard.writeText(accessToken);
       setHasTokenBeenCopied(true);
-      pushToast({ message: "Access code copied to clipboard", status: "INFO" });
+      pushToast({
+        message: t("users.reset.toasts.accessCodeCopied"),
+        status: "INFO",
+      });
     } catch {
-      pushToast({ message: "Failed to copy access code", status: "ERROR" });
+      pushToast({
+        message: t("users.reset.toasts.failedToCopyAccessCode"),
+        status: "ERROR",
+      });
     }
   };
 
@@ -293,13 +302,13 @@ export const CreateUserDrawerWithUsername = ({
                 data-fs-bp-create-user-drawer-back-icon
               />
             </button>
-            Confirm shared email
+            {t("users.create.drawerTitleConfirmSharedEmail")}
           </>
         );
       case "ACCESS_TOKEN_DISPLAY":
         return "";
       default:
-        return "Add User";
+        return t("users.create.drawerTitle");
     }
   };
 
@@ -313,10 +322,10 @@ export const CreateUserDrawerWithUsername = ({
             {hasRolesError ? (
               <div data-fs-bp-create-user-error-state>
                 <Icon name="Warning" height={48} width={48} />
-                <h3>Something went wrong</h3>
-                <p>The add user form could not be loaded.</p>
+                <h3>{t("shared.errors.somethingWentWrong")}</h3>
+                <p>{t("users.create.errors.formCouldNotBeLoaded")}</p>
                 <Button variant="secondary" onClick={() => router.reload()}>
-                  Try again
+                  {t("shared.buttons.tryAgain")}
                 </Button>
               </div>
             ) : (
@@ -334,7 +343,7 @@ export const CreateUserDrawerWithUsername = ({
           </BasicDrawer.Body>
           <BasicDrawer.Footer>
             <BasicDrawer.Button variant="ghost" onClick={close}>
-              Cancel
+              {t("shared.buttons.cancel")}
             </BasicDrawer.Button>
             <BasicDrawer.Button
               variant="confirm"
@@ -344,7 +353,7 @@ export const CreateUserDrawerWithUsername = ({
               onClick={handleConfirmClick}
               isLoading={isAddUserToOrgUnitLoading || isResetPasswordLoading}
             >
-              Add
+              {t("users.create.buttons.add")}
             </BasicDrawer.Button>
           </BasicDrawer.Footer>
         </>
@@ -355,28 +364,28 @@ export const CreateUserDrawerWithUsername = ({
           <BasicDrawer.Body data-fs-bp-create-user-shared-email-body>
             <div data-fs-bp-create-user-shared-email-warning>
               <Icon name="Warning" height={48} width={48} />
-              <h3>This email is already registered</h3>
+              <h3>{t("users.create.messages.emailAlreadyRegistered")}</h3>
             </div>
-            <p>
-              The email <strong>{sharedEmailData.email}</strong> is already
-              registered for another user (
-              <strong>{sharedEmailData.existingUserName}</strong>).
-            </p>
-            <p>
-              Are you sure you want to continue? If you proceed, a temporary
-              access code will be generated for the new user.
+            <p data-fs-bp-create-user-shared-email-registered-text>
+              {t("users.create.messages.emailRegisteredForAnotherUser", [
+                <strong key="email">{sharedEmailData.email}</strong>,
+                <strong key="username">
+                  {sharedEmailData.existingUserName}
+                </strong>,
+              ])}
             </p>
+            <p>{t("users.create.messages.confirmSharedEmailContinue")}</p>
           </BasicDrawer.Body>
           <BasicDrawer.Footer>
             <BasicDrawer.Button variant="ghost" onClick={backToCreateUser}>
-              Cancel
+              {t("shared.buttons.cancel")}
             </BasicDrawer.Button>
             <BasicDrawer.Button
               variant="confirm"
               onClick={handleConfirmSharedEmail}
               isLoading={isAddUserToOrgUnitLoading}
             >
-              Continue
+              {t("shared.buttons.continue")}
             </BasicDrawer.Button>
           </BasicDrawer.Footer>
         </>
@@ -387,17 +396,10 @@ export const CreateUserDrawerWithUsername = ({
           <BasicDrawer.Body data-fs-bp-create-user-access-token-body>
             <AccessTokenDisplay
               accessToken={accessToken}
-              title="Password reset successfully"
+              title={t("users.reset.messages.passwordResetSuccessfully")}
               description={
                 <p>
-                  A temporary access code has been generated. <br />
-                  Share it with the user, as they have no individual email
-                  registered.
-                  <br />
-                  <br />
-                  The code expires in 12 hours. Copy it before closing this
-                  window. Once closed, access will be lost and a password reset
-                  will be required.
+                  {t("users.reset.messages.accessCodeGeneratedDescription")}
                 </p>
               }
               hasBeenCopied={hasTokenBeenCopied}
@@ -410,7 +412,7 @@ export const CreateUserDrawerWithUsername = ({
               onClick={handleCloseAccessTokenModal}
               disabled={!hasTokenBeenCopied}
             >
-              Done
+              {t("shared.buttons.done")}
             </BasicDrawer.Button>
           </BasicDrawer.Footer>
         </>

package/src/features/users/components/DeleteUserDrawer/DeleteUserDrawer.tsx

@@ -9,9 +9,9 @@ import {
   type BasicDrawerProps,
 } from "../../../shared/components";
 import { useAnalytics } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
 import { useRemoveUserFromOrgUnit } from "../../hooks";
 
 export type DeleteUserDrawerProps = Omit<BasicDrawerProps, "children"> & {
@@ -30,6 +30,7 @@ export const DeleteUserDrawer = ({
 
   const { pushToast } = useUI();
   const { orgUnit } = useOrgUnitByUser(user.id);
+  const { t } = useLocalization();
   const { trackEvent } = useAnalytics({
     entityType: "user",
     entityId: user.id,
@@ -46,7 +47,9 @@ export const DeleteUserDrawer = ({
     });
 
     pushToast({
-      message: `User successfully deleted\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("users.delete.toasts.userSuccessfullyDeleted")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     onDelete?.();
@@ -76,7 +79,7 @@ export const DeleteUserDrawer = ({
         });
 
         pushToast({
-          message: "An error occurred while deleting the user",
+          message: t("users.delete.errors.failedToDeleteUser"),
           status: "ERROR",
         });
       },
@@ -86,32 +89,33 @@ export const DeleteUserDrawer = ({
 
   return (
     <BasicDrawer {...otherProps} data-fs-bp-delete-user-drawer close={close}>
-      <BasicDrawer.Heading title="Delete user" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("users.delete.drawerTitle")}
+        onClose={close}
+      />
       <BasicDrawer.Body data-fs-bp-delete-user-drawer-body>
         <p>
-          Permanently delete{" "}
-          <a
-            href={buyerPortalRoutes.userDetails({
-              orgUnitId: orgUnit?.id || "",
-              userId: user.id,
-            })}
-            data-fs-bp-delete-user-drawer-user-name
-          >
-            {user.name}
-          </a>
-          ?
+          {t("users.delete.messages.confirmDeleteUser", [
+            <a
+              key="user-name"
+              href={buyerPortalRoutes.userDetails({
+                orgUnitId: orgUnit?.id || "",
+                userId: user.id,
+              })}
+              data-fs-bp-delete-user-drawer-user-name
+            >
+              {user.name}
+            </a>,
+          ])}
         </p>
         <br />
-        <p>
-          Deleting this user will permanently remove all its data, but usage
-          history will be kept for audit. This action cannot be undone.
-        </p>
+        <p>{t("users.delete.messages.deleteWarning")}</p>
         <br />
-        <p>Confirm by typing the user name below:</p>
+        <p>{t("users.delete.messages.confirmByTypingUserName")}</p>
         <br />
 
         <InputText
-          label="User name"
+          label={t("users.delete.forms.userName")}
           value={userNameConfirmation}
           onChange={(event) =>
             setUserNameConfirmation(event.currentTarget.value)
@@ -121,7 +125,7 @@ export const DeleteUserDrawer = ({
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="danger"
@@ -129,7 +133,7 @@ export const DeleteUserDrawer = ({
           onClick={handleDeleteClick}
           disabled={!isDeleteButtonEnabled}
         >
-          Delete
+          {t("shared.buttons.delete")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

package/src/features/users/components/EmailTransactionalSection/EmailTransactionalSection.tsx

@@ -1,6 +1,7 @@
 import { CheckboxField } from "@faststore/ui";
 
 import { ErrorMessage, InputText } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { isValidEmail } from "../../../shared/utils";
 
 export interface EmailTransactionalSectionProps {
@@ -11,10 +12,6 @@ export interface EmailTransactionalSectionProps {
   isTouched: boolean;
 }
 
-const USE_EMAIL_LABEL = "Use this e-mail for transactional notifications";
-const TRANSACTIONAL_EMAIL_REQUIRED_MSG = "Transactional e-mail is required";
-const TRANSACTIONAL_EMAIL_INVALID_MSG = "Transactional e-mail is invalid";
-
 export const EmailTransactionalSection = ({
   useLoginAsTransactional,
   onCheckboxChange,
@@ -22,6 +19,7 @@ export const EmailTransactionalSection = ({
   onTransactionalEmailChange,
   isTouched,
 }: EmailTransactionalSectionProps) => {
+  const { t } = useLocalization();
   const trimmed = transactionalEmail.trim();
   const isMissing = !trimmed;
   const isInvalid = Boolean(trimmed) && !isValidEmail(trimmed);
@@ -32,7 +30,7 @@ export const EmailTransactionalSection = ({
     <div data-fs-bp-email-transactional-section>
       <CheckboxField
         id="use-login-as-transactional"
-        label={USE_EMAIL_LABEL}
+        label={t("users.forms.useEmailForNotifications")}
         checked={useLoginAsTransactional}
         onChange={(event) => onCheckboxChange(event.target.checked)}
       />
@@ -40,7 +38,7 @@ export const EmailTransactionalSection = ({
       {!useLoginAsTransactional && (
         <>
           <InputText
-            label="Transactional E-mail"
+            label={t("users.labels.transactionalEmail")}
             value={transactionalEmail}
             type="email"
             hasError={showError}
@@ -56,8 +54,8 @@ export const EmailTransactionalSection = ({
                 show
                 message={
                   isMissing
-                    ? TRANSACTIONAL_EMAIL_REQUIRED_MSG
-                    : TRANSACTIONAL_EMAIL_INVALID_MSG
+                    ? t("users.validation.emailTransactionalRequired")
+                    : t("users.validation.emailTransactionalInvalid")
                 }
               />
             </div>