diff --git a/.github/workflows/validate-flags.yaml b/.github/workflows/validate-flags.yaml index 5109493..9ad6d75 100644 --- a/.github/workflows/validate-flags.yaml +++ b/.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 diff --git a/flags.json b/flags.json index 534f6e7..73f0806 100644 --- a/flags.json +++ b/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" } -} +} \ No newline at end of file diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx index a3e156f..8eac033 100644 --- a/src/app/checkout/page.tsx +++ b/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"); diff --git a/src/app/page.tsx b/src/app/page.tsx index 2c4b5ce..04c51d4 100644 --- a/src/app/page.tsx +++ b/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 ( <> diff --git a/src/generated/react/openfeature.ts b/src/generated/react/openfeature.ts index f657a39..4c12ba8 100644 --- a/src/generated/react/openfeature.ts +++ b/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 => { + 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 => { + 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 => { + 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 => { + 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 => { + 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 => { + 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 => { + 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 => { + return useSuspenseFlag(FlagKeys.USE_SECURE_PROTOCOL, false, options); };