@servicetitan/mpa-components 0.2.2 → 0.4.0

package/lib/components/settings/email-validation/email-validation.stories.js

@@ -12,25 +12,52 @@ import { useEffect, useState } from 'react';
 import { TableState } from '@servicetitan/table';
 import { InMemoryDataSource } from '@servicetitan/data-query';
 import { emailValidationHoc } from '.';
-export const EmailValidation = emailValidationHoc({
-    resultToText: new Map([
-        ['ok', 'Valid'],
-        ['fail', 'Invalid'],
-    ]),
+var EmailValidationLevel;
+(function (EmailValidationLevel) {
+    EmailValidationLevel[EmailValidationLevel["Low"] = 1] = "Low";
+    EmailValidationLevel[EmailValidationLevel["Medium"] = 2] = "Medium";
+    EmailValidationLevel[EmailValidationLevel["High"] = 3] = "High";
+})(EmailValidationLevel || (EmailValidationLevel = {}));
+var EmailValidationResult;
+(function (EmailValidationResult) {
+    EmailValidationResult[EmailValidationResult["Undeliverable"] = 0] = "Undeliverable";
+    EmailValidationResult[EmailValidationResult["Typo"] = 1] = "Typo";
+    EmailValidationResult[EmailValidationResult["Risky"] = 2] = "Risky";
+    EmailValidationResult[EmailValidationResult["Pending"] = -1] = "Pending";
+})(EmailValidationResult || (EmailValidationResult = {}));
+const levelResultMap = new Map([
+    [EmailValidationLevel.High, [EmailValidationResult.Undeliverable]],
+    [EmailValidationLevel.Medium, [EmailValidationResult.Undeliverable]],
+    [EmailValidationLevel.Low, [EmailValidationResult.Undeliverable]],
+]);
+const resultToText = new Map([
+    [EmailValidationResult.Risky, 'Risky'],
+    [EmailValidationResult.Typo, 'Typo'],
+    [EmailValidationResult.Undeliverable, 'Undeliverable'],
+]);
+const resultToTooltipText = new Map([
+    [
+        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.',
+    ],
+]);
+const EmailValidationComponent = emailValidationHoc({
+    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) => {
         const value = props.dataItem[props.field];
         return _jsx("td", Object.assign({ className: props.className }, { children: value.toString() }), void 0);
@@ -38,11 +65,11 @@ export const EmailValidation = emailValidationHoc({
 });
 export default {
     title: 'MPA Components/settings/EmailValidation',
-    component: EmailValidation,
+    component: EmailValidationComponent,
     parameters: {},
 };
-export function EmailValidationSimple() {
-    const [type, setType] = useState('high');
+export function EmailValidation() {
+    const [type, setType] = useState(EmailValidationLevel.High);
     const [loading, setLoading] = useState(true);
     const grid = new TableState({
         dataSource: null,
@@ -60,7 +87,7 @@ export function EmailValidationSimple() {
                         id: 1,
                         active: false,
                         createdOn: new Date(),
-                        result: 'ok',
+                        result: EmailValidationResult.Risky,
                         email: 'varg@vikernes.com',
                         dateAdded: new Date(),
                     },
@@ -68,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(),
                     },
@@ -79,6 +106,6 @@ export function EmailValidationSimple() {
         }
         load();
     });
-    return (_jsx(EmailValidation, { loading: loading, resultGrid: grid, validationRiskType: type, setValidationRiskType: setType, handleDownload: () => alert('downloading csv') }, void 0));
+    return (_jsx(EmailValidationComponent, { loading: loading, resultGrid: grid, validationRiskType: type, setValidationRiskType: setType, handleDownload: () => alert('downloading csv') }, void 0));
 }
 //# sourceMappingURL=email-validation.stories.js.map

package/lib/components/settings/email-validation/email-validation.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"email-validation.stories.js","sourceRoot":"","sources":["../../../../src/components/settings/email-validation/email-validation.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"email-validation.stories.js","sourceRoot":"","sources":["../../../../src/components/settings/email-validation/email-validation.stories.tsx"],"names":[],"mappings":"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"}

package/lib/components/settings/email-validation/index.d.ts

@@ -8,25 +8,25 @@ export interface EmailValidationTableRecord<T> {
     result: T;
     dateAdded?: Date | undefined;
 }
-export interface EmailValidationProps<TEmailValidationType extends string = string, TEmailValidationResult extends string = string> {
+export interface EmailValidationProps<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> {
+interface EmailValidationHocOptions<TEmailValidationType extends string | number = string, TEmailValidationResult extends string | number = string> {
     resultToText: Map<TEmailValidationResult, string>;
     levelTypeMap: {
         high: TEmailValidationType;
         medium: TEmailValidationType;
         low: TEmailValidationType;
     };
-    levelsResultMap: Map<TEmailValidationType, TEmailValidationResult[]>;
+    levelResultMap: Map<TEmailValidationType, TEmailValidationResult[]>;
     resultToTooltipText: Map<TEmailValidationResult, string>;
     TenantDateCell: FC<TableCellProps>;
 }
-export declare function emailValidationHoc<TEmailValidationType extends string = string, TEmailValidationResult extends string = string>({ resultToText, levelTypeMap, resultToTooltipText, levelsResultMap, TenantDateCell, }: EmailValidationHocOptions<TEmailValidationType, TEmailValidationResult>): ({ className, handleDownload, loading, resultGrid, setValidationRiskType, validationRiskType, }: EmailValidationProps<TEmailValidationType>) => JSX.Element;
+export declare function emailValidationHoc<TEmailValidationType extends string | number = string, TEmailValidationResult extends string | number = string>({ resultToText, levelTypeMap, resultToTooltipText, levelResultMap, TenantDateCell, }: EmailValidationHocOptions<TEmailValidationType, TEmailValidationResult>): ({ className, handleDownload, loading, resultGrid, setValidationRiskType, validationRiskType, }: EmailValidationProps<TEmailValidationType, TEmailValidationResult>) => JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/components/settings/email-validation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/email-validation/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAe,MAAM,OAAO,CAAC;AAgBxC,OAAO,EAMH,UAAU,EACV,cAAc,EACjB,MAAM,qBAAqB,CAAC;AAS7B,MAAM,WAAW,0BAA0B,CAAC,CAAC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,MAAM,EAAE,CAAC,CAAC;IACV,SAAS,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,oBAAoB,CACjC,oBAAoB,SAAS,MAAM,GAAG,MAAM,EAC5C,sBAAsB,SAAS,MAAM,GAAG,MAAM;IAE9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,UAAU,CAAC,0BAA0B,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAC3E,kBAAkB,EAAE,oBAAoB,CAAC;IACzC,cAAc,IAAI,IAAI,CAAC;IACvB,qBAAqB,CAAC,IAAI,EAAE,oBAAoB,GAAG,IAAI,CAAC;CAC3D;AAED,UAAU,yBAAyB,CAC/B,oBAAoB,SAAS,MAAM,GAAG,MAAM,EAC5C,sBAAsB,SAAS,MAAM,GAAG,MAAM;IAE9C,YAAY,EAAE,GAAG,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;IAClD,YAAY,EAAE;QACV,IAAI,EAAE,oBAAoB,CAAC;QAC3B,MAAM,EAAE,oBAAoB,CAAC;QAC7B,GAAG,EAAE,oBAAoB,CAAC;KAC7B,CAAC;IACF,eAAe,EAAE,GAAG,CAAC,oBAAoB,EAAE,sBAAsB,EAAE,CAAC,CAAC;IACrE,mBAAmB,EAAE,GAAG,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;IACzD,cAAc,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC;CACtC;AAED,wBAAgB,kBAAkB,CAC9B,oBAAoB,SAAS,MAAM,GAAG,MAAM,EAC5C,sBAAsB,SAAS,MAAM,GAAG,MAAM,EAChD,EACE,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,cAAc,GACjB,EAAE,yBAAyB,CAAC,oBAAoB,EAAE,sBAAsB,CAAC,oGAyBnE,qBAAqB,oBAAoB,CAAC,iBAiKhD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/email-validation/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAe,MAAM,OAAO,CAAC;AAgBxC,OAAO,EAMH,UAAU,EACV,cAAc,EACjB,MAAM,qBAAqB,CAAC;AAS7B,MAAM,WAAW,0BAA0B,CAAC,CAAC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,MAAM,EAAE,CAAC,CAAC;IACV,SAAS,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,oBAAoB,CACjC,oBAAoB,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,EACrD,sBAAsB,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM;IAEvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,UAAU,CAAC,0BAA0B,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAC3E,kBAAkB,CAAC,EAAE,oBAAoB,CAAC;IAC1C,cAAc,IAAI,IAAI,CAAC;IACvB,qBAAqB,CAAC,IAAI,EAAE,oBAAoB,GAAG,IAAI,CAAC;CAC3D;AAED,UAAU,yBAAyB,CAC/B,oBAAoB,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,EACrD,sBAAsB,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM;IAEvD,YAAY,EAAE,GAAG,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;IAClD,YAAY,EAAE;QACV,IAAI,EAAE,oBAAoB,CAAC;QAC3B,MAAM,EAAE,oBAAoB,CAAC;QAC7B,GAAG,EAAE,oBAAoB,CAAC;KAC7B,CAAC;IACF,cAAc,EAAE,GAAG,CAAC,oBAAoB,EAAE,sBAAsB,EAAE,CAAC,CAAC;IACpE,mBAAmB,EAAE,GAAG,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;IACzD,cAAc,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC;CACtC;AAED,wBAAgB,kBAAkB,CAC9B,oBAAoB,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,EACrD,sBAAsB,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,EACzD,EACE,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,cAAc,GACjB,EAAE,yBAAyB,CAAC,oBAAoB,EAAE,sBAAsB,CAAC,oGAyBnE,qBAAqB,oBAAoB,EAAE,sBAAsB,CAAC,iBAoKxE"}

package/lib/components/settings/email-validation/index.js

@@ -6,7 +6,7 @@ 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, } from '@servicetitan/table';
 import { ResultDefinitionsModal } from '../result-definitions-modal';
-export function emailValidationHoc({ resultToText, levelTypeMap, resultToTooltipText, levelsResultMap, TenantDateCell, }) {
+export function emailValidationHoc({ resultToText, levelTypeMap, resultToTooltipText, levelResultMap, TenantDateCell, }) {
     const ResultColumnMenuFilter = multiSelectColumnMenuFilter([...resultToText.keys()], result => resultToText.get(result));
     const ResultCell = props => {
         const { result } = props.dataItem;
@@ -30,7 +30,8 @@ export function emailValidationHoc({ resultToText, levelTypeMap, resultToTooltip
         };
         const getResultsItemsForLevel = (level) => {
             var _a;
-            return (_a = levelsResultMap.get(level)) === null || _a === void 0 ? void 0 : _a.map(r => _jsx("div", { children: r }, r));
+            return (_a = levelResultMap
+                .get(level)) === null || _a === void 0 ? void 0 : _a.map(r => resultToText.get(r)).map(r => _jsx("div", { children: r }, r));
         };
         return (_jsxs(Container, Object.assign({ className: classnames(className, 'p-b-5 qa-email-validation') }, { children: [_jsxs(Stack, Object.assign({ justifyContent: "space-between", alignItems: "center", className: "m-b-2" }, { children: [_jsx(Text, Object.assign({ size: 4, className: "m-r-3" }, { children: "Email Validation" }), void 0), _jsx(Button, Object.assign({ small: true, primary: true, onClick: handleDownload, className: "qa-email-validation-download-csv", iconName: "file_download", iconPosition: "left" }, { children: "Download CSV" }), void 0)] }), void 0), _jsxs(Layout, Object.assign({ type: "support", direction: "right" }, { children: [_jsx(Layout.Section, { children: _jsx(Text, Object.assign({ size: 2, className: "m-b-4 c-neutral-90" }, { children: "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 \u201CSent\u201D." }), void 0) }, void 0), _jsx(Layout.Section, {}, void 0)] }), void 0), _jsxs(Grid, Object.assign({ relaxed: true }, { children: [_jsx(Grid.Column, Object.assign({ width: 3 }, { children: _jsxs(Card, { children: [_jsxs(Card.Section, Object.assign({ light: true }, { children: [_jsx(Text, Object.assign({ bold: true, size: 3, className: "m-b-1" }, { children: "Set Your Preference" }), void 0), _jsx(Text, Object.assign({ size: 2, className: "m-b-1" }, { children: "Choose what level you want to enable for auto-suppression." }), void 0), _jsx(Link, Object.assign({ primary: true, onClick: handleClickLearnMore, className: "qa-email-validation-learn-more" }, { children: "Learn More" }), void 0)] }), void 0), _jsx(Card.Section, { children: _jsx(Form.Radio, { label: _jsxs("div", Object.assign({ className: "m-l-1" }, { children: [_jsxs(Text, Object.assign({ bold: true, size: 3, className: "m-b-1" }, { children: ["High", _jsx("span", Object.assign({ className: "c-neutral-90 fs-1 m-l-1" }, { children: "(recommended)" }), void 0)] }), void 0), _jsx(BodyText, Object.assign({ size: "small", className: "c-neutral-90" }, { children: getResultsItemsForLevel(levelTypeMap.high) }), void 0)] }), void 0), checked: validationRiskType === levelTypeMap.high, onChange: handleCheck(levelTypeMap.high), className: "qa-email-validation-high" }, void 0) }, void 0), _jsx(Card.Section, { children: _jsx(Form.Radio, { label: _jsxs("div", Object.assign({ className: "m-l-1" }, { children: [_jsx(Text, Object.assign({ bold: true, size: 3, className: "m-b-1" }, { children: "Medium" }), void 0), _jsx(BodyText, Object.assign({ size: "small", className: "c-neutral-90" }, { children: getResultsItemsForLevel(levelTypeMap.medium) }), void 0)] }), void 0), checked: validationRiskType === levelTypeMap.medium, onChange: handleCheck(levelTypeMap.medium), className: "qa-email-validation-medium" }, void 0) }, void 0), _jsx(Card.Section, { children: _jsx(Form.Radio, { label: _jsxs("div", Object.assign({ className: "m-l-1" }, { children: [_jsx(Text, Object.assign({ bold: true, size: 3, className: "m-b-1" }, { children: "Low" }), void 0), _jsx(BodyText, Object.assign({ size: "small", className: "c-neutral-90" }, { children: getResultsItemsForLevel(levelTypeMap.low) }), void 0)] }), void 0), checked: validationRiskType === levelTypeMap.low, onChange: handleCheck(levelTypeMap.low), className: "qa-email-validation-low" }, void 0) }, void 0)] }, void 0) }), void 0), _jsx(Grid.Column, Object.assign({ width: 9 }, { children: _jsxs(Table, Object.assign({ tableState: resultGrid, sortable: true, loading: loading, className: "qa-email-validation-table", scrollable: "none" }, { children: [_jsx(TableColumn, { field: "email", title: "Email Address", columnMenu: StandardColumnMenuFilter }, void 0), _jsx(TableColumn, { field: "result", title: "Result", cell: ResultCell, columnMenu: ResultColumnMenuFilter }, void 0), _jsx(TableColumn, { field: "dateAdded", title: "Date Added", cell: TenantDateCell, columnMenu: DateRangeColumnMenuFilter }, void 0)] }), void 0) }), void 0)] }), void 0), localStore.open && _jsx(ResultDefinitionsModal, { onClose: handleClose }, void 0)] }), void 0));
     }

package/lib/components/settings/email-validation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/settings/email-validation/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/settings/email-validation/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/settings/form-errors-list/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { FormState, ValidatableMapOrArray } from 'formstate';
+export interface FormErrorsListProps<T extends ValidatableMapOrArray = ValidatableMapOrArray> {
+    form: FormState<T>;
+}
+export declare const FormErrorsList: FC<FormErrorsListProps>;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/settings/form-errors-list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/form-errors-list/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAyB,SAAS,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAIpF,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,qBAAqB,GAAG,qBAAqB;IACxF,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA4BjD,CAAC"}

package/lib/components/settings/form-errors-list/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import { Banner } from '@servicetitan/design-system';
+export const FormErrorsList = observer(({ form }) => {
+    const getErrors = () => {
+        return Object.entries(form.$).map(([key, field]) => {
+            return field.hasError ? (_jsx("li", Object.assign({ className: "qa-settings-email-error-list-item" }, { children: field.error }), key)) : null;
+        });
+    };
+    if (!form.hasError) {
+        return null;
+    }
+    return (_jsxs(Banner, Object.assign({ status: "critical", title: "Missing Fields", icon: true, className: "m-b-2 qa-settings-email-error" }, { children: [_jsx("p", { children: "Please complete all required fields:" }, void 0), _jsx("ul", Object.assign({ className: "qa-settings-email-error-list" }, { children: getErrors() }), void 0)] }), void 0));
+});
+//# sourceMappingURL=index.js.map

package/lib/components/settings/form-errors-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/settings/form-errors-list/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAMrD,MAAM,CAAC,MAAM,cAAc,GAA4B,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAuB,EAAE,EAAE;IAC9F,MAAM,SAAS,GAAG,GAAG,EAAE;QACnB,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAC7B,CAAC,CAAC,GAAG,EAAE,KAAK,CAAuD,EAAE,EAAE;YACnE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACpB,2BAAc,SAAS,EAAC,mCAAmC,gBACtD,KAAK,CAAC,KAAK,KADP,GAAG,CAEP,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;QACb,CAAC,CACJ,CAAC;IACN,CAAC,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAChB,OAAO,IAAI,CAAC;KACf;IAED,OAAO,CACH,MAAC,MAAM,kBACH,MAAM,EAAC,UAAU,EACjB,KAAK,EAAC,gBAAgB,EACtB,IAAI,QACJ,SAAS,EAAC,+BAA+B,iBAEzC,uEAA2C,EAC3C,2BAAI,SAAS,EAAC,8BAA8B,gBAAE,SAAS,EAAE,YAAM,aAC1D,CACZ,CAAC;AACN,CAAC,CAAC,CAAC"}

package/lib/components/settings/index.d.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/lib/components/settings/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/settings/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/settings/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC"}

package/lib/components/settings/index.js

@@ -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/lib/components/settings/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/settings/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/settings/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC"}

package/lib/components/settings/opt-out-message/index.d.ts

@@ -1,11 +1,11 @@
 import { FC } from 'react';
-import { CheckboxFieldState, InputFieldState } from '@servicetitan/form';
+import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
 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/lib/components/settings/opt-out-message/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/opt-out-message/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAmC,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AASzE,MAAM,WAAW,kBAAkB;IAC/B,WAAW,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,MAAM,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9B,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACpC,WAAW,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,OAAO,EAAE,kBAAkB,CAAC;IAC5B,sBAAsB,EAAE,kBAAkB,CAAC;CAC9C;AACD,MAAM,WAAW,kBAAkB;IAC/B,SAAS,EAAE,kBAAkB,CAAC;IAC9B,mBAAmB,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CAChD;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA8HhD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/opt-out-message/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAmC,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAS7F,MAAM,WAAW,kBAAkB;IAC/B,WAAW,EAAE,eAAe,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACjD,MAAM,EAAE,eAAe,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5C,IAAI,EAAE,kBAAkB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC7C,UAAU,EAAE,eAAe,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAChD,WAAW,EAAE,eAAe,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACjD,OAAO,EAAE,kBAAkB,CAAC;IAC5B,sBAAsB,EAAE,kBAAkB,CAAC;CAC9C;AACD,MAAM,WAAW,kBAAkB;IAC/B,SAAS,EAAE,kBAAkB,CAAC;IAC9B,mBAAmB,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CAChD;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA8HhD,CAAC"}

package/lib/components/settings/opt-out-message/opt-out-message.stories.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-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 '.';
@@ -23,7 +23,7 @@ let OptOutStore = class OptOutStore {
             value: 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),

package/lib/components/settings/opt-out-message/opt-out-message.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"opt-out-message.stories.js","sourceRoot":"","sources":["../../../../src/components/settings/opt-out-message/opt-out-message.stories.tsx"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,aAAa,IAAI,SAAS,EAAE,MAAM,GAAG,CAAC;AAE/C,eAAe;IACX,KAAK,EAAE,uCAAuC;IAC9C,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,EAAE;CACjB,CAAC;AAGF,IAAM,WAAW,GAAjB,MAAM,WAAW;IAAjB;QACI;;;;mBAAO,IAAI,SAAS,CAAC;gBACjB,WAAW,EAAE,IAAI,eAAe,CAAC,UAAU,CAAC;gBAC5C,MAAM,EAAE,IAAI,eAAe,CAAC,mBAAmB,CAAC;gBAChD,IAAI,EAAE,IAAI,eAAe,CAAC,sBAAsB,CAAC;gBACjD,UAAU,EAAE,IAAI,eAAe,CAAC,KAAK,CAAC;gBACtC,WAAW,EAAE,IAAI,eAAe,CAAC,CAAC,CAAC;gBACnC,OAAO,EAAE,IAAI,kBAAkB,CAAC,IAAI,CAAC;gBACrC,sBAAsB,EAAE,IAAI,kBAAkB,CAAC,IAAI,CAAC;aACvD,CAAC;WAAC;IACP,CAAC;CAAA,CAAA;AAVK,WAAW;IADhB,UAAU,EAAE;GACP,WAAW,CAUhB;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAAC;IACjC,UAAU,EAAE,CAAC,WAAW,CAAC;CAC5B,CAAC,CAAC,GAAG,EAAE;IACJ,MAAM,CAAC,KAAK,CAAC,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;IAE7C,OAAO,KAAC,SAAS,IAAC,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,WAAI,CAAC;AAClD,CAAC,CAAC,CAAC"}
+{"version":3,"file":"opt-out-message.stories.js","sourceRoot":"","sources":["../../../../src/components/settings/opt-out-message/opt-out-message.stories.tsx"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC7F,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,aAAa,IAAI,SAAS,EAAE,MAAM,GAAG,CAAC;AAE/C,eAAe;IACX,KAAK,EAAE,uCAAuC;IAC9C,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,EAAE;CACjB,CAAC;AAGF,IAAM,WAAW,GAAjB,MAAM,WAAW;IAAjB;QACI;;;;mBAAO,IAAI,SAAS,CAAC;gBACjB,WAAW,EAAE,IAAI,eAAe,CAAC,UAAU,CAAC;gBAC5C,MAAM,EAAE,IAAI,eAAe,CAAC,mBAAmB,CAAC;gBAChD,IAAI,EAAE,IAAI,kBAAkB,CAAC,sBAAsB,CAAC;gBACpD,UAAU,EAAE,IAAI,eAAe,CAAC,KAAK,CAAC;gBACtC,WAAW,EAAE,IAAI,eAAe,CAAC,CAAC,CAAC;gBACnC,OAAO,EAAE,IAAI,kBAAkB,CAAC,IAAI,CAAC;gBACrC,sBAAsB,EAAE,IAAI,kBAAkB,CAAC,IAAI,CAAC;aACvD,CAAC;WAAC;IACP,CAAC;CAAA,CAAA;AAVK,WAAW;IADhB,UAAU,EAAE;GACP,WAAW,CAUhB;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAAC;IACjC,UAAU,EAAE,CAAC,WAAW,CAAC;CAC5B,CAAC,CAAC,GAAG,EAAE;IACJ,MAAM,CAAC,KAAK,CAAC,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;IAE7C,OAAO,KAAC,SAAS,IAAC,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,WAAI,CAAC;AAClD,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,13 +1,9 @@
 {
     "name": "@servicetitan/mpa-components",
-    "version": "0.2.2",
+    "version": "0.4.0",
     "description": "",
     "main": "./lib/index.js",
     "typings": "./lib/index.d.ts",
-    "dependencies": {
-        "classnames": "~2.3.1",
-        "lodash": "4.17.21"
-    },
     "peerDependencies": {
         "@servicetitan/confirm": "~21.4.1",
         "@servicetitan/design-system": "~10.1.1",
@@ -22,9 +18,7 @@
     },
     "devDependencies": {
         "@testing-library/react": "^12.0.0",
-        "@types/history": "~4.7.7",
-        "@types/lodash": "^4.14.182",
-        "@types/react": "~17.0.15"
+        "@types/history": "~4.7.7"
     },
     "publishConfig": {
         "access": "restricted"
@@ -32,5 +26,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "75d806e799cb1fd2aee0714ba06a6753cd478c12"
+    "gitHead": "fba3f9a9f4e8abe3ac19647eaa2b0069451d273c"
 }

package/src/components/settings/company-details/index.tsx

@@ -1,5 +1,6 @@
 import { FC, Fragment, ReactNode } from 'react';
 import { observer } from 'mobx-react';
+import { FieldState } from 'formstate';
 
 import { Form, Link } from '@servicetitan/design-system';
 import { NumberInput, InputFieldState } from '@servicetitan/form';
@@ -7,15 +8,15 @@ import { NumberInput, InputFieldState } from '@servicetitan/form';
 import { SettingsSection } from '../settings-section';
 export interface CompanyDetailsProps {
     formState: {
-        city: InputFieldState<string>;
-        companyEmail: InputFieldState<string>;
-        companyName: InputFieldState<string>;
-        state: InputFieldState<string>;
-        street: InputFieldState<string>;
-        tagline: InputFieldState<string>;
-        unit: InputFieldState<string>;
-        yearEstablished: InputFieldState<number>;
-        zipCode: InputFieldState<string>;
+        city: InputFieldState<string | undefined>;
+        companyEmail: InputFieldState<string | undefined>;
+        companyName: InputFieldState<string | undefined>;
+        state: InputFieldState<string | undefined>;
+        street: InputFieldState<string | undefined>;
+        tagline: InputFieldState<string | undefined>;
+        unit: InputFieldState<string | undefined>;
+        yearEstablished: FieldState<number | undefined>;
+        zipCode: InputFieldState<string | undefined>;
     };
     logoPicker?: ReactNode;
     sectionDescription?: string | JSX.Element;

package/src/components/settings/company-email-footer/company-email-footer.stories.tsx

@@ -1,4 +1,4 @@
-import { InputFieldState } from '@servicetitan/form';
+import { InputFieldState, TextAreaFieldState } from '@servicetitan/form';
 import { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
 import { FormState } from 'formstate';
 
@@ -13,7 +13,7 @@ export default {
 @injectable()
 class CompanyEmailStore {
     form = new FormState({
-        legalCopy: new InputFieldState('Legal copy example'),
+        legalCopy: new TextAreaFieldState('Legal copy example'),
         license: new InputFieldState('License'),
         copyrightText: new InputFieldState('Copyritght 2022'),
     });

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

@@ -2,15 +2,15 @@ import { FC, Fragment } from 'react';
 import { observer } from 'mobx-react';
 
 import { Form, Text } from '@servicetitan/design-system';
-import { InputFieldState } from '@servicetitan/form';
+import { InputFieldState, TextAreaFieldState } from '@servicetitan/form';
 
 import { SettingsSection } from '../settings-section';
 
 export interface CompanyEmailFooterProps {
     formState: {
-        legalCopy: InputFieldState<string>;
-        license: InputFieldState<string>;
-        copyrightText: InputFieldState<string>;
+        legalCopy: TextAreaFieldState<string | undefined>;
+        license: InputFieldState<string | undefined>;
+        copyrightText: InputFieldState<string | undefined>;
     };
 }
 

package/src/components/settings/company-email-reply-to/index.tsx

@@ -7,7 +7,7 @@ import { Form } from '@servicetitan/design-system';
 import { SettingsSection } from '../settings-section';
 
 export interface CompanyEmailReplyToProps {
-    replyToEmail: InputFieldState<string>;
+    replyToEmail: InputFieldState<string | undefined>;
 }
 
 export const CompanyEmailReplyTo: FC<CompanyEmailReplyToProps> = observer(({ replyToEmail }) => {

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

@@ -2,11 +2,11 @@ import { InputFieldState } from '@servicetitan/form';
 import { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
 import { FormState } from 'formstate';
 
-import { CompanyEmailSender as Component } from '.';
+import { CompanyEmailSender as Simple, CompanyEmailSenderCustomDomain as Custom } from '.';
 
 export default {
     title: 'MPA Components/settings/CompanyEmailSender',
-    component: Component,
+    component: Simple,
     parameters: {},
 };
 
@@ -19,8 +19,16 @@ class CompanyEmailSenderStore {
     });
 }
 
+export const CompanyEmailSenderCustomDomain = provide({ singletons: [CompanyEmailSenderStore] })(
+    () => {
+        const [store] = useDependencies(CompanyEmailSenderStore);
+
+        return <Custom formState={store.form.$} senderTld="tld.com" />;
+    }
+);
+
 export const CompanyEmailSender = provide({ singletons: [CompanyEmailSenderStore] })(() => {
     const [store] = useDependencies(CompanyEmailSenderStore);
 
-    return <Component formState={store.form.$} senderTld="com" />;
+    return <Simple senderName={store.form.$.senderName} senderEmail={store.form.$.senderEmail} />;
 });

package/src/components/settings/company-email-sender/custom-domain-sender.tsx

@@ -0,0 +1,129 @@
+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 | undefined>;
+        senderDomain: InputFieldState<string | undefined>;
+        senderEmail: InputFieldState<string | undefined>;
+    };
+
+    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>
+        );
+    }
+);