Skip to content

Commit d2d6b66

Browse files
beeme1mrbeeme1mr
committed
feat: add free shipping banner
Signed-off-by: Michael Beemer <beeme1mr@users.noreply.github.com>
1 parent f0b6259 commit d2d6b66

5 files changed

Lines changed: 103 additions & 106 deletions

File tree

‎.github/workflows/validate-flags.yaml‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,22 @@ jobs:
2424

2525
# Automatically compares against PR base branch (main)
2626
- name: Compare against base branch
27-
uses: open-feature/action@v0.0.2
27+
uses: open-feature/action@v0.0.6
2828
with:
2929
manifest: "flags.json"
30+
post-pr-comment: false
31+
32+
- name: debugging
33+
run: cat flags.json && cat against-flags.json
3034

3135
- name: Compare against remote manifest
32-
if: ${{ secrets.FLAGD_STUDIO_TOKEN != '' }} # Secret not accessible for PRs from forks
33-
uses: open-feature/action@v0.0.2
36+
# Secret not accessible for PRs from forks
37+
if: github.repository == github.event.repository.full_name
38+
uses: open-feature/action@v0.0.6
3439
with:
3540
manifest: "flags.json"
3641
against: "https://flagd-studio.onrender.com/api"
3742
auth-token: ${{ secrets.FLAGD_STUDIO_TOKEN }}
43+
44+
- name: debugging
45+
run: cat flags.json && cat against-flags.json

‎flags.json‎

Lines changed: 15 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,30 @@
11
{
2-
"$schema": "./flags-schema.json",
2+
"$schema": "https://raw.githubusercontent.com/open-feature/cli/refs/heads/main/schema/v0/flag-manifest.json",
33
"flags": {
4+
"free-shipping-banner": {
5+
"flagType": "boolean",
6+
"description": "Controls the free shipping banner on the website. SHOP-4287",
7+
"defaultValue": false
8+
},
49
"offer-free-shipping": {
5-
"description": "Add free shipping to the UI.",
6-
"defaultValue": false,
710
"flagType": "boolean",
8-
"state": "ENABLED",
9-
"variants": {
10-
"on": true,
11-
"off": false
12-
},
13-
"defaultVariant": "on"
11+
"description": "Add free shipping to the UI.",
12+
"defaultValue": false
1413
},
1514
"sticky-header": {
16-
"description": "Make the header stay at the top of the page while scrolling.",
17-
"state": "ENABLED",
1815
"flagType": "boolean",
19-
"variants": {
20-
"on": true,
21-
"off": false
22-
},
23-
"defaultValue": false,
24-
"targeting": {
25-
"if": [{ "==": [{ "var": "size" }, "sm"]}, "on", null ]
26-
},
27-
"defaultVariant": "on"
16+
"description": "Make the header stay at the top of the page while scrolling.",
17+
"defaultValue": false
2818
},
2919
"use-distributed-db": {
20+
"defaultValue": true,
3021
"description": "When on, use postgres else sqlite.",
31-
"state": "ENABLED",
32-
"flagType": "boolean",
33-
"defaultValue": false,
34-
"variants": {
35-
"on": true,
36-
"off": false
37-
},
38-
"targeting": {
39-
"fractional": [
40-
[
41-
"on",
42-
1
43-
],
44-
[
45-
"off",
46-
3
47-
]
48-
]
49-
},
50-
"defaultVariant": "off"
22+
"flagType": "boolean"
5123
},
5224
"use-secure-protocol": {
53-
"description": "When on, use a secure connection to the database. This only applies when use-distributed-db is on.",
54-
"state": "ENABLED",
55-
"flagType": "boolean",
5625
"defaultValue": false,
57-
"variants": {
58-
"on": true,
59-
"off": false
60-
},
61-
"defaultVariant": "off"
26+
"description": "When on, use a secure connection to the database. This only applies when use-distributed-db is on.",
27+
"flagType": "boolean"
6228
}
63-
},
64-
"metadata": {
65-
"flagSetId": "toggle-shop/dev",
66-
"version": "1"
6729
}
68-
}
30+
}

‎src/app/checkout/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { useSuspenseOfferFreeShipping } from "@/generated/react/openfeature";
3+
import { useSuspenseFreeShippingBanner } from "@/generated/react/openfeature";
44
import { useCart } from "@/hooks/use-cart";
55
import { setTargetingKeyHeader } from "@/libs/open-feature/evaluation-context";
66
import { TARGETING_KEY } from "@/libs/targeting-key";
@@ -15,7 +15,7 @@ import { useMemo, useReducer } from "react";
1515
export default function Checkout() {
1616
const { cartItems, removeFromCart, updateQuantity } = useCart();
1717
const { track } = useTrack();
18-
const { value: freeShipping } = useSuspenseOfferFreeShipping();
18+
const { value: freeShipping } = useSuspenseFreeShippingBanner();
1919

2020
useMemo(() => {
2121
track("visit_checkout");

‎src/app/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import Banner from "@/components/Banner";
1010
import heroImage from "../../public/img/hero.jpg";
1111

1212
import { useAutoAnimate } from "@formkit/auto-animate/react";
13-
import { useSuspenseOfferFreeShipping } from "@/generated/react/openfeature";
13+
import { useSuspenseFreeShippingBanner } from "@/generated/react/openfeature";
1414

1515
export default function Home() {
1616
const [parent] = useAutoAnimate();
17-
const { value: showBanner } = useSuspenseOfferFreeShipping();
17+
const { value: showBanner } = useSuspenseFreeShippingBanner();
1818

1919
return (
2020
<>

‎src/generated/react/openfeature.ts‎

Lines changed: 73 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,66 @@
33
import {
44
type ReactFlagEvaluationOptions,
55
type ReactFlagEvaluationNoSuspenseOptions,
6+
type FlagQuery,
67
useFlag,
78
useSuspenseFlag,
89
} from "@openfeature/react-sdk";
910

11+
// Flag key constants for programmatic access
12+
export const FlagKeys = {
13+
/** Flag key for Controls the free shipping banner on the website. SHOP-4287 */
14+
FREE_SHIPPING_BANNER: "free-shipping-banner",
15+
/** Flag key for Make the header stay at the top of the page while scrolling. */
16+
STICKY_HEADER: "sticky-header",
17+
/** Flag key for When on, use postgres else sqlite. */
18+
USE_DISTRIBUTED_DB: "use-distributed-db",
19+
/** Flag key for When on, use a secure connection to the database. This only applies when use-distributed-db is on. */
20+
USE_SECURE_PROTOCOL: "use-secure-protocol",
21+
} as const;
22+
1023
/**
11-
* Add free shipping to the UI.
12-
*
13-
* **Details:**
14-
* - flag key: `offer-free-shipping`
15-
* - default value: `false`
16-
* - type: `boolean`
17-
*/
18-
export const useOfferFreeShipping = (options?: ReactFlagEvaluationOptions) => {
19-
return useFlag("offer-free-shipping", false, options);
24+
* Controls the free shipping banner on the website. SHOP-4287
25+
*
26+
* **Details:**
27+
* - flag key: `free-shipping-banner`
28+
* - default value: `false`
29+
* - type: `boolean`
30+
*/
31+
export const useFreeShippingBanner = (
32+
options?: ReactFlagEvaluationOptions
33+
): FlagQuery<boolean> => {
34+
return useFlag(FlagKeys.FREE_SHIPPING_BANNER, false, options);
2035
};
2136

2237
/**
23-
* Add free shipping to the UI.
38+
* Controls the free shipping banner on the website. SHOP-4287
2439
*
2540
* **Details:**
26-
* - flag key: `offer-free-shipping`
41+
* - flag key: `free-shipping-banner`
2742
* - default value: `false`
2843
* - type: `boolean`
2944
*
3045
* Equivalent to useFlag with options: `{ suspend: true }`
3146
* @experimental — Suspense is an experimental feature subject to change in future versions.
3247
*/
33-
export const useSuspenseOfferFreeShipping = (options?: ReactFlagEvaluationNoSuspenseOptions) => {
34-
return useSuspenseFlag("offer-free-shipping", false, options);
48+
export const useSuspenseFreeShippingBanner = (
49+
options?: ReactFlagEvaluationNoSuspenseOptions
50+
): FlagQuery<boolean> => {
51+
return useSuspenseFlag(FlagKeys.FREE_SHIPPING_BANNER, false, options);
3552
};
3653

3754
/**
38-
* Make the header stay at the top of the page while scrolling.
39-
*
40-
* **Details:**
41-
* - flag key: `sticky-header`
42-
* - default value: `false`
43-
* - type: `boolean`
44-
*/
45-
export const useStickyHeader = (options?: ReactFlagEvaluationOptions) => {
46-
return useFlag("sticky-header", false, options);
55+
* Make the header stay at the top of the page while scrolling.
56+
*
57+
* **Details:**
58+
* - flag key: `sticky-header`
59+
* - default value: `false`
60+
* - type: `boolean`
61+
*/
62+
export const useStickyHeader = (
63+
options?: ReactFlagEvaluationOptions
64+
): FlagQuery<boolean> => {
65+
return useFlag(FlagKeys.STICKY_HEADER, false, options);
4766
};
4867

4968
/**
@@ -57,20 +76,24 @@ export const useStickyHeader = (options?: ReactFlagEvaluationOptions) => {
5776
* Equivalent to useFlag with options: `{ suspend: true }`
5877
* @experimental — Suspense is an experimental feature subject to change in future versions.
5978
*/
60-
export const useSuspenseStickyHeader = (options?: ReactFlagEvaluationNoSuspenseOptions) => {
61-
return useSuspenseFlag("sticky-header", false, options);
79+
export const useSuspenseStickyHeader = (
80+
options?: ReactFlagEvaluationNoSuspenseOptions
81+
): FlagQuery<boolean> => {
82+
return useSuspenseFlag(FlagKeys.STICKY_HEADER, false, options);
6283
};
6384

6485
/**
65-
* When on, use postgres else sqlite.
66-
*
67-
* **Details:**
68-
* - flag key: `use-distributed-db`
69-
* - default value: `false`
70-
* - type: `boolean`
71-
*/
72-
export const useUseDistributedDb = (options?: ReactFlagEvaluationOptions) => {
73-
return useFlag("use-distributed-db", false, options);
86+
* When on, use postgres else sqlite.
87+
*
88+
* **Details:**
89+
* - flag key: `use-distributed-db`
90+
* - default value: `false`
91+
* - type: `boolean`
92+
*/
93+
export const useUseDistributedDb = (
94+
options?: ReactFlagEvaluationOptions
95+
): FlagQuery<boolean> => {
96+
return useFlag(FlagKeys.USE_DISTRIBUTED_DB, false, options);
7497
};
7598

7699
/**
@@ -84,20 +107,24 @@ export const useUseDistributedDb = (options?: ReactFlagEvaluationOptions) => {
84107
* Equivalent to useFlag with options: `{ suspend: true }`
85108
* @experimental — Suspense is an experimental feature subject to change in future versions.
86109
*/
87-
export const useSuspenseUseDistributedDb = (options?: ReactFlagEvaluationNoSuspenseOptions) => {
88-
return useSuspenseFlag("use-distributed-db", false, options);
110+
export const useSuspenseUseDistributedDb = (
111+
options?: ReactFlagEvaluationNoSuspenseOptions
112+
): FlagQuery<boolean> => {
113+
return useSuspenseFlag(FlagKeys.USE_DISTRIBUTED_DB, false, options);
89114
};
90115

91116
/**
92-
* When on, use a secure connection to the database. This only applies when use-distributed-db is on.
93-
*
94-
* **Details:**
95-
* - flag key: `use-secure-protocol`
96-
* - default value: `false`
97-
* - type: `boolean`
98-
*/
99-
export const useUseSecureProtocol = (options?: ReactFlagEvaluationOptions) => {
100-
return useFlag("use-secure-protocol", false, options);
117+
* When on, use a secure connection to the database. This only applies when use-distributed-db is on.
118+
*
119+
* **Details:**
120+
* - flag key: `use-secure-protocol`
121+
* - default value: `false`
122+
* - type: `boolean`
123+
*/
124+
export const useUseSecureProtocol = (
125+
options?: ReactFlagEvaluationOptions
126+
): FlagQuery<boolean> => {
127+
return useFlag(FlagKeys.USE_SECURE_PROTOCOL, false, options);
101128
};
102129

103130
/**
@@ -111,6 +138,6 @@ export const useUseSecureProtocol = (options?: ReactFlagEvaluationOptions) => {
111138
* Equivalent to useFlag with options: `{ suspend: true }`
112139
* @experimental — Suspense is an experimental feature subject to change in future versions.
113140
*/
114-
export const useSuspenseUseSecureProtocol = (options?: ReactFlagEvaluationNoSuspenseOptions) => {
115-
return useSuspenseFlag("use-secure-protocol", false, options);
141+
export const useSuspenseUseSecureProtocol = (options?: ReactFlagEvaluationNoSuspenseOptions): FlagQuery<boolean> => {
142+
return useSuspenseFlag(FlagKeys.USE_SECURE_PROTOCOL, false, options);
116143
};

0 commit comments

Comments
 (0)