@servicetitan/mpa-components 0.1.0 → 0.2.1

package/src/components/settings/email-validation/index.tsx

@@ -0,0 +1,267 @@
+import classnames from 'classnames';
+import { action } from 'mobx';
+import { FC, useCallback } from 'react';
+import { observer, useLocalStore } from 'mobx-react';
+
+import {
+    BodyText,
+    Button,
+    Card,
+    Container,
+    Form,
+    Grid,
+    Layout,
+    Link,
+    Stack,
+    Text,
+    Tooltip,
+} from '@servicetitan/design-system';
+import {
+    DateRangeColumnMenuFilter,
+    multiSelectColumnMenuFilter,
+    StandardColumnMenuFilter,
+    Table,
+    TableColumn,
+    TableState,
+    TableCellProps,
+} from '@servicetitan/table';
+
+import { ResultDefinitionsModal } from '../result-definitions-modal';
+
+interface EmailValidationLocalStore {
+    open: boolean;
+    setOpen(state: boolean): void;
+}
+
+export interface EmailValidationTableRecord<T> {
+    id: number;
+    active: boolean;
+    createdOn: Date;
+    email?: string | undefined;
+    result: T;
+    dateAdded?: Date | undefined;
+}
+
+export interface EmailValidationProps<
+    TEmailValidationType extends string = string,
+    TEmailValidationResult extends string = string
+> {
+    className?: string;
+    loading: boolean;
+    resultGrid: TableState<EmailValidationTableRecord<TEmailValidationResult>>;
+    validationRiskType: TEmailValidationType;
+    handleDownload(): void;
+    setValidationRiskType(type: TEmailValidationType): void;
+}
+
+interface EmailValidationHocOptions<
+    TEmailValidationType extends string = string,
+    TEmailValidationResult extends string = string
+> {
+    resultToText: Map<TEmailValidationResult, string>;
+    levelTypeMap: {
+        high: TEmailValidationType;
+        medium: TEmailValidationType;
+        low: TEmailValidationType;
+    };
+    levelsResultMap: Map<TEmailValidationType, TEmailValidationResult[]>;
+    resultToTooltipText: Map<TEmailValidationResult, string>;
+    TenantDateCell: FC<TableCellProps>;
+}
+
+export function emailValidationHoc<
+    TEmailValidationType extends string = string,
+    TEmailValidationResult extends string = string
+>({
+    resultToText,
+    levelTypeMap,
+    resultToTooltipText,
+    levelsResultMap,
+    TenantDateCell,
+}: EmailValidationHocOptions<TEmailValidationType, TEmailValidationResult>) {
+    const ResultColumnMenuFilter = multiSelectColumnMenuFilter(
+        [...resultToText.keys()],
+        result => resultToText.get(result)!
+    );
+
+    const ResultCell: FC<TableCellProps> = props => {
+        const { result } = props.dataItem as { result: TEmailValidationResult };
+
+        return (
+            <td className="qa-result-cell of-visible-i">
+                <Tooltip text={resultToTooltipText.get(result)} className="qa-result-cell-tooltip">
+                    {resultToText.get(result)}
+                </Tooltip>
+            </td>
+        );
+    };
+
+    function EmailValidationImpl({
+        className,
+        handleDownload,
+        loading,
+        resultGrid,
+        setValidationRiskType,
+        validationRiskType,
+    }: EmailValidationProps<TEmailValidationType>) {
+        const localStore: EmailValidationLocalStore = useLocalStore(() => ({
+            open: false,
+            setOpen: action(function (this: EmailValidationLocalStore, state: boolean) {
+                this.open = state;
+            }),
+        }));
+
+        const handleCheck = useCallback(
+            (riskType: TEmailValidationType) => () => {
+                setValidationRiskType(riskType);
+            },
+            [setValidationRiskType]
+        );
+
+        const handleClickLearnMore = () => {
+            localStore.setOpen(true);
+        };
+
+        const handleClose = () => {
+            localStore.setOpen(false);
+        };
+
+        const getResultsItemsForLevel = (level: TEmailValidationType) => {
+            return levelsResultMap.get(level)?.map(r => <div key={r}>{r}</div>);
+        };
+
+        return (
+            <Container className={classnames(className, 'p-b-5 qa-email-validation')}>
+                <Stack justifyContent="space-between" alignItems="center" className="m-b-2">
+                    <Text size={4} className="m-r-3">
+                        Email Validation
+                    </Text>
+                    <Button
+                        small
+                        primary
+                        onClick={handleDownload}
+                        className="qa-email-validation-download-csv"
+                        iconName="file_download"
+                        iconPosition="left"
+                    >
+                        Download CSV
+                    </Button>
+                </Stack>
+                <Layout type="support" direction="right">
+                    <Layout.Section>
+                        <Text size={2} className="m-b-4 c-neutral-90">
+                            Email Validation acts like a filter that will block emails from going to
+                            bad email addresses. You won't necessarily see these emails in your
+                            suppression list, but it will effect your number “Sent”.
+                        </Text>
+                    </Layout.Section>
+                    <Layout.Section />
+                </Layout>
+                <Grid relaxed>
+                    <Grid.Column width={3}>
+                        <Card>
+                            <Card.Section light>
+                                <Text bold size={3} className="m-b-1">
+                                    Set Your Preference
+                                </Text>
+                                <Text size={2} className="m-b-1">
+                                    Choose what level you want to enable for auto-suppression.
+                                </Text>
+                                <Link
+                                    primary
+                                    onClick={handleClickLearnMore}
+                                    className="qa-email-validation-learn-more"
+                                >
+                                    Learn More
+                                </Link>
+                            </Card.Section>
+                            <Card.Section>
+                                <Form.Radio
+                                    label={
+                                        <div className="m-l-1">
+                                            <Text bold size={3} className="m-b-1">
+                                                High
+                                                <span className="c-neutral-90 fs-1 m-l-1">
+                                                    (recommended)
+                                                </span>
+                                            </Text>
+                                            <BodyText size="small" className="c-neutral-90">
+                                                {getResultsItemsForLevel(levelTypeMap.high)}
+                                            </BodyText>
+                                        </div>
+                                    }
+                                    checked={validationRiskType === levelTypeMap.high}
+                                    onChange={handleCheck(levelTypeMap.high)}
+                                    className="qa-email-validation-high"
+                                />
+                            </Card.Section>
+                            <Card.Section>
+                                <Form.Radio
+                                    label={
+                                        <div className="m-l-1">
+                                            <Text bold size={3} className="m-b-1">
+                                                Medium
+                                            </Text>
+                                            <BodyText size="small" className="c-neutral-90">
+                                                {getResultsItemsForLevel(levelTypeMap.medium)}
+                                            </BodyText>
+                                        </div>
+                                    }
+                                    checked={validationRiskType === levelTypeMap.medium}
+                                    onChange={handleCheck(levelTypeMap.medium)}
+                                    className="qa-email-validation-medium"
+                                />
+                            </Card.Section>
+                            <Card.Section>
+                                <Form.Radio
+                                    label={
+                                        <div className="m-l-1">
+                                            <Text bold size={3} className="m-b-1">
+                                                Low
+                                            </Text>
+                                            <BodyText size="small" className="c-neutral-90">
+                                                {getResultsItemsForLevel(levelTypeMap.low)}
+                                            </BodyText>
+                                        </div>
+                                    }
+                                    checked={validationRiskType === levelTypeMap.low}
+                                    onChange={handleCheck(levelTypeMap.low)}
+                                    className="qa-email-validation-low"
+                                />
+                            </Card.Section>
+                        </Card>
+                    </Grid.Column>
+                    <Grid.Column width={9}>
+                        <Table
+                            tableState={resultGrid}
+                            sortable
+                            loading={loading}
+                            className="qa-email-validation-table"
+                            scrollable="none"
+                        >
+                            <TableColumn
+                                field="email"
+                                title="Email Address"
+                                columnMenu={StandardColumnMenuFilter}
+                            />
+                            <TableColumn
+                                field="result"
+                                title="Result"
+                                cell={ResultCell}
+                                columnMenu={ResultColumnMenuFilter}
+                            />
+                            <TableColumn
+                                field="dateAdded"
+                                title="Date Added"
+                                cell={TenantDateCell}
+                                columnMenu={DateRangeColumnMenuFilter}
+                            />
+                        </Table>
+                    </Grid.Column>
+                </Grid>
+                {localStore.open && <ResultDefinitionsModal onClose={handleClose} />}
+            </Container>
+        );
+    }
+    return observer(EmailValidationImpl);
+}

package/src/components/settings/result-definitions-modal/header.tsx

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import { Grid, Text } from '@servicetitan/design-system';
+
+import * as Styles from './result-definitions-modal.module.less';
+
+export const Header: FC = () => (
+    <div className="position-sticky position-t-0 z-popover">
+        <Grid columns={3} className="p-y-1 bg-white">
+            <Grid.Column>
+                <Text size={1} className="c-neutral-90 tt-uppercase">
+                    Result
+                </Text>
+            </Grid.Column>
+            <Grid.Column>
+                <Text size={1} className="c-neutral-90 tt-uppercase">
+                    Risk
+                </Text>
+            </Grid.Column>
+            <Grid.Column>
+                <Text size={1} className="c-neutral-90 tt-uppercase">
+                    Recommendation
+                </Text>
+            </Grid.Column>
+        </Grid>
+        <hr className={Styles.divider} />
+    </div>
+);

package/src/components/settings/result-definitions-modal/index.tsx

@@ -0,0 +1,127 @@
+import { FC } from 'react';
+import classnames from 'classnames';
+import { Modal, Text } from '@servicetitan/design-system';
+
+import { Header } from './header';
+import { Row, RiskType } from './row';
+
+import * as Styles from './result-definitions-modal.module.less';
+
+interface ResultDefinitionsModalProps {
+    onClose(): void;
+}
+
+export const ResultDefinitionsModal: FC<ResultDefinitionsModalProps> = ({ onClose }) => (
+    <Modal
+        open
+        closable
+        title="Email Validation Result Definitions"
+        onClose={onClose}
+        className={classnames(Styles.modal, 'qa-result-definitions-modal')}
+    >
+        <Header />
+        <div className={Styles.wall} />
+        <Row result="Undeliverable" risk={RiskType.VeryHigh} recommendation="Suppress" />
+        <hr className={Styles.divider} />
+        <Text size={2} className="m-y-2">
+            Address was determined invalid after performing multiple checks including MX, SMTP,
+            etc., likely due to:
+            <ul className="m-y-0">
+                <li>The receiving recipient domain is not configured to accept email</li>
+                <li>
+                    The SMTP commands issued resulted in a hard bounce, i.e., "user does not exist"
+                    or "mailbox full" errors
+                </li>
+                <li>
+                    The recipient address historically hard-bounced or appeared on suppression lists
+                </li>
+                <li>
+                    Mailbox providers require specific standard for an email address including
+                    min/max number of characters, max number of periods, etc.
+                </li>
+            </ul>
+        </Text>
+        <hr className={Styles.divider} />
+        <Row result="Risky" risk={RiskType.Medium} recommendation="Proceed With Caution" />
+        <hr className={Styles.divider} />
+        <Text size={2} className="m-y-2">
+            Address was determined risky based on historical analysis or problematic results, likely
+            due to:
+            <ul className="m-y-0">
+                <li>
+                    The receiving address may be valid, but was found on one or more suppression
+                    lists Addresses matching a known spam trap are not ideal for sending campaigns
+                    to and can impact reputation
+                </li>
+            </ul>
+        </Text>
+        <hr className={Styles.divider} />
+        <Row result="Typo" risk={RiskType.High} recommendation="Suppress" />
+        <hr className={Styles.divider} />
+        <Text size={2} className="m-y-2">
+            Address was possibly typed incorrectly during sign-up, or matches known typo domains,
+            likely due to:
+            <ul className="m-y-0">
+                <li>
+                    Typos are mistyped address domains like "gmil.com" instead of "gmail.com," and
+                    are often undeliverable. Address is checked against database of common domain
+                    misspellings. These kinds of addresses are usually not good for sending.
+                </li>
+            </ul>
+        </Text>
+        <hr className={Styles.divider} />
+        <Row result="Accept-All" risk={RiskType.Medium} recommendation="Proceed With Caution" />
+        <hr className={Styles.divider} />
+        <Text size={2} className="m-y-2">
+            The receiving domain of the address accepts all mail, indicating it may be a spam trap,
+            likely due to:
+            <ul className="m-y-0">
+                <li>
+                    Some domains do not distinguish between existing and non-existing addresses and
+                    accept all mail
+                </li>
+            </ul>
+        </Text>
+        <hr className={Styles.divider} />
+        <Row result="Dispose" risk={RiskType.Medium} recommendation="Proceed With Caution" />
+        <hr className={Styles.divider} />
+        <Text size={2} className="m-y-2">
+            The receiving domain of the address accepts all mail, indicating it may be a spam trap,
+            likely due to:
+            <ul className="m-y-0">
+                <li>
+                    Some domains do not distinguish between existing and non-existing addresses and
+                    accept all mail
+                </li>
+            </ul>
+        </Text>
+        <hr className={Styles.divider} />
+        <Row result="Role" risk={RiskType.Medium} recommendation="Proceed With Caution" />
+        <hr className={Styles.divider} />
+        <Text size={2} className="m-y-2">
+            Address likely is not a particular person, but rather a group or department, likely due
+            to:
+            <ul className="m-y-0">
+                <li>
+                    Role addresses belong to the end user and are deliverable, but include multiple
+                    end recipients as part of a larger distribution list. These kinds of addreses
+                    are usually not good for sending campaigns
+                </li>
+            </ul>
+        </Text>
+        <hr className={Styles.divider} />
+        <Row result="Unknown" risk={RiskType.Medium} recommendation="Proceed With Caution" />
+        <hr className={Styles.divider} />
+        <Text size={2} className="m-y-2">
+            A connection problem or unresponsive SMTP server prevented validation, likely due to:
+            <ul className="m-y-0">
+                <li>Unable to connect and resolve to service during SMTP connection</li>
+                <li>Unable to successfully get a response from SMTP server</li>
+                <li>
+                    Address was outside known result definitions and criteria and was unable to be
+                    classified
+                </li>
+            </ul>
+        </Text>
+    </Modal>
+);

package/src/components/settings/result-definitions-modal/result-definitions-modal.module.less

@@ -0,0 +1,17 @@
+@import (reference) '@servicetitan/tokens/dist/tokens.less';
+
+.modal {
+    :global(.Modal__content) {
+        padding-top: @spacing-0;
+    }
+
+    .divider {
+        margin: @spacing-1 @spacing-0;
+        border: 0;
+        border-bottom: 1px solid @color-neutral-60;
+    }
+
+    .wall {
+        height: 1px;
+    }
+}

package/src/components/settings/result-definitions-modal/result-definitions-modal.module.less.d.ts

@@ -0,0 +1,5 @@
+export const __esModule: true;
+export const modal: string;
+export const divider: string;
+export const wall: string;
+

package/src/components/settings/result-definitions-modal/row.tsx

@@ -0,0 +1,48 @@
+import { FC } from 'react';
+
+import { Grid, Text, Tag } from '@servicetitan/design-system';
+import tokens from '@servicetitan/tokens';
+
+export enum RiskType {
+    Medium,
+    High,
+    VeryHigh,
+}
+
+const riskTypeToColor = new Map<RiskType, string>([
+    [RiskType.Medium, 'warning'],
+    [RiskType.High, tokens.colorRed500],
+    [RiskType.VeryHigh, tokens.colorRed600],
+]);
+
+const riskTypeToText = new Map<RiskType, string>([
+    [RiskType.Medium, 'Medium'],
+    [RiskType.High, 'High'],
+    [RiskType.VeryHigh, 'Very High'],
+]);
+
+interface RowProps {
+    result: string;
+    risk: RiskType;
+    recommendation: string;
+}
+
+export const Row: FC<RowProps> = ({ result, risk, recommendation }) => (
+    <Grid columns={3} className="m-y-1">
+        <Grid.Column>
+            <Text size={2} bold>
+                {result}
+            </Text>
+        </Grid.Column>
+        <Grid.Column>
+            <Tag color={riskTypeToColor.get(risk)} compact>
+                {riskTypeToText.get(risk)}
+            </Tag>
+        </Grid.Column>
+        <Grid.Column>
+            <Text size={2} bold>
+                {recommendation}
+            </Text>
+        </Grid.Column>
+    </Grid>
+);

package/src/components/settings/settings-section/index.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 
 import { Text, Card, Layout } from '@servicetitan/design-system';
 
-interface SectionProps {
+export interface SectionProps {
     title: string;
     text?: JSX.Element | string;
     children: ReactNode;

package/src/components/settings/settings-section/settings-section.stories.tsx

@@ -0,0 +1,16 @@
+import { Headline } from '@servicetitan/design-system';
+import { SettingsSection as Component } from '.';
+
+export default {
+    title: 'MPA Components/settings/SettingsSection',
+    component: Component,
+    parameters: {},
+};
+
+export const SettingsSection = () => {
+    return (
+        <Component title="Hey! The test">
+            <Headline>The body</Headline>
+        </Component>
+    );
+};