react-native-unit-components
Version:
Unit React Native components
181 lines (178 loc) • 9.27 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.WebComponent = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactRedux = require("react-redux");
var _reactNativeWebview = require("react-native-webview");
var _html = _interopRequireWildcard(require("./html"));
var _unitMessages = require("../messages/webMessages/unitMessages");
var _bodyHtml = require("../scripts/html/bodyHtml");
var _UnitSdk = require("../unitSdkManager/UnitSdk.api");
var _UnitSdkManager = require("../unitSdkManager/UnitSdkManager");
var _WebComponent = require("./WebComponent.utils");
var _fontFaces = require("../scripts/html/fontFaces");
var _SharedEventsSlice = require("../slices/SharedEventsSlice");
var AppInfo = _interopRequireWildcard(require("../utils/AppInfo"));
var _UNStoreManagerHelper = _interopRequireDefault(require("../nativeModulesHelpers/UNStoreManagerHelper/UNStoreManagerHelper"));
var _unitStore = require("../types/internal/unitStore.types");
var _useListenerToEvent = require("../hooks/useListenerToEvent");
var _windowUnitStore = require("../utils/windowUnitStore");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/* eslint-disable @typescript-eslint/no-explicit-any */
const WebComponent = exports.WebComponent = /*#__PURE__*/_react.default.forwardRef(function WebComponent(props, webOutRef) {
const dispatch = (0, _reactRedux.useDispatch)();
const unitScript = (0, _reactRedux.useSelector)(state => state.configuration.unitScript);
const globalTheme = (0, _reactRedux.useSelector)(state => state.configuration.theme);
const globalLanguage = (0, _reactRedux.useSelector)(state => state.configuration.language);
const [sourceHtml, setSourceHtml] = (0, _react.useState)(null);
const [baseName, setBaseName] = (0, _react.useState)();
const [infoParams, setInfoParams] = (0, _react.useState)({});
const webRef = (0, _react.useRef)(null);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
(0, _react.useImperativeHandle)(webOutRef, () => webRef.current);
(0, _react.useEffect)(() => {
const getAppName = async () => {
// For iOS, we extend the app name from the HTML to display a prettier access request message.
// On Android, there is no request message sent from HTML.
try {
if (_reactNative.Platform.OS == 'ios') {
const name = await AppInfo.getAppName();
setBaseName(name.replace(/ /g, '-'));
} else {
// android
setBaseName('unit');
}
} catch (error) {
console.error(error);
}
};
const updateInfoParams = async () => {
const infoParams = await (0, _WebComponent.getInfoParams)();
setInfoParams(infoParams);
};
getAppName();
updateInfoParams();
}, []);
(0, _react.useEffect)(() => {
if (!unitScript) {
(0, _UnitSdk.fetchUnitScript)();
return;
}
const updateSourceHTML = async () => {
const componentCurrentTheme = props.theme ?? globalTheme;
const componentCurrentLanguage = props.language ?? globalLanguage;
const themeParam = componentCurrentTheme ? ` theme="${componentCurrentTheme}"` : '';
const languageParam = componentCurrentLanguage ? ` language="${componentCurrentLanguage}"` : '';
const componentParams = (props.params || '') + themeParam + languageParam;
const fontFaces = (0, _fontFaces.getFontFacesString)(_UnitSdkManager.UnitSDK.getFonts());
const windowInfoParams = `window.UnitMobileSDKConfig['info'] = ${JSON.stringify(infoParams)};`;
const plaidRedirectUriParam = _reactNative.Platform.OS == 'ios' && _UnitSdkManager.UnitSDK.helpers.redirectUri ? `window.UnitMobileSDKConfig['plaidRedirectUri'] = '${_UnitSdkManager.UnitSDK.helpers.redirectUri}/plaid';` : '';
const unitSessionIdParam = `window.UnitSessionStore.unitSessionId = '${_UnitSdkManager.UnitSDK.helpers.unitSessionId}';`;
const unitVerifiedCustomerToken = await _UNStoreManagerHelper.default.getValue(_unitStore.UserDataKeys.unitVerifiedToken);
const windowVerifiedCustomerToken = unitVerifiedCustomerToken ? `window.UnitStore['unitVerifiedCustomerToken'] = '${unitVerifiedCustomerToken}';` : '';
const windowParams = `${windowInfoParams} ${unitSessionIdParam} ${plaidRedirectUriParam} ${windowVerifiedCustomerToken} ${props.windowParams || ''}`;
let newHtml = _html.default.replace(_html.HTML_PLACEHOLDER.BODY, (0, _bodyHtml.getHtmlBody)(props.type.valueOf(), componentParams, props.presentationMode));
newHtml = newHtml.replace(_html.HTML_PLACEHOLDER.FONT_FACES, fontFaces);
newHtml = newHtml.replace(_html.HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');
newHtml = newHtml.replace(_html.HTML_PLACEHOLDER.WINDOW_PARAMS, windowParams);
setSourceHtml(newHtml);
};
updateSourceHTML();
}, [props.params, unitScript, props.presentationMode, props.script, props.windowParams, globalTheme, globalLanguage, infoParams]);
// Listen and update the live webComponents
const handleMultiFactorAuthFinished = data => {
(0, _windowUnitStore.setItemInWindowUnitStore)(webRef.current, _unitStore.UserDataKeys.unitVerifiedToken, data.unitVerifiedCustomerTokenString);
(0, _WebComponent.injectEventToContinue)(webRef.current, {
parentInstanceId: data.parentInstanceId,
eventToContinue: data.eventToContinue
});
};
(0, _useListenerToEvent.useListenerToEvent)({
busEventKey: _unitMessages.UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED,
action: handleMultiFactorAuthFinished
});
const onMessage = e => {
const message = JSON.parse(e.nativeEvent.data);
switch (message.type) {
case _unitMessages.UnitMessage.UNIT_REQUEST_REFRESH:
message.details && dispatch((0, _SharedEventsSlice.setEvent)({
key: _unitMessages.UnitMessage.UNIT_REQUEST_REFRESH,
data: message.details
}));
break;
case _unitMessages.UnitMessage.UNIT_REQUEST_OPEN_LINK:
// eslint-disable-next-line no-case-declarations
const {
href
} = message.details;
_reactNative.Linking.openURL(href);
break;
case _unitMessages.UnitMessage.UNIT_REQUEST_DOWNLOAD:
message.details && (0, _WebComponent.handleRequestDownload)(message.details, () => {
dispatch((0, _SharedEventsSlice.setEvent)({
key: _unitMessages.UnitMessage.UNIT_REQUEST_CLOSE_FLOW,
data: {}
}));
});
break;
case _unitMessages.UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED:
if (message.details) {
const data = message.details;
_UNStoreManagerHelper.default.saveValue(_unitStore.UserDataKeys.unitVerifiedToken, data.unitVerifiedCustomerTokenString);
// update existing components - namely, the other webComponents will update their window as well as this webComponent
dispatch((0, _SharedEventsSlice.setEvent)({
key: _unitMessages.UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED,
data
}));
}
props.onMessage && props.onMessage(message);
break;
case _unitMessages.UnitMessage.UNIT_UNAUTHORIZED_TOKEN:
_UnitSdkManager.UnitSDK.cleanUserData();
break;
default:
props.onMessage && props.onMessage(message);
}
};
if (!sourceHtml) return null;
const _onScroll = event => {
if (props.handleScroll) {
props.handleScroll(event);
}
};
if (!baseName) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_reactNativeWebview.WebView, {
ref: webRef,
originWhitelist: ['*'],
mediaPlaybackRequiresUserAction: false,
allowsInlineMediaPlayback: true,
cacheEnabled: false,
scrollEnabled: props.isScrollable,
nestedScrollEnabled: props.nestedScrollEnabled,
onScroll: _onScroll,
overScrollMode: "never",
injectedJavaScript: unitScript,
style: {
width: '100%',
flex: 1,
opacity: 0.99,
backgroundColor: 'transparent'
},
source: {
html: sourceHtml,
baseUrl: _reactNative.Platform.OS === 'android' ? `https://${baseName}` : ''
},
onMessage: onMessage,
androidLayerType: "hardware",
webviewDebuggingEnabled: __DEV__,
mediaCapturePermissionGrantType: "grant"
});
});
//# sourceMappingURL=WebComponent.js.map