@servicetitan/mpa-components 0.6.0 → 1.0.0

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/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,6 +1,6 @@
 {
     "name": "@servicetitan/mpa-components",
-    "version": "0.6.0",
+    "version": "1.0.0",
     "description": "",
     "main": "./lib/index.js",
     "typings": "./lib/index.d.ts",
@@ -27,5 +27,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "ac950b6290c35e2be23627b9fff6c1eb9f222579"
+    "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

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

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import classnames from 'classnames';
 
 import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
-import { Form, Text, ToggleSwitch, Button } from '@servicetitan/design-system';
+import { Form, Text, ToggleSwitch, Button, LayoutProps } from '@servicetitan/design-system';
 import { useConfirm } from '@servicetitan/confirm';
 
 import { SettingsSection } from '../settings-section';
@@ -23,121 +23,127 @@ export interface DoubleOptInPropsFormState {
 }
 export interface DoubleOptInProps {
     formState: DoubleOptInPropsFormState;
+    layout?: LayoutProps['type'];
+    className?: string;
     onHandleClickEnable?(checkd: boolean): void;
 }
 
-export const DoubleOptIn: FC<DoubleOptInProps> = observer(({ onHandleClickEnable, formState }) => {
-    const { emailSubject, emailHeader, emailBody, emailButtonText, enabled } = formState;
-    const [isPreviewOpen, setIsPreviewOpen] = useState(false);
-    const openPreview = useCallback(() => setIsPreviewOpen(true), [setIsPreviewOpen]);
-    const closePreview = useCallback(() => setIsPreviewOpen(false), [setIsPreviewOpen]);
+export const DoubleOptIn: FC<DoubleOptInProps> = observer(
+    ({ onHandleClickEnable, formState, layout, className }) => {
+        const { emailSubject, emailHeader, emailBody, emailButtonText, enabled } = formState;
+        const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+        const openPreview = useCallback(() => setIsPreviewOpen(true), [setIsPreviewOpen]);
+        const closePreview = useCallback(() => setIsPreviewOpen(false), [setIsPreviewOpen]);
 
-    const handleClickEnable = useCallback(
-        (_0: any, checked: boolean) => {
-            onHandleClickEnable?.(checked);
-            enabled.onChange(checked);
-        },
-        [enabled, onHandleClickEnable]
-    );
+        const handleClickEnable = useCallback(
+            (_0: any, checked: boolean) => {
+                onHandleClickEnable?.(checked);
+                enabled.onChange(checked);
+            },
+            [enabled, onHandleClickEnable]
+        );
 
-    const [Confirm, handleConfirmed] = useConfirm(handleClickEnable);
+        const [Confirm, handleConfirmed] = useConfirm(handleClickEnable);
 
-    return (
-        <SettingsSection
-            qaPrefix="qa-double-opt-in"
-            title="Double Opt-In"
-            text={
-                <Fragment>
-                    <div>
-                        Double opt-in ensures that your emails will go to SPAM at a much lower rate.
-                        The opt-in confirmation happens after a job has been completed.
-                    </div>
-                    <ToggleSwitch
-                        label="Enable"
-                        onChange={handleConfirmed}
-                        checked={enabled.value}
-                        className="m-t-2 qa-double-opt-in-enable"
+        return (
+            <SettingsSection
+                layout={layout}
+                className={className}
+                qaPrefix="qa-double-opt-in"
+                title="Double Opt-In"
+                text={
+                    <Fragment>
+                        <div>
+                            Double opt-in ensures that your emails will go to SPAM at a much lower
+                            rate. The opt-in confirmation happens after a job has been completed.
+                        </div>
+                        <ToggleSwitch
+                            label="Enable"
+                            onChange={handleConfirmed}
+                            checked={enabled.value}
+                            className="m-t-2 qa-double-opt-in-enable"
+                        />
+                    </Fragment>
+                }
+            >
+                <Text bold className="m-b-2">
+                    Double Opt-In Email Content
+                </Text>
+                <Form className="m-b-0-i">
+                    <Form.Input
+                        className="m-b-2-i qa-double-opt-in-subject-line"
+                        value={emailSubject.value}
+                        onChange={emailSubject.onChangeHandler}
+                        error={emailSubject.hasError}
+                        label="Subject Line"
+                        fluid
+                        disabled={!enabled.value}
                     />
-                </Fragment>
-            }
-        >
-            <Text bold className="m-b-2">
-                Double Opt-In Email Content
-            </Text>
-            <Form className="m-b-0-i">
-                <Form.Input
-                    className="m-b-2-i qa-double-opt-in-subject-line"
-                    value={emailSubject.value}
-                    onChange={emailSubject.onChangeHandler}
-                    error={emailSubject.hasError}
-                    label="Subject Line"
-                    fluid
-                    disabled={!enabled.value}
-                />
-                <Form.Input
-                    className="m-b-2-i qa-double-opt-in-header"
-                    value={emailHeader.value}
-                    onChange={emailHeader.onChangeHandler}
-                    error={emailHeader.hasError}
-                    label="Header"
-                    fluid
-                    disabled={!enabled.value}
-                />
-                <Form.TextArea
-                    className="m-b-2-i qa-double-opt-in-body-copy"
-                    label="Body Copy"
-                    value={emailBody.value}
-                    onChange={emailBody.onChangeHandler}
-                    error={emailBody.hasError}
-                    rows={2}
-                    disabled={!enabled.value}
+                    <Form.Input
+                        className="m-b-2-i qa-double-opt-in-header"
+                        value={emailHeader.value}
+                        onChange={emailHeader.onChangeHandler}
+                        error={emailHeader.hasError}
+                        label="Header"
+                        fluid
+                        disabled={!enabled.value}
+                    />
+                    <Form.TextArea
+                        className="m-b-2-i qa-double-opt-in-body-copy"
+                        label="Body Copy"
+                        value={emailBody.value}
+                        onChange={emailBody.onChangeHandler}
+                        error={emailBody.hasError}
+                        rows={2}
+                        disabled={!enabled.value}
+                    />
+                    <Form.Input
+                        className={classnames(
+                            Styles.buttonInput,
+                            'm-b-2-i qa-double-opt-in-button-text'
+                        )}
+                        value={emailButtonText.value}
+                        onChange={emailButtonText.onChangeHandler}
+                        error={emailButtonText.hasError}
+                        label="Button Text"
+                        disabled={!enabled.value}
+                    />
+                    <Form.Field
+                        className="m-b-3-i"
+                        label={
+                            <Fragment>
+                                Footer&nbsp;
+                                <Text inline size={2} subdued>
+                                    (automatically added)
+                                </Text>
+                            </Fragment>
+                        }
+                    >
+                        <Text>{footerText}</Text>
+                    </Form.Field>
+                    <Button
+                        className="qa-double-opt-in-preview-email"
+                        primary
+                        onClick={openPreview}
+                        outline
+                        small
+                        disabled={!enabled.value}
+                    >
+                        Preview Email
+                    </Button>
+                </Form>
+                <Confirm
+                    title="Disable Double Opt-In"
+                    message="Disabling double opt-in could potentially lead to worse email performance and higher spam rates. Are you sure?"
+                    when={enabled.value}
                 />
-                <Form.Input
-                    className={classnames(
-                        Styles.buttonInput,
-                        'm-b-2-i qa-double-opt-in-button-text'
-                    )}
-                    value={emailButtonText.value}
-                    onChange={emailButtonText.onChangeHandler}
-                    error={emailButtonText.hasError}
-                    label="Button Text"
-                    disabled={!enabled.value}
+                <OptInEmailPreview
+                    {...formState}
+                    open={isPreviewOpen}
+                    footerText={footerText}
+                    onClose={closePreview}
                 />
-                <Form.Field
-                    className="m-b-3-i"
-                    label={
-                        <Fragment>
-                            Footer&nbsp;
-                            <Text inline size={2} subdued>
-                                (automatically added)
-                            </Text>
-                        </Fragment>
-                    }
-                >
-                    <Text>{footerText}</Text>
-                </Form.Field>
-                <Button
-                    className="qa-double-opt-in-preview-email"
-                    primary
-                    onClick={openPreview}
-                    outline
-                    small
-                    disabled={!enabled.value}
-                >
-                    Preview Email
-                </Button>
-            </Form>
-            <Confirm
-                title="Disable Double Opt-In"
-                message="Disabling double opt-in could potentially lead to worse email performance and higher spam rates. Are you sure?"
-                when={enabled.value}
-            />
-            <OptInEmailPreview
-                {...formState}
-                open={isPreviewOpen}
-                footerText={footerText}
-                onClose={closePreview}
-            />
-        </SettingsSection>
-    );
-});
+            </SettingsSection>
+        );
+    }
+);