@servicetitan/mpa-components 0.2.2 → 0.3.0

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":";AAAA,OAAO,EAAM,OAAO,EAAE,MAAM,OAAO,CAAC;AACpC,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,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAChB,OAAO,IAAI,CAAC;KACf;IAED,MAAM,UAAU,GAAG,OAAO,CACtB,GAAG,EAAE,CACD,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CACtB,CAAC,CAAC,GAAG,EAAE,KAAK,CAAuD,EAAE,EAAE;QACnE,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;IACb,CAAC,CACJ,EACL,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,CAAC;IAEF,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,UAAU,YAAM,aACzD,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.3.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": "83727a32567c2b028cb21bcda592ccd6bbf02b98"
 }

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>
+        );
+    }
+);

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

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

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

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

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

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

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

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

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

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