@procore/labs-emails

Emails Introduction

Emails component integrated with Procore endpoints to support reading and writing emails.

Installation

yarn add @procore/labs-emails

Dependencies

@procore/core-react, @procore/labs-toast-alert 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 dep is to assure 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.

Emails depend on CORE I18nProvider and @procore/labs-toast-alert's ToastAlertProvider to work properly.

Usage

import { Emails } from '@procore/labs-emails';
import { I18nProvider } from '@procore/core-react';
import { ToastAlertProvider } from '@procore/labs-toast-alert';

<I18nProvider>
  <ToastAlertProvider>
    <Emails.Provider procoreEnv={...} topic={...}>
      <Emails />
      <Emails.Toolbar />
      <Emails.Count />
    </Emails.Provider>
  <ToastAlertProvider>
<I18nProvider>

Emails.Provider

Emails.Provider holds routing and pre-fetched state used by Emails, Emails.Toolbar and Emails.Count components.

The primary configuration points are procoreEnv describing Procore project and company and topic identifying the communication entity.

Provider's state can be accessed via Emails.Context, but it is unsafe to use it as it may be a subject for breaking change in future versions.

It is recommended to put Emails.Provider on the top of the application tree, with the rest of providers.

Emails

Emails component is responsible for displaying Email List, Email Thread and New Email pages. It is intended to be placed inside DetailPage.Body CORE component. Distribution and file upload strategy can be altered via distributionVariant and directFileUpload props.

Emails.Toolbar

Emails.Toolbar component is responsible for displaying dynamic emails toolbar. It is intended to be placed inside DetailPage.Actions CORE component.

Emails.Count

Emails.Count component is responsible for dynamically displaying the total amount of emails. format prop can be used to alternate the view of a counter.