Card-on-file

const cardOnFileConfig: CardOnFileComponentConfig = {
  limitTokens: number,
  filterBy: {
    excludeExpiredTokens: boolean,
    schemes: string[],
    fundingSource: string,
    issuerCountryCode: string,
    ownerType: string
  },
  orderBy: {
    expiryDate: string,
    scheme: string,
    fundingSource: string,
    ownerType: string,
    issuerCountryCode: string,
    lastUsageDate: {
      orderByField: string
    }
  },
  cardBrandImages: {
    visaSrc: string,
    mastercardSrc: string,
    amexSrc: string,
    cupSrc: string,
    dinersSrc: string,
    discoverSrc: string,
    jcbSrc: string
  },
  expiredText: string,
  validThruText: string,
  deleteModal: {
    dialogAriaLabel: string,
    bodyText: string,
    cancelButtonText: string,
    deleteButtonText: string,
    class: string
  },
  deleteErrorMessage: string,
  deleteSuccessMessage: string,
  updateErrorMessage: string,
  updateSuccessMessage: string,
  successMessageClass: string,
  errorMessageClass: string,
  isExpiryDateEditable: boolean,
  isCvcRequired: boolean,
  allowDeleteToken: boolean,
  cvcComponentConfig: CardCvcComponentConfig,
  expiryDateComponentConfig: CardExpiryDateComponentConfig,
  styles: CSSProperties,
  iconDeleteSrc: string,
  iconSaveSrc: string,
  iconCancelSrc: string,
  iconEditSrc: string,
  inputStyles: CSSProperties,
  tokenItemClass: string,
  useTransparentCardBrandImage: boolean,
  editCardInformationAriaLabel: string,
  saveCardInformationAriaLabel: string,
  cancelEditCardInformationAriaLabel: string,
  deleteCardButtonAriaLabel: string,
  cardNumberAriaLabel: string,
  cardExpiryDateAriaLabel: string,
};

const cardOnFileConfig: CardOnFileComponentConfig = {
  onPreRenderTokens: (data: RetrieveCardTokensReponseSuccess) => CardTokenMapping[],
  onRetrieveTokensFailed: (data: RetrieveCardTokensReponseFailed) => void,
  onPreDeleteToken: (token: BaseCardToken) => Promise<boolean>,
  onDeleteTokenSuccess: (data: DeleteCardTokenResponseSuccess) => void,
  onDeleteTokenFailed: (data: DeleteCardTokenResponseFailed) => void,
  onUpdateTokenSuccess: (data: UpdateCardTokenResponseSuccess) => void,
  onUpdateTokenFailed: (data: UpdateCardTokenResponseFailed) => void,
  tokenItemBuilder: (elementIds: TokenBuilderElementIds) => string,
  IDs.tokenLabelBuilder: (token: BaseCardToken) => string
}

const cardOnFileConfig: CardOnFileComponentConfig = {
  limitTokens: 5,
  filterBy: {
    excludeExpiredTokens: true,
    schemes: ["Visa", "Mastercard"],
    fundingSource: "Credit",
    issuerCountryCode: "USA",
    ownerType: "Consumer"
  },
  orderBy: {
    expiryDate: { 
      direction: "asc",
      priority: 1
    },
    scheme: { 
      valuesOrder: ["Visa", "Mastercard", "Amex"],
      priority: 2
    },
    fundingSource: { 
      valuesOrder: ["Credit", "Debit"],
      priority: 3
    },
    ownerType: { 
      valuesOrder: ["Consumer", "Commercial"],
      priority: 4
    },
    issuerCountryCode: { 
      direction: "desc",
      priority: 5
    },
    lastUsageDate: { 
      direction: "desc",
      orderByField: "lastSuccessfulPurchaseDate",
      priority: 6
    }
  },
  cardBrandImages: {
    visaSrc: "https://example.com/visa-logo.png",
    mastercardSrc: "https://example.com/mastercard-logo.png",
    amexSrc: "https://example.com/amex-logo.png"
  },
  expiredText: "Card expired",
  validThruText: "Valid until",
  deleteModal: {
    dialogAriaLabel: "Delete card dialog",
    bodyText: "Are you sure you want to delete this payment method?",
    cancelButtonText: "No, keep it",
    deleteButtonText: 'Yes, delete it',
    class: "custom-modal-class"
  },
  deleteErrorMessage: "Unable to delete card. Please try again.",
  deleteSuccessMessage: "Card has been removed successfully.",
  updateErrorMessage: "Unable to update card information. Please try again.",
  updateSuccessMessage: "Card information updated successfully.",
  successMessageClass: "alert alert-success",
  errorMessageClass: "alert alert-danger",
  isExpiryDateEditable: true,
  isCvcRequired: true,
  allowDeleteToken: true,
  cvcComponentConfig: {
    required: true,
    label: "Security code",
    applyMask: true,
    showMaskToggle: true,
    labelPosition: "left",
    errorMessage: "Please enter a valid security code",
    inputStyles: {
      base: {
        color: "#333",
        fontSize: "16px"
      }
    }
  },
  expiryDateComponentConfig: {
    label: "Expiry date",
    labelPosition: "left",
    formatOptions: "MM/YY",
    inputStyles: {
      base: {
        color: "#333",
        fontSize: "16px"
      }
    }
  },
  styles: {
    backgroundColor: "#f8f9fa",
    border: "1px solid #dee2e6",
    borderRadius: "8px",
    padding: "20px"
  },
  iconDeleteSrc: "http://example.com/delete.jpg",
  iconSaveSrc: "http://example.com/save.jpg",
  iconCancelSrc: "http://example.com/cancel.jpg",
  iconEditSrc: "http://example.com/edit.jpg",
  inputStyles: {
    borderRadius: "5px",
    backgroundColor: "grey"
  },
  tokenItemClass: "custom-token-item-class",
  useTransparentCardBrandImage: true,
  editCardInformationAriaLabel: "Edit card information button",
  saveCardInformationAriaLabel: "Save card information button",
  cancelEditCardInformationAriaLabel: "Cancel edit card information button",
  deleteCardButtonAriaLabel: "Delete card button",
  cardNumberAriaLabel: "Card number",
  cardExpiryDateAriaLabel: "Card expiry date",
  onPreRenderTokens: (data: RetrieveCardTokensReponseSuccess) => {
    return data.gatewayTokens
      .filter(token => token.issuerCountryCode === 'USA')
      .map(token => ({
        id: token.gatewayTokenId,
        isCvcRequired: true
    }));
  },
  onRetrieveTokensFailed: (data: RetrieveCardTokensReponseFailed) => {
    console.error('Failed to retrieve tokens:', data.errorMessage);
    showErrorMessage('Unable to load saved cards');
  },
  onPreDeleteToken: (token: BaseCardToken) => {
    return new Promise((resolve) => {
      const confirmed = confirm(`Are you sure you want to delete card ending in ${token.maskedPrimaryAccountNumber.slice(-4)}?`);
        resolve(confirmed);
    });
  }, 
  onDeleteTokenSuccess: (data: DeleteCardTokenResponseSuccess) => {
    console.log('Token deleted successfully:', data);
    showSuccessMessage('Card removed successfully');
    refreshTokenList();
  },
  onDeleteTokenFailed: (data: DeleteCardTokenResponseFailed) => {
    console.error('Delete failed:', data);
    showErrorMessage('Failed to delete card. Please try again.');
  },
  onUpdateTokenSuccess: (data: UpdateCardTokenResponseSuccess) => {
    console.log('Token updated successfully:', data);
    showSuccessMessage('Card information updated');
  },
  onUpdateTokenFailed: (data: UpdateCardTokenResponseFailed) => {
    console.error('Update failed:', data);
    showErrorMessage('Failed to update card information');
  }
};