feat: add free shipping banner

.github/workflows/validate-flags.yaml

@@ -24,14 +24,22 @@ jobs:
 
       # Automatically compares against PR base branch (main)
       - name: Compare against base branch
-        uses: open-feature/action@v0.0.2
+        uses: open-feature/action@v0.0.6
         with:
           manifest: "flags.json"
+          post-pr-comment: false
+
+      - name: debugging
+        run: cat flags.json && cat against-flags.json
 
       - name: Compare against remote manifest
-        if: ${{ secrets.FLAGD_STUDIO_TOKEN != '' }} # Secret not accessible for PRs from forks
-        uses: open-feature/action@v0.0.2
+      # Secret not accessible for PRs from forks
+        if: github.repository == github.event.repository.full_name
+        uses: open-feature/action@v0.0.6
         with:
           manifest: "flags.json"
           against: "https://flagd-studio.onrender.com/api"
           auth-token: ${{ secrets.FLAGD_STUDIO_TOKEN }}
+
+      - name: debugging
+        run: cat flags.json && cat against-flags.json

flags.json

@@ -1,68 +1,30 @@
 {
-  "$schema": "./flags-schema.json",
+  "$schema": "https://raw.githubusercontent.com/open-feature/cli/refs/heads/main/schema/v0/flag-manifest.json",
   "flags": {
+    "free-shipping-banner": {
+      "flagType": "boolean",
+      "description": "Controls the free shipping banner on the website. SHOP-4287",
+      "defaultValue": false
+    },
     "offer-free-shipping": {
-      "description": "Add free shipping to the UI.",
-      "defaultValue": false,
       "flagType": "boolean",
-      "state": "ENABLED",
-      "variants": {
-        "on": true,
-        "off": false
-      },
-      "defaultVariant": "on"
+      "description": "Add free shipping to the UI.",
+      "defaultValue": false
     },
     "sticky-header": {
-      "description": "Make the header stay at the top of the page while scrolling.",
-      "state": "ENABLED",
       "flagType": "boolean",
-      "variants": {
-        "on": true,
-        "off": false
-      },
-      "defaultValue": false,
-      "targeting": {
-        "if": [{ "==": [{ "var": "size" }, "sm"]}, "on", null ]
-      },
-      "defaultVariant": "on"
+      "description": "Make the header stay at the top of the page while scrolling.",
+      "defaultValue": false
     },
     "use-distributed-db": {
+      "defaultValue": true,
       "description": "When on, use postgres else sqlite.",
-      "state": "ENABLED",
-      "flagType": "boolean",
-      "defaultValue": false,
-      "variants": {
-        "on": true,
-        "off": false
-      },
-      "targeting": {
-        "fractional": [
-          [
-            "on",
-            1
-          ],
-          [
-            "off",
-            3
-          ]
-        ]
-      },
-      "defaultVariant": "off"
+      "flagType": "boolean"
     },
     "use-secure-protocol": {
-      "description": "When on, use a secure connection to the database. This only applies when use-distributed-db is on.",
-      "state": "ENABLED",
-      "flagType": "boolean",
       "defaultValue": false,
-      "variants": {
-        "on": true,
-        "off": false
-      },
-      "defaultVariant": "off"
+      "description": "When on, use a secure connection to the database. This only applies when use-distributed-db is on.",
+      "flagType": "boolean"
     }
-  },
-  "metadata": {
-    "flagSetId": "toggle-shop/dev",
-    "version": "1"
   }
-}
+}

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,47 +3,66 @@
 import {
   type ReactFlagEvaluationOptions,
   type ReactFlagEvaluationNoSuspenseOptions,
+  type FlagQuery,
   useFlag,
   useSuspenseFlag,
 } 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.
-* 
-* **Details:**
-* - flag key: `offer-free-shipping`
-* - default value: `false`
-* - type: `boolean`
-*/
-export const useOfferFreeShipping = (options?: ReactFlagEvaluationOptions) => {
-  return useFlag("offer-free-shipping", false, options);
+ * Controls the free shipping banner on the website. SHOP-4287
+ *
+ * **Details:**
+ * - flag key: `free-shipping-banner`
+ * - default value: `false`
+ * - type: `boolean`
+ */
+export const useFreeShippingBanner = (
+  options?: ReactFlagEvaluationOptions
+): FlagQuery<boolean> => {
+  return useFlag(FlagKeys.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(FlagKeys.FREE_SHIPPING_BANNER, false, options);
 };
 
 /**
-* Make the header stay at the top of the page while scrolling.
-* 
-* **Details:**
-* - flag key: `sticky-header`
-* - default value: `false`
-* - type: `boolean`
-*/
-export const useStickyHeader = (options?: ReactFlagEvaluationOptions) => {
-  return useFlag("sticky-header", false, options);
+ * Make the header stay at the top of the page while scrolling.
+ *
+ * **Details:**
+ * - flag key: `sticky-header`
+ * - default value: `false`
+ * - type: `boolean`
+ */
+export const useStickyHeader = (
+  options?: ReactFlagEvaluationOptions
+): FlagQuery<boolean> => {
+  return useFlag(FlagKeys.STICKY_HEADER, false, options);
 };
 
 /**
@@ -57,20 +76,24 @@ 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) => {
-  return useSuspenseFlag("sticky-header", false, options);
+export const useSuspenseStickyHeader = (
+  options?: ReactFlagEvaluationNoSuspenseOptions
+): FlagQuery<boolean> => {
+  return useSuspenseFlag(FlagKeys.STICKY_HEADER, false, options);
 };
 
 /**
-* When on, use postgres else sqlite.
-* 
-* **Details:**
-* - flag key: `use-distributed-db`
-* - default value: `false`
-* - type: `boolean`
-*/
-export const useUseDistributedDb = (options?: ReactFlagEvaluationOptions) => {
-  return useFlag("use-distributed-db", false, options);
+ * When on, use postgres else sqlite.
+ *
+ * **Details:**
+ * - flag key: `use-distributed-db`
+ * - default value: `false`
+ * - type: `boolean`
+ */
+export const useUseDistributedDb = (
+  options?: ReactFlagEvaluationOptions
+): FlagQuery<boolean> => {
+  return useFlag(FlagKeys.USE_DISTRIBUTED_DB, false, options);
 };
 
 /**
@@ -84,20 +107,24 @@ 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) => {
-  return useSuspenseFlag("use-distributed-db", false, options);
+export const useSuspenseUseDistributedDb = (
+  options?: ReactFlagEvaluationNoSuspenseOptions
+): FlagQuery<boolean> => {
+  return useSuspenseFlag(FlagKeys.USE_DISTRIBUTED_DB, false, options);
 };
 
 /**
-* When on, use a secure connection to the database. This only applies when use-distributed-db is on.
-* 
-* **Details:**
-* - flag key: `use-secure-protocol`
-* - default value: `false`
-* - type: `boolean`
-*/
-export const useUseSecureProtocol = (options?: ReactFlagEvaluationOptions) => {
-  return useFlag("use-secure-protocol", false, options);
+ * When on, use a secure connection to the database. This only applies when use-distributed-db is on.
+ *
+ * **Details:**
+ * - flag key: `use-secure-protocol`
+ * - default value: `false`
+ * - type: `boolean`
+ */
+export const useUseSecureProtocol = (
+  options?: ReactFlagEvaluationOptions
+): FlagQuery<boolean> => {
+  return useFlag(FlagKeys.USE_SECURE_PROTOCOL, false, options);
 };
 
 /**
@@ -111,6 +138,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) => {
-  return useSuspenseFlag("use-secure-protocol", false, options);
+export const useSuspenseUseSecureProtocol = (options?: ReactFlagEvaluationNoSuspenseOptions): FlagQuery<boolean> => {
+  return useSuspenseFlag(FlagKeys.USE_SECURE_PROTOCOL, false, options);
 };