react-native-unit-components/src/scripts/html/bodyScript.ts

Unit React Native components

import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
import { CardMessage } from '../../messages/webMessages/cardMessage';
import { PageMessage } from '../../messages/webMessages/pageMessage';
import { UnitMessage } from '../../messages/webMessages/unitMessages';
import { AccountMessage } from '../../messages/webMessages/accountMessage';
import { ActivityMessage } from '../../messages/webMessages/activityMessage';
import { PlaidMessage } from '../../messages/webMessages/plaidMessages';
import { PayeeManagementMessage } from '../../messages/webMessages/payeeManagementMessage';

export const POST_MESSAGE_TO_SDK = `
  const postMessageToSDK = (message) => {
    if ('ReactNativeWebView' in window) {
    const messageString = JSON.stringify(message)
    window['ReactNativeWebView'].postMessage(messageString)
    }
  }
`;

export const POST_PAGE_HEIGHT = `
  const postHeight = () => {
    setTimeout(() => {
      const height = window.document.documentElement.getBoundingClientRect().height
      postMessageToSDK({ type: "${PageMessage.PAGE_HEIGHT}", details: { height } })
    })
  }
`;

export const LISTENERS = {
  isPageLoaded: `
    window.addEventListener('DOMContentLoaded', e => {
      postMessageToSDK({ type: "${PageMessage.PAGE_LOADED}" })
    });
  `,
  requestRendering: `
    window.addEventListener("${UnitMessage.UNIT_REQUEST_RENDERING}", (e) => {
      postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_RENDERING}", details: { data: e.detail }})
    });
  `,
  requestRefresh: `
    window.addEventListener("${UnitMessage.UNIT_REQUEST_REFRESH}", (e) => {
      if (e.detail.fromSDK) { return }
      postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_REFRESH}", details:  e.detail  })
    });
  `,
  onLoad: `
    window.addEventListener("${UnitMessage.UNIT_ON_LOAD}", (e) => {
      postHeight()
      postMessageToSDK({ type: "${UnitMessage.UNIT_ON_LOAD}", details: e.detail })
    });
  `,
  requestCloseFlow: `
    window.addEventListener("${UnitMessage.UNIT_REQUEST_CLOSE_FLOW}", (e) => {
    // Add a delay of 200 milliseconds to allow the SDK to finish processing prior events that require a Promise before closing the flow
    setTimeout(() => {
        postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_CLOSE_FLOW}" });
    }, 200);

    });
  `,
  requestOpenLink: `
    window.addEventListener("${UnitMessage.UNIT_REQUEST_OPEN_LINK}", (e) => {
      postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_OPEN_LINK}", details: e.detail })
    });
  `,
  unitRequestDownload: `
    window.addEventListener("${UnitMessage.UNIT_REQUEST_DOWNLOAD}", (e) => {
      postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_DOWNLOAD}", details: e.detail })
    });
  `,
  cardActivated: `
    window.addEventListener("${CardMessage.CARD_ACTIVATED}", (e) => {
      const response = e.detail
      response.then((data) => {
          postMessageToSDK({ type: "${CardMessage.CARD_ACTIVATED}", details:  { card: data.data }})
      }).catch((e) => {
          console.log(e)
      })
    });
  `,
  cardStatusChange: `
    window.addEventListener("${CardMessage.CARD_STATUS_CHANGED}", (e) => {
      const response = e.detail
      response.then((data) => {
        postMessageToSDK({ type: "${CardMessage.CARD_STATUS_CHANGED}", details:  { card: data.data }})
      }).catch((e) => {
        console.log(e)
      })
  });
  `,
  unitRequestExternalSdk: `
  window.addEventListener("${UnitMessage.UNIT_REQUEST_EXTERNAL_SDK}", (e) => {
    postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_EXTERNAL_SDK}", details: e.detail })
  });
  `,

  unitRequestLeftToSpendDetails: `
  window.addEventListener("${UnitMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS}", (e) => {
    postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS}", details: e.detail })
  });
  `,
  unitPaymentCreated: `
  window.addEventListener("${PaymentMessage.PAYMENT_CREATED}", (e) => {
    const response = e.detail
      response.then((data) => {
        postMessageToSDK({ type: "${PaymentMessage.PAYMENT_CREATED}", details:  { data: data.data }})
      }).catch((e) => {
        console.log(e)
      })
  });
  `,
  unitPaymentInitialStageBackButtonClicked: `
  window.addEventListener("unitPaymentInitialStageBackButtonClicked", (e) => {
    postMessageToSDK({ type: "${PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED}", details: { data: e.detail }})
  });
  `,

  unitPaymentFinalStageDoneButtonClicked: `
   window.addEventListener("unitPaymentFinalStageDoneButtonClicked", (e) => {
    postMessageToSDK({ type: "${PaymentMessage.FINAL_STAGE_DONE_BUTTON_CLICKED}", details: { data: e.detail }})
   });
  `,
  unitPlaidTokenCreated: `
  window.addEventListener("${PlaidMessage.UNIT_PLAID_TOKEN_CREATED}", (e) => {
    const response = e.detail
    response.then((data) => {
      postMessageToSDK({ type: "${PlaidMessage.UNIT_PLAID_TOKEN_CREATED}", details:  { linkToken: data.data }})
    }).catch((e) => {
      console.log(e)
    })
  });
  `,
  unitAccountChanged: `
    window.addEventListener("${AccountMessage.UNIT_ACCOUNT_CHANGED}", (e) => {
      const response = e.detail
      response.then((data) => {
        postMessageToSDK({ type: "${AccountMessage.UNIT_ACCOUNT_CHANGED}", details:  { account: data.data }})
      }).catch((e) => {
        console.log(e)
      })
  });
  `,
  unitActivityFiltersChanged: `
    window.addEventListener("${ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED}", (e) => {
      postMessageToSDK({ type: "${ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED}", details: e.detail })
    });
  `,
  unitMultiFactorAuthFinished: `
    window.addEventListener("${UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED}", async (e) => {
      const response = await e.detail.response;
      const unitVerifiedCustomerToken = {
        token: response.data.attributes.token,
        expiration: new Date().getTime() + response.data.attributes.expiresIn * 1000,
      };
      const unitVerifiedCustomerTokenString = JSON.stringify(unitVerifiedCustomerToken);
      window.UnitStore["unitVerifiedCustomerToken"] = unitVerifiedCustomerTokenString;

      const data = {
        unitVerifiedCustomerTokenString,
        parentInstanceId: e.detail.parentInstanceId,
        eventToContinue: e.detail.eventToContinue
      }

      postMessageToSDK({ type: "${UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED}", details: data })
    });
  `,
  unitWhiteLabelAppOnLoad: `
    window.addEventListener("${UnitMessage.UNIT_WHITE_LABEL_APP_ON_LOAD}", async (event) => {
      const response = event.detail;
      response.then((data) => {
        postMessageToSDK({ type: "${UnitMessage.UNIT_WHITE_LABEL_APP_ON_LOAD}", details: data.data })
      }).catch((e) => {
        console.log(e)
      })
    });
  `,
  unitUnauthorizedToken: `
    window.addEventListener("${UnitMessage.UNIT_UNAUTHORIZED_TOKEN}", (e) => {
      postMessageToSDK({ type: "${UnitMessage.UNIT_UNAUTHORIZED_TOKEN}", details: "Clean the current user tokens" })
    });
  `,
  unitConnectedAccountCreated: `
    window.addEventListener("${PayeeManagementMessage.UNIT_CONNECTED_ACCOUNT_CREATED}", (e) => {
      const response = e.detail;
      response.then((data) => {
        postMessageToSDK({ type: "${PayeeManagementMessage.UNIT_CONNECTED_ACCOUNT_CREATED}", details: { account: data.data }})
      }).catch((e) => {
        console.log(e)
      })
    });
  `,
  unitCounterpartyCreated: `
    window.addEventListener("${PayeeManagementMessage.UNIT_COUNTERPARTY_CREATED}", (e) => {
      const response = e.detail;
      response.then((data) => {
        postMessageToSDK({ type: "${PayeeManagementMessage.UNIT_COUNTERPARTY_CREATED}", details: { counterparty: data.data }})
      }).catch((e) => {
        console.log(e)
      })
    });
  `,
  unitCounterpartyDeleted: `
    window.addEventListener("${PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED}", (e) => {
      const response = e.detail;
      response.then((data) => {
        postMessageToSDK({ type: "${PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED}", details: { counterparty: data.data }})
      }).catch((e) => {
        console.log(e)
      })
    });
  `,
  unitMicroDepositConnectionCreated: `
    window.addEventListener("${PayeeManagementMessage.UNIT_MICRO_DEPOSIT_CONNECTION_CREATED}", (e) => {
      const response = e.detail;
      response.then((data) => {
        postMessageToSDK({ type: "${PayeeManagementMessage.UNIT_MICRO_DEPOSIT_CONNECTION_CREATED}", details: { account : data.data }})
      }).catch((e) => {
        console.log(e)
      })
    });
  `,
  unitMicroDepositConnectionRejected: `
    window.addEventListener("${PayeeManagementMessage.UNIT_MICRO_DEPOSIT_CONNECTION_REJECTED}", (e) => {
      const response = e.detail;
      response.then((data) => {
        postMessageToSDK({ type: "${PayeeManagementMessage.UNIT_MICRO_DEPOSIT_CONNECTION_REJECTED}", details: { account : data.data }})
      }).catch((e) => {
        console.log(e)
      })
    });
  `,

  unitOpenPlaid: `
  window.addEventListener("${PlaidMessage.UNIT_OPEN_PLAID}", async (e) => {
    const response = event.detail;
    response.then((data) => {
      postMessageToSDK({ type: "${PlaidMessage.UNIT_OPEN_PLAID}", details: data.data })
    }).catch((e) => {
      console.log(e)
    })
  });
  `
};

export const DISPATCH_RENDERING_EVENT = `
  const dispatchRenderingEvent = (details) => {
    const event = new CustomEvent("${UnitMessage.UNIT_REQUEST_RENDERING}",{ detail: JSON.parse(details) })
    window.dispatchEvent(event)
  }
`;

export const DISPATCH_EVENT_TO_CONTINUE = `
  const dispatchEventToContinue = (details) => {
    const event = new CustomEvent("${UnitMessage.UNIT_EVENT_TO_CONTINUE}",{ detail: JSON.parse(details) })
    window.dispatchEvent(event)
  }
`;

export const DISPATCH_REQUEST_REFRESH = `
  const dispatchRefreshEvent = (details) => {
    let event;
    // we are adding "fromSDK" param to avoid infinite loop
    if (details) {
        event = new CustomEvent("${UnitMessage.UNIT_REQUEST_REFRESH}",{ detail: {...JSON.parse(details), fromSDK: true} });
    } else {
        event = new CustomEvent("${UnitMessage.UNIT_REQUEST_REFRESH}", { detail: { fromSDK: true }});
    }
    window.dispatchEvent(event)
  }
`;

export const SET_ITEM_IN_WINDOW_UNIT_STORE = `
    const setItemInWindowUnitStore = (key, value) => {
      window.UnitStore[key] = value;
    }
`;

export const DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT = `
  const dispatchActivityFilterChangedEvent = (details) => {
    const event = new CustomEvent("unitActivityFiltersChanged",{ detail: details});
    window.dispatchEvent(event);
  }
`;

export const DISPATCH_PLAID_RESPONSE = `
    const dispatchPlaidEvent = (details) => {
    const event = new CustomEvent("${PlaidMessage.UNIT_PLAID_RESPONSE}",{ detail: details })
    window.dispatchEvent(event)
    }
`;

export const DISPATCH_PLAID_EXIT = `
    const dispatchPlaidExit = (details) => {
    const event = new CustomEvent("${PlaidMessage.UNIT_PLAID_EXIT}",{ detail: details })
    window.dispatchEvent(event)
    }
`;

export const DISPATCH_OPEN_PLAID = `
    const dispatchOpenPlaidEvent = (details) => {
    const event = new CustomEvent("${PlaidMessage.UNIT_OPEN_PLAID}",{ detail: details })
    window.dispatchEvent(event)
    }
`;

export const DISPATCH_OPEN_ACTIONS_MENU = `
    const dispatchOpenActionsMenu = (componentName) => {
      document.querySelector(componentName).dispatchEvent(new CustomEvent("unitRequestOpenActionsMenu"))
    }
`;

export const DISPATCH_REQUEST_CARD_ACTION = `
    const dispatchRequestCardAction = (action) => {
      document.querySelector("unit-elements-card").dispatchEvent(new CustomEvent("unitRequestCardAction", {detail: {action: action}}))
    }
`;

export const DISPATCH_REQUEST_HIDE_SENSITIVE_DATA = `
    const dispatchRequestHideSensitiveData = (componentName) => {
       document.querySelector(componentName).dispatchEvent(new CustomEvent("unitRequestHideSensitiveData"))
    }
`;

export const DISPATCH_REQUEST_SHOW_SENSITIVE_DATA = `
    const dispatchRequestShowSensitiveData = (componentName) => {
        document.querySelector(componentName).dispatchEvent(new CustomEvent("unitRequestShowSensitiveData"))
    }
`;

export const DISPATCH_REQUEST_ACCOUNT_ACTION = `
    const dispatchRequestAccountAction = (action) => {
      document.querySelector("unit-elements-account").dispatchEvent(new CustomEvent("unitRequestAccountAction", {detail: {action: action}}))
    }
`;