udp-react-enterprise-component-library 1.0.0

package/dist/utilities/form/paymentForm/AccountPayment.model.d.ts

@@ -0,0 +1,143 @@
+import { PaymentVendorFactoryEnum } from '../../../enums/paymentVendorFactoryEnum';
+export interface PaymentDetails {
+    accountNumber?: string;
+    firstName?: string;
+    lastName?: string;
+    company?: string;
+    amount?: string | number | null | undefined;
+    salesTax?: number;
+    custId?: number | string;
+    street1?: string;
+    street2?: string;
+    city?: string | number;
+    state?: string;
+    zip?: number;
+    email?: string;
+    phone?: string;
+    description?: string;
+    reference1?: string | number;
+    reference2?: string | number;
+    reference3?: string | number;
+}
+export interface PaymentMethodData {
+    businessObjectKey: string;
+    appPaymentVendorID: string;
+    applicationClientID: string;
+    paymentVendorConnectionID: string;
+    merchantIdentifier: string;
+    effectiveStart: Date;
+    effectiveEnd: Date;
+    isDefault: boolean;
+    createDate: Date;
+    serializeFields: null;
+    applicationClient: null;
+    paymentVendorConnection: PaymentVendorConnection;
+    paymentToken: any[];
+    paymentTransaction: any[];
+    udpTags: any[];
+}
+export interface HostedPaymentPageSetup {
+    businessObjectKey: string;
+    hostedPaymentPageSetupID: string;
+    paymentVendorConnectionID: string;
+    useHostedPaymentPage: boolean;
+    hostedPaymentPageConfig: string;
+    customCSS: string;
+    serializeFields: null;
+    paymentVendorConnection: null;
+    udpTags: any[];
+}
+export interface IPaymentMethod {
+    businessObjectKey: string;
+    paymentMethodID: number;
+    name: string;
+    active: string;
+    serializeFields: null;
+    paymentMethodPaymentTransaction: any[];
+    udpTags: any[];
+    systemRule: any[];
+    paymentMethodSystemRule: any[];
+    appPaymentVendorID: string;
+    applicationClientID: string;
+    paymentVendorConnectionID: string;
+    merchantIdentifier: string;
+    effectiveStart: string;
+    effectiveEnd: null;
+    isDefault: boolean;
+    createDate: string;
+    applicationClient: null;
+    paymentVendorConnection?: PaymentVendorConnection;
+    appPaymentVendorPaymentTransaction: any[];
+}
+export interface HostedPaymentPageSetup {
+    businessObjectKey: string;
+    hostedPaymentPageSetupID: string;
+    paymentVendorConnectionID: string;
+    useHostedPaymentPage: boolean;
+    hostedPaymentPageConfig: string;
+    customCSS: string;
+    serializeFields: null;
+    paymentVendorConnection: null;
+    udpTags: any[];
+}
+export interface PaymentVendorConnection {
+    productionConnectionAttributes: null;
+    sandboxConnectionAttributes: null;
+    businessObjectKey: string;
+    paymentVendorConnectionID: string;
+    paymentVendorFactoryID: number;
+    name: string;
+    prodSecretConnection: null;
+    sandboxSecretConnection: null;
+    isLiveMode: boolean;
+    createDate: Date | string;
+    serializeFields: null;
+    appPaymentVendor: any[];
+    hostedPaymentPageSetup: HostedPaymentPageSetup[];
+    paymentVendorFactory: null;
+    paymentVendorConnectionPaymentMethod: any[];
+    udpTags: any[];
+}
+export interface IPaymentMethodTab {
+    paymentMethodID: number;
+    name: string;
+    enabled: boolean;
+    data: IPaymentMethod | null;
+    providerType: PaymentVendorFactoryEnum | null;
+    isHostedPaymentPage: boolean | null;
+    providerProps: {
+        customCss: string | null;
+        attributes: string | null;
+    } | null;
+    paymentVendorConnection?: PaymentVendorConnection;
+    hasReadPropertiesError?: boolean | null;
+    readPropertiesMessageError?: string | null;
+}
+export interface PaymentTransaction {
+    businessObjectKey: string;
+    accountTransactionID: number;
+    accountID: number;
+    authorizationNumber: string;
+    transactionId: string;
+    transactionDate: Date;
+    paymentTenderTypeID: number;
+    paymentTenderTypeName: string;
+    paymentSourceID: number;
+    paymentSourceName: string;
+    transactionTypeID: number;
+    transactionTypeName: string;
+    description: string;
+    cardLast4: string;
+    cardTypeName: null;
+    amount: number;
+    balance: number;
+    ipAddress: string;
+    date: string;
+    confirmationNumber: string;
+    tender: string;
+    source: string;
+    amount_: string;
+    balance_: string;
+    serializeFields: null;
+    searchRank: number;
+}

package/dist/utilities/form/paymentForm/BankAccountForm.d.ts

@@ -0,0 +1,48 @@
+import { PaymentDetails, PaymentMethodData } from './AccountPayment.model';
+import { PaymentVendorFactoryEnum } from '../../../enums/paymentVendorFactoryEnum';
+interface BankAccountFormProps {
+    accountTypes?: any[];
+    isFormDisabled?: boolean;
+}
+interface BankAccountFormProps {
+    bankAccountTypes?: any[];
+    isFormDisabled?: boolean;
+    paymentDetails: PaymentDetails;
+    providerType?: PaymentVendorFactoryEnum | null;
+    providerProps?: any;
+    isHostedPaymentPage?: boolean | null;
+    hasReadPropertiesError?: boolean | null;
+    readPropertiesMessageError?: string | null;
+    onStatusChange?: (paymentFormResult: any) => void;
+    enabled?: boolean | null;
+    actionLabel?: string;
+    data?: PaymentMethodData;
+    externalId?: string;
+}
+/**
+ * `BankAccountForm` is a React functional component that renders a form for managing bank accounts.
+ * It supports both hosted payment pages and direct input forms for bank account details.
+ *
+ * @param {Object} props - The properties passed to the component.
+ * @param {Array} props.bankAccountTypes - An array of available bank account types.
+ * @param {Object} props.data - Data related to the bank account form.
+ * @param {string} props.externalId - External identifier for the bank account.
+ * @param {boolean} [props.isFormDisabled=false] - Flag to disable the form.
+ * @param {string|null} [props.providerType=null] - Type of the payment provider.
+ * @param {Object|null} [props.providerProps=null] - Properties for the payment provider.
+ * @param {Object} props.paymentDetails - Details of the payment.
+ * @param {boolean} props.isHostedPaymentPage - Flag to indicate if it is a hosted payment page.
+ * @param {boolean} props.hasReadPropertiesError - Flag to indicate if there was an error reading properties.
+ * @param {string} props.readPropertiesMessageError - Error message for reading properties.
+ * @param {Function} props.onStatusChange - Callback function to handle status changes.
+ * @param {boolean} props.enabled - Flag to indicate if the form is enabled.
+ * @param {Function} props.setSelectedPaymentAccount - Callback function to set the selected payment account.
+ * @param {string} props.actionLabel - The label for the action button.
+ * @param {Object} restProps - Additional properties passed to the component.
+ *
+ * @returns {JSX.Element} The rendered component.
+ */
+export declare const BankAccountForm: ({ bankAccountTypes, data, externalId, isFormDisabled, providerType, providerProps, paymentDetails, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, onStatusChange, enabled, actionLabel, setSelectedPaymentAccount, ...restProps }: BankAccountFormProps & {
+    [key: string]: any;
+}) => any;
+export {};

package/dist/utilities/form/paymentForm/BankIcon.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+/**
+ * BankIcon
+ *
+ * @param {(JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>)} props
+ * @return {*}
+ */
+export declare const BankIcon: (props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/utilities/form/paymentForm/CashForm.d.ts

@@ -0,0 +1,9 @@
+import { PaymentDetails } from './AccountPayment.model';
+interface CashFormProps {
+    isFormDisabled?: boolean;
+    paymentDetails: PaymentDetails;
+    amountValue?: string | number | null | undefined;
+    onStatusChange?: (paymentFormResult: boolean) => void;
+}
+export declare const CashForm: ({ isFormDisabled, paymentDetails, amountValue, onStatusChange }: CashFormProps) => JSX.Element;
+export {};

package/dist/utilities/form/paymentForm/CashIcon.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+/**
+ * CashIcon
+ *
+ * @param {(JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>)} props
+ * @return {*}
+ */
+export declare const CashIcon: (props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/utilities/form/paymentForm/CheckIcon.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+/**
+ * CheckIcon
+ *
+ * @param {(JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>)} props
+ * @return {*}
+ */
+export declare const CheckIcon: (props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/utilities/form/paymentForm/CreditCardAdornment.d.ts

@@ -0,0 +1,12 @@
+/**
+ * CreditCardAdornment component displays an icon at the start of an input field.
+ * It shows a default payment card icon if no credit card number is provided.
+ * If a valid credit card number is provided, it displays the corresponding credit card method icon.
+ *
+ * @param {Object} props - The props object.
+ * @param {string} props.creditCardNumberInput - The credit card number input string.
+ * @returns {JSX.Element} The InputAdornment component with the appropriate icon.
+ */
+export declare const CreditCardAdornment: ({ creditCardNumberInput }: {
+    creditCardNumberInput: string;
+}) => JSX.Element;

package/dist/utilities/form/paymentForm/CreditCardForm.d.ts

@@ -0,0 +1,41 @@
+import { PaymentDetails, PaymentMethodData } from './AccountPayment.model';
+import { PaymentVendorFactoryEnum } from '../../../enums/paymentVendorFactoryEnum';
+interface CreditCardFormProps {
+    isFormDisabled?: boolean;
+    paymentDetails: PaymentDetails;
+    externalId?: string;
+    tenantId: string;
+    providerType?: PaymentVendorFactoryEnum | null;
+    providerProps?: any;
+    isHostedPaymentPage?: boolean | null;
+    hasReadPropertiesError?: boolean | null;
+    readPropertiesMessageError?: string | null;
+    enabled?: boolean | null;
+    data?: PaymentMethodData;
+    actionLabel?: string;
+    setSelectedPaymentAccount?: (paymentAccount: any) => void;
+    onStatusChange?: (paymentFormResult: any) => void;
+}
+/**
+ * CreditCardForm component handles the rendering of a credit card payment form.
+ * It supports both hosted payment pages and direct credit card input forms.
+ *
+ * @param {boolean} isFormDisabled - Flag to disable the form.
+ * @param {object} data - Data related to the payment form.
+ * @param {string} externalId - External identifier for the payment form.
+ * @param {object} paymentDetails - Details of the payment.
+ * @param {string|null} providerType - Type of the payment provider.
+ * @param {object|null} providerProps - Properties for the payment provider.
+ * @param {boolean} isHostedPaymentPage - Flag to indicate if it is a hosted payment page.
+ * @param {boolean} hasReadPropertiesError - Flag to indicate if there was an error reading properties.
+ * @param {string} readPropertiesMessageError - Error message for reading properties.
+ * @param {boolean} enabled - Flag to indicate if the form is enabled.
+ * @param {function} onStatusChange - Callback function to handle status changes.
+ * @param {function} setSelectedPaymentAccount - Callback function to set the selected payment account.
+ * @param {string} actionLabel - Label for the action button.
+ * @param {object} restProps - Additional properties.
+ *
+ * @returns {JSX.Element} The rendered CreditCardForm component.
+ */
+export declare const CreditCardForm: ({ isFormDisabled, data, externalId, paymentDetails, providerType, providerProps, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, enabled, actionLabel, onStatusChange, setSelectedPaymentAccount, ...restProps }: CreditCardFormProps) => any;
+export {};

package/dist/utilities/form/paymentForm/CreditCardIcon.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+/**
+ * CreditCardIcon
+ *
+ * @param {(JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>)} props
+ * @return {*}
+ */
+export declare const CreditCardIcon: (props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/utilities/form/paymentForm/CreditCardUtils.d.ts

@@ -0,0 +1,42 @@
+/**
+ * formatCreditCardNumber - Format credit card number
+ *
+ * @export
+ * @param {*} value
+ * @return {*}
+ */
+export declare function formatCreditCardNumber(value: any): any;
+/**
+ * formatCVC - formats the CVC value
+ *
+ * @export
+ * @param {*} value
+ * @param {*} prevValue
+ * @param {*} [allValues={}]
+ * @return {*}
+ */
+export declare function formatCVC(value: any, prevValue: any, allValues?: {
+    number?: string;
+}): string;
+/**
+ * formatExpirationDate - format expiration date
+ * @export
+ * @param {*} value
+ * @return {*}
+ */
+export declare function formatExpirationDate(value: any): string;
+/**
+ * formatBankAccountNumber - Format bank account number
+ * @export
+ * @param {*} value
+ * @return {*}
+ */
+export declare function formatBankAccountNumber(value: any): string;
+/**
+ * formatRoutingNumber - format routing number
+ * @export
+ * @param {*} value
+ * @return {*}
+ */
+export declare function formatRoutingNumber(value: any): string;
+export declare const getCreditCardMethodIcon: (creditCardNumber: any) => any;

package/dist/utilities/form/paymentForm/DisableOverlay.d.ts

@@ -0,0 +1,7 @@
+/**
+ * DisabledOverlay
+ *
+ * @param {*} { message }
+ * @return {*}
+ */
+export declare const DisabledOverlay: ({ message }: any) => JSX.Element;

package/dist/utilities/form/paymentForm/HostedPaymentError.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @file HostedPaymentError.tsx
+ * @description This component displays an error message when there is an issue rendering the hosted payment form.
+ */
+/**
+ * HostedPaymentError component
+ *
+ * This component is used to display an error message when there is an issue rendering the hosted payment form.
+ * It utilizes the `useTranslation` hook to support internationalization.
+ *
+ * @param {Object} props - The properties object.
+ * @param {string} props.error - The error string.
+ * @param {string} props.message - The error message to be displayed.
+ *
+ * @returns {JSX.Element} The rendered error message component.
+ */
+export declare const HostedPaymentError: ({ error, message }: {
+    error: string;
+    message: string;
+}) => JSX.Element;

package/dist/utilities/form/paymentForm/NewCreditCardForm.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { PaymentDetails } from './AccountPayment.model';
+/**
+ * NewCardForm component renders a form for entering new credit card details.
+ *
+ * @param {Object} props - The properties object.
+ * @param {boolean} props.isFormDisabled - Flag to disable the form fields.
+ * @param {Record<string, string>} props.classes - CSS classes for styling the form controls.
+ * @param {React.Dispatch<React.SetStateAction<string>>} props.setCreditCardNumberInput - Function to set the credit card number input value.
+ *
+ * @returns {JSX.Element} The rendered NewCardForm component.
+ */
+export declare const NewCreditCardForm: ({ isFormDisabled, classes, creditCardNumberInput, paymentDetails, setCreditCardNumberInput, }: {
+    isFormDisabled: boolean;
+    classes: Record<string, string>;
+    creditCardNumberInput: string;
+    paymentDetails: PaymentDetails;
+    setCreditCardNumberInput: React.Dispatch<React.SetStateAction<string>>;
+}) => JSX.Element;

package/dist/utilities/form/paymentForm/NewECheckForm.d.ts

@@ -0,0 +1,15 @@
+/**
+ * NewCardForm component renders a form for entering new credit card details.
+ *
+ * @param {Object} props - The properties object.
+ * @param {boolean} props.isFormDisabled - Flag to disable the form fields.
+ * @param {Record<string, string>} props.classes - CSS classes for styling the form controls.
+ * @param {React.Dispatch<React.SetStateAction<string>>} props.setCreditCardNumberInput - Function to set the credit card number input value.
+ *
+ * @returns {JSX.Element} The rendered NewCardForm component.
+ */
+export declare const NewECheckForm: ({ isFormDisabled, classes, bankAccountTypes, }: {
+    isFormDisabled: boolean;
+    classes: Record<string, string>;
+    bankAccountTypes?: any[] | undefined;
+}) => JSX.Element;

package/dist/utilities/form/paymentForm/PaymentAccount.model.d.ts

@@ -0,0 +1,81 @@
+export interface PaymentAccount {
+    firstName: null;
+    lastName: null;
+    businessObjectKey: string;
+    paymentTokenCreditCardID: string;
+    paymentTokenID: string;
+    cardNumber: string;
+    securityCode: string;
+    expirationDate: Date;
+    nameOnAccount: string;
+    address1: string;
+    address2: string;
+    postalCode: string;
+    state: string;
+    city: string;
+    phoneNumber: string;
+    emailAddress: string;
+    country: string;
+    serializeFields: null;
+    paymentToken: PaymentToken;
+    paymentTransaction: PaymentTransaction[];
+    udpTags: any[];
+}
+export interface PaymentToken {
+    businessObjectKey: string;
+    tenantID: string;
+    paymentTokenID: string;
+    appPaymentVendorID: string;
+    paymentMethodID: number;
+    nickname: string;
+    externalID: string;
+    token: string;
+    accountNumber: string;
+    accountName: string;
+    active: boolean;
+    createDate: Date;
+    serializeFields: null;
+    appPaymentVendor: null;
+    paymentMethod: null;
+    paymentTokenCreditCard: any[];
+    paymentTokenECheck: any[];
+    udpTags: any[];
+}
+export interface PaymentTransaction {
+    businessObjectKey: string;
+    tenantID: string;
+    paymentTransactionID: string;
+    appPaymentVendorID: string;
+    paymentDate: Date;
+    paymentMethodID: number;
+    reference1: string;
+    reference2: string;
+    reference3: null;
+    paymentAmount: number;
+    paymentResultID: number;
+    transactionID: string;
+    authorizationNumber: string;
+    responseCode: string;
+    responseReason: string;
+    paymentStatusID: number;
+    paymentSourceID: number;
+    paymentVendorFactoryID: number;
+    applicationClientID: string;
+    currencyCode: string;
+    paymentTokenCreditCardID: string;
+    paymentTokenECheckID: null;
+    serializeFields: null;
+    batchPaymentDetail: any[];
+    paymentReverseTransaction: any[];
+    paymentTokenCreditCard: null;
+    applicationClient: null;
+    appPaymentVendor: null;
+    paymentMethod: null;
+    paymentResult: null;
+    paymentSource: null;
+    currency: null;
+    paymentTransactionStatus: null;
+    paymentTokenECheck: null;
+    udpTags: any[];
+    paymentTransactionDepositReport: any[];
+}

package/dist/utilities/form/paymentForm/PaymentBankDetails.d.ts

@@ -0,0 +1,12 @@
+import { CardData } from './PaymentDropdown';
+/**
+ * PaymentBankDetails component displays the bank details of a payment method.
+ * It shows the card logo, nickname, routing number, and an inactive chip if the card is not active.
+ *
+ * @param {Object} props - The component props.
+ * @param {CardData} props.bankData - The bank data containing payment token and routing number.
+ * @returns {JSX.Element} The rendered PaymentBankDetails component.
+ */
+export declare const PaymentBankDetails: ({ bankData }: {
+    bankData: CardData;
+}) => JSX.Element;

package/dist/utilities/form/paymentForm/PaymentBoxDetail.d.ts

@@ -0,0 +1,32 @@
+interface PaymentToken {
+    nickname: string;
+}
+interface CardData {
+    paymentToken: PaymentToken;
+    expirationDate: string;
+    active: boolean;
+    paymentTokenID: string;
+}
+/**
+ * PaymentBoxDetail component displays detailed information about a payment card.
+ *
+ * @param {Object} props - The component props.
+ * @param {CardData} props.cardData - The data of the card to be displayed.
+ * @param {string} props.cardData.paymentToken - The token representing the payment card.
+ * @param {string} props.cardData.expirationDate - The expiration date of the card.
+ * @param {boolean} props.cardData.active - Indicates if the card is the default payment method.
+ * @param {string} props.cardData.paymentTokenID - The unique identifier for the payment token.
+ *
+ * @returns {JSX.Element} The rendered PaymentBoxDetail component.
+ *
+ * The component includes:
+ * - Card logo with a border.
+ * - Card details including nickname and expiration date.
+ * - Actions to set the card as default or indicate if it is the default card.
+ * - Expiration status if the card is expired.
+ * - A delete button to remove the card.
+ */
+export declare const PaymentBoxDetail: ({ cardData }: {
+    cardData: CardData;
+}) => JSX.Element;
+export {};

package/dist/utilities/form/paymentForm/PaymentCard.d.ts

@@ -0,0 +1,12 @@
+import { default as React, FC } from 'react';
+interface PaymentCardProps {
+    title?: string;
+    className?: any;
+    style?: any;
+    headerColor?: string;
+    loading?: boolean;
+    headerElement?: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare const PaymentCard: FC<PaymentCardProps>;
+export {};

package/dist/utilities/form/paymentForm/PaymentCardDetail.d.ts

@@ -0,0 +1,19 @@
+import { CardData } from './PaymentDropdown';
+/**
+ * PaymentCardDetail component displays the details of a payment card.
+ *
+ * @param {Object} props - The component props.
+ * @param {CardData} props.cardData - The data of the payment card.
+ * @param {string} props.cardData.paymentToken - The token of the payment card.
+ * @param {string} props.cardData.expirationDate - The expiration date of the payment card.
+ * @param {boolean} props.cardData.active - The active status of the payment card.
+ *
+ * @returns {JSX.Element} The rendered PaymentCardDetail component.
+ *
+ * The component displays the card logo, nickname, and expiration date.
+ * If the card is expired, it shows an "Expired" chip.
+ * The card logo is determined based on the nickname of the card.
+ */
+export declare const PaymentCardDetail: ({ cardData }: {
+    cardData: CardData;
+}) => JSX.Element;

package/dist/utilities/form/paymentForm/PaymentDropdown.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+import { PaymentTenderTypeEnum } from '../../../enums/paymentTenderTypeEnum';
+interface PaymentToken {
+    nickname: string;
+    active?: boolean;
+}
+export interface CardData {
+    paymentToken: PaymentToken;
+    expirationDate: string;
+    routingNumber: string;
+    active: boolean;
+    paymentTokenID: string;
+}
+interface PaymentDropdownProps {
+    paymentAccounts: CardData[];
+    paymentType: PaymentTenderTypeEnum;
+    setSelectedPaymentAccount?: (paymentAccount: any) => void;
+}
+/**
+ * PaymentDropdown component renders a dropdown menu for selecting a payment account.
+ * It supports both credit card and bank account payment types.
+ *
+ * @component
+ * @param {PaymentDropdownProps} props - The properties for the PaymentDropdown component.
+ * @param {Array} props.paymentAccounts - An array of payment accounts to display in the dropdown.
+ * @param {Function} props.setSelectedPaymentAccount - A function to set the selected payment account.
+ * @param {PaymentTenderTypeEnum} props.paymentType - The type of payment (CreditCard or BankAccount).
+ *
+ * @returns {JSX.Element} The rendered PaymentDropdown component.
+ */
+declare const PaymentDropdown: React.FC<PaymentDropdownProps>;
+export default PaymentDropdown;