Skip to content
App Framework Documentation

Customer Features Package Reference

Use @ifelse/customer-features when you want prebuilt feature modules, hooks, helpers, and types for a customer or admin portal built on React, Apollo, and OIDC.

Overview

Section titled “Overview”

@ifelse/customer-features publishes tree-shakeable sub-path exports. Prefer importing from the specific module you need:

import { AuthProvider } from '@ifelse/customer-features/auth';
import { MySubscriptionsView } from '@ifelse/customer-features/subscriptions';
import { PricingView } from '@ifelse/customer-features/pricing';

This package currently exposes these modules:

  • Authentication - Keycloak integration with OIDC
  • Subscriptions - Full subscription lifecycle management
  • Payments - Reference payment types only
  • Pricing - Plan selection and checkout
  • Invoices - Invoice listing and downloads
  • Profile - User profile management
  • Features - Config-driven feature access control
  • Audit - User and admin audit activity views and hooks

Key Features

Section titled “Key Features”

✅ Consumer-focused sub-paths

Section titled “✅ Consumer-focused sub-paths”

Use exact import paths that match the exported surface and improve retrieval clarity for humans and AI agents.

🎨 Themeable

Section titled “🎨 Themeable”

Uses component slots pattern - bring your own UI components or use the default implementations.

🪝 Hooks-First

Section titled “🪝 Hooks-First”

Export both complete views and individual hooks for maximum flexibility.

📦 View-based and hooks-based adoption

Section titled “📦 View-based and hooks-based adoption”

Most modules support one of these paths:

  • prebuilt views for the fastest start
  • hooks plus types for a custom UI
  • mixed composition where one module feeds another

Installation

Section titled “Installation”

See the Package Usage Guide for complete setup instructions.

Terminal window
npm install @ifelse/customer-features

Quick Example

Section titled “Quick Example”
import { AuthProvider, type KeycloakConfigOptions } from '@ifelse/customer-features/auth';
import { MySubscriptionsView } from '@ifelse/customer-features/subscriptions';


const keycloakConfig: KeycloakConfigOptions = {
  keycloakUrl: 'https://identity.example.com',
  realm: 'my-realm',
  clientId: 'my-client',
  appUrl: window.location.origin,
};


function App() {
  return (
    <AuthProvider config={keycloakConfig}>
      <MySubscriptionsView emptyTitle="No subscriptions yet" emptyDescription="Your active plans will appear here." />
    </AuthProvider>
  );
}

Module Index

Section titled “Module Index”

Authentication

Section titled “Authentication”

Authentication provider, protected routes, role helpers, token helpers, and Keycloak config utilities.

Read the auth reference →

Subscriptions

Section titled “Subscriptions”

Complete subscription management views, billing portal actions, sync, and reactivation flows.

Read the subscriptions reference →

Payments

Section titled “Payments”

Reference payment types only. No current consumer-facing payment view is exported.

Read the payments reference →

Pricing

Section titled “Pricing”

Plan selection, checkout session creation, plan changes, and checkout result views.

Read the pricing reference →

Profile

Section titled “Profile”

User profile management, settings, quick links, and sign-in/sign-out customization points.

Read the profile reference →

Invoices

Section titled “Invoices”

Invoice listing, hooks, and translation-friendly status rendering.

Read the invoices reference →

Features

Section titled “Features”

Config-driven feature access control with hooks, utilities, and declarative guards.

Read the features reference →

Audit

Section titled “Audit”

User-activity and admin-audit views, filters, tables, and data hooks.

Read the audit reference →

Theming

Section titled “Theming”

See the CSS Theming Guide for customization options.

The library uses a component slots pattern, allowing you to:

  • Use default implementations
  • Override with your own components
  • Mix and match as needed

Requirements

Section titled “Requirements”

Peer Dependencies

Section titled “Peer Dependencies”

See the Package Usage Guide for the canonical peer dependency list and install commands.

Backend Requirements

Section titled “Backend Requirements”

Requires a compatible GraphQL backend with the capabilities required by the modules you adopt, such as:

  • Subscription queries and mutations
  • Invoice queries
  • Plan/pricing queries
  • Checkout session creation
  • Audit event queries when audit is used
  • Current-user profile data and preferences when profile is used

Version History

Section titled “Version History”

See Changelog for version history and migration notes.

Next Steps

Section titled “Next Steps”