From 23c542d66ba09fb1e53ad1a62b2319cdc1a65ae8 Mon Sep 17 00:00:00 2001 From: Cole Chrzan Date: Tue, 7 Jul 2026 16:05:04 -0400 Subject: [PATCH 1/2] add trial pill and usage meter --- src/components/Navbar.tsx | 2 ++ src/components/TrialDetails.tsx | 20 +++++++++++++++ src/components/UsageDetails.tsx | 43 +++++++++++++++++++++++++++++++++ src/components/Weather.tsx | 16 ++++++------ 4 files changed, 73 insertions(+), 8 deletions(-) create mode 100644 src/components/TrialDetails.tsx create mode 100644 src/components/UsageDetails.tsx diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index aa427b7..dc00701 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -4,6 +4,7 @@ import Link from "next/link"; import { Show, UserButton } from "@clerk/nextjs"; import { isDemoMode } from "../utils/demoContext"; +import { TrialDetails } from "./TrialDetails"; const Navbar = () => { return ( @@ -42,6 +43,7 @@ const Navbar = () => { ) : ( + )} diff --git a/src/components/TrialDetails.tsx b/src/components/TrialDetails.tsx new file mode 100644 index 0000000..a690d61 --- /dev/null +++ b/src/components/TrialDetails.tsx @@ -0,0 +1,20 @@ +import { TrialPill } from "@schematichq/schematic-components"; +import { useSchematicPlan } from "@schematichq/schematic-react"; + +export const TrialDetails = () => { + const plan = useSchematicPlan(); + + return ( + + Trial ends + + + ); +}; diff --git a/src/components/UsageDetails.tsx b/src/components/UsageDetails.tsx new file mode 100644 index 0000000..5ed1304 --- /dev/null +++ b/src/components/UsageDetails.tsx @@ -0,0 +1,43 @@ +import { type CheckFlagReturn } from "@schematichq/schematic-react"; +import { UsageMeter } from "@schematichq/schematic-components"; + +export const UsageDetails = ({ + featureAllocation = 0, + featureUsage = 0, +}: CheckFlagReturn) => { + const percent = (featureUsage / featureAllocation) * 100; + + return ( + + {featureUsage > 0 && featureAllocation > 0 && ( + + + + )} + + {featureUsage} / {featureAllocation || "?"} used + + + + ); +}; diff --git a/src/components/Weather.tsx b/src/components/Weather.tsx index 5ae47da..0fe764e 100644 --- a/src/components/Weather.tsx +++ b/src/components/Weather.tsx @@ -13,6 +13,7 @@ import { import useSavedLocations from "../hooks/useSavedLocations"; import Loader from "./Loader"; +import { UsageDetails } from "./UsageDetails"; interface WeatherData { description: string; @@ -61,6 +62,7 @@ const Weather: React.FC = () => { const { track } = useSchematicEvents(); const schematicIsPending = useSchematicIsPending(); const humidityFlag = useSchematicFlag("humidity"); + const weatherSearch = useSchematicEntitlement("weather-search"); const { featureAllocation: weatherSearchAllocation, featureUsage: weatherSearchUsage, @@ -68,7 +70,7 @@ const Weather: React.FC = () => { featureUsagePeriod: weatherSearchUsagePeriod, featureUsageResetAt: weatherSearchUsageResetAt, value: weatherSearchFlag, - } = useSchematicEntitlement("weather-search"); + } = weatherSearch; const windSpeedFlag = useSchematicFlag("wind-speed"); const addPinnedLocationFlag = useSchematicFlag("pinned-locations"); const savedLocations = useSavedLocations(); @@ -225,13 +227,11 @@ const Weather: React.FC = () => { )}
- {!schematicIsPending && - typeof weatherSearchUsage !== "undefined" && - typeof weatherSearchAllocation !== "undefined" && ( -
- {weatherSearchUsage} / {weatherSearchAllocation} used -
- )} + {!schematicIsPending && ( +
+ +
+ )}
Date: Mon, 13 Jul 2026 11:08:47 -0400 Subject: [PATCH 2/2] tweaks --- src/components/TrialDetails.tsx | 23 +++++++++++++++++++++-- src/components/UsageDetails.tsx | 31 +++++++++++++++++++------------ src/components/Weather.tsx | 9 ++++++--- 3 files changed, 46 insertions(+), 17 deletions(-) diff --git a/src/components/TrialDetails.tsx b/src/components/TrialDetails.tsx index a690d61..7352eff 100644 --- a/src/components/TrialDetails.tsx +++ b/src/components/TrialDetails.tsx @@ -1,18 +1,37 @@ -import { TrialPill } from "@schematichq/schematic-components"; +import { TrialPill, useTrialPill } from "@schematichq/schematic-components"; import { useSchematicPlan } from "@schematichq/schematic-react"; export const TrialDetails = () => { const plan = useSchematicPlan(); + const trial = useTrialPill({ + trialEndDate: plan?.trialEndDate, + trialStatus: plan?.trialStatus, + }); return ( - Trial ends + {plan?.name} + + {plan?.trialEndDate && ( + + Trial ends in {trial.endDateLabel} + + )} + diff --git a/src/components/UsageDetails.tsx b/src/components/UsageDetails.tsx index 5ed1304..c3970ea 100644 --- a/src/components/UsageDetails.tsx +++ b/src/components/UsageDetails.tsx @@ -1,15 +1,16 @@ -import { type CheckFlagReturn } from "@schematichq/schematic-react"; import { UsageMeter } from "@schematichq/schematic-components"; -export const UsageDetails = ({ - featureAllocation = 0, - featureUsage = 0, -}: CheckFlagReturn) => { - const percent = (featureUsage / featureAllocation) * 100; +interface UsageDetailsProps { + value?: number; + max?: number; +} + +export const UsageDetails = ({ value = 0, max = 0 }: UsageDetailsProps) => { + const percent = (value / max) * 100; return ( - - {featureUsage > 0 && featureAllocation > 0 && ( + + {value > 0 && max > 0 && ( )} + - {featureUsage} / {featureAllocation || "?"} used + {value} / {max || "?"} used + diff --git a/src/components/Weather.tsx b/src/components/Weather.tsx index 0fe764e..dfcc603 100644 --- a/src/components/Weather.tsx +++ b/src/components/Weather.tsx @@ -228,8 +228,11 @@ const Weather: React.FC = () => { )}
{!schematicIsPending && ( -
- +
+
)}
@@ -337,7 +340,7 @@ const Weather: React.FC = () => { font-family: "Helvetica Neue", Arial, sans-serif; position: relative; } - .usage-pill { + .usage-floater { float: right; background-color: rgba(0, 0, 0, 0.4); color: rgba(255, 255, 255, 0.9);