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.
  • /portal/pixel offers Magic Ads disconnection for connected, pixel-entitled businesses only after checking every campaign page for ACTIVE or APPROVAL_PENDING. Reuse the existing disconnect API; the backend can still reject a stale eligibility result. Refresh the shared Meta integration after success before unlocking the fields, preserving saved pixel values and other provider drafts. If refresh fails, retry the read without disconnecting again. This frontend flow does not clear pixels or change backend cleanup behavior. Its component is keyed by business/integration to discard late results.
  • 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.