React Native

import React, {Component} from 'react';
import {View} from 'react-native';
import WebView from 'react-native-webview';

type Props = {};
type State = {};

interface CallbackData {
  action: string;
  regilyData?: string;
  errorKey?: number;
}

interface RegilyError {
  message: string;
  type: string;
  action?: string;
  title?: string;
  key: number;
}

export default class Regily extends Component<Props, State> {
  state = {};
  webView: React.RefObject<WebView>;

  constructor(props: Props | Readonly<Props>) {
    super(props);
    this.webView = React.createRef();
  }

  resolveCallback(errorKey: number) {
    this.webView.current?.injectJavaScript(
      `window.setUpdateSuccess(${errorKey})`,
    );
  }

  rejectCallback(regilyError: RegilyError) {
    this.webView.current?.injectJavaScript(
      `window.setUpdateError('${JSON.stringify(regilyError)}')`,
    );
  }

  render() {
    return (
      // eslint-disable-next-line react-native/no-inline-styles
      <View style={{flex: 1}}>
        <WebView
          ref={this.webView}
          source={{uri: 'https://[partner].regily.com/native.html'}}
          onLoadEnd={() => {
            const customData: string = JSON.stringify({
              enable_otp: false,
            });
            this.webView.current?.injectJavaScript(
              `window.configureAndStart('${customData}')`,
            );
          }}
          // automaticallyAdjustContentInsets={false}
          onMessage={(e: {nativeEvent: {data?: string}}) => {
            /*
             * Handle callbacks (event, update, done)
             *
             * Callbacks (update and done) needs to be resolved or rejected by either calling
             * resolveCallback or rejectCallback with a suitable error
             */
            if (e.nativeEvent.data) {
              const callbackData: CallbackData = JSON.parse(e.nativeEvent.data);
              switch (callbackData.action) {
                case 'update':
                  if (
                    callbackData.regilyData &&
                    callbackData.errorKey !== undefined
                  ) {
                    let data: any = JSON.parse(callbackData.regilyData);
                    if (data && data.credentials && data.credentials.email) {
                      if (data.credentials.email === '[email protected]') {
                        let regilyError: RegilyError = {
                          message: 'Email must be a .com address',
                          type: 'notDotComError',
                          key: callbackData.errorKey,
                          action: 'back',
                          title: 'Some title',
                        };
                        this.rejectCallback(regilyError);
                        return;
                      }
                    }
                  }

                  if (callbackData.errorKey !== undefined) {
                    this.resolveCallback(callbackData.errorKey);
                  }

                  break;
                case 'done':
                  console.log('Done callback: ' + callbackData.regilyData);

                  if (
                    callbackData.regilyData &&
                    callbackData.errorKey !== undefined
                  ) {
                    let data = JSON.parse(callbackData.regilyData);
                    console.log(
                      `Data from flow: ${JSON.stringify(data.mapped)}`,
                    );

                    // TODO send data to backend and call resolveCallback if successful, or else
                    // rejectCallback with a proper error
                    this.resolveCallback(callbackData.errorKey);
                  }
                  break;
                case 'event':
                  console.log('Event callback: ' + callbackData.regilyData);
                  break;
                case 'close-module':
                  console.log('Flow closed. Fly away');
                  break;
                default:
                  console.log('Event: ' + callbackData.action);
                  break;
              }
            }
          }}
          // cacheEnabled={false}
          // cacheMode={'LOAD_NO_CACHE'}
        />
      </View>
    );
  }
}