@servicetitan/onboarding-ui 1.1.0

package/dist/company-profile/components/company-profile-form.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const CompanyProfileForm: (props: {
+    className?: string;
+}) => JSX.Element;
+//# sourceMappingURL=company-profile-form.d.ts.map

package/dist/company-profile/components/company-profile-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"company-profile-form.d.ts","sourceRoot":"","sources":["../../../src/company-profile/components/company-profile-form.tsx"],"names":[],"mappings":";AAUA,eAAO,MAAM,kBAAkB,UAAoB;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,gBAiIvE,CAAC"}

package/dist/company-profile/components/company-profile-form.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompanyProfileForm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const design_system_1 = require("@servicetitan/design-system");
+const classnames_1 = __importDefault(require("classnames"));
+const country_dropdown_input_1 = require("./country-dropdown-input");
+const mobx_react_1 = require("mobx-react");
+const react_ioc_1 = require("@servicetitan/react-ioc");
+const state_and_province_dropdown_input_1 = require("./state-and-province-dropdown-input");
+const company_profile_form_store_1 = require("../stores/company-profile-form.store");
+const form_1 = require("@servicetitan/form");
+exports.CompanyProfileForm = mobx_react_1.observer((props) => {
+    const [store] = react_ioc_1.useDependencies(company_profile_form_store_1.CompanyProfileFormStore);
+    const { form, showFormError, zipCodeMask, einOrBnMask, einOrBnInputProps } = store;
+    const zipCodeOnChangeHandler = (e) => {
+        form.$.companyZipCode.onChangeHandler(e, {
+            value: e.target.value,
+        });
+    };
+    const einOrBnOnChangeHandler = (e) => {
+        form.$.einOrBn.onChangeHandler(e, {
+            value: (e.target.value || '').replace(/[^0-9.]/g, ''),
+        });
+    };
+    const phoneOnChangeHandler = (e) => {
+        form.$.adminPhone.onChangeHandler(e, { value: e.target.value });
+    };
+    const countryOnChangeHandler = (event, data) => {
+        if (form.$.companyCountry.$ && data.value !== form.$.companyCountry.$) {
+            form.$.companyStateCode.onChange('');
+        }
+        form.$.companyCountry.onChangeHandler(event, data);
+    };
+    const { companyName, companyStreetAddress, companyCity, companyCountry, companyStateCode, companyZipCode, adminPhone, einOrBn, } = store.form.$;
+    const zipCodeHasError = companyZipCode.hasError;
+    return (jsx_runtime_1.jsxs(design_system_1.Form, Object.assign({ size: "tiny", className: classnames_1.default(props.className, 'ta-left', 'p-x-6') }, { children: [jsx_runtime_1.jsx(design_system_1.Form.Input, { label: "Company Name", placeholder: "Company Name", value: companyName.value, onChange: companyName.onChangeHandler, error: (companyName.dirty || showFormError) && companyName.hasError }, void 0), jsx_runtime_1.jsx(design_system_1.Form.Input, { label: "Street Address", placeholder: "Street Address", value: companyStreetAddress.value, onChange: companyStreetAddress.onChangeHandler, error: (companyStreetAddress.dirty || showFormError) && companyStreetAddress.hasError }, void 0), jsx_runtime_1.jsxs(design_system_1.Form.Group, Object.assign({ width: "equal" }, { children: [jsx_runtime_1.jsx(design_system_1.Form.Input, { fluid: true, label: "City", placeholder: "City", className: "p-r-0", width: "6", value: companyCity.value, onChange: companyCity.onChangeHandler, error: (companyCity.dirty || showFormError) && companyCity.hasError }, void 0), jsx_runtime_1.jsx(state_and_province_dropdown_input_1.StateAndProvinceDropdownInput, { width: "6", countryCode: companyCountry.value || 'USA', fieldState: companyStateCode, error: (companyStateCode.dirty || showFormError) && companyStateCode.hasError, countryAndRegionData: store.countryAndRegionData, regionNameToCodeMap: store.regionToCodeMap }, void 0)] }), void 0), jsx_runtime_1.jsxs(design_system_1.Form.Group, Object.assign({ width: "equal" }, { children: [jsx_runtime_1.jsx(form_1.MaskedInput, { fluid: true, label: "ZIP Code", placeholder: "ZIP Code", value: companyZipCode.value, onChange: zipCodeOnChangeHandler, mask: zipCodeMask, className: "p-r-0", maskChar: " ", error: (companyZipCode.dirty || showFormError) && zipCodeHasError, width: 6 }, void 0), jsx_runtime_1.jsx(country_dropdown_input_1.CountryDropdownInput, { width: "6", value: companyCountry.value, onChange: countryOnChangeHandler, error: (companyCountry.dirty || showFormError) && companyCountry.hasError, options: store.countries.map(x => ({ key: x, value: x, text: x })) }, void 0)] }), void 0), jsx_runtime_1.jsxs(design_system_1.Form.Group, Object.assign({ width: "equal" }, { children: [jsx_runtime_1.jsx(form_1.MaskedInput, { fluid: true, label: "Phone Number", placeholder: "Phone Number", value: adminPhone.value, onChange: phoneOnChangeHandler, error: (adminPhone.dirty || showFormError) && adminPhone.hasError, mask: store.phoneMask, width: 6 }, void 0), jsx_runtime_1.jsx(form_1.MaskedInput, { fluid: true, label: einOrBnInputProps.label, placeholder: einOrBnInputProps.placeholder, value: einOrBn.value, onChange: einOrBnOnChangeHandler, mask: einOrBnMask, className: "p-r-0", maskChar: " ", error: (einOrBn.dirty || showFormError) && einOrBn.hasError, width: 6 }, void 0)] }), void 0)] }), void 0));
+});
+//# sourceMappingURL=company-profile-form.js.map

package/dist/company-profile/components/company-profile-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"company-profile-form.js","sourceRoot":"","sources":["../../../src/company-profile/components/company-profile-form.tsx"],"names":[],"mappings":"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"}

package/dist/company-profile/components/company-profile.module.less

@@ -0,0 +1,7 @@
+.company-profile-container {
+    max-width: 650px !important;
+}
+
+.company-profile-form {
+    margin-bottom: 9px;
+}

package/dist/company-profile/components/country-dropdown-input.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { FormDropdownProps, SemanticWIDTHS } from '@servicetitan/design-system';
+import { Option } from '@servicetitan/form';
+export interface ICountryDropdownInput extends FormDropdownProps {
+    options: Option<string>[];
+    width?: SemanticWIDTHS;
+}
+export declare const CountryDropdownInput: (props: ICountryDropdownInput) => JSX.Element;
+//# sourceMappingURL=country-dropdown-input.d.ts.map

package/dist/company-profile/components/country-dropdown-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-dropdown-input.d.ts","sourceRoot":"","sources":["../../../src/company-profile/components/country-dropdown-input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAQ,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEtF,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;IAC5D,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED,eAAO,MAAM,oBAAoB,UAAoB,qBAAqB,gBAiBxE,CAAC"}

package/dist/company-profile/components/country-dropdown-input.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CountryDropdownInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const design_system_1 = require("@servicetitan/design-system");
+const mobx_react_1 = require("mobx-react");
+exports.CountryDropdownInput = mobx_react_1.observer((props) => {
+    var _a, _b;
+    const value = props.value && props.value.toString().toLowerCase();
+    const country = value && (value === 'canada' || value === 'ca' ? 'Canada' : 'USA');
+    return (jsx_runtime_1.jsx(design_system_1.Form.Select, { fluid: true, search: true, width: (_a = props.width) !== null && _a !== void 0 ? _a : '12', label: "Country", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : 'Country', className: props.className, value: country, onChange: props.onChange, options: props.options, error: props.error }, void 0));
+});
+//# sourceMappingURL=country-dropdown-input.js.map

package/dist/company-profile/components/country-dropdown-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-dropdown-input.js","sourceRoot":"","sources":["../../../src/company-profile/components/country-dropdown-input.tsx"],"names":[],"mappings":";;;;AACA,+DAAsF;AACtF,2CAAsC;AAQzB,QAAA,oBAAoB,GAAG,qBAAQ,CAAC,CAAC,KAA4B,EAAE,EAAE;;IAC1E,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAM,CAAC,QAAQ,EAAE,CAAC,WAAW,EAAE,CAAC;IACnE,MAAM,OAAO,GAAG,KAAK,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IACnF,OAAO,CACH,kBAAC,oBAAI,CAAC,MAAM,IACR,KAAK,QACL,MAAM,QACN,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,IAAI,EAC1B,KAAK,EAAC,SAAS,EACf,WAAW,EAAE,MAAA,KAAK,CAAC,WAAW,mCAAI,SAAS,EAC3C,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,KAAK,CAAC,KAAK,WACpB,CACL,CAAC;AACN,CAAC,CAAC,CAAC"}

package/dist/company-profile/components/state-and-province-dropdown-input.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { FormDropdownProps, SemanticWIDTHS } from '@servicetitan/design-system';
+import { DropdownFieldState } from '@servicetitan/form';
+import { CountryWithRegions } from '../stores/company-profile-form.store';
+interface StateAndProvinceDropdownInputProps extends FormDropdownProps {
+    countryCode: string;
+    fieldState: DropdownFieldState<string>;
+    countryAndRegionData: CountryWithRegions[];
+    regionNameToCodeMap: Map<string, string>;
+    width?: SemanticWIDTHS;
+}
+export declare const StateAndProvinceDropdownInput: (props: StateAndProvinceDropdownInputProps) => JSX.Element;
+export {};
+//# sourceMappingURL=state-and-province-dropdown-input.d.ts.map

package/dist/company-profile/components/state-and-province-dropdown-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-and-province-dropdown-input.d.ts","sourceRoot":"","sources":["../../../src/company-profile/components/state-and-province-dropdown-input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAQ,iBAAiB,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAkB,MAAM,sCAAsC,CAAC;AAE1F,UAAU,kCAAmC,SAAQ,iBAAiB;IAClE,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACvC,oBAAoB,EAAE,kBAAkB,EAAE,CAAC;IAC3C,mBAAmB,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,cAAc,CAAC;CAC1B;AAKD,eAAO,MAAM,6BAA6B,UAC9B,kCAAkC,gBAuD7C,CAAC"}

package/dist/company-profile/components/state-and-province-dropdown-input.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StateAndProvinceDropdownInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const design_system_1 = require("@servicetitan/design-system");
+const mobx_react_1 = require("mobx-react");
+const toTitleCase = (str) => str.replace(/\w\S*/g, txt => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
+exports.StateAndProvinceDropdownInput = mobx_react_1.observer((props) => {
+    var _a, _b;
+    const { value, onChange, onChangeHandler } = props.fieldState;
+    react_1.default.useEffect(() => {
+        var _a;
+        /*
+         * requirement: convert any incoming state value that is a full state/province name
+         * to it's respective state code (e.g. 'Alabama' => 'AL')
+         * The incoming value may not have proper casing
+         * (salesforce data input through text input field not dropdown),
+         * so convert to proper casing to find value in map
+         * https://servicetitan.atlassian.net/browse/OX-948
+         */
+        if (value && value.length > 2) {
+            onChange((_a = props.regionNameToCodeMap.get(toTitleCase(value))) !== null && _a !== void 0 ? _a : ' ');
+        }
+    }, [onChange, props.regionNameToCodeMap, value]);
+    let americanRegionalData;
+    let canadianRegionalData;
+    props.countryAndRegionData.forEach((countryOption) => {
+        const data = countryOption.Regions.map((option) => ({
+            key: option.Code,
+            value: option.Code,
+            text: option.Name,
+        }));
+        if (countryOption.Country === 'US') {
+            americanRegionalData = data;
+        }
+        if (countryOption.Country === 'CA') {
+            canadianRegionalData = data;
+        }
+    });
+    const regionType = props.countryCode.toLowerCase() === 'canada' || props.countryCode.toLowerCase() === 'ca'
+        ? 'Province'
+        : 'State';
+    const options = regionType === 'Province' ? canadianRegionalData : americanRegionalData;
+    return (jsx_runtime_1.jsx(design_system_1.Form.Select, { search: true, fluid: true, width: (_a = props.width) !== null && _a !== void 0 ? _a : '12', label: regionType, placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : regionType, className: props.className, value: value, onChange: onChangeHandler, options: options, error: props.error }, void 0));
+});
+//# sourceMappingURL=state-and-province-dropdown-input.js.map

package/dist/company-profile/components/state-and-province-dropdown-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-and-province-dropdown-input.js","sourceRoot":"","sources":["../../../src/company-profile/components/state-and-province-dropdown-input.tsx"],"names":[],"mappings":";;;;;;;AAAA,kDAA0B;AAC1B,+DAAsF;AACtF,2CAAsC;AAYtC,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE,CAChC,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;AAE/E,QAAA,6BAA6B,GAAG,qBAAQ,CACjD,CAAC,KAAyC,EAAE,EAAE;;IAC1C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC;IAE9D,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACjB;;;;;;;WAOG;QACH,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3B,QAAQ,CAAC,MAAA,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,mCAAI,GAAG,CAAC,CAAC;SACtE;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEjD,IAAI,oBAAoB,CAAC;IACzB,IAAI,oBAAoB,CAAC;IAEzB,KAAK,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,aAAiC,EAAE,EAAE;QACrE,MAAM,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAsB,EAAE,EAAE,CAAC,CAAC;YAChE,GAAG,EAAE,MAAM,CAAC,IAAI;YAChB,KAAK,EAAE,MAAM,CAAC,IAAI;YAClB,IAAI,EAAE,MAAM,CAAC,IAAI;SACpB,CAAC,CAAC,CAAC;QACJ,IAAI,aAAa,CAAC,OAAO,KAAK,IAAI,EAAE;YAChC,oBAAoB,GAAG,IAAI,CAAC;SAC/B;QACD,IAAI,aAAa,CAAC,OAAO,KAAK,IAAI,EAAE;YAChC,oBAAoB,GAAG,IAAI,CAAC;SAC/B;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,UAAU,GACZ,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,KAAK,QAAQ,IAAI,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,KAAK,IAAI;QACpF,CAAC,CAAC,UAAU;QACZ,CAAC,CAAC,OAAO,CAAC;IAClB,MAAM,OAAO,GAAG,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CAAC;IAExF,OAAO,CACH,kBAAC,oBAAI,CAAC,MAAM,IACR,MAAM,QACN,KAAK,QACL,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,IAAI,EAC1B,KAAK,EAAE,UAAU,EACjB,WAAW,EAAE,MAAA,KAAK,CAAC,WAAW,mCAAI,UAAU,EAC5C,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,eAAe,EACzB,OAAO,EAAE,OAAQ,EACjB,KAAK,EAAE,KAAK,CAAC,KAAK,WACpB,CACL,CAAC;AACN,CAAC,CACJ,CAAC"}

package/dist/company-profile/index.d.ts

@@ -0,0 +1,7 @@
+export * from './components/company-profile-form';
+export * from './components/country-dropdown-input';
+export * from './components/state-and-province-dropdown-input';
+export * from './stores/company-profile-form.store';
+export * from './stores/__mocks__/company-profile-form-mock-data';
+export * from './utils/validators';
+//# sourceMappingURL=index.d.ts.map

package/dist/company-profile/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/company-profile/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,qCAAqC,CAAC;AACpD,cAAc,mDAAmD,CAAC;AAClE,cAAc,oBAAoB,CAAC"}

package/dist/company-profile/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/company-profile-form"), exports);
+__exportStar(require("./components/country-dropdown-input"), exports);
+__exportStar(require("./components/state-and-province-dropdown-input"), exports);
+__exportStar(require("./stores/company-profile-form.store"), exports);
+__exportStar(require("./stores/__mocks__/company-profile-form-mock-data"), exports);
+__exportStar(require("./utils/validators"), exports);
+//# sourceMappingURL=index.js.map

package/dist/company-profile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/company-profile/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,oEAAkD;AAClD,sEAAoD;AACpD,iFAA+D;AAC/D,sEAAoD;AACpD,oFAAkE;AAClE,qDAAmC"}

package/dist/company-profile/stores/__mocks__/company-profile-form-mock-data.d.ts

@@ -0,0 +1,5 @@
+import { ProfileModel } from '../company-profile-form.store';
+export declare const CompanyProfileFormCorrect: ProfileModel;
+export declare const CompanyProfileFormEmptyValues: ProfileModel;
+export declare const CompanyProfileFormCanadian: ProfileModel;
+//# sourceMappingURL=company-profile-form-mock-data.d.ts.map

package/dist/company-profile/stores/__mocks__/company-profile-form-mock-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"company-profile-form-mock-data.d.ts","sourceRoot":"","sources":["../../../../src/company-profile/stores/__mocks__/company-profile-form-mock-data.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,eAAO,MAAM,yBAAyB,EAAE,YASvC,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,YAQ3C,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,YAQxC,CAAC"}

package/dist/company-profile/stores/__mocks__/company-profile-form-mock-data.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompanyProfileFormCanadian = exports.CompanyProfileFormEmptyValues = exports.CompanyProfileFormCorrect = void 0;
+exports.CompanyProfileFormCorrect = {
+    companyName: 'Wyatt Works',
+    adminPhone: '(310) 855-8585',
+    companyStreetAddress: '123 Main St.',
+    companyCountry: 'USA',
+    companyStateCode: 'CA',
+    companyCity: 'Glendale',
+    companyZipCode: '12345',
+    einOrBn: '',
+};
+exports.CompanyProfileFormEmptyValues = {
+    companyName: '',
+    adminPhone: '',
+    companyStreetAddress: '',
+    companyCountry: '',
+    companyStateCode: '',
+    companyCity: '',
+    companyZipCode: '',
+};
+exports.CompanyProfileFormCanadian = {
+    companyName: 'Wyatt Works',
+    adminPhone: '(310) 855-8585',
+    companyStreetAddress: '123 Main St.',
+    companyCountry: 'ca',
+    companyStateCode: 'CA',
+    companyCity: 'Glendale',
+    companyZipCode: '12345',
+};
+//# sourceMappingURL=company-profile-form-mock-data.js.map

package/dist/company-profile/stores/__mocks__/company-profile-form-mock-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"company-profile-form-mock-data.js","sourceRoot":"","sources":["../../../../src/company-profile/stores/__mocks__/company-profile-form-mock-data.ts"],"names":[],"mappings":";;;AAEa,QAAA,yBAAyB,GAAiB;IACnD,WAAW,EAAE,aAAa;IAC1B,UAAU,EAAE,gBAAgB;IAC5B,oBAAoB,EAAE,cAAc;IACpC,cAAc,EAAE,KAAK;IACrB,gBAAgB,EAAE,IAAI;IACtB,WAAW,EAAE,UAAU;IACvB,cAAc,EAAE,OAAO;IACvB,OAAO,EAAE,EAAE;CACd,CAAC;AAEW,QAAA,6BAA6B,GAAiB;IACvD,WAAW,EAAE,EAAE;IACf,UAAU,EAAE,EAAE;IACd,oBAAoB,EAAE,EAAE;IACxB,cAAc,EAAE,EAAE;IAClB,gBAAgB,EAAE,EAAE;IACpB,WAAW,EAAE,EAAE;IACf,cAAc,EAAE,EAAE;CACrB,CAAC;AAEW,QAAA,0BAA0B,GAAiB;IACpD,WAAW,EAAE,aAAa;IAC1B,UAAU,EAAE,gBAAgB;IAC5B,oBAAoB,EAAE,cAAc;IACpC,cAAc,EAAE,IAAI;IACpB,gBAAgB,EAAE,IAAI;IACtB,WAAW,EAAE,UAAU;IACvB,cAAc,EAAE,OAAO;CAC1B,CAAC"}

package/dist/company-profile/stores/company-profile-form.store.d.ts

@@ -0,0 +1,65 @@
+import { FieldState, FormState } from 'formstate';
+import { InputFieldState, DropdownFieldState } from '@servicetitan/form';
+export interface DropdownRegion {
+    Code: string;
+    Name: string;
+}
+export interface CountryWithRegions {
+    Country: string;
+    Regions: DropdownRegion[];
+}
+export interface ProfileModel {
+    companyName?: string | undefined;
+    adminPhone?: string | undefined;
+    companyStreetAddress?: string | undefined;
+    companyCountry?: string | undefined;
+    companyStateCode?: string | undefined;
+    companyCity?: string | undefined;
+    companyZipCode?: string | undefined;
+    einOrBn?: string | undefined;
+}
+export interface ICompanyProfileFormType {
+    [key: string]: FieldState<any>;
+    companyName: InputFieldState<string>;
+    adminPhone: InputFieldState<string>;
+    companyStreetAddress: InputFieldState<string>;
+    companyCountry: DropdownFieldState<string>;
+    companyStateCode: DropdownFieldState<string>;
+    companyCity: InputFieldState<string>;
+    companyZipCode: InputFieldState<string>;
+    einOrBn: InputFieldState<string>;
+}
+export interface ICompanyProfileFormStore {
+    showFormError: boolean;
+    isInitializing: boolean;
+    form: FormState<ICompanyProfileFormType>;
+}
+interface CompanyProfileFormOptions {
+    phonePattern: RegExp;
+    countries: string[];
+    countryAndRegionData: CountryWithRegions[];
+    phoneMask: string;
+    regionToCodeMap: Map<string, string>;
+}
+export declare class CompanyProfileFormStore implements ICompanyProfileFormStore {
+    showFormError: boolean;
+    isInitializing: boolean;
+    countries: string[];
+    countryAndRegionData: CountryWithRegions[];
+    phoneMask: string;
+    regionToCodeMap: Map<string, string>;
+    form: FormState<ICompanyProfileFormType>;
+    constructor();
+    setFormErrorCheck: (value: boolean) => void;
+    isCanada: (country: string) => boolean;
+    get zipCodeMask(): "99999" | "*** ***";
+    get einOrBnMask(): "999999999" | "99-9999999";
+    get einOrBnInputProps(): {
+        label: string;
+        placeholder: string;
+    };
+    initForm: (formData: ProfileModel, options: CompanyProfileFormOptions) => void;
+    commitForm: () => void;
+}
+export {};
+//# sourceMappingURL=company-profile-form.store.d.ts.map

package/dist/company-profile/stores/company-profile-form.store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"company-profile-form.store.d.ts","sourceRoot":"","sources":["../../../src/company-profile/stores/company-profile-form.store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EACH,eAAe,EACf,kBAAkB,EAGrB,MAAM,oBAAoB,CAAC;AAO5B,MAAM,WAAW,cAAc;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,cAAc,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,YAAY;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,oBAAoB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC;AAOD,MAAM,WAAW,uBAAuB;IACpC,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;IAC/B,WAAW,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACpC,oBAAoB,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9C,cAAc,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC3C,gBAAgB,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC7C,WAAW,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,cAAc,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACxC,OAAO,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,wBAAwB;IACrC,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,IAAI,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;CAC5C;AAED,UAAU,yBAAyB;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,oBAAoB,EAAE,kBAAkB,EAAE,CAAC;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACxC;AAED,qBACa,uBAAwB,YAAW,wBAAwB;IACxD,aAAa,UAAS;IACtB,cAAc,UAAS;IACvB,SAAS,EAAE,MAAM,EAAE,CAAM;IACzB,oBAAoB,EAAE,kBAAkB,EAAE,CAAM;IAChD,SAAS,SAAM;IACf,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAa;IAE7D,IAAI,EAAE,SAAS,CAAC,uBAAuB,CAAC,CASrC;;IAsBH,iBAAiB,UAAW,OAAO,UAEjC;IAEF,QAAQ,YAAa,MAAM,aAGzB;IAEF,IACI,WAAW,wBAEd;IAED,IACI,WAAW,+BAEd;IAED,IACI,iBAAiB;;;MAUpB;IAGD,QAAQ,aAAc,YAAY,WAAW,yBAAyB,UAQpE;IAGF,UAAU,aAAoC;CACjD"}

package/dist/company-profile/stores/company-profile-form.store.js

@@ -0,0 +1,200 @@
+"use strict";
+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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompanyProfileFormStore = void 0;
+const formstate_1 = require("formstate");
+const form_1 = require("@servicetitan/form");
+const react_ioc_1 = require("@servicetitan/react-ioc");
+const validators_1 = require("../utils/validators");
+const mobx_1 = require("mobx");
+const required = (value) => (!value || value.length === 0) && 'cannot be empty string';
+const usZipMask = '99999';
+const canadaZipMask = '*** ***';
+const canadaBNMask = '999999999';
+const usEinMask = '99-9999999';
+let CompanyProfileFormStore = class CompanyProfileFormStore {
+    constructor() {
+        Object.defineProperty(this, "showFormError", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "isInitializing", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "countries", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "countryAndRegionData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "phoneMask", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "regionToCodeMap", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "form", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new formstate_1.FormState({
+                companyName: new form_1.InputFieldState('').validators(required),
+                adminPhone: new form_1.InputFieldState(''),
+                companyStreetAddress: new form_1.InputFieldState('').validators(required),
+                companyCountry: new form_1.DropdownFieldState('').validators(required),
+                companyStateCode: new form_1.DropdownFieldState('').validators(required),
+                companyCity: new form_1.InputFieldState('').validators(required),
+                companyZipCode: new form_1.InputFieldState('').validators(required),
+                einOrBn: new form_1.InputFieldState(''),
+            })
+        });
+        Object.defineProperty(this, "setFormErrorCheck", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (value) => {
+                this.showFormError = value;
+            }
+        });
+        Object.defineProperty(this, "isCanada", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (country) => {
+                const lowerCountry = country === null || country === void 0 ? void 0 : country.toLowerCase();
+                return lowerCountry === 'ca' || lowerCountry === 'canada';
+            }
+        });
+        Object.defineProperty(this, "initForm", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (formData, options) => {
+                this.form.$.adminPhone.validators(validators_1.PhoneValidator(options.phonePattern, false));
+                this.countries = options.countries;
+                this.countryAndRegionData = options.countryAndRegionData;
+                this.phoneMask = options.phoneMask;
+                this.regionToCodeMap = options.regionToCodeMap;
+                form_1.setFormStateValues(this.form, formData);
+                form_1.commitFormState(this.form);
+            }
+        });
+        Object.defineProperty(this, "commitForm", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => form_1.commitFormState(this.form)
+        });
+        mobx_1.makeObservable(this);
+        this.form.$.companyZipCode.validators(($) => {
+            const country = this.form.$.companyCountry.value;
+            const zip = ($ || '').toLowerCase().replace(/ /g, '');
+            return this.isCanada(country)
+                ? !/^[0-9A-Za-z]{6}$/.test(zip) && 'Invalid Zip Code'
+                : !/^\d{5}$/.test(zip) && 'Invalid Zip Code';
+        });
+        this.form.$.einOrBn.validators(($) => {
+            const errorMessage = `Invalid ${this.isCanada(this.form.$.companyCountry.value) ? 'BN' : 'EIN'}`;
+            return $ && $.length !== 9 && errorMessage;
+        });
+    }
+    get zipCodeMask() {
+        return this.isCanada(this.form.$.companyCountry.$) ? canadaZipMask : usZipMask;
+    }
+    get einOrBnMask() {
+        return this.isCanada(this.form.$.companyCountry.$) ? canadaBNMask : usEinMask;
+    }
+    get einOrBnInputProps() {
+        return this.isCanada(this.form.$.companyCountry.$)
+            ? {
+                label: 'BN Number',
+                placeholder: 'XXXXXXXXX',
+            }
+            : {
+                label: 'EIN Number',
+                placeholder: 'XX-XXXXXXX',
+            };
+    }
+};
+__decorate([
+    mobx_1.observable,
+    __metadata("design:type", Object)
+], CompanyProfileFormStore.prototype, "showFormError", void 0);
+__decorate([
+    mobx_1.observable,
+    __metadata("design:type", Object)
+], CompanyProfileFormStore.prototype, "isInitializing", void 0);
+__decorate([
+    mobx_1.observable,
+    __metadata("design:type", Array)
+], CompanyProfileFormStore.prototype, "countries", void 0);
+__decorate([
+    mobx_1.observable,
+    __metadata("design:type", Array)
+], CompanyProfileFormStore.prototype, "countryAndRegionData", void 0);
+__decorate([
+    mobx_1.observable,
+    __metadata("design:type", Object)
+], CompanyProfileFormStore.prototype, "phoneMask", void 0);
+__decorate([
+    mobx_1.observable,
+    __metadata("design:type", Map)
+], CompanyProfileFormStore.prototype, "regionToCodeMap", void 0);
+__decorate([
+    mobx_1.action,
+    __metadata("design:type", Object)
+], CompanyProfileFormStore.prototype, "setFormErrorCheck", void 0);
+__decorate([
+    mobx_1.computed,
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], CompanyProfileFormStore.prototype, "zipCodeMask", null);
+__decorate([
+    mobx_1.computed,
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], CompanyProfileFormStore.prototype, "einOrBnMask", null);
+__decorate([
+    mobx_1.computed,
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], CompanyProfileFormStore.prototype, "einOrBnInputProps", null);
+__decorate([
+    mobx_1.action,
+    __metadata("design:type", Object)
+], CompanyProfileFormStore.prototype, "initForm", void 0);
+__decorate([
+    mobx_1.action,
+    __metadata("design:type", Object)
+], CompanyProfileFormStore.prototype, "commitForm", void 0);
+CompanyProfileFormStore = __decorate([
+    react_ioc_1.injectable(),
+    __metadata("design:paramtypes", [])
+], CompanyProfileFormStore);
+exports.CompanyProfileFormStore = CompanyProfileFormStore;
+//# sourceMappingURL=company-profile-form.store.js.map

package/dist/company-profile/stores/company-profile-form.store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"company-profile-form.store.js","sourceRoot":"","sources":["../../../src/company-profile/stores/company-profile-form.store.ts"],"names":[],"mappings":"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"}

package/dist/company-profile/utils/validators.d.ts

@@ -0,0 +1,2 @@
+export declare const PhoneValidator: (pattern: RegExp, required: boolean) => ($: string) => false | "" | "Invalid phone number";
+//# sourceMappingURL=validators.d.ts.map

package/dist/company-profile/utils/validators.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.d.ts","sourceRoot":"","sources":["../../../src/company-profile/utils/validators.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,YAAa,MAAM,YAAY,OAAO,SAClD,MAAM,wCASpB,CAAC"}

package/dist/company-profile/utils/validators.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhoneValidator = void 0;
+const PhoneValidator = (pattern, required) => {
+    return ($) => {
+        const phoneString = ($ || '').replace(/[^0-9.]/g, '');
+        const isRequired = !required ? phoneString : true;
+        return (isRequired &&
+            !pattern.test(phoneString.replace(/[^0-9.]/g, '')) &&
+            'Invalid phone number');
+    };
+};
+exports.PhoneValidator = PhoneValidator;
+//# sourceMappingURL=validators.js.map

package/dist/company-profile/utils/validators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.js","sourceRoot":"","sources":["../../../src/company-profile/utils/validators.ts"],"names":[],"mappings":";;;AAAO,MAAM,cAAc,GAAG,CAAC,OAAe,EAAE,QAAiB,EAAE,EAAE;IACjE,OAAO,CAAC,CAAS,EAAE,EAAE;QACjB,MAAM,WAAW,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;QACtD,MAAM,UAAU,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;QAClD,OAAO,CACH,UAAU;YACV,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YAClD,sBAAsB,CACzB,CAAC;IACN,CAAC,CAAC;AACN,CAAC,CAAC;AAVW,QAAA,cAAc,kBAUzB"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './company-profile';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./company-profile"), exports);
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/package.json

@@ -0,0 +1,64 @@
+{
+    "name": "@servicetitan/onboarding-ui",
+    "version": "1.1.0",
+    "description": "Shared components between servicetitan monolith and Onboarding",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/servicetitan/anvil-uikit-contrib",
+        "directory": "packages/onboarding-ui"
+    },
+    "main": "./dist/index.js",
+    "typings": "./dist/index.d.ts",
+    "files": [
+        "dist",
+        "src"
+    ],
+    "peerDependencies": {
+        "@servicetitan/confirm": "~14.3.0",
+        "@servicetitan/culture": "~14.3.0",
+        "@servicetitan/data-query": "~14.3.0",
+        "@servicetitan/design-system": "~10.1.1",
+        "@servicetitan/form": "~14.3.0",
+        "@servicetitan/react-ioc": "~14.3.0",
+        "axios": "~0.21.1",
+        "formstate": "~2.0.0",
+        "mobx": "~6.3.2",
+        "mobx-react": "~7.2.0",
+        "react": "~17.0.2",
+        "react-dom": "~17.0.1",
+        "resumablejs": "~1.0.2"
+    },
+    "devDependencies": {
+        "@servicetitan/confirm": "~14.3.0",
+        "@servicetitan/culture": "~14.3.0",
+        "@servicetitan/data-query": "~14.3.0",
+        "@servicetitan/design-system": "~10.1.1",
+        "@servicetitan/form": "~14.3.0",
+        "@servicetitan/react-ioc": "~14.3.0",
+        "@types/react": "~17.0.15",
+        "@types/react-dom": "~17.0.0",
+        "axios": "~0.21.1",
+        "formstate": "~2.0.0",
+        "mobx": "~6.3.2",
+        "mobx-react": "~7.2.0",
+        "react": "~17.0.2",
+        "react-dom": "~17.0.1",
+        "resumablejs": "~1.0.2"
+    },
+    "dependencies": {
+        "classnames": "~2.3.1"
+    },
+    "keywords": [
+        "companyProfile"
+    ],
+    "author": "Suman Lama",
+    "license": "ISC",
+    "publishConfig": {
+        "access": "public"
+    },
+    "cli": {
+        "less": true,
+        "webpack": false
+    },
+    "gitHead": "67ee035810f83c8ee85519f18ee746a7417f1c6d"
+}

package/src/company-profile/components/company-profile-form.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { Form, FormDropdownProps } from '@servicetitan/design-system';
+import classNames from 'classnames';
+import { CountryDropdownInput } from './country-dropdown-input';
+import { observer } from 'mobx-react';
+import { useDependencies } from '@servicetitan/react-ioc';
+import { StateAndProvinceDropdownInput } from './state-and-province-dropdown-input';
+import { CompanyProfileFormStore } from '../stores/company-profile-form.store';
+import { MaskedInput } from '@servicetitan/form';
+
+export const CompanyProfileForm = observer((props: { className?: string }) => {
+    const [store] = useDependencies(CompanyProfileFormStore);
+
+    const { form, showFormError, zipCodeMask, einOrBnMask, einOrBnInputProps } = store;
+
+    const zipCodeOnChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+        form.$.companyZipCode.onChangeHandler(e, {
+            value: e.target.value,
+        });
+    };
+
+    const einOrBnOnChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+        form.$.einOrBn.onChangeHandler(e, {
+            value: (e.target.value || '').replace(/[^0-9.]/g, ''),
+        });
+    };
+
+    const phoneOnChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+        form.$.adminPhone.onChangeHandler(e, { value: e.target.value });
+    };
+
+    const countryOnChangeHandler = (
+        event: React.SyntheticEvent<HTMLElement>,
+        data: FormDropdownProps
+    ) => {
+        if (form.$.companyCountry.$ && data.value !== form.$.companyCountry.$) {
+            form.$.companyStateCode.onChange('');
+        }
+        form.$.companyCountry.onChangeHandler(event, data);
+    };
+
+    const {
+        companyName,
+        companyStreetAddress,
+        companyCity,
+        companyCountry,
+        companyStateCode,
+        companyZipCode,
+        adminPhone,
+        einOrBn,
+    } = store.form.$;
+
+    const zipCodeHasError = companyZipCode.hasError;
+
+    return (
+        <Form size="tiny" className={classNames(props.className, 'ta-left', 'p-x-6')}>
+            <Form.Input
+                label="Company Name"
+                placeholder="Company Name"
+                value={companyName.value}
+                onChange={companyName.onChangeHandler}
+                error={(companyName.dirty || showFormError) && companyName.hasError}
+            />
+            <Form.Input
+                label="Street Address"
+                placeholder="Street Address"
+                value={companyStreetAddress.value}
+                onChange={companyStreetAddress.onChangeHandler}
+                error={
+                    (companyStreetAddress.dirty || showFormError) && companyStreetAddress.hasError
+                }
+            />
+            <Form.Group width="equal">
+                <Form.Input
+                    fluid
+                    label="City"
+                    placeholder="City"
+                    className="p-r-0"
+                    width="6"
+                    value={companyCity.value}
+                    onChange={companyCity.onChangeHandler}
+                    error={(companyCity.dirty || showFormError) && companyCity.hasError}
+                />
+                <StateAndProvinceDropdownInput
+                    width="6"
+                    countryCode={companyCountry.value || 'USA'}
+                    fieldState={companyStateCode}
+                    error={(companyStateCode.dirty || showFormError) && companyStateCode.hasError}
+                    countryAndRegionData={store.countryAndRegionData}
+                    regionNameToCodeMap={store.regionToCodeMap}
+                />
+            </Form.Group>
+            <Form.Group width="equal">
+                <MaskedInput
+                    fluid
+                    label="ZIP Code"
+                    placeholder="ZIP Code"
+                    value={companyZipCode.value}
+                    onChange={zipCodeOnChangeHandler}
+                    mask={zipCodeMask}
+                    className="p-r-0"
+                    maskChar=" "
+                    error={(companyZipCode.dirty || showFormError) && zipCodeHasError}
+                    width={6}
+                />
+                <CountryDropdownInput
+                    width="6"
+                    value={companyCountry.value}
+                    onChange={countryOnChangeHandler}
+                    error={(companyCountry.dirty || showFormError) && companyCountry.hasError}
+                    options={store.countries.map(x => ({ key: x, value: x, text: x }))}
+                />
+            </Form.Group>
+            <Form.Group width="equal">
+                <MaskedInput
+                    fluid
+                    label="Phone Number"
+                    placeholder="Phone Number"
+                    value={adminPhone.value}
+                    onChange={phoneOnChangeHandler}
+                    error={(adminPhone.dirty || showFormError) && adminPhone.hasError}
+                    mask={store.phoneMask}
+                    width={6}
+                />
+                <MaskedInput
+                    fluid
+                    label={einOrBnInputProps.label}
+                    placeholder={einOrBnInputProps.placeholder}
+                    value={einOrBn.value}
+                    onChange={einOrBnOnChangeHandler}
+                    mask={einOrBnMask}
+                    className="p-r-0"
+                    maskChar=" "
+                    error={(einOrBn.dirty || showFormError) && einOrBn.hasError}
+                    width={6}
+                />
+            </Form.Group>
+        </Form>
+    );
+});

package/src/company-profile/components/company-profile.module.less

@@ -0,0 +1,7 @@
+.company-profile-container {
+    max-width: 650px !important;
+}
+
+.company-profile-form {
+    margin-bottom: 9px;
+}

package/src/company-profile/components/company-profile.module.less.d.ts

@@ -0,0 +1,4 @@
+export const __esModule: true;
+export const companyProfileContainer: string;
+export const companyProfileForm: string;
+

package/src/company-profile/components/country-dropdown-input.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FormDropdownProps, Form, SemanticWIDTHS } from '@servicetitan/design-system';
+import { observer } from 'mobx-react';
+import { Option } from '@servicetitan/form';
+
+export interface ICountryDropdownInput extends FormDropdownProps {
+    options: Option<string>[];
+    width?: SemanticWIDTHS;
+}
+
+export const CountryDropdownInput = observer((props: ICountryDropdownInput) => {
+    const value = props.value && props.value!.toString().toLowerCase();
+    const country = value && (value === 'canada' || value === 'ca' ? 'Canada' : 'USA');
+    return (
+        <Form.Select
+            fluid
+            search
+            width={props.width ?? '12'}
+            label="Country"
+            placeholder={props.placeholder ?? 'Country'}
+            className={props.className}
+            value={country}
+            onChange={props.onChange}
+            options={props.options}
+            error={props.error}
+        />
+    );
+});

package/src/company-profile/components/state-and-province-dropdown-input.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Form, FormDropdownProps, SemanticWIDTHS } from '@servicetitan/design-system';
+import { observer } from 'mobx-react';
+import { DropdownFieldState } from '@servicetitan/form';
+import { CountryWithRegions, DropdownRegion } from '../stores/company-profile-form.store';
+
+interface StateAndProvinceDropdownInputProps extends FormDropdownProps {
+    countryCode: string;
+    fieldState: DropdownFieldState<string>;
+    countryAndRegionData: CountryWithRegions[];
+    regionNameToCodeMap: Map<string, string>;
+    width?: SemanticWIDTHS;
+}
+
+const toTitleCase = (str: string) =>
+    str.replace(/\w\S*/g, txt => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
+
+export const StateAndProvinceDropdownInput = observer(
+    (props: StateAndProvinceDropdownInputProps) => {
+        const { value, onChange, onChangeHandler } = props.fieldState;
+
+        React.useEffect(() => {
+            /*
+             * requirement: convert any incoming state value that is a full state/province name
+             * to it's respective state code (e.g. 'Alabama' => 'AL')
+             * The incoming value may not have proper casing
+             * (salesforce data input through text input field not dropdown),
+             * so convert to proper casing to find value in map
+             * https://servicetitan.atlassian.net/browse/OX-948
+             */
+            if (value && value.length > 2) {
+                onChange(props.regionNameToCodeMap.get(toTitleCase(value)) ?? ' ');
+            }
+        }, [onChange, props.regionNameToCodeMap, value]);
+
+        let americanRegionalData;
+        let canadianRegionalData;
+
+        props.countryAndRegionData.forEach((countryOption: CountryWithRegions) => {
+            const data = countryOption.Regions.map((option: DropdownRegion) => ({
+                key: option.Code,
+                value: option.Code,
+                text: option.Name,
+            }));
+            if (countryOption.Country === 'US') {
+                americanRegionalData = data;
+            }
+            if (countryOption.Country === 'CA') {
+                canadianRegionalData = data;
+            }
+        });
+
+        const regionType =
+            props.countryCode.toLowerCase() === 'canada' || props.countryCode.toLowerCase() === 'ca'
+                ? 'Province'
+                : 'State';
+        const options = regionType === 'Province' ? canadianRegionalData : americanRegionalData;
+
+        return (
+            <Form.Select
+                search
+                fluid
+                width={props.width ?? '12'}
+                label={regionType}
+                placeholder={props.placeholder ?? regionType}
+                className={props.className}
+                value={value}
+                onChange={onChangeHandler}
+                options={options!}
+                error={props.error}
+            />
+        );
+    }
+);

package/src/company-profile/index.ts

@@ -0,0 +1,6 @@
+export * from './components/company-profile-form';
+export * from './components/country-dropdown-input';
+export * from './components/state-and-province-dropdown-input';
+export * from './stores/company-profile-form.store';
+export * from './stores/__mocks__/company-profile-form-mock-data';
+export * from './utils/validators';

package/src/company-profile/stores/__mocks__/company-profile-form-mock-data.ts

@@ -0,0 +1,32 @@
+import { ProfileModel } from '../company-profile-form.store';
+
+export const CompanyProfileFormCorrect: ProfileModel = {
+    companyName: 'Wyatt Works',
+    adminPhone: '(310) 855-8585',
+    companyStreetAddress: '123 Main St.',
+    companyCountry: 'USA',
+    companyStateCode: 'CA',
+    companyCity: 'Glendale',
+    companyZipCode: '12345',
+    einOrBn: '',
+};
+
+export const CompanyProfileFormEmptyValues: ProfileModel = {
+    companyName: '',
+    adminPhone: '',
+    companyStreetAddress: '',
+    companyCountry: '',
+    companyStateCode: '',
+    companyCity: '',
+    companyZipCode: '',
+};
+
+export const CompanyProfileFormCanadian: ProfileModel = {
+    companyName: 'Wyatt Works',
+    adminPhone: '(310) 855-8585',
+    companyStreetAddress: '123 Main St.',
+    companyCountry: 'ca',
+    companyStateCode: 'CA',
+    companyCity: 'Glendale',
+    companyZipCode: '12345',
+};

package/src/company-profile/stores/__tests__/company-profile-form.store.test.ts

@@ -0,0 +1,41 @@
+import { Container } from '@servicetitan/react-ioc';
+import { CompanyProfileFormStore, ICompanyProfileFormStore } from '../company-profile-form.store';
+import {
+    CompanyProfileFormCorrect,
+    CompanyProfileFormEmptyValues,
+    CompanyProfileFormCanadian,
+} from '../__mocks__/company-profile-form-mock-data';
+
+const rootContainer = new Container();
+rootContainer.bind<ICompanyProfileFormStore>(CompanyProfileFormStore).toSelf();
+
+const initContainer = () => {
+    const container = new Container();
+    container.parent = rootContainer;
+    return container;
+};
+
+describe('Company Profile Form Store [View Functionality] Tests', () => {
+    test('Should initialize correct data with no validation errors', async () => {
+        const container = initContainer();
+        const store = container.get(CompanyProfileFormStore);
+        store.initForm(CompanyProfileFormCorrect, { phonePattern: /(.*)/ } as any);
+        await store.form.validate();
+        expect(store.form.hasError).toBeFalsy();
+    });
+
+    test('Should initialize incorrect data with validation errors', async () => {
+        const container = initContainer();
+        const store = container.get(CompanyProfileFormStore);
+        store.initForm(CompanyProfileFormEmptyValues, { phonePattern: /(.*)/ } as any);
+        await store.form.validate();
+        expect(store.form.hasError).toBeTruthy();
+    });
+
+    test('Expect forms initialized with CompanyCountry set to Canada show correct phone masking', () => {
+        const container = initContainer();
+        const store = container.get(CompanyProfileFormStore);
+        store.initForm(CompanyProfileFormCanadian, { phonePattern: /(.*)/ } as any);
+        expect(store.zipCodeMask).toBe('*** ***');
+    });
+});

package/src/company-profile/stores/company-profile-form.store.ts

@@ -0,0 +1,151 @@
+import { FieldState, FormState } from 'formstate';
+import {
+    InputFieldState,
+    DropdownFieldState,
+    commitFormState,
+    setFormStateValues,
+} from '@servicetitan/form';
+import { injectable } from '@servicetitan/react-ioc';
+import { PhoneValidator } from '../utils/validators';
+import { computed, action, observable, makeObservable } from 'mobx';
+
+const required = (value: string) => (!value || value.length === 0) && 'cannot be empty string';
+
+export interface DropdownRegion {
+    Code: string;
+    Name: string;
+}
+
+export interface CountryWithRegions {
+    Country: string;
+    Regions: DropdownRegion[];
+}
+
+export interface ProfileModel {
+    companyName?: string | undefined;
+    adminPhone?: string | undefined;
+    companyStreetAddress?: string | undefined;
+    companyCountry?: string | undefined;
+    companyStateCode?: string | undefined;
+    companyCity?: string | undefined;
+    companyZipCode?: string | undefined;
+    einOrBn?: string | undefined;
+}
+
+const usZipMask = '99999';
+const canadaZipMask = '*** ***';
+const canadaBNMask = '999999999';
+const usEinMask = '99-9999999';
+
+export interface ICompanyProfileFormType {
+    [key: string]: FieldState<any>;
+    companyName: InputFieldState<string>;
+    adminPhone: InputFieldState<string>;
+    companyStreetAddress: InputFieldState<string>;
+    companyCountry: DropdownFieldState<string>;
+    companyStateCode: DropdownFieldState<string>;
+    companyCity: InputFieldState<string>;
+    companyZipCode: InputFieldState<string>;
+    einOrBn: InputFieldState<string>;
+}
+
+export interface ICompanyProfileFormStore {
+    showFormError: boolean;
+    isInitializing: boolean;
+    form: FormState<ICompanyProfileFormType>;
+}
+
+interface CompanyProfileFormOptions {
+    phonePattern: RegExp;
+    countries: string[];
+    countryAndRegionData: CountryWithRegions[];
+    phoneMask: string;
+    regionToCodeMap: Map<string, string>;
+}
+
+@injectable()
+export class CompanyProfileFormStore implements ICompanyProfileFormStore {
+    @observable showFormError = false;
+    @observable isInitializing = false;
+    @observable countries: string[] = [];
+    @observable countryAndRegionData: CountryWithRegions[] = [];
+    @observable phoneMask = '';
+    @observable regionToCodeMap: Map<string, string> = new Map();
+
+    form: FormState<ICompanyProfileFormType> = new FormState({
+        companyName: new InputFieldState('').validators(required),
+        adminPhone: new InputFieldState(''),
+        companyStreetAddress: new InputFieldState('').validators(required),
+        companyCountry: new DropdownFieldState('').validators(required),
+        companyStateCode: new DropdownFieldState('').validators(required),
+        companyCity: new InputFieldState('').validators(required),
+        companyZipCode: new InputFieldState('').validators(required),
+        einOrBn: new InputFieldState(''),
+    });
+
+    constructor() {
+        makeObservable(this);
+
+        this.form.$.companyZipCode.validators(($: string) => {
+            const country = this.form.$.companyCountry.value;
+            const zip = ($ || '').toLowerCase().replace(/ /g, '');
+            return this.isCanada(country)
+                ? !/^[0-9A-Za-z]{6}$/.test(zip) && 'Invalid Zip Code'
+                : !/^\d{5}$/.test(zip) && 'Invalid Zip Code';
+        });
+
+        this.form.$.einOrBn.validators(($: string) => {
+            const errorMessage = `Invalid ${
+                this.isCanada(this.form.$.companyCountry.value) ? 'BN' : 'EIN'
+            }`;
+            return $ && $.length !== 9 && errorMessage;
+        });
+    }
+
+    @action
+    setFormErrorCheck = (value: boolean) => {
+        this.showFormError = value;
+    };
+
+    isCanada = (country: string) => {
+        const lowerCountry = country?.toLowerCase();
+        return lowerCountry === 'ca' || lowerCountry === 'canada';
+    };
+
+    @computed
+    get zipCodeMask() {
+        return this.isCanada(this.form.$.companyCountry.$) ? canadaZipMask : usZipMask;
+    }
+
+    @computed
+    get einOrBnMask() {
+        return this.isCanada(this.form.$.companyCountry.$) ? canadaBNMask : usEinMask;
+    }
+
+    @computed
+    get einOrBnInputProps() {
+        return this.isCanada(this.form.$.companyCountry.$)
+            ? {
+                  label: 'BN Number',
+                  placeholder: 'XXXXXXXXX',
+              }
+            : {
+                  label: 'EIN Number',
+                  placeholder: 'XX-XXXXXXX',
+              };
+    }
+
+    @action
+    initForm = (formData: ProfileModel, options: CompanyProfileFormOptions) => {
+        this.form.$.adminPhone.validators(PhoneValidator(options.phonePattern, false));
+        this.countries = options.countries;
+        this.countryAndRegionData = options.countryAndRegionData;
+        this.phoneMask = options.phoneMask;
+        this.regionToCodeMap = options.regionToCodeMap;
+        setFormStateValues(this.form, formData);
+        commitFormState(this.form);
+    };
+
+    @action
+    commitForm = () => commitFormState(this.form);
+}

package/src/company-profile/utils/validators.ts

@@ -0,0 +1,11 @@
+export const PhoneValidator = (pattern: RegExp, required: boolean) => {
+    return ($: string) => {
+        const phoneString = ($ || '').replace(/[^0-9.]/g, '');
+        const isRequired = !required ? phoneString : true;
+        return (
+            isRequired &&
+            !pattern.test(phoneString.replace(/[^0-9.]/g, '')) &&
+            'Invalid phone number'
+        );
+    };
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from './company-profile';