@octovise/react-native-sdk 1.0.0

package/dist/components/OctoModal.js

@@ -0,0 +1,179 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = OctoModal;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const OctoImage_1 = require("./OctoImage");
+const { width: SCREEN_WIDTH } = react_native_1.Dimensions.get('window');
+const INSETS = react_native_safe_area_context_1.initialWindowMetrics?.insets ?? { top: 0, right: 0, bottom: 0, left: 0 };
+function getScale(size) {
+    if (size === 'small')
+        return 0.85;
+    if (size === 'large')
+        return 1.15;
+    return 1;
+}
+function getWidthPercent(size) {
+    if (size === 'small')
+        return 0.80;
+    if (size === 'large')
+        return 0.95;
+    return 0.90;
+}
+function getJustify(position) {
+    if (position === 'top')
+        return 'flex-start';
+    if (position === 'bottom')
+        return 'flex-end';
+    return 'center';
+}
+function modalImagePosition(imgPos) {
+    return imgPos === 'bottom' ? 'bottom' : 'top';
+}
+function OctoModal({ message, visible, onImpression, onCTAPress, onNoneEngagement, onDismiss, onImageError }) {
+    const scale = getScale(message.size);
+    const textScale = getScale(message.text_size);
+    const colors = message.colors || {};
+    const primary = colors.primary || '#6200ee';
+    const bg = colors.background || '#ffffff';
+    const textColor = colors.text || '#333333';
+    const modalWidth = SCREEN_WIDTH * getWidthPercent(message.size);
+    const position = message.mobile_position || 'center';
+    const clickMode = message.click_mode || 'cta';
+    const textAlign = message.text_align || 'left';
+    const imagePos = modalImagePosition(message.image_position);
+    const centeredPad = Math.max(INSETS.top, INSETS.bottom) + 16;
+    let padTop = INSETS.top + 16;
+    let padBottom = INSETS.bottom + 16;
+    if (position === 'center') {
+        padTop = centeredPad;
+        padBottom = centeredPad;
+    }
+    else if (position === 'bottom') {
+        padBottom = react_native_1.Platform.OS === 'ios' ? INSETS.bottom + 16 : Math.min(INSETS.bottom + 16, 24);
+    }
+    react_1.default.useEffect(() => {
+        if (visible)
+            onImpression();
+    }, [visible]);
+    const handlePress = () => {
+        if (clickMode === 'full')
+            onCTAPress();
+        else if (clickMode === 'none')
+            onNoneEngagement();
+    };
+    const content = (<react_native_1.View style={[styles.card, { backgroundColor: bg, width: modalWidth, borderRadius: 16 * scale }]}>
+      
+      <react_native_1.TouchableOpacity style={[styles.closeBtn, { width: 32 * scale, height: 32 * scale, borderRadius: 16 * scale }]} onPress={() => onDismiss('close_button')} activeOpacity={0.7}>
+        <react_native_1.Text style={styles.closeBtnText}>×</react_native_1.Text>
+      </react_native_1.TouchableOpacity>
+
+      
+      <react_native_1.View style={{ flexDirection: imagePos === 'bottom' ? 'column-reverse' : 'column' }}>
+        
+        {message.image && (<OctoImage_1.OctoImage message={message} width={modalWidth} height={200 * scale} corners={imagePos === 'bottom'
+                ? { bottomLeft: 16 * scale, bottomRight: 16 * scale }
+                : { topLeft: 16 * scale, topRight: 16 * scale }} bleed={imagePos === 'bottom' ? { bottom: 1, left: 1, right: 1 } : { top: 1, left: 1, right: 1 }} onError={onImageError} placeholderColor={textColor}/>)}
+
+        
+        <react_native_1.View style={[styles.body, { padding: 14 * scale }]}>
+          {message.title && (<react_native_1.Text style={[styles.title, { fontSize: 22 * textScale, color: textColor, textAlign }]}>
+              {message.title}
+            </react_native_1.Text>)}
+          {message.body && (<react_native_1.Text style={[styles.bodyText, { fontSize: 15 * textScale, color: textColor, textAlign }]}>
+              {message.body}
+            </react_native_1.Text>)}
+
+          
+          {clickMode === 'cta' && message.cta?.label && (<react_native_1.TouchableOpacity style={[styles.ctaBtn, { backgroundColor: primary, borderRadius: 10 * textScale }]} onPress={onCTAPress} activeOpacity={0.9}>
+              <react_native_1.Text style={[styles.ctaBtnText, { fontSize: 16 * textScale }]}>
+                {message.cta.label}
+              </react_native_1.Text>
+            </react_native_1.TouchableOpacity>)}
+
+          
+          {message.dismiss_label && clickMode !== 'full' && (<react_native_1.TouchableOpacity onPress={() => onDismiss('dismiss_button')} activeOpacity={0.7}>
+              <react_native_1.Text style={[styles.dismissText, { fontSize: 14 * textScale, color: textColor }]}>
+                {message.dismiss_label}
+              </react_native_1.Text>
+            </react_native_1.TouchableOpacity>)}
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.View>);
+    return (<react_native_1.Modal transparent visible={visible} animationType="fade" statusBarTranslucent>
+      <react_native_1.TouchableOpacity style={[
+            styles.backdrop,
+            {
+                justifyContent: getJustify(position),
+                paddingTop: padTop,
+                paddingBottom: padBottom,
+            },
+        ]} activeOpacity={1} onPress={() => onDismiss('backdrop')}>
+        <react_native_1.TouchableOpacity activeOpacity={1} onPress={clickMode === 'full' || clickMode === 'none' ? handlePress : undefined}>
+          {content}
+        </react_native_1.TouchableOpacity>
+      </react_native_1.TouchableOpacity>
+    </react_native_1.Modal>);
+}
+const styles = react_native_1.StyleSheet.create({
+    backdrop: {
+        flex: 1,
+        alignItems: 'center',
+        backgroundColor: 'rgba(0,0,0,0.5)',
+    },
+    card: {
+        overflow: 'hidden',
+        elevation: 20,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 20 },
+        shadowOpacity: 0.3,
+        shadowRadius: 30,
+        position: 'relative',
+    },
+    closeBtn: {
+        position: 'absolute',
+        top: 12,
+        right: 12,
+        zIndex: 10,
+        backgroundColor: 'rgba(0,0,0,0.4)',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    closeBtnText: {
+        color: '#fff',
+        fontSize: 18,
+        lineHeight: 20,
+    },
+    body: {
+        flexShrink: 1,
+        minWidth: 0,
+    },
+    title: {
+        fontWeight: '700',
+        marginBottom: 8,
+        lineHeight: 28,
+    },
+    bodyText: {
+        opacity: 0.8,
+        lineHeight: 22,
+        marginBottom: 24,
+    },
+    ctaBtn: {
+        paddingVertical: 14,
+        paddingHorizontal: 24,
+        alignItems: 'center',
+    },
+    ctaBtnText: {
+        color: '#fff',
+        fontWeight: '600',
+    },
+    dismissText: {
+        textAlign: 'center',
+        opacity: 0.5,
+        paddingVertical: 12,
+    },
+});

package/dist/components/OctoProvider.d.ts

@@ -0,0 +1,14 @@
+import React, { type ReactNode } from 'react';
+import type { InAppMessage } from '../types';
+interface OctoContextValue {
+    showMessage: (msg: InAppMessage, onCTA?: (url: string) => void) => void;
+    dismissMessage: () => void;
+}
+export declare function useOcto(): OctoContextValue;
+export declare function getGlobalShow(): (msg: InAppMessage, onCTA?: (url: string) => void) => void;
+export declare function getGlobalDismiss(): () => void;
+interface ProviderProps {
+    children: ReactNode;
+}
+export default function OctoProvider({ children }: ProviderProps): React.JSX.Element;
+export {};

package/dist/components/OctoProvider.js

@@ -0,0 +1,92 @@
+"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.useOcto = useOcto;
+exports.getGlobalShow = getGlobalShow;
+exports.getGlobalDismiss = getGlobalDismiss;
+exports.default = OctoProvider;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const state_1 = require("../state");
+const OctoMessage_1 = __importDefault(require("./OctoMessage"));
+const OctoContext = (0, react_1.createContext)({
+    showMessage: () => { },
+    dismissMessage: () => { },
+});
+function useOcto() {
+    return (0, react_1.useContext)(OctoContext);
+}
+let globalShowMessage = () => {
+    console.warn('[OctoSDK] OctoProvider is not mounted. Wrap your app with <OctoProvider>.');
+};
+let globalDismissMessage = () => { };
+function getGlobalShow() {
+    return globalShowMessage;
+}
+function getGlobalDismiss() {
+    return globalDismissMessage;
+}
+function OctoProvider({ children }) {
+    const [currentMessage, setCurrentMessage] = (0, react_1.useState)(null);
+    const [currentOnCTA, setCurrentOnCTA] = (0, react_1.useState)();
+    const showMessage = (0, react_1.useCallback)((msg, onCTA) => {
+        setCurrentMessage(msg);
+        setCurrentOnCTA(() => onCTA);
+    }, []);
+    const dismissMessage = (0, react_1.useCallback)(() => {
+        setCurrentMessage(null);
+        setCurrentOnCTA(undefined);
+        (0, state_1.clearCurrentMessage)();
+    }, []);
+    react_1.default.useEffect(() => {
+        globalShowMessage = showMessage;
+        globalDismissMessage = dismissMessage;
+        return () => {
+            globalShowMessage = () => { };
+            globalDismissMessage = () => { };
+        };
+    }, [showMessage, dismissMessage]);
+    const contextValue = react_1.default.useMemo(() => ({ showMessage, dismissMessage }), [showMessage, dismissMessage]);
+    return (<OctoContext.Provider value={contextValue}>
+      {children}
+      
+      <react_native_1.View style={react_native_1.StyleSheet.absoluteFill} pointerEvents="box-none">
+        <OctoMessage_1.default message={currentMessage} onCTA={currentOnCTA} onDismissed={dismissMessage}/>
+      </react_native_1.View>
+    </OctoContext.Provider>);
+}

package/dist/components/OctoToast.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 OctoToast({ message, visible, onImpression, onCTAPress, onNoneEngagement, onDismiss, onImageError }: Props): React.JSX.Element;
+export {};