Feature Flags

Since version 3.9

Overview

Feature flags are a way to enable or disable certain features in your extension.

For instance feature flags can be useful for display or not a banner in your application.

Using feature flags

Declaring a feature flag

To declare a feature flag, you must include a featureFlags property in your extension declaration.

extension/acme/index.ts

export default defineExtension({
...
  unstable_lifecycleHooks: {
    onServerServicesInit: async (services, _request, config, user) => {
      onFeaturesInit: (hooks) => {
        hooks.registerFeature("order", {
          flags: {
            canOrderFooBar: true,
          }
        });
      }
    },
  }
...

This example will allow you to know if you can order a FooBar product.

Using a feature flag

To use a feature flag, you must use the useExtensionFeatureFlags hook.

The useExtensionFeatureFlags hook takes three arguments:

• The extension name
• The feature flag name
• The default value

extension/acme/pages/OrderFooBarPage.tsx

import { useExtensionFeatureFlags } from "@front-commerce/core/react";

export function OrderFooBarPage() {
  const canOrderFooBar = useExtensionFeatureFlags(
    "order",
    "canOrderFooBar",
    false
  );

  return (
    <div>
      <h1>Order FooBar</h1>
      {canOrderFooBar ? (
        <button>Order FooBar</button>
      ) : (
        <p>You cannot order FooBar</p>
      )}
    </div>
  );
}

Typing your feature flags

Feature flags are typed through the ExtensionFeatures interface. See the Components Map typing guide for details on how to declare and consume typed features.

In short: the theme that reads the flags (via useExtensionFeatureFlags) declares the expected flag names and types, and extensions that provide the flags include the theme's type declarations in their tsconfig.json.

my-theme/src/types/extension-features.d.ts

declare module "@front-commerce/types" {
  export interface ExtensionFeatures {
    order: {
      flags: {
        canOrderFooBar: boolean;
      };
    };
  }
}

Implemented Features and Flags

newsletter Feature

Flag name	Description
enabled	Is the newsletter related actions are available

accountInformation Feature

Flag name	Description
phoneRequired	Should the phone number must be required in the user information form
canEditEmail	Can the user edit it's email address

wishlist Feature

Flag name	Description
enabled	Is the wishlist feature enabled