Embedded View

import { 
  AeroSyncWidget, 
  Environment, 
  SuccessEventType, 
  WidgetEventType, 
  AeroSyncEmbeddedView, 
  WidgetEventBankClickType 
} from "aerosync-react-native-sdk";

import { SafeAreaView, ScrollView, StyleSheet, Text, View } from "react-native";
import { useState } from "react";
import Toast from "react-native-toast-message";
import Modal from 'react-native-modal';
import { useStore } from "../context/StoreContext";
import { useThemeContext } from "../context/ThemeContext";

export default function PaymentScreen() {
  const { widgetConfig } = useStore();
  const { isDarkTheme } = useThemeContext();
  
  // State to control whether the widge is shown
  const [isWidgetEnabled, setIsWidgetEnabled] = useState(false);
  
  // Stores the stateCode returned from embedded view for initializing the widget
  const [embeddedStateCode, setEmbeddedStateCode] = useState('');

  // Determine widget theme based on app theme
  const currentTheme = isDarkTheme ? 'dark' : 'light';

  // Deeplink scheme used for routing back from external services
  const DEEP_LINK = 'syncroVibeReactCli://';

  // --- Callback: Widget loaded successfully
  const onWidgetLoad = () => {
    console.log('Widget loaded');
  };

  // --- Callback: Widget was closed (either manually or automatically)
  const onWidgetClose = () => {
    console.log('Widget closed');
    setIsWidgetEnabled(false);  // Hide widget modal
  };

  // --- Callback: User successfully linked their bank and widget closed
  const onWidgetSuccess = (event: SuccessEventType) => {
    console.log('Bank linking successful', event);
    setIsWidgetEnabled(false);  // Hide widget modal

    // Show a toast to inform the user of success(optional)
    Toast.show({
      type: 'success',
      text1: 'Bank linked successfully!',
    });
  };

  // --- Callback: Fired on every widget event
  const onWidgetEvent = (event: WidgetEventType) => {
    console.log('Widget event:', event);
  };

  // --- Callback: Widget encountered an error
  const onWidgetError = (event: string) => {
    console.log('Widget error:', event);
  };

  // --- Callback: User tapped a bank in the embedded view
  const onEmbeddedBankClick = (event: WidgetEventBankClickType) => {
    // Store stateCode and show the widget modal
    // Required to properly initiate the full bank linking flow
    if (event.stateCode) {
      setEmbeddedStateCode(event.stateCode);
      setIsWidgetEnabled(true);
    }
  };

  // --- Callback: Embedded view loaded successfully
  const onEmbeddedLoad = () => {
    console.log('Embedded view loaded');
  };

  // --- Callback: Embedded view encountered an error
  const onEmbeddedError = (event: string) => {
    console.log('Embedded view error:', event);
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      
      {/* 
  			Full-screen modal to display the AeroSync widget after a bank is selected.
  			This modal is optional — you can customize or replace it with your own 
        layout/styling as needed.
			*/}
      <Modal
        style={styles.modal}
        isVisible={isWidgetEnabled}
        propagateSwipe
        animationIn="slideInUp"
        animationOut="slideOutDown"
        animationInTiming={600}
        animationOutTiming={600}
      >
        {/* AeroSync Widget: bank linking process */}
        <AeroSyncWidget 
          stateCode={embeddedStateCode}
          onLoad={onWidgetLoad}
          onError={onWidgetError}
          onClose={onWidgetClose}
          onEvent={onWidgetEvent}
          onSuccess={onWidgetSuccess}
          token={widgetConfig!.token}
          deeplink={DEEP_LINK}
          theme={currentTheme}
          consumerId={widgetConfig?.configurationId}
          environment={widgetConfig?.environment!}
          customWebViewProps={{
            style: { marginTop: 30, backgroundColor: isDarkTheme ? '#000000' : '#FFFFFF' }
          }}
        />
      </Modal>

      {/* Main content area */}
      <ScrollView>
        <View style={styles.container}>
          
          <Text style={styles.title}>Select a payment method</Text>

          {/* Embedded bank list view for user to choose their bank */}
          <View style={styles.embeddedView}>
            <AeroSyncEmbeddedView 
              onLoad={onEmbeddedLoad}
              onBankClick={onEmbeddedBankClick}
              onError={onEmbeddedError}
              theme={currentTheme}
              token={widgetConfig!.token}
              deeplink="testaerosyncsample://"
              consumerId={widgetConfig?.configurationId}
              environment={(widgetConfig?.environment ?? 'dev') as Environment}
              {...(widgetConfig?.configurationId ? { configurationId: widgetConfig.configurationId } : {})}
            />
          </View>

        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'flex-start',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  linkButton: {
    marginBottom: 20,
    justifyContent: 'center', 
    alignItems: 'center',
    width: '100%',
    height: 60,
    backgroundColor: '#80bfff'    
  },
  embeddedView: {
    marginBottom: 20,
    height: 358,
    borderWidth: 1,
    borderColor: '#E0E0E0',
  },
  modal: {
    justifyContent: 'flex-end',
    margin: 0,
  },
});