@vtex/faststore-plugin-buyer-portal 2.0.29 → 2.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "2.0.29",
+  "version": "2.0.31",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "files": [
@@ -16,6 +16,8 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
+    "i18n:check": "node scripts/check-localization-keys.mjs check --base=main",
+    "i18n:refresh": "node scripts/check-localization-keys.mjs refresh",
     "prepare": "husky",
     "release": "yarn release:stable",
     "release:stable": "yarn check --integrity && yarn release-it -c .release-it.json --ci --no-npm",

package/src/features/addresses/components/AddressDropdownMenu/AddressDropdownMenu.tsx

@@ -192,7 +192,7 @@ ${t("shared.messages.changesTimeout")}`,
       <BasicDropdownMenu data-fs-bp-dropdown-menu>
         <DropdownItem onClick={handleOpenNewTab}>
           <Icon name="OpenNewTab" {...sizeProps} />
-          Open
+          {t("shared.buttons.open")}
         </DropdownItem>
         {!isAddressEditingRestricted && (
           <>

package/src/features/addresses/components/AddressesCard/AddressesCard.tsx

@@ -67,7 +67,7 @@ export default function AddressesCard({
                     <DropdownMenu>
                       <DropdownItem data-fs-card-dropdown-item>
                         <Icon name="ArrowSquareOut" data-fs-dropdown-icon />
-                        Open
+                        {t("shared.buttons.open")}
                       </DropdownItem>
                       <DropdownItem>
                         <Icon

package/src/features/buying-policies/components/AccountingFieldCriteriaSelector/AccountingFieldCriteriaSelector.tsx

@@ -4,6 +4,7 @@ import { useUI } from "@faststore/ui";
 
 import { useListAccountingFields } from "../../../accounting-fields/hooks";
 import { CustomDropdown } from "../../../shared/components/CustomDropdown/CustomDropdown";
+import { LocalizationEslintIgnore } from "../../../shared/components/LocalizationEslintIgnore/LocalizationEslintIgnore";
 import { useBuyerPortal } from "../../../shared/hooks";
 import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import {
@@ -91,7 +92,9 @@ export const AccountingFieldCriteriaSelector = ({
     <div data-fs-bp-accounting-field-criteria-selector>
       <div data-fs-bp-accounting-fields-criteria-string>
         <span onClick={handleEditablePartClick} data-fs-bp-editable-part>
-          $exists(customData.customFields.fields[customFieldId="
+          <LocalizationEslintIgnore>
+            $exists(customData.customFields.fields[customFieldId="
+          </LocalizationEslintIgnore>
         </span>
 
         <div onClick={handleFieldClick} style={{ display: "inline-block" }}>
@@ -115,7 +118,7 @@ export const AccountingFieldCriteriaSelector = ({
         </div>
 
         <span onClick={handleEditablePartClick} data-fs-bp-editable-part>
-          "].value)
+          <LocalizationEslintIgnore>"].value)</LocalizationEslintIgnore>
         </span>
       </div>
     </div>

package/src/features/buying-policies/components/AccountingFieldCriteriaSelector/AccountingValueCriteriaSelector.tsx

@@ -8,6 +8,7 @@ import {
   useListAccountingValues,
 } from "../../../accounting-fields/hooks";
 import { CustomDropdown } from "../../../shared/components/CustomDropdown/CustomDropdown";
+import { LocalizationEslintIgnore } from "../../../shared/components/LocalizationEslintIgnore/LocalizationEslintIgnore";
 import { useBuyerPortal, useDebounce } from "../../../shared/hooks";
 import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import {
@@ -216,7 +217,9 @@ export const AccountingValueCriteriaSelector = ({
     <div data-fs-bp-accounting-field-criteria-selector>
       <div data-fs-bp-accounting-fields-criteria-string>
         <span onClick={handleEditablePartClick} data-fs-bp-editable-part>
-          customData.customFields.fields[customFieldId="
+          <LocalizationEslintIgnore>
+            customData.customFields.fields[customFieldId="
+          </LocalizationEslintIgnore>
         </span>
 
         <div onClick={handleFieldClick} style={{ display: "inline-block" }}>
@@ -244,7 +247,9 @@ export const AccountingValueCriteriaSelector = ({
         </div>
 
         <span onClick={handleEditablePartClick} data-fs-bp-editable-part>
-          "].customFieldValueId="
+          <LocalizationEslintIgnore>
+            "].customFieldValueId="
+          </LocalizationEslintIgnore>
         </span>
 
         <div onClick={handleValueClick} style={{ display: "inline-block" }}>
@@ -275,7 +280,7 @@ export const AccountingValueCriteriaSelector = ({
         </div>
 
         <span onClick={handleEditablePartClick} data-fs-bp-editable-part>
-          "
+          <LocalizationEslintIgnore>"</LocalizationEslintIgnore>
         </span>
       </div>
     </div>

package/src/features/buying-policies/components/BudgetCriteriaSelector/BudgetCriteriaSelector.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 
 import { CustomDropdown } from "../../../shared/components/CustomDropdown/CustomDropdown";
+import { LocalizationEslintIgnore } from "../../../shared/components/LocalizationEslintIgnore/LocalizationEslintIgnore";
 import { useBuyerPortal } from "../../../shared/hooks";
 import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { useGetBudgets } from "../../hooks/useGetBudgets";
@@ -90,7 +91,9 @@ export const BudgetCriteriaSelector = ({
     <div data-fs-bp-budget-criteria-selector>
       <div data-fs-bp-budget-criteria-string>
         <span onClick={handleEditablePartClick} data-fs-bp-editable-part>
-          $exists(budgetData.budgets[id="
+          <LocalizationEslintIgnore>
+            $exists(budgetData.budgets[id="
+          </LocalizationEslintIgnore>
         </span>
 
         <div onClick={handleBudgetValueClick}>
@@ -115,7 +118,7 @@ export const BudgetCriteriaSelector = ({
         </div>
 
         <span onClick={handleEditablePartClick} data-fs-bp-editable-part>
-          "])
+          <LocalizationEslintIgnore>"])</LocalizationEslintIgnore>
         </span>
       </div>
     </div>

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import { useUI } from "@faststore/ui";
 
@@ -15,6 +15,7 @@ import {
   buildRangeSet,
   buildToggleSet,
 } from "../../hooks/contractSelectionHelpers";
+import { pluralSuffixArgs } from "../../layouts/ContractListingLayout/utils";
 
 export type AddContractsDrawerProps = Omit<BasicDrawerProps, "children"> & {
   orgUnitId: string;
@@ -43,10 +44,19 @@ export const AddContractsDrawer = ({
     fetchAvailableContracts,
   } = useListAvailableContracts(orgUnitId);
 
+  const pendingAddCountRef = useRef(0);
+
   const { addContracts, isAddContractsLoading } = useAddContracts({
     onSuccess: () => {
       onSuccess();
       drawerProps.onDismiss?.();
+      pushToast({
+        message: t(
+          "contracts.toasts.addSuccess",
+          pluralSuffixArgs(pendingAddCountRef.current)
+        ),
+        status: "INFO",
+      });
     },
     onError: () => {
       drawerProps.onDismiss?.();
@@ -129,6 +139,7 @@ export const AddContractsDrawer = ({
   };
 
   const handleConfirm = () => {
+    pendingAddCountRef.current = selectedIds.size;
     addContracts({
       orgUnitId,
       ids: Array.from(selectedIds),

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

@@ -6,6 +6,8 @@ import { useLocalization } from "../../../shared/localization/LocalizationContex
 import { useSwitchContract } from "../../hooks";
 import { ContractSwitchOverlay } from "../ContractSwitchOverlay/ContractSwitchOverlay";
 
+import { getContractMenuState } from "./contractListItemMenu";
+
 import type { ContractData } from "../../types";
 
 export type ContractListItemProps = {
@@ -30,6 +32,10 @@ export const ContractListItem = ({
   const { pushToast } = useUI();
   const { switchContract, loading } = useSwitchContract();
   const isRemovable = contract.isAttached !== false;
+  const menuState = getContractMenuState({
+    isDefault: contract.isDefault,
+    isRemovable,
+  });
 
   const handleCheckboxClick = (event: React.MouseEvent) => {
     event.stopPropagation();
@@ -97,18 +103,20 @@ export const ContractListItem = ({
         <Dropdown>
           <BasicDropdownMenu.Trigger />
           <BasicDropdownMenu>
-            {contract.isDefault || !isRemovable ? (
-              <DropdownItem disabled>
-                <Icon name="Star" width={16} height={16} />
-                {t("contracts.actions.setAsDefault")}
-              </DropdownItem>
-            ) : (
-              <DropdownItem onClick={onSetDefault}>
-                <Icon name="StarOutline" width={16} height={16} />
-                {t("contracts.actions.setAsDefault")}
-              </DropdownItem>
+            {menuState.showSetDefault && (
+              <>
+                <DropdownItem
+                  onClick={
+                    menuState.setDefaultEnabled ? onSetDefault : undefined
+                  }
+                  disabled={!menuState.setDefaultEnabled}
+                >
+                  <Icon name="StarOutline" width={16} height={16} />
+                  {t("contracts.actions.setAsDefault")}
+                </DropdownItem>
+                <BasicDropdownMenu.Separator />
+              </>
             )}
-            <BasicDropdownMenu.Separator />
             <DropdownItem
               data-fs-bp-dropdown-menu-item-mode="danger"
               disabled={!isRemovable}

package/src/features/contracts/components/ContractListItem/__tests__/contractListItemMenu.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+
+import { getContractMenuState } from "../contractListItemMenu";
+
+describe("getContractMenuState", () => {
+  it("hides 'Set as default' when the contract is already the default", () => {
+    expect(
+      getContractMenuState({ isDefault: true, isRemovable: true })
+    ).toEqual({
+      showSetDefault: false,
+      setDefaultEnabled: false,
+    });
+  });
+
+  it("shows and enables 'Set as default' for a removable non-default contract", () => {
+    expect(
+      getContractMenuState({ isDefault: false, isRemovable: true })
+    ).toEqual({
+      showSetDefault: true,
+      setDefaultEnabled: true,
+    });
+  });
+
+  it("shows but disables 'Set as default' for a legacy (non-attached) contract", () => {
+    expect(
+      getContractMenuState({ isDefault: undefined, isRemovable: false })
+    ).toEqual({
+      showSetDefault: true,
+      setDefaultEnabled: false,
+    });
+  });
+});

package/src/features/contracts/components/ContractListItem/contractListItemMenu.ts

@@ -0,0 +1,17 @@
+export type ContractMenuState = {
+  /** The default contract never offers "Set as default" (AS-8). */
+  showSetDefault: boolean;
+  /** Legacy non-attached contracts keep the item visible but disabled. */
+  setDefaultEnabled: boolean;
+};
+
+export const getContractMenuState = ({
+  isDefault,
+  isRemovable,
+}: {
+  isDefault?: boolean;
+  isRemovable: boolean;
+}): ContractMenuState => ({
+  showSetDefault: !isDefault,
+  setDefaultEnabled: !isDefault && isRemovable,
+});

package/src/features/contracts/components/ContractSelectionList/ContractSelectionListSkeleton.tsx

@@ -0,0 +1,35 @@
+import { Skeleton } from "@faststore/ui";
+
+export type ContractSelectionListSkeletonProps = {
+  /** Number of placeholder rows; defaults to a typical page. */
+  rows?: number;
+};
+
+/**
+ * Placeholder rows shaped like `ContractListItem`, shown while the listing
+ * loads (route transition) or refreshes after adding/removing contracts.
+ */
+export const ContractSelectionListSkeleton = ({
+  rows = 4,
+}: ContractSelectionListSkeletonProps) => (
+  <div
+    data-fs-bp-contract-selection-list
+    data-fs-bp-contract-selection-list-skeleton
+    aria-busy="true"
+    aria-live="polite"
+  >
+    <div data-fs-bp-contract-selection-list-rows>
+      {Array.from({ length: Math.max(rows, 1) }, (_, index) => (
+        <div
+          data-fs-bp-contract-list-item
+          data-fs-bp-contract-list-item-skeleton
+          key={`contract-skeleton-${index}`}
+        >
+          <Skeleton size={{ width: "1.25rem", height: "1.25rem" }} />
+          <Skeleton size={{ width: "2rem", height: "2rem" }} />
+          <Skeleton size={{ width: "14rem", height: "1.25rem" }} />
+        </div>
+      ))}
+    </div>
+  </div>
+);

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

@@ -1,3 +1,4 @@
+import { useBuyerPortal } from "../../../shared/hooks";
 import { ContractTabsLayout } from "../../../shared/layouts/ContractTabsLayout/ContractTabsLayout";
 import { LoadingTabsLayoutContent } from "../../../shared/layouts/LoadingTabsLayout/LoadingTabsLayout";
 import { useLocalization } from "../../../shared/localization/LocalizationContext";
@@ -21,6 +22,7 @@ export const ContractSwitchOverlay = ({
   contractId,
 }: ContractSwitchOverlayProps) => {
   const { t } = useLocalization();
+  const { featureFlags } = useBuyerPortal();
 
   return (
     <div data-fs-bp-contract-switch-overlay role="alert" aria-busy="true">
@@ -32,7 +34,13 @@ export const ContractSwitchOverlay = ({
         pageName={t("layouts.tabs.contract")}
         loading
       >
-        <LoadingTabsLayoutContent title={t("layouts.titles.profile")} />
+        <LoadingTabsLayoutContent
+          title={t(
+            featureFlags?.suma
+              ? "layouts.navigation.basicInformation"
+              : "layouts.titles.profile"
+          )}
+        />
       </ContractTabsLayout>
     </div>
   );

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

@@ -37,6 +37,7 @@ export const UnableToRemoveContractsDrawer = ({
         </p>
         <p>
           {t("contracts.removeDrawer.unableDeselectHint", [
+            // eslint-disable-next-line no-restricted-syntax -- legacy hardcoded string, pending migration (see specs/custom-localization-system.md#out-of-scope)
             <strong key="organizationalUnit">organizational unit</strong>,
           ])}
         </p>

package/src/features/contracts/components/index.ts

@@ -3,6 +3,8 @@ export { ContractListItem } from "./ContractListItem/ContractListItem";
 export type { ContractListItemProps } from "./ContractListItem/ContractListItem";
 export { ContractSelectionList } from "./ContractSelectionList/ContractSelectionList";
 export type { ContractSelectionListProps } from "./ContractSelectionList/ContractSelectionList";
+export { ContractSelectionListSkeleton } from "./ContractSelectionList/ContractSelectionListSkeleton";
+export type { ContractSelectionListSkeletonProps } from "./ContractSelectionList/ContractSelectionListSkeleton";
 export { ConfirmRemoveDrawer } from "./ConfirmRemoveDrawer/ConfirmRemoveDrawer";
 export type { ConfirmRemoveDrawerProps } from "./ConfirmRemoveDrawer/ConfirmRemoveDrawer";
 export { ErrorRemoveDrawer } from "./ErrorRemoveDrawer/ErrorRemoveDrawer";

package/src/features/contracts/hooks/useSwitchContract.ts

@@ -1,16 +1,18 @@
 import { useState } from "react";
 
-import { buyerPortalRoutes } from "../../shared/utils/buyerPortalRoutes";
 import {
   ContractSwitchError,
   changeContractToken,
 } from "../utils/changeContractToken";
 import { clearPersistedSessionState } from "../utils/clearPersistedSessionState";
+import { resolveSwitchRedirect } from "../utils/resolveSwitchRedirect";
 
 import { useContractSwitchChannel } from "./useContractSwitchChannel";
 
 export type SwitchContractParams = {
   orgUnitId: string;
+  /** Where to land after the switch. Defaults to the contract's Profile page. */
+  redirectTo?: string;
 };
 
 export type UseSwitchContractReturn = {
@@ -28,7 +30,7 @@ export type UseSwitchContractReturn = {
  *  1. POST switch-properties with the target contract id and apply the returned auth cookie.
  *  2. Clear persisted host session state.
  *  3. Broadcast to other tabs so they reload under the new context.
- *  4. Full-navigate to the contract's profile page so SSR re-runs with the new cookie.
+ *  4. Full-navigate to `redirectTo` (default: the contract's profile page) so SSR re-runs with the new cookie.
  *
  * On failure the previous contract stays active and `switchContract` resolves to `false`.
  */
@@ -39,7 +41,7 @@ export function useSwitchContract(): UseSwitchContractReturn {
 
   const switchContract = async (
     contractId: string,
-    { orgUnitId }: SwitchContractParams
+    { orgUnitId, redirectTo }: SwitchContractParams
   ): Promise<boolean> => {
     setLoading(true);
     setError(null);
@@ -52,7 +54,7 @@ export function useSwitchContract(): UseSwitchContractReturn {
 
       if (typeof window !== "undefined") {
         window.location.assign(
-          buyerPortalRoutes.profileDetails({ orgUnitId, contractId })
+          resolveSwitchRedirect({ orgUnitId, contractId, redirectTo })
         );
       }
 

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

@@ -21,6 +21,7 @@ import { ConfirmRemoveDrawer } from "../../components/ConfirmRemoveDrawer/Confir
 import { ErrorRemoveDrawer } from "../../components/ErrorRemoveDrawer/ErrorRemoveDrawer";
 import { useContractSwitchChannel, useSetDefaultContract } from "../../hooks";
 import { removeContractService } from "../../services";
+import { pluralSuffixArgs } from "../ContractListingLayout/utils";
 
 import type { OrgUnitBasicData } from "../../../org-units/types";
 import type { FeatureFlags } from "../../../shared/components/BuyerPortalProvider/BuyerPortalProvider";
@@ -125,6 +126,7 @@ export const ContractInformationLayout = ({
   const router = useRouter();
   const { broadcast } = useContractSwitchChannel();
   const { featureFlags } = useBuyerPortal();
+  const { pushToast } = useUI();
 
   const contract = contracts.find((c) => c.id === contractId);
   const isSingleContract = contracts.length <= 1;
@@ -144,8 +146,12 @@ export const ContractInformationLayout = ({
 
   const handleRemoveSuccess = useCallback(() => {
     broadcast({ type: "contract-removed", contractId });
+    pushToast({
+      message: t("contracts.toasts.removeSuccess", pluralSuffixArgs(1)),
+      status: "INFO",
+    });
     router.push(buyerPortalRoutes.contracts({ orgUnitId: orgUnit.id }));
-  }, [broadcast, contractId, orgUnit.id, router]);
+  }, [broadcast, contractId, orgUnit.id, router, pushToast, t]);
 
   const handleRemoveError = useCallback(() => {
     confirmDrawerProps.close();
@@ -173,7 +179,6 @@ export const ContractInformationLayout = ({
     openConfirmDrawer();
   };
 
-  const { pushToast } = useUI();
   const { setDefaultContract, isSetDefaultContractLoading } =
     useSetDefaultContract({
       onSuccess: () => {
@@ -224,7 +229,7 @@ export const ContractInformationLayout = ({
             <Link
               href={contractsUrl}
               data-fs-bp-contract-information-back-link
-              aria-label="Back to contracts"
+              aria-label={t("layouts.navigation.contracts")}
             >
               <Icon name="ArrowPointLeft" width={16} height={16} />
               {t("layouts.navigation.contracts")}
@@ -239,15 +244,7 @@ export const ContractInformationLayout = ({
               <Dropdown>
                 <BasicDropdownMenu.Trigger />
                 <BasicDropdownMenu>
-                  {contract?.isDefault ? (
-                    <DropdownItem
-                      data-fs-bp-contract-information-more-menu-set-default
-                      disabled
-                    >
-                      <Icon name="Star" width={16} height={16} />
-                      {t("contracts.actions.setAsDefault")}
-                    </DropdownItem>
-                  ) : (
+                  {contract && !contract.isDefault && (
                     <DropdownItem
                       data-fs-bp-contract-information-more-menu-set-default
                       onClick={handleSetDefault}