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

@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

✅ Consumer-focused sub-paths

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

🎨 Themeable

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

🪝 Hooks-First

Export both complete views and individual hooks for maximum flexibility.

📦 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

See the Package Usage Guide for complete setup instructions.

Terminal window
npm install @ifelse/customer-features

Quick Example

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


const keycloakConfig = createKeycloakConfig({
  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

Authentication

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

Read the auth reference →

Subscriptions

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

Read the subscriptions reference →

Payments

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

Read the payments reference →

Pricing

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

Read the pricing reference →

Profile

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

Read the profile reference →

Invoices

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

Read the invoices reference →

Features

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

Read the features reference →

Audit

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

Read the audit reference →

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

Peer Dependencies

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "@apollo/client": "^3.0.0",
  "graphql": "^16.0.0",
  "react-oidc-context": "^3.0.0",
  "@ifelse/shared-ui": ">=0.4.0",
  "react-i18next": "^13.0.0",
  "i18next": "^23.0.0",
  "lucide-react": ">=0.400.0",
  "oidc-client-ts": "^3.0.0"
}

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

See Changelog for version history and migration notes.

Next Steps