Skip to main content

Creator Admin and Pro Feature Context

Source: .agents/references/features/creator-admin-and-pro.md

Content​

Creator Admin and Pro Feature Context

Purpose​

Creator admin and pro surfaces support community owners and internal/admin users managing products, plans, payouts/revenue, KYC, business setup, announcements, leads, ads/content checkout, pro subscriptions, and creator tooling. These flows often depend on authenticated community ownership and service contracts rather than public visitor state.

User-Facing Workflows​

  • Creators configure communities, products, announcements, plans, payouts, KYC, and business/profile settings.
  • Pro and plan overlays guide creators through subscription or upgrade flows.
  • Admin/pro pages may show revenue, abandoned checkout, affiliates, lead forms, co-founder chat, content generation, and creator setup prompts.
  • The portal home Action Center can surface Nas.com Product Updates; creators open a sidesheet from the PRODUCT_UPDATES item to read enabled updates and persist per-user read state.
  • KYC surfaces show under-review/status badges and should not overstate verification state.
  • Creator workflows should avoid interrupting public member/visitor flows unless explicitly linked.

Key Entrypoints​

  • Features:
    • src/features/KycVerification/
    • src/features/ProCheckout/
    • src/features/ProOverlayWrapper/
    • src/features/ProSubscriptionOverlay/
    • src/features/ProSubscriptionSuccessScreen/
    • src/features/NasioProcessingFee/
    • src/features/AbandonedCheckout/
    • src/features/Affiliates/
    • src/features/Announcements/
    • src/features/LeadForms/
    • src/features/MagicAdsCheckout/
    • src/features/MagicContentCheckout/
    • src/features/CoFounderChat/
    • src/features/ConnectChatPlatform/
    • src/features/ConnectGoogleCalendar/
    • src/features/CustomizeEmailMessages/
    • src/features/BusinessSetupOverlay/
  • Routes:
    • src/pages/portal/
    • src/pages/choose-a-plan/
    • src/pages/subscribe-plan/
    • src/pages/integration/
    • src/pages/user/
  • Hooks:
    • src/hooks/useNasPlan.ts
    • src/hooks/useCommunityRevenue.js
    • src/hooks/useUserCommunities.ts
    • src/hooks/useUserRoleInCommunity.ts
    • src/hooks/useTierApplicationConfigCreate.js
  • Services:
    • src/services/nasPlan/nasPlanService.js
    • src/services/moneyPageService.js
    • src/services/leadFormsService/
    • src/services/magicLeadsService.ts
    • src/services/affiliatesService.ts
    • src/services/announcementService.js
    • src/services/faiqService.ts
    • src/services/coFounderService.ts
    • src/services/sessionAnalytics/sessionAnalyticsService.js
    • src/services/productUpdatesService.ts

Data Flow and Service Boundaries​

  • Creator/admin surfaces frequently rely on authenticated service helpers. Preserve authorization checks and do not move owner-only logic into public components.
  • Plan/pro and checkout flows overlap. Load checkout-and-payments.md when touching subscription purchase, payment provider, or pricing behavior.
  • Product Marketing sections can start Magic Ads from product-linked Magic Content assets. The product entrypoint fetches assets through GET /magic-contents with productRefs=<product.type>:<productId>, lets creators select completed assets, then calls /magic-audience/campaign-with-ads with assetObjectIds before opening the existing Magic Ads overlay by returned campaign id.
  • Magic Ads credit history comes from GET /api/v1/communities/:communityId/credits; keep transactions with metadata.isChargeback === true visible in CommunityCredits and mapped to the Figma chargeback treatment (credit-card-refresh, yellow background/icon, t('chargeback')), even though Apifox project 8407323 currently confirms the endpoint but omits this response metadata detail.
  • Magic Ads estimate requests must not send Meta-restricted locations in targeting.geo_locations (for example, country code RU). Block restricted locations in the review UI and ask the creator to remove them before calling /magic-audience/campaign/:campaignId/estimate or launching.
  • KYC status components should use existing constants and status mapping from src/features/KycVerification/.
  • Revenue and analytics screens should preserve query/date filters and avoid logging sensitive financial or user details.
  • Lead forms, announcements, integrations, and chat/calendar connectors can have external service contracts. Inspect service types before changing payload shape.
  • Lead form website visibility for the business page is controlled separately from publish status via the unified product display settings endpoint (/api/v1/communities/:communityId/unifiedProducts/display/settings) with products: [&#123; productId, isVisible &#125;]. The settings sidesheet Details section exposes this as "Visible on your website"; saves must not send isVisible through updateLeadForm.
  • Magic Content creation supports deep links on /portal/magic-content: style=image|video selects the initial creation type and overrides legacy assetType, styleId preselects a MagicContentStyleAsset, externalUrl opens product selection on the External website tab, pre-fills and analyzes the URL even when no style asset resolves, and existing productId reuse links take precedence over external website prefill.
  • Product Updates in Action Center use GET /communities/:communityId/product-updates for enabled updates and POST /communities/:communityId/product-updates/:productUpdateId/read when an unread accordion row is expanded. Descriptions are serialized Lexical editor content and should render through the existing read-only Editor, not plain text or ad hoc HTML.

Conventions and Gotchas​

  • Do not assume creator role from client-only state. Use existing role/community hooks and server checks.
  • Use &#123; data, error &#125; for service APIs and show existing toasts for user-visible failures.
  • Keep admin/pro copy localized with direct t() calls.
  • /portal/pixel validates every populated field before saving: Meta Pixel IDs are numeric, Google Analytics measurement IDs use G- followed by uppercase letters or numbers, TikTok Pixel IDs are bare 20-character uppercase alphanumeric IDs (not installation scripts), X Pixel IDs are alphanumeric, and access tokens cannot contain whitespace or be saved without their corresponding ID. Empty values remain valid so an integration can be cleared.
  • Avoid broad abstractions across unrelated creator tools; many features have distinct service contracts.
  • For lead form settings visibility, reuse updateUnifiedDisplayConfig from src/services/unifiedProduct/unifiedProductServices.ts near the manage/edit call sites: LeadFormMainStep.tsx, SiteSettingsDetailsForm.tsx, LeadFormSiteSettingsSideSheet.tsx, and their entrypoints. A backend Lark doc has been referenced at https://nasdaily.sg.larksuite.com/wiki/SeTfwEVXniBmTskkxFElSaW6gDc; use its endpoint contract when authenticated access is available.
  • Lead Form Confirmation email keeps its existing community-mail GET/PUT/default/test flow, but its sidesheet footer reuses the shared EmailEditorFooter: a 64px footer with the reset overflow action on the left and intrinsic-width Send test mail/Save actions on the right. Reset updates only the open draft from the backend default template; it does not save until the creator clicks Save. Its body uses Poppins typography. Its subject reuses the shared single-line variable input but supports only &#123;community_name&#125;; &#123;submission&#125; is body-only and must not appear in subject suggestions or highlighting. Keep raw placeholders in save and test-mail payloads. Display &#123;submission&#125; as Submission answers in body tokens and variable guidance through the Lead Form-specific translation key. When the backend response includes lockedSection and serialized content contains its lockSection node, the editor renders the existing LockedMailSummary as LeadFormSubmission: use the backend label, the shared cursor-box icon variant, and no CTA. Reset refreshes the response preview, test mail forwards previewContext, and save keeps lockedSection response-only. Normalize Lead Form serialized content by removing lockSection.buttonText on load, editor changes, reset, Save, and test mail while retaining the lockSection node and editable body; this Lead Form-only rule must not affect CTA-enabled email types. Test-mail request hooks return failures without presenting them; the active test-email modal or sidesheet owns the single user-visible error toast. Lead Form confirmation Save and test-mail request bodies include entityObjectId from the current Lead Form _id; retain the shared adapter's legacy mailCourseOffer mapping for compatibility.
  • For Product Updates, keep the sidesheet UI page-local under src/pages/portal/home/components/ActionCenterCard/ until another route needs it; the public/locales/en.json source entries are focused and gitignored for the normal translation sync workflow.
  • Treat money/KYC/user data as sensitive. Do not add console output that exposes PII, tokens, or financial values.
  • For tables, forms, and dense admin screens, prefer quiet utility styling and predictable controls over decorative layouts.
  • .agents/rules/web-security.mdc
  • .agents/rules/no-try-catch-service-api.mdc
  • .agents/rules/clean-typescript.mdc
  • .agents/rules/clean-react.mdc
  • .agents/references/features/checkout-and-payments.md
  • .agents/references/features/onboarding-and-setup.md

Useful Graph Queries and Fallback Searches​

Use the terms below with search_graph/search_code, then run trace_path on central creator/admin/pro symbols. Run these shell searches only as documented fallbacks.

rtk rg "Kyc|ProSubscription|NasPlan|revenue|LeadForms|LeadFormMainStep|SiteSettingsDetailsForm|LeadFormSiteSettingsSideSheet|Announcement|ProductUpdates|product-updates|affiliate|coFounder|MagicContent|MagicAds|styleId|externalUrl" src/features src/hooks src/services src/pages
rtk rg "useUserRoleInCommunity|useCommunityRevenue|useNasPlan|moneyPageService" src
rtk find src/features/KycVerification -maxdepth 3 -type f

Update Triggers​

Update this reference when creator role checks, pro plan behavior, KYC status mapping, admin service contracts, revenue screens, lead form status/visibility behavior, Product Updates Action Center behavior, or creator integrations change.