@servicetitan/mpa-components 0.1.0

package/lib/components/settings/opt-out-message/opt-out-message.module.less

@@ -0,0 +1,20 @@
+@import (reference) '~@servicetitan/tokens/dist/tokens.less';
+
+.out-out-message {
+    hr {
+        margin: @spacing-2 @spacing-0;
+        border: 0;
+        border-bottom: 1px solid @color-neutral-50;
+    }
+}
+
+.button-input {
+    width: 160px;
+}
+
+.input {
+    width: @spacing-5;
+    margin-left: @spacing-1;
+    margin-right: @spacing-1;
+    margin-bottom: @spacing-0;
+}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import(".").OptOutMessageProps>;
+    parameters: {};
+};
+export default _default;
+export declare const OptOutMessage: (() => JSX.Element) & import("@servicetitan/react-ioc/dist/provide").WrappedComponent<() => JSX.Element>;
+//# sourceMappingURL=opt-out-message.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"opt-out-message.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/opt-out-message/opt-out-message.stories.tsx"],"names":[],"mappings":";;;;;;AAKA,wBAIE;AAeF,eAAO,MAAM,aAAa,0GAMxB,CAAC"}

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

@@ -0,0 +1,44 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    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 { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
+import { FormState } from 'formstate';
+import { OptOutMessage as Component } from '.';
+export default {
+    title: 'MPA Components/settings/OptOutMessage',
+    component: Component,
+    parameters: {},
+};
+let OptOutStore = class OptOutStore {
+    constructor() {
+        Object.defineProperty(this, "form", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new FormState({
+                subjectLine: new InputFieldState('Good bye'),
+                header: new InputFieldState('Opt out of emails'),
+                body: new InputFieldState('Sorry to see you go!'),
+                buttonText: new InputFieldState('Bye'),
+                monthsLimit: new InputFieldState(6),
+                enabled: new CheckboxFieldState(true),
+                autoSuppressionEnabled: new CheckboxFieldState(true),
+            })
+        });
+    }
+};
+OptOutStore = __decorate([
+    injectable()
+], OptOutStore);
+export const OptOutMessage = provide({
+    singletons: [OptOutStore],
+})(() => {
+    const [store] = useDependencies(OptOutStore);
+    return _jsx(Component, { formState: store.form.$ }, void 0);
+});
+//# sourceMappingURL=opt-out-message.stories.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,11 @@
+import { ReactNode, FC } from 'react';
+interface SectionProps {
+    title: string;
+    text?: JSX.Element | string;
+    children: ReactNode;
+    qaPrefix?: string;
+    className?: string;
+}
+export declare const SettingsSection: FC<SectionProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,UAAU,YAAY;IAClB,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"}

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

@@ -0,0 +1,6 @@
+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)));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/settings';
+export * from './utils/helpers';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AAEtC,cAAc,iBAAiB,CAAC"}

package/lib/index.js

@@ -0,0 +1,3 @@
+export * from './components/settings';
+export * from './utils/helpers';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AAEtC,cAAc,iBAAiB,CAAC"}

package/lib/utils/helpers.d.ts

@@ -0,0 +1,7 @@
+export declare const formatBytes: (bytes: number | undefined, decimals?: number, isBinary?: boolean) => string;
+export declare const getImageSize: (url: string) => Promise<{
+    width: number;
+    height: number;
+}>;
+export declare const convertDomainName: (value: string) => string;
+//# sourceMappingURL=helpers.d.ts.map

package/lib/utils/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/utils/helpers.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,UAAW,MAAM,GAAG,SAAS,kDAYpD,CAAC;AAEF,eAAO,MAAM,YAAY,QAAS,MAAM;WACR,MAAM;YAAU,MAAM;EAarD,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,MAAM,WAA0C,CAAC"}

package/lib/utils/helpers.js

@@ -0,0 +1,24 @@
+export const formatBytes = (bytes, decimals = 2, isBinary = true) => {
+    if (!bytes) {
+        return '0 Bytes';
+    }
+    const k = isBinary ? 1024 : 1000;
+    const dm = Math.max(0, decimals);
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+};
+export const getImageSize = (url) => {
+    return new Promise((resolve, reject) => {
+        const image = document.createElement('img');
+        image.onload = () => {
+            resolve({ width: image.width, height: image.height });
+        };
+        image.onerror = () => {
+            reject(undefined);
+        };
+        image.src = url;
+    });
+};
+export const convertDomainName = (value) => value.toLowerCase().replace(/ /g, '');
+//# sourceMappingURL=helpers.js.map

package/lib/utils/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/utils/helpers.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAyB,EAAE,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,EAAE;IACpF,IAAI,CAAC,KAAK,EAAE;QACR,OAAO,SAAS,CAAC;KACpB;IAED,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACjC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;IACjC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAEhD,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAEpD,OAAO,GAAG,UAAU,CAAC,CAAC,KAAK,GAAG,SAAA,CAAC,EAAI,CAAC,CAAA,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;AACrE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;IACxC,OAAO,IAAI,OAAO,CAAoC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACtE,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE5C,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE;YAChB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;QAC1D,CAAC,CAAC;QAEF,KAAK,CAAC,OAAO,GAAG,GAAG,EAAE;YACjB,MAAM,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC,CAAC;QAEF,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;IACpB,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,36 @@
+{
+    "name": "@servicetitan/mpa-components",
+    "version": "0.1.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",
+        "@servicetitan/form": "~21.4.1",
+        "@servicetitan/react-ioc": "~14.1.1",
+        "@servicetitan/tokens": "~10.1.1",
+        "formstate": "~2.0.0",
+        "mobx": "~6.3.2",
+        "mobx-react": "~7.2.0",
+        "moment": "~2.29.1",
+        "react": "~17.0.2"
+    },
+    "devDependencies": {
+        "@testing-library/react": "^12.0.0",
+        "@types/history": "~4.7.7",
+        "@types/lodash": "^4.14.182",
+        "@types/react": "~17.0.15"
+    },
+    "publishConfig": {
+        "access": "restricted"
+    },
+    "cli": {
+        "webpack": false
+    },
+    "gitHead": "a8a8a8e9b672a2d45847991df0e23036e3810482"
+}

package/src/components/settings/company-details/company-details-form.stories.tsx

@@ -0,0 +1,39 @@
+import { InputFieldState } from '@servicetitan/form';
+import { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
+import { FormState } from 'formstate';
+
+import { CompanyDetails as Component } from '.';
+import { LogoPicker } from '../logo-picker/logo-picker.stories';
+
+@injectable()
+class DetailsStore {
+    form = new FormState({
+        companyName: new InputFieldState('Acme Inc'),
+        tagline: new InputFieldState('Ayo! The Acme rules'),
+        street: new InputFieldState('Backed st.'),
+        unit: new InputFieldState('123'),
+        city: new InputFieldState('Glendale'),
+        state: new InputFieldState('CA'),
+        zipCode: new InputFieldState('91203'),
+        companyEmail: new InputFieldState('info@acme.com'),
+        yearEstablished: new InputFieldState(1999),
+    });
+}
+
+export const CompanyDetails = provide({ singletons: [DetailsStore] })(() => {
+    const [store] = useDependencies(DetailsStore);
+
+    return (
+        <Component
+            formState={store.form.$}
+            logoPicker={<LogoPicker />}
+            handleCompanyEmailBlur={() => alert('company email blurred')}
+        />
+    );
+});
+
+export default {
+    title: 'MPA Components/settings/CompanyDetails',
+    component: CompanyDetails,
+    parameters: {},
+};

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

@@ -0,0 +1,157 @@
+import { FC, Fragment, ReactNode } from 'react';
+import { observer } from 'mobx-react';
+
+import { Form, Link } from '@servicetitan/design-system';
+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>;
+    };
+    logoPicker?: ReactNode;
+    sectionDescription?: string | JSX.Element;
+    handleCompanyEmailBlur?: () => void;
+}
+
+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"
+            target="_blank"
+            primary
+            className="qa-settings-company-details-merge-tags"
+        >
+            merge tags
+        </Link>
+        .
+    </Fragment>
+);
+
+export const CompanyDetails: FC<CompanyDetailsProps> = observer(
+    ({
+        formState,
+        logoPicker,
+        sectionDescription = DEFAULT_SECTION_DESCRIPTION,
+        handleCompanyEmailBlur = () => {},
+    }: CompanyDetailsProps) => {
+        return (
+            <SettingsSection
+                qaPrefix="qa-settings-company-details"
+                title="Company Details"
+                text={sectionDescription}
+            >
+                <Form className="m-b-0-i">
+                    <Form.Input
+                        className="m-b-2-i qa-settings-company-details-company-name"
+                        value={formState.companyName.value}
+                        onChange={formState.companyName.onChangeHandler}
+                        error={formState.companyName.hasError}
+                        label="Company Name"
+                        placeholder="Enter company name"
+                        fluid
+                    />
+                    <Form.Input
+                        className="m-b-2-i qa-settings-company-details-tagline"
+                        value={formState.tagline.value}
+                        onChange={formState.tagline.onChangeHandler}
+                        error={formState.tagline.hasError}
+                        label="Tagline / Slogan"
+                        placeholder="ex: Trusted since 1956"
+                        fluid
+                    />
+                    <Form.Group className="m-b-2-i">
+                        <Form.Input
+                            width={8}
+                            className="m-b-0-i qa-settings-company-details-address"
+                            value={formState.street.value}
+                            onChange={formState.street.onChangeHandler}
+                            error={formState.street.hasError}
+                            label="Street Address"
+                            placeholder="801 N Brand Blvd"
+                        />
+                        <Form.Input
+                            width={4}
+                            className="m-b-0-i qa-settings-company-details-address"
+                            value={formState.unit.value}
+                            onChange={formState.unit.onChangeHandler}
+                            error={formState.unit.hasError}
+                            label="Suite, Unit, etc"
+                        />
+                    </Form.Group>
+                    <Form.Group widths="equal" className="m-b-2-i">
+                        <Form.Input
+                            className="m-b-0-i qa-settings-company-details-city"
+                            value={formState.city.value}
+                            onChange={formState.city.onChangeHandler}
+                            error={formState.city.hasError}
+                            label="City"
+                            placeholder="Glendale"
+                            fluid
+                        />
+                        <Form.Input
+                            className="m-b-0-i qa-settings-company-details-state"
+                            value={formState.state.value}
+                            onChange={formState.state.onChangeHandler}
+                            error={formState.state.hasError}
+                            label="State"
+                            placeholder="CA"
+                            fluid
+                        />
+                        <Form.Input
+                            className="m-b-0-i qa-settings-company-details-zip-code"
+                            value={formState.zipCode.value}
+                            onChange={formState.zipCode.onChangeHandler}
+                            error={formState.zipCode.hasError}
+                            label="Zip Code"
+                            placeholder="91203"
+                            fluid
+                            maxLength={7}
+                        />
+                    </Form.Group>
+                    <Form.Group className="m-b-2-i">
+                        <Form.Input
+                            width={8}
+                            className="m-b-0-i qa-settings-company-details-company-email"
+                            value={formState.companyEmail.value}
+                            onChange={formState.companyEmail.onChangeHandler}
+                            error={formState.companyEmail.hasError}
+                            onBlur={handleCompanyEmailBlur}
+                            label="Company Email"
+                            placeholder="hello@yourcompany.com"
+                            fluid
+                        />
+                        <Form.Field
+                            label="Year Established"
+                            className="qa-settings-company-details-company-email"
+                            width={4}
+                            error={formState.yearEstablished.hasError}
+                        >
+                            <NumberInput
+                                value={formState.yearEstablished.value}
+                                onChange={formState.yearEstablished.onChange}
+                                emptyValue={undefined}
+                                min={1}
+                                max={2099}
+                                useEmptyThousandsSeparator
+                                placeholder="1950"
+                                fluid
+                            />
+                        </Form.Field>
+                    </Form.Group>
+                    {logoPicker}
+                </Form>
+            </SettingsSection>
+        );
+    }
+);

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

@@ -0,0 +1,26 @@
+import { InputFieldState } from '@servicetitan/form';
+import { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
+import { FormState } from 'formstate';
+
+import { CompanyEmailFooter as Component } from '.';
+
+export default {
+    title: 'MPA Components/settings/CompanyEmailFooter',
+    component: Component,
+    parameters: {},
+};
+
+@injectable()
+class CompanyEmailStore {
+    form = new FormState({
+        legalCopy: new InputFieldState('Legal copy example'),
+        license: new InputFieldState('License'),
+        copyrightText: new InputFieldState('Copyritght 2022'),
+    });
+}
+
+export const CompanyEmailFooter = provide({ singletons: [CompanyEmailStore] })(() => {
+    const [store] = useDependencies(CompanyEmailStore);
+
+    return <Component formState={store.form.$} />;
+});

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

@@ -0,0 +1,79 @@
+import { FC, Fragment } 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 CompanyEmailFooterProps {
+    formState: {
+        legalCopy: InputFieldState<string>;
+        license: InputFieldState<string>;
+        copyrightText: InputFieldState<string>;
+    };
+}
+
+export const CompanyEmailFooter: FC<CompanyEmailFooterProps> = observer(
+    ({ formState: { legalCopy, license, copyrightText } }) => {
+        return (
+            <SettingsSection
+                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.`}
+                qaPrefix="qa-settings-footer"
+            >
+                <Form className="m-b-0-i">
+                    <Form.TextArea
+                        className="m-b-2-i qa-settings-footer-legal-copy"
+                        label={
+                            <Fragment>
+                                Legal Copy&nbsp;
+                                <Text inline size={2} subdued>
+                                    (optional)
+                                </Text>
+                            </Fragment>
+                        }
+                        placeholder="Enter legal copy here"
+                        value={legalCopy.value}
+                        onChange={legalCopy.onChangeHandler}
+                    />
+                    <Form.Group className="m-b-0-i">
+                        <Form.Input
+                            width={6}
+                            className="m-b-0-i qa-settings-footer-lic"
+                            value={license.value}
+                            onChange={license.onChangeHandler}
+                            label={
+                                <Fragment>
+                                    LIC #&nbsp;
+                                    <Text inline size={2} subdued>
+                                        (optional)
+                                    </Text>
+                                </Fragment>
+                            }
+                            placeholder="XYZ12345"
+                            fluid
+                        />
+                        <Form.Input
+                            width={6}
+                            className="m-b-0-i qa-settings-footer-copyright-text"
+                            value={copyrightText.value}
+                            onChange={copyrightText.onChangeHandler}
+                            label={
+                                <Fragment>
+                                    Copyright Text&nbsp;
+                                    <Text inline size={2} subdued>
+                                        (optional)
+                                    </Text>
+                                </Fragment>
+                            }
+                            placeholder="© 2022, all right reserved"
+                            fluid
+                        />
+                    </Form.Group>
+                </Form>
+            </SettingsSection>
+        );
+    }
+);

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

@@ -0,0 +1,23 @@
+import { InputFieldState } from '@servicetitan/form';
+import { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
+import { FormState } from 'formstate';
+
+import { CompanyEmailReplyTo as Component } from '.';
+
+export default {
+    title: 'MPA Components/settings/CompanyEmailReplyTo',
+    component: Component,
+    parameters: {},
+};
+
+@injectable()
+class CompanyEmailReplyToStore {
+    form = new FormState({
+        replyToEmail: new InputFieldState('info@acme.com'),
+    });
+}
+
+export const CompanyEmailReplyTo = provide({ singletons: [CompanyEmailReplyToStore] })(() => {
+    const [store] = useDependencies(CompanyEmailReplyToStore);
+    return <Component replyToEmail={store.form.$.replyToEmail} />;
+});

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

@@ -0,0 +1,38 @@
+import { FC, useCallback } from 'react';
+import { observer } from 'mobx-react';
+
+import { InputFieldState } from '@servicetitan/form';
+import { Form } from '@servicetitan/design-system';
+
+import { SettingsSection } from '../settings-section';
+
+export interface CompanyEmailReplyToProps {
+    replyToEmail: InputFieldState<string>;
+}
+
+export const CompanyEmailReplyTo: FC<CompanyEmailReplyToProps> = observer(({ replyToEmail }) => {
+    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>
+    );
+});

package/src/components/settings/company-email-sender/company-email-sender.module.less

@@ -0,0 +1,7 @@
+@import (reference) '~@servicetitan/tokens/dist/tokens.less';
+
+.domain {
+    height: 40px;
+    display: flex;
+    align-items: center;
+}

package/src/components/settings/company-email-sender/company-email-sender.module.less.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const domain: string;
+

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

@@ -0,0 +1,26 @@
+import { InputFieldState } from '@servicetitan/form';
+import { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
+import { FormState } from 'formstate';
+
+import { CompanyEmailSender as Component } from '.';
+
+export default {
+    title: 'MPA Components/settings/CompanyEmailSender',
+    component: Component,
+    parameters: {},
+};
+
+@injectable()
+class CompanyEmailSenderStore {
+    form = new FormState({
+        senderEmail: new InputFieldState('email@acme.com'),
+        senderName: new InputFieldState('Pinky & Brain'),
+        senderDomain: new InputFieldState('acme'),
+    });
+}
+
+export const CompanyEmailSender = provide({ singletons: [CompanyEmailSenderStore] })(() => {
+    const [store] = useDependencies(CompanyEmailSenderStore);
+
+    return <Component formState={store.form.$} senderTld="com" />;
+});