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

package/src/features/shared/components/OrgUnitInputSearch/OrgUnitInputSearch.tsx

@@ -2,6 +2,7 @@ import { useState, type ComponentProps } from "react";
 
 import { AutocompleteDropdown } from "..";
 import { useDebouncedSearchOrgUnit } from "../../../users/hooks";
+import { useLocalization } from "../../localization/LocalizationContext";
 import { OptionSelected } from "../OptionSelected/OptionSelected";
 
 type Option = {
@@ -28,12 +29,16 @@ export const OrgUnitInputSearch = ({
   orgUnit,
   ...otherProps
 }: OrgUnitInputSearchProps) => {
+  const { t } = useLocalization();
   const [autocompleteInputValue, setAutocompleteInputValue] = useState("");
 
   const { searchedOrgUnits, isSearchedOrgUnitsLoading } =
     useDebouncedSearchOrgUnit(autocompleteInputValue);
 
-  const loadingObject: Option = { id: "loading", name: "loading..." };
+  const loadingObject: Option = {
+    id: "loading",
+    name: t("shared.labels.loading"),
+  };
 
   const handleSelect = (option: Option) => {
     if (option.id === loadingObject.id) return;
@@ -56,7 +61,7 @@ export const OrgUnitInputSearch = ({
   ) : (
     <AutocompleteDropdown
       {...otherProps}
-      label="Search organizational units"
+      label={t("shared.labels.searchOrganizationalUnits")}
       value={autocompleteInputValue}
       options={isSearchedOrgUnitsLoading ? [loadingObject] : searchedOrgUnits}
       onConfirmKeyPress={handleSelect}

package/src/features/shared/components/Pagination/Pagination.tsx

@@ -1,5 +1,7 @@
 import { Button, Skeleton } from "@faststore/ui";
 
+import { useLocalization } from "../../localization/LocalizationContext";
+
 interface PaginationProps {
   currentCount: number;
   variant?: "default" | "onlyText" | "counter";
@@ -15,11 +17,13 @@ export const Pagination = ({
   variant = "default",
   showMore,
 }: PaginationProps) => {
+  const { t } = useLocalization();
+
   return (
     <div data-fs-bp-pagination>
       {variant === "default" && (
         <Button variant="tertiary" onClick={showMore} loading={loading}>
-          Load more
+          {t("shared.buttons.loadMore")}
         </Button>
       )}
 
@@ -27,7 +31,7 @@ export const Pagination = ({
         {loading ? (
           <Skeleton size={{ width: "3.75rem", height: "1.25rem" }} />
         ) : (
-          `${currentCount} of ${total}`
+          t("shared.pagination.counter", [currentCount, total])
         )}
       </span>
     </div>

package/src/features/shared/components/Paginator/Counter.tsx

@@ -1,10 +1,16 @@
+import { useLocalization } from "../../localization/LocalizationContext";
+
 export type CounterProps = {
   total: number;
   itemsLength: number;
 };
 
-export const Counter = ({ total, itemsLength }: CounterProps) => (
-  <span data-fs-bp-paginator-counter>
-    {itemsLength} of {total}
-  </span>
-);
+export const Counter = ({ total, itemsLength }: CounterProps) => {
+  const { t } = useLocalization();
+
+  return (
+    <span data-fs-bp-paginator-counter>
+      {t("shared.pagination.counter", [itemsLength, total])}
+    </span>
+  );
+};

package/src/features/shared/components/Paginator/Interval.tsx

@@ -1,5 +1,7 @@
 import { Skeleton } from "@faststore/ui";
 
+import { useLocalization } from "../../localization/LocalizationContext";
+
 const DEFAULT_PAGE_SIZE = 25;
 
 export type IntervalProps = {
@@ -17,6 +19,7 @@ export const Interval = ({
   pageSize = DEFAULT_PAGE_SIZE,
   isLoading = false,
 }: IntervalProps) => {
+  const { t } = useLocalization();
   const fromIndex = page - 1;
   const from = itemsLength > 0 ? Math.min(total, fromIndex * pageSize + 1) : 0;
   const to =
@@ -27,9 +30,7 @@ export const Interval = ({
       {isLoading ? (
         <Skeleton size={{ height: ".75rem", width: "5.5rem" }} />
       ) : (
-        <>
-          {from} to {to} of {total}
-        </>
+        t("shared.pagination.interval", [from, to, total])
       )}
     </span>
   );

package/src/features/shared/components/Paginator/NextPageButton.tsx

@@ -1,16 +1,20 @@
 import type { ComponentProps } from "react";
 
+import { useLocalization } from "../../localization/LocalizationContext";
+
 export type NextPageButtonProps = ComponentProps<"button">;
 
 export const NextPageButton = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   type = "button",
-  children = "Next Page",
+  children,
   ...otherProps
 }: NextPageButtonProps) => {
+  const { t } = useLocalization();
+
   return (
     <button data-fs-paginator-next-page-button type="button" {...otherProps}>
-      {children}
+      {children ?? t("shared.pagination.nextPage")}
     </button>
   );
 };

package/src/features/shared/components/SettingsDrawer/SettingsDrawer.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { useBuyerPortal } from "../../hooks";
+import { useLocalization } from "../../localization/LocalizationContext";
 import { BasicDrawer, type BasicDrawerProps } from "../BasicDrawer/BasicDrawer";
 
 import {
@@ -38,8 +39,8 @@ export const SettingsDrawer = ({
   title,
   subtitle,
   children,
-  primaryButtonLabel = "Save",
-  secondaryButtonLabel = "Cancel",
+  primaryButtonLabel,
+  secondaryButtonLabel,
   onPrimaryAction,
   onSecondaryAction,
   isPrimaryButtonLoading = false,
@@ -52,6 +53,7 @@ export const SettingsDrawer = ({
   onDismiss,
   ...otherProps
 }: SettingsDrawerProps) => {
+  const { t } = useLocalization();
   const { clientContext, currentOrgUnit, currentContract } = useBuyerPortal();
 
   const resolvedCustomerId =
@@ -87,7 +89,7 @@ export const SettingsDrawer = ({
             onClick={onSecondaryAction || handleClose}
             disabled={isSecondaryButtonDisabled}
           >
-            {secondaryButtonLabel}
+            {secondaryButtonLabel ?? t("shared.buttons.cancel")}
           </BasicDrawer.Button>
           <BasicDrawer.Button
             variant="confirm"
@@ -95,7 +97,7 @@ export const SettingsDrawer = ({
             isLoading={isPrimaryButtonLoading}
             disabled={isPrimaryButtonDisabled}
           >
-            {primaryButtonLabel}
+            {primaryButtonLabel ?? t("shared.buttons.save")}
           </BasicDrawer.Button>
         </BasicDrawer.Footer>
       </BasicDrawer>

package/src/features/shared/components/SettingsDrawer/SettingsDrawerListType.tsx

@@ -3,26 +3,26 @@ import React, { useState } from "react";
 import { RadioGroup, RadioOption, Skeleton } from "@faststore/ui";
 
 import { useGetScopeConfig } from "../../hooks";
+import { useLocalization } from "../../localization/LocalizationContext";
 
 import { useSettingsDrawerContext } from "./SettingsDrawerContext";
 
 export type ListTypeOption = {
   value: string;
-  label: string;
-  description: string;
+  labelKey: string;
+  descriptionKey: string;
 };
 
 export const DEFAULT_LIST_TYPE_OPTIONS: ListTypeOption[] = [
   {
     value: "custom",
-    label: "Custom list",
-    description: "Manage a unique for this organization.",
+    labelKey: "shared.labels.customList",
+    descriptionKey: "shared.messages.customListDescription",
   },
   {
     value: "sync",
-    label: "Shared list",
-    description:
-      "Use the shared list defined by the contract. Updates are automatic.",
+    labelKey: "shared.labels.sharedList",
+    descriptionKey: "shared.messages.sharedListDescription",
   },
 ];
 
@@ -43,6 +43,7 @@ export const SettingsDrawerListType = ({
   onChange: controlledOnChange,
   disabled = false,
 }: SettingsDrawerListTypeProps) => {
+  const { t } = useLocalization();
   const { scopeName, customerId, unitId } = useSettingsDrawerContext();
   const [internalValue, setInternalValue] = useState<"sync" | "custom">(
     "custom"
@@ -94,14 +95,14 @@ export const SettingsDrawerListType = ({
             <div key={option.value} data-fs-bp-settings-drawer-list-type-option>
               <RadioOption
                 value={option.value}
-                label={option.label}
+                label={t(option.labelKey)}
                 name={name}
                 disabled={disabled || isLoading}
               >
-                {option.label}
+                {t(option.labelKey)}
               </RadioOption>
               <p data-fs-bp-settings-drawer-list-type-description>
-                {option.description}
+                {t(option.descriptionKey)}
               </p>
             </div>
           ))}

package/src/features/shared/components/SettingsDrawer/listTypeOptions.ts

@@ -3,21 +3,24 @@ import {
   type ListTypeOption,
 } from "./SettingsDrawerListType";
 
-export const getCustomListDescription = (entityPlural: string) =>
-  `Manage a unique list of ${entityPlural} for this organization.`;
+import type { LocalizeFn } from "../../localization/types";
 
-export const getSharedListDescription = (entityPlural: string) =>
-  `Use the shared list of ${entityPlural} defined by the contract. Updates are automatic.`;
+export const getCustomListDescription = (entityPlural: string, t: LocalizeFn) =>
+  t("shared.messages.customListDescription", [entityPlural]);
+
+export const getSharedListDescription = (entityPlural: string, t: LocalizeFn) =>
+  t("shared.messages.sharedListDescription", [entityPlural]);
 
 export const createListTypeOptions = (
-  entityPlural: string
+  entityPlural: string,
+  t: LocalizeFn
 ): ListTypeOption[] => [
   {
     ...DEFAULT_LIST_TYPE_OPTIONS[0],
-    description: getCustomListDescription(entityPlural),
+    descriptionKey: getCustomListDescription(entityPlural, t),
   },
   {
     ...DEFAULT_LIST_TYPE_OPTIONS[1],
-    description: getSharedListDescription(entityPlural),
+    descriptionKey: getSharedListDescription(entityPlural, t),
   },
 ];

package/src/features/shared/components/SortFilter/SortFilter.tsx

@@ -7,7 +7,8 @@ import {
   DropdownItem,
 } from "@faststore/ui";
 
-import { sortingOptions } from "../../utils";
+import { useLocalization } from "../../localization/LocalizationContext";
+import { sortingOptions, sortingOptionI18nKeys } from "../../utils";
 import { Icon } from "../Icon";
 
 type SortFilterProps = {
@@ -19,20 +20,26 @@ const SortFilter = ({
   updateSort,
   options = Object.keys(sortingOptions),
 }: SortFilterProps) => {
-  const [currentSort, setCurrentSort] = useState(options[0]);
+  const { t } = useLocalization();
+
+  const getLabel = (option: string) =>
+    sortingOptionI18nKeys[option] ? t(sortingOptionI18nKeys[option]) : option;
 
-  const updateCurrentSort = (newSort: string) => {
-    setCurrentSort(newSort);
+  const [currentSort, setCurrentSort] = useState(options[0]);
 
-    updateSort(newSort);
+  const updateCurrentSort = (option: string) => {
+    setCurrentSort(option);
+    updateSort(option);
   };
 
   return (
     <div data-fs-buyer-portal-sort-filter>
-      <span data-fs-buyer-portal-sort-filter-label>Sort by:</span>
+      <span data-fs-buyer-portal-sort-filter-label>
+        {t("shared.labels.sortBy")}
+      </span>
       <Dropdown>
         <DropdownButton data-fs-buyer-portal-sort-filter-current>
-          {currentSort}{" "}
+          {getLabel(currentSort)}{" "}
           <Icon
             name="Down"
             width={12}
@@ -48,7 +55,7 @@ const SortFilter = ({
               key={option}
               onClick={() => updateCurrentSort(option)}
             >
-              {option}
+              {getLabel(option)}
             </DropdownItem>
           ))}
         </DropdownMenu>

package/src/features/shared/components/Table/TableRow/TableRow.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from "react";
 
 import { Dropdown } from "@faststore/components";
+import { useLink_unstable as useLink } from "@faststore/core/experimental";
+import { Link } from "@faststore/ui";
 
 import { BasicDropdownMenu } from "../../BasicDropdownMenu/BasicDropdownMenu";
 import { Icon } from "../../Icon";
@@ -37,6 +39,8 @@ export const TableRow = ({
   prependColumns,
   ...otherProps
 }: TableRowProps) => {
+  const { resolveLink } = useLink();
+
   const classNames = () => {
     const classes: string[] = [];
 
@@ -100,7 +104,7 @@ export const TableRow = ({
       </Table.Cell>
       {href && (
         <Table.Cell data-fs-bp-table-row-link>
-          <a href={href} onClick={onClick} />
+          <Link href={resolveLink(href)} onClick={onClick} />
         </Table.Cell>
       )}
     </tr>

package/src/features/shared/components/VerticalNav/VerticalNavLink.tsx

@@ -1,8 +1,10 @@
 import React, { type ReactNode } from "react";
 
-import Link from "next/link";
 import { useRouter } from "next/router";
 
+import { useLink_unstable as useLink } from "@faststore/core/experimental";
+import { Link } from "@faststore/ui";
+
 export type VerticalNavLinkProps = {
   children: ReactNode;
   link: string;
@@ -24,13 +26,15 @@ export const VerticalNavLink = ({
   depth = 0,
 }: VerticalNavLinkProps) => {
   const { asPath } = useRouter();
+  const { resolveLink } = useLink();
+  const resolvedLink = resolveLink(link);
 
   const isActive = isActiveLink(asPath, link);
 
   return (
-    <li key={link} data-fs-vertical-nav-menu-item>
+    <li key={resolvedLink} data-fs-vertical-nav-menu-item>
       <Link
-        href={link}
+        href={resolvedLink}
         data-fs-vertical-nav-menu-link
         data-fs-vertical-nav-menu-link-is-active={isActive}
         style={

package/src/features/shared/layouts/BaseTabsLayout/Navbar.tsx

@@ -1,14 +1,30 @@
 import type { ReactNode } from "react";
 
-import Link from "next/link";
+import dynamic from "next/dynamic";
 
-import { Dropdown, DropdownMenu, IconButton, Skeleton } from "@faststore/ui";
+import { useLink_unstable as useLink } from "@faststore/core/experimental";
+import {
+  Dropdown,
+  DropdownMenu,
+  IconButton,
+  Link,
+  Skeleton,
+} from "@faststore/ui";
+
+const LocalizationButton = dynamic(
+  () =>
+    import("@faststore/core/experimental").then(
+      (m) => m.LocalizationButton_unstable
+    ),
+  { ssr: false }
+);
 
 import { OrgUnitBreadcrumb } from "../../../org-units/components";
 import { ProfileSummary } from "../../../profile/components";
 import { BasicDropdownMenu } from "../../components";
 import { Icon } from "../../components/Icon";
 import { useDrawerProps } from "../../hooks";
+import { useLocalization } from "../../localization/LocalizationContext";
 import { doLogout } from "../../utils";
 
 import { AboutDrawer } from "./about-drawer/AboutDrawer";
@@ -38,6 +54,8 @@ export const Navbar = ({
   contractId = "",
   ...otherProps
 }: NavbarProps) => {
+  const { t } = useLocalization();
+  const { resolveLink } = useLink();
   const {
     open: openSidebarMenu,
     isOpen: isOpenSidebarMenuDrawerOpen,
@@ -76,12 +94,18 @@ export const Navbar = ({
           />
         )}
         <div data-fs-bp-nav-menu-actions>
+          <LocalizationButton
+            saveLabel={t("shared.buttons.save")}
+            currencyLabel={t("layouts.labels.currency")}
+            languageLabel={t("layouts.labels.language")}
+            icon="Globe"
+          />
           <Link
-            href="/"
+            href={resolveLink("/")}
             target="_blank"
             data-fs-bp-nav-menu-start-shopping-link
           >
-            Start shopping
+            {t("layouts.navigation.startShopping")}
           </Link>
 
           <IconButton

package/src/features/shared/layouts/BaseTabsLayout/about-drawer/AboutDrawer.tsx

@@ -2,6 +2,7 @@ import { Skeleton } from "@faststore/ui";
 
 import { BasicDrawer, type BasicDrawerProps } from "../../../components";
 import { useGetDependenciesVersion } from "../../../hooks";
+import { useLocalization } from "../../../localization/LocalizationContext";
 import { CURRENT_VERSION } from "../../../utils/constants";
 
 export type AboutDrawerProps = Omit<BasicDrawerProps, "children"> & {
@@ -16,6 +17,7 @@ export const AboutDrawer = ({
   contractId = "",
   ...props
 }: AboutDrawerProps) => {
+  const { t } = useLocalization();
   const { dependenciesVersion, isDependenciesVersionLoading } =
     useGetDependenciesVersion(unitId);
 
@@ -26,16 +28,20 @@ export const AboutDrawer = ({
       {...props}
       data-fs-slide-over-direction="rightSide"
     >
-      <BasicDrawer.Heading title="About" onClose={close} />
+      <BasicDrawer.Heading title={t("layouts.drawers.about")} onClose={close} />
       <BasicDrawer.Body data-bp-about-menu-drawer-body>
         <div data-fs-bp-about-information>
-          <p data-fs-bp-about-information-title>Version details</p>
+          <p data-fs-bp-about-information-title>
+            {t("layouts.titles.versionDetails")}
+          </p>
           {isDependenciesVersionLoading ? (
             <Skeleton size={{ width: "100%", height: "3.5rem" }} />
           ) : (
             <>
               <div data-fs-bp-about-row>
-                <span data-fs-bp-about-row-label>Organization Account</span>
+                <span data-fs-bp-about-row-label>
+                  {t("layouts.labels.organizationAccount")}
+                </span>
                 <span data-fs-bp-about-row-value>{CURRENT_VERSION}</span>
               </div>
               {dependenciesVersion &&
@@ -55,11 +61,15 @@ export const AboutDrawer = ({
           )}
         </div>
         <div data-fs-bp-about-information>
-          <p data-fs-bp-about-information-title>Navigation Details</p>
+          <p data-fs-bp-about-information-title>
+            {t("layouts.titles.navigationDetails")}
+          </p>
           {!!contractId && (
             <>
               <div data-fs-bp-about-row data-fs-bp-about-row-contract-id>
-                <span data-fs-bp-about-row-label>Contract ID</span>
+                <span data-fs-bp-about-row-label>
+                  {t("layouts.labels.contractId")}
+                </span>
                 <span data-fs-bp-about-row-value>{contractId}</span>
               </div>
             </>

package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss

@@ -2,13 +2,13 @@
 @import "./sidebar-drawer/sidebar-drawer.scss";
 
 [data-fs-bp-base-tabs-layout] {
-  
+
   display: grid;
   grid-template-rows: auto 1fr;
   height: 100vh;
   overflow: hidden;
 
-  [data-fs-bp-nav] {  
+  [data-fs-bp-nav] {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -22,11 +22,21 @@
       padding-right: var(--fs-bp-padding-10);
     }
 
+    [data-fs-localization-button] {
+      [data-fs-button-wrapper] {
+        span {
+          display: inline-flex;
+          align-items: center;
+          gap: var(--fs-bp-gap-3);
+        }
+      }
+    }
+
     [data-fs-bp-breadcrumb-nav] {
       [data-fs-bp-breadcrumb-current],
       [data-fs-bp-breadcrumb-dropdown-trigger] {
         font-size: var(--fs-bp-text-body);
-        
+
         @include u.media(">=phonemid") {
           font-size: var(--fs-bp-text-body-big);
         }
@@ -79,25 +89,25 @@
 
     [data-fs-bp-nav-menu-start-shopping-link] {
       display: none;
-  
+
       padding: var(--fs-bp-padding-0) var(--fs-bp-padding-5);
       @include text-style('action');
       color: var(--fs-bp-color-neutral-8);
       border-radius: var(--fs-bp-border-radius-full);
-  
+
       height: var(--fs-bp-spacing-9);
       justify-content: center;
       align-items: center;
       text-decoration: none;
-  
+
       &:hover {
         background-color: var(--fs-bp-color-transparent-0);
       }
-  
+
       &:active {
         background-color: var(--fs-bp-color-transparent-1);
       }
-  
+
       @include u.media(">=tablet") {
         display: inline-flex;
       }
@@ -135,7 +145,7 @@
 
     [data-fs-vertical-nav-menu] {
       margin-bottom: var(--fs-bp-padding-5);
-      
+
       [data-fs-vertical-nav-menu-org-wrapper] {
         [data-fs-vertical-nav-menu-org-name] {
           @include text-style('emphasis');
@@ -165,3 +175,8 @@
     }
   }
 }
+
+// !important para vencer a especificidade do CSS module do selector (portal).
+[data-fs-localization-selector] {
+  --fs-localization-selector-max-width: 20rem !important;
+}

package/src/features/shared/layouts/BaseTabsLayout/sidebar-drawer/SidebarDrawer.tsx

@@ -1,6 +1,7 @@
 import storeConfig from "discovery.config";
 
-import Link from "next/link";
+import { useLink_unstable as useLink } from "@faststore/core/experimental";
+import { Link } from "@faststore/ui";
 
 import { BasicDrawer, type BasicDrawerProps } from "../../../components";
 import { SidebarMenu } from "../SidebarMenu";
@@ -17,6 +18,8 @@ export const SidebarDrawer = ({
   close,
   ...props
 }: SidebarDrawerProps) => {
+  const { resolveLink } = useLink();
+
   return (
     <BasicDrawer
       data-bp-sidebar-menu
@@ -27,7 +30,7 @@ export const SidebarDrawer = ({
     >
       <BasicDrawer.Heading
         title={
-          <Link href="/" data-fs-bp-org-unit-details-navbar-link>
+          <Link href={resolveLink("/")} data-fs-bp-org-unit-details-navbar-link>
             {storeConfig.seo.title}
           </Link>
         }

package/src/features/shared/layouts/ContractTabsLayout/ContractTabsLayout.tsx

@@ -5,6 +5,7 @@ import { DropdownItem } from "@faststore/ui";
 import { OrgUnitDetailsNavbar } from "../../../org-units/components";
 import { Icon } from "../../components";
 import { useBuyerPortal, useReloadOnBfcacheRestore } from "../../hooks";
+import { useLocalization } from "../../localization/LocalizationContext";
 import { getContractSettingsLinks } from "../../utils";
 import { BaseTabsLayout } from "../BaseTabsLayout/BaseTabsLayout";
 import { SumaSidebar } from "../SumaPageLayout/SumaSidebar";
@@ -28,6 +29,7 @@ export const ContractTabsLayout = ({
 }: ContractTabsLayoutProps) => {
   const { currentOrgUnit, currentUser, currentContract, featureFlags } =
     useBuyerPortal();
+  const { t } = useLocalization();
 
   useReloadOnBfcacheRestore();
 
@@ -67,10 +69,13 @@ export const ContractTabsLayout = ({
     );
   }
 
-  const verticalLinks = getContractSettingsLinks({
-    contractId: resolvedContractId,
-    orgUnitId: resolvedOrgUnitId,
-  });
+  const verticalLinks = getContractSettingsLinks(
+    {
+      contractId: resolvedContractId,
+      orgUnitId: resolvedOrgUnitId,
+    },
+    t
+  );
 
   return (
     <BaseTabsLayout data-fs-bp-contract-tabs-layout>
@@ -91,7 +96,7 @@ export const ContractTabsLayout = ({
           dropdownOptions={
             <DropdownItem>
               <Icon name="DoNotDisturbOn" width={20} height={20} />
-              Remove from unit
+              {t("layouts.actions.removeFromUnit")}
             </DropdownItem>
           }
           verticalLinks={verticalLinks}