2.2.0

Added an OpenFeature client provider for the React SDK to manage pricing-driven feature flags.

How to use the provider

1. Install the Open Feature SDK for react:

npm i @openfeature/react-sdk

2. Configure OpenFeature with the ReactPricingDrivenFeaturesProvider

Next, OpenFeature can be configured with a provider, which is the engine that will process all underlying logic of the feature toggling. It can be set with the setProvider method:

OpenFeature.setProvider(new YourProviderOfChoice(), evaluationContext);

As can be noted, OpenFeature can be initialized with a custom evaluationContext that is aimed to contain all the necessary information to perform the evaluation.

So, in order to use OpenFeature with the ReactPricingDrivenFeaturesProvider, it should be configured like this:

OpenFeature.setProvider(new ReactPricingDrivenFeaturesProvider(), {
      pricingUrl: 'http://sphere.score.us.es/static/pricings/uploadedDataset/Pricing-driven%20Feature%20Toggling%20Demo/2025-1-8.yml',
      subscription: ["FREE"],
      userContext: {
        user: "test",
        // Extra fields needed from the user context to perform the evaluation of features...
      },
    });

As can be seen, the ReactPricingDrivenFeaturesProvider relies on a specific structure of the evaluationContext to work as expected:

• To populate the pricingUrl field, we highly recommend uploading your pricing data to SPHERE. This will give you a direct URL to the uploaded file. If you prefer not to share the Pricing2Yaml model publicly, you can host the file elsewhere. The only requirement is that when you send a GET request to the URL specified in pricingUrl, the service must return the YAML file’s text.
• The subscription field contains a list of strings that specify the plan (if any in the pricing) and add-ons (if any is selected) that will conform the subscription of the user for which the evaluation will be performed.
• The userContext is a Record<string, any> that must contain a user field with the username (or unique identifier) of the user under evaluation. In addition, it should hold all other information required to perform the evaluation --- such as the user's current usage of a feature that has an usage limit.

3. Use OpenFeature

Once completed all previous steps, you should see in the console of your app a message indicating that the Provider has been initialized successfully.

PricingDrivenFeaturesProvider initialized with context: 
  > Object

    > pricingUrl:       "http://sphere.score.us.es/static/pricings/uploadedDataset/Pricing-driven%20Feature%20Toggling%20Demo/2025-1-8.yml"

    > subscription: ["FREE"]

    > userContext: {user: "test", createdExpenses: 2}

After that, you can use the OpenFeature client to perform the evaluation of features:

// Evaluate a feature
const result = await client.getBooleanValue('featureName', false);

:::info
The last parameter denotes the default value of the evaluator, which is the one that is going to be used if an Error is thrown during evaluation.
:::

:::info
We strongly recommend to only use getBooleanValue or useBooleanValue, since the evaluation of pricing features always return a boolean, i.e. the feature is enabled/disabled for the user, no matter what the initial feature type was: BOOLEAN, NUMERIC or TEXT
:::

Extra tip

In our demo app we have created a custom FeatureFlag component that manage the render of its children based on the evaluation of a specific feature. This would be its implementation, considering that the ReactPricingDrivenFeaturesProvided has been configured.

import { useBooleanFlagValue } from '@openfeature/react-sdk';

export default function FeatureFlag({
  featureName,
  children,
}: {
  featureName: string;
  children: React.ReactNode;
}) {

  const isEnabled = useBooleanFlagValue(featureName);

  return isEnabled ? <>{children}</> : <></>;
}

And it would be used as follows:

<FeatureFlag featureName="testFeature">
  <ChildComponent/>
</FeatureFlag>

2.1.0

Added new methods evaluatePricing and evaluateFeatureInPricing to perform pricing-driven evaluations on the client side

2.0.1

FIX: removed forced proxy on fetchWithPricingInterceptor function.

2.0.0

With this major version, the pricing evaluation information is transmitted separately from the auth configuration, allowing to use other auth technologies within the application. You can check the differences in the configuration in the official documentation website

1.3.0

Many components of the library have been refactored to remove dead code.

In addition, we have added the searchNewTokenAndUpdate method.

1.2.4

Updated the package name to Pricing4React

Typings for Pricing Editor (fix)

1.2.3

Fixed types of pricingplans

Typings for Pricing Editor

1.2.2

Added typings for the editor

Error in editor code upload

1.2.1

Code upload of editor

Pricing Editor

New embeddable React Pricing Editor.