@transact-open-ux/react/dist/providers/TransactProvider.d.ts

Library to integrate React with Transact Open UX

import { formError, formFunction, formIneligible, formInit, formLoad, formStart, formUpdate, userCancel, userSave, userSubmit } from "@transact-open-ux/core";
import React, { ComponentType, ConsumerProps, FunctionComponent } from "react";
declare type ValidationError = Array<{
    [errorKey: string]: string;
}>;
export interface TransactProviderProps {
    children?: React.ReactNode;
    /**
     * If save challenge is required and this function prop exists, it will be called.
     * An example would be to open a save challenge modal dialog.
     */
    onSaveChallengeRequired?: () => void;
    /**
     * If set, this prop specifies the globally unique application form code to create a new transaction for with a `formNew` call.
     * **To be used when Transact is NOT rendering the Open UX application.**
     */
    formCode?: string;
    /**
     * Used in conjunction with the `formCode` prop.
     * If set, this prop specifies the application form version number to use, if not specified then the current form version will be used for the transaction
     * **To be used when Transact is NOT rendering the Open UX application.**
     */
    formVersion?: string;
    /**
     * This prop specifies the endpoint which will be used for the `formNew` call and all subsequent Open UX API calls
     * **To be used when Transact is NOT rendering the Open UX application.**
     */
    endpoint?: string;
    /**
     * This prop specifies the tracking code or reference number. This value should be used when opening an previously saved form application.
     * **To be used when Transact is NOT rendering the Open UX application.**
     */
    trackingCode?: string;
}
export interface TransactProviderState {
    /**
     * Sets the loading state as well as updating the transact state on return of the call
     * @param transactCall - A promise returned from a call
     */
    dispatchCall?: (transactCall: Promise<any>) => Promise<any>;
    /**
     * Contains any error content if an error is returned
     */
    error?: object;
    /**
     * Contains the formData object, this can be used to set the initial values of your form.
     * Ensure to re-initialize your values so your form will update.<br>
     * *Note: This props will be out of sync with your form values and should only be used for initialization / updating your form from the server.*
     */
    formData?: object;
    /**
     * This command type enables recording information about an unexpected JavaScript error in the application
     * and storing this information in the Transact Manager Error Log for operational support.
     */
    formError?: typeof formError;
    /**
     * This command is used to call an arbitrary Fluent Function for performing server side logic.
     */
    formFunction?: typeof formFunction;
    /**
     * Make a call to the form ineligible operation.
     * The app should display a custom page after this operation preventing the user from performing further work.
     */
    formIneligible?: typeof formIneligible;
    /**
     * This command type specifies that the form application is fully initialized and ready for user interaction.
     * The role of this command to provide analytics around the performance of forms and understand how long they take to open,
     * and what the impact is on conversion rate and form starts.
     */
    formInit?: typeof formInit;
    /**
     * Make a call to the form load operation to load the application prefill data at load time.
     * You can also load a saved application via a combination of parameters.
     * After the data has been retrieved a form initiated operation will be called.
     */
    formLoad?: typeof formLoad;
    /**
     * A boolean value that indicates whether the form has loaded or not.
     * A formLoad call will set this to true
     */
    formLoaded?: boolean;
    /**
     * The formNew command creates a new form transaction or opens an existing transaction.
     * This call should be followed by the formLoad command.
     * <br>
     * This command is provided to support the use case where Transact is not rendering the HTML Open UX application,
     * but instead it is being rendered separately by another system such as a Content Management System (CSM) or another application.
     */
    formNew?: (requestUrl: string, formCode?: string, formVersion?: string, trackingCode?: string) => Promise<any>;
    /**
     * Make a call to the form start operation specifying that the user has started interacting with the form.
     */
    formStart?: typeof formStart;
    /**
     * Represents the formStatus of the application.
     */
    formStatus?: "Assigned" | "Opened" | "Saved" | "Submitted" | "Completed" | "Expired" | "Abandoned";
    /**
     * Make a call to the form update operation, this performs an app initiated background save.
     * Reasons to call this command include: page change save, timer based save, milestone based save, add attachment,
     * specify attachment to be added manually and remove attachment.
     */
    formUpdate?: typeof formUpdate;
    /**
     * Returns the formApi which has been set by `setFormApi`.
     * This is to de-couple the `TransactProvider` from a specific form library.
     * By default we use `Formik` in our TransactForm.
     */
    getFormApi?: () => any;
    /**
     * Returns the Insights Profile if Insights is enabled, otherwise it will return undefined
     */
    getInsightsProfile?: () => object | undefined;
    /**
     * Returns the narrative data object (if it exists), these values can be used to drive logic in your application
     * @param path
     */
    getNarrativeData?: (path?: string) => any;
    /**
     * Returns the server side error object (if it exists)
     * @param errorKey
     */
    getValidationError?: (errorKey: string) => object | undefined;
    /**
     * Remove server side validation messages from the array of validationErrors.
     * Specify the errors via the key or keys e.g. removeValidationError("stdErrs.formSaveChallengeInvalidAnswer");
     * @param errorKeys
     */
    removeValidationErrors?: (errorKeys: string[] | string) => void;
    /**
     * A helper method to perform a save challenge request.
     * If successful, a `SaveChallengeSuccess` boolean value will be returned by the call
     */
    resumeForm?: typeof formLoad;
    /**
     * Shows the number of times the current application state has been saved before
     */
    revisionNumber?: number;
    /**
     * A boolean property that indicates whether a transact call is in progress
     */
    isLoading?: boolean;
    /**
     * A boolean property that indicates whether a save challenge call is in progress
     */
    saveChallengeLoading?: boolean;
    /**
     * Sets the formApi object to the Transact Context
     * @param formApi
     */
    setFormApi?: (formApi: object) => void;
    /**
     * Make a call that performs a user initiated cancel abandonment operation.
     * The app should display a cancel confirmation page after this operation.
     */
    userCancel?: typeof userCancel;
    /**
     * Make a call that performs a user initiated save operation.
     * It is recommended that the app displays a save confirmation page after this operation.
     */
    userSave?: typeof userSave;
    /**
     * Make a call that performs a user initiated submit operation.
     * The app should display a submission confirmation page after this operation.
     */
    userSubmit?: typeof userSubmit;
    /**
     * A method that will update the narrative data
     * @param path
     * @param value
     */
    updateNarrativeData?: (path: string, value: any) => void;
    /**
     * A list of validation errors returned by the server
     * <br>
     * A validation error object can consist of the following keys
     * <br>
     * **path** -  which specified the XPath of the data element with the validation error
     * **errorKey** - which specifies the localized error message key
     * **parameters** - specified optional parameters which could be displayed in a localized error message
     */
    validationErrors?: ValidationError;
}
/**
 * A component that surrounds your entire app and handles all the transact API logic and state.
 *
 * ## Example
 * Wrapping your root App component
 * ```jsx
 * import { TransactProvider, PageProvider } from '@transact-open-ux/react';
 * import App from './App';
 *
 * ReactDOM.render(
 *  <TransactProvider>
 *    <PageProvider>
 *     <App />
 *    </PageProvider>
 *  </TransactProvider>,
 * document.getElementById('root')
 * );
 * ```
 */
declare const TransactProvider: FunctionComponent<TransactProviderProps>;
/**
 * A component that can access the transact state and form api via render props from inside a `<TransactProvider/>` component.
 *
 * ## Example
 *
 * Creating a save button using render props.
 *
 * ```jsx
 * import { TransactConsumer } from '@transact-open-ux/react';
 *
 * export default function SaveButton() {
 *  return (
 *   <TransactConsumer>
 *     {({ userSave, getFormApi }) => (
 *       <button onClick={() => userSave(getFormApi().values)}>Save</button>
 *     )}
 *   </TransactConsumer>
 *  )
 * }
 * ```
 */
declare const TransactConsumer: ComponentType<ConsumerProps<TransactProviderState>>;
declare const useTransactContext: () => TransactProviderState;
export { TransactConsumer, TransactProvider, useTransactContext };