multivendor-contact-us

Reusable admin + seller Contact Us / support-ticket UI and API client for SmartByteLabs multivendor SaaS apps.

Requires backend endpoints:

• GET/POST /api/contact
• GET /api/contact/:id
• POST /api/contact/:id/response
• PATCH /api/contact/:id/assign (admin)
• GET /api/contact/subjects?groupId=
• POST /api/uploads?module=documents&folder=support
• Socket path /api/ticket-socket

Install

pnpm add multivendor-contact-us socket.io-client react-toastify lucide-react
# or local:
pnpm add file:../multivendor-saas-components/multivendor-contact-us

Peer deps: react, react-dom, socket.io-client. Admin UI also needs react-toastify. Host app should have Tailwind (or equivalent utility classes).

Configure (once per app)

import { configureContactUs } from 'multivendor-contact-us';

configureContactUs({
  apiBaseUrl: import.meta.env.VITE_API_BASE_URL,
  getAuthToken: () => localStorage.getItem('adminAuthToken'), // or sellerToken
  onUnauthorized: () => { /* redirect login */ },
  // admin extras:
  isDefaultAdmin: true,
  listAdminUsers: async () => [], // optional assign dropdown
  // seller extras:
  subjectGroupId: 2,
});

Admin UI

import { ContactUsAdminPage, contactUsAdminModule } from 'multivendor-contact-us/admin';

// Route
<Route path={contactUsAdminModule.path} element={<ContactUsAdminPage />} />

// Nav: contactUsAdminModule.navItem  (permission: edit-contact-us)

Addon hosts that already bootstrap multivendor-admin-* packages can also use:

import { register } from 'multivendor-contact-us/register';

Seller UI

import { SellerTicketsPage, CreateTicketForm } from 'multivendor-contact-us/seller';

<SellerTicketsPage
  ticketId={ticketIdFromRoute}
  onSelectTicket={(id) => navigate(id ? `/support/tickets/${id}` : '/support/tickets')}
  defaultFormValues={{ name, email, phoneNumber }}
/>

Core API (no UI)

import { contactApi, uploadTicketAttachments } from 'multivendor-contact-us';

const { items } = await contactApi.list({ limit: 20 });
await contactApi.reply(ticketId, { message: 'Hello', status: 'in_progress' });

Exports

| Import | Contents | |--------|----------| | multivendor-contact-us | config, contactApi, attachments, socket, hooks, helpers | | multivendor-contact-us/admin | ContactUsAdminPage, plugin | | multivendor-contact-us/seller | SellerTicketsPage, CreateTicketForm | | multivendor-contact-us/register | admin addon register() |

Develop

pnpm install
pnpm --filter multivendor-contact-us build
pnpm --filter multivendor-contact-us test