@servicetitan/mpa-components 0.5.0 → 1.0.0

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

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
+import { LayoutProps } from '@servicetitan/design-system';
 export interface OptOutMessageState {
     subjectLine: InputFieldState<string | undefined>;
     header: InputFieldState<string | undefined>;
@@ -11,6 +12,8 @@ export interface OptOutMessageState {
 }
 export interface OptOutMessageProps {
     formState: OptOutMessageState;
+    layout?: LayoutProps['type'];
+    className?: string;
     onHandleClickEnable?(checked: boolean): void;
 }
 export declare const OptOutMessage: FC<OptOutMessageProps>;

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,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"}
+{"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;AAC7F,OAAO,EAAgB,WAAW,EAA6B,MAAM,6BAA6B,CAAC;AAQnG,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,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CAChD;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA+HhD,CAAC"}

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

@@ -7,7 +7,7 @@ import { useConfirm } from '@servicetitan/confirm';
 import { SettingsSection } from '../settings-section';
 import { OptOutEmailPreview } from '../email-preview/opt-out-email-preview';
 import * as Styles from './opt-out-message.module.less';
-export const OptOutMessage = observer(({ onHandleClickEnable, formState }) => {
+export const OptOutMessage = observer(({ onHandleClickEnable, formState, layout, className }) => {
     const { subjectLine, header, body, buttonText, monthsLimit, enabled, autoSuppressionEnabled, } = formState;
     const [isPreviewOpen, setIsPreviewOpen] = useState(false);
     const openPreview = useCallback(() => setIsPreviewOpen(true), [setIsPreviewOpen]);
@@ -17,6 +17,6 @@ export const OptOutMessage = observer(({ onHandleClickEnable, formState }) => {
         enabled.onChange(checked);
     };
     const [Confirm, handleConfirmed] = useConfirm(handleClickEnable);
-    return (_jsxs(SettingsSection, Object.assign({ className: Styles.outOutMessage, qaPrefix: "qa-opt-out-message", title: "Opt-Out Message", text: _jsxs(Fragment, { children: [_jsxs("div", { children: ["If customers haven\u2019t ", _jsx("b", { children: "opened" }, void 0), " one of your emails in a set time frame, you can send an opt-out message to allow them to set their email preferences."] }, void 0), _jsx(ToggleSwitch, { label: "Enable", onChange: handleConfirmed, checked: enabled.value, className: "m-t-2 qa-opt-out-message-enable" }, void 0)] }, void 0) }, { children: [_jsx(Text, Object.assign({ bold: true, className: "m-b-2" }, { children: "Opt-Out Email Content" }), void 0), _jsxs(Form, Object.assign({ className: "m-b-0-i" }, { children: [_jsx(Form.Input, { className: "m-b-2-i qa-opt-out-message-subject-line", value: subjectLine.value, onChange: subjectLine.onChangeHandler, error: subjectLine.hasError, label: "Subject Line", fluid: true, disabled: !enabled.value }, void 0), _jsx(Form.Input, { className: "m-b-2-i qa-opt-out-message-header", value: header.value, onChange: header.onChangeHandler, error: header.hasError, label: "Header", fluid: true, disabled: !enabled.value }, void 0), _jsx(Form.TextArea, { className: "m-b-2-i qa-opt-out-message-body-copy", label: "Body Copy", value: body.value, onChange: body.onChangeHandler, error: body.hasError, rows: 2, disabled: !enabled.value }, void 0), _jsx(Form.Input, { className: classnames(Styles.buttonInput, 'm-b-3-i qa-opt-out-message-button-text'), value: buttonText.value, onChange: buttonText.onChangeHandler, error: buttonText.hasError, label: "Button Text", disabled: !enabled.value }, void 0), _jsx(Button, Object.assign({ className: "qa-opt-out-message-preview-email", primary: true, onClick: openPreview, outline: true, small: true, disabled: !enabled.value }, { children: "Preview Email" }), void 0), _jsx("hr", {}, void 0)] }), void 0), _jsxs(Stack, Object.assign({ alignItems: "center", wrap: "wrap" }, { children: [_jsx(Text, Object.assign({ className: "m-b-1" }, { children: "Send when a recipient hasn\u2019t opened an email in" }), void 0), _jsx(Form.Input, { className: classnames(Styles.input, 'qa-opt-out-message-months', 'm-b-0'), value: monthsLimit.value, onChange: monthsLimit.onChangeHandler, error: monthsLimit.hasError, disabled: !enabled.value }, void 0), _jsx(Text, Object.assign({ className: "m-b-1" }, { children: "months." }), void 0)] }), void 0), _jsx(Form.Checkbox, { className: classnames('m-t-2-i', 'qa-opt-out-message-auto-suppress'), checked: autoSuppressionEnabled.value, onChange: autoSuppressionEnabled.onChangeHandler, disabled: !enabled.value, label: "Auto-suppress dormant emails" }, void 0), _jsx(Confirm, { title: "Disable Opt-Out Messaging", message: "Opt-Out messaging helps you keep dormant emails out of your audiences. Disabling it could potentially lead to worse email performance. Are you sure?", when: enabled.value }, void 0), _jsx(OptOutEmailPreview, Object.assign({}, formState, { open: isPreviewOpen, onClose: closePreview }), void 0)] }), void 0));
+    return (_jsxs(SettingsSection, Object.assign({ layout: layout, className: classnames(Styles.outOutMessage, className), qaPrefix: "qa-opt-out-message", title: "Opt-Out Message", text: _jsxs(Fragment, { children: [_jsxs("div", { children: ["If customers haven\u2019t ", _jsx("b", { children: "opened" }, void 0), " one of your emails in a set time frame, you can send an opt-out message to allow them to set their email preferences."] }, void 0), _jsx(ToggleSwitch, { label: "Enable", onChange: handleConfirmed, checked: enabled.value, className: "m-t-2 qa-opt-out-message-enable" }, void 0)] }, void 0) }, { children: [_jsx(Text, Object.assign({ bold: true, className: "m-b-2" }, { children: "Opt-Out Email Content" }), void 0), _jsxs(Form, Object.assign({ className: "m-b-0-i" }, { children: [_jsx(Form.Input, { className: "m-b-2-i qa-opt-out-message-subject-line", value: subjectLine.value, onChange: subjectLine.onChangeHandler, error: subjectLine.hasError, label: "Subject Line", fluid: true, disabled: !enabled.value }, void 0), _jsx(Form.Input, { className: "m-b-2-i qa-opt-out-message-header", value: header.value, onChange: header.onChangeHandler, error: header.hasError, label: "Header", fluid: true, disabled: !enabled.value }, void 0), _jsx(Form.TextArea, { className: "m-b-2-i qa-opt-out-message-body-copy", label: "Body Copy", value: body.value, onChange: body.onChangeHandler, error: body.hasError, rows: 2, disabled: !enabled.value }, void 0), _jsx(Form.Input, { className: classnames(Styles.buttonInput, 'm-b-3-i qa-opt-out-message-button-text'), value: buttonText.value, onChange: buttonText.onChangeHandler, error: buttonText.hasError, label: "Button Text", disabled: !enabled.value }, void 0), _jsx(Button, Object.assign({ className: "qa-opt-out-message-preview-email", primary: true, onClick: openPreview, outline: true, small: true, disabled: !enabled.value }, { children: "Preview Email" }), void 0), _jsx("hr", {}, void 0)] }), void 0), _jsxs(Stack, Object.assign({ alignItems: "center", wrap: "wrap" }, { children: [_jsx(Text, Object.assign({ className: "m-b-1" }, { children: "Send when a recipient hasn\u2019t opened an email in" }), void 0), _jsx(Form.Input, { className: classnames(Styles.input, 'qa-opt-out-message-months', 'm-b-0'), value: monthsLimit.value, onChange: monthsLimit.onChangeHandler, error: monthsLimit.hasError, disabled: !enabled.value }, void 0), _jsx(Text, Object.assign({ className: "m-b-1" }, { children: "months." }), void 0)] }), void 0), _jsx(Form.Checkbox, { className: classnames('m-t-2-i', 'qa-opt-out-message-auto-suppress'), checked: autoSuppressionEnabled.value, onChange: autoSuppressionEnabled.onChangeHandler, disabled: !enabled.value, label: "Auto-suppress dormant emails" }, void 0), _jsx(Confirm, { title: "Disable Opt-Out Messaging", message: "Opt-Out messaging helps you keep dormant emails out of your audiences. Disabling it could potentially lead to worse email performance. Are you sure?", when: enabled.value }, void 0), _jsx(OptOutEmailPreview, Object.assign({}, formState, { open: isPreviewOpen, onClose: closePreview }), void 0)] }), void 0));
 });
 //# sourceMappingURL=index.js.map

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

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

package/lib/components/settings/result-definitions-modal/row.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Grid, Text, Tag } from '@servicetitan/design-system';
-import tokens from '@servicetitan/tokens';
+import { core as tokens } from '@servicetitan/tokens';
 export var RiskType;
 (function (RiskType) {
     RiskType[RiskType["Medium"] = 0] = "Medium";
@@ -9,8 +9,8 @@ export var RiskType;
 })(RiskType || (RiskType = {}));
 const riskTypeToColor = new Map([
     [RiskType.Medium, 'warning'],
-    [RiskType.High, tokens.colorRed500],
-    [RiskType.VeryHigh, tokens.colorRed600],
+    [RiskType.High, tokens.default.tokens.colorRed500],
+    [RiskType.VeryHigh, tokens.default.tokens.colorRed600],
 ]);
 const riskTypeToText = new Map([
     [RiskType.Medium, 'Medium'],

package/lib/components/settings/result-definitions-modal/row.js.map

@@ -1 +1 @@
-{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../../src/components/settings/result-definitions-modal/row.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAE1C,MAAM,CAAN,IAAY,QAIX;AAJD,WAAY,QAAQ;IAChB,2CAAM,CAAA;IACN,uCAAI,CAAA;IACJ,+CAAQ,CAAA;AACZ,CAAC,EAJW,QAAQ,KAAR,QAAQ,QAInB;AAED,MAAM,eAAe,GAAG,IAAI,GAAG,CAAmB;IAC9C,CAAC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC5B,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC;IACnC,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,WAAW,CAAC;CAC1C,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,IAAI,GAAG,CAAmB;IAC7C,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC;IAC3B,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACvB,CAAC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC;CACnC,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACnE,MAAC,IAAI,kBAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAC,OAAO,iBAC/B,KAAC,IAAI,CAAC,MAAM,cACR,KAAC,IAAI,kBAAC,IAAI,EAAE,CAAC,EAAE,IAAI,sBACd,MAAM,YACJ,WACG,EACd,KAAC,IAAI,CAAC,MAAM,cACR,KAAC,GAAG,kBAAC,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,OAAO,sBACzC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YACvB,WACI,EACd,KAAC,IAAI,CAAC,MAAM,cACR,KAAC,IAAI,kBAAC,IAAI,EAAE,CAAC,EAAE,IAAI,sBACd,cAAc,YACZ,WACG,aACX,CACV,CAAC"}
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../../src/components/settings/result-definitions-modal/row.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAN,IAAY,QAIX;AAJD,WAAY,QAAQ;IAChB,2CAAM,CAAA;IACN,uCAAI,CAAA;IACJ,+CAAQ,CAAA;AACZ,CAAC,EAJW,QAAQ,KAAR,QAAQ,QAInB;AAED,MAAM,eAAe,GAAG,IAAI,GAAG,CAAmB;IAC9C,CAAC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC5B,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC;IAClD,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC;CACzD,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,IAAI,GAAG,CAAmB;IAC7C,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC;IAC3B,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACvB,CAAC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC;CACnC,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACnE,MAAC,IAAI,kBAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAC,OAAO,iBAC/B,KAAC,IAAI,CAAC,MAAM,cACR,KAAC,IAAI,kBAAC,IAAI,EAAE,CAAC,EAAE,IAAI,sBACd,MAAM,YACJ,WACG,EACd,KAAC,IAAI,CAAC,MAAM,cACR,KAAC,GAAG,kBAAC,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,OAAO,sBACzC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YACvB,WACI,EACd,KAAC,IAAI,CAAC,MAAM,cACR,KAAC,IAAI,kBAAC,IAAI,EAAE,CAAC,EAAE,IAAI,sBACd,cAAc,YACZ,WACG,aACX,CACV,CAAC"}

package/lib/components/settings/settings-section/index.d.ts

@@ -1,10 +1,12 @@
 import { ReactNode, FC } from 'react';
+import { LayoutProps } from '@servicetitan/design-system';
 export interface SectionProps {
-    title: string;
+    title: ReactNode;
     text?: JSX.Element | string;
     children: ReactNode;
     qaPrefix?: string;
     className?: string;
+    layout?: LayoutProps['type'];
 }
 export declare const SettingsSection: FC<SectionProps>;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/settings/settings-section/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/settings-section/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKtC,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,YAAY,CAoB5C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/settings-section/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAsB,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE9E,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAChC;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,YAAY,CAwB5C,CAAC"}

package/lib/components/settings/settings-section/index.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
 import { Text, Card, Layout } from '@servicetitan/design-system';
-export const SettingsSection = observer(({ title, text, children, qaPrefix, className = '' }) => (_jsxs(Layout, Object.assign({ type: "support", direction: "left", className: classNames(qaPrefix, className) }, { children: [_jsxs(Layout.Section, { children: [_jsx(Text, Object.assign({ size: 3, bold: true, className: `${qaPrefix}-title` }, { children: title }), void 0), text && (_jsx(Text, Object.assign({ size: 2, subdued: true, className: `${qaPrefix}-text` }, { children: text }), void 0))] }, void 0), _jsx(Layout.Section, { children: _jsx(Card, Object.assign({ raised: true }, { children: _jsx(Card.Section, Object.assign({ className: `${qaPrefix}-content` }, { children: children }), void 0) }), void 0) }, void 0)] }), void 0)));
+export const SettingsSection = observer(({ title, text, children, qaPrefix, className = '', layout = 'support' }) => (_jsxs(Layout, Object.assign({ type: layout, direction: "left", className: classNames(qaPrefix, className) }, { children: [_jsxs(Layout.Section, { children: [typeof title === 'string' ? (_jsx(Text, Object.assign({ size: 3, bold: true, className: `${qaPrefix}-title` }, { children: title }), void 0)) : (title), text && (_jsx(Text, Object.assign({ size: 2, subdued: true, className: `${qaPrefix}-text` }, { children: text }), void 0))] }, void 0), _jsx(Layout.Section, { children: _jsx(Card, Object.assign({ raised: true }, { children: _jsx(Card.Section, Object.assign({ className: `${qaPrefix}-content` }, { children: children }), void 0) }), void 0) }, void 0)] }), void 0)));
 //# sourceMappingURL=index.js.map

package/lib/components/settings/settings-section/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/settings/settings-section/index.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAUjE,MAAM,CAAC,MAAM,eAAe,GAAqB,QAAQ,CACrD,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAgB,EAAE,EAAE,CAAC,CACnE,MAAC,MAAM,kBAAC,IAAI,EAAC,SAAS,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,iBAC9E,MAAC,MAAM,CAAC,OAAO,eACX,KAAC,IAAI,kBAAC,IAAI,EAAE,CAAC,EAAE,IAAI,QAAC,SAAS,EAAE,GAAG,QAAQ,QAAQ,gBAC7C,KAAK,YACH,EACN,IAAI,IAAI,CACL,KAAC,IAAI,kBAAC,IAAI,EAAE,CAAC,EAAE,OAAO,QAAC,SAAS,EAAE,GAAG,QAAQ,OAAO,gBAC/C,IAAI,YACF,CACV,YACY,EACjB,KAAC,MAAM,CAAC,OAAO,cACX,KAAC,IAAI,kBAAC,MAAM,sBACR,KAAC,IAAI,CAAC,OAAO,kBAAC,SAAS,EAAE,GAAG,QAAQ,UAAU,gBAAG,QAAQ,YAAgB,YACtE,WACM,aACZ,CACZ,CACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/settings/settings-section/index.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAe,MAAM,6BAA6B,CAAC;AAW9E,MAAM,CAAC,MAAM,eAAe,GAAqB,QAAQ,CACrD,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,EAAgB,EAAE,EAAE,CAAC,CACvF,MAAC,MAAM,kBAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,iBAC7E,MAAC,MAAM,CAAC,OAAO,eACV,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CACzB,KAAC,IAAI,kBAAC,IAAI,EAAE,CAAC,EAAE,IAAI,QAAC,SAAS,EAAE,GAAG,QAAQ,QAAQ,gBAC7C,KAAK,YACH,CACV,CAAC,CAAC,CAAC,CACA,KAAK,CACR,EACA,IAAI,IAAI,CACL,KAAC,IAAI,kBAAC,IAAI,EAAE,CAAC,EAAE,OAAO,QAAC,SAAS,EAAE,GAAG,QAAQ,OAAO,gBAC/C,IAAI,YACF,CACV,YACY,EACjB,KAAC,MAAM,CAAC,OAAO,cACX,KAAC,IAAI,kBAAC,MAAM,sBACR,KAAC,IAAI,CAAC,OAAO,kBAAC,SAAS,EAAE,GAAG,QAAQ,UAAU,gBAAG,QAAQ,YAAgB,YACtE,WACM,aACZ,CACZ,CACJ,CAAC"}

package/package.json

@@ -1,15 +1,16 @@
 {
     "name": "@servicetitan/mpa-components",
-    "version": "0.5.0",
+    "version": "1.0.0",
     "description": "",
     "main": "./lib/index.js",
     "typings": "./lib/index.d.ts",
     "peerDependencies": {
         "@servicetitan/confirm": "~21.4.1",
-        "@servicetitan/design-system": "~10.1.1",
-        "@servicetitan/form": "~21.4.1",
-        "@servicetitan/react-ioc": "~14.1.1",
-        "@servicetitan/tokens": "~10.1.1",
+        "@servicetitan/design-system": "~12.2.1",
+        "@servicetitan/form": "~22.4.4",
+        "@servicetitan/form-state": "~22.4.4",
+        "@servicetitan/react-ioc": "~21.10.0",
+        "@servicetitan/tokens": "~12.1.11",
         "formstate": "~2.0.0",
         "mobx": "~6.3.2",
         "mobx-react": "~7.2.0",
@@ -26,5 +27,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "701c3b9f7abe7e6f1dc11c0563385f4887521f2c"
+    "gitHead": "2a0735437f422320f08367221482e8df6f4c3e77"
 }

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

@@ -2,7 +2,7 @@ import { FC, Fragment, ReactNode } from 'react';
 import { observer } from 'mobx-react';
 import { FieldState } from 'formstate';
 
-import { Form, Link } from '@servicetitan/design-system';
+import { Form, LayoutProps, Link } from '@servicetitan/design-system';
 import { NumberInput, InputFieldState } from '@servicetitan/form';
 
 import { SettingsSection } from '../settings-section';
@@ -20,15 +20,21 @@ export interface CompanyDetailsProps {
     };
     logoPicker?: ReactNode;
     sectionDescription?: string | JSX.Element;
+    layout?: LayoutProps['type'];
+    className?: string;
+    title?: ReactNode;
     handleCompanyEmailBlur?: () => void;
 }
 
+export const MERGE_TAGS_DOCUMENTATION_LINK =
+    'https://help.servicetitan.com/Content/Marketing/merge-tags.htm';
+
 const DEFAULT_SECTION_DESCRIPTION = (
     <Fragment>
         Enter these details as you would like them to appear in your campaign. Much of this info can
         be utilized as&nbsp;
         <Link
-            href="https://help.servicetitan.com/Content/Marketing/merge-tags.htm"
+            href={MERGE_TAGS_DOCUMENTATION_LINK}
             target="_blank"
             primary
             className="qa-settings-company-details-merge-tags"
@@ -45,11 +51,16 @@ export const CompanyDetails: FC<CompanyDetailsProps> = observer(
         logoPicker,
         sectionDescription = DEFAULT_SECTION_DESCRIPTION,
         handleCompanyEmailBlur = () => {},
+        layout,
+        className = '',
+        title = 'Company Details',
     }: CompanyDetailsProps) => {
         return (
             <SettingsSection
+                className={className}
+                layout={layout}
                 qaPrefix="qa-settings-company-details"
-                title="Company Details"
+                title={title}
                 text={sectionDescription}
             >
                 <Form className="m-b-0-i">
@@ -117,7 +128,7 @@ export const CompanyDetails: FC<CompanyDetailsProps> = observer(
                             label="Zip Code"
                             placeholder="91203"
                             fluid
-                            maxLength={7}
+                            maxLength={10}
                         />
                     </Form.Group>
                     <Form.Group className="m-b-2-i">

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

@@ -1,7 +1,7 @@
 import { FC, Fragment } from 'react';
 import { observer } from 'mobx-react';
 
-import { Form, Text } from '@servicetitan/design-system';
+import { Form, LayoutProps, Text } from '@servicetitan/design-system';
 import { InputFieldState, TextAreaFieldState } from '@servicetitan/form';
 
 import { SettingsSection } from '../settings-section';
@@ -12,12 +12,16 @@ export interface CompanyEmailFooterProps {
         license: InputFieldState<string | undefined>;
         copyrightText: InputFieldState<string | undefined>;
     };
+    layout?: LayoutProps['type'];
+    className?: string;
 }
 
 export const CompanyEmailFooter: FC<CompanyEmailFooterProps> = observer(
-    ({ formState: { legalCopy, license, copyrightText } }) => {
+    ({ formState: { legalCopy, license, copyrightText }, layout, className }) => {
         return (
             <SettingsSection
+                className={className}
+                layout={layout}
                 title="Footer"
                 text={`Your footer will be partially generated from the Company Details section above.
                     Please enter the additional info so that it is CAN-SPAM compliant.`}

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

@@ -2,37 +2,43 @@ import { FC, useCallback } from 'react';
 import { observer } from 'mobx-react';
 
 import { InputFieldState } from '@servicetitan/form';
-import { Form } from '@servicetitan/design-system';
+import { Form, LayoutProps } from '@servicetitan/design-system';
 
 import { SettingsSection } from '../settings-section';
 
 export interface CompanyEmailReplyToProps {
     replyToEmail: InputFieldState<string | undefined>;
+    layout?: LayoutProps['type'];
+    className?: string;
 }
 
-export const CompanyEmailReplyTo: FC<CompanyEmailReplyToProps> = observer(({ replyToEmail }) => {
-    const handleReplyToBlur = useCallback(() => {
-        replyToEmail.validate();
-    }, [replyToEmail]);
+export const CompanyEmailReplyTo: FC<CompanyEmailReplyToProps> = observer(
+    ({ replyToEmail, layout, className }) => {
+        const handleReplyToBlur = useCallback(() => {
+            replyToEmail.validate();
+        }, [replyToEmail]);
 
-    return (
-        <SettingsSection
-            title="Reply-To"
-            text="This is where emails will be sent if someone replies to one of your emails."
-            qaPrefix="qa-settings-reply-to"
-        >
-            <Form className="m-b-0-i">
-                <Form.Input
-                    className="m-b-0-i qa-settings-reply-to-email-address"
-                    value={replyToEmail.value}
-                    onChange={replyToEmail.onChangeHandler}
-                    error={replyToEmail.hasError}
-                    onBlur={handleReplyToBlur}
-                    label="Reply-to Email Address"
-                    placeholder="info@yourcompany.com"
-                    fluid
-                />
-            </Form>
-        </SettingsSection>
-    );
-});
+        return (
+            <SettingsSection
+                layout={layout}
+                className={className}
+                title="Reply-To"
+                text="This is where emails will be sent if someone replies to one of your emails."
+                qaPrefix="qa-settings-reply-to"
+            >
+                <Form className="m-b-0-i">
+                    <Form.Input
+                        className="m-b-0-i qa-settings-reply-to-email-address"
+                        value={replyToEmail.value}
+                        onChange={replyToEmail.onChangeHandler}
+                        error={replyToEmail.hasError}
+                        onBlur={handleReplyToBlur}
+                        label="Reply-to Email Address"
+                        placeholder="info@yourcompany.com"
+                        fluid
+                    />
+                </Form>
+            </SettingsSection>
+        );
+    }
+);

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

@@ -1,7 +1,7 @@
 import { SyntheticEvent, Fragment, useCallback, FC } from 'react';
 import { observer } from 'mobx-react';
 
-import { Form, Text } from '@servicetitan/design-system';
+import { Form, LayoutProps, Text } from '@servicetitan/design-system';
 import { InputFieldState } from '@servicetitan/form';
 
 import { SettingsSection } from '../settings-section';
@@ -17,10 +17,12 @@ export interface CompanyEmailSenderProps {
     };
 
     senderTld: string;
+    layout?: LayoutProps['type'];
+    className?: string;
 }
 
 export const CompanyEmailSender: FC<CompanyEmailSenderProps> = observer(
-    ({ formState: { senderDomain, senderName, senderEmail }, senderTld }) => {
+    ({ formState: { senderDomain, senderName, senderEmail }, senderTld, layout, className }) => {
         const handleSenderNameChange = useCallback(
             (_0: SyntheticEvent<HTMLInputElement>, data: { value: string }) => {
                 if (data.value.length > 80) {
@@ -56,6 +58,8 @@ export const CompanyEmailSender: FC<CompanyEmailSenderProps> = observer(
 
         return (
             <SettingsSection
+                className={className}
+                layout={layout}
                 title="Sender"
                 text="Configure sender name and email."
                 qaPrefix="qa-settings-sender"

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

@@ -1,17 +1,19 @@
 import { SyntheticEvent, Fragment, useCallback, FC } from 'react';
 import { observer } from 'mobx-react';
 
-import { Form, Text } from '@servicetitan/design-system';
+import { Form, LayoutProps, 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>;
+    layout?: LayoutProps['type'];
+    className?: string;
 }
 
 export const CompanyEmailSender: FC<CompanyEmailSender> = observer(
-    ({ senderName, senderEmail }) => {
+    ({ senderName, senderEmail, layout, className }) => {
         const handleSenderNameChange = useCallback(
             (_0: SyntheticEvent<HTMLInputElement, Event>, data: { value: string }) => {
                 if (data.value.length > 80) {
@@ -29,6 +31,8 @@ export const CompanyEmailSender: FC<CompanyEmailSender> = observer(
 
         return (
             <SettingsSection
+                layout={layout}
+                className={className}
                 title="Sender"
                 text="Configure sender name and email."
                 qaPrefix="qa-settings-sender"

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

@@ -1,7 +1,7 @@
-import { useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import chunk from 'lodash/chunk';
 
-import { Grid, Text } from '@servicetitan/design-system';
+import { Grid, GridColumnsCount, LayoutProps, Text } from '@servicetitan/design-system';
 
 import { SettingsSection } from '../settings-section';
 import { CompanyTradeCheckbox } from '../company-trade-checkbox';
@@ -21,31 +21,41 @@ export interface Trade<TradeType extends string | number> {
 
 export interface CompanyTradesPickerProps<TradeType extends string | number = string> {
     trades: Trade<TradeType>[];
+    layout?: LayoutProps['type'];
+    className?: string;
+    title?: ReactNode;
+    columns?: number;
     onTradeChange(t?: TradeType): void;
 }
 
 export function CompanyTradesPicker<T extends string | number = string>({
     trades,
     onTradeChange,
+    layout,
+    className,
+    columns = 4,
+    title = 'Select Your Trades',
 }: CompanyTradesPickerProps<T>) {
     const rows = useMemo(
-        () => chunk(trades, 4).map((row, idx) => ({ row, key: `row=${idx}` })),
-        [trades]
+        () => chunk(trades, columns).map((row, idx) => ({ row, key: `row=${idx}` })),
+        [trades, columns]
     );
 
     return (
         <SettingsSection
+            className={className}
+            layout={layout}
+            title={title}
             qaPrefix="qa-settings-select-your-trades"
-            title="Select Your Trades"
             text="Choose which trades describe your business so we can give you relevant content and merge tags."
         >
-            <Grid columns={4}>
+            <Grid columns={columns as GridColumnsCount}>
                 {rows.map(({ row, key }) => {
                     return (
                         <Grid.Row key={key} stretched className="p-0">
                             {row.map(trade => {
                                 return (
-                                    <Grid.Column key={trade.value}>
+                                    <Grid.Column key={trade.name}>
                                         <CompanyTradeCheckbox<T>
                                             className={`qa-settings-select-your-trades-${
                                                 trade.qaKey ?? trade.value