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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "2.0.30",
+  "version": "2.0.31",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "files": [

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/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}

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

@@ -17,6 +17,7 @@ import {
 import {
   useDrawerProps,
   useBuyerPortal,
+  useRefreshPageData,
   useReloadOnBfcacheRestore,
 } from "../../../shared/hooks";
 import { GlobalLayout } from "../../../shared/layouts";
@@ -29,6 +30,7 @@ import { ConfirmRemoveDrawer } from "../../components/ConfirmRemoveDrawer/Confir
 import { ContractSelectAllRow } from "../../components/ContractSelectAllRow";
 import { ContractSelectionBar } from "../../components/ContractSelectionBar";
 import { ContractSelectionList } from "../../components/ContractSelectionList/ContractSelectionList";
+import { ContractSelectionListSkeleton } from "../../components/ContractSelectionList/ContractSelectionListSkeleton";
 import { ContractsListHeader } from "../../components/ContractsListHeader";
 import { UnableToRemoveContractsDrawer } from "../../components/UnableToRemoveContractsDrawer/UnableToRemoveContractsDrawer";
 import {
@@ -41,7 +43,14 @@ import {
 } from "../../hooks";
 
 import { buildContractSettingsNavItems } from "./ContractSettingsNav";
-import { getDefaultContractId, resolveViewedContractId } from "./utils";
+import {
+  REMOVED_QUERY_PARAM,
+  buildRemovedRedirectUrl,
+  getDefaultContractId,
+  parseRemovedCount,
+  pluralSuffixArgs,
+  resolveViewedContractId,
+} from "./utils";
 
 import type { OrgUnitBasicData } from "../../../org-units/types";
 import type { UserData } from "../../../users/types";
@@ -65,6 +74,10 @@ export const ContractListingLayout = ({
   const router = useRouter();
   const { pushToast } = useUI();
   const { subscribe } = useContractSwitchChannel();
+  // Re-runs the loader after add/remove/set-default; `isRefreshing` drives the
+  // inline skeleton (a same-URL replace shows no route-change skeleton).
+  const { refresh, isRefreshing } = useRefreshPageData();
+  const isBusy = loading || isRefreshing;
 
   const queryContractId = Array.isArray(router.query.contractId)
     ? router.query.contractId[0]
@@ -78,10 +91,14 @@ export const ContractListingLayout = ({
     listAccountingFieldData,
     listAccountingFieldLoading,
     listAccountingFieldRefresh,
-  } = useListAccountingFields({
-    orgUnitId: orgUnit.id,
-    contractId: defaultContractId,
-  });
+  } = useListAccountingFields(
+    {
+      orgUnitId: orgUnit.id,
+      contractId: defaultContractId,
+    },
+    // No contract to scope by (route-transition skeleton) → nothing to fetch.
+    { lazy: !defaultContractId }
+  );
 
   const {
     open: openAccountingFieldDrawer,
@@ -130,27 +147,31 @@ export const ContractListingLayout = ({
         const fallbackContractId = getDefaultContractId(remainingContracts);
 
         if (fallbackContractId) {
-          switchContract(fallbackContractId, { orgUnitId: orgUnit.id }).then(
-            (switched) => {
-              if (!switched) {
-                pushToast({
-                  message: t("contracts.toasts.refreshError"),
-                  status: "ERROR",
-                });
-                router.replace(router.asPath);
-              }
+          switchContract(fallbackContractId, {
+            orgUnitId: orgUnit.id,
+            redirectTo: buildRemovedRedirectUrl(
+              orgUnit.id,
+              pendingRemoveIds.size
+            ),
+          }).then((switched) => {
+            if (!switched) {
+              pushToast({
+                message: t("contracts.toasts.refreshError"),
+                status: "ERROR",
+              });
+              void refresh();
             }
-          );
+          });
           return;
         }
       }
 
-      router.replace(router.asPath);
+      void refresh();
       pushToast({
-        message: t("contracts.toasts.removeSuccess", [
-          pendingRemoveIds.size,
-          pendingRemoveIds.size === 1 ? "" : "s",
-        ]),
+        message: t(
+          "contracts.toasts.removeSuccess",
+          pluralSuffixArgs(pendingRemoveIds.size)
+        ),
         status: "INFO",
       });
     },
@@ -199,7 +220,7 @@ export const ContractListingLayout = ({
 
   const { setDefaultContract } = useSetDefaultContract({
     onSuccess: () => {
-      router.replace(router.asPath);
+      void refresh();
       pushToast({
         message: t("contracts.toasts.setDefaultSuccess"),
         status: "INFO",
@@ -213,7 +234,7 @@ export const ContractListingLayout = ({
       } catch {
         // message is not JSON
       }
-      void router.replace(router.asPath).catch(() => {});
+      void refresh();
       pushToast({
         message: apiMessage ?? t("contracts.toasts.setDefaultError"),
         status: "ERROR",
@@ -249,6 +270,24 @@ export const ContractListingLayout = ({
     }
   }, [router.query.error]);
 
+  useEffect(() => {
+    const removedCount = parseRemovedCount(router.query[REMOVED_QUERY_PARAM]);
+    if (removedCount === null) return;
+
+    pushToast({
+      message: t(
+        "contracts.toasts.removeSuccess",
+        pluralSuffixArgs(removedCount)
+      ),
+      status: "INFO",
+    });
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { [REMOVED_QUERY_PARAM]: _removed, ...rest } = router.query;
+    router.replace({ pathname: router.pathname, query: rest }, undefined, {
+      shallow: true,
+    });
+  }, [router.query[REMOVED_QUERY_PARAM]]);
+
   const {
     selectedIds,
     handleModifierClick,
@@ -328,22 +367,22 @@ export const ContractListingLayout = ({
           email: user?.email ?? "",
         }}
         loading={loading}
-        sidebarVariant="listing"
+        sidebarVariant="unit"
       />
       <div data-fs-bp-contract-listing-body>
         <SumaSidebar
           orgUnitId={orgUnit.id}
           contractId={defaultContractId}
-          variant="listing"
+          variant="unit"
         />
 
-        <section data-fs-bp-contract-listing-section>
+        <section data-fs-bp-contract-listing-section aria-busy={isBusy}>
           <HeaderInside
-            title={t("contracts.titles.contracts")}
-            info={headerInfo}
+            title={loading ? undefined : t("contracts.titles.contracts")}
+            info={loading ? undefined : headerInfo}
             data-fs-bp-contract-listing-header
           >
-            {featureFlags?.suma && (
+            {featureFlags?.suma && !loading && (
               <HeaderInside.Button
                 onClick={openAddContractsDrawer}
                 aria-label="Add contracts"
@@ -351,7 +390,11 @@ export const ContractListingLayout = ({
             )}
           </HeaderInside>
 
-          {isSingleContract ? (
+          {loading ? (
+            // Route-transition skeleton (LoadingTabsLayout): the destination
+            // is the multi-contract listing, so mirror its rows.
+            <ContractSelectionListSkeleton />
+          ) : isSingleContract ? (
             <BasicCard
               data-fs-bp-contracts-settings-card
               footerMessage={t("orgUnitDetails.links.manageContractSettings")}
@@ -362,8 +405,8 @@ export const ContractListingLayout = ({
               enableFooter
             >
               <LetterHighlight letter={displayName} />
-              <VerticalNav.Menu title={displayName} loading={loading}>
-                {loading ? (
+              <VerticalNav.Menu title={displayName} loading={isBusy}>
+                {isBusy ? (
                   [...new Array(8)].map((_, index) => (
                     <li style={{ padding: "8px 0" }} key={`skeleton-${index}`}>
                       <Skeleton
@@ -408,15 +451,21 @@ export const ContractListingLayout = ({
                 selectedCount={selectedInFiltered}
                 onToggle={handleToggleSelectAll}
               />
-              <ContractSelectionList
-                contracts={pageItems}
-                orgUnitId={orgUnit.id}
-                selectedIds={selectedIds}
-                onKeyDown={handleKeyDown}
-                onSelect={handleSelect}
-                onItemRemove={handleItemRemove}
-                onSetDefault={handleSetDefault}
-              />
+              {isRefreshing ? (
+                <ContractSelectionListSkeleton
+                  rows={Math.max(pageItems.length, 3)}
+                />
+              ) : (
+                <ContractSelectionList
+                  contracts={pageItems}
+                  orgUnitId={orgUnit.id}
+                  selectedIds={selectedIds}
+                  onKeyDown={handleKeyDown}
+                  onSelect={handleSelect}
+                  onItemRemove={handleItemRemove}
+                  onSetDefault={handleSetDefault}
+                />
+              )}
               <ContractSelectionBar
                 selectedCount={selectedIds.size}
                 onClear={clearSelection}
@@ -443,7 +492,7 @@ export const ContractListingLayout = ({
           orgUnitId={orgUnit.id}
           orgUnitName={orgUnit.name}
           existingContractIds={contracts.map((c) => c.id)}
-          onSuccess={() => router.replace(router.asPath)}
+          onSuccess={() => void refresh()}
           {...addContractsDrawer}
         />
       )}

package/src/features/contracts/layouts/ContractListingLayout/__tests__/utils.test.ts

@@ -1,6 +1,12 @@
 import { describe, expect, it } from "vitest";
 
-import { getDefaultContractId, resolveViewedContractId } from "../utils";
+import {
+  buildRemovedRedirectUrl,
+  getDefaultContractId,
+  parseRemovedCount,
+  pluralSuffixArgs,
+  resolveViewedContractId,
+} from "../utils";
 
 import type { ContractData } from "../../../types";
 
@@ -38,3 +44,36 @@ describe("resolveViewedContractId", () => {
     expect(resolveViewedContractId(contracts, undefined)).toBe("contract-b");
   });
 });
+
+describe("pluralSuffixArgs", () => {
+  it("returns no suffix for one item", () => {
+    expect(pluralSuffixArgs(1)).toEqual([1, ""]);
+  });
+
+  it("returns an 's' suffix for zero or many items", () => {
+    expect(pluralSuffixArgs(0)).toEqual([0, "s"]);
+    expect(pluralSuffixArgs(3)).toEqual([3, "s"]);
+  });
+});
+
+describe("buildRemovedRedirectUrl", () => {
+  it("points at the unit's listing with the removed count", () => {
+    expect(buildRemovedRedirectUrl("unit-1", 2)).toBe(
+      "/pvt/organization-account/contracts/unit-1?removed=2"
+    );
+  });
+});
+
+describe("parseRemovedCount", () => {
+  it("parses a positive integer", () => {
+    expect(parseRemovedCount("3")).toBe(3);
+    expect(parseRemovedCount(["2", "9"])).toBe(2);
+  });
+
+  it("rejects missing, zero, negative or non-numeric values", () => {
+    expect(parseRemovedCount(undefined)).toBeNull();
+    expect(parseRemovedCount("0")).toBeNull();
+    expect(parseRemovedCount("-1")).toBeNull();
+    expect(parseRemovedCount("abc")).toBeNull();
+  });
+});

package/src/features/contracts/layouts/ContractListingLayout/contract-listing-layout.scss

@@ -101,7 +101,7 @@
   }
 
   // Match old [data-fs-bp-sidebar-menu] typography and colors
-  &[data-fs-bp-suma-sidebar-variant="full"] {
+  &[data-fs-bp-suma-sidebar-variant="contract"] {
     [data-fs-vertical-nav-menu] {
       margin-bottom: var(--fs-bp-padding-5);
 
@@ -137,7 +137,7 @@
     }
   }
 
-  &[data-fs-bp-suma-sidebar-variant="listing"] {
+  &[data-fs-bp-suma-sidebar-variant="unit"] {
     [data-fs-vertical-nav-menu-list] {
       margin-top: var(--fs-bp-margin-0);
       @include text-style("emphasis");
@@ -420,6 +420,14 @@
       background-color: #f5f5f5;
     }
 
+    &[data-fs-bp-contract-list-item-skeleton] {
+      cursor: default;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
     &[data-fs-bp-contract-list-item-selected] {
       background-color: #f0f7ff;