feat: add free shipping banner

flags.json

@@ -1,8 +1,8 @@
 {
   "$schema": "./flags-schema.json",
   "flags": {
-    "offer-free-shipping": {
-      "description": "Add free shipping to the UI.",
+    "free-shipping-banner": {
+      "description": "Controls the free shipping banner on the website. SHOP-4287",
       "defaultValue": false,
       "flagType": "boolean",
       "state": "ENABLED",

src/app/checkout/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useSuspenseOfferFreeShipping } from "@/generated/react/openfeature";
+import { useSuspenseFreeShippingBanner } from "@/generated/react/openfeature";
 import { useCart } from "@/hooks/use-cart";
 import { setTargetingKeyHeader } from "@/libs/open-feature/evaluation-context";
 import { TARGETING_KEY } from "@/libs/targeting-key";
@@ -15,7 +15,7 @@ import { useMemo, useReducer } from "react";
 export default function Checkout() {
   const { cartItems, removeFromCart, updateQuantity } = useCart();
   const { track } = useTrack();
-  const { value: freeShipping } = useSuspenseOfferFreeShipping();
+  const { value: freeShipping } = useSuspenseFreeShippingBanner();
 
   useMemo(() => {
     track("visit_checkout");

src/app/page.tsx

@@ -10,11 +10,11 @@ import Banner from "@/components/Banner";
 import heroImage from "../../public/img/hero.jpg";
 
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { useSuspenseOfferFreeShipping } from "@/generated/react/openfeature";
+import { useSuspenseFreeShippingBanner } from "@/generated/react/openfeature";
 
 export default function Home() {
   const [parent] = useAutoAnimate();
-  const { value: showBanner } = useSuspenseOfferFreeShipping();
+  const { value: showBanner } = useSuspenseFreeShippingBanner();
 
   return (
     <>

src/generated/react/openfeature.ts

@@ -3,35 +3,50 @@
 import {
   type ReactFlagEvaluationOptions,
   type ReactFlagEvaluationNoSuspenseOptions,
+  type FlagQuery,
   useFlag,
   useSuspenseFlag,
+  JsonValue
 } from "@openfeature/react-sdk";
 
+// Flag key constants for programmatic access
+export const FlagKeys = {
+  /** Flag key for Controls the free shipping banner on the website. SHOP-4287 */
+  FREE_SHIPPING_BANNER: "free-shipping-banner",
+  /** Flag key for Make the header stay at the top of the page while scrolling. */
+  STICKY_HEADER: "sticky-header",
+  /** Flag key for When on, use postgres else sqlite. */
+  USE_DISTRIBUTED_DB: "use-distributed-db",
+  /** Flag key for When on, use a secure connection to the database. This only applies when use-distributed-db is on. */
+  USE_SECURE_PROTOCOL: "use-secure-protocol",
+} as const;
+
+
 /**
-* Add free shipping to the UI.
+* Controls the free shipping banner on the website. SHOP-4287
 * 
 * **Details:**
-* - flag key: `offer-free-shipping`
+* - flag key: `free-shipping-banner`
 * - default value: `false`
 * - type: `boolean`
 */
-export const useOfferFreeShipping = (options?: ReactFlagEvaluationOptions) => {
-  return useFlag("offer-free-shipping", false, options);
+export const useFreeShippingBanner = (options?: ReactFlagEvaluationOptions): FlagQuery<boolean> => {
+  return useFlag("free-shipping-banner", false, options);
 };
 
 /**
-* Add free shipping to the UI.
+* Controls the free shipping banner on the website. SHOP-4287
 * 
 * **Details:**
-* - flag key: `offer-free-shipping`
+* - flag key: `free-shipping-banner`
 * - default value: `false`
 * - type: `boolean`
 *
 * Equivalent to useFlag with options: `{ suspend: true }`
 * @experimental — Suspense is an experimental feature subject to change in future versions.
 */
-export const useSuspenseOfferFreeShipping = (options?: ReactFlagEvaluationNoSuspenseOptions) => {
-  return useSuspenseFlag("offer-free-shipping", false, options);
+export const useSuspenseFreeShippingBanner = (options?: ReactFlagEvaluationNoSuspenseOptions): FlagQuery<boolean> => {
+  return useSuspenseFlag("free-shipping-banner", false, options);
 };
 
 /**
@@ -42,7 +57,7 @@ export const useSuspenseOfferFreeShipping = (options?: ReactFlagEvaluationNoSusp
 * - default value: `false`
 * - type: `boolean`
 */
-export const useStickyHeader = (options?: ReactFlagEvaluationOptions) => {
+export const useStickyHeader = (options?: ReactFlagEvaluationOptions): FlagQuery<boolean> => {
   return useFlag("sticky-header", false, options);
 };
 
@@ -57,7 +72,7 @@ export const useStickyHeader = (options?: ReactFlagEvaluationOptions) => {
 * Equivalent to useFlag with options: `{ suspend: true }`
 * @experimental — Suspense is an experimental feature subject to change in future versions.
 */
-export const useSuspenseStickyHeader = (options?: ReactFlagEvaluationNoSuspenseOptions) => {
+export const useSuspenseStickyHeader = (options?: ReactFlagEvaluationNoSuspenseOptions): FlagQuery<boolean> => {
   return useSuspenseFlag("sticky-header", false, options);
 };
 
@@ -69,7 +84,7 @@ export const useSuspenseStickyHeader = (options?: ReactFlagEvaluationNoSuspenseO
 * - default value: `false`
 * - type: `boolean`
 */
-export const useUseDistributedDb = (options?: ReactFlagEvaluationOptions) => {
+export const useUseDistributedDb = (options?: ReactFlagEvaluationOptions): FlagQuery<boolean> => {
   return useFlag("use-distributed-db", false, options);
 };
 
@@ -84,7 +99,7 @@ export const useUseDistributedDb = (options?: ReactFlagEvaluationOptions) => {
 * Equivalent to useFlag with options: `{ suspend: true }`
 * @experimental — Suspense is an experimental feature subject to change in future versions.
 */
-export const useSuspenseUseDistributedDb = (options?: ReactFlagEvaluationNoSuspenseOptions) => {
+export const useSuspenseUseDistributedDb = (options?: ReactFlagEvaluationNoSuspenseOptions): FlagQuery<boolean> => {
   return useSuspenseFlag("use-distributed-db", false, options);
 };
 
@@ -96,7 +111,7 @@ export const useSuspenseUseDistributedDb = (options?: ReactFlagEvaluationNoSuspe
 * - default value: `false`
 * - type: `boolean`
 */
-export const useUseSecureProtocol = (options?: ReactFlagEvaluationOptions) => {
+export const useUseSecureProtocol = (options?: ReactFlagEvaluationOptions): FlagQuery<boolean> => {
   return useFlag("use-secure-protocol", false, options);
 };
 
@@ -111,6 +126,6 @@ export const useUseSecureProtocol = (options?: ReactFlagEvaluationOptions) => {
 * Equivalent to useFlag with options: `{ suspend: true }`
 * @experimental — Suspense is an experimental feature subject to change in future versions.
 */
-export const useSuspenseUseSecureProtocol = (options?: ReactFlagEvaluationNoSuspenseOptions) => {
+export const useSuspenseUseSecureProtocol = (options?: ReactFlagEvaluationNoSuspenseOptions): FlagQuery<boolean> => {
   return useSuspenseFlag("use-secure-protocol", false, options);
 };