rn-onboarding-analytics 1.7.5 → 1.7.6

package/src/spill-onboarding/components/OnboardingPaywallPanel.tsx

@@ -9,6 +9,10 @@ import {
   Dimensions,
   Platform,
 } from 'react-native';
+import {
+  useSafeAreaInsets,
+  SafeAreaView,
+} from 'react-native-safe-area-context';
 import {
   initConnection,
   getSubscriptions,
@@ -21,12 +25,14 @@ import {
   type PurchaseError,
 } from 'react-native-iap';
 import { useTheme } from '../../utils/ThemeContext';
-import type { Theme } from '../../utils/theme';
+import { type Theme, resolveTheme } from '../../utils/theme';
 import PrimaryButton from '../buttons/PrimaryButton';
 import SkipButton from '../buttons/SkipButton';
 import { fontSizes, lineHeights } from '../../utils/fontStyles';
 import type { OnboardingPaywallPanelProps, PlatformSku } from '../types';
 import Skeleton from './Skeleton';
+import { trackEvent } from '../analytics';
+import { useLogDev } from '../hooks/useLogDev';
 
 const { height: screenHeight } = Dimensions.get('window');
 
@@ -45,9 +51,25 @@ function OnboardingPaywallPanel({
   onPrivacy,
   subscriptionSkus,
   onPurchaseResult,
+  apiKey,
+  isDev,
+  colors,
+  design,
+  theme: themeProp,
 }: OnboardingPaywallPanelProps) {
-  const { theme } = useTheme();
-  const styles = useMemo(() => createStyles(theme), [theme]);
+  const { theme: contextTheme } = useTheme();
+
+  const theme = useMemo(() => {
+    return resolveTheme(themeProp, contextTheme, 'dark');
+  }, [contextTheme, themeProp]);
+
+  const insets = useSafeAreaInsets();
+  const styles = useMemo(
+    () => createStyles(theme, colors, !!image, insets),
+    [theme, colors, image, insets]
+  );
+
+  const logDev = useLogDev(!!isDev);
 
   // Initialize selectedPlanId based on available configuration
   const initialPlanId = useMemo(() => {
@@ -422,7 +444,19 @@ function OnboardingPaywallPanel({
 
   const renderButton = () => {
     const handlePress = async () => {
-      console.log('OnboardingPaywallPanel: handlePress', { selectedPlanId });
+      logDev('OnboardingPaywallPanel: handlePress', { selectedPlanId });
+
+      // Track purchase attempt
+      trackEvent(
+        apiKey,
+        'purchase_attempt',
+        {
+          plan_id: selectedPlanId,
+          design,
+        },
+        isDev
+      );
+
       if ((subscriptionSkus || products) && selectedPlanId) {
         try {
           let result;
@@ -436,7 +470,7 @@ function OnboardingPaywallPanel({
               'subscriptionPeriodNumberIOS' in iapProduct ||
               'subscriptionOfferDetails' in iapProduct;
 
-            console.log('OnboardingPaywallPanel: Processing purchase', {
+            logDev('OnboardingPaywallPanel: Processing purchase', {
               isSubscription,
               productId: iapProduct.productId,
             });
@@ -449,7 +483,7 @@ function OnboardingPaywallPanel({
                   ?.offerToken;
               }
 
-              console.log('OnboardingPaywallPanel: Requesting subscription', {
+              logDev('OnboardingPaywallPanel: Requesting subscription', {
                 sku: selectedPlanId,
                 offerToken,
               });
@@ -460,10 +494,9 @@ function OnboardingPaywallPanel({
                 }),
               });
             } else {
-              console.log(
-                'OnboardingPaywallPanel: Requesting one-time purchase',
-                { sku: selectedPlanId }
-              );
+              logDev('OnboardingPaywallPanel: Requesting one-time purchase', {
+                sku: selectedPlanId,
+              });
               result = await requestPurchase({
                 sku: selectedPlanId,
               });
@@ -471,12 +504,12 @@ function OnboardingPaywallPanel({
           } else {
             // Fallback if product not found in fetched list but ID exists
             // Try subscription first as default legacy behavior
-            console.log(
+            logDev(
               'OnboardingPaywallPanel: Product not in IAP list, attempting fallback purchase',
               selectedPlanId
             );
             try {
-              console.log(
+              logDev(
                 'OnboardingPaywallPanel: Fallback - attempting requestSubscription',
                 selectedPlanId
               );
@@ -486,7 +519,7 @@ function OnboardingPaywallPanel({
                 'OnboardingPaywallPanel: Fallback requestSubscription failed',
                 subErr
               );
-              console.log(
+              logDev(
                 'OnboardingPaywallPanel: Fallback - attempting requestPurchase',
                 selectedPlanId
               );
@@ -509,14 +542,33 @@ function OnboardingPaywallPanel({
               data: result,
             });
           }
+
+          // Track successful purchase
+          trackEvent(
+            apiKey,
+            'purchase_success',
+            {
+              plan_id: selectedPlanId,
+              design,
+            },
+            isDev
+          );
         } catch (err) {
-          console.warn('Purchase Error:', err);
-          if (typeof err === 'object') {
-            console.warn(
-              'Purchase Error Details:',
-              JSON.stringify(err, null, 2)
-            );
-          }
+          logDev('PaywallScreen: Purchase failed', err);
+
+          // Track failed purchase
+          trackEvent(
+            apiKey,
+            'purchase_failed',
+            {
+              plan_id: selectedPlanId,
+              design,
+              error:
+                typeof err === 'object' ? JSON.stringify(err) : String(err),
+            },
+            isDev
+          );
+
           if (onPurchaseResult) {
             onPurchaseResult({
               status: 'error',
@@ -571,7 +623,15 @@ function OnboardingPaywallPanel({
   };
 
   const handleClose = () => {
-    console.log('[OnboardingPaywallPanel] Close button pressed');
+    logDev('[OnboardingPaywallPanel] Close button pressed');
+    trackEvent(
+      apiKey,
+      'paywall_close',
+      {
+        design,
+      },
+      isDev
+    );
     if (onClose) {
       onClose();
     } else {
@@ -580,19 +640,21 @@ function OnboardingPaywallPanel({
   };
 
   return (
-    <View style={styles.mainContainer}>
+    <SafeAreaView style={styles.mainContainer} edges={['top', 'bottom']}>
       {onClose && (
         <View style={styles.closeButton} pointerEvents="box-none">
           <SkipButton onPress={handleClose} />
         </View>
       )}
-      <View style={styles.headerImageContainer}>
-        {typeof image === 'function'
-          ? image()
-          : image && (
-              <Image source={image} style={styles.image} resizeMode="cover" />
-            )}
-      </View>
+      {image && (
+        <View style={styles.headerImageContainer}>
+          {typeof image === 'function'
+            ? image()
+            : image && (
+                <Image source={image} style={styles.image} resizeMode="cover" />
+              )}
+        </View>
+      )}
 
       <View style={styles.sheetContainer}>
         <ScrollView
@@ -622,186 +684,180 @@ function OnboardingPaywallPanel({
           {renderButton()}
         </View>
       </View>
-    </View>
+    </SafeAreaView>
   );
 }
 
 export default OnboardingPaywallPanel;
 
-const createStyles = (theme: Theme) =>
+const createStyles = (
+  theme: Theme,
+  colors?: OnboardingPaywallPanelProps['colors'],
+  hasImage?: boolean,
+  insets?: { top: number; bottom: number; left: number; right: number }
+) =>
   StyleSheet.create({
     mainContainer: {
       flex: 1,
-      backgroundColor: theme.bg.secondary,
+      backgroundColor: colors?.background?.primary || theme.bg.secondary,
     },
     closeButton: {
       position: 'absolute',
-      top: (theme.insets?.top || 0) + 16,
+      top: (insets?.top || 0) + 8,
       right: 16,
-      zIndex: 20,
+      zIndex: 10,
     },
     headerImageContainer: {
-      height: screenHeight * 0.3,
+      height: screenHeight * 0.35,
+      width: '100%',
+    },
+    image: {
       width: '100%',
+      height: '100%',
     },
     sheetContainer: {
       flex: 1,
-      marginTop: -24,
-      backgroundColor: theme.bg.secondary,
-      borderTopLeftRadius: 30,
-      borderTopRightRadius: 30,
-      overflow: 'scroll',
+      backgroundColor: colors?.background?.primary || theme.bg.secondary,
+      borderTopLeftRadius: hasImage ? 24 : 0,
+      borderTopRightRadius: hasImage ? 24 : 0,
+      marginTop: hasImage ? -24 : 0,
+      overflow: 'hidden',
     },
     container: {
       flex: 1,
     },
     contentContainer: {
-      paddingBottom: 24,
-    },
-    footerContainer: {
-      paddingHorizontal: 8,
-      marginBottom: 40,
-      paddingTop: 4,
-      backgroundColor: theme.bg.secondary,
+      padding: 24,
+      paddingTop: hasImage ? 32 : (insets?.top || 0) + 40,
+      paddingBottom: 120, // Add padding for footer
     },
     contentWrapper: {
-      paddingHorizontal: 16,
-      paddingTop: 32,
-    },
-    image: {
-      width: '100%',
-      height: '100%',
+      flex: 1,
     },
     headerContainer: {
       alignItems: 'center',
-      marginBottom: 24,
-      marginTop: 8,
+      marginBottom: 32,
     },
     text: {
-      fontSize: fontSizes.xxl,
-      lineHeight: lineHeights.xxl,
       textAlign: 'center',
+      color: colors?.text?.primary || theme.text.primary,
     },
     line1: {
-      color: theme.text.primary,
+      fontSize: fontSizes.xl,
+      fontWeight: '700',
+      marginBottom: 12,
+      lineHeight: lineHeights.xl,
     },
     line2: {
-      marginTop: 8,
-      color: theme.text.secondary,
       fontSize: fontSizes.md,
+      color: colors?.text?.secondary || theme.text.secondary,
       lineHeight: lineHeights.md,
+      marginTop: 4,
     },
     titleText: {
-      fontFamily: theme.fonts.introTitle,
-      fontWeight: 'bold',
+      color: colors?.text?.primary || theme.text.primary,
     },
     subtitleText: {
-      fontFamily: theme.fonts.introSubtitle,
+      color: colors?.text?.secondary || theme.text.secondary,
     },
     featuresContainer: {
-      marginBottom: 24,
-      paddingHorizontal: 8,
+      marginBottom: 32,
     },
     featureRow: {
       flexDirection: 'row',
       alignItems: 'center',
-      marginBottom: 12,
+      marginBottom: 16,
     },
     checkIcon: {
-      color: theme.bg.accent,
-      fontSize: fontSizes.lg,
+      fontSize: 18,
+      color: colors?.background?.accent || theme.bg.accent,
       marginRight: 12,
       fontWeight: 'bold',
     },
     featureText: {
-      color: theme.text.primary,
       fontSize: fontSizes.md,
-      fontWeight: '500',
+      color: colors?.text?.primary || theme.text.primary,
+      flex: 1,
+      lineHeight: lineHeights.md,
     },
     plansContainer: {
-      gap: 12,
       marginBottom: 24,
+      gap: 12,
     },
     planCard: {
       flexDirection: 'row',
-      alignItems: 'center',
       justifyContent: 'space-between',
+      alignItems: 'center',
       padding: 16,
-      minHeight: 76,
-      borderRadius: 16,
-      backgroundColor: theme.bg.secondary,
+      borderRadius: 12,
       borderWidth: 1,
-      borderColor: theme.bg.label,
-      // Shadow for elevation
-      shadowColor: '#000',
-      shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.05,
-      shadowRadius: 4,
-      elevation: 2,
+      borderColor: colors?.background?.label || theme.bg.label,
+      backgroundColor: 'transparent',
     },
     planCardSelected: {
-      borderColor: theme.bg.accent,
-      backgroundColor: theme.bg.label,
-      borderWidth: 2,
+      borderColor: colors?.background?.accent || theme.bg.accent,
+      backgroundColor: colors?.background?.label || theme.bg.label,
     },
     planTitle: {
       fontSize: fontSizes.md,
       fontWeight: '600',
-      color: theme.text.primary,
+      color: colors?.text?.primary || theme.text.primary,
+      marginBottom: 4,
     },
     planTitleSelected: {
-      color: theme.text.primary,
-      fontWeight: '700',
+      color: colors?.text?.primary || theme.text.primary,
     },
     planInterval: {
       fontSize: fontSizes.sm,
-      color: theme.text.secondary,
-      marginTop: 2,
+      color: colors?.text?.secondary || theme.text.secondary,
     },
     planIntervalSelected: {
-      color: theme.text.secondary,
+      color: colors?.text?.secondary || theme.text.secondary,
     },
     planPrice: {
       fontSize: fontSizes.lg,
       fontWeight: '700',
-      color: theme.text.primary,
+      color: colors?.text?.primary || theme.text.primary,
     },
     planPriceSelected: {
-      color: theme.bg.accent,
+      color: colors?.text?.primary || theme.text.primary,
     },
-    helperTextContainer: {
-      marginTop: 4,
-      backgroundColor: theme.bg.accent,
-      paddingHorizontal: 8,
-      paddingVertical: 2,
-      borderRadius: 4,
-      alignSelf: 'flex-start',
-    },
-    helperTextBadge: {
-      color: theme.text.contrast,
-      fontSize: fontSizes.xs,
-      fontWeight: '600',
+    footerContainer: {
+      padding: 24,
+      paddingBottom: (insets?.bottom || 0) + 16,
+      borderTopWidth: 1,
+      borderTopColor: colors?.background?.label || theme.bg.label,
+      backgroundColor: colors?.background?.primary || theme.bg.secondary,
     },
     helperText: {
       textAlign: 'center',
-      color: theme.text.secondary,
-      fontSize: fontSizes.sm,
-      marginBottom: 8,
-      fontWeight: '500',
+      fontSize: fontSizes.xs,
+      color: colors?.text?.secondary || theme.text.secondary,
+      marginBottom: 16,
     },
     footerLinksContainer: {
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',
-      marginTop: 4,
-      gap: 8,
+      marginTop: 24,
+      marginBottom: 12,
     },
     footerLinkText: {
-      fontSize: fontSizes.md,
-      color: theme.text.secondary,
+      fontSize: fontSizes.xs,
+      color: colors?.text?.secondary || theme.text.secondary,
+      textDecorationLine: 'underline',
     },
     footerLinkSeparator: {
       fontSize: fontSizes.xs,
-      color: theme.text.secondary,
+      color: colors?.text?.secondary || theme.text.secondary,
+      marginHorizontal: 8,
+    },
+    helperTextContainer: {
+      marginTop: 4,
+    },
+    helperTextBadge: {
+      fontSize: fontSizes.xs,
+      color: colors?.background?.accent || theme.bg.accent,
+      fontWeight: '600',
     },
   });

package/src/spill-onboarding/components/OnboardingStepContainer.tsx

@@ -71,6 +71,7 @@ const createStyles = (theme: Theme) =>
       bottom: 0,
       left: 0,
       right: 0,
+      zIndex: 1, // Reduced from 10 to 1, to allow easier layering control
     },
     close: {
       position: 'absolute',

package/src/spill-onboarding/hooks/useLogDev.ts

@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+
+/**
+ * Helper function to log messages with the Dev Mode prefix.
+ * Can be used outside of React components.
+ */
+export const logDevMessage = (isDev: boolean, message: string, data?: any) => {
+  if (isDev) {
+    if (data) {
+      console.log(`🚧 [Dev Mode] ${message}`, JSON.stringify(data, null, 2));
+    } else {
+      console.log(`🚧 [Dev Mode] ${message}`);
+    }
+  }
+};
+
+export const useLogDev = (isDev: boolean) => {
+  const log = useCallback(
+    (message: string, data?: any) => {
+      logDevMessage(isDev, message, data);
+    },
+    [isDev]
+  );
+
+  return log;
+};

package/src/spill-onboarding/index.tsx

@@ -18,6 +18,7 @@ import { type OnboardingProps } from './types';
 import useMeasureHeight from './hooks/useMeasureHeight';
 import { type Theme } from '../utils/theme';
 import { trackEvent } from './analytics';
+import { useLogDev } from './hooks/useLogDev';
 
 function SpillOnboarding({
   animationDuration = 500,
@@ -34,8 +35,10 @@ function SpillOnboarding({
   isDev,
   paywallPanel: paywallPanelProps,
   backButtonIcon,
+  colors,
 }: OnboardingProps) {
   const { theme } = useTheme();
+  const logDev = useLogDev(!!isDev);
 
   const styles = useMemo(() => createStyles(theme), [theme]);
   const backgroundSpillProgress = useSharedValue(0);
@@ -67,7 +70,7 @@ function SpillOnboarding({
       const fromStepName = getStepName(step);
       const toStepName = getStepName(stepNumber);
 
-      console.log('🔄 Onboarding Step Change:', {
+      logDev('Onboarding Step Change:', {
         from: fromStepName,
         to: toStepName,
         index: stepNumber,
@@ -88,7 +91,7 @@ function SpillOnboarding({
         isDev
       );
     },
-    [onStepChangeProps, apiKey, step, steps, isDev]
+    [onStepChangeProps, apiKey, step, steps, isDev, logDev]
   );
 
   useEffect(() => {
@@ -202,6 +205,9 @@ function SpillOnboarding({
       <OnboardingPaywallPanel
         onPressContinue={handleContinue}
         onClose={handleClose}
+        apiKey={apiKey}
+        isDev={isDev}
+        colors={colors}
         {...otherProps}
       />
     );
@@ -227,7 +233,7 @@ function SpillOnboarding({
         buttonLabel={currentStep.buttonLabel}
         onBackPress={onBackPress}
         onNextPress={onNextPress}
-        buttonPrimary={step === steps.length - 1}
+        buttonPrimary={false}
         showBackButton={currentStep.showBackButton ?? showBackButton}
         backButtonIcon={currentStep.backButtonIcon ?? backButtonIcon}
       />
@@ -263,13 +269,24 @@ function SpillOnboarding({
       <OnboardingImageContainer
         currentStep={currentStep}
         currentStepImage={currentStepImage}
-        position={currentStep?.position ?? firstStep?.position ?? 'top'}
         animationDuration={animationDuration}
         backgroundSpillProgress={backgroundSpillProgress}
         screenHeight={screen.height}
         introPanel={introPanel}
         stepPanel={stepPanel}
         background={background}
+        propimageStyle={
+          typeof introPanelProps !== 'function'
+            ? introPanelProps.propimageStyle
+            : undefined
+        }
+        // If introPanel.image is a function, do NOT render it in ImageContainer
+        // because it's already rendered in OnboardingIntroPanel
+        hideImage={
+          !currentStep &&
+          typeof introPanelProps !== 'function' &&
+          typeof introPanelProps.image === 'function'
+        }
       />
 
       {isPaywall ? (