@chipmobilesdk/rn-payment 0.5.0 → 0.6.0

package/src/react/PaymentProvider.tsx

@@ -10,8 +10,8 @@ import React, {
 	createContext,
 	useContext,
 	useEffect,
-	useMemo,
 	useRef,
+	useState,
 	type PropsWithChildren,
 } from 'react';
 import { createEngine, type EngineDeps, type PaymentEngine } from '../engine/engine';
@@ -20,17 +20,35 @@ import type { PaymentConfig } from '../config/types';
 
 const PaymentContext = createContext<PaymentEngine | null>(null);
 
-export interface PaymentProviderProps {
+interface OwnedEngineProps {
 	config: PaymentConfig;
 	/**
-	 * Provider injection.
-	 *
-	 * Required until the real adapter ships; also how a test or the demo app
-	 * supplies the fake store. Keeping it explicit rather than defaulting to a
-	 * lazily-required binding means a missing native module is a clear
-	 * configuration error instead of a mysterious runtime failure.
+	 * The store provider and storage. Usually `{ provider: createStoreProvider() }`;
+	 * a test or the demo app supplies the fake store here.
 	 */
 	deps: EngineDeps;
+	/**
+	 * When this changes, the provider builds a new engine. Defaults to
+	 * `config.scopeToken`, so switching accounts gets a fresh one. `config` and
+	 * `deps` themselves are read when an engine is built and may be inline objects:
+	 * a new object on every render no longer reconnects to the store (PAY-07).
+	 */
+	engineKey?: string;
+	engine?: undefined;
+}
+
+interface ExternalEngineProps {
+	/**
+	 * An engine the app created and owns. The provider shares it with the tree and
+	 * neither initializes nor cleans it up.
+	 */
+	engine: PaymentEngine;
+	config?: undefined;
+	deps?: undefined;
+	engineKey?: undefined;
+}
+
+export type PaymentProviderProps = (OwnedEngineProps | ExternalEngineProps) & {
 	/** Skip automatic initialization when the app wants to control the moment. */
 	autoInitialize?: boolean;
 	/**
@@ -39,29 +57,60 @@ export interface PaymentProviderProps {
 	 * return is the app's decision (FR-059).
 	 */
 	syncOnForeground?: boolean;
-}
+};
 
-export function PaymentProvider({
-	config,
-	deps,
-	autoInitialize = true,
-	syncOnForeground = false,
-	children,
-}: PropsWithChildren<PaymentProviderProps>): React.ReactElement {
-	// Built once per config identity. Rebuilding on every render would reconnect
-	// to the billing service repeatedly, which FR-018 exists to prevent.
-	const engine = useMemo(() => createEngine(config, deps), [config, deps]);
-	const engineRef = useRef<PaymentEngine>(engine);
-	engineRef.current = engine;
+export function PaymentProvider(
+	props: PropsWithChildren<PaymentProviderProps>,
+): React.ReactElement {
+	const { autoInitialize = true, syncOnForeground = false, children } = props;
+	const external = props.engine;
+	const key = props.engine ? undefined : (props.engineKey ?? props.config.scopeToken);
+
+	// The latest config and deps, read only when an engine is built.
+	const latest = useRef(props);
+	latest.current = props;
+	const build = (): PaymentEngine => {
+		const current = latest.current;
+		if (current.engine) {
+			return current.engine;
+		}
+		return createEngine(current.config, current.deps);
+	};
+
+	// Built once, not once per render: validating the catalog and opening storage
+	// are not render work, and a new engine per render reconnected to the billing
+	// service every time the app's root re-rendered (FR-018, PAY-07).
+	const [owned, setOwned] = useState<PaymentEngine | null>(() => (external ? null : build()));
+	const builtFor = useRef(key);
+	const cleanedUp = useRef(new WeakSet<PaymentEngine>());
+	const engine = external ?? owned ?? build();
 
 	useEffect(() => {
+		if (external) {
+			// The app's engine, so the app's lifecycle.
+			return undefined;
+		}
+		const cleaned = cleanedUp.current;
+		// An engine cleaned up by an earlier run of this effect — StrictMode's
+		// mount-unmount-mount in development, or a changed `engineKey` — is never
+		// reused: it would answer every call with "cleaned up". A fresh one replaces
+		// it and this effect runs again for that one.
+		if (!owned || cleaned.has(owned) || builtFor.current !== key) {
+			builtFor.current = key;
+			setOwned(build());
+			return undefined;
+		}
 		if (autoInitialize) {
-			engine.initialize().catch(() => undefined);
+			owned.initialize().catch(() => undefined);
 		}
 		// Cleanup on unmount is the whole reason the provider owns the engine:
 		// after it, no event fires and no timer survives (FR-082).
-		return () => engine.cleanup();
-	}, [engine, autoInitialize]);
+		return () => {
+			cleaned.add(owned);
+			owned.cleanup();
+		};
+		// `build` reads the latest props through a ref, so it is not a dependency.
+	}, [external, owned, key, autoInitialize]);
 
 	useEffect(
 		() => (syncOnForeground ? watchForeground(engine) : undefined),

package/src/react/hooks.ts

@@ -9,13 +9,14 @@
  */
 
 import { useExternalStore } from '@chipmobilesdk/rn-core/react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { usePaymentEngine } from './PaymentProvider';
 import type {
 	EntitlementKey,
 	FinalizeResult,
 	PaymentStatus,
 	PendingPurchasesState,
+	ProductKey,
 	PurchaseOptions,
 	PurchaseResult,
 	TransactionRef,
@@ -89,7 +90,7 @@ export function usePaymentStatus(): PaymentStatus {
 }
 
 export interface UsePurchaseResult {
-	purchase: (productKey: EntitlementKey, options?: PurchaseOptions) => Promise<PurchaseResult>;
+	purchase: (productKey: ProductKey, options?: PurchaseOptions) => Promise<PurchaseResult>;
 	consume: (ref: TransactionRef) => Promise<FinalizeResult>;
 	isPurchasing: boolean;
 	/** The last outcome, so a screen can render cancellation differently from failure. */
@@ -157,9 +158,13 @@ export function useProducts(productKeys: readonly string[]): UseProductsResult {
 	// Joined so the effect depends on the contents rather than the array identity:
 	// a caller passing a literal would otherwise re-query on every render.
 	const keyToken = productKeys.join('|');
+	// Each load's number. Only the latest may write: when the keys change while a
+	// query is out, the older answer must not overwrite the newer one (PAY-20).
+	const latestRequest = useRef(0);
 
 	const load = useCallback(
 		async (fresh: boolean): Promise<void> => {
+			const request = ++latestRequest.current;
 			const keys = keyToken === '' ? [] : keyToken.split('|');
 			if (keys.length === 0) {
 				setProducts([]);
@@ -169,6 +174,9 @@ export function useProducts(productKeys: readonly string[]): UseProductsResult {
 			setIsLoading(true);
 			try {
 				const result = fresh ? await engine.refreshProducts(keys) : await engine.getProducts(keys);
+				if (request !== latestRequest.current) {
+					return;
+				}
 				if (result.ok) {
 					setProducts(result.products);
 					setMissing(result.missing);
@@ -177,7 +185,9 @@ export function useProducts(productKeys: readonly string[]): UseProductsResult {
 					setError(result.error);
 				}
 			} finally {
-				setIsLoading(false);
+				if (request === latestRequest.current) {
+					setIsLoading(false);
+				}
 			}
 		},
 		[engine, keyToken],