Card Linking Elements

type ElementResult = {
  status: initial | success;
  card?: {
    externalAccountId?: string | null ;
  }
};

import React, { useEffect, useState, useMemo } from 'react';
import {ElementResult, WindowWithFortressElementsJS, ElementMessage } from './FortressElements'

const EJS = (window as WindowWithFortressElementsJS).FortressElementsJS;

function generateElementSessionJWT(identityId) {
  return axios.get(
    `/api/trust/v1/identity-elements/{identityId}/jwt?element="cardLinking"`,
  );
}

function performSyncCard(externalAccountId: string) {
  const URL = https://api.sandbox.fortressapi.com
  axios.get(`${URL}/api/trust/v1/external-accounts/${externalAccountId}`)
}

function Main() {
  const elementCard = useMemo(() => EJS.createElementClient({
    elementName: EJS.ElementNames.CARD,
    onMessage: (message: ElementMessage) => {
      if (message.type === EJS .ElementEvenTypes.ELEMENT_STARTED) {
        // handle action element started
      }
    },
    theme: { primaryColor: '#471eb9', secondaryColor: '#0d5188' },
  }), []);

  const identityId = '9a443475-5159-4f51-bf21-002e6609091e';
  const { data: { jwt } } = await generateElementSessionJWT(identityId);

  useEffect(() => {
    elementCard.done(({ status, card }: ElementResult) => {
      if (status && card.externalAccountId) {
        performSyncCard(card.externalAccountId);
      }
      if (status !== EJS.ElementResultStatus.Success) {
        /// Show notification...
      }
      console.log(`Element result status: ${status}`);
    });
    return () => {
      elementCard.destroy();
    };
  }, [elementCard]);

  return (
    <button
      type="button"
      onClick={function openElementClient() {
        elementCard.run(jwt);
      }}
    >
      Open Element Instance
    </button>
  );
}

export default Main;