import { Inbox } from "@novu/react";

function App() {
  return (
    <Inbox
      applicationIdentifier={process.env.REACT_APP_NOVU_APP_ID!}
      subscriberId="subscriber-123"
      subscriberHash="hmac-hash"
    />
  );
}

import { Inbox, Preferences } from "@novu/react";

function PreferencesPage() {
  return (
    <Inbox
      applicationIdentifier={process.env.REACT_APP_NOVU_APP_ID!}
      subscriberId="subscriber-123"
      subscriberHash="hmac-hash"
    >
      <Preferences />
    </Inbox>
  );
}

<Inbox
  applicationIdentifier={process.env.REACT_APP_NOVU_APP_ID!}
  subscriberId="subscriber-123"
  preferencesFilter={{
    tags: ["marketing"],  // only show workflows tagged "marketing"
  }}
/>

<Inbox
  applicationIdentifier={process.env.REACT_APP_NOVU_APP_ID!}
  subscriberId="subscriber-123"
  preferenceGroups={[
    {
      name: "Account",
      filter: { tags: ["account"] },
    },
    {
      name: "Marketing",
      filter: { tags: ["marketing"] },
    },
    {
      name: "Activity",
      filter: { tags: ["activity"] },
    },
  ]}
/>

import { Novu } from "@novu/js";

const novu = new Novu({
  applicationIdentifier: "YOUR_NOVU_APP_ID",
  subscriberId: "subscriber-123",
  subscriberHash: "hmac-hash",
});

// Fetch all preferences
const { data: preferences } = await novu.preferences.list();

// Render custom UI
preferences.forEach((pref) => {
  console.log(`Workflow: ${pref.workflow.name}`);
  console.log(`  Email: ${pref.channels.email}`);
  console.log(`  SMS: ${pref.channels.sms}`);
  console.log(`  Push: ${pref.channels.push}`);
  console.log(`  In-App: ${pref.channels.inApp}`);
  console.log(`  Chat: ${pref.channels.chat}`);
});

// Toggle a preference

preferences?.[1]?.update({
  channels: { email: true, push: true },
});

// components/PreferencesPanel.tsx
"use client";

import { Inbox, Preferences } from "@novu/nextjs";

export function PreferencesPanel({
  subscriberId,
  subscriberHash,
}: {
  subscriberId: string;
  subscriberHash: string;
}) {
  return (
    <Inbox
      applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_ID!}
      subscriberId={subscriberId}
      subscriberHash={subscriberHash}
    >
      <Preferences />
    </Inbox>
  );
}