@finos_sdk/sdk-ekyc 1.5.0 → 1.5.2

package/src/types/ekycExitConfirmType.ts

@@ -0,0 +1,123 @@
+/**
+ * ExitConfirmConfig — bottom sheet xác nhận thoát khi user nhấn back trong liveness.
+ * Map 1-1 với native ExitConfirmConfig (sdkcore 1.5.2+).
+ *
+ * Mọi field đều optional — null/undefined = giữ giá trị mặc định của SDK.
+ * Xem EXIT_CONFIRM_CONFIG.md để biết chi tiết và giá trị mặc định.
+ */
+
+/** Hướng gradient cho ViewStyle.backgroundGradient*. Map android.graphics.drawable.GradientDrawable.Orientation. */
+export enum ExitConfirmGradientOrientation {
+    LEFT_RIGHT = "LEFT_RIGHT",
+    RIGHT_LEFT = "RIGHT_LEFT",
+    TOP_BOTTOM = "TOP_BOTTOM",
+    BOTTOM_TOP = "BOTTOM_TOP",
+    TL_BR = "TL_BR",
+    TR_BL = "TR_BL",
+    BL_TR = "BL_TR",
+    BR_TL = "BR_TL",
+}
+
+/** Text style cho title/content/button label. */
+export interface ExitConfirmTextStyles {
+    /** Hex màu chữ, vd "#1A1A1A" hoặc "#FF1A1A1A". */
+    textColor?: string;
+    /** Cỡ chữ đơn vị sp. */
+    textSize?: number;
+    /** Tên font resource trong res/font/, vd "inter_medium". */
+    textFont?: string;
+    /** 0 Normal · 1 Bold · 2 Italic · 3 Bold+Italic. */
+    textStyle?: number;
+    /** android.view.Gravity flag, vd Gravity.CENTER = 17. */
+    textAlign?: number;
+}
+
+/** View style cho background, kích thước, margin, padding, bo góc của container/button. */
+export interface ExitConfirmViewStyle {
+    /** Hex màu nền. Bị bỏ qua nếu set gradient. */
+    backgroundColor?: string;
+    /** Tối thiểu 2 màu hex cho gradient. */
+    backgroundGradientColors?: string[];
+    /**
+     * Vị trí [0.0–1.0] tương ứng từng màu (Android 10+).
+     * null = phân bổ đều. Bắt buộc cùng size với backgroundGradientColors.
+     */
+    backgroundGradientPositions?: number[];
+    /** Hướng gradient. Mặc định LEFT_RIGHT. */
+    backgroundGradientOrientation?: ExitConfirmGradientOrientation;
+    /** dp — null = giữ constraint layout. */
+    width?: number;
+    /** dp. */
+    height?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    marginStart?: number;
+    marginEnd?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingStart?: number;
+    paddingEnd?: number;
+    /** android.view.Gravity flag cho nội dung bên trong. */
+    gravity?: number;
+    /** Bo góc dp. 100f = pill shape. */
+    cornerRadius?: number;
+}
+
+/**
+ * Icon phía trên bottom sheet.
+ * Native field `icon: Int?` là R.drawable resource ID — RN không truy cập trực tiếp được.
+ * Truyền `iconResName` (vd "ic_warning") để native resolve qua getIdentifier().
+ * Bỏ qua / null = dùng icon mặc định SDK (ic_bell).
+ */
+export interface ExitConfirmIconProps {
+    /** Tên drawable resource trong res/drawable/. null/omitted = icon mặc định SDK. */
+    iconResName?: string;
+    iconViewStyle?: ExitConfirmViewStyle;
+}
+
+export interface ExitConfirmTitleProps {
+    title?: string;
+    titleStyles?: ExitConfirmTextStyles;
+}
+
+export interface ExitConfirmContentProps {
+    content?: string;
+    contentStyles?: ExitConfirmTextStyles;
+}
+
+export interface ExitConfirmButtonProps {
+    buttonTitle?: string;
+    buttonTextStyles?: ExitConfirmTextStyles;
+    buttonStyles?: ExitConfirmViewStyle;
+}
+
+/**
+ * Config bottom sheet xác nhận thoát. Truyền vào FinosEKYC.startEkycUI / startLiveness.
+ * Mọi field optional — null = SDK default.
+ *
+ * @example
+ * exitConfirmConfig: {
+ *   titleProps: { title: "Thông báo" },
+ *   contentProps: { content: "Quý khách muốn thoát?" },
+ *   confirmButtonProps: {
+ *     buttonTitle: "Có",
+ *     buttonStyles: {
+ *       backgroundGradientColors: ["#DA2128", "#F9A61C", "#FFDD00"],
+ *       cornerRadius: 100,
+ *     },
+ *   },
+ *   cancelButtonProps: {
+ *     buttonTitle: "Không",
+ *     buttonStyles: { backgroundColor: "#F3F4F6", cornerRadius: 100 },
+ *   },
+ * }
+ */
+export interface ExitConfirmConfig {
+    iconProps?: ExitConfirmIconProps;
+    titleProps?: ExitConfirmTitleProps;
+    contentProps?: ExitConfirmContentProps;
+    /** Nút xác nhận thoát (vd "Có") — chỉ nút này mới trigger callback thoát SDK. */
+    confirmButtonProps?: ExitConfirmButtonProps;
+    /** Nút huỷ (vd "Không") — đóng sheet, ở lại SDK. */
+    cancelButtonProps?: ExitConfirmButtonProps;
+}

package/dist/src/components/ExitConfirmSheet.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const ExitConfirmSheet: (props: any) => React.JSX.Element;
-export default ExitConfirmSheet;

package/dist/src/components/ExitConfirmSheet.js

@@ -1,164 +0,0 @@
-"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"));
-const react_native_1 = require("react-native");
-const FinosEKYCModule_1 = require("../modules/FinosEKYCModule");
-const BellIcon = () => (<react_native_1.View style={styles.bellWrapper}>
-    <react_native_1.View style={styles.bellMount}/>
-    <react_native_1.View style={styles.bellBody}/>
-    <react_native_1.View style={styles.bellSkirt}/>
-    <react_native_1.View style={styles.bellClapper}/>
-  </react_native_1.View>);
-const ExitConfirmSheet = (props) => {
-    const message = props.message || 'Giao dịch bị hủy khi điều hướng sang tính năng tiếp theo. Quý khách có chắc chắn hủy giao dịch?';
-    const confirmText = props.confirmText || 'Đồng ý';
-    const cancelText = props.cancelText || 'Ở lại';
-    const handleConfirm = async () => {
-        await FinosEKYCModule_1.FinosEKYC.resolveExit('CONFIRM');
-    };
-    const handleCancel = async () => {
-        await FinosEKYCModule_1.FinosEKYC.resolveExit('CANCEL');
-    };
-    return (<react_native_1.View style={styles.container} onLayout={(e) => {
-            var _a, _b;
-            const h = e.nativeEvent.layout.height;
-            if (h > 0)
-                (_b = (_a = react_native_1.NativeModules.EKYCModule) === null || _a === void 0 ? void 0 : _a.setExitSheetHeight) === null || _b === void 0 ? void 0 : _b.call(_a, h);
-        }}>
-      <react_native_1.View style={styles.handle}/>
-
-      <react_native_1.View style={styles.content}>
-        <BellIcon />
-        <react_native_1.Text style={styles.message}>{message}</react_native_1.Text>
-      </react_native_1.View>
-
-      <react_native_1.View style={styles.footer}>
-        <react_native_1.TouchableOpacity style={styles.confirmButton} onPress={handleConfirm} activeOpacity={0.8}>
-          <react_native_1.View style={styles.gradientContainer}>
-            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#E53935' }]}/>
-            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#EA4F28' }]}/>
-            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#EF6519' }]}/>
-            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#F47A0B' }]}/>
-            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#F98F00' }]}/>
-            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#FCA300' }]}/>
-            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#FFB800' }]}/>
-            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#FFCC00' }]}/>
-            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#FFD600' }]}/>
-          </react_native_1.View>
-          <react_native_1.Text style={styles.confirmText}>{confirmText}</react_native_1.Text>
-        </react_native_1.TouchableOpacity>
-
-        <react_native_1.TouchableOpacity style={styles.cancelButton} onPress={handleCancel} activeOpacity={0.7}>
-          <react_native_1.Text style={styles.cancelText}>{cancelText}</react_native_1.Text>
-        </react_native_1.TouchableOpacity>
-      </react_native_1.View>
-    </react_native_1.View>);
-};
-const styles = react_native_1.StyleSheet.create({
-    container: {
-        backgroundColor: 'white',
-        paddingHorizontal: 24,
-        paddingBottom: 32,
-        borderTopLeftRadius: 32,
-        borderTopRightRadius: 32,
-    },
-    handle: {
-        width: 40,
-        height: 4,
-        backgroundColor: '#CCCCCC',
-        borderRadius: 2,
-        alignSelf: 'center',
-        marginTop: 12,
-        marginBottom: 20,
-    },
-    content: {
-        alignItems: 'center',
-        marginBottom: 28,
-    },
-    bellWrapper: {
-        alignItems: 'center',
-        width: 72,
-        height: 72,
-        marginBottom: 20,
-    },
-    bellMount: {
-        width: 9,
-        height: 7,
-        borderRadius: 4,
-        backgroundColor: '#E53935',
-        marginTop: 7,
-    },
-    bellBody: {
-        width: 36,
-        height: 34,
-        borderTopLeftRadius: 18,
-        borderTopRightRadius: 18,
-        backgroundColor: '#E53935',
-        marginTop: -1,
-    },
-    bellSkirt: {
-        width: 48,
-        height: 9,
-        borderBottomLeftRadius: 5,
-        borderBottomRightRadius: 5,
-        backgroundColor: '#E53935',
-    },
-    bellClapper: {
-        width: 12,
-        height: 7,
-        borderBottomLeftRadius: 6,
-        borderBottomRightRadius: 6,
-        backgroundColor: '#E53935',
-        marginTop: 2,
-    },
-    message: {
-        fontSize: 15,
-        color: '#1A1A1A',
-        textAlign: 'center',
-        lineHeight: 19.5,
-    },
-    footer: {
-        width: '100%',
-        gap: 12,
-    },
-    confirmButton: {
-        width: '100%',
-        height: 52,
-        borderRadius: 24,
-        alignItems: 'center',
-        justifyContent: 'center',
-        overflow: 'hidden',
-        elevation: 4,
-        shadowColor: '#E53935',
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 8,
-    },
-    gradientContainer: Object.assign(Object.assign({}, react_native_1.StyleSheet.absoluteFillObject), { flexDirection: 'row' }),
-    gradientStep: {
-        flex: 1,
-    },
-    confirmText: {
-        fontSize: 16,
-        fontWeight: '700',
-        color: '#fff',
-    },
-    cancelButton: {
-        width: '100%',
-        height: 52,
-        borderRadius: 24,
-        borderWidth: 1.5,
-        borderColor: '#CCCCCC',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    cancelText: {
-        fontSize: 16,
-        fontWeight: '600',
-        color: '#555555',
-    },
-});
-exports.default = ExitConfirmSheet;

package/dist/src/components/ExitSheetWrapper.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-/**
- * Set custom exit sheet component.
- * Gọi trước khi showRNExitSheet để override default ExitConfirmSheet.
- */
-export declare function setCustomExitComponent(component: React.ComponentType<any> | null): void;
-/**
- * Wrapper component được SDK auto-register với tên 'SDKExitSheetWrapper'.
- * Render custom component nếu được set, fallback về ExitConfirmSheet mặc định.
- */
-declare const ExitSheetWrapper: (props: any) => React.JSX.Element;
-export default ExitSheetWrapper;

package/dist/src/components/ExitSheetWrapper.js

@@ -1,26 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setCustomExitComponent = setCustomExitComponent;
-const react_1 = __importDefault(require("react"));
-const ExitConfirmSheet_1 = __importDefault(require("./ExitConfirmSheet"));
-// Module-level variable — set bởi FinosEKYC.setExitSheetComponent()
-let _customComponent = null;
-/**
- * Set custom exit sheet component.
- * Gọi trước khi showRNExitSheet để override default ExitConfirmSheet.
- */
-function setCustomExitComponent(component) {
-    _customComponent = component;
-}
-/**
- * Wrapper component được SDK auto-register với tên 'SDKExitSheetWrapper'.
- * Render custom component nếu được set, fallback về ExitConfirmSheet mặc định.
- */
-const ExitSheetWrapper = (props) => {
-    const Component = _customComponent || ExitConfirmSheet_1.default;
-    return <Component {...props}/>;
-};
-exports.default = ExitSheetWrapper;

package/src/components/ExitConfirmSheet.tsx

@@ -1,180 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  NativeModules,
-} from 'react-native';
-import { FinosEKYC } from '../modules/FinosEKYCModule';
-
-const BellIcon = () => (
-  <View style={styles.bellWrapper}>
-    <View style={styles.bellMount} />
-    <View style={styles.bellBody} />
-    <View style={styles.bellSkirt} />
-    <View style={styles.bellClapper} />
-  </View>
-);
-
-const ExitConfirmSheet = (props: any) => {
-  const message = props.message || 'Giao dịch bị hủy khi điều hướng sang tính năng tiếp theo. Quý khách có chắc chắn hủy giao dịch?';
-  const confirmText = props.confirmText || 'Đồng ý';
-  const cancelText = props.cancelText || 'Ở lại';
-
-  const handleConfirm = async () => {
-    await FinosEKYC.resolveExit('CONFIRM');
-  };
-
-  const handleCancel = async () => {
-    await FinosEKYC.resolveExit('CANCEL');
-  };
-
-  return (
-    <View
-      style={styles.container}
-      onLayout={(e) => {
-        const h = e.nativeEvent.layout.height;
-        if (h > 0) NativeModules.EKYCModule?.setExitSheetHeight?.(h);
-      }}
-    >
-      <View style={styles.handle} />
-
-      <View style={styles.content}>
-        <BellIcon />
-        <Text style={styles.message}>{message}</Text>
-      </View>
-
-      <View style={styles.footer}>
-        <TouchableOpacity style={styles.confirmButton} onPress={handleConfirm} activeOpacity={0.8}>
-          <View style={styles.gradientContainer}>
-            <View style={[styles.gradientStep, { backgroundColor: '#E53935' }]} />
-            <View style={[styles.gradientStep, { backgroundColor: '#EA4F28' }]} />
-            <View style={[styles.gradientStep, { backgroundColor: '#EF6519' }]} />
-            <View style={[styles.gradientStep, { backgroundColor: '#F47A0B' }]} />
-            <View style={[styles.gradientStep, { backgroundColor: '#F98F00' }]} />
-            <View style={[styles.gradientStep, { backgroundColor: '#FCA300' }]} />
-            <View style={[styles.gradientStep, { backgroundColor: '#FFB800' }]} />
-            <View style={[styles.gradientStep, { backgroundColor: '#FFCC00' }]} />
-            <View style={[styles.gradientStep, { backgroundColor: '#FFD600' }]} />
-          </View>
-          <Text style={styles.confirmText}>{confirmText}</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity style={styles.cancelButton} onPress={handleCancel} activeOpacity={0.7}>
-          <Text style={styles.cancelText}>{cancelText}</Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'white',
-    paddingHorizontal: 24,
-    paddingBottom: 32,
-    borderTopLeftRadius: 32,
-    borderTopRightRadius: 32,
-  },
-  handle: {
-    width: 40,
-    height: 4,
-    backgroundColor: '#CCCCCC',
-    borderRadius: 2,
-    alignSelf: 'center',
-    marginTop: 12,
-    marginBottom: 20,
-  },
-  content: {
-    alignItems: 'center',
-    marginBottom: 28,
-  },
-  bellWrapper: {
-    alignItems: 'center',
-    width: 72,
-    height: 72,
-    marginBottom: 20,
-  },
-  bellMount: {
-    width: 9,
-    height: 7,
-    borderRadius: 4,
-    backgroundColor: '#E53935',
-    marginTop: 7,
-  },
-  bellBody: {
-    width: 36,
-    height: 34,
-    borderTopLeftRadius: 18,
-    borderTopRightRadius: 18,
-    backgroundColor: '#E53935',
-    marginTop: -1,
-  },
-  bellSkirt: {
-    width: 48,
-    height: 9,
-    borderBottomLeftRadius: 5,
-    borderBottomRightRadius: 5,
-    backgroundColor: '#E53935',
-  },
-  bellClapper: {
-    width: 12,
-    height: 7,
-    borderBottomLeftRadius: 6,
-    borderBottomRightRadius: 6,
-    backgroundColor: '#E53935',
-    marginTop: 2,
-  },
-  message: {
-    fontSize: 15,
-    color: '#1A1A1A',
-    textAlign: 'center',
-    lineHeight: 19.5,
-  },
-  footer: {
-    width: '100%',
-    gap: 12,
-  },
-  confirmButton: {
-    width: '100%',
-    height: 52,
-    borderRadius: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    elevation: 4,
-    shadowColor: '#E53935',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-  },
-  gradientContainer: {
-    ...StyleSheet.absoluteFillObject,
-    flexDirection: 'row',
-  },
-  gradientStep: {
-    flex: 1,
-  },
-  confirmText: {
-    fontSize: 16,
-    fontWeight: '700',
-    color: '#fff',
-  },
-  cancelButton: {
-    width: '100%',
-    height: 52,
-    borderRadius: 24,
-    borderWidth: 1.5,
-    borderColor: '#CCCCCC',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  cancelText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#555555',
-  },
-});
-
-export default ExitConfirmSheet;

package/src/components/ExitSheetWrapper.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import ExitConfirmSheet from './ExitConfirmSheet';
-
-// Module-level variable — set bởi FinosEKYC.setExitSheetComponent()
-let _customComponent: React.ComponentType<any> | null = null;
-
-/**
- * Set custom exit sheet component.
- * Gọi trước khi showRNExitSheet để override default ExitConfirmSheet.
- */
-export function setCustomExitComponent(component: React.ComponentType<any> | null) {
-  _customComponent = component;
-}
-
-/**
- * Wrapper component được SDK auto-register với tên 'SDKExitSheetWrapper'.
- * Render custom component nếu được set, fallback về ExitConfirmSheet mặc định.
- */
-const ExitSheetWrapper = (props: any) => {
-  const Component = _customComponent || ExitConfirmSheet;
-  return <Component {...props} />;
-};
-
-export default ExitSheetWrapper;