@hayanmind/monetai-react-native 0.3.0 → 0.4.0

package/src/components/Paywall.tsx

@@ -0,0 +1,254 @@
+import React, { useState } from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  View,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import { WebView } from 'react-native-webview';
+import type { PaywallParams } from '../types';
+import { PAYWELL_BASE_URL, WEBVIEW_USER_AGENT } from '../constants/paywall';
+import CompactPaywallWrapper from './paywall-wrappers/CompactPaywallWrapper';
+import HighlightBenefitsPaywallWrapper from './paywall-wrappers/HighlightBenefitsPaywallWrapper';
+import KeyFeatureSummaryPaywallWrapper from './paywall-wrappers/KeyFeatureSummaryPaywallWrapper';
+import TextFocusedPaywallWrapper from './paywall-wrappers/TextFocusedPaywallWrapper';
+
+const MESSAGE_KEY_PURCHASE_BUTTON = 'CLICK_PURCHASE_BUTTON';
+const MESSAGE_KEY_CLOSE_BUTTON = 'CLICK_CLOSE_BUTTON';
+const MESSAGE_KEY_TERMS_OF_SERVICE = 'CLICK_TERMS_OF_SERVICE';
+const MESSAGE_KEY_PRIVACY_POLICY = 'CLICK_PRIVACY_POLICY';
+
+interface PaywallProps {
+  visible: boolean;
+  // preload가 true면 보이지 않아도 마운트하여 WebView를 미리 로드
+  preload?: boolean;
+  onClose: () => void;
+  onPurchase: () => void;
+  onTermsOfService?: () => void;
+  onPrivacyPolicy?: () => void;
+  params: PaywallParams;
+}
+
+const Paywall: React.FC<PaywallProps> = ({
+  visible,
+  preload,
+  onClose,
+  onPurchase,
+  onTermsOfService,
+  onPrivacyPolicy,
+  params,
+}) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hasWebViewError, setHasWebViewError] = useState(false);
+  const handleWebViewMessage = (event: any) => {
+    switch (event.nativeEvent.data) {
+      case MESSAGE_KEY_PURCHASE_BUTTON:
+        onPurchase();
+        break;
+      case MESSAGE_KEY_CLOSE_BUTTON:
+        onClose();
+        break;
+      case MESSAGE_KEY_TERMS_OF_SERVICE:
+        onTermsOfService?.();
+        break;
+      case MESSAGE_KEY_PRIVACY_POLICY:
+        onPrivacyPolicy?.();
+        break;
+    }
+  };
+
+  const getPaywallWebViewUrl = () => {
+    // monetai-web의 현재 구조에 맞춰 URL 생성
+    // 각 스타일별로 별도의 페이지가 있으므로 직접 스타일을 URL에 포함
+    const baseUrl = `${PAYWELL_BASE_URL}/paywall`;
+    const paywallStyle = params.style;
+    const searchParams = new URLSearchParams();
+
+    if (params.discountPercent) {
+      searchParams.append('discount', params.discountPercent);
+    }
+    if (params.endedAt) {
+      searchParams.append('endedAt', params.endedAt);
+    }
+    if (params.regularPrice) {
+      searchParams.append('regularPrice', params.regularPrice);
+    }
+    if (params.discountedPrice) {
+      searchParams.append('discountedPrice', params.discountedPrice);
+    }
+    if (params.locale) {
+      searchParams.append('locale', params.locale);
+    }
+    if (params.features) {
+      searchParams.append('features', JSON.stringify(params.features));
+    }
+
+    const queryString = searchParams.toString();
+    const url = `${baseUrl}/${paywallStyle}${queryString ? `?${queryString}` : ''}`;
+
+    return url;
+  };
+
+  // 프리로드 옵션이 없고 보이지도 않으면 렌더하지 않음
+  if (!visible && !preload) return null;
+
+  // 스타일에 따른 래퍼 선택
+  const getPaywallWrapper = () => {
+    const style = params.style;
+    const url = getPaywallWebViewUrl();
+
+    // 공통 WebView 컴포넌트
+    const commonWebView = (
+      <>
+        {!isLoaded && (
+          <View style={styles.loadingContainer} pointerEvents="none">
+            <ActivityIndicator size="small" />
+          </View>
+        )}
+        <WebView
+          source={{ uri: url }}
+          onMessage={handleWebViewMessage}
+          onLoadStart={() => {
+            setIsLoaded(false);
+          }}
+          onLoadEnd={() => {
+            setIsLoaded(true);
+          }}
+          onError={() => {
+            console.error('[MonetaiSDK] Paywall WebView onError');
+            setIsLoaded(true);
+            setHasWebViewError(true);
+          }}
+          onHttpError={() => {
+            console.error('[MonetaiSDK] Paywall WebView onHttpError');
+            setIsLoaded(true);
+            setHasWebViewError(true);
+          }}
+          javaScriptEnabled={true}
+          userAgent={WEBVIEW_USER_AGENT}
+          style={[styles.webView, !isLoaded && styles.webViewHidden]}
+        />
+        {hasWebViewError && (
+          <View style={styles.errorOverlay} pointerEvents="auto">
+            <View style={styles.errorCard}>
+              <Text style={styles.errorTitle}>Failed to load</Text>
+              <Text style={styles.errorMessage}>
+                An unexpected error occurred while loading the paywall.
+              </Text>
+              <TouchableOpacity style={styles.errorButton} onPress={onClose}>
+                <Text style={styles.errorButtonText}>Close</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        )}
+      </>
+    );
+
+    switch (style) {
+      case 'compact':
+        return (
+          <CompactPaywallWrapper onClose={onClose}>
+            {commonWebView}
+          </CompactPaywallWrapper>
+        );
+      case 'highlight-benefits':
+        return (
+          <HighlightBenefitsPaywallWrapper onClose={onClose}>
+            {commonWebView}
+          </HighlightBenefitsPaywallWrapper>
+        );
+      case 'key-feature-summary':
+        return (
+          <KeyFeatureSummaryPaywallWrapper onClose={onClose}>
+            {commonWebView}
+          </KeyFeatureSummaryPaywallWrapper>
+        );
+      case 'text-focused':
+      default:
+        return (
+          <TextFocusedPaywallWrapper onClose={onClose}>
+            {commonWebView}
+          </TextFocusedPaywallWrapper>
+        );
+    }
+  };
+
+  return (
+    <View
+      style={[
+        styles.overlayContainer,
+        params.zIndex != null && { zIndex: params.zIndex },
+        params.elevation != null && { elevation: params.elevation },
+        !visible && styles.overlayHidden,
+      ]}
+      pointerEvents={visible ? 'auto' : 'none'}
+    >
+      {getPaywallWrapper()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  webView: {
+    flex: 1,
+  },
+  webViewHidden: {
+    opacity: 0,
+  },
+  overlayContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 2000,
+    elevation: 16,
+  },
+  overlayHidden: {
+    opacity: 0,
+  },
+  loadingContainer: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'white',
+  },
+  errorOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  errorCard: {
+    width: '80%',
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 16,
+    alignItems: 'center',
+  },
+  errorTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  errorMessage: {
+    fontSize: 13,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  errorButton: {
+    marginTop: 4,
+    backgroundColor: '#111827',
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+  },
+  errorButtonText: {
+    color: 'white',
+    fontWeight: '600',
+  },
+});
+
+export default Paywall;

package/src/components/paywall-wrappers/CompactPaywallWrapper.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+
+interface CompactPaywallWrapperProps {
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+// Compact 스타일 래퍼: 하단에 붙어서 372px 높이, dim background 클릭 시 닫기
+export const CompactPaywallWrapper: React.FC<CompactPaywallWrapperProps> = ({
+  onClose,
+  children,
+}) => {
+  return (
+    <View style={styles.compactPaywallContainer}>
+      {/* Dim background */}
+      <TouchableOpacity
+        style={styles.dimBackground}
+        activeOpacity={1}
+        onPress={onClose}
+      />
+
+      {/* Paywall content - 하단에 붙음 */}
+      <View style={styles.compactPaywallContent}>{children}</View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  compactPaywallContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 2000,
+  },
+  dimBackground: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  compactPaywallContent: {
+    position: 'absolute',
+    bottom: 0, // 하단에 붙음
+    left: 0, // 여백 제거
+    right: 0, // 여백 제거
+    height: 372,
+    backgroundColor: 'white',
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+});
+
+export default CompactPaywallWrapper;

package/src/components/paywall-wrappers/HighlightBenefitsPaywallWrapper.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { StyleSheet, SafeAreaView } from 'react-native';
+
+interface HighlightBenefitsPaywallWrapperProps {
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+// Highlight Benefits 스타일 래퍼: 전체 화면을 차지
+export const HighlightBenefitsPaywallWrapper: React.FC<
+  HighlightBenefitsPaywallWrapperProps
+> = ({ children }) => {
+  return (
+    <SafeAreaView style={styles.fullScreenContainer}>{children}</SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  fullScreenContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'white',
+    zIndex: 2000,
+  },
+});
+
+export default HighlightBenefitsPaywallWrapper;

package/src/components/paywall-wrappers/KeyFeatureSummaryPaywallWrapper.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { StyleSheet, SafeAreaView } from 'react-native';
+
+interface KeyFeatureSummaryPaywallWrapperProps {
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+// Key Feature Summary 스타일 래퍼: 전체 화면을 차지
+export const KeyFeatureSummaryPaywallWrapper: React.FC<
+  KeyFeatureSummaryPaywallWrapperProps
+> = ({ children }) => {
+  return (
+    <SafeAreaView style={styles.fullScreenContainer}>{children}</SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  fullScreenContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'white',
+    zIndex: 2000,
+  },
+});
+
+export default KeyFeatureSummaryPaywallWrapper;

package/src/components/paywall-wrappers/TextFocusedPaywallWrapper.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { StyleSheet, SafeAreaView } from 'react-native';
+
+interface TextFocusedPaywallWrapperProps {
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+// Text Focused 스타일 래퍼: 전체 화면을 차지
+export const TextFocusedPaywallWrapper: React.FC<
+  TextFocusedPaywallWrapperProps
+> = ({ children }) => {
+  return (
+    <SafeAreaView style={styles.fullScreenContainer}>{children}</SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  fullScreenContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'white',
+    zIndex: 2000,
+  },
+});
+
+export default TextFocusedPaywallWrapper;

package/src/components/paywall-wrappers/index.ts

@@ -0,0 +1,8 @@
+// Paywall Wrappers
+export { default as CompactPaywallWrapper } from './CompactPaywallWrapper';
+export { default as HighlightBenefitsPaywallWrapper } from './HighlightBenefitsPaywallWrapper';
+export { default as KeyFeatureSummaryPaywallWrapper } from './KeyFeatureSummaryPaywallWrapper';
+export { default as TextFocusedPaywallWrapper } from './TextFocusedPaywallWrapper';
+
+// Default export for backward compatibility
+export { default } from './CompactPaywallWrapper';

package/src/constants/paywall.ts

@@ -0,0 +1,4 @@
+// Base URLs for webview components
+export const PAYWELL_BASE_URL = 'https://dashboard.monetai.io/webview';
+// WebView user agent
+export const WEBVIEW_USER_AGENT = 'MonetaiSDK';

package/src/hooks/useBanner.ts

@@ -0,0 +1,112 @@
+import { useState, useEffect, useCallback } from 'react';
+import dayjs from 'dayjs';
+import isBetween from 'dayjs/plugin/isBetween';
+import type { BannerParams, DiscountInfo, PaywallConfig } from '../types';
+import { useInterval } from './useInterval';
+
+// dayjs 플러그인 확장
+dayjs.extend(isBetween);
+
+interface UseBannerProps {
+  paywallConfig?: PaywallConfig; // PaywallConfig를 optional로 변경
+  discountInfo: DiscountInfo | null;
+}
+
+interface UseBannerReturn {
+  bannerVisible: boolean; // 배너 표시 여부
+  openBanner: () => void; // 배너를 보여주는 함수
+  closeBanner: () => void; // 배너를 닫는 함수
+  bannerParams: BannerParams | null; // null일 수 있도록 변경
+}
+
+export const useBanner = ({
+  paywallConfig, // PaywallConfig로 변경
+  discountInfo,
+}: UseBannerProps): UseBannerReturn => {
+  const [bannerVisible, setBannerVisible] = useState(false);
+  const [bannerParams, setBannerParams] = useState<BannerParams | null>(null); // 데이터 준비 시 보관
+
+  // 할인 활성 상태 체크 함수
+  const checkDiscountActive = useCallback(() => {
+    if (
+      bannerParams == null ||
+      bannerParams.enabled === false ||
+      bannerParams.isSubscriber === true ||
+      discountInfo == null
+    ) {
+      return false;
+    }
+
+    const now = dayjs();
+    return now.isBetween(
+      dayjs(discountInfo.startedAt),
+      dayjs(discountInfo.endedAt),
+      null,
+      '[]'
+    );
+  }, [discountInfo, bannerParams]);
+
+  const closeBanner = useCallback(() => {
+    setBannerVisible(false);
+  }, []);
+
+  const openBanner = useCallback(() => {
+    if (!bannerParams) {
+      console.error(
+        '[MonetaiSDK] useBanner: Cannot open banner - bannerParams is null (data not ready)'
+      );
+      return;
+    }
+    if (checkDiscountActive()) {
+      setBannerVisible(true);
+    }
+  }, [bannerParams, checkDiscountActive]);
+
+  useEffect(() => {
+    if (!paywallConfig || !discountInfo) {
+      setBannerParams(null);
+      return;
+    }
+    const baseZIndex = paywallConfig.bannerZIndex ?? 1000;
+    const baseElevation = paywallConfig.bannerElevation ?? 8;
+
+    const computed: BannerParams = {
+      enabled: paywallConfig.enabled,
+      isSubscriber: paywallConfig.isSubscriber,
+      locale: paywallConfig.locale,
+      discountPercent: paywallConfig.discountPercent,
+      bottom: paywallConfig.bannerBottom,
+      style: paywallConfig.style,
+      endedAt: discountInfo.endedAt,
+      zIndex: baseZIndex,
+      elevation: baseElevation,
+    };
+    setBannerParams(computed);
+  }, [paywallConfig, discountInfo]);
+
+  useEffect(() => {
+    const isActive = checkDiscountActive();
+    if (isActive) {
+      setBannerVisible(true);
+    } else {
+      setBannerVisible(false);
+    }
+  }, [checkDiscountActive]);
+
+  useInterval(
+    () => {
+      const isActive = checkDiscountActive();
+      if (!isActive) {
+        setBannerVisible(false);
+      }
+    },
+    bannerVisible ? 1000 : null
+  );
+
+  return {
+    bannerVisible,
+    openBanner,
+    closeBanner,
+    bannerParams, // state로 관리되는 bannerParams 반환
+  };
+};

package/src/hooks/useInterval.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * 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 const useInterval = (callback: () => void, delay: number | null) => {
+  const savedCallback = useRef<() => void>(() => {});
+
+  // Remember the latest callback
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval
+  useEffect(() => {
+    // Don't schedule if no delay is specified
+    if (delay === null) {
+      return;
+    }
+
+    const id = setInterval(() => {
+      savedCallback.current?.();
+    }, delay);
+
+    return () => clearInterval(id);
+  }, [delay]);
+};

package/src/hooks/usePaywall.ts

@@ -0,0 +1,73 @@
+import { useState, useCallback, useEffect } from 'react';
+import type { PaywallParams, PaywallConfig, DiscountInfo } from '../types';
+
+interface UsePaywallProps {
+  paywallConfig?: PaywallConfig; // PaywallConfig를 optional로 변경
+  discountInfo: DiscountInfo | null;
+  onClose?: () => void;
+}
+
+interface UsePaywallReturn {
+  paywallVisible: boolean;
+  paywallParams: PaywallParams | null;
+  openPaywall: () => void;
+  closePaywall: () => void;
+}
+
+export const usePaywall = ({
+  paywallConfig, // 타입 변경
+  discountInfo, // discountInfo 추가
+  onClose,
+}: UsePaywallProps): UsePaywallReturn => {
+  const [paywallVisible, setPaywallVisible] = useState(false);
+  const [paywallParams, setPaywallParams] = useState<PaywallParams | null>(
+    null
+  );
+
+  useEffect(() => {
+    if (!discountInfo || !paywallConfig) {
+      setPaywallParams(null);
+      return;
+    }
+
+    const paywallZ = paywallConfig.paywallZIndex ?? 2000;
+    const paywallElevation = paywallConfig.paywallElevation ?? 16;
+    const computedParams: PaywallParams = {
+      discountPercent: paywallConfig.discountPercent.toString(),
+      endedAt: discountInfo.endedAt.toISOString(),
+      regularPrice: paywallConfig.regularPrice,
+      discountedPrice: paywallConfig.discountedPrice,
+      locale: paywallConfig.locale,
+      features: paywallConfig.features,
+      style: paywallConfig.style,
+      zIndex: paywallZ,
+      elevation: paywallElevation,
+    };
+
+    setPaywallParams(computedParams);
+  }, [discountInfo, paywallConfig]);
+
+  // 페이월 열기
+  const openPaywall = useCallback(() => {
+    if (!paywallParams) {
+      console.error(
+        '[MonetaiSDK] usePaywall: Cannot open paywall - paywallParams is null (data not ready)'
+      );
+      return;
+    }
+    setPaywallVisible(true);
+  }, [paywallParams]);
+
+  // 페이월 닫기
+  const closePaywall = useCallback(() => {
+    setPaywallVisible(false);
+    onClose?.();
+  }, [onClose]);
+
+  return {
+    paywallVisible,
+    paywallParams,
+    openPaywall,
+    closePaywall,
+  };
+};

package/src/index.tsx

@@ -1,5 +1,40 @@
 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 types
+export type {
+  ABTestGroup,
+  PredictResult,
+  EventParams,
+  LogEventOptions,
+  DiscountInfo,
+  AppUserDiscountResponse,
+  PaywallConfig,
+  Feature,
+  BannerParams,
+  PaywallParams,
+  PaywallStyle,
+} from './types';