@servicetitan/mpa-components 0.2.2 → 0.4.0

package/src/components/settings/company-email-sender/index.tsx

@@ -1,129 +1,2 @@
-import { SyntheticEvent, Fragment, useCallback, FC } from 'react';
-import { observer } from 'mobx-react';
-
-import { Form, Text } from '@servicetitan/design-system';
-import { InputFieldState } from '@servicetitan/form';
-
-import { SettingsSection } from '../settings-section';
-import { convertDomainName } from '../../../utils/helpers';
-
-import * as Styles from './company-email-sender.module.less';
-
-export interface CompanyEmailSenderProps {
-    formState: {
-        senderName: InputFieldState<string>;
-        senderDomain: InputFieldState<string>;
-        senderEmail: InputFieldState<string>;
-    };
-
-    senderTld: string;
-}
-
-export const CompanyEmailSender: FC<CompanyEmailSenderProps> = observer(
-    ({ formState: { senderDomain, senderName, senderEmail }, senderTld }) => {
-        const handleSenderNameChange = useCallback(
-            (_0: SyntheticEvent<HTMLInputElement>, data: { value: string }) => {
-                if (data.value.length > 80) {
-                    return;
-                }
-
-                senderName.onChange(data.value);
-            },
-            [senderName]
-        );
-
-        const handleSenderDomainChange = useCallback(
-            (_0: SyntheticEvent<HTMLInputElement>, data: { value: string }) => {
-                if (data.value.length > 30) {
-                    return;
-                }
-
-                senderDomain.onChange(data.value);
-            },
-            [senderDomain]
-        );
-
-        const handleSenderEmailChange = useCallback(
-            (_0: SyntheticEvent<HTMLInputElement>, data: { value: string }) => {
-                if (data.value.length > 50) {
-                    return;
-                }
-
-                senderEmail.onChange(data.value);
-            },
-            [senderEmail]
-        );
-
-        return (
-            <SettingsSection
-                title="Sender"
-                text="Configure sender name and email."
-                qaPrefix="qa-settings-sender"
-            >
-                <Form className="m-b-0-i">
-                    <Form.Group widths="equal" className="m-b-2-i">
-                        <Form.Input
-                            width={6}
-                            className="m-b-0-i qa-settings-sender-name"
-                            value={senderName.value}
-                            onChange={handleSenderNameChange}
-                            error={senderName.hasError}
-                            label={
-                                <Fragment>
-                                    Sender Name &nbsp;&nbsp;
-                                    <Text inline size={2} subdued>
-                                        max 80 characters
-                                    </Text>
-                                </Fragment>
-                            }
-                            placeholder="John Doe"
-                            fluid
-                        />
-                        <Form.Input
-                            width={6}
-                            className="m-b-0-i qa-settings-sender-domain"
-                            value={senderDomain.value}
-                            onChange={handleSenderDomainChange}
-                            error={senderDomain.hasError}
-                            label="Sender Domain"
-                            placeholder="Your Company"
-                            fluid
-                        />
-                    </Form.Group>
-                    <Form.Group className="m-b-0-i">
-                        <Form.Input
-                            width={6}
-                            className="m-b-0-i qa-settings-sender-email"
-                            value={senderEmail.value}
-                            onChange={handleSenderEmailChange}
-                            error={senderEmail.hasError}
-                            label={
-                                <Fragment>
-                                    Sender Email&nbsp;
-                                    <Text inline size={2} subdued>
-                                        (domain added automatically)
-                                    </Text>
-                                </Fragment>
-                            }
-                            placeholder="john.doe"
-                            fluid
-                        />
-                        <Form.Field label={'\u00A0'}>
-                            <div className={Styles.domain}>
-                                <Text
-                                    size={3}
-                                    bold
-                                    subdued
-                                    className="qa-settings-sender-generated-domain"
-                                >
-                                    @{senderDomain.$ ? convertDomainName(senderDomain.$) : 'domain'}
-                                    .{senderTld}
-                                </Text>
-                            </div>
-                        </Form.Field>
-                    </Form.Group>
-                </Form>
-            </SettingsSection>
-        );
-    }
-);
+export { CompanyEmailSender as CompanyEmailSenderCustomDomain } from './custom-domain-sender';
+export { CompanyEmailSender as CompanyEmailSender } from './simple-sender';

package/src/components/settings/company-email-sender/simple-sender.tsx

@@ -0,0 +1,71 @@
+import { SyntheticEvent, Fragment, useCallback, FC } from 'react';
+import { observer } from 'mobx-react';
+
+import { Form, Text } from '@servicetitan/design-system';
+import { InputFieldState } from '@servicetitan/form';
+import { SettingsSection } from '../settings-section';
+
+export interface CompanyEmailSender {
+    senderName: InputFieldState<string | undefined>;
+    senderEmail: InputFieldState<string | undefined>;
+}
+
+export const CompanyEmailSender: FC<CompanyEmailSender> = observer(
+    ({ senderName, senderEmail }) => {
+        const handleSenderNameChange = useCallback(
+            (_0: SyntheticEvent<HTMLInputElement, Event>, data: { value: string }) => {
+                if (data.value.length > 80) {
+                    return;
+                }
+
+                senderName.onChange(data.value);
+            },
+            [senderName]
+        );
+
+        const handleSenderEmailBlur = useCallback(() => {
+            senderEmail.validate();
+        }, [senderEmail]);
+
+        return (
+            <SettingsSection
+                title="Sender"
+                text="Configure sender name and email."
+                qaPrefix="qa-settings-sender"
+            >
+                <Form className="m-b-0-i">
+                    <Form.Group widths="equal" className="m-b-0-i">
+                        <Form.Input
+                            width={6}
+                            className="m-b-0-i qa-settings-sender-name"
+                            value={senderName.value}
+                            onChange={handleSenderNameChange}
+                            error={senderName.hasError}
+                            label={
+                                <Fragment>
+                                    Sender Name &nbsp;&nbsp;
+                                    <Text inline size={2} subdued>
+                                        max 80 characters
+                                    </Text>
+                                </Fragment>
+                            }
+                            placeholder="John Doe"
+                            fluid
+                        />
+                        <Form.Input
+                            width={6}
+                            className="m-b-0-i qa-settings-sender-email"
+                            value={senderEmail.value}
+                            onChange={senderEmail.onChangeHandler}
+                            error={senderEmail.hasError}
+                            onBlur={handleSenderEmailBlur}
+                            label="Sender Email"
+                            placeholder="name@company.com"
+                            fluid
+                        />
+                    </Form.Group>
+                </Form>
+            </SettingsSection>
+        );
+    }
+);

package/src/components/settings/company-trade-checkbox/index.tsx

@@ -5,7 +5,7 @@ import { Card, Icon } from '@servicetitan/design-system';
 
 import * as Styles from './company-trade-checkbox.module.less';
 
-export interface CompanyTradeCheckboxProps<TradesType extends string = string> {
+export interface CompanyTradeCheckboxProps<TradesType extends string | number = string> {
     label?: JSX.Element | string;
     value?: TradesType;
     className?: string;
@@ -13,13 +13,13 @@ export interface CompanyTradeCheckboxProps<TradesType extends string = string> {
     onClick?(item?: TradesType): void;
 }
 
-export function CompanyTradeCheckbox({
+export function CompanyTradeCheckbox<T extends string | number = string>({
     label,
     value,
     className,
     active,
     onClick,
-}: CompanyTradeCheckboxProps) {
+}: CompanyTradeCheckboxProps<T>) {
     const handleClick = useCallback(() => {
         if (onClick) {
             onClick(value);

package/src/components/settings/company-trades-picker/index.tsx

@@ -6,7 +6,7 @@ import { Grid, Text } from '@servicetitan/design-system';
 import { SettingsSection } from '../settings-section';
 import { CompanyTradeCheckbox } from '../company-trade-checkbox';
 
-export interface Trade<TradeType extends string> {
+export interface Trade<TradeType extends string | number> {
     qaKey?: string;
     name: string;
     value: TradeType;
@@ -19,12 +19,12 @@ export interface Trade<TradeType extends string> {
     };
 }
 
-export interface CompanyTradesPickerProps<TradeType extends string = string> {
+export interface CompanyTradesPickerProps<TradeType extends string | number = string> {
     trades: Trade<TradeType>[];
     onTradeChange(t?: TradeType): void;
 }
 
-export function CompanyTradesPicker<T extends string = string>({
+export function CompanyTradesPicker<T extends string | number = string>({
     trades,
     onTradeChange,
 }: CompanyTradesPickerProps<T>) {
@@ -46,7 +46,7 @@ export function CompanyTradesPicker<T extends string = string>({
                             {row.map(trade => {
                                 return (
                                     <Grid.Column key={trade.value}>
-                                        <CompanyTradeCheckbox
+                                        <CompanyTradeCheckbox<T>
                                             className={`qa-settings-select-your-trades-${
                                                 trade.qaKey ?? trade.value
                                             }`}

package/src/components/settings/double-opt-in/double-opt-in.stories.tsx

@@ -1,4 +1,4 @@
-import { CheckboxFieldState, InputFieldState } from '@servicetitan/form';
+import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
 import { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
 import { FormState } from 'formstate';
 import { DoubleOptIn as Component } from '.';
@@ -14,7 +14,7 @@ class DoubleOptInStore {
     form = new FormState({
         emailSubject: new InputFieldState('Jump in'),
         emailHeader: new InputFieldState('Right now'),
-        emailBody: new InputFieldState('Jump in right now! Please!'),
+        emailBody: new TextAreaFieldState('Jump in right now! Please!'),
         emailButtonText: new InputFieldState('JUMP IN'),
         enabled: new CheckboxFieldState(true),
     });

package/src/components/settings/double-opt-in/index.tsx

@@ -2,7 +2,7 @@ import { FC, Fragment, useCallback, useState } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 
-import { CheckboxFieldState, InputFieldState } from '@servicetitan/form';
+import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
 import { Form, Text, ToggleSwitch, Button } from '@servicetitan/design-system';
 import { useConfirm } from '@servicetitan/confirm';
 
@@ -15,10 +15,10 @@ export const footerText =
     'If you’ve received this email by mistake, no action is needed, just delete this message.';
 
 export interface DoubleOptInPropsFormState {
-    emailSubject: InputFieldState<string>;
-    emailHeader: InputFieldState<string>;
-    emailBody: InputFieldState<string>;
-    emailButtonText: InputFieldState<string>;
+    emailSubject: InputFieldState<string | undefined>;
+    emailHeader: InputFieldState<string | undefined>;
+    emailBody: TextAreaFieldState<string | undefined>;
+    emailButtonText: InputFieldState<string | undefined>;
     enabled: CheckboxFieldState;
 }
 export interface DoubleOptInProps {

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

@@ -4,28 +4,55 @@ import { InMemoryDataSource } from '@servicetitan/data-query';
 
 import { emailValidationHoc, EmailValidationTableRecord } from '.';
 
-type TType = 'high' | 'medium' | 'low';
-type TResult = 'ok' | 'fail';
+enum EmailValidationLevel {
+    Low = 1,
+    Medium = 2,
+    High = 3,
+}
+
+enum EmailValidationResult {
+    Undeliverable = 0,
+    Typo = 1,
+    Risky = 2,
+    Pending = -1,
+}
+
+const levelResultMap = new Map([
+    [EmailValidationLevel.High, [EmailValidationResult.Undeliverable]],
+    [EmailValidationLevel.Medium, [EmailValidationResult.Undeliverable]],
+    [EmailValidationLevel.Low, [EmailValidationResult.Undeliverable]],
+]);
+
+const resultToText = new Map<EmailValidationResult, string>([
+    [EmailValidationResult.Risky, 'Risky'],
+    [EmailValidationResult.Typo, 'Typo'],
+    [EmailValidationResult.Undeliverable, 'Undeliverable'],
+]);
+
+const resultToTooltipText = new Map<EmailValidationResult, string>([
+    [
+        EmailValidationResult.Risky,
+        'Address was determined risky based on historical analysis or problematic results.',
+    ],
+    [
+        EmailValidationResult.Typo,
+        'Address was possibly typed incorrectly during sign-up, or matches known typo domains',
+    ],
+    [
+        EmailValidationResult.Undeliverable,
+        'Address was determined invalid after performing multiple checks including MX, SMTP, etc.',
+    ],
+]);
 
-export const EmailValidation = emailValidationHoc<TType, TResult>({
-    resultToText: new Map([
-        ['ok', 'Valid'],
-        ['fail', 'Invalid'],
-    ]),
+const EmailValidationComponent = emailValidationHoc<EmailValidationLevel, EmailValidationResult>({
+    resultToText,
     levelTypeMap: {
-        high: 'high',
-        medium: 'medium',
-        low: 'low',
+        high: EmailValidationLevel.High,
+        medium: EmailValidationLevel.Medium,
+        low: EmailValidationLevel.Low,
     },
-    levelsResultMap: new Map([
-        ['high', ['ok', 'fail']],
-        ['medium', ['ok', 'fail']],
-        ['high', ['ok']],
-    ]),
-    resultToTooltipText: new Map([
-        ['ok', 'Valid'],
-        ['fail', 'Invalid'],
-    ]),
+    levelResultMap,
+    resultToTooltipText,
     TenantDateCell: (props: TableCellProps) => {
         const value = props.dataItem[props.field!];
         return <td className={props.className}>{value.toString()}</td>;
@@ -34,15 +61,15 @@ export const EmailValidation = emailValidationHoc<TType, TResult>({
 
 export default {
     title: 'MPA Components/settings/EmailValidation',
-    component: EmailValidation,
+    component: EmailValidationComponent,
     parameters: {},
 };
 
-export function EmailValidationSimple() {
-    const [type, setType] = useState<TType>('high');
+export function EmailValidation() {
+    const [type, setType] = useState<EmailValidationLevel>(EmailValidationLevel.High);
     const [loading, setLoading] = useState(true);
 
-    const grid = new TableState<EmailValidationTableRecord<TResult>>({
+    const grid = new TableState<EmailValidationTableRecord<EmailValidationResult>>({
         dataSource: null,
         pageSize: 15,
     });
@@ -53,12 +80,14 @@ export function EmailValidationSimple() {
                 return;
             }
             setLoading(true);
-            const dataSource = new InMemoryDataSource<EmailValidationTableRecord<TResult>>([
+            const dataSource = new InMemoryDataSource<
+                EmailValidationTableRecord<EmailValidationResult>
+            >([
                 {
                     id: 1,
                     active: false,
                     createdOn: new Date(),
-                    result: 'ok',
+                    result: EmailValidationResult.Risky,
                     email: 'varg@vikernes.com',
                     dateAdded: new Date(),
                 },
@@ -66,7 +95,7 @@ export function EmailValidationSimple() {
                     id: 2,
                     active: true,
                     createdOn: new Date(),
-                    result: 'fail',
+                    result: EmailValidationResult.Typo,
                     email: 'joe@biden.com',
                     dateAdded: new Date(),
                 },
@@ -78,7 +107,7 @@ export function EmailValidationSimple() {
     });
 
     return (
-        <EmailValidation
+        <EmailValidationComponent
             loading={loading}
             resultGrid={grid}
             validationRiskType={type}

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

@@ -43,20 +43,20 @@ export interface EmailValidationTableRecord<T> {
 }
 
 export interface EmailValidationProps<
-    TEmailValidationType extends string = string,
-    TEmailValidationResult extends string = string
+    TEmailValidationType extends string | number = string,
+    TEmailValidationResult extends string | number = string
 > {
     className?: string;
     loading: boolean;
     resultGrid: TableState<EmailValidationTableRecord<TEmailValidationResult>>;
-    validationRiskType: TEmailValidationType;
+    validationRiskType?: TEmailValidationType;
     handleDownload(): void;
     setValidationRiskType(type: TEmailValidationType): void;
 }
 
 interface EmailValidationHocOptions<
-    TEmailValidationType extends string = string,
-    TEmailValidationResult extends string = string
+    TEmailValidationType extends string | number = string,
+    TEmailValidationResult extends string | number = string
 > {
     resultToText: Map<TEmailValidationResult, string>;
     levelTypeMap: {
@@ -64,19 +64,19 @@ interface EmailValidationHocOptions<
         medium: TEmailValidationType;
         low: TEmailValidationType;
     };
-    levelsResultMap: Map<TEmailValidationType, TEmailValidationResult[]>;
+    levelResultMap: Map<TEmailValidationType, TEmailValidationResult[]>;
     resultToTooltipText: Map<TEmailValidationResult, string>;
     TenantDateCell: FC<TableCellProps>;
 }
 
 export function emailValidationHoc<
-    TEmailValidationType extends string = string,
-    TEmailValidationResult extends string = string
+    TEmailValidationType extends string | number = string,
+    TEmailValidationResult extends string | number = string
 >({
     resultToText,
     levelTypeMap,
     resultToTooltipText,
-    levelsResultMap,
+    levelResultMap,
     TenantDateCell,
 }: EmailValidationHocOptions<TEmailValidationType, TEmailValidationResult>) {
     const ResultColumnMenuFilter = multiSelectColumnMenuFilter(
@@ -103,7 +103,7 @@ export function emailValidationHoc<
         resultGrid,
         setValidationRiskType,
         validationRiskType,
-    }: EmailValidationProps<TEmailValidationType>) {
+    }: EmailValidationProps<TEmailValidationType, TEmailValidationResult>) {
         const localStore: EmailValidationLocalStore = useLocalStore(() => ({
             open: false,
             setOpen: action(function (this: EmailValidationLocalStore, state: boolean) {
@@ -127,7 +127,10 @@ export function emailValidationHoc<
         };
 
         const getResultsItemsForLevel = (level: TEmailValidationType) => {
-            return levelsResultMap.get(level)?.map(r => <div key={r}>{r}</div>);
+            return levelResultMap
+                .get(level)
+                ?.map(r => resultToText.get(r))
+                .map(r => <div key={r}>{r}</div>);
         };
 
         return (

package/src/components/settings/form-errors-list/index.tsx

@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import { observer } from 'mobx-react';
+import { ComposibleValidatable, FormState, ValidatableMapOrArray } from 'formstate';
+
+import { Banner } from '@servicetitan/design-system';
+
+export interface FormErrorsListProps<T extends ValidatableMapOrArray = ValidatableMapOrArray> {
+    form: FormState<T>;
+}
+
+export const FormErrorsList: FC<FormErrorsListProps> = observer(({ form }: FormErrorsListProps) => {
+    const getErrors = () => {
+        return Object.entries(form.$).map(
+            ([key, field]: [key: string, field: ComposibleValidatable<unknown>]) => {
+                return field.hasError ? (
+                    <li key={key} className="qa-settings-email-error-list-item">
+                        {field.error}
+                    </li>
+                ) : null;
+            }
+        );
+    };
+
+    if (!form.hasError) {
+        return null;
+    }
+
+    return (
+        <Banner
+            status="critical"
+            title="Missing Fields"
+            icon
+            className="m-b-2 qa-settings-email-error"
+        >
+            <p>Please complete all required fields:</p>
+            <ul className="qa-settings-email-error-list">{getErrors()}</ul>
+        </Banner>
+    );
+});

package/src/components/settings/index.ts

@@ -4,6 +4,8 @@ export * from './company-email-reply-to';
 export * from './company-email-sender';
 export * from './company-trades-picker';
 export * from './double-opt-in';
+export * from './email-validation';
+export * from './form-errors-list';
 export * from './logo-picker';
 export * from './opt-out-message';
 export * from './settings-section';

package/src/components/settings/opt-out-message/index.tsx

@@ -2,7 +2,7 @@ import { observer } from 'mobx-react';
 import { FC, Fragment, useCallback, useState } from 'react';
 import classnames from 'classnames';
 
-import { CheckboxFieldState, InputFieldState } from '@servicetitan/form';
+import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
 import { Button, Form, Stack, Text, ToggleSwitch } from '@servicetitan/design-system';
 import { useConfirm } from '@servicetitan/confirm';
 
@@ -12,11 +12,11 @@ import { OptOutEmailPreview } from '../email-preview/opt-out-email-preview';
 import * as Styles from './opt-out-message.module.less';
 
 export interface OptOutMessageState {
-    subjectLine: InputFieldState<string>;
-    header: InputFieldState<string>;
-    body: InputFieldState<string>;
-    buttonText: InputFieldState<string>;
-    monthsLimit: InputFieldState<number>;
+    subjectLine: InputFieldState<string | undefined>;
+    header: InputFieldState<string | undefined>;
+    body: TextAreaFieldState<string | undefined>;
+    buttonText: InputFieldState<string | undefined>;
+    monthsLimit: InputFieldState<number | undefined>;
     enabled: CheckboxFieldState;
     autoSuppressionEnabled: CheckboxFieldState;
 }

package/src/components/settings/opt-out-message/opt-out-message.stories.tsx

@@ -1,4 +1,4 @@
-import { CheckboxFieldState, InputFieldState } from '@servicetitan/form';
+import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
 import { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
 import { FormState } from 'formstate';
 import { OptOutMessage as Component } from '.';
@@ -14,7 +14,7 @@ class OptOutStore {
     form = new FormState({
         subjectLine: new InputFieldState('Good bye'),
         header: new InputFieldState('Opt out of emails'),
-        body: new InputFieldState('Sorry to see you go!'),
+        body: new TextAreaFieldState('Sorry to see you go!'),
         buttonText: new InputFieldState('Bye'),
         monthsLimit: new InputFieldState(6),
         enabled: new CheckboxFieldState(true),