@hayanmind/monetai-react-native 0.3.0 → 0.4.0

package/lib/typescript/module/src/components/paywall-wrappers/CompactPaywallWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompactPaywallWrapper.d.ts","sourceRoot":"","sources":["../../../../../../src/components/paywall-wrappers/CompactPaywallWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,0BAA0B;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAGD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAiBtE,CAAC;AA+BF,eAAe,qBAAqB,CAAC"}

package/lib/typescript/module/src/components/paywall-wrappers/HighlightBenefitsPaywallWrapper.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface HighlightBenefitsPaywallWrapperProps {
+    onClose: () => void;
+    children: React.ReactNode;
+}
+export declare const HighlightBenefitsPaywallWrapper: React.FC<HighlightBenefitsPaywallWrapperProps>;
+export default HighlightBenefitsPaywallWrapper;
+//# sourceMappingURL=HighlightBenefitsPaywallWrapper.d.ts.map

package/lib/typescript/module/src/components/paywall-wrappers/HighlightBenefitsPaywallWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightBenefitsPaywallWrapper.d.ts","sourceRoot":"","sources":["../../../../../../src/components/paywall-wrappers/HighlightBenefitsPaywallWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,oCAAoC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAGD,eAAO,MAAM,+BAA+B,EAAE,KAAK,CAAC,EAAE,CACpD,oCAAoC,CAKrC,CAAC;AAcF,eAAe,+BAA+B,CAAC"}

package/lib/typescript/module/src/components/paywall-wrappers/KeyFeatureSummaryPaywallWrapper.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface KeyFeatureSummaryPaywallWrapperProps {
+    onClose: () => void;
+    children: React.ReactNode;
+}
+export declare const KeyFeatureSummaryPaywallWrapper: React.FC<KeyFeatureSummaryPaywallWrapperProps>;
+export default KeyFeatureSummaryPaywallWrapper;
+//# sourceMappingURL=KeyFeatureSummaryPaywallWrapper.d.ts.map

package/lib/typescript/module/src/components/paywall-wrappers/KeyFeatureSummaryPaywallWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyFeatureSummaryPaywallWrapper.d.ts","sourceRoot":"","sources":["../../../../../../src/components/paywall-wrappers/KeyFeatureSummaryPaywallWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,oCAAoC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAGD,eAAO,MAAM,+BAA+B,EAAE,KAAK,CAAC,EAAE,CACpD,oCAAoC,CAKrC,CAAC;AAcF,eAAe,+BAA+B,CAAC"}

package/lib/typescript/module/src/components/paywall-wrappers/TextFocusedPaywallWrapper.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface TextFocusedPaywallWrapperProps {
+    onClose: () => void;
+    children: React.ReactNode;
+}
+export declare const TextFocusedPaywallWrapper: React.FC<TextFocusedPaywallWrapperProps>;
+export default TextFocusedPaywallWrapper;
+//# sourceMappingURL=TextFocusedPaywallWrapper.d.ts.map

package/lib/typescript/module/src/components/paywall-wrappers/TextFocusedPaywallWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFocusedPaywallWrapper.d.ts","sourceRoot":"","sources":["../../../../../../src/components/paywall-wrappers/TextFocusedPaywallWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,8BAA8B;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAGD,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAC9C,8BAA8B,CAK/B,CAAC;AAcF,eAAe,yBAAyB,CAAC"}

package/lib/typescript/module/src/components/paywall-wrappers/index.d.ts

@@ -0,0 +1,6 @@
+export { default as CompactPaywallWrapper } from './CompactPaywallWrapper';
+export { default as HighlightBenefitsPaywallWrapper } from './HighlightBenefitsPaywallWrapper';
+export { default as KeyFeatureSummaryPaywallWrapper } from './KeyFeatureSummaryPaywallWrapper';
+export { default as TextFocusedPaywallWrapper } from './TextFocusedPaywallWrapper';
+export { default } from './CompactPaywallWrapper';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/components/paywall-wrappers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/paywall-wrappers/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,mCAAmC,CAAC;AAC/F,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,mCAAmC,CAAC;AAC/F,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAGnF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC"}

package/lib/typescript/module/src/constants/paywall.d.ts

@@ -0,0 +1,3 @@
+export declare const PAYWELL_BASE_URL = "https://dashboard.monetai.io/webview";
+export declare const WEBVIEW_USER_AGENT = "MonetaiSDK";
+//# sourceMappingURL=paywall.d.ts.map

package/lib/typescript/module/src/constants/paywall.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paywall.d.ts","sourceRoot":"","sources":["../../../../../src/constants/paywall.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,gBAAgB,yCAAyC,CAAC;AAEvE,eAAO,MAAM,kBAAkB,eAAe,CAAC"}

package/lib/typescript/module/src/hooks/useBanner.d.ts

@@ -0,0 +1,14 @@
+import type { BannerParams, DiscountInfo, PaywallConfig } from '../types';
+interface UseBannerProps {
+    paywallConfig?: PaywallConfig;
+    discountInfo: DiscountInfo | null;
+}
+interface UseBannerReturn {
+    bannerVisible: boolean;
+    openBanner: () => void;
+    closeBanner: () => void;
+    bannerParams: BannerParams | null;
+}
+export declare const useBanner: ({ paywallConfig, discountInfo, }: UseBannerProps) => UseBannerReturn;
+export {};
+//# sourceMappingURL=useBanner.d.ts.map

package/lib/typescript/module/src/hooks/useBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBanner.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useBanner.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAM1E,UAAU,cAAc;IACtB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;CACnC;AAED,UAAU,eAAe;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,SAAS,GAAI,kCAGvB,cAAc,KAAG,eAuFnB,CAAC"}

package/lib/typescript/module/src/hooks/useInterval.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Custom hook for setting up an interval that can be paused/resumed
+ * @param callback Function to call on each interval
+ * @param delay Delay in milliseconds, null to pause
+ */
+export declare const useInterval: (callback: () => void, delay: number | null) => void;
+//# sourceMappingURL=useInterval.d.ts.map

package/lib/typescript/module/src/hooks/useInterval.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useInterval.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,IAAI,EAAE,OAAO,MAAM,GAAG,IAAI,SAqBrE,CAAC"}

package/lib/typescript/module/src/hooks/usePaywall.d.ts

@@ -0,0 +1,15 @@
+import type { PaywallParams, PaywallConfig, DiscountInfo } from '../types';
+interface UsePaywallProps {
+    paywallConfig?: PaywallConfig;
+    discountInfo: DiscountInfo | null;
+    onClose?: () => void;
+}
+interface UsePaywallReturn {
+    paywallVisible: boolean;
+    paywallParams: PaywallParams | null;
+    openPaywall: () => void;
+    closePaywall: () => void;
+}
+export declare const usePaywall: ({ paywallConfig, discountInfo, onClose, }: UsePaywallProps) => UsePaywallReturn;
+export {};
+//# sourceMappingURL=usePaywall.d.ts.map

package/lib/typescript/module/src/hooks/usePaywall.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaywall.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/usePaywall.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE3E,UAAU,eAAe;IACvB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,gBAAgB;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IACpC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,UAAU,GAAI,2CAIxB,eAAe,KAAG,gBAoDpB,CAAC"}

package/lib/typescript/module/src/index.d.ts

@@ -1,5 +1,11 @@
 import MonetaiSDK from './MonetaiSDK';
 import MonetaiProvider from './MonetaiProvider';
+import Banner from './components/Banner';
+import Paywall from './components/Paywall';
+import { CompactPaywallWrapper, HighlightBenefitsPaywallWrapper, KeyFeatureSummaryPaywallWrapper, TextFocusedPaywallWrapper } from './components/paywall-wrappers';
+import { useBanner } from './hooks/useBanner';
+import { usePaywall } from './hooks/usePaywall';
 export default MonetaiSDK;
-export { MonetaiProvider };
+export { MonetaiProvider, Banner, Paywall, useBanner, usePaywall, CompactPaywallWrapper, HighlightBenefitsPaywallWrapper, KeyFeatureSummaryPaywallWrapper, TextFocusedPaywallWrapper, };
+export type { ABTestGroup, PredictResult, EventParams, LogEventOptions, DiscountInfo, AppUserDiscountResponse, PaywallConfig, Feature, BannerParams, PaywallParams, PaywallStyle, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,eAAe,UAAU,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EACL,qBAAqB,EACrB,+BAA+B,EAC/B,+BAA+B,EAC/B,yBAAyB,EAC1B,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,eAAe,UAAU,CAAC;AAC1B,OAAO,EACL,eAAe,EACf,MAAM,EACN,OAAO,EACP,SAAS,EACT,UAAU,EACV,qBAAqB,EACrB,+BAA+B,EAC/B,+BAA+B,EAC/B,yBAAyB,GAC1B,CAAC;AAGF,YAAY,EACV,WAAW,EACX,aAAa,EACb,WAAW,EACX,eAAe,EACf,YAAY,EACZ,uBAAuB,EACvB,aAAa,EACb,OAAO,EACP,YAAY,EACZ,aAAa,EACb,YAAY,GACb,MAAM,SAAS,CAAC"}

package/lib/typescript/module/src/types.d.ts

@@ -1,5 +1,11 @@
 export type ABTestGroup = 'baseline' | 'monetai' | 'unknown';
 export type PredictResult = 'non-purchaser' | 'purchaser' | null;
+export type PaywallStyle = 'compact' | 'highlight-benefits' | 'key-feature-summary' | 'text-focused';
+export interface Feature {
+    title: string;
+    description: string;
+    isPremiumOnly?: boolean;
+}
 export interface EventParams {
     [key: string]: any;
 }
@@ -15,10 +21,50 @@ export interface DiscountInfo {
 }
 export interface AppUserDiscountResponse {
     id: number;
-    started_at: Date;
-    ended_at: Date;
+    started_at: string;
+    ended_at: string;
     app_user_id: string;
     sdk_key: string;
     created_at: Date;
 }
+export interface PaywallConfig {
+    enabled: boolean;
+    isSubscriber: boolean;
+    locale: string;
+    discountPercent: number;
+    style: PaywallStyle;
+    bannerBottom?: number;
+    bannerZIndex?: number;
+    bannerElevation?: number;
+    paywallZIndex?: number;
+    paywallElevation?: number;
+    regularPrice: string;
+    discountedPrice: string;
+    features?: Feature[];
+    onPurchase?: (closePaywall: () => void) => void;
+    onTermsOfService?: () => void;
+    onPrivacyPolicy?: () => void;
+}
+export interface PaywallParams {
+    discountPercent: string;
+    endedAt: string;
+    regularPrice: string;
+    discountedPrice: string;
+    locale: string;
+    style: PaywallStyle;
+    features?: Feature[];
+    zIndex?: number;
+    elevation?: number;
+}
+export interface BannerParams {
+    enabled: boolean;
+    isSubscriber: boolean;
+    locale: string;
+    discountPercent: number;
+    endedAt: Date;
+    style: PaywallStyle;
+    bottom?: number;
+    zIndex?: number;
+    elevation?: number;
+}
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/module/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAC7D,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG,WAAW,GAAG,IAAI,CAAC;AAEjE,MAAM,WAAW,WAAW;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,uBAAuB;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,IAAI,CAAC;IACjB,QAAQ,EAAE,IAAI,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,IAAI,CAAC;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAC7D,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG,WAAW,GAAG,IAAI,CAAC;AAGjE,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,oBAAoB,GACpB,qBAAqB,GACrB,cAAc,CAAC;AAGnB,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,WAAW;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,uBAAuB;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,IAAI,CAAC;CAClB;AAGD,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,YAAY,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IAGrB,UAAU,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAChD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,aAAa;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IAErB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,YAAY,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hayanmind/monetai-react-native",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Unlock hidden app revenue with AI from non-converting users",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",
@@ -80,13 +80,15 @@
     "react": "19.0.0",
     "react-native": "0.78.2",
     "react-native-builder-bob": "^0.40.10",
+    "react-native-webview": "^13.15.0",
     "release-it": "^17.10.0",
     "turbo": "^1.10.7",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-webview": "*"
   },
   "workspaces": [
     "example"

package/src/MonetaiProvider.tsx

@@ -1,22 +1,30 @@
 // MonetaiProvider.tsx
-import { useEffect, useState, type ReactNode } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
 import { StyleSheet, View } from 'react-native';
 import monetaiSDK from './MonetaiSDK';
-import type { DiscountInfo } from './types';
+import type { DiscountInfo, PaywallConfig } from './types';
 import { getAppUserDiscount } from './ApiRequest';
+import PaywallManager from './PaywallManager';
+import dayjs from 'dayjs';
+import isBetween from 'dayjs/plugin/isBetween';
+
+// dayjs 플러그인 확장
+dayjs.extend(isBetween);
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
 });
 
 type MonetaiProviderProps = {
-  banner?: {
-    title: string;
-    discountTitle: string;
-    onPress: () => void;
-  };
   children: ReactNode;
   onDiscountInfoChange?: (discountInfo: DiscountInfo | null) => void;
+  paywallConfig?: PaywallConfig; // 통합된 설정 (optional)
 };
 
 /**
@@ -26,43 +34,57 @@ type MonetaiProviderProps = {
 export default function MonetaiProvider({
   children,
   onDiscountInfoChange,
+  paywallConfig, // 통합된 설정
 }: MonetaiProviderProps) {
   const [discountInfo, setDiscountInfo] = useState<DiscountInfo | null>(null);
 
+  const onLoadDiscountInfo = useCallback(async () => {
+    const userId = await monetaiSDK.getUserId();
+    const sdkKey = await monetaiSDK.getSdkKey();
+
+    if (userId == null || sdkKey == null) {
+      console.warn('onLoadDiscountInfo: User ID or SDK Key is not set.');
+      return;
+    }
+
+    const discount = await getAppUserDiscount({ userId, sdkKey });
+    if (discount != null && discount.app_user_id !== userId) {
+      return;
+    }
+
+    const newDiscountInfo =
+      discount == null
+        ? null
+        : {
+            startedAt: new Date(discount.started_at),
+            endedAt: new Date(discount.ended_at),
+            userId: discount.app_user_id,
+            sdkKey: discount.sdk_key,
+          };
+
+    setDiscountInfo(newDiscountInfo);
+  }, []);
+
   useEffect(() => {
-    const emitter = monetaiSDK.getEmitter();
-    const onLoadDiscountInfo = async () => {
+    (async () => {
       const userId = await monetaiSDK.getUserId();
       const sdkKey = await monetaiSDK.getSdkKey();
 
-      if (userId == null || sdkKey == null) {
-        console.warn('onLoadDiscountInfo: User ID or SDK Key is not set.');
-        return;
-      }
-
-      const discount = await getAppUserDiscount({ userId, sdkKey });
-      if (discount != null && discount.app_user_id !== userId) {
-        return;
+      if (userId != null && sdkKey != null) {
+        onLoadDiscountInfo();
       }
+    })();
+  }, [onLoadDiscountInfo]);
 
-      setDiscountInfo(
-        discount == null
-          ? null
-          : {
-              startedAt: discount.started_at,
-              endedAt: discount.ended_at,
-              userId: discount.app_user_id,
-              sdkKey: discount.sdk_key,
-            }
-      );
-    };
+  useEffect(() => {
+    const emitter = monetaiSDK.getEmitter();
 
     emitter.on('LOAD_DISCOUNT_INFO', onLoadDiscountInfo);
 
     return () => {
       emitter.off('LOAD_DISCOUNT_INFO', onLoadDiscountInfo);
     };
-  }, []);
+  }, [onLoadDiscountInfo]);
 
   useEffect(() => {
     if (onDiscountInfoChange) {
@@ -70,10 +92,31 @@ export default function MonetaiProvider({
     }
   }, [onDiscountInfoChange, discountInfo]);
 
+  const isPromotionActive = useMemo(() => {
+    return (
+      paywallConfig?.enabled &&
+      !paywallConfig.isSubscriber &&
+      discountInfo != null &&
+      dayjs().isBetween(
+        dayjs(discountInfo.startedAt),
+        dayjs(discountInfo.endedAt),
+        null,
+        '[]'
+      )
+    );
+  }, [discountInfo, paywallConfig]);
+
   return (
     <View style={styles.container}>
       {/** 자식(실제 앱 화면) 렌더 */}
       {children}
+
+      {isPromotionActive && paywallConfig != null && (
+        <PaywallManager
+          paywallConfig={paywallConfig}
+          discountInfo={discountInfo}
+        />
+      )}
     </View>
   );
 }

package/src/PaywallManager.tsx

@@ -0,0 +1,61 @@
+import Banner from './components/Banner';
+import Paywall from './components/Paywall';
+import { useBanner } from './hooks/useBanner';
+import { usePaywall } from './hooks/usePaywall';
+import type { DiscountInfo, PaywallConfig } from './types';
+
+const PaywallManager = ({
+  paywallConfig,
+  discountInfo,
+}: {
+  paywallConfig: PaywallConfig;
+  discountInfo: DiscountInfo | null;
+}) => {
+  // 배너 상태 관리 및 자동 표시 훅 사용
+  const { bannerVisible, bannerParams } = useBanner({
+    paywallConfig,
+    discountInfo,
+  });
+
+  // 페이월 상태 관리 훅 사용
+  const { paywallVisible, paywallParams, openPaywall, closePaywall } =
+    usePaywall({
+      discountInfo,
+      paywallConfig,
+    });
+
+  // 페이월 열기 (배너 닫기 + 페이월 열기)
+  const handlePaywall = () => {
+    openPaywall(); // 페이월 열기
+  };
+
+  // 구매 처리
+  const handlePurchase = () => {
+    paywallConfig?.onPurchase?.(closePaywall);
+  };
+
+  return (
+    <>
+      {bannerParams != null && (
+        <Banner
+          visible={bannerVisible}
+          onPaywall={handlePaywall}
+          bannerParams={bannerParams}
+        />
+      )}
+      {paywallParams && (
+        <Paywall
+          visible={paywallVisible}
+          params={paywallParams}
+          onClose={closePaywall}
+          onPurchase={handlePurchase}
+          onTermsOfService={paywallConfig?.onTermsOfService}
+          onPrivacyPolicy={paywallConfig?.onPrivacyPolicy}
+          preload
+        />
+      )}
+    </>
+  );
+};
+
+export default PaywallManager;

package/src/components/Banner.tsx

@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { WebView } from 'react-native-webview';
+import type { BannerParams } from '../types';
+import { PAYWELL_BASE_URL, WEBVIEW_USER_AGENT } from '../constants/paywall';
+
+const MESSAGE_KEY_CLICK_BANNER = 'CLICK_BANNER';
+
+export interface BannerProps {
+  visible: boolean;
+  onPaywall: () => void;
+  bannerParams: BannerParams;
+}
+
+const Banner: React.FC<BannerProps> = ({
+  visible,
+  onPaywall,
+  bannerParams,
+}) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hasWebViewError, setHasWebViewError] = useState(false);
+
+  const handleWebViewMessage = (event: any) => {
+    const message = event.nativeEvent.data;
+
+    if (message === MESSAGE_KEY_CLICK_BANNER) {
+      onPaywall();
+    }
+  };
+
+  const getBannerWebViewUrl = () => {
+    // Banner 컴포넌트에서 직접 URL 생성
+    const baseUrl = `${PAYWELL_BASE_URL}/banner`;
+    const bannerStyle = bannerParams.style;
+
+    // 기본 파라미터들
+    const params = new URLSearchParams();
+    params.append('discount', bannerParams.discountPercent.toString());
+    params.append('locale', bannerParams.locale);
+    params.append('endedAt', bannerParams.endedAt.toISOString());
+
+    const url = `${baseUrl}/${bannerStyle}?${params.toString()}`;
+
+    return url;
+  };
+  const isCompactStyle = bannerParams.style === 'compact';
+  const isKeyFeatureSummaryStyle = bannerParams.style === 'key-feature-summary';
+  const isHighlightBenefitsStyle = bannerParams.style === 'highlight-benefits';
+  const isTextFocusedStyle = bannerParams.style === 'text-focused';
+
+  if (!visible || hasWebViewError) return null;
+
+  return (
+    <View
+      style={[
+        styles.bannerContainer,
+        { bottom: bannerParams.bottom ?? 20 },
+        bannerParams.zIndex != null && { zIndex: bannerParams.zIndex },
+        bannerParams.elevation != null && { elevation: bannerParams.elevation },
+        isCompactStyle && styles.compactBannerContainer,
+        isKeyFeatureSummaryStyle && styles.keyFeatureSummaryBannerContainer,
+        isHighlightBenefitsStyle && styles.highlightBenefitsBannerContainer,
+        isCompactStyle && styles.noShadow,
+        isTextFocusedStyle && styles.redShadow,
+        isKeyFeatureSummaryStyle && styles.blackShadow,
+        isHighlightBenefitsStyle && styles.blackShadow,
+        isLoaded ? styles.visible : styles.hidden,
+      ]}
+      pointerEvents={isLoaded ? 'auto' : 'none'}
+    >
+      <View style={styles.innerRoundedContainer}>
+        <WebView
+          source={{ uri: getBannerWebViewUrl() }}
+          onMessage={handleWebViewMessage}
+          onLoadStart={() => setIsLoaded(false)}
+          onLoadEnd={() => setIsLoaded(true)}
+          onError={() => {
+            console.error('[MonetaiSDK] Banner WebView onError');
+            setHasWebViewError(true);
+          }}
+          onHttpError={() => {
+            console.error('[MonetaiSDK] Banner WebView onHttpError');
+            setHasWebViewError(true);
+          }}
+          javaScriptEnabled={true}
+          userAgent={WEBVIEW_USER_AGENT}
+          style={styles.webView}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  bannerContainer: {
+    position: 'absolute',
+    left: 12,
+    right: 12,
+    height: 45, // 기본 높이
+    backgroundColor: 'white',
+    borderRadius: 12, // 둥근 모서리
+    shadowColor: 'rgba(0, 0, 0, 0.25)',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 1,
+    shadowRadius: 10,
+    elevation: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1000,
+  },
+  compactBannerContainer: {
+    height: 68, // compact 스타일일 때 높이
+  },
+  noShadow: {
+    shadowColor: 'transparent',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+  },
+  webView: {
+    flex: 1,
+  },
+  visible: {
+    opacity: 1,
+  },
+  hidden: {
+    opacity: 0,
+  },
+  innerRoundedContainer: {
+    flex: 1,
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  keyFeatureSummaryBannerContainer: {
+    height: 56, // key-feature-summary 스타일일 때 높이
+  },
+  highlightBenefitsBannerContainer: {
+    height: 56, // highlight-benefits 스타일일 때 높이
+  },
+  blackShadow: {
+    shadowColor: 'rgba(0, 0, 0, 0.25)',
+  },
+  redShadow: {
+    shadowColor: 'rgba(228, 78, 72, 0.25)',
+  },
+});
+
+export default Banner;