Signed Agreement Manager

A react hook and modal to manage signed agreements and allow for the following:

• Fetch signed agreements
• Sign Agreements

This react hook is directly tied to the SignedAgreements table in procore/procore, which is used to store whether the company or user has signed a terms and condition agreement. Modal takes some parts of the hook as props and requires I18nProvider to be in tree. You will need to add to terms and conditions model for the pdf/html link to agreeement (only 'beta_user/app_management' has pdf and html version, whereas others using 'onetrust' will only have html version).

Installation

yarn add @procore/labs-signed-agreement-manager

Dependencies

@procore/core-react and react are listed as external peer dependencies. The package will not bundle the code, and requires the app client to provide it as a dependency. The external peer dependencies are to ensure React Context is consistent in a client's React tree, the child consumers can reference the correct parent provider. If the package uses latest features or bug fixes and a new minimum version of core-react is required, it should be considered a breaking change as the peer dependency version must be met.

Hook Usage

import { useSignedAgreement } from '@procore/labs-signed-agreement-manager';

const store = useSignedAgreement({
  companyId: 1,
  agreementNameVersion: 'beta_user/app_management',
});

React.useEffect(() => {
  // Fetch signed agreements
  store.actions.fetchSignedAgreement();
}, []);

// Check if signed agrement exists
const hasSignedAgreement = store.state.isSigned;

// Create signed agreement if it does not exist
const onAccept = () => {
  store.actions.createSignedAgreement().then((res) => {
    if (res && res.id) {
      visibility.hide();
    }
  });
};

Modal Usage

import { useSignedAgreement, SignedAgreementModal } from '@procore/labs-signed-agreement-manager';

<I18nProvider locale="en" translations={translations}>
  <ToastAlertProvider>
    {() => {
      const { showToast } = useToastAlertContext();
      const store = useSignedAgreement({
        companyId: 1,
        agreementNameVersion: 'beta_user_v2/procore_to_procore',
      });

      const [open, setOpen] = React.useState(true);

      React.useEffect(() => {
        if (store.state.error) {
          setOpen(false);
          showToast.error(store.state.error)
        }
      
        if (store.state.postSuccess) {
          setOpen(false);
          showToast.success("Success!");
        }
      }, [store.state.error, store.state.postSuccess])

      return (
        <SignedAgreementModal
          open={open}
          isLoading={store.state.isPosting}
          url={store.state.pdfUrl}
          onAccept={store.actions.createSignedAgreement}
          onDecline={() => setOpen(false)}
        />
      )}
  </ToastAlertProvider>
</I18nProvider>
};