@solvapay/react 1.0.1-preview.2 → 1.0.1-preview.3

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.tsx
@@ -985,6 +995,7 @@ var PaymentForm = ({
 };
 
 // src/components/ProductBadge.tsx
+var import_react6 = __toESM(require("react"), 1);
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ProductBadge = ({
   children,
@@ -992,8 +1003,14 @@ var ProductBadge = ({
   className
 }) => {
   const { purchases, loading, hasPaidPurchase, activePurchase } = usePurchase();
+  const [hasLoadedOnce, setHasLoadedOnce] = import_react6.default.useState(false);
+  import_react6.default.useEffect(() => {
+    if (!loading) {
+      setHasLoadedOnce(true);
+    }
+  }, [loading]);
   const planToDisplay = activePurchase?.productName || null;
-  const shouldShow = !loading && planToDisplay !== null;
+  const shouldShow = planToDisplay !== null && (!loading || hasLoadedOnce);
   if (children) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: children({ purchases, loading, displayPlan: planToDisplay, shouldShow }) });
   }
@@ -1032,35 +1049,35 @@ var PurchaseGate = ({ requirePlan, requireProduct, children }) => {
 };
 
 // src/components/PricingSelector.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/hooks/usePlans.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var plansCache = /* @__PURE__ */ new Map();
 var CACHE_DURATION2 = 5 * 60 * 1e3;
 function usePlans(options) {
   const { fetcher, productRef, filter, sortBy, autoSelectFirstPaid = false } = options;
-  const [plans, setPlans] = (0, import_react6.useState)([]);
-  const [loading, setLoading] = (0, import_react6.useState)(true);
-  const [error, setError] = (0, import_react6.useState)(null);
-  const [selectedPlanIndex, setSelectedPlanIndex] = (0, import_react6.useState)(0);
-  const fetcherRef = (0, import_react6.useRef)(fetcher);
-  const filterRef = (0, import_react6.useRef)(filter);
-  const sortByRef = (0, import_react6.useRef)(sortBy);
-  const autoSelectFirstPaidRef = (0, import_react6.useRef)(autoSelectFirstPaid);
-  (0, import_react6.useEffect)(() => {
+  const [plans, setPlans] = (0, import_react7.useState)([]);
+  const [loading, setLoading] = (0, import_react7.useState)(true);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [selectedPlanIndex, setSelectedPlanIndex] = (0, import_react7.useState)(0);
+  const fetcherRef = (0, import_react7.useRef)(fetcher);
+  const filterRef = (0, import_react7.useRef)(filter);
+  const sortByRef = (0, import_react7.useRef)(sortBy);
+  const autoSelectFirstPaidRef = (0, import_react7.useRef)(autoSelectFirstPaid);
+  (0, import_react7.useEffect)(() => {
     fetcherRef.current = fetcher;
   }, [fetcher]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     filterRef.current = filter;
   }, [filter]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     sortByRef.current = sortBy;
   }, [sortBy]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     autoSelectFirstPaidRef.current = autoSelectFirstPaid;
   }, [autoSelectFirstPaid]);
-  const fetchPlans = (0, import_react6.useCallback)(
+  const fetchPlans = (0, import_react7.useCallback)(
     async (force = false) => {
       if (!productRef) {
         setError(new Error("Product reference not configured"));
@@ -1138,13 +1155,13 @@ function usePlans(options) {
     },
     [productRef]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     fetchPlans();
   }, [fetchPlans]);
-  const selectedPlan = (0, import_react6.useMemo)(() => {
+  const selectedPlan = (0, import_react7.useMemo)(() => {
     return plans[selectedPlanIndex] || null;
   }, [plans, selectedPlanIndex]);
-  const selectPlan = (0, import_react6.useCallback)(
+  const selectPlan = (0, import_react7.useCallback)(
     (planRef) => {
       const index = plans.findIndex((p) => p.reference === planRef);
       if (index >= 0) {
@@ -1185,20 +1202,20 @@ var PricingSelector = ({
     autoSelectFirstPaid
   });
   const { plans } = plansHook;
-  const isPaidPlan = (0, import_react7.useCallback)(
+  const isPaidPlan = (0, import_react8.useCallback)(
     (planRef) => {
       const plan = plans.find((p) => p.reference === planRef);
       return plan ? (plan.price ?? 0) > 0 && !plan.isFreeTier : true;
     },
     [plans]
   );
-  const activePurchase = (0, import_react7.useMemo)(() => {
+  const activePurchase = (0, import_react8.useMemo)(() => {
     const activePurchases = purchases.filter((p) => p.status === "active");
     return activePurchases.sort(
       (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
     )[0] || null;
   }, [purchases]);
-  const isCurrentPlan = (0, import_react7.useCallback)(
+  const isCurrentPlan = (0, import_react8.useCallback)(
     (planRef) => {
       return activePurchase?.planSnapshot?.reference === planRef;
     },
@@ -1214,13 +1231,13 @@ var PricingSelector = ({
 var PlanSelector = PricingSelector;
 
 // src/hooks/usePurchaseStatus.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 function usePurchaseStatus() {
   const { purchases } = usePurchase();
-  const isPaidPurchase2 = (0, import_react8.useCallback)((p) => {
+  const isPaidPurchase2 = (0, import_react9.useCallback)((p) => {
     return (p.amount ?? 0) > 0;
   }, []);
-  const purchaseData = (0, import_react8.useMemo)(() => {
+  const purchaseData = (0, import_react9.useMemo)(() => {
     const cancelledPaidPurchases = purchases.filter((p) => {
       return p.status === "active" && p.cancelledAt && isPaidPurchase2(p);
     });
@@ -1233,7 +1250,7 @@ function usePurchaseStatus() {
       shouldShowCancelledNotice
     };
   }, [purchases, isPaidPurchase2]);
-  const formatDate = (0, import_react8.useCallback)((dateString) => {
+  const formatDate = (0, import_react9.useCallback)((dateString) => {
     if (!dateString) return null;
     return new Date(dateString).toLocaleDateString("en-US", {
       year: "numeric",
@@ -1241,7 +1258,7 @@ function usePurchaseStatus() {
       day: "numeric"
     });
   }, []);
-  const getDaysUntilExpiration = (0, import_react8.useCallback)((endDate) => {
+  const getDaysUntilExpiration = (0, import_react9.useCallback)((endDate) => {
     if (!endDate) return null;
     const now = /* @__PURE__ */ new Date();
     const expiration = new Date(endDate);

package/dist/index.d.cts

@@ -512,7 +512,8 @@ declare const PaymentForm: React$1.FC<PaymentFormProps>;
  * Displays purchase status with complete styling control.
  * Supports render props, custom components, or className patterns.
  *
- * Hidden while loading or when no active purchase exists to prevent flickering.
+ * Hidden before initial data load or when no active purchase exists.
+ * Remains visible during background refetches to avoid flickering.
  *
  * @example
  * ```tsx

package/dist/index.d.ts

@@ -512,7 +512,8 @@ declare const PaymentForm: React$1.FC<PaymentFormProps>;
  * Displays purchase status with complete styling control.
  * Supports render props, custom components, or className patterns.
  *
- * Hidden while loading or when no active purchase exists to prevent flickering.
+ * Hidden before initial data load or when no active purchase exists.
+ * Remains visible during background refetches to avoid flickering.
  *
  * @example
  * ```tsx

package/dist/index.js

@@ -920,6 +920,7 @@ var PaymentForm = ({
 };
 
 // src/components/ProductBadge.tsx
+import React4 from "react";
 import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
 var ProductBadge = ({
   children,
@@ -927,8 +928,14 @@ var ProductBadge = ({
   className
 }) => {
   const { purchases, loading, hasPaidPurchase, activePurchase } = usePurchase();
+  const [hasLoadedOnce, setHasLoadedOnce] = React4.useState(false);
+  React4.useEffect(() => {
+    if (!loading) {
+      setHasLoadedOnce(true);
+    }
+  }, [loading]);
   const planToDisplay = activePurchase?.productName || null;
-  const shouldShow = !loading && planToDisplay !== null;
+  const shouldShow = planToDisplay !== null && (!loading || hasLoadedOnce);
   if (children) {
     return /* @__PURE__ */ jsx5(Fragment2, { children: children({ purchases, loading, displayPlan: planToDisplay, shouldShow }) });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solvapay/react",
-  "version": "1.0.1-preview.2",
+  "version": "1.0.1-preview.3",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -51,7 +51,7 @@
     "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
     "vitest": "^4.1.2",
-    "@solvapay/server": "1.0.1-preview.2",
+    "@solvapay/server": "1.0.1-preview.3",
     "@solvapay/test-utils": "0.0.0"
   },
   "scripts": {