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

package/src/features/buying-policies/layouts/BuyingPoliciesLayout/BuyingPoliciesLayout.tsx

@@ -17,6 +17,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 { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { BuyingPolicyDropdownMenu } from "../../components";
 import { AddBuyingPolicyDrawer } from "../../components/AddBuyingPolicyDrawer/AddBuyingPolicyDrawer";
@@ -37,6 +38,7 @@ export const BuyingPoliciesLayout = ({
   page,
 }: BuyingPoliciesLayoutProps) => {
   const { currentContract, currentOrgUnit, featureFlags } = useBuyerPortal();
+  const { t } = useLocalization();
 
   const router = useRouter();
 
@@ -85,6 +87,7 @@ export const BuyingPoliciesLayout = ({
 
   const columns = getTableColumns({
     actionsLength: 1,
+    nameColumnLabel: t("shared.labels.name"),
   });
 
   const renderLoading = () => (
@@ -98,7 +101,7 @@ export const BuyingPoliciesLayout = ({
 
   const renderEmptyState = () => (
     <EmptyState
-      title="No buying policies yet"
+      title={t("buyingPolicies.empty.noBuyingPoliciesYet")}
       iconName="Rebase"
       iconSize={40}
     />
@@ -145,7 +148,7 @@ export const BuyingPoliciesLayout = ({
 
   const buyingPoliciesSection = (
     <section data-fs-buying-policies-section>
-      <HeaderInside title="Buying Policies">
+      <HeaderInside title={t("buyingPolicies.titles.buyingPolicies")}>
         <HeaderInside.Button onClick={openAddBuyingPolicyDrawer} />
       </HeaderInside>
 
@@ -162,7 +165,9 @@ export const BuyingPoliciesLayout = ({
       <div data-fs-bp-buying-policies-paginator>
         {totalBuyingPolicies > buyingPolicies.length ? (
           <Paginator.NextPageButton onClick={increasePage} disabled={isLoading}>
-            {isLoading ? "Loading" : "Load More"}
+            {isLoading
+              ? t("shared.labels.loading")
+              : t("shared.buttons.loadMore")}
           </Paginator.NextPageButton>
         ) : (
           <span />
@@ -192,7 +197,9 @@ export const BuyingPoliciesLayout = ({
           )}
         </SumaPageLayout>
       ) : (
-        <FinanceTabsLayout pageName="Finance and Compliance">
+        <FinanceTabsLayout
+          pageName={t("buyingPolicies.titles.financeAndCompliance")}
+        >
           {buyingPoliciesSection}
           {isAddBuyingPolicyDrawerOpen && (
             <AddBuyingPolicyDrawer

package/src/features/buying-policies/layouts/BuyingPolicyDetailsLayout/BuyingPolicyDetailsLayout.tsx

@@ -9,6 +9,7 @@ import {
 import { BasicDropdownMenu, HeaderInside } from "../../../shared/components";
 import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import { FinanceTabsLayout, GlobalLayout } from "../../../shared/layouts";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import {
   BuyingPolicyDropdownMenu,
@@ -18,6 +19,7 @@ import {
   extractFieldValueFromCriteria,
   mountFieldValueCriteriaString,
 } from "../../utils";
+import { BUYING_POLICIES_WORKFLOW_LABELS } from "../../utils/buyingPoliciesWorkflowTypes";
 import { getHighlightedText } from "../../utils/criteriaHighlightSyntax";
 
 import type { BuyingPolicy } from "../../types";
@@ -29,6 +31,7 @@ export type BuyingPolicyDetailsLayoutProps = {
 export const BuyingPolicyDetailsLayout = ({
   data: { buyingPolicy },
 }: BuyingPolicyDetailsLayoutProps) => {
+  const { t } = useLocalization();
   const { currentContract, currentOrgUnit } = useBuyerPortal();
 
   const accountFieldCriteria = extractFieldValueFromCriteria(
@@ -90,7 +93,9 @@ export const BuyingPolicyDetailsLayout = ({
 
   return (
     <GlobalLayout>
-      <FinanceTabsLayout pageName="Finance and Compliance">
+      <FinanceTabsLayout
+        pageName={t("buyingPolicies.titles.financeAndCompliance")}
+      >
         <section data-fs-buying-policy-details-section>
           <HeaderInside
             title={buyingPolicy?.name ?? ""}
@@ -109,44 +114,56 @@ export const BuyingPolicyDetailsLayout = ({
           </HeaderInside>
 
           <div data-fs-buying-policy-details-line-initial>
-            <span data-fs-buying-policy-details-title>Settings</span>
+            <span data-fs-buying-policy-details-title>
+              {t("buyingPolicies.details.settings")}
+            </span>
             <button
               type="button"
               data-fs-buying-policy-details-edit-button
               onClick={openUpdateBuyingPolicyDrawerProps}
             >
-              Edit
+              {t("shared.buttons.edit")}
             </button>
           </div>
           <div data-fs-buying-policy-details-line>
-            <span data-fs-buying-policy-details-field-label>Name</span>
+            <span data-fs-buying-policy-details-field-label>
+              {t("buyingPolicies.labels.name")}
+            </span>
             <span data-fs-buying-policy-details-field-content>
               {buyingPolicy?.name}
             </span>
           </div>
           <div data-fs-buying-policy-details-line>
-            <span data-fs-buying-policy-details-field-label>Description</span>
+            <span data-fs-buying-policy-details-field-label>
+              {t("buyingPolicies.labels.description")}
+            </span>
             <span data-fs-buying-policy-details-field-content>
               {buyingPolicy?.description}
             </span>
           </div>
           <div data-fs-buying-policy-details-line>
-            <span data-fs-buying-policy-details-field-label>Criteria</span>
+            <span data-fs-buying-policy-details-field-label>
+              {t("buyingPolicies.labels.criteria")}
+            </span>
             <span data-fs-buying-policy-details-field-content>
               {renderCriteria()}
             </span>
           </div>
           <div data-fs-buying-policy-details-line>
-            <span data-fs-buying-policy-details-field-label>Action</span>
+            <span data-fs-buying-policy-details-field-label>
+              {t("buyingPolicies.labels.action")}
+            </span>
             <span data-fs-buying-policy-details-field-content>
-              {buyingPolicy?.action.label}
+              {buyingPolicy?.action.type
+                ? t(BUYING_POLICIES_WORKFLOW_LABELS[buyingPolicy.action.type])
+                : buyingPolicy?.action.label}
               {buyingPolicy?.action.levels?.map((level, index) => (
                 <>
                   <span
                     key={level.id}
                     data-fs-buying-policy-details-level-title
                   >
-                    Level {index + 1}
+                    {t("buyingPolicies.details.level", [index + 1])}
                   </span>
                   <span
                     key={level.id}

package/src/features/buying-policies/utils/accountingFieldCriteriaHelpers.ts

@@ -61,14 +61,14 @@ export const mountFieldValueCriteriaString = ({
 
 export const loadingOption = [
   {
-    label: "Loading...",
+    label: "shared.labels.loading",
     value: "",
   },
 ];
 
 export const emptyOption = [
   {
-    label: "No option found",
+    label: "buyingPolicies.messages.noOptionFound",
     value: "",
   },
 ];

package/src/features/buying-policies/utils/buyingPoliciesWorkflowTypes.ts

@@ -8,9 +8,9 @@ export const BUYING_POLICIES_WORKFLOW_LABELS: Record<
   BuyingPoliciesWorkflowType,
   string
 > = {
-  SEQUENTIAL_WORKFLOW: "Sequential workflow",
-  DENY_ORDER: "Deny order",
-  BYPASS_ALL: "Bypass all buying policies",
+  SEQUENTIAL_WORKFLOW: "buyingPolicies.workflow.sequentialWorkflow",
+  DENY_ORDER: "buyingPolicies.workflow.denyOrder",
+  BYPASS_ALL: "buyingPolicies.workflow.bypassAllBuyingPolicies",
 };
 
 export type BuyingPoliciesWorkflowType =

package/src/features/buying-policies/utils/orderFieldsCriteriaOptions.ts

@@ -6,38 +6,38 @@ export const ACCOUNTING_VALUE_CRITERIA =
 
 export const orderFieldsCriteriaOptions = [
   {
-    label: "If the order contains a budget",
+    label: "buyingPolicies.criteria.orderContainsBudget",
     criteria: "$exists(budgetData.budgets.*[])",
   },
   {
-    label: "If the order contains the budgets X, Y, Z",
+    label: "buyingPolicies.criteria.orderContainsBudgetsXyz",
     criteria: BUDGET_CRITERIA,
   },
   {
-    label: "If the order contains an exceeded budget",
+    label: "buyingPolicies.criteria.orderContainsExceededBudget",
     criteria:
       "$exists(budgetData.budgets.**.allocations[balance.remaining < 0])",
   },
   {
-    label: "If the order contains an expired budget Pending confirmation",
+    label: "buyingPolicies.criteria.orderContainsExpiredBudget",
     criteria:
       "$exists(budgetData.budgets.**.cycleConfiguration[$toMillis(endDate) < $millis()])",
   },
   {
-    label: "If the ordar contains an Accounting field",
+    label: "buyingPolicies.criteria.orderContainsAccountingField",
     criteria: ACCOUNTING_FIELD_CRITERIA,
   },
   {
-    label: "If the order contains the Accounting fields X, Y, Z",
+    label: "buyingPolicies.criteria.orderContainsAccountingFieldsXyz",
     criteria: ACCOUNTING_VALUE_CRITERIA,
   },
   {
-    label: "If all order items are negotiated items",
+    label: "buyingPolicies.criteria.allOrderItemsNegotiated",
     criteria:
       'customData.customApps[id.$contains("vtex.customorderfields")].fields[name="allContractItems"].value = "1"',
   },
   {
-    label: "If there are restricted items in the order",
+    label: "buyingPolicies.criteria.restrictedItemsInOrder",
     criteria:
       'customData.customApps[id.$contains("vtex.customorderfields")].fields[name="hasRestrictItems"].value = "1"',
   },

package/src/features/buying-policies/utils/spendingLimitsCriteriaOptions.ts

@@ -1,26 +1,26 @@
 export const spendingLimitsCriteriaOptions = [
   {
-    label: "If the order value is greater than X",
+    label: "buyingPolicies.criteria.orderValueGreaterThanX",
     criteria: "value > 10000",
   },
   {
-    label: "If the order value is greater than X and less than Y",
+    label: "buyingPolicies.criteria.orderValueGreaterThanXAndLessThanY",
     criteria: "value > 500 and value < 2000",
   },
   {
-    label: "If the unit price is greater than X",
+    label: "buyingPolicies.criteria.unitPriceGreaterThanX",
     criteria: "items.price > 200",
   },
   {
-    label: "If the unit price is greater than X and less than Y",
+    label: "buyingPolicies.criteria.unitPriceGreaterThanXAndLessThanY",
     criteria: "items.price > 200 and items.price < 350",
   },
   {
-    label: "If any extended line* item is greater than X",
+    label: "buyingPolicies.criteria.extendedLineItemGreaterThanX",
     criteria: "items.priceDefinition.total > 300",
   },
   {
-    label: "If any extended line* item is greater than X and less than Y",
+    label: "buyingPolicies.criteria.extendedLineItemGreaterThanXAndLessThanY",
     criteria:
       "items.priceDefinition.total > 300 and items.priceDefinition.total < 600",
   },

package/src/features/contracts/components/ContractsCard/ContractsCard.tsx

@@ -10,6 +10,7 @@ import {
 } from "@faststore/ui";
 
 import { BasicCard, Icon } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { useUpdateContractStatus } from "../../hooks";
 
 import type { ContractData } from "../../types";
@@ -26,6 +27,7 @@ export default function ContractsCard({
   contracts,
   orgUnitData,
 }: ContractsCardProps) {
+  const { t } = useLocalization();
   const route = useRouter();
 
   const { updateContractStatus } = useUpdateContractStatus();
@@ -33,8 +35,8 @@ export default function ContractsCard({
   return (
     <BasicCard
       footerLink={`/contracts${orgUnitData?.id ? `/${orgUnitData.id}` : ""}`}
-      footerMessage="View contracts"
-      title="Contracts"
+      footerMessage={t("contracts.actions.viewContracts")}
+      title={t("contracts.titles.contracts")}
       subTitle={contracts.length ?? 0}
       icon={<Icon name="Info" width={20} height={20} />}
       onPlusIconClick={() => {}}
@@ -78,7 +80,7 @@ export default function ContractsCard({
                         }}
                       >
                         <UIIcon name="ArrowSquareOut" data-fs-dropdown-icon />
-                        Open
+                        {t("contracts.dropdown.open")}
                       </DropdownItem>
                       <DropdownItem>
                         <Icon
@@ -87,7 +89,7 @@ export default function ContractsCard({
                           height={24}
                           data-fs-dropdown-icon
                         />
-                        Edit
+                        {t("contracts.dropdown.edit")}
                       </DropdownItem>
                       <DropdownItem data-fs-bp-dropdown-menu-item-mode="danger">
                         <Icon
@@ -96,7 +98,7 @@ export default function ContractsCard({
                           height={24}
                           data-fs-dropdown-icon
                         />{" "}
-                        Delete
+                        {t("shared.buttons.delete")}
                       </DropdownItem>
                     </DropdownMenu>
                   </Dropdown>

package/src/features/contracts/layouts/ContractsLayout/ContractsLayout.tsx

@@ -13,7 +13,8 @@ import {
 import { useQueryParams } from "../../../shared/hooks";
 import { useBuyerPortal } from "../../../shared/hooks";
 import { GlobalLayout } from "../../../shared/layouts";
-import { statusFilters } from "../../../shared/utils";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
+import { statusFilters, statusFilterI18nKeys } from "../../../shared/utils";
 import { useUpdateContractStatus } from "../../hooks";
 
 import type { ContractData } from "../../types/ContractData";
@@ -23,6 +24,7 @@ export type ContractsLayoutProps = {
 };
 
 export const ContractsLayout = ({ data }: ContractsLayoutProps) => {
+  const { t } = useLocalization();
   const route = useRouter();
   const { currentOrgUnit } = useBuyerPortal();
 
@@ -34,7 +36,7 @@ export const ContractsLayout = ({ data }: ContractsLayoutProps) => {
     <GlobalLayout>
       <section data-fs-contracts-section>
         <InternalTopBar
-          title="Contracts"
+          title={t("contracts.titles.contracts")}
           titleDropDownItems={<MainLinksDropdownMenu />}
         />
 
@@ -52,8 +54,11 @@ export const ContractsLayout = ({ data }: ContractsLayoutProps) => {
               />
 
               <DropdownFilter
-                label="Status"
-                filterOptions={Object.keys(statusFilters)}
+                label={t("contracts.labels.status")}
+                filterOptions={Object.keys(statusFilters).map((value) => ({
+                  value,
+                  label: t(statusFilterI18nKeys[value]),
+                }))}
                 updateFilter={(inputFilter) => {
                   setQueryString("status", inputFilter);
                 }}

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

@@ -12,7 +12,7 @@ import {
   InputText,
 } from "../../../shared/components";
 import { useBuyerPortal, useDebounce } from "../../../shared/hooks";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { findCardNetwork } from "../../../shared/utils/creditCard";
 import {
   useTokenizeCreditCard,
@@ -48,6 +48,7 @@ export const CreateCreditCardDrawer = ({
 }: CreateCreditCardDrawerProps) => {
   const { pushToast } = useUI();
   const { clientContext, currentOrgUnit } = useBuyerPortal();
+  const { t } = useLocalization();
   const [isTouched, setIsTouched] = useState(false);
   const [useExistingAddress, setUseExistingAddress] = useState(false);
   const [completedAddress, setCompletedAddress] = useState<AddressData>(
@@ -104,7 +105,9 @@ export const CreateCreditCardDrawer = ({
   const handleSaveCrediCardSuccess = () => {
     setIsLoading(false);
     pushToast({
-      message: `Credit card added successfully\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("creditCards.toasts.creditCardAdded")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     router.reload();
@@ -116,7 +119,7 @@ export const CreateCreditCardDrawer = ({
     onError: () => {
       setIsLoading(false);
       pushToast({
-        message: "An error occurred while creating the credit card",
+        message: t("creditCards.errors.createCreditCard"),
         status: "ERROR",
       });
     },
@@ -127,7 +130,7 @@ export const CreateCreditCardDrawer = ({
     onError: () => {
       setIsLoading(false);
       pushToast({
-        message: "An error occurred while creating the credit card",
+        message: t("creditCards.errors.createCreditCard"),
         status: "ERROR",
       });
     },
@@ -144,7 +147,7 @@ export const CreateCreditCardDrawer = ({
 
     if (!paymentSession?.id || !creditCardValidators) {
       pushToast({
-        message: "Failed to save credit card",
+        message: t("creditCards.errors.saveCreditCardFailed"),
         status: "ERROR",
       });
 
@@ -232,13 +235,16 @@ export const CreateCreditCardDrawer = ({
 
   return (
     <BasicDrawer data-fs-bp-create-credit-card-drawer close={close} {...props}>
-      <BasicDrawer.Heading title="Add credit card" onClose={close} />
+      <BasicDrawer.Heading
+        title={t("creditCards.create.title")}
+        onClose={close}
+      />
       <BasicDrawer.Body>
         <div data-fs-bp-create-credit-card-drawer-section-label>
-          <span>Card nickname</span>
+          <span>{t("creditCards.forms.cardNickname")}</span>
         </div>
         <InputText
-          label="Card nickname"
+          label={t("creditCards.forms.cardNickname")}
           value={newCard.cardLabel}
           wrapperProps={{ style: { marginTop: 16 } }}
           onChange={(event) =>
@@ -249,7 +255,7 @@ export const CreateCreditCardDrawer = ({
         <CreditCardForm creditCard={newCard} setNewCard={setNewCard} />
 
         <div data-fs-bp-create-credit-card-drawer-section-label>
-          <span>Billing Address</span>
+          <span>{t("creditCards.forms.billingAddress")}</span>
         </div>
         <AddressForm
           address={address}
@@ -266,7 +272,7 @@ export const CreateCreditCardDrawer = ({
 
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -274,7 +280,7 @@ export const CreateCreditCardDrawer = ({
           onClick={handleConfirmClick}
           isLoading={isLoading}
         >
-          Save
+          {t("shared.buttons.save")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </BasicDrawer>

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

@@ -5,8 +5,7 @@ import { DropdownItem, useUI } from "@faststore/ui";
 import { DeleteCreditCardDrawer } from "..";
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
 import { useDrawerProps } from "../../../shared/hooks";
-import { CHANGES_TIMEOUT_MESSAGE } from "../../../shared/utils/constants";
-import { CREDIT_CARD_MESSAGES } from "../../constants/messages";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { useSetDefaultCreditCard } from "../../hooks/useSetDefaultsCreditCard";
 import { useUnsetDefaultCreditCard } from "../../hooks/useUnsetDefaultsCreditCard";
 
@@ -31,6 +30,7 @@ export const CreditCardDropdownMenu = ({
 
   const router = useRouter();
   const { pushToast } = useUI();
+  const { t } = useLocalization();
 
   const orgUnitId = router.query.orgUnitId as string;
   const customerId = router.query.contractId as string;
@@ -43,7 +43,9 @@ export const CreditCardDropdownMenu = ({
 
   const handleCreateNewCreditCardSuccess = () => {
     pushToast({
-      message: `${CREDIT_CARD_MESSAGES.defaultSaved}\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("creditCards.toasts.defaultSaved")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     onUpdate?.();
@@ -51,7 +53,9 @@ export const CreditCardDropdownMenu = ({
 
   const handleRemoveDefaultCreditCardSuccess = () => {
     pushToast({
-      message: `${CREDIT_CARD_MESSAGES.defaultUnset}\n${CHANGES_TIMEOUT_MESSAGE}`,
+      message: `${t("creditCards.toasts.defaultUnset")}\n${t(
+        "shared.messages.changesTimeout"
+      )}`,
       status: "INFO",
     });
     onUpdate?.();
@@ -61,7 +65,7 @@ export const CreditCardDropdownMenu = ({
     onSuccess: handleRemoveDefaultCreditCardSuccess,
     onError: () => {
       pushToast({
-        message: CREDIT_CARD_MESSAGES.defaultUnsetError,
+        message: t("creditCards.toasts.defaultUnsetError"),
         status: "ERROR",
       });
     },
@@ -71,7 +75,7 @@ export const CreditCardDropdownMenu = ({
     onSuccess: handleCreateNewCreditCardSuccess,
     onError: () => {
       pushToast({
-        message: CREDIT_CARD_MESSAGES.defaultError,
+        message: t("creditCards.toasts.defaultError"),
         status: "ERROR",
       });
     },
@@ -79,7 +83,7 @@ export const CreditCardDropdownMenu = ({
 
   const handleSetAsDefault = () => {
     pushToast({
-      message: "Setting the default credit card...",
+      message: t("creditCards.toasts.settingDefault"),
       status: "INFO",
       icon: <Icon name="LoadingIndicator" data-fs-icon-loading="true" />,
     });
@@ -94,7 +98,7 @@ export const CreditCardDropdownMenu = ({
 
   const handleUnsetAsDefault = () => {
     pushToast({
-      message: "Unsetting the default credit card...",
+      message: t("creditCards.toasts.unsettingDefault"),
       status: "INFO",
       icon: <Icon name="LoadingIndicator" data-fs-icon-loading="true" />,
     });
@@ -119,12 +123,12 @@ export const CreditCardDropdownMenu = ({
           (currentCreditCard.isDefault ? (
             <DropdownItem onClick={handleUnsetAsDefault}>
               <Icon name="BookmarkRemove" {...sizeProps} />
-              Unset as default
+              {t("creditCards.actions.unsetAsDefault")}
             </DropdownItem>
           ) : (
             <DropdownItem onClick={handleSetAsDefault}>
               <Icon name="BookmarkAdd" {...sizeProps} />
-              Set as default
+              {t("creditCards.actions.setAsDefault")}
             </DropdownItem>
           ))}
 
@@ -143,7 +147,9 @@ export const CreditCardDropdownMenu = ({
               data-fs-bp-dropdown-menu-item-mode="danger"
             >
               <Icon name="Delete" {...sizeProps} data-fs-bp-delete-dropdown />
-              <span data-fs-bp-delete-dropdown>Delete</span>
+              <span data-fs-bp-delete-dropdown>
+                {t("shared.buttons.delete")}
+              </span>
             </DropdownItem>
           </>
           //)

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

@@ -1,4 +1,5 @@
 import { InputText } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import {
   maskCardNumber,
   maskExpirationDate,
@@ -16,6 +17,8 @@ export const CreditCardForm = ({
   creditCard,
   setNewCard,
 }: CreditCardFormProps) => {
+  const { t } = useLocalization();
+
   const handleChangeNumber = (cardNumber: string) => {
     setNewCard({
       ...creditCard,
@@ -40,11 +43,11 @@ export const CreditCardForm = ({
   return (
     <>
       <div data-fs-bp-create-credit-card-drawer-section-label>
-        <span>Card Details</span>
+        <span>{t("creditCards.forms.cardDetails")}</span>
       </div>
 
       <InputText
-        label="Card number"
+        label={t("creditCards.labels.cardNumber")}
         value={creditCard.number}
         wrapperProps={{ style: { marginTop: 16 } }}
         onChange={(event) => handleChangeNumber(event.target.value)}
@@ -52,14 +55,14 @@ export const CreditCardForm = ({
 
       <div data-fs-bp-create-credit-card-security-line>
         <InputText
-          label="Exp MM/YY"
+          label={t("creditCards.labels.expirationDate")}
           value={creditCard.expirationDate}
           wrapperProps={{ style: { marginTop: 16 } }}
           onChange={(event) => handleChangeExpirationDate(event.target.value)}
         />
 
         <InputText
-          label="CVV"
+          label={t("creditCards.labels.cvv")}
           value={creditCard.cvv}
           wrapperProps={{ style: { marginTop: 16 } }}
           onChange={(event) => handleChangeVerificationCode(event.target.value)}
@@ -68,7 +71,7 @@ export const CreditCardForm = ({
       </div>
 
       <InputText
-        label="Cardholder name"
+        label={t("creditCards.labels.cardholderName")}
         value={creditCard.cardholder}
         wrapperProps={{ style: { marginTop: 16 } }}
         onChange={(event) =>