Select for Deposit

import { PaymentWidget } from '@uphold/enterprise-payment-widget-web-sdk';

const initializeDepositWidget = async () => {
  // Create the session
  const sessionData = await createDepositSession();

  // Initialize the Widget with the session
  const widget = new PaymentWidget<'select-for-deposit'>(sessionData.session, { debug: true });

  // Set up event handlers (see sections below)
  setupEventHandlers(widget);

  // Optional: listen for the Widget to be fully loaded
  widget.on('ready', () => {
    console.log('Payment Widget is ready');
  });

  // Mount the Widget in an iframe
  widget.mountIframe(document.getElementById('payment-container'));
};

widget.on('complete', (event) => {
  const result = event.detail.value;
  console.log('Deposit method selected:', result);

  // result.via indicates the type of selection
  const { via, selection } = result;

  // Process the selected deposit method
  handleDepositMethodSelected(via, selection);

  // Clean up the Widget
  widget.unmount();
});

const handleDepositMethodSelected = (via, selection) => {
  if (via === 'external-account') {
    // selection is an ExternalAccount
    console.log('Selected external account:', {
      id: selection.id,
      type: selection.type, // 'card'
      label: selection.label, // e.g., "#1111"
      network: selection.network, // e.g., "visa"
      // Additional properties for external accounts
    });

    // Proceed with existing external account
    proceedWithExternalAccount(selection);
  } else if (via === 'deposit-method') {
    // selection contains depositMethod and account
    console.log('Selected account deposit method:', {
      depositMethod: selection.depositMethod,
      account: selection.account
    });

    // Proceed with account deposit method
    proceedWithAccountDepositMethod(selection.depositMethod, selection.account);
  }
};

const proceedWithExternalAccount = (externalAccount) => {
  // For external accounts, proceed to amount selection screen
};

const proceedWithAccountDepositMethod = (depositMethod, account) => {
  if (depositMethod.type === 'bank') {
    console.log('Bank transfer details:', {
        type: depositMethod.type, // 'bank'
        status: depositMethod.status, // 'processing' | 'ok' | 'failed'
        network: depositMethod.details?.network, // 'fps'
        sortCode: depositMethod.details?.sortCode,
        accountNumber: depositMethod.details?.accountNumber,
        reference: depositMethod.details?.reference
    });
  } else if (depositMethod.type === 'crypto') {
    console.log('Crypto transfer details:', {
        type: depositMethod.type, // 'crypto'
        status: depositMethod.status, // 'processing' | 'ok' | 'failed'
        network: depositMethod.details?.network, // e.g., 'bitcoin', 'ethereum', 'xrp-ledger'
        address: depositMethod.details?.address,
        destinationTag: depositMethod.details?.destinationTag, // For XRP, XLM, etc.
        memo: depositMethod.details?.memo // Alternative to destinationTag for some networks
    });
  }

  console.log('Target account:', {
    id: account.id,
    label: account.label,
    asset: account.asset,
    balance: account.balance
  });

  // Show a waiting message to the user and start monitoring for the deposit transaction
};

widget.on('cancel', () => {
  console.log('User cancelled deposit method selection');

  // Handle cancellation
  handleDepositCancelled();

  // Clean up the Widget
  widget.unmount();
});

const handleDepositCancelled = () => {
  // Redirect back to the previous page or main deposit page
};

widget.on('error', (event) => {
  const error = event.detail.error;
  console.error('Deposit Widget error:', error);

  // Handle the error
  handleDepositError(error);

  // Clean up the Widget
  widget.unmount();
});

const handleDepositError = (error) => {
  console.error('Error details:', {
    code: error.code,
    message: error.message
  });

  // Show user-friendly error message like 'An error occurred. Please try again later.'
};