@influto/react-native-sdk 1.0.0 → 1.2.0

package/lib/components/ReferralCodeInput.js

@@ -0,0 +1,397 @@
+"use strict";
+/**
+ * ReferralCodeInput - Pre-built UI component for promo code entry
+ *
+ * Features:
+ * - Auto-prefills if user came via attribution link
+ * - Real-time validation
+ * - Customizable styling (colors, fonts, spacing)
+ * - Loading & success/error states
+ * - Optional skip button
+ * - Callback on validation
+ * - Fully accessible
+ *
+ * @example
+ * ```typescript
+ * import { ReferralCodeInput } from '@influto/react-native-sdk/ui';
+ *
+ * <ReferralCodeInput
+ *   onValidated={(result) => {
+ *     if (result.valid) {
+ *       navigation.navigate('Paywall', { campaign: result.campaign });
+ *     }
+ *   }}
+ *   onSkip={() => navigation.navigate('Paywall')}
+ * />
+ * ```
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReferralCodeInput = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const InfluTo_1 = __importDefault(require("../InfluTo"));
+const ReferralCodeInput = ({ autoPrefill = true, autoValidate = false, onValidated, onSkip, onApplied, appUserId, colors = {}, fonts = {}, labels = {}, style = {}, showSkipButton = true, validateOnBlur = true }) => {
+    const [code, setCode] = (0, react_1.useState)('');
+    const [state, setState] = (0, react_1.useState)('idle');
+    const [validationResult, setValidationResult] = (0, react_1.useState)(null);
+    const [isPrefilled, setIsPrefilled] = (0, react_1.useState)(false);
+    // Default colors
+    const colorScheme = {
+        primary: colors.primary || '#3B82F6',
+        success: colors.success || '#10B981',
+        error: colors.error || '#EF4444',
+        text: colors.text || '#1F2937',
+        textSecondary: colors.textSecondary || '#6B7280',
+        background: colors.background || '#FFFFFF',
+        border: colors.border || '#D1D5DB',
+        inputBackground: colors.inputBackground || '#F9FAFB'
+    };
+    // Default fonts
+    const fontScheme = {
+        family: fonts.family || (react_native_1.Platform.OS === 'ios' ? 'System' : 'Roboto'),
+        sizeTitle: fonts.sizeTitle || 18,
+        sizeInput: fonts.sizeInput || 16,
+        sizeButton: fonts.sizeButton || 16,
+        sizeMessage: fonts.sizeMessage || 14
+    };
+    // Default labels
+    const labelScheme = {
+        title: labels.title || 'Have a promo code?',
+        subtitle: labels.subtitle || 'Enter your referral code to unlock special offers',
+        placeholder: labels.placeholder || 'Enter code (e.g., FITGURU30)',
+        validateButton: labels.validateButton || 'Apply Code',
+        skipButton: labels.skipButton || 'Skip',
+        validatingMessage: labels.validatingMessage || 'Validating code...',
+        validMessage: labels.validMessage || 'Code applied successfully!',
+        invalidMessage: labels.invalidMessage || 'Invalid code. Please try again.',
+        errorMessage: labels.errorMessage || 'Unable to validate code. Check your connection.',
+        prefilledMessage: labels.prefilledMessage || 'Code detected from your referral link'
+    };
+    // Auto-prefill on mount
+    (0, react_1.useEffect)(() => {
+        if (autoPrefill) {
+            loadPrefilledCode();
+        }
+    }, [autoPrefill]);
+    const loadPrefilledCode = async () => {
+        try {
+            const prefilledCode = await InfluTo_1.default.getPrefilledCode();
+            if (prefilledCode) {
+                setCode(prefilledCode);
+                setIsPrefilled(true);
+                // Auto-validate if enabled
+                if (autoValidate) {
+                    await handleValidate(prefilledCode);
+                }
+            }
+        }
+        catch (error) {
+            console.error('[ReferralCodeInput] Failed to load prefilled code:', error);
+        }
+    };
+    const handleValidate = async (codeToValidate = code) => {
+        if (!codeToValidate || codeToValidate.length < 4) {
+            setState('invalid');
+            setValidationResult({
+                valid: false,
+                error: 'Please enter a valid code',
+                error_code: 'INVALID_FORMAT'
+            });
+            return;
+        }
+        setState('validating');
+        setValidationResult(null);
+        try {
+            const result = await InfluTo_1.default.validateCode(codeToValidate);
+            setValidationResult(result);
+            if (result.valid) {
+                setState('valid');
+                // Automatically set the code if valid
+                const setResult = await InfluTo_1.default.setReferralCode(codeToValidate, appUserId);
+                if (setResult.success) {
+                    onApplied?.(result);
+                }
+            }
+            else {
+                setState('invalid');
+            }
+            // Notify parent
+            onValidated?.(result);
+        }
+        catch (error) {
+            setState('error');
+            setValidationResult({
+                valid: false,
+                error: 'Network error',
+                error_code: 'NETWORK_ERROR'
+            });
+            onValidated?.({
+                valid: false,
+                error: 'Network error',
+                error_code: 'NETWORK_ERROR'
+            });
+        }
+    };
+    const handleSkip = () => {
+        onSkip?.();
+    };
+    const handleBlur = () => {
+        if (validateOnBlur && code && state === 'idle') {
+            handleValidate();
+        }
+    };
+    // Get message based on state
+    const getMessage = () => {
+        if (isPrefilled && state === 'idle') {
+            return { text: labelScheme.prefilledMessage, color: colorScheme.primary };
+        }
+        switch (state) {
+            case 'validating':
+                return { text: labelScheme.validatingMessage, color: colorScheme.textSecondary };
+            case 'valid':
+                return {
+                    text: validationResult?.message || labelScheme.validMessage,
+                    color: colorScheme.success
+                };
+            case 'invalid':
+                return {
+                    text: validationResult?.error || labelScheme.invalidMessage,
+                    color: colorScheme.error
+                };
+            case 'error':
+                return { text: labelScheme.errorMessage, color: colorScheme.error };
+            default:
+                return null;
+        }
+    };
+    const message = getMessage();
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.container, style.container] },
+        react_1.default.createElement(react_native_1.View, { style: [styles.titleContainer, style.titleContainer] },
+            react_1.default.createElement(react_native_1.Text, { style: [
+                    styles.title,
+                    { color: colorScheme.text, fontFamily: fontScheme.family, fontSize: fontScheme.sizeTitle },
+                    style.title
+                ] }, labelScheme.title),
+            labelScheme.subtitle && (react_1.default.createElement(react_native_1.Text, { style: [
+                    styles.subtitle,
+                    { color: colorScheme.textSecondary, fontFamily: fontScheme.family, fontSize: fontScheme.sizeMessage },
+                    style.subtitle
+                ] }, labelScheme.subtitle))),
+        react_1.default.createElement(react_native_1.View, { style: [styles.inputContainer, style.inputContainer] },
+            react_1.default.createElement(react_native_1.TextInput, { style: [
+                    styles.input,
+                    {
+                        backgroundColor: colorScheme.inputBackground,
+                        borderColor: state === 'valid' ? colorScheme.success : state === 'invalid' || state === 'error' ? colorScheme.error : colorScheme.border,
+                        color: colorScheme.text,
+                        fontFamily: fontScheme.family,
+                        fontSize: fontScheme.sizeInput
+                    },
+                    style.input
+                ], value: code, onChangeText: (text) => {
+                    setCode(text.toUpperCase());
+                    if (state !== 'idle' && state !== 'validating') {
+                        setState('idle');
+                        setValidationResult(null);
+                    }
+                }, onBlur: handleBlur, placeholder: labelScheme.placeholder, placeholderTextColor: colorScheme.textSecondary, autoCapitalize: "characters", autoCorrect: false, autoComplete: "off", maxLength: 20, editable: state !== 'validating', accessibilityLabel: "Referral code input", accessibilityHint: "Enter your promo or referral code" }),
+            state === 'valid' && (react_1.default.createElement(react_native_1.View, { style: styles.iconContainer },
+                react_1.default.createElement(react_native_1.Text, { style: [styles.icon, { color: colorScheme.success }] }, "\u2713"))),
+            (state === 'invalid' || state === 'error') && (react_1.default.createElement(react_native_1.View, { style: styles.iconContainer },
+                react_1.default.createElement(react_native_1.Text, { style: [styles.icon, { color: colorScheme.error }] }, "\u2717")))),
+        message && (react_1.default.createElement(react_native_1.View, { style: [styles.messageContainer, style.messageContainer] },
+            react_1.default.createElement(react_native_1.Text, { style: [
+                    styles.messageText,
+                    { color: message.color, fontFamily: fontScheme.family, fontSize: fontScheme.sizeMessage },
+                    style.messageText
+                ] }, message.text))),
+        react_1.default.createElement(react_native_1.View, { style: [styles.buttonContainer, style.buttonContainer] },
+            react_1.default.createElement(react_native_1.TouchableOpacity, { style: [
+                    styles.validateButton,
+                    {
+                        backgroundColor: state === 'valid' ? colorScheme.success : colorScheme.primary,
+                        opacity: state === 'validating' || !code ? 0.6 : 1
+                    },
+                    style.validateButton
+                ], onPress: () => handleValidate(), disabled: state === 'validating' || !code, accessibilityLabel: labelScheme.validateButton, accessibilityRole: "button" }, state === 'validating' ? (react_1.default.createElement(react_native_1.ActivityIndicator, { color: "#FFFFFF", size: "small" })) : (react_1.default.createElement(react_native_1.Text, { style: [
+                    styles.validateButtonText,
+                    { fontFamily: fontScheme.family, fontSize: fontScheme.sizeButton },
+                    style.validateButtonText
+                ] },
+                state === 'valid' ? '✓ ' : '',
+                labelScheme.validateButton))),
+            showSkipButton && onSkip && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.skipButton, style.skipButton], onPress: handleSkip, disabled: state === 'validating', accessibilityLabel: labelScheme.skipButton, accessibilityRole: "button" },
+                react_1.default.createElement(react_native_1.Text, { style: [
+                        styles.skipButtonText,
+                        { color: colorScheme.textSecondary, fontFamily: fontScheme.family, fontSize: fontScheme.sizeButton },
+                        style.skipButtonText
+                    ] }, labelScheme.skipButton)))),
+        state === 'valid' && validationResult?.campaign && (react_1.default.createElement(react_native_1.View, { style: styles.campaignInfo },
+            react_1.default.createElement(react_native_1.Text, { style: [
+                    styles.campaignTitle,
+                    { color: colorScheme.text, fontFamily: fontScheme.family }
+                ] }, validationResult.campaign.name),
+            validationResult.campaign.description && (react_1.default.createElement(react_native_1.Text, { style: [
+                    styles.campaignDescription,
+                    { color: colorScheme.textSecondary, fontFamily: fontScheme.family }
+                ] }, validationResult.campaign.description)),
+            validationResult.influencer && (react_1.default.createElement(react_native_1.Text, { style: [
+                    styles.influencerInfo,
+                    { color: colorScheme.textSecondary, fontFamily: fontScheme.family }
+                ] },
+                "Referred by ",
+                validationResult.influencer.name,
+                validationResult.influencer.social_handle && ` (@${validationResult.influencer.social_handle})`))))));
+};
+exports.ReferralCodeInput = ReferralCodeInput;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        padding: 20,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 12,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 4
+    },
+    titleContainer: {
+        marginBottom: 16
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: '600',
+        marginBottom: 4
+    },
+    subtitle: {
+        fontSize: 14,
+        lineHeight: 20
+    },
+    inputContainer: {
+        position: 'relative',
+        marginBottom: 12
+    },
+    input: {
+        height: 50,
+        borderWidth: 2,
+        borderRadius: 8,
+        paddingHorizontal: 16,
+        paddingRight: 48, // Space for icon
+        fontSize: 16,
+        fontWeight: '500'
+    },
+    iconContainer: {
+        position: 'absolute',
+        right: 16,
+        top: 12,
+        width: 24,
+        height: 24,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    icon: {
+        fontSize: 20,
+        fontWeight: 'bold'
+    },
+    messageContainer: {
+        marginBottom: 12,
+        padding: 12,
+        backgroundColor: '#F9FAFB',
+        borderRadius: 6
+    },
+    messageText: {
+        fontSize: 14,
+        lineHeight: 18,
+        textAlign: 'center'
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        gap: 12
+    },
+    validateButton: {
+        flex: 1,
+        height: 50,
+        borderRadius: 8,
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 2
+    },
+    validateButtonText: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600'
+    },
+    skipButton: {
+        height: 50,
+        paddingHorizontal: 20,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    skipButtonText: {
+        fontSize: 16,
+        fontWeight: '500'
+    },
+    campaignInfo: {
+        marginTop: 16,
+        padding: 12,
+        backgroundColor: '#F0FDF4',
+        borderRadius: 8,
+        borderLeftWidth: 3,
+        borderLeftColor: '#10B981'
+    },
+    campaignTitle: {
+        fontSize: 15,
+        fontWeight: '600',
+        marginBottom: 4
+    },
+    campaignDescription: {
+        fontSize: 13,
+        lineHeight: 18,
+        marginBottom: 4
+    },
+    influencerInfo: {
+        fontSize: 12,
+        fontStyle: 'italic'
+    }
+});
+exports.default = exports.ReferralCodeInput;

package/lib/components/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * InfluTo SDK UI Components
+ *
+ * Pre-built React Native components for easy integration
+ */
+export { ReferralCodeInput } from './ReferralCodeInput';
+export type { ReferralCodeInputProps } from './ReferralCodeInput';

package/lib/components/index.js

@@ -0,0 +1,10 @@
+"use strict";
+/**
+ * InfluTo SDK UI Components
+ *
+ * Pre-built React Native components for easy integration
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReferralCodeInput = void 0;
+var ReferralCodeInput_1 = require("./ReferralCodeInput");
+Object.defineProperty(exports, "ReferralCodeInput", { enumerable: true, get: function () { return ReferralCodeInput_1.ReferralCodeInput; } });

package/lib/index.js

@@ -25,3 +25,5 @@ exports.default = void 0;
 var InfluTo_1 = require("./InfluTo");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(InfluTo_1).default; } });
 __exportStar(require("./types"), exports);
+// Note: UI components are exported separately via './ui' to keep bundle size small
+// Import with: import { ReferralCodeInput } from '@influto/react-native-sdk/ui';

package/lib/types.d.ts

@@ -74,3 +74,68 @@ export interface DeviceInfo {
     timezone?: string;
     language?: string;
 }
+export interface CodeValidationResult {
+    /**
+     * Whether the code is valid
+     */
+    valid: boolean;
+    /**
+     * Normalized code (uppercase)
+     */
+    code?: string;
+    /**
+     * Campaign information if valid
+     */
+    campaign?: {
+        id: string;
+        name: string;
+        description?: string;
+        commission_percentage: number;
+        campaign_type: string;
+    };
+    /**
+     * Influencer information if available
+     */
+    influencer?: {
+        name: string;
+        social_handle?: string;
+        follower_count?: number;
+    };
+    /**
+     * Custom campaign data (for conditional offers)
+     */
+    custom_data?: Record<string, any>;
+    /**
+     * Success message
+     */
+    message?: string;
+    /**
+     * Error message if invalid
+     */
+    error?: string;
+    /**
+     * Error code for programmatic handling
+     */
+    error_code?: 'INVALID_FORMAT' | 'CODE_NOT_FOUND' | 'NETWORK_ERROR';
+}
+export interface SetCodeResult {
+    /**
+     * Whether code was set successfully
+     */
+    success: boolean;
+    /**
+     * Normalized code
+     */
+    code?: string;
+    /**
+     * Success/error message
+     */
+    message: string;
+    /**
+     * Campaign info
+     */
+    campaign?: {
+        id: string;
+        name: string;
+    };
+}

package/lib/ui.d.ts

@@ -0,0 +1,11 @@
+/**
+ * InfluTo SDK - UI Components Entry Point
+ *
+ * Import UI components separately to keep main SDK bundle small.
+ *
+ * @example
+ * ```typescript
+ * import { ReferralCodeInput } from '@influto/react-native-sdk/ui';
+ * ```
+ */
+export * from './components';

package/lib/ui.js

@@ -0,0 +1,27 @@
+"use strict";
+/**
+ * InfluTo SDK - UI Components Entry Point
+ *
+ * Import UI components separately to keep main SDK bundle small.
+ *
+ * @example
+ * ```typescript
+ * import { ReferralCodeInput } from '@influto/react-native-sdk/ui';
+ * ```
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/package.json

@@ -1,9 +1,21 @@
 {
   "name": "@influto/react-native-sdk",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "InfluTo SDK for React Native - Track influencer referrals and conversions",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    },
+    "./ui": {
+      "import": "./lib/ui.js",
+      "require": "./lib/ui.js",
+      "types": "./lib/ui.d.ts"
+    }
+  },
   "files": [
     "lib",
     "src",