update schematic-next-example to use new react provider

package.json

@@ -11,8 +11,7 @@
   },
   "dependencies": {
     "@clerk/nextjs": "^7.2.1",
-    "@schematichq/schematic-components": "2.12.0",
-    "@schematichq/schematic-react": "1.3.1",
+    "@schematichq/schematic-react": "^1.3.1",
     "@schematichq/schematic-typescript-node": "^1.4.4",
     "@stripe/react-stripe-js": "^5.6.1",
     "axios": "^1.15.0",

src/app/custom-checkout/page.tsx

@@ -4,11 +4,8 @@ import { useCallback, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import {
   CheckoutDialog,
-  EmbedProvider,
   useEmbed,
-} from "@schematichq/schematic-components";
-
-import { embedSettings } from "../embedSettings";
+} from "@schematichq/schematic-react/components";
 
 function CheckoutButton({
   error,
@@ -97,14 +94,14 @@ function Checkout() {
 
 export default function CustomCheckout() {
   return (
-    <EmbedProvider settings={{ ...embedSettings }}>
+    <>
       <div className="flex flex-col justify-center items-center">
         <h1 className="text-2xl mb-4 text-center max-w-160">
           This button will launch a checkout with the <b>Pro Plan</b>{" "}
           pre-selected and drop you straight into checkout.
         </h1>
         <Checkout />
       </div>
-    </EmbedProvider>
+    </>
   );
 }

src/app/embedSettings.ts

@@ -1,4 +1,4 @@
-import { type EmbedSettings } from "@schematichq/schematic-components";
+import { type EmbedSettings } from "@schematichq/schematic-react/components";
 
 import { type DeepPartial } from "@/types";
 

src/app/globals.css

@@ -35,6 +35,10 @@
     --foreground-rgb: 0, 0, 0;
     --background-start-rgb: 214, 219, 220;
     --background-end-rgb: 255, 255, 255;
+
+    .schematic-usage-meter {
+      border-radius: 0.25rem;
+    }
   }
 
   @media (prefers-color-scheme: dark) {

src/app/pricing/page.tsx

@@ -1,25 +1,12 @@
 "use client";
 
-import { EmbedProvider, PricingTable } from "@schematichq/schematic-components";
-
-import { embedSettings } from "../embedSettings";
+import { PricingTable } from "@schematichq/schematic-react/components";
 
 export default function Pricing() {
-  const apiKey = process.env.NEXT_PUBLIC_SCHEMATIC_PUBLISHABLE_KEY;
-  const apiUrl = process.env.NEXT_PUBLIC_SCHEMATIC_API_URL;
-  const apiConfig = apiUrl ? { basePath: apiUrl } : undefined;
-
   return (
-    <EmbedProvider
-      apiKey={apiKey}
-      apiConfig={apiConfig}
-      settings={{
-        ...embedSettings,
-        badge: { alignment: "start", visibility: "visible" },
-      }}
-    >
+    <>
       <h1 className="text-2xl font-bold mb-4">Pricing</h1>
       <PricingTable callToActionUrl="/usage" />
-    </EmbedProvider>
+    </>
   );
 }

src/app/usage/page.tsx

@@ -1,10 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import {
-  EmbedProvider,
-  SchematicEmbed,
-} from "@schematichq/schematic-components";
+import { SchematicEmbed } from "@schematichq/schematic-react/components";
 
 import Loader from "../../components/Loader";
 
@@ -62,13 +59,10 @@ export default function UsageAndPlan() {
     );
   }
 
-  const apiUrl = process.env.NEXT_PUBLIC_SCHEMATIC_API_URL;
-  const apiConfig = apiUrl ? { basePath: apiUrl } : undefined;
-
   return (
-    <EmbedProvider apiConfig={apiConfig} debug>
+    <>
       <h1 className="text-2xl font-bold mb-4">Usage & Plan</h1>
       <SchematicEmbed accessToken={accessToken} id={componentId} />
-    </EmbedProvider>
+    </>
   );
 }

src/components/ClientWrapper.tsx

@@ -52,12 +52,16 @@ export default function ClientWrapper({
     setIsClientSide(true);
   }, []);
 
+  const apiUrl = process.env.NEXT_PUBLIC_SCHEMATIC_API_URL;
+  const apiConfig = apiUrl ? { basePath: apiUrl } : undefined;
+
   return (
     <ClerkProvider>
       {isClientSide ? (
         <SchematicProvider
           publishableKey={schematicPubKey}
-          apiUrl={process.env.NEXT_PUBLIC_SCHEMATIC_API_URL}
+          apiConfig={apiConfig}
+          apiUrl={apiUrl}
           eventUrl={process.env.NEXT_PUBLIC_SCHEMATIC_EVENT_URL}
           webSocketUrl={process.env.NEXT_PUBLIC_SCHEMATIC_WEBSOCKET_URL}
         >

src/components/Weather.tsx

@@ -9,6 +9,7 @@ import {
   useSchematicFlag,
   useSchematicEntitlement,
   useSchematicIsPending,
+  UsageMeter,
   UsagePeriod,
 } from "@schematichq/schematic-react";
 
@@ -61,14 +62,15 @@ const Weather: React.FC = () => {
   const { track } = useSchematicEvents();
   const schematicIsPending = useSchematicIsPending();
   const humidityFlag = useSchematicFlag("humidity");
+  const weatherSearch = useSchematicEntitlement("weather-search");
   const {
     featureAllocation: weatherSearchAllocation,
     featureUsage: weatherSearchUsage,
     featureUsageExceeded: weatherSearchUsageExceeded,
     featureUsagePeriod: weatherSearchUsagePeriod,
     featureUsageResetAt: weatherSearchUsageResetAt,
     value: weatherSearchFlag,
-  } = useSchematicEntitlement("weather-search");
+  } = weatherSearch;
   const windSpeedFlag = useSchematicFlag("wind-speed");
   const addPinnedLocationFlag = useSchematicFlag("pinned-locations");
   const { organization } = useOrganization();
@@ -231,6 +233,7 @@ const Weather: React.FC = () => {
           typeof weatherSearchUsage !== "undefined" &&
           typeof weatherSearchAllocation !== "undefined" && (
             <div className="usage-pill">
+              <UsageMeter flag="weather-search" />
               {weatherSearchUsage} / {weatherSearchAllocation} used
             </div>
           )}
@@ -330,7 +333,6 @@ const Weather: React.FC = () => {
         }
         .weather-container {
           flex: 1;
-          text-align: center;
           padding: 30px;
           border: 1px solid #333;
           border-radius: 10px;
@@ -340,13 +342,17 @@ const Weather: React.FC = () => {
           position: relative;
         }
         .usage-pill {
+          display: inline-flex;
+          flex-direction: column;
+          gap: 4px;
           float: right;
           background-color: rgba(0, 0, 0, 0.4);
           color: rgba(255, 255, 255, 0.9);
-          padding: 5px 10px;
+          padding: 12px 12px 8px;
           margin: -15px -15px 0 20px;
           border-radius: 15px;
           font-size: 12px;
+          line-height: 1;
           border: 1px solid rgba(255, 255, 255, 0.2);
         }
         .search-container {
@@ -378,6 +384,7 @@ const Weather: React.FC = () => {
         }
         .weather-info {
           font-family: Arial, sans-serif;
+          text-align: center;
           padding: 20px;
         }
         .description {