Trunk-Based Development

// Feature Flag implementation for Trunk-Based Development

// React feature flag hook
const useFeatureFlag = (flagName: string): boolean => {
  const flags = {
    "new-checkout-flow": process.env.NEXT_PUBLIC_FF_NEW_CHECKOUT === "true",
    "ai-recommendations": process.env.NEXT_PUBLIC_FF_AI_RECS === "true",
    "beta-dashboard": process.env.NEXT_PUBLIC_FF_BETA_DASH === "true",
  };
  return flags[flagName as keyof typeof flags] ?? false;
};

// Use the feature flag in your component
function CheckoutPage() {
  const newCheckout = useFeatureFlag("new-checkout-flow");

  if (newCheckout) {
    return <NewCheckoutFlow />;         // New implementation
  }
  return <LegacyCheckoutFlow />;        // Old implementation
}

// Environment variables per environment:
// Development: NEXT_PUBLIC_FF_NEW_CHECKOUT=true (visible to devs)
// Staging:     NEXT_PUBLIC_FF_NEW_CHECKOUT=true (QA testing)
// Production:  NEXT_PUBLIC_FF_NEW_CHECKOUT=false (off until ready)
// Launch day:  NEXT_PUBLIC_FF_NEW_CHECKOUT=true (flip the flag)

// This is how Netflix and Facebook ship code before it's ready
console.log("TBD = ship FAST, reveal SAFELY");