@octovise/react-native-sdk 1.0.0

package/dist/api.js

@@ -0,0 +1,210 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_BASE_URL = void 0;
+exports.configure = configure;
+exports.buildTelemetryContext = buildTelemetryContext;
+exports.check = check;
+exports.fetchRules = fetchRules;
+exports.trackScreenViews = trackScreenViews;
+exports.setEventObserver = setEventObserver;
+exports.trackEvent = trackEvent;
+exports.sendTelemetry = sendTelemetry;
+exports.testInApp = testInApp;
+exports.registerDevice = registerDevice;
+exports.getUserId = getUserId;
+exports.getBaseUrl = getBaseUrl;
+const react_native_1 = require("react-native");
+const telemetry_1 = require("./telemetry");
+const version_1 = require("./version");
+exports.DEFAULT_BASE_URL = 'https://sdk-api.octovise.com.ar';
+let baseUrl = exports.DEFAULT_BASE_URL;
+let apiKey = '';
+let currentUserId = '';
+let currentUserHash;
+let appVersion;
+function configure(key, userId, userHash, url, appVer) {
+    apiKey = key;
+    currentUserId = String(userId);
+    currentUserHash = userHash;
+    if (url)
+        baseUrl = url;
+    if (appVer)
+        appVersion = appVer;
+}
+function errMessage(err) {
+    return (err instanceof Error ? err.message : String(err)).slice(0, 200);
+}
+function buildTelemetryContext() {
+    const ctx = { sdk_version: version_1.SDK_VERSION };
+    if (appVersion)
+        ctx.app_version = appVersion;
+    if (react_native_1.Platform.Version != null)
+        ctx.os_version = String(react_native_1.Platform.Version).slice(0, 64);
+    const c = react_native_1.Platform.constants;
+    if (c) {
+        const model = react_native_1.Platform.OS === 'android'
+            ? [c.Brand, c.Model].filter(Boolean).join(' ')
+            : c.interfaceIdiom;
+        if (model)
+            ctx.device_model = String(model).slice(0, 128);
+    }
+    return ctx;
+}
+async function check(sendId) {
+    try {
+        const parts = [
+            `u=${encodeURIComponent(currentUserId)}`,
+            'device=mobile',
+            'p=app',
+        ];
+        if (currentUserHash)
+            parts.push(`h=${encodeURIComponent(currentUserHash)}`);
+        if (sendId != null)
+            parts.push(`send_id=${encodeURIComponent(String(sendId))}`);
+        const res = await fetch(`${baseUrl}/check?${parts.join('&')}`, {
+            headers: { 'X-API-Key': apiKey },
+        });
+        if (res.status === 204)
+            return null;
+        if (!res.ok) {
+            (0, telemetry_1.reportError)(res.status === 401 || res.status === 403 ? 'auth_failed' : 'check_http_error', {
+                status: res.status,
+                endpoint: 'check',
+            });
+            return null;
+        }
+        return await res.json();
+    }
+    catch (err) {
+        (0, telemetry_1.reportError)('check_network_error', { endpoint: 'check', message: errMessage(err) });
+        return null;
+    }
+}
+async function fetchRules() {
+    try {
+        const parts = [`u=${encodeURIComponent(currentUserId)}`];
+        if (currentUserHash)
+            parts.push(`h=${encodeURIComponent(currentUserHash)}`);
+        const res = await fetch(`${baseUrl}/rules?${parts.join('&')}`, {
+            headers: { 'X-API-Key': apiKey },
+        });
+        if (!res.ok) {
+            (0, telemetry_1.reportError)(res.status === 401 || res.status === 403 ? 'auth_failed' : 'rules_http_error', {
+                status: res.status,
+                endpoint: 'rules',
+            });
+            return null;
+        }
+        return await res.json();
+    }
+    catch (err) {
+        (0, telemetry_1.reportError)('rules_network_error', { endpoint: 'rules', message: errMessage(err) });
+        return null;
+    }
+}
+async function trackScreenViews(views) {
+    if (views.length === 0)
+        return true;
+    try {
+        const res = await fetch(`${baseUrl}/screen-views`, {
+            method: 'POST',
+            headers: { 'X-API-Key': apiKey, 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                user_id: currentUserId,
+                user_hash: currentUserHash,
+                device: 'App',
+                views,
+            }),
+        });
+        return res.ok;
+    }
+    catch {
+        return false;
+    }
+}
+let eventObserver;
+function setEventObserver(cb) {
+    eventObserver = cb;
+}
+function trackEvent(sendId, event, meta) {
+    try {
+        eventObserver?.(event, meta, sendId);
+    }
+    catch {
+    }
+    const body = JSON.stringify({
+        user_id: currentUserId,
+        user_hash: currentUserHash,
+        send_id: sendId,
+        event,
+        meta: {
+            ...meta,
+            device: 'mobile',
+            platform: react_native_1.Platform.OS,
+        },
+    });
+    fetch(`${baseUrl}/event`, {
+        method: 'POST',
+        headers: { 'X-API-Key': apiKey, 'Content-Type': 'application/json' },
+        body,
+    })
+        .then((res) => {
+        if (!res.ok)
+            (0, telemetry_1.reportError)('event_http_error', { status: res.status, event });
+    })
+        .catch((err) => (0, telemetry_1.reportError)('event_network_error', { event, message: errMessage(err) }));
+}
+function sendTelemetry(events) {
+    if (events.length === 0)
+        return;
+    const body = JSON.stringify({
+        user_id: currentUserId,
+        user_hash: currentUserHash,
+        platform: react_native_1.Platform.OS,
+        context: buildTelemetryContext(),
+        events,
+    });
+    fetch(`${baseUrl}/telemetry`, {
+        method: 'POST',
+        headers: { 'X-API-Key': apiKey, 'Content-Type': 'application/json' },
+        body,
+    }).catch(() => { });
+}
+async function testInApp() {
+    try {
+        const res = await fetch(`${baseUrl}/test/in-app`, {
+            method: 'POST',
+            headers: { 'X-API-Key': apiKey, 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                user_id: currentUserId,
+                user_hash: currentUserHash,
+            }),
+        });
+        return res.ok;
+    }
+    catch {
+        return false;
+    }
+}
+async function registerDevice(fcmToken) {
+    try {
+        await fetch(`${baseUrl}/device`, {
+            method: 'POST',
+            headers: { 'X-API-Key': apiKey, 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                user_id: currentUserId,
+                user_hash: currentUserHash,
+                platform: react_native_1.Platform.OS,
+                fcm_token: fcmToken,
+            }),
+        });
+    }
+    catch {
+    }
+}
+function getUserId() {
+    return currentUserId;
+}
+function getBaseUrl() {
+    return baseUrl;
+}

package/dist/carouselStart.d.ts

@@ -0,0 +1 @@
+export declare function carouselInitialCell(imagePosition?: string): 1 | 2;

package/dist/carouselStart.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.carouselInitialCell = carouselInitialCell;
+function carouselInitialCell(imagePosition) {
+    return imagePosition === 'right' ? 2 : 1;
+}

package/dist/components/OctoErrorBoundary.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface Props {
+    children: React.ReactNode;
+    onError: (error: Error) => void;
+}
+interface State {
+    failed: boolean;
+}
+export default class OctoErrorBoundary extends React.Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(): State;
+    componentDidCatch(error: Error): void;
+    render(): React.ReactNode;
+}
+export {};

package/dist/components/OctoErrorBoundary.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+class OctoErrorBoundary extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { failed: false };
+    }
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    componentDidCatch(error) {
+        try {
+            this.props.onError(error);
+        }
+        catch {
+        }
+    }
+    render() {
+        if (this.state.failed)
+            return null;
+        return this.props.children;
+    }
+}
+exports.default = OctoErrorBoundary;

package/dist/components/OctoImage.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { InAppMessage } from '../types';
+export interface ImageCorners {
+    topLeft?: number;
+    topRight?: number;
+    bottomLeft?: number;
+    bottomRight?: number;
+}
+export interface ImageBleed {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+export declare function OctoImage({ message, width, height, corners, bleed, onError, placeholderColor, }: {
+    message: Pick<InAppMessage, 'image' | 'image_fit' | 'image_bg'>;
+    width: number;
+    height: number;
+    onError?: () => void;
+    corners?: ImageCorners;
+    bleed?: ImageBleed;
+    placeholderColor?: string;
+}): React.JSX.Element;

package/dist/components/OctoImage.js

@@ -0,0 +1,69 @@
+"use strict";
+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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OctoImage = OctoImage;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const imageFit_1 = require("../imageFit");
+function OctoImage({ message, width, height, corners, bleed, onError, placeholderColor, }) {
+    const { container, image } = (0, imageFit_1.imageRenderStyles)(message, width, height);
+    const [loaded, setLoaded] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setLoaded(false), [message.image]);
+    const showSkeleton = !loaded && message.image_fit !== 'contain' && !!placeholderColor;
+    const radii = corners
+        ? {
+            borderTopLeftRadius: corners.topLeft,
+            borderTopRightRadius: corners.topRight,
+            borderBottomLeftRadius: corners.bottomLeft,
+            borderBottomRightRadius: corners.bottomRight,
+        }
+        : null;
+    const b = bleed || {};
+    const extraW = (b.left || 0) + (b.right || 0);
+    const extraH = (b.top || 0) + (b.bottom || 0);
+    const bleedSize = extraW || extraH ? { width: width + extraW, height: height + extraH } : null;
+    const bleedMargin = extraW || extraH
+        ? {
+            marginTop: b.top ? -b.top : undefined,
+            marginBottom: b.bottom ? -b.bottom : undefined,
+            marginLeft: b.left ? -b.left : undefined,
+            marginRight: b.right ? -b.right : undefined,
+        }
+        : null;
+    return (<react_native_1.View style={[container, radii, bleedSize, bleedMargin]}>
+      {showSkeleton ? (<react_native_1.View style={[react_native_1.StyleSheet.absoluteFillObject, radii, { backgroundColor: placeholderColor, opacity: 0.08 }]}/>) : null}
+      <react_native_1.Image source={{ uri: message.image }} style={[image, radii, bleedSize]} onError={onError} onLoad={() => setLoaded(true)}/>
+    </react_native_1.View>);
+}

package/dist/components/OctoMessage.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { InAppMessage } from '../types';
+interface Props {
+    message: InAppMessage | null;
+    onCTA?: (url: string) => void;
+    onDismissed?: () => void;
+}
+export default function OctoMessage({ message, onCTA, onDismissed }: Props): React.JSX.Element | null;
+export {};

package/dist/components/OctoMessage.js

@@ -0,0 +1,189 @@
+"use strict";
+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.default = OctoMessage;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const api = __importStar(require("../api"));
+const safeNavUrl_1 = require("../safeNavUrl");
+const debug_1 = require("../debug");
+const latency_1 = require("../latency");
+const telemetry_1 = require("../telemetry");
+const screenTargeting_1 = require("../screenTargeting");
+const OctoModal_1 = __importDefault(require("./OctoModal"));
+const OctoToast_1 = __importDefault(require("./OctoToast"));
+const OctoErrorBoundary_1 = __importDefault(require("./OctoErrorBoundary"));
+const DISMISS_ANIMATION_MS = 320;
+const IMAGE_LOAD_SAFETY_MS = 6000;
+function OctoMessage({ message, onCTA, onDismissed }) {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [imageReady, setImageReady] = (0, react_1.useState)(false);
+    const [imageFailed, setImageFailed] = (0, react_1.useState)(false);
+    const shownAt = (0, react_1.useRef)(0);
+    const firstInteractionAt = (0, react_1.useRef)(null);
+    const effectStartAt = (0, react_1.useRef)(0);
+    const revealedRef = (0, react_1.useRef)(false);
+    const safetyTimerRef = (0, react_1.useRef)(null);
+    const reveal = (loaded) => {
+        if (revealedRef.current)
+            return;
+        revealedRef.current = true;
+        if (safetyTimerRef.current) {
+            clearTimeout(safetyTimerRef.current);
+            safetyTimerRef.current = null;
+        }
+        shownAt.current = Date.now();
+        setImageReady(loaded);
+        setVisible(true);
+    };
+    (0, react_1.useEffect)(() => {
+        revealedRef.current = false;
+        if (safetyTimerRef.current) {
+            clearTimeout(safetyTimerRef.current);
+            safetyTimerRef.current = null;
+        }
+        setVisible(false);
+        setImageReady(false);
+        setImageFailed(false);
+        if (!message)
+            return;
+        effectStartAt.current = Date.now();
+        if (!message.image) {
+            reveal(false);
+            return;
+        }
+        safetyTimerRef.current = setTimeout(() => reveal(false), IMAGE_LOAD_SAFETY_MS);
+        return () => {
+            if (safetyTimerRef.current) {
+                clearTimeout(safetyTimerRef.current);
+                safetyTimerRef.current = null;
+            }
+        };
+    }, [message]);
+    if (!message)
+        return null;
+    const msg = message;
+    const sendId = msg._send_id ?? 0;
+    function buildMeta(extra) {
+        return {
+            duration_ms: Date.now() - shownAt.current,
+            time_to_first_interaction_ms: firstInteractionAt.current
+                ? firstInteractionAt.current - shownAt.current
+                : null,
+            device: 'mobile',
+            platform: react_native_1.Platform.OS,
+            image_loaded: imageReady,
+            ...extra,
+        };
+    }
+    function markInteraction() {
+        if (!firstInteractionAt.current) {
+            firstInteractionAt.current = Date.now();
+        }
+    }
+    function handleImpression() {
+        const tImpression = Date.now();
+        const latency = msg.__timing
+            ? (0, latency_1.buildLatencyBreakdown)(msg.__timing, {
+                showStart: effectStartAt.current,
+                shown: shownAt.current,
+                impression: tImpression,
+                hasImage: !!msg.image,
+            })
+            : undefined;
+        api.trackEvent(sendId, 'impression', buildMeta({ ...(latency ? { latency } : {}), ...(msg.image ? { image_url: msg.image } : {}) }));
+        if (latency) {
+            const breakdown = { ...latency, layout: msg.layout, platform: react_native_1.Platform.OS, id: msg.id };
+            (0, debug_1.debugLog)('[OctoSDK] latency check→visible', breakdown);
+            (0, telemetry_1.reportMetric)('inapp_latency_ms', latency.total_ms, breakdown);
+        }
+    }
+    function handleCTAPress() {
+        markInteraction();
+        api.trackEvent(sendId, 'click', buildMeta({ close_method: 'cta' }));
+        setVisible(false);
+        const safe = (0, safeNavUrl_1.safeNavUrl)(msg.cta?.url);
+        if (safe)
+            onCTA?.(safe);
+        setTimeout(() => onDismissed?.(), DISMISS_ANIMATION_MS);
+    }
+    function handleNoneEngagement() {
+        markInteraction();
+        api.trackEvent(sendId, 'click', buildMeta({ close_method: 'cta' }));
+    }
+    function handleDismiss(method) {
+        api.trackEvent(sendId, 'dismiss', buildMeta({ close_method: method }));
+        setVisible(false);
+        setTimeout(() => onDismissed?.(), DISMISS_ANIMATION_MS);
+    }
+    function handleImageError() {
+        (0, debug_1.debugLog)('[OctoSDK] image load failed', { url: msg.image, platform: react_native_1.Platform.OS, id: msg.id });
+        (0, telemetry_1.reportError)('image_load_failed', { url: msg.image, platform: react_native_1.Platform.OS, layout: msg.layout, id: msg.id });
+        setImageFailed(true);
+    }
+    const ctaDevices = msg.cta?.devices;
+    const fieldHidesMobile = Array.isArray(ctaDevices) && !ctaDevices.includes('mobile');
+    const ctaNoMobileDest = !!msg.cta?.url && (0, screenTargeting_1.isSynced)() && !(0, screenTargeting_1.ctaHasMobileDestination)(msg.cta.url);
+    const dropCta = fieldHidesMobile || ctaNoMobileDest;
+    const renderMsg = imageFailed || dropCta
+        ? {
+            ...msg,
+            ...(imageFailed ? { image: undefined } : {}),
+            ...(dropCta ? { cta: undefined, click_mode: 'cta' } : {}),
+        }
+        : msg;
+    const Component = renderMsg.layout === 'toast' ? OctoToast_1.default : OctoModal_1.default;
+    const showPreloader = !!msg.image && !visible && !imageFailed;
+    return (<>
+      {showPreloader ? (<react_native_1.Image source={{ uri: msg.image }} style={{ position: 'absolute', width: 1, height: 1, opacity: 0 }} fadeDuration={0} onLoad={() => reveal(true)} onError={() => {
+                handleImageError();
+                reveal(false);
+            }}/>) : null}
+      <OctoErrorBoundary_1.default onError={(error) => {
+            (0, telemetry_1.reportError)('render_crash', {
+                layout: renderMsg.layout,
+                id: renderMsg.id,
+                platform: react_native_1.Platform.OS,
+                message: error.message,
+            });
+            onDismissed?.();
+        }}>
+        <Component message={renderMsg} visible={visible} onImpression={handleImpression} onCTAPress={handleCTAPress} onNoneEngagement={handleNoneEngagement} onDismiss={handleDismiss} onImageError={handleImageError}/>
+      </OctoErrorBoundary_1.default>
+    </>);
+}

package/dist/components/OctoModal.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { InAppMessage } from '../types';
+interface Props {
+    message: InAppMessage;
+    visible: boolean;
+    onImpression: () => void;
+    onCTAPress: () => void;
+    onNoneEngagement: () => void;
+    onDismiss: (method: string) => void;
+    onImageError?: () => void;
+}
+export default function OctoModal({ message, visible, onImpression, onCTAPress, onNoneEngagement, onDismiss, onImageError }: Props): React.JSX.Element;
+export {};