@carlonicora/nextjs-jsonapi 1.36.0 → 1.37.0

package/src/components/forms/__tests__/FormSelect.test.tsx

@@ -36,7 +36,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "" }}>
           {(form) => <FormSelect form={form} id="status" values={mockValues} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByRole("combobox")).toBeInTheDocument();
@@ -46,7 +46,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "" }}>
           {(form) => <FormSelect form={form} id="status" name="Status" values={mockValues} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByText("Status")).toBeInTheDocument();
@@ -56,10 +56,8 @@ describe.skip("FormSelect", () => {
     it("should render placeholder", () => {
       render(
         <FormWrapper defaultValues={{ status: "" }}>
-          {(form) => (
-            <FormSelect form={form} id="status" values={mockValues} placeholder="Select an option" />
-          )}
-        </FormWrapper>
+          {(form) => <FormSelect form={form} id="status" values={mockValues} placeholder="Select an option" />}
+        </FormWrapper>,
       );
 
       expect(screen.getByText("Select an option")).toBeInTheDocument();
@@ -69,7 +67,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "option2" }}>
           {(form) => <FormSelect form={form} id="status" values={mockValues} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByRole("combobox")).toHaveTextContent("Option 2");
@@ -81,10 +79,8 @@ describe.skip("FormSelect", () => {
       // Just verify it renders without error with useRows
       render(
         <FormWrapper defaultValues={{ status: "" }}>
-          {(form) => (
-            <FormSelect form={form} id="status" name="Status" values={mockValues} useRows={true} />
-          )}
-        </FormWrapper>
+          {(form) => <FormSelect form={form} id="status" name="Status" values={mockValues} useRows={true} />}
+        </FormWrapper>,
       );
 
       expect(screen.getByRole("combobox")).toBeInTheDocument();
@@ -94,10 +90,8 @@ describe.skip("FormSelect", () => {
     it("should render label with row layout styling when useRows is true", () => {
       const { container } = render(
         <FormWrapper defaultValues={{ status: "" }}>
-          {(form) => (
-            <FormSelect form={form} id="status" name="Status" values={mockValues} useRows={true} />
-          )}
-        </FormWrapper>
+          {(form) => <FormSelect form={form} id="status" name="Status" values={mockValues} useRows={true} />}
+        </FormWrapper>,
       );
 
       // The label should have min-w-28 class when useRows is true
@@ -111,7 +105,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "" }}>
           {(form) => <FormSelect form={form} id="status" values={mockValues} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const trigger = screen.getByRole("combobox");
@@ -124,7 +118,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "" }}>
           {(form) => <FormSelect form={form} id="status" values={[]} placeholder="Select" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByRole("combobox")).toBeInTheDocument();
@@ -134,7 +128,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "" }}>
           {(form) => <FormSelect form={form} id="status" values={mockValues} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const combobox = screen.getByRole("combobox");
@@ -145,7 +139,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "option1" }}>
           {(form) => <FormSelect form={form} id="status" values={mockValues} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByRole("combobox")).toHaveTextContent("Option 1");
@@ -155,7 +149,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "option3" }}>
           {(form) => <FormSelect form={form} id="status" values={mockValues} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByRole("combobox")).toHaveTextContent("Option 3");
@@ -167,7 +161,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "" }}>
           {(form) => <FormSelect form={form} id="status" values={mockValues} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const combobox = screen.getByRole("combobox");

package/src/components/tables/ContentListTable.tsx

@@ -33,7 +33,7 @@ type ContentListTableProps = {
 };
 
 export const ContentListTable = memo(function ContentListTable(props: ContentListTableProps) {
-  const { data, fields, checkedIds, toggleId, allowSearch, filters } = props;
+  const { data, fields, checkedIds, toggleId, allowSearch, filters: _filters } = props;
 
   const { data: tableData, columns: tableColumns } = useTableGenerator(props.tableGeneratorType, {
     data: data?.data ?? EMPTY_ARRAY,

package/src/components/tables/__tests__/ContentListTable.test.tsx

@@ -75,13 +75,7 @@ describe("ContentListTable", () => {
         ],
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       expect(screen.getByRole("table")).toBeInTheDocument();
     });
@@ -97,7 +91,7 @@ describe("ContentListTable", () => {
           tableGeneratorType={mockModule as any}
           fields={["id", "title"]}
           title="Articles"
-        />
+        />,
       );
 
       expect(screen.getByText("Articles")).toBeInTheDocument();
@@ -108,13 +102,7 @@ describe("ContentListTable", () => {
         data: [{ id: "1", title: "Article 1" }],
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       expect(screen.getByText("ID")).toBeInTheDocument();
       expect(screen.getByText("Title")).toBeInTheDocument();
@@ -128,13 +116,7 @@ describe("ContentListTable", () => {
         ],
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       expect(screen.getByText("1")).toBeInTheDocument();
       expect(screen.getByText("First Article")).toBeInTheDocument();
@@ -147,13 +129,7 @@ describe("ContentListTable", () => {
         data: [],
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       expect(screen.getByText("No results.")).toBeInTheDocument();
     });
@@ -172,7 +148,7 @@ describe("ContentListTable", () => {
           fields={["id", "title"]}
           title="Articles"
           allowSearch={true}
-        />
+        />,
       );
 
       expect(screen.getByTestId("content-table-search")).toBeInTheDocument();
@@ -187,13 +163,7 @@ describe("ContentListTable", () => {
         previous: vi.fn(),
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       // Should have navigation buttons
       const buttons = screen.getAllByRole("button");
@@ -207,13 +177,7 @@ describe("ContentListTable", () => {
         previous: undefined,
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       const buttons = screen.getAllByRole("button");
       const previousButton = buttons[0];
@@ -227,13 +191,7 @@ describe("ContentListTable", () => {
         previous: vi.fn(),
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       const buttons = screen.getAllByRole("button");
       const nextButton = buttons[buttons.length - 1];
@@ -249,13 +207,7 @@ describe("ContentListTable", () => {
         next: nextFn,
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       const buttons = screen.getAllByRole("button");
       const nextButton = buttons[buttons.length - 1];
@@ -274,13 +226,7 @@ describe("ContentListTable", () => {
         next: vi.fn(), // Need both to show footer
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       const buttons = screen.getAllByRole("button");
       const previousButton = buttons[0];
@@ -300,13 +246,7 @@ describe("ContentListTable", () => {
         },
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       expect(screen.getByText("1-25")).toBeInTheDocument();
     });
@@ -325,7 +265,7 @@ describe("ContentListTable", () => {
           fields={["id", "title"]}
           title="Articles"
           functions={<button data-testid="custom-function">Custom</button>}
-        />
+        />,
       );
 
       expect(screen.getByTestId("custom-function")).toBeInTheDocument();
@@ -343,7 +283,7 @@ describe("ContentListTable", () => {
           fields={["id", "title"]}
           title="Articles"
           filters={<div data-testid="custom-filter">Filter</div>}
-        />
+        />,
       );
 
       expect(screen.getByTestId("custom-filter")).toBeInTheDocument();
@@ -362,7 +302,7 @@ describe("ContentListTable", () => {
           tableGeneratorType={mockModule as any}
           fields={["id", "title"]}
           functions={<button>Action</button>}
-        />
+        />,
       );
 
       // Footer should be present with buttons
@@ -376,13 +316,7 @@ describe("ContentListTable", () => {
         next: vi.fn(),
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       // Should have navigation buttons in footer
       const buttons = screen.getAllByRole("button");
@@ -395,13 +329,7 @@ describe("ContentListTable", () => {
         previous: vi.fn(),
       });
 
-      render(
-        <ContentListTable
-          data={dataRetriever}
-          tableGeneratorType={mockModule as any}
-          fields={["id", "title"]}
-        />
-      );
+      render(<ContentListTable data={dataRetriever} tableGeneratorType={mockModule as any} fields={["id", "title"]} />);
 
       // Should have navigation buttons in footer
       const buttons = screen.getAllByRole("button");

package/src/components/tables/cells/cell.component.tsx

@@ -11,7 +11,7 @@ export const cellComponent = (params: {
     id: params.name,
     accessorKey: params.name,
     header: params.title,
-    cell: ({ row }) => params.component,
+    cell: ({ row: _row }) => params.component,
     enableSorting: false,
     enableHiding: false,
   };

package/src/contexts/HeaderChildrenContext.tsx

@@ -20,7 +20,9 @@ interface HeaderChildrenProviderProps {
  * Wrap your layout with this provider and pass the content you want in the header.
  */
 export function HeaderChildrenProvider({ children, content }: HeaderChildrenProviderProps) {
-  return <HeaderChildrenContext.Provider value={{ headerChildren: content }}>{children}</HeaderChildrenContext.Provider>;
+  return (
+    <HeaderChildrenContext.Provider value={{ headerChildren: content }}>{children}</HeaderChildrenContext.Provider>
+  );
 }
 
 /**

package/src/core/endpoint/__tests__/EndpointCreator.test.ts

@@ -74,10 +74,7 @@ describe("EndpointCreator", () => {
     });
 
     it("should support full fluent chain", () => {
-      const creator = new EndpointCreator({ endpoint: "articles" })
-        .id("123")
-        .childEndpoint("comments")
-        .childId("456");
+      const creator = new EndpointCreator({ endpoint: "articles" }).id("123").childEndpoint("comments").childId("456");
       expect(creator.generate()).toBe("articles/123/comments/456");
     });
   });
@@ -141,9 +138,7 @@ describe("EndpointCreator", () => {
         { type: "articles", fields: ["title", "body"] },
         { type: "authors", fields: ["name", "email"] },
       ]);
-      expect(creator.generate()).toBe(
-        "articles?fields[articles]=title,body&fields[authors]=name,email"
-      );
+      expect(creator.generate()).toBe("articles?fields[articles]=title,body&fields[authors]=name,email");
     });
 
     it("should handle empty selectors array", () => {

package/src/core/factories/__tests__/JsonApiDataFactory.test.ts

@@ -74,9 +74,9 @@ describe("JsonApiDataFactory", () => {
     it("should throw for unregistered module", () => {
       const unregisteredModule = { name: "unknown", model: MockDataClass };
 
-      expect(() =>
-        JsonApiDataFactory.create(unregisteredModule as any, { data: "test" })
-      ).toThrow("Class not registered for key: unknown");
+      expect(() => JsonApiDataFactory.create(unregisteredModule as any, { data: "test" })).toThrow(
+        "Class not registered for key: unknown",
+      );
     });
 
     it("should handle empty data", () => {

package/src/core/factories/__tests__/RehydrationFactory.test.ts

@@ -72,9 +72,9 @@ describe("RehydrationFactory", () => {
         included: [],
       };
 
-      expect(() =>
-        RehydrationFactory.rehydrate(unregisteredModule as any, hydratedData)
-      ).toThrow("Class not registered for key: unknown");
+      expect(() => RehydrationFactory.rehydrate(unregisteredModule as any, hydratedData)).toThrow(
+        "Class not registered for key: unknown",
+      );
     });
 
     it("should create a new instance for rehydration", () => {
@@ -128,9 +128,7 @@ describe("RehydrationFactory", () => {
       const unregisteredModule = { name: "unknown", model: MockDataClass };
 
       expect(() =>
-        RehydrationFactory.rehydrateList(unregisteredModule as any, [
-          { jsonApi: {}, included: [] },
-        ])
+        RehydrationFactory.rehydrateList(unregisteredModule as any, [{ jsonApi: {}, included: [] }]),
       ).toThrow("Class not registered for key: unknown");
     });
 

package/src/core/registry/__tests__/DataClassRegistry.test.ts

@@ -67,9 +67,7 @@ describe("DataClassRegistry", () => {
 
     it("should throw for unregistered class", () => {
       const module = createMockModule({ name: "unknown" });
-      expect(() => DataClassRegistry.get(module)).toThrow(
-        "Class not registered for key: unknown"
-      );
+      expect(() => DataClassRegistry.get(module)).toThrow("Class not registered for key: unknown");
     });
   });
 
@@ -88,12 +86,8 @@ describe("DataClassRegistry", () => {
 
       DataClassRegistry.bootstrap(modules as any);
 
-      expect(() =>
-        DataClassRegistry.get({ name: "articles", model: MockArticle } as any)
-      ).not.toThrow();
-      expect(() =>
-        DataClassRegistry.get({ name: "users", model: MockArticle } as any)
-      ).not.toThrow();
+      expect(() => DataClassRegistry.get({ name: "articles", model: MockArticle } as any)).not.toThrow();
+      expect(() => DataClassRegistry.get({ name: "users", model: MockArticle } as any)).not.toThrow();
     });
 
     it("should skip modules without model", () => {
@@ -110,12 +104,8 @@ describe("DataClassRegistry", () => {
 
       DataClassRegistry.bootstrap(modules as any);
 
-      expect(() =>
-        DataClassRegistry.get({ name: "articles", model: MockArticle } as any)
-      ).not.toThrow();
-      expect(() =>
-        DataClassRegistry.get({ name: "invalid", model: null } as any)
-      ).toThrow();
+      expect(() => DataClassRegistry.get({ name: "articles", model: MockArticle } as any)).not.toThrow();
+      expect(() => DataClassRegistry.get({ name: "invalid", model: null } as any)).toThrow();
     });
   });
 

package/src/core/registry/__tests__/ModuleRegistrar.test.ts

@@ -98,12 +98,8 @@ describe("ModuleRegistrar", () => {
       ModuleRegistrar.bootstrap(MockModules);
 
       // Should be able to get registered classes
-      expect(() =>
-        DataClassRegistry.get({ name: "users", model: MockUser } as any)
-      ).not.toThrow();
-      expect(() =>
-        DataClassRegistry.get({ name: "articles", model: MockArticle } as any)
-      ).not.toThrow();
+      expect(() => DataClassRegistry.get({ name: "users", model: MockUser } as any)).not.toThrow();
+      expect(() => DataClassRegistry.get({ name: "articles", model: MockArticle } as any)).not.toThrow();
     });
 
     it("should only bootstrap once", () => {
@@ -114,9 +110,7 @@ describe("ModuleRegistrar", () => {
       ModuleRegistrar.bootstrap(MockModules);
 
       // Registry should still be empty because second bootstrap was skipped
-      expect(() =>
-        DataClassRegistry.get({ name: "users", model: MockUser } as any)
-      ).toThrow();
+      expect(() => DataClassRegistry.get({ name: "users", model: MockUser } as any)).toThrow();
     });
 
     it("should handle class without model property", () => {
@@ -141,9 +135,7 @@ describe("ModuleRegistrar", () => {
       // Can bootstrap again after reset
       ModuleRegistrar.bootstrap(MockModules);
 
-      expect(() =>
-        DataClassRegistry.get({ name: "users", model: MockUser } as any)
-      ).not.toThrow();
+      expect(() => DataClassRegistry.get({ name: "users", model: MockUser } as any)).not.toThrow();
     });
 
     it("should clear the registry", () => {
@@ -151,9 +143,7 @@ describe("ModuleRegistrar", () => {
       ModuleRegistrar.reset();
 
       // Registry should be cleared
-      expect(() =>
-        DataClassRegistry.get({ name: "users", model: MockUser } as any)
-      ).toThrow();
+      expect(() => DataClassRegistry.get({ name: "users", model: MockUser } as any)).toThrow();
     });
   });
 });

package/src/features/auth/components/GdprConsentSection.tsx

@@ -33,12 +33,7 @@ export function GdprConsentSection<T extends FieldValues>({
 
   return (
     <div className="space-y-4 py-4">
-      <GdprConsentCheckbox
-        form={form}
-        id={termsCheckboxId}
-        label={termsLabel}
-        required
-      />
+      <GdprConsentCheckbox form={form} id={termsCheckboxId} label={termsLabel} required />
       <GdprConsentCheckbox
         form={form}
         id={marketingCheckboxId}

package/src/features/auth/components/details/LandingComponent.tsx

@@ -3,7 +3,12 @@
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { getApiUrl } from "../../../../client/config";
-import { isDiscordAuthEnabled, isGoogleAuthEnabled, isInternalAuthEnabled, isRegistrationAllowed } from "../../../../login";
+import {
+  isDiscordAuthEnabled,
+  isGoogleAuthEnabled,
+  isInternalAuthEnabled,
+  isRegistrationAllowed,
+} from "../../../../login";
 import { Button, CardDescription, CardFooter, CardHeader, CardTitle, Link } from "../../../../shadcnui";
 import { useAuthContext } from "../../contexts";
 import { AuthComponent } from "../../enums";

package/src/features/auth/components/forms/AcceptInvitation.tsx

@@ -82,7 +82,7 @@ export function AcceptInvitation() {
         setComponentType(AuthComponent.Login);
         setParams(undefined);
       }, 2000);
-    } catch (e) {
+    } catch (_e) {
       errorToast({ title: t(`common.errors.error`), error });
     }
   };

package/src/features/auth/components/forms/ResetPassword.tsx

@@ -82,7 +82,7 @@ export function ResetPassword() {
         setComponentType(AuthComponent.Login);
         setParams(undefined);
       }, 2000);
-    } catch (e) {
+    } catch (_e) {
       errorToast({ title: t(`common.errors.error`), error });
     }
   };

package/src/features/billing/components/cards/PaymentMethodSummaryCard.tsx

@@ -1,14 +1,7 @@
 "use client";
 
 import { Wallet, ChevronRight } from "lucide-react";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Button,
-  Skeleton,
-} from "../../../../shadcnui";
+import { Card, CardContent, CardHeader, CardTitle, Button, Skeleton } from "../../../../shadcnui";
 import { PaymentMethodInterface } from "../../stripe-customer";
 
 type PaymentMethodSummaryCardProps = {
@@ -81,10 +74,16 @@ export function PaymentMethodSummaryCard({
         {paymentMethods.length === 0 ? (
           <div className="space-y-2">
             <p className="text-xl font-bold text-muted-foreground">No payment method</p>
-            <p className="text-xs text-muted-foreground">
-              Add a card to enable subscriptions
-            </p>
-            <Button variant="outline" size="sm" className="mt-2" onClick={(e) => { e.stopPropagation(); onManageClick(); }}>
+            <p className="text-xs text-muted-foreground">Add a card to enable subscriptions</p>
+            <Button
+              variant="outline"
+              size="sm"
+              className="mt-2"
+              onClick={(e) => {
+                e.stopPropagation();
+                onManageClick();
+              }}
+            >
               Add Card
               <ChevronRight className="h-4 w-4 ml-1" />
             </Button>
@@ -98,18 +97,14 @@ export function PaymentMethodSummaryCard({
               Expires {String(defaultMethod.card.expMonth).padStart(2, "0")}/{defaultMethod.card.expYear}
             </p>
             {paymentMethods.length > 1 && (
-              <p className="text-xs text-muted-foreground">
-                +{paymentMethods.length - 1} more card(s)
-              </p>
+              <p className="text-xs text-muted-foreground">+{paymentMethods.length - 1} more card(s)</p>
             )}
           </div>
         ) : (
           <div className="space-y-2">
             <p className="text-xl font-bold">{defaultMethod?.type || "Payment Method"}</p>
             {paymentMethods.length > 1 && (
-              <p className="text-xs text-muted-foreground">
-                +{paymentMethods.length - 1} more method(s)
-              </p>
+              <p className="text-xs text-muted-foreground">+{paymentMethods.length - 1} more method(s)</p>
             )}
           </div>
         )}

package/src/features/billing/components/cards/SubscriptionSummaryCard.tsx

@@ -122,7 +122,13 @@ export function SubscriptionSummaryCard({
           <div className="space-y-2">
             <div className="flex items-center gap-2">
               <p className="text-xl font-bold">{formatPlanName(primarySubscription)}</p>
-              <Badge variant={primarySubscription.cancelAtPeriodEnd ? "secondary" : getStatusBadgeVariant(primarySubscription.status)}>
+              <Badge
+                variant={
+                  primarySubscription.cancelAtPeriodEnd
+                    ? "secondary"
+                    : getStatusBadgeVariant(primarySubscription.status)
+                }
+              >
                 {primarySubscription.cancelAtPeriodEnd ? "Canceling" : primarySubscription.status}
               </Badge>
             </div>