multivendor-dropshipping-ui

Seller UI for CJ Dropshipping, PrintVally, and Qikink, gated by a deploy-time env flag.

Build exception: This is a React component package. It ships dual CJS+ESM via tsup (not the data-client CJS-only tsc scaffold) so react / react-dom stay peerDependencies and the host shares a single React instance (Context-safe).

Gating model

VITE_DROPSHIPPING_PROVIDERS is a platform-operator decision at build/deploy time, not a per-seller toggle. Every seller on that deployment sees the same providers.

| Env value | Result | |-----------|--------| | cj | CJ only | | printvally | PrintVally only | | qikink | Qikink only | | cj,printvally,qikink | All three | | empty / unset | None |

Paths are fixed in v1: /cj, /printvally, /qikink (not configurable).

Host integration

import {
  configureDropshippingUi,
  parseDropshippingProviders,
  getDropshippingNavItems,
  getDropshippingSubNavItems,
  DropshippingThemeProvider,
} from 'multivendor-dropshipping-ui';
// Optional (pulls provider lazy graphs — prefer host-side subpath imports in Vite):
import { createDropshippingRoutes } from 'multivendor-dropshipping-ui/routes';

configureDropshippingUi({
  productApi: productAPI,
  cjApi: cjAPI,
  printvallyApi: printvallyAPI,
  qikinkApi: qikinkAPI,
});

const providers = parseDropshippingProviders(import.meta.env.VITE_DROPSHIPPING_PROVIDERS);

// Nav: append getDropshippingNavItems(providers) **inside** SellerLayout useMemo (deps include providers).
// Sub-nav: getDropshippingSubNavItems(pathname, providers) inside subNavigationItems useMemo.

// Theme bridge
<DropshippingThemeProvider isDarkMode={isDarkMode}>...</DropshippingThemeProvider>

In Vite hosts, mount multivendor-dropshipping-ui/cj, .../printvally, and .../qikink with compile-time flags (see seller-ui createSellerDropshippingRoutes + vite define) so a disabled provider is omitted from the Rollup graph. Do not import multivendor-dropshipping-ui/routes from the main app entry if you need env-based exclusion — that module always references all provider lazy imports.

React dual-instance check

1. peerDependencies: react, react-dom, react-router-dom — never bundle them.
2. Host Vite: resolve.dedupe: ['react', 'react-dom'].
3. Dev: DropshippingThemeProvider logs if two React copies are detected.
4. After seller production build, confirm a single React in vendor chunk:

# from seller-ui after vite build
rg -l "react" dist/assets/*vendor-react* | head
# package dist must not contain a nested react copy:
rg "node_modules/react/" dist/ --glob '*.js' || true
ls node_modules/multivendor-dropshipping-ui/dist | head
# ensure package externals left react out of its bundle:
! rg -q 'from "react"' node_modules/multivendor-dropshipping-ui/dist/index.js && echo 'unexpected: no react import'
rg -n 'from ["'\'']react["'\'']' node_modules/multivendor-dropshipping-ui/dist/index.js | head

The package must import react as an external (from "react"), not inline React source.

API boundary

The package does not own axios. Inject thin clients matching seller printvallyAPI / cjAPI / qikinkAPI / productAPI via configureDropshippingUi.