Forced Decision methods for the React SDK

const optimizely = createInstance({ 
 sdkKey: '<Your_SDK_Key>', 
}); 

optimizely.onUserUpdate(() => {
  optimizely.setForcedDecision( 
    { 
      flagKey: "product_sort", 
      ruleKey: "experiment", 
    }, 
    { variationKey: "treatment" } 
  );
});

export interface OptimizelyDecisionContext {
  flagKey: string;
  ruleKey?: string;
}

export interface OptimizelyForcedDecision {
  variationKey: string;
}

optimizely.setForcedDecision(
  { 
    flagKey: "product_sort", 
    ruleKey: "experiment", 
  }, 
  { variationKey: "treatment" }
 );

var forcedDecision = optimizely.getForcedDecision({
  flagKey: "product_sort",
  ruleKey: "experiment",
});

var success = optimizely.removeForcedDecision({
  flagKey: "product_sort",
  ruleKey: "experiment",
})

var success = optimizely.removeAllForcedDecisions();

import React from "react"; 
import { 
  createInstance, 
  OptimizelyProvider, 
  useDecision, 
  withOptimizely, 
} from "@optimizely/react-sdk"; 

const optimizely = createInstance({ 
   sdkKey: "<YOUR_SDK_KEY_HERE>", 
}); 

optimizely.onUserUpdate(() => { 
  // Wait for the user to be available before using forced decision methods. 
  optimizely.setForcedDecision({ flagKey: "product_sort" }, { variationKey: "treatment" });
}); 

const PurchaseButton = withOptimizely((props: any) => { 
  const handleClick = () => { 
    const { optimizely } = props; 
    optimizely.track("purchased"); 
  }; 
  return <div><button onClick={handleClick}>Purchase</button></div>; 
}); 

const RemoveForcedDecision = withOptimizely((props: any) => { 
  const handleClick = () => {
    const { optimizely } = props; 
    optimizely.removeForcedDecision({ flagKey: 'product_sort' });
  };
  return <div><button onClick={handleClick}>Remove Forced Decision</button></div>; 
});

const RemoveAllForcedDecisions = withOptimizely((props: any) => { 
  const handleClick = () => { 
    const { optimizely } = props; 
    optimizely.removeAllForcedDecisions(); 
  }; 
  return <div><button onClick={handleClick}>Remove All Forced Decisions</button></div>; 
}); 

function ProductSort() { 
  const [decision] = useDecision("product_sort", { 
    autoUpdate: true 
  }); 

  const variationKey = decision.variationKey;
  const isEnabled = decision.enabled;
  const sortMethod = decision.variables["sort_method"]; 

  return ( 
     <div> 
       {/* If variation is null, display error */} 
       {variationKey === null && <div className="error">{decision.reasons}</div>} 

       {/* If feature is enabled, do something with the Sort Method variable */} 
       {isEnabled && <div>The Sort method is {sortMethod}</div>} 

       {/* Show relevant component based on the variation key */} 
       {variationKey === "control" && <div>Control Component</div>} 
       {variationKey === "treatment" && <div>Treatment Component</div>} 

       {/* Show Purchase Button to track Purchase event */} 
       <PurchaseButton /> 
       <RemoveForcedDecision /> 
       <RemoveAllForcedDecisions /> 
     </div> 
  ); 
}

function App() { 
  return ( 
    <OptimizelyProvider 
      optimizely={optimizely} 
      user={{ 
        id: "user123", 
      }} 
    > 
      <ProductSort /> 
    </OptimizelyProvider> 
  ); 
} 

export default App;