novalab-admin-noti-sdk 0.1.0

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "novalab-admin-noti-sdk",
+  "version": "0.1.0",
+  "description": "Nhúng UI quản lý push notification (client admin) vào ứng dụng React",
+  "type": "module",
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "axios": "^1.13.5",
+    "lucide-react": "^0.575.0"
+  },
+  "sideEffects": false
+}

package/src/AdminNotificationsPanel.jsx

@@ -0,0 +1,603 @@
+import { createContext, useContext, useMemo, useState } from 'react';
+import { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Bell, Radio, FileText, ToggleLeft, ToggleRight, Plus, Pencil } from 'lucide-react';
+import { createAdminNotiApi } from './createAdminNotiApi.js';
+
+const QK = {
+  channels: ['@gamifyengine/admin-noti', 'channels'],
+  templates: ['@gamifyengine/admin-noti', 'notification-templates'],
+};
+
+const AdminNotiContext = createContext(null);
+
+function useAdminNoti() {
+  const ctx = useContext(AdminNotiContext);
+  if (!ctx) throw new Error('AdminNotificationsPanel must be used inside AdminNotiSdkProvider');
+  return ctx;
+}
+
+const TYPES = ['info', 'reward', 'promo', 'system'];
+const TYPE_COLORS = {
+  info: 'bg-cyan-900/40 text-cyan-400 border-cyan-800',
+  reward: 'bg-yellow-900/40 text-yellow-400 border-yellow-800',
+  promo: 'bg-pink-900/40 text-pink-400 border-pink-800',
+  system: 'bg-purple-900/40 text-purple-400 border-purple-800',
+};
+const TITLE_MAX = 60;
+const MSG_MAX = 200;
+
+function PreviewCard({ title, message, type }) {
+  return (
+    <div className="rounded-xl border border-gray-700 bg-gray-800/60 p-4">
+      <p className="mb-3 text-[10px] font-semibold uppercase tracking-widest text-gray-500">Preview</p>
+      <div
+        className={`flex gap-3 rounded-lg border p-3 ${TYPE_COLORS[type] ?? TYPE_COLORS.info}`}
+      >
+        <Bell className="mt-0.5 h-5 w-5 shrink-0" />
+        <div className="min-w-0">
+          <p className="truncate text-sm font-semibold">
+            {title || <span className="opacity-40">Title…</span>}
+          </p>
+          {message && <p className="mt-0.5 line-clamp-2 text-xs opacity-70">{message}</p>}
+          <p className="mt-1 text-[10px] opacity-40">just now</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SendTab() {
+  const { adminApi, onToast } = useAdminNoti();
+  const [title, setTitle] = useState('');
+  const [message, setMessage] = useState('');
+  const [type, setType] = useState('info');
+  const [target, setTarget] = useState('all');
+  const [targetUserId, setTargetUserId] = useState('');
+  const [sending, setSending] = useState(false);
+
+  const titleValid = title.trim().length > 0 && title.length <= TITLE_MAX;
+  const msgValid = message.trim().length > 0 && message.length <= MSG_MAX;
+  const canSubmit = titleValid && msgValid && !sending;
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (!canSubmit) return;
+    setSending(true);
+    try {
+      const body = {
+        title: title.trim(),
+        message: message.trim(),
+        type,
+        ...(target === 'user' && targetUserId.trim() ? { userId: targetUserId.trim() } : {}),
+      };
+      const res = await adminApi.notifications.push(body);
+      const sent = res?.data?.sent ?? 1;
+      onToast({
+        title: 'Notification sent',
+        message: `Delivered to ${sent} user${sent !== 1 ? 's' : ''}.`,
+        variant: 'success',
+      });
+      setTitle('');
+      setMessage('');
+      setType('info');
+      setTarget('all');
+      setTargetUserId('');
+    } catch (err) {
+      onToast({
+        title: 'Send failed',
+        message: err?.message || 'Unknown error',
+        variant: 'error',
+      });
+    } finally {
+      setSending(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} noValidate className="max-w-2xl space-y-5">
+      <div>
+        <div className="mb-1.5 flex items-center justify-between">
+          <label className="text-xs font-semibold uppercase tracking-wider text-gray-400">Title</label>
+          <span className={`text-xs ${title.length > TITLE_MAX ? 'text-red-400' : 'text-gray-600'}`}>
+            {title.length}/{TITLE_MAX}
+          </span>
+        </div>
+        <input
+          type="text"
+          value={title}
+          maxLength={TITLE_MAX}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="Notification title"
+          className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          required
+        />
+      </div>
+
+      <div>
+        <div className="mb-1.5 flex items-center justify-between">
+          <label className="text-xs font-semibold uppercase tracking-wider text-gray-400">Message</label>
+          <span className={`text-xs ${message.length > MSG_MAX ? 'text-red-400' : 'text-gray-600'}`}>
+            {message.length}/{MSG_MAX}
+          </span>
+        </div>
+        <textarea
+          value={message}
+          maxLength={MSG_MAX}
+          rows={3}
+          onChange={(e) => setMessage(e.target.value)}
+          placeholder="Notification message body"
+          className="w-full resize-y rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          required
+        />
+      </div>
+
+      <div>
+        <label className="mb-2 block text-xs font-semibold uppercase tracking-wider text-gray-400">
+          Type
+        </label>
+        <div className="flex flex-wrap gap-2">
+          {TYPES.map((t) => (
+            <button
+              key={t}
+              type="button"
+              onClick={() => setType(t)}
+              className={`rounded-full border px-3 py-1.5 text-xs font-semibold capitalize transition-all ${
+                type === t
+                  ? TYPE_COLORS[t]
+                  : 'border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-600 hover:text-gray-300'
+              }`}
+            >
+              {t}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <label className="mb-2 block text-xs font-semibold uppercase tracking-wider text-gray-400">
+          Target
+        </label>
+        <div className="mb-2 flex gap-4">
+          {[
+            { value: 'all', label: 'All users' },
+            { value: 'user', label: 'Specific user' },
+          ].map((opt) => (
+            <label key={opt.value} className="flex cursor-pointer items-center gap-2 text-sm text-gray-300">
+              <input
+                type="radio"
+                name="target"
+                value={opt.value}
+                checked={target === opt.value}
+                onChange={() => setTarget(opt.value)}
+                className="accent-indigo-500"
+              />
+              {opt.label}
+            </label>
+          ))}
+        </div>
+        {target === 'user' && (
+          <input
+            type="text"
+            value={targetUserId}
+            onChange={(e) => setTargetUserId(e.target.value)}
+            placeholder="User ID (UUID)"
+            className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          />
+        )}
+      </div>
+
+      <PreviewCard title={title} message={message} type={type} />
+
+      <button
+        type="submit"
+        disabled={!canSubmit}
+        className="flex w-full items-center justify-center gap-2 rounded-lg bg-indigo-600 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <Bell className="h-4 w-4" />
+        {sending ? 'Sending…' : 'Send notification'}
+      </button>
+    </form>
+  );
+}
+
+const CHANNEL_LABELS = {
+  in_app: 'In-App',
+  email: 'Email',
+  sms: 'SMS',
+  push: 'Push',
+  webhook: 'Webhook',
+};
+
+const AVAILABLE_CHANNELS = ['in_app'];
+
+function ChannelsTab() {
+  const { adminApi, onToast } = useAdminNoti();
+  const queryClient = useQueryClient();
+
+  const { data: channelsResponse, isLoading } = useQuery({
+    queryKey: QK.channels,
+    queryFn: () => adminApi.channels.list(),
+  });
+
+  const channels = channelsResponse?.data ?? [];
+
+  const toggleMutation = useMutation({
+    mutationFn: ({ id, isEnabled, channelType }) =>
+      id
+        ? adminApi.channels.update(id, { isEnabled })
+        : adminApi.channels.create({ channelType, isEnabled }),
+    onSuccess: (res, vars) => {
+      queryClient.setQueryData(QK.channels, (old) => {
+        if (!old) return old;
+        const updatedConfig = res?.data ?? res;
+        const list = old?.data ?? [];
+        const exists = list.find((c) => c.channelType === vars.channelType);
+        const newList = exists
+          ? list.map((c) =>
+              c.channelType === vars.channelType
+                ? { ...c, ...updatedConfig, isEnabled: vars.isEnabled }
+                : c
+            )
+          : [...list, { ...updatedConfig, isEnabled: vars.isEnabled }];
+        return { ...old, data: newList };
+      });
+      queryClient.invalidateQueries({ queryKey: QK.channels });
+      onToast({
+        title: 'Channel updated',
+        message: `${CHANNEL_LABELS[vars.channelType]} channel ${vars.isEnabled ? 'enabled' : 'disabled'}.`,
+        variant: 'success',
+      });
+    },
+    onError: (err) => {
+      onToast({
+        title: 'Update failed',
+        message: err?.message || 'Error',
+        variant: 'error',
+      });
+    },
+  });
+
+  function handleToggle(channelType) {
+    const existing = channels.find((c) => c.channelType === channelType);
+    const currentEnabled = existing?.isEnabled ?? false;
+    toggleMutation.mutate({
+      id: existing?.id,
+      channelType,
+      isEnabled: !currentEnabled,
+    });
+  }
+
+  if (isLoading) {
+    return <p className="text-sm text-gray-500">Loading channels…</p>;
+  }
+
+  return (
+    <div className="max-w-2xl space-y-3">
+      <p className="mb-4 text-xs text-gray-500">
+        Enable channels to allow the system to deliver automatic notifications (points earned, tier
+        upgrades, achievements, etc.) to users.
+      </p>
+      {AVAILABLE_CHANNELS.map((channelType) => {
+        const existing = channels.find((c) => c.channelType === channelType);
+        const isEnabled = existing?.isEnabled ?? false;
+        const isSaving = toggleMutation.isPending && toggleMutation.variables?.channelType === channelType;
+
+        return (
+          <div
+            key={channelType}
+            className="flex items-center justify-between rounded-xl border border-gray-700 bg-gray-800/60 px-4 py-3"
+          >
+            <div>
+              <p className="text-sm font-semibold text-white">{CHANNEL_LABELS[channelType]}</p>
+              <p className="mt-0.5 text-xs text-gray-500">
+                {isEnabled ? 'Active — notifications will be delivered' : 'Disabled'}
+              </p>
+            </div>
+            <button
+              type="button"
+              disabled={isSaving}
+              onClick={() => handleToggle(channelType)}
+              className="transition-opacity disabled:opacity-50"
+              title={isEnabled ? 'Disable' : 'Enable'}
+            >
+              {isEnabled ? (
+                <ToggleRight className="h-8 w-8 text-indigo-400" />
+              ) : (
+                <ToggleLeft className="h-8 w-8 text-gray-600" />
+              )}
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+const AUTO_EVENT_TYPES = [
+  { type: 'points_earned', label: 'Points earned', vars: ['{{points}}', '{{currency}}', '{{balance}}'] },
+  { type: 'tier_upgrade', label: 'Tier upgrade', vars: ['{{tier_name}}', '{{points}}'] },
+  { type: 'tier_downgrade', label: 'Tier downgrade', vars: ['{{tier_name}}', '{{points}}'] },
+  { type: 'achievement_unlocked', label: 'Achievement unlocked', vars: ['{{achievement_name}}', '{{points}}'] },
+  { type: 'reward_redeemed', label: 'Reward redeemed', vars: ['{{reward_name}}', '{{points_cost}}'] },
+];
+
+const TEMPLATE_DEFAULTS = {
+  points_earned: { title: 'Points earned!', body: 'You earned {{points}} {{currency}}. Balance: {{balance}}.' },
+  tier_upgrade: { title: 'Tier upgrade!', body: 'You reached {{tier_name}}!' },
+  tier_downgrade: { title: 'Tier update', body: 'Your tier changed to {{tier_name}}.' },
+  achievement_unlocked: { title: 'Achievement unlocked!', body: '{{achievement_name}} — {{points}} pts.' },
+  reward_redeemed: { title: 'Reward redeemed', body: '{{reward_name}} redeemed for {{points_cost}} pts.' },
+};
+
+function TemplateRow({ eventDef, existing, onSave }) {
+  const [open, setOpen] = useState(false);
+  const [tplTitle, setTplTitle] = useState('');
+  const [body, setBody] = useState('');
+
+  function openEdit() {
+    const tpl = existing?.channels?.in_app;
+    setTplTitle(tpl?.title ?? TEMPLATE_DEFAULTS[eventDef.type]?.title ?? '');
+    setBody(tpl?.body ?? tpl?.message ?? TEMPLATE_DEFAULTS[eventDef.type]?.body ?? '');
+    setOpen(true);
+  }
+
+  function handleSave() {
+    onSave({ notificationType: eventDef.type, id: existing?.id, title: tplTitle.trim(), body: body.trim() });
+    setOpen(false);
+  }
+
+  const isActive = existing?.isActive !== false && existing;
+
+  return (
+    <div className="rounded-xl border border-gray-700 bg-gray-800/60 p-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-semibold text-white">{eventDef.label}</p>
+          <p className="mt-0.5 font-mono text-[10px] text-gray-500">{eventDef.type}</p>
+          {isActive && (
+            <p className="mt-1 max-w-xs truncate text-xs text-gray-400">
+              {existing.channels?.in_app?.title || existing.channels?.in_app?.body || '—'}
+            </p>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <span
+            className={`rounded-full border px-2 py-0.5 text-[10px] font-semibold ${
+              isActive
+                ? 'border-green-800 bg-green-900/40 text-green-400'
+                : 'border-gray-700 bg-gray-800 text-gray-500'
+            }`}
+          >
+            {isActive ? 'active' : 'not set'}
+          </span>
+          <button
+            type="button"
+            onClick={openEdit}
+            className="rounded-lg bg-gray-700 p-1.5 text-gray-300 transition-colors hover:bg-gray-600"
+            title="Edit template"
+          >
+            {existing ? <Pencil className="h-3.5 w-3.5" /> : <Plus className="h-3.5 w-3.5" />}
+          </button>
+        </div>
+      </div>
+
+      {open && (
+        <div className="mt-4 space-y-3 border-t border-gray-700 pt-4">
+          <div className="mb-1 flex flex-wrap gap-1">
+            {eventDef.vars.map((v) => (
+              <span key={v} className="rounded bg-gray-700 px-1.5 py-0.5 font-mono text-[10px] text-gray-300">
+                {v}
+              </span>
+            ))}
+          </div>
+          <div>
+            <label className="mb-1 block text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+              Title
+            </label>
+            <input
+              type="text"
+              value={tplTitle}
+              onChange={(e) => setTplTitle(e.target.value)}
+              placeholder="Notification title"
+              className="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-1.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+              Body
+            </label>
+            <textarea
+              value={body}
+              rows={2}
+              onChange={(e) => setBody(e.target.value)}
+              placeholder="Notification body"
+              className="w-full resize-y rounded-lg border border-gray-700 bg-gray-900 px-3 py-1.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            />
+          </div>
+          <div className="flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => setOpen(false)}
+              className="px-3 py-1.5 text-xs text-gray-400 transition-colors hover:text-white"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={!tplTitle.trim() && !body.trim()}
+              className="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs text-white transition-colors hover:bg-indigo-700 disabled:opacity-50"
+            >
+              Save
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TemplatesTab() {
+  const { adminApi, onToast } = useAdminNoti();
+  const queryClient = useQueryClient();
+
+  const { data: templatesResponse, isLoading } = useQuery({
+    queryKey: QK.templates,
+    queryFn: () => adminApi.notificationTemplates.list(),
+  });
+
+  const templates = templatesResponse?.data ?? [];
+
+  const saveMutation = useMutation({
+    mutationFn: ({ id, notificationType, title, body }) => {
+      const payload = {
+        notificationType,
+        channels: { in_app: { title, body } },
+        isActive: true,
+      };
+      return id
+        ? adminApi.notificationTemplates.update(id, payload)
+        : adminApi.notificationTemplates.create(payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QK.templates });
+      onToast({
+        title: 'Template saved',
+        message: 'Notification template updated.',
+        variant: 'success',
+      });
+    },
+    onError: (err) => {
+      onToast({
+        title: 'Save failed',
+        message: err?.message || 'Error',
+        variant: 'error',
+      });
+    },
+  });
+
+  if (isLoading) {
+    return <p className="text-sm text-gray-500">Loading templates…</p>;
+  }
+
+  return (
+    <div className="max-w-2xl space-y-3">
+      <p className="mb-4 text-xs text-gray-500">
+        Configure in-app notification templates for automatic system events. Variables in{' '}
+        <span className="font-mono text-gray-400">{'{{curly braces}}'}</span> are replaced at delivery
+        time. Requires the <strong className="text-gray-300">In-App</strong> channel to be enabled.
+      </p>
+      {AUTO_EVENT_TYPES.map((eventDef) => {
+        const existing = templates.find((t) => t.notificationType === eventDef.type);
+        return (
+          <TemplateRow
+            key={eventDef.type}
+            eventDef={eventDef}
+            existing={existing}
+            onSave={(args) => saveMutation.mutate(args)}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+const TABS = [
+  { id: 'send', label: 'Send', icon: Bell },
+  { id: 'channels', label: 'Channels', icon: Radio },
+  { id: 'templates', label: 'Auto-Templates', icon: FileText },
+];
+
+function defaultOnToast({ title, message, variant }) {
+  const fn = variant === 'error' ? console.error : console.info;
+  fn('[novalab-admin-noti-sdk]', title, message);
+}
+
+/**
+ * Provider: truyền client API đã tạo từ `createAdminNotiApi`.
+ */
+export function AdminNotiSdkProvider({ adminApi, onToast = defaultOnToast, children }) {
+  const value = useMemo(
+    () => ({
+      adminApi,
+      onToast,
+    }),
+    [adminApi, onToast]
+  );
+  return <AdminNotiContext.Provider value={value}>{children}</AdminNotiContext.Provider>;
+}
+
+/**
+ * UI đầy đủ (Send / Channels / Auto-Templates). Cần bọc `QueryClientProvider` + `AdminNotiSdkProvider`.
+ */
+export function AdminNotificationsPanel({
+  className = '',
+  heading = 'Notifications',
+  subheading = 'Send notifications and configure automatic delivery',
+}) {
+  const [activeTab, setActiveTab] = useState('send');
+
+  return (
+    <div className={`text-gray-100 ${className}`.trim()}>
+      <div className="mb-4">
+        <h2 className="text-lg font-semibold text-white">{heading}</h2>
+        {subheading && <p className="text-sm text-gray-500">{subheading}</p>}
+      </div>
+      <div className="mb-6 flex gap-1 border-b border-gray-800">
+        {TABS.map(({ id, label, icon: Icon }) => (
+          <button
+            key={id}
+            type="button"
+            onClick={() => setActiveTab(id)}
+            className={`-mb-px flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors ${
+              activeTab === id
+                ? 'border-indigo-500 text-indigo-400'
+                : 'border-transparent text-gray-500 hover:text-gray-300'
+            }`}
+          >
+            <Icon className="h-4 w-4" />
+            {label}
+          </button>
+        ))}
+      </div>
+      {activeTab === 'send' && <SendTab />}
+      {activeTab === 'channels' && <ChannelsTab />}
+      {activeTab === 'templates' && <TemplatesTab />}
+    </div>
+  );
+}
+
+/**
+ * Bọc sẵn QueryClient + API client — chỉ cần `apiBaseUrl` và JWT.
+ */
+export function AdminNotificationsEmbed({
+  apiBaseUrl,
+  getAccessToken,
+  adminApi: adminApiProp,
+  onToast,
+  className,
+  heading,
+  subheading,
+}) {
+  const adminApi = useMemo(() => {
+    if (adminApiProp) return adminApiProp;
+    if (!apiBaseUrl || getAccessToken == null) {
+      throw new Error('AdminNotificationsEmbed requires either `adminApi` or both `apiBaseUrl` and `getAccessToken`');
+    }
+    return createAdminNotiApi({ apiBaseUrl, getAccessToken });
+  }, [adminApiProp, apiBaseUrl, getAccessToken]);
+
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AdminNotiSdkProvider adminApi={adminApi} onToast={onToast}>
+        <AdminNotificationsPanel
+          className={className}
+          heading={heading}
+          subheading={subheading}
+        />
+      </AdminNotiSdkProvider>
+    </QueryClientProvider>
+  );
+}

package/src/createAdminNotiApi.js

@@ -0,0 +1,56 @@
+import axios from 'axios';
+
+/**
+ * @param {object} opts
+ * @param {string} opts.apiBaseUrl - Gốc API không có /v1 (vd: https://api.example.com)
+ * @param {string | (() => string | Promise<string>)} opts.getAccessToken - JWT admin
+ */
+export function createAdminNotiApi({ apiBaseUrl, getAccessToken }) {
+  const base = String(apiBaseUrl || '').replace(/\/$/, '');
+  const api = axios.create({
+    baseURL: `${base}/v1`,
+    headers: { 'Content-Type': 'application/json' },
+  });
+
+  api.interceptors.request.use(async (config) => {
+    const token =
+      typeof getAccessToken === 'function' ? await getAccessToken() : getAccessToken;
+    if (token) {
+      config.headers = config.headers || {};
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  });
+
+  api.interceptors.response.use(
+    (res) => {
+      if (res.data?.success === true) return res.data;
+      return res.data ?? res;
+    },
+    (err) => {
+      const responseData = err?.response?.data;
+      const payload = responseData?.error || {
+        code: 'NETWORK_ERROR',
+        message: err?.message || 'Request failed',
+      };
+      return Promise.reject(payload);
+    }
+  );
+
+  const prefix = '/admin';
+  return {
+    notifications: {
+      push: (body) => api.post(`${prefix}/notifications`, body),
+    },
+    channels: {
+      list: () => api.get(`${prefix}/channels`),
+      create: (body) => api.post(`${prefix}/channels`, body),
+      update: (id, body) => api.patch(`${prefix}/channels/${id}`, body),
+    },
+    notificationTemplates: {
+      list: () => api.get(`${prefix}/notification-templates`),
+      create: (body) => api.post(`${prefix}/notification-templates`, body),
+      update: (id, body) => api.put(`${prefix}/notification-templates/${id}`, body),
+    },
+  };
+}

package/src/index.js

@@ -0,0 +1,6 @@
+export { createAdminNotiApi } from './createAdminNotiApi.js';
+export {
+  AdminNotiSdkProvider,
+  AdminNotificationsPanel,
+  AdminNotificationsEmbed,
+} from './AdminNotificationsPanel.jsx';