Skip to main content

Products and Commerce Feature Context

Source: .agents/references/features/products-and-commerce.md

Content​

Products and Commerce Feature Context

Purpose​

Products and commerce cover the catalog and detail experiences for courses, events, challenges, memberships, digital files, forms, sessions, physical products, unified product cards, and affiliate commerce surfaces. The domain connects public discovery, product detail pages, availability, enrollment, pricing, and checkout entry.

User-Facing Workflows​

  • Visitors browse product cards on community pages and open product detail pages.
  • Buyers choose product variants or tiers, inspect pricing and metadata, then enter checkout.
  • Members see enrolled/access states, resource view pages, event attendance, course/file access, and challenge participation.
  • Creators/admin users may configure product behavior through related admin/pro surfaces, but public product rendering should stay decoupled from admin-only assumptions.
  • Physical products include image carousels, variant pages, shipping/location availability, and inquiry analytics.

Key Entrypoints​

  • Routes:
    • src/pages/[communityLink]/products/[productSlug]/
    • src/pages/[communityLink]/products.page.js
    • src/pages/[communityLink]/courses/[courseSlug].page.tsx
    • src/pages/[communityLink]/courses/[courseSlug]/view.page.tsx
    • src/pages/[communityLink]/events/[eventSlug]/index.page.js
    • src/pages/[communityLink]/challenges/[challengeSlug]/
    • src/pages/[communityLink]/digital-files/[digitalFileSlug].page.tsx
    • src/pages/[communityLink]/digital-files/[digitalFileSlug]/view.page.tsx
    • src/pages/[communityLink]/forms/[formSlug].page.tsx
    • src/pages/[communityLink]/sessions/
    • src/pages/[communityLink]/physical-products/
  • Components/features:
    • src/components/features/CommunityPage/components/allProducts/
    • src/features/CommunityProductPage/
    • src/features/EventPublicPage/
    • src/features/ResourcePage/
    • src/features/1on1Sessions/
    • src/features/Affiliates/
    • src/pages/[communityLink]/physical-products/components/
  • Hooks:
    • src/hooks/useEntityPrice.ts
    • src/hooks/useMembershipTiers.tsx
    • src/hooks/useManageCommunityEvents.js
    • src/hooks/member/useCommunityEventsData.js
    • src/pages/[communityLink]/physical-products/usePhysicalProductLandingPage.ts
  • Services:
    • src/services/unifiedProduct/unifiedProductServices.ts
    • src/services/courseService.js
    • src/services/calendarService.js
    • src/services/leadFormsService/
    • src/services/referral/referralService.ts
  • Utilities:
    • src/utility/productUtils.ts
    • src/utility/eventUtils.js
    • src/utility/checkoutUtils.js
    • src/pages/[communityLink]/physical-products/utils.ts

Data Flow and Service Boundaries​

  • Unified product data powers product cards and many discovery views. Check src/services/unifiedProduct/ and product card helpers before changing labels, CTA state, or pricing.
  • Detail pages may use route-level static props, client hooks, and product-specific services. Inspect the page file before adding fetch logic to a nested component.
  • Product access state is not the same as public visibility. A product can be visible but unavailable, sold out, enrolled, pending, inactive, location-restricted, or gated by membership.
  • Physical product pages have separate layout, carousel, checkout, and variant concerns under src/pages/[communityLink]/physical-products/.
  • Affiliate behavior can affect product CTAs and referral codes. Search Affiliates and referral before changing join/purchase links.

Conventions and Gotchas​

  • Product type labels and CTA labels should use existing helpers where available. Avoid introducing parallel string switches.
  • Keep pricing and availability checks close to the helper/hook that already owns product state.
  • Do not assume all product types share the same slug or ID shape.
  • Preserve access-control redirects and view pages for member-only product content.
  • Use exact Figma spacing and NPL typography tokens for design-driven product cards.
  • Avoid deriving product display state in useEffect; derive from product, member, and enrollment data during render unless synchronizing with an external system.
  • .agents/rules/clean-react.mdc
  • .agents/rules/clean-typescript.mdc
  • .agents/rules/no-try-catch-service-api.mdc
  • .agents/rules/direct-translation-and-component-files.mdc
  • .agents/references/coding-standard/figma-guidance.md
  • .agents/references/coding-standard/useeffect-guidance.md

Useful Searches​

rtk rg "UnifiedProduct|productSlug|entityPrice|membershipTier|physicalProduct|variant" src/pages/[communityLink] src/components/features src/features src/hooks src/services
rtk rg "ProductCardCTA|ProductCardPriceDisplay|ProductCardSubtitle|ProductFilter" src/components/features/CommunityPage
rtk find src/pages/[communityLink]/physical-products -maxdepth 5 -type f

Update Triggers​

Update this reference when product type behavior, unified product contracts, product card CTAs, pricing, access checks, or physical product flows change.