rn-onboarding-analytics 1.0.0 → 1.1.0

package/lib/typescript/src/spill-onboarding/types.d.ts

@@ -161,7 +161,7 @@ export interface OnboardingProps {
     /** Ordered list of steps to render. */
     steps: OnboardingStep[];
     /** Called when the user completes the final step. */
-    onComplete: () => void;
+    onComplete: (planId?: string) => void;
     /** Called when the user skips the onboarding. */
     onSkip?: () => void;
     /** Notifies consumers when the active step index changes. */
@@ -184,9 +184,67 @@ export interface OnboardingProps {
     fonts?: OnboardingFonts | string;
     /**
      * API Key for analytics.
-     * Required to enable analytics tracking.
+     * Optional. If not provided, analytics will be disabled.
      */
-    apiKey: string;
+    apiKey?: string;
+    /**
+     * If true, analytics events will be logged to console but not sent to the server.
+     * Useful for development.
+     */
+    isDev?: boolean;
+    /**
+     * Optional Paywall panel content.
+     * If provided, it will be shown after the last step.
+     */
+    paywallPanel?: OnboardingPaywallPanelConfig;
+}
+export interface PaywallPlan {
+    id: string;
+    title: string;
+    price: string;
+    interval?: string;
+    features?: string[];
 }
+/**
+ * Props for the paywall panel.
+ */
+export interface OnboardingPaywallPanelProps {
+    /** Callback invoked when the user taps the main action button. */
+    onPressContinue: (planId: string) => void;
+    /** Title content. */
+    title?: string | ReactNode;
+    /** Subtitle content. */
+    subtitle?: string | ReactNode;
+    /** List of plans to display. */
+    plans: PaywallPlan[];
+    /**
+     * Button content. Either a simple string label or a render function.
+     */
+    button: string | (({ onPress }: {
+        onPress: () => void;
+    }) => ReactNode);
+    /** Optional image shown on the paywall panel. */
+    image?: ImageSourcePropType | (() => ReactNode);
+    /** Helper text displayed above the continue button. */
+    helperTextContinue?: string;
+    /** Link for restore purchase action. */
+    onRestorePurchase?: {
+        text?: string;
+        onPress: () => void;
+    };
+    /** Link for terms of service action. */
+    onTerms?: {
+        text?: string;
+        onPress: () => void;
+    };
+    /** Link for privacy policy action. */
+    onPrivacy?: {
+        text?: string;
+        onPress: () => void;
+    };
+}
+type OnboardingPaywallPanelConfig = Omit<OnboardingPaywallPanelProps, 'onPressContinue'> | (({ onPressContinue, }: {
+    onPressContinue: (planId: string) => void;
+}) => ReactNode);
 export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/spill-onboarding/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/spill-onboarding/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/spill-onboarding/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-onboarding-analytics",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Onboarding/tutorial flow for React Native with analytics.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/spill-onboarding/analytics.ts

@@ -8,9 +8,9 @@ const API_URL = 'https://api.freesupabase.shop/api/track';
 export const trackEvent = async (
   apiKey: string | undefined,
   eventType: string,
-  metaData: any = {}
+  metaData: any = {},
+  isDev: boolean = false
 ) => {
-  const token = apiKey;
   const appName =
     Constants.expoConfig?.name ||
     Constants.manifest?.name ||
@@ -25,7 +25,7 @@ export const trackEvent = async (
     language: primaryLocale?.languageCode,
   };
 
-  if (!token) {
+  if (!isDev && !apiKey) {
     console.error(
       JSON.stringify({
         error: 'Go to `https://freesupabase.shop/docs` to get an app token',
@@ -35,13 +35,26 @@ export const trackEvent = async (
   }
 
   const payload = {
-    app_id: token,
+    app_id: apiKey,
     eventType,
     userAgent: `React Native (${Platform.OS})`,
     sourceUrl: appName,
     metaData: extendedMetaData,
   };
 
+  if (isDev) {
+    console.log(
+      '🚧 [Dev Mode] Analytics Event (Not Sent):',
+      JSON.stringify(payload, null, 2)
+    );
+    return;
+  }
+
+  if (!apiKey) {
+    console.log('⚠️ Analytics: No API Key provided, event not sent.');
+    return;
+  }
+
   console.log('📡 Sending Analytics Event:', JSON.stringify(payload, null, 2));
 
   try {
@@ -49,7 +62,7 @@ export const trackEvent = async (
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        'Authorization': `Bearer ${token}`,
+        'Authorization': `Bearer ${apiKey}`,
       },
       body: JSON.stringify(payload),
     });

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

@@ -0,0 +1,346 @@
+import { useMemo, useState } from 'react';
+import {
+  Image,
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  ScrollView,
+  Dimensions,
+} from 'react-native';
+import { useTheme } from '../../utils/ThemeContext';
+import type { Theme } from '../../utils/theme';
+import PrimaryButton from '../buttons/PrimaryButton';
+import { fontSizes, lineHeights } from '../../utils/fontStyles';
+import type { OnboardingPaywallPanelProps } from '../types';
+
+const { height: screenHeight } = Dimensions.get('window');
+
+function OnboardingPaywallPanel({
+  onPressContinue,
+  title,
+  subtitle,
+  button,
+  image,
+  plans,
+  helperTextContinue,
+  onRestorePurchase,
+  onTerms,
+  onPrivacy,
+}: OnboardingPaywallPanelProps) {
+  const { theme } = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const [selectedPlanId, setSelectedPlanId] = useState<string>(
+    plans[0]?.id || ''
+  );
+
+  const selectedPlan = plans.find((p) => p.id === selectedPlanId);
+
+  const renderTitle = () => {
+    if (!title) return null;
+    if (typeof title === 'string') {
+      return (
+        <Text style={[styles.text, styles.line1, styles.titleText]}>
+          {title}
+        </Text>
+      );
+    }
+    return title;
+  };
+
+  const renderSubtitle = () => {
+    if (!subtitle) return null;
+    if (typeof subtitle === 'string') {
+      return (
+        <Text style={[styles.text, styles.line2, styles.subtitleText]}>
+          {subtitle}
+        </Text>
+      );
+    }
+    return subtitle;
+  };
+
+  const renderFeatures = () => {
+    if (!selectedPlan?.features || selectedPlan.features.length === 0)
+      return null;
+
+    return (
+      <View style={styles.featuresContainer}>
+        {selectedPlan.features.map((feature, index) => (
+          <View key={index} style={styles.featureRow}>
+            <Text style={styles.checkIcon}>✓</Text>
+            <Text style={styles.featureText}>{feature}</Text>
+          </View>
+        ))}
+      </View>
+    );
+  };
+
+  const renderPlans = () => {
+    return (
+      <View style={styles.plansContainer}>
+        {plans.map((plan) => {
+          const isSelected = plan.id === selectedPlanId;
+          return (
+            <TouchableOpacity
+              key={plan.id}
+              style={[styles.planCard, isSelected && styles.planCardSelected]}
+              onPress={() => setSelectedPlanId(plan.id)}
+              activeOpacity={0.8}
+            >
+              <View>
+                <Text
+                  style={[
+                    styles.planTitle,
+                    isSelected && styles.planTitleSelected,
+                  ]}
+                >
+                  {plan.title}
+                </Text>
+                {plan.interval && (
+                  <Text
+                    style={[
+                      styles.planInterval,
+                      isSelected && styles.planIntervalSelected,
+                    ]}
+                  >
+                    {plan.interval}
+                  </Text>
+                )}
+              </View>
+              <Text
+                style={[
+                  styles.planPrice,
+                  isSelected && styles.planPriceSelected,
+                ]}
+              >
+                {plan.price}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  };
+
+  const renderButton = () => {
+    const handlePress = () => onPressContinue(selectedPlanId);
+
+    if (typeof button === 'string') {
+      return <PrimaryButton text={button} onPress={handlePress} />;
+    }
+    return button({ onPress: handlePress });
+  };
+
+  const renderFooterLinks = () => {
+    if (!onRestorePurchase && !onTerms && !onPrivacy) return null;
+
+    return (
+      <View style={styles.footerLinksContainer}>
+        {onRestorePurchase && (
+          <TouchableOpacity onPress={onRestorePurchase.onPress}>
+            <Text style={styles.footerLinkText}>{onRestorePurchase.text}</Text>
+          </TouchableOpacity>
+        )}
+
+        {onRestorePurchase && (onTerms || onPrivacy) && (
+          <Text style={styles.footerLinkSeparator}>•</Text>
+        )}
+
+        {onTerms && (
+          <TouchableOpacity onPress={onTerms.onPress}>
+            <Text style={styles.footerLinkText}>{onTerms.text}</Text>
+          </TouchableOpacity>
+        )}
+
+        {onTerms && onPrivacy && (
+          <Text style={styles.footerLinkSeparator}>•</Text>
+        )}
+
+        {onPrivacy && (
+          <TouchableOpacity onPress={onPrivacy.onPress}>
+            <Text style={styles.footerLinkText}>{onPrivacy.text}</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  };
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+      showsVerticalScrollIndicator={false}
+      bounces={false}
+    >
+      {typeof image === 'function'
+        ? image()
+        : image && (
+            <Image source={image} style={styles.image} resizeMode="cover" />
+          )}
+
+      <View style={styles.contentWrapper}>
+        <View style={styles.headerContainer}>
+          {renderTitle()}
+          {renderSubtitle()}
+        </View>
+
+        {renderFeatures()}
+
+        {renderPlans()}
+
+        {helperTextContinue && (
+          <Text style={styles.helperText}>{helperTextContinue}</Text>
+        )}
+
+        {renderButton()}
+
+        {renderFooterLinks()}
+      </View>
+    </ScrollView>
+  );
+}
+
+export default OnboardingPaywallPanel;
+
+const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: theme.bg.secondary,
+    },
+    contentContainer: {
+      paddingBottom: 40,
+    },
+    contentWrapper: {
+      paddingHorizontal: 16,
+      marginTop: -32,
+      paddingTop: 32,
+      borderTopLeftRadius: 32,
+      borderTopRightRadius: 32,
+      backgroundColor: theme.bg.secondary,
+    },
+    image: {
+      alignSelf: 'center',
+      width: '100%',
+      height: screenHeight * 0.3,
+    },
+    headerContainer: {
+      alignItems: 'center',
+      marginBottom: 24,
+      marginTop: 8,
+    },
+    text: {
+      fontSize: fontSizes.xxl,
+      lineHeight: lineHeights.xxl,
+      textAlign: 'center',
+    },
+    line1: {
+      color: theme.text.primary,
+    },
+    line2: {
+      marginTop: 8,
+      color: theme.text.secondary,
+      fontSize: fontSizes.md,
+      lineHeight: lineHeights.md,
+    },
+    titleText: {
+      fontFamily: theme.fonts.introTitle,
+      fontWeight: 'bold',
+    },
+    subtitleText: {
+      fontFamily: theme.fonts.introSubtitle,
+    },
+    featuresContainer: {
+      marginBottom: 24,
+      paddingHorizontal: 8,
+    },
+    featureRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 12,
+    },
+    checkIcon: {
+      color: theme.bg.accent,
+      fontSize: fontSizes.lg,
+      marginRight: 12,
+      fontWeight: 'bold',
+    },
+    featureText: {
+      color: theme.text.primary,
+      fontSize: fontSizes.md,
+      fontWeight: '500',
+    },
+    plansContainer: {
+      gap: 12,
+      marginBottom: 24,
+    },
+    planCard: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: 16,
+      borderRadius: 16,
+      backgroundColor: theme.bg.secondary,
+      borderWidth: 1,
+      borderColor: theme.bg.label,
+      // Shadow for elevation
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      elevation: 2,
+    },
+    planCardSelected: {
+      borderColor: theme.bg.accent,
+      backgroundColor: theme.bg.secondary,
+      borderWidth: 2,
+    },
+    planTitle: {
+      fontSize: fontSizes.md,
+      fontWeight: '600',
+      color: theme.text.primary,
+    },
+    planTitleSelected: {
+      color: theme.text.primary,
+      fontWeight: '700',
+    },
+    planInterval: {
+      fontSize: fontSizes.sm,
+      color: theme.text.secondary,
+      marginTop: 2,
+    },
+    planIntervalSelected: {
+      color: theme.text.secondary,
+    },
+    planPrice: {
+      fontSize: fontSizes.lg,
+      fontWeight: '700',
+      color: theme.text.primary,
+    },
+    planPriceSelected: {
+      color: theme.bg.accent,
+    },
+    helperText: {
+      textAlign: 'center',
+      color: theme.text.secondary,
+      fontSize: fontSizes.sm,
+      marginBottom: 12,
+      fontWeight: '500',
+    },
+    footerLinksContainer: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: 24,
+      gap: 8,
+    },
+    footerLinkText: {
+      fontSize: fontSizes.md,
+      color: theme.text.secondary,
+    },
+    footerLinkSeparator: {
+      fontSize: fontSizes.xs,
+      color: theme.text.secondary,
+    },
+  });

package/src/spill-onboarding/index.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react-native';
 import { useTheme } from '../utils/ThemeContext';
 import OnboardingIntroPanel from './components/OnboardingIntroPanel';
+import OnboardingPaywallPanel from './components/OnboardingPaywallPanel';
 import { useSharedValue, withTiming } from 'react-native-reanimated';
 import OnboardingStepPanel from './components/OnboardingStepPanel';
 import OnboardingStepContainer from './components/OnboardingStepContainer';
@@ -31,6 +32,8 @@ function SpillOnboarding({
   background,
   skipButton,
   apiKey,
+  isDev,
+  paywallPanel: paywallPanelProps,
 }: OnboardingProps) {
   const { theme } = useTheme();
 
@@ -40,6 +43,7 @@ function SpillOnboarding({
   const [step, setStep] = useState(-1);
   const currentStep = step >= 0 ? steps[step] : undefined;
   const firstStep = steps[0];
+  const isPaywall = step === steps.length;
 
   const onStepChange = useCallback(
     (stepNumber: number) => {
@@ -47,6 +51,9 @@ function SpillOnboarding({
         if (index === -1) {
           return 'Intro';
         }
+        if (index === steps.length) {
+          return 'Paywall';
+        }
         const s = steps[index];
         if (!s) {
           return 'Unknown';
@@ -69,14 +76,19 @@ function SpillOnboarding({
       setStep(stepNumber);
       onStepChangeProps?.(stepNumber);
 
-      trackEvent(apiKey, 'step_change', {
-        from_index: step,
-        to_index: stepNumber,
-        from_step: fromStepName,
-        to_step: toStepName,
-      });
+      trackEvent(
+        apiKey,
+        'step_change',
+        {
+          from_index: step,
+          to_index: stepNumber,
+          from_step: fromStepName,
+          to_step: toStepName,
+        },
+        isDev
+      );
     },
-    [onStepChangeProps, apiKey, step, steps]
+    [onStepChangeProps, apiKey, step, steps, isDev]
   );
 
   useEffect(() => {
@@ -120,7 +132,11 @@ function SpillOnboarding({
 
   const onNextPress = () => {
     if (step === steps.length - 1) {
-      trackEvent(apiKey, 'complete');
+      if (paywallPanelProps) {
+        onStepChange(steps.length);
+        return;
+      }
+      trackEvent(apiKey, 'complete', {}, isDev);
       return onComplete();
     }
 
@@ -158,6 +174,27 @@ function SpillOnboarding({
     );
   };
 
+  const onPaywallContinue = (planId: string) => {
+    trackEvent(apiKey, 'paywall_select', { plan_id: planId }, isDev);
+    trackEvent(apiKey, 'complete', { plan_id: planId }, isDev);
+    onComplete(planId);
+  };
+
+  const renderPaywallPanel = () => {
+    if (!paywallPanelProps) return null;
+
+    if (typeof paywallPanelProps === 'function') {
+      return paywallPanelProps({ onPressContinue: onPaywallContinue });
+    }
+
+    return (
+      <OnboardingPaywallPanel
+        onPressContinue={onPaywallContinue}
+        {...paywallPanelProps}
+      />
+    );
+  };
+
   const renderStepContent = () => {
     if (!currentStep) {
       return null;
@@ -185,12 +222,17 @@ function SpillOnboarding({
   };
 
   const currentStepImage: ImageSourcePropType | undefined = useMemo(() => {
+    if (isPaywall) {
+      // Paywall image is rendered inside the panel scrollview
+      return undefined;
+    }
+
     if (!currentStep) {
       return firstStep?.image;
     }
 
     return currentStep.image;
-  }, [currentStep, firstStep?.image]);
+  }, [currentStep, firstStep?.image, isPaywall]);
 
   const onboardingContent = (
     <View style={styles.container} ref={screen.ref}>
@@ -210,15 +252,19 @@ function SpillOnboarding({
         background={background}
       />
 
-      <OnboardingStepContainer
-        currentStep={currentStep}
-        animationDuration={animationDuration}
-        showCloseButton={showCloseButton}
-        renderStepContent={renderStepContent}
-        onSkip={onSkip}
-        ref={stepPanel.ref}
-        skipButton={skipButton}
-      />
+      {isPaywall ? (
+        <View style={styles.fullScreenPanel}>{renderPaywallPanel()}</View>
+      ) : (
+        <OnboardingStepContainer
+          currentStep={currentStep}
+          animationDuration={animationDuration}
+          showCloseButton={showCloseButton}
+          renderStepContent={renderStepContent}
+          onSkip={onSkip}
+          ref={stepPanel.ref}
+          skipButton={skipButton}
+        />
+      )}
     </View>
   );
 
@@ -248,4 +294,8 @@ const createStyles = (theme: Theme) =>
       left: 0,
       right: 0,
     },
+    fullScreenPanel: {
+      flex: 1,
+      zIndex: 10,
+    },
   });