@servicetitan/mpa-components 1.8.0 → 1.9.0

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/settings/settings-section/index.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAe,MAAM,6BAA6B,CAAC;AAW9E,MAAM,CAAC,MAAM,eAAe,GAAqB,QAAQ,CACrD,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,EAAgB,EAAE,EAAE,CAAC,CACvF,MAAC,MAAM,kBAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,iBAC7E,MAAC,MAAM,CAAC,OAAO,eACV,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CACzB,KAAC,IAAI,kBAAC,IAAI,EAAE,CAAC,EAAE,IAAI,QAAC,SAAS,EAAE,GAAG,QAAQ,QAAQ,gBAC7C,KAAK,IACH,CACV,CAAC,CAAC,CAAC,CACA,KAAK,CACR,EACA,IAAI,IAAI,CACL,KAAC,IAAI,kBAAC,IAAI,EAAE,CAAC,EAAE,OAAO,QAAC,SAAS,EAAE,GAAG,QAAQ,OAAO,gBAC/C,IAAI,IACF,CACV,IACY,EACjB,KAAC,MAAM,CAAC,OAAO,cACX,KAAC,IAAI,kBAAC,MAAM,sBACR,KAAC,IAAI,CAAC,OAAO,kBAAC,SAAS,EAAE,GAAG,QAAQ,UAAU,gBAAG,QAAQ,IAAgB,IACtE,GACM,KACZ,CACZ,CACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/settings/settings-section/index.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAe,MAAM,6BAA6B,CAAC;AAW9E,MAAM,CAAC,MAAM,eAAe,GAAqB,QAAQ,CACrD,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,EAAgB,EAAE,EAAE,CAAC,CACvF,MAAC,MAAM,kBAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,iBAC7E,MAAC,MAAM,CAAC,OAAO,eACV,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CACzB,KAAC,IAAI,kBAAC,IAAI,EAAE,CAAC,EAAE,IAAI,QAAC,SAAS,EAAE,GAAG,QAAQ,QAAQ,gBAC7C,KAAK,IACH,CACV,CAAC,CAAC,CAAC,CACA,KAAK,CACR,EACA,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACxB,KAAC,IAAI,kBAAC,IAAI,EAAE,CAAC,EAAE,OAAO,QAAC,SAAS,EAAE,GAAG,QAAQ,OAAO,gBAC/C,IAAI,IACF,CACV,CAAC,CAAC,CAAC,CACA,IAAI,CACP,IACY,EACjB,KAAC,MAAM,CAAC,OAAO,cACX,KAAC,IAAI,kBAAC,MAAM,sBACR,KAAC,IAAI,CAAC,OAAO,kBAAC,SAAS,EAAE,GAAG,QAAQ,UAAU,gBAAG,QAAQ,IAAgB,IACtE,GACM,KACZ,CACZ,CACJ,CAAC"}

package/package.json

@@ -3,7 +3,7 @@
     "repository": {
         "url": "https://github.com/servicetitan/marketing"
     },
-    "version": "1.8.0",
+    "version": "1.9.0",
     "description": "",
     "main": "./lib/index.js",
     "typings": "./lib/index.d.ts",
@@ -30,5 +30,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "f9ea8fb7e8b10f8d969e7afa52ffb9bb76de07b7"
+    "gitHead": "f962c4d0df9cf9d0e724d910d437450d5bf541fa"
 }

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

@@ -1,50 +1,42 @@
 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';
 import omit from 'lodash/omit';
 
-@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'),
-        companyWebsite: new InputFieldState('www.acme.com'),
-        yearEstablished: new InputFieldState(1999),
-    });
-}
-
-export const CompanyDetailsWithoutWebsite = provide({ singletons: [DetailsStore] })(() => {
-    const [store] = useDependencies(DetailsStore);
+const 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'),
+    companyWebsite: new InputFieldState('www.acme.com'),
+    yearEstablished: new InputFieldState(1999),
+});
 
+export const CompanyDetailsWithoutWebsite = () => {
     return (
         <Component
-            formState={omit(store.form.$, ['companyWebsite'])}
+            formState={omit(form.$, ['companyWebsite'])}
             logoPicker={<LogoPicker />}
             handleCompanyEmailBlur={() => alert('company email blurred')}
         />
     );
-});
-
-export const CompanyDetails = provide({ singletons: [DetailsStore] })(() => {
-    const [store] = useDependencies(DetailsStore);
+};
 
+export const CompanyDetails = () => {
     return (
         <Component
-            formState={store.form.$}
+            formState={form.$}
             logoPicker={<LogoPicker />}
             handleCompanyEmailBlur={() => alert('company email blurred')}
         />
     );
-});
+};
 
 export default {
     title: 'MPA Components/settings/CompanyDetails',

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

@@ -1,5 +1,4 @@
 import { InputFieldState, TextAreaFieldState } from '@servicetitan/form';
-import { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
 import { FormState } from 'formstate';
 
 import { CompanyEmailFooter as Component } from '.';
@@ -10,7 +9,6 @@ export default {
     parameters: {},
 };
 
-@injectable()
 class CompanyEmailStore {
     form = new FormState({
         legalCopy: new TextAreaFieldState('Legal copy example'),
@@ -19,8 +17,8 @@ class CompanyEmailStore {
     });
 }
 
-export const CompanyEmailFooter = provide({ singletons: [CompanyEmailStore] })(() => {
-    const [store] = useDependencies(CompanyEmailStore);
+const store = new CompanyEmailStore();
 
+export const CompanyEmailFooter = () => {
     return <Component formState={store.form.$} />;
-});
+};

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

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

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

@@ -1,5 +1,4 @@
 import { InputFieldState } from '@servicetitan/form';
-import { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
 import { FormState } from 'formstate';
 
 import { CompanyEmailSender as Simple, CompanyEmailSenderCustomDomain as Custom } from '.';
@@ -10,7 +9,6 @@ export default {
     parameters: {},
 };
 
-@injectable()
 class CompanyEmailSenderStore {
     form = new FormState({
         senderEmail: new InputFieldState('email@acme.com'),
@@ -19,16 +17,12 @@ class CompanyEmailSenderStore {
     });
 }
 
-export const CompanyEmailSenderCustomDomain = provide({ singletons: [CompanyEmailSenderStore] })(
-    () => {
-        const [store] = useDependencies(CompanyEmailSenderStore);
+const store = new CompanyEmailSenderStore();
 
-        return <Custom formState={store.form.$} senderTld="tld.com" />;
-    }
-);
-
-export const CompanyEmailSender = provide({ singletons: [CompanyEmailSenderStore] })(() => {
-    const [store] = useDependencies(CompanyEmailSenderStore);
+export const CompanyEmailSenderCustomDomain = () => {
+    return <Custom formState={store.form.$} senderTld="tld.com" />;
+};
 
+export const CompanyEmailSender = () => {
     return <Simple senderName={store.form.$.senderName} senderEmail={store.form.$.senderEmail} />;
-});
+};

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

@@ -24,6 +24,7 @@ export interface CompanyTradesPickerProps<TradeType extends string | number = st
     layout?: LayoutProps['type'];
     className?: string;
     title?: ReactNode;
+    text?: ReactNode | string;
     columns?: number;
     onTradeChange(t?: TradeType): void;
 }
@@ -35,6 +36,7 @@ export function CompanyTradesPicker<T extends string | number = string>({
     className,
     columns = 4,
     title = 'Select Your Trades',
+    text = 'Choose which trades describe your business so we can give you relevant content and merge tags.',
 }: CompanyTradesPickerProps<T>) {
     const rows = useMemo(
         () => chunk(trades, columns).map((row, idx) => ({ row, key: `row=${idx}` })),
@@ -47,7 +49,7 @@ export function CompanyTradesPicker<T extends string | number = string>({
             layout={layout}
             title={title}
             qaPrefix="qa-settings-select-your-trades"
-            text="Choose which trades describe your business so we can give you relevant content and merge tags."
+            text={text}
         >
             <Grid columns={columns as GridColumnsCount}>
                 {rows.map(({ row, key }) => {

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

@@ -1,5 +1,4 @@
 import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
-import { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
 import { FormState } from 'formstate';
 import { DoubleOptIn as Component } from '.';
 
@@ -9,7 +8,6 @@ export default {
     parameters: {},
 };
 
-@injectable()
 class DoubleOptInStore {
     form = new FormState({
         emailSubject: new InputFieldState('Jump in'),
@@ -20,9 +18,8 @@ class DoubleOptInStore {
     });
 }
 
-export const DoubleOptIn = provide({
-    singletons: [DoubleOptInStore],
-})(() => {
-    const [store] = useDependencies(DoubleOptInStore);
+const store = new DoubleOptInStore();
+
+export const DoubleOptIn = () => {
     return <Component formState={store.form.$} />;
-});
+};

package/src/components/settings/logo-picker/index.tsx

@@ -41,6 +41,7 @@ export interface LogoPickerProps {
     minDimensions?: { width: number; height: number };
     tips?: ReactNode;
     deletable?: boolean;
+    isGrid?: boolean;
 
     deleteImage(): void;
     downloadImage?(): void;
@@ -64,17 +65,15 @@ export const LogoPicker: FC<LogoPickerProps> = observer(
         setError,
         deletable = true,
         tips = DEFAULT_LOGO_TIPS,
+        isGrid = true,
     }) => {
         const [recommendLargerImage, setRecommendLargerImage] = useState(false);
         const [localError, setLocalError] = useState('');
         const [isLoading, setIsLoading] = useState(false);
         const [sizeError, setSizeError] = useState('');
 
-        const fileRef = useRef<HTMLInputElement>(null);
         const formattedMaxSize = useRef(formatBytes(maxSize, 2, false));
 
-        const handleClick = () => fileRef.current?.click();
-
         useEffect(() => {
             const handleImageUrlChange = async () => {
                 if (!imageUrl || !minDimensions) {
@@ -169,77 +168,28 @@ export const LogoPicker: FC<LogoPickerProps> = observer(
                         accept="image/png, image/jpeg"
                         onSelected={onFileChange}
                     />
-                ) : (
+                ) : isGrid ? (
                     <Grid>
                         <Grid.Column width={4}>
-                            <Card raised padding="none" className={Styles.logoCard}>
-                                <Card.Section>
-                                    <img
-                                        className="qa-settings-logo-image"
-                                        src={imageUrl}
-                                        alt="logo"
-                                    />
-                                    <div className={Styles.logoAction}>
-                                        <ButtonGroup>
-                                            <Tooltip el="div" text="Replace">
-                                                <Button
-                                                    outline
-                                                    iconName="sync"
-                                                    onClick={handleClick}
-                                                    className="qa-settings-logo-replace shadow-1-i bg-white-i"
-                                                />
-                                                <input
-                                                    hidden
-                                                    type="file"
-                                                    accept="image/png, image/jpeg"
-                                                    ref={fileRef}
-                                                    onChange={({ currentTarget: { files } }) =>
-                                                        onFileChange(files)
-                                                    }
-                                                />
-                                            </Tooltip>
-                                            <Tooltip el="div" text="Download">
-                                                {downloadImage || image !== undefined ? (
-                                                    <Button
-                                                        className="qa-settings-logo-download shadow-1-i bg-white-i"
-                                                        disabled={image !== undefined}
-                                                        onClick={downloadImage}
-                                                        iconName="file_download"
-                                                        outline
-                                                    />
-                                                ) : (
-                                                    <a
-                                                        download={`logo.${imageUrl
-                                                            .split('.')
-                                                            .pop()}`}
-                                                        rel="noreferrer"
-                                                        target="_blank"
-                                                        href={imageUrl}
-                                                    >
-                                                        <Button
-                                                            className="qa-settings-logo-download shadow-1-i bg-white-i"
-                                                            iconName="file_download"
-                                                            outline
-                                                        />
-                                                    </a>
-                                                )}
-                                            </Tooltip>
-                                            {deletable && (
-                                                <Tooltip el="div" text="Delete">
-                                                    <Button
-                                                        className="qa-settings-logo-delete shadow-1-i bg-white-i"
-                                                        onClick={deleteImage}
-                                                        iconName="delete"
-                                                        outline
-                                                    />
-                                                </Tooltip>
-                                            )}
-                                        </ButtonGroup>
-                                    </div>
-                                </Card.Section>
-                            </Card>
+                            <LogoCard
+                                imageUrl={imageUrl}
+                                onFileChange={onFileChange}
+                                image={image}
+                                downloadImage={downloadImage}
+                                deletable={deletable}
+                                deleteImage={deleteImage}
+                            />
                         </Grid.Column>
                     </Grid>
+                ) : (
+                    <LogoCard
+                        imageUrl={imageUrl}
+                        onFileChange={onFileChange}
+                        image={image}
+                        downloadImage={downloadImage}
+                        deletable={deletable}
+                        deleteImage={deleteImage}
+                    />
                 )}
                 {recommendLargerImage && minDimensions && (imageUrl || image) && (
                     <Banner
@@ -258,3 +208,85 @@ export const LogoPicker: FC<LogoPickerProps> = observer(
         );
     }
 );
+
+interface LogoCardProps {
+    imageUrl: string;
+    image?: File;
+    deletable?: boolean;
+    onFileChange(files: FileList | null): void;
+    downloadImage?(): void;
+    deleteImage(): void;
+}
+
+const LogoCard: FC<LogoCardProps> = ({
+    imageUrl,
+    onFileChange,
+    image,
+    downloadImage,
+    deletable = true,
+    deleteImage,
+}) => {
+    const fileRef = useRef<HTMLInputElement>(null);
+    const handleClick = () => fileRef.current?.click();
+
+    return (
+        <Card raised padding="none" className={Styles.logoCard}>
+            <Card.Section>
+                <img className="qa-settings-logo-image" src={imageUrl} alt="logo" />
+                <div className={Styles.logoAction}>
+                    <ButtonGroup>
+                        <Tooltip el="div" text="Replace">
+                            <Button
+                                outline
+                                iconName="sync"
+                                onClick={handleClick}
+                                className="qa-settings-logo-replace shadow-1-i bg-white-i"
+                            />
+                            <input
+                                hidden
+                                type="file"
+                                accept="image/png, image/jpeg"
+                                ref={fileRef}
+                                onChange={({ currentTarget: { files } }) => onFileChange(files)}
+                            />
+                        </Tooltip>
+                        <Tooltip el="div" text="Download">
+                            {downloadImage || image !== undefined ? (
+                                <Button
+                                    className="qa-settings-logo-download shadow-1-i bg-white-i"
+                                    disabled={image !== undefined}
+                                    onClick={downloadImage}
+                                    iconName="file_download"
+                                    outline
+                                />
+                            ) : (
+                                <a
+                                    download={`logo.${imageUrl.split('.').pop()}`}
+                                    rel="noreferrer"
+                                    target="_blank"
+                                    href={imageUrl}
+                                >
+                                    <Button
+                                        className="qa-settings-logo-download shadow-1-i bg-white-i"
+                                        iconName="file_download"
+                                        outline
+                                    />
+                                </a>
+                            )}
+                        </Tooltip>
+                        {deletable && (
+                            <Tooltip el="div" text="Delete">
+                                <Button
+                                    className="qa-settings-logo-delete shadow-1-i bg-white-i"
+                                    onClick={deleteImage}
+                                    iconName="delete"
+                                    outline
+                                />
+                            </Tooltip>
+                        )}
+                    </ButtonGroup>
+                </div>
+            </Card.Section>
+        </Card>
+    );
+};

package/src/components/settings/opt-out-message/opt-out-message.stories.tsx

@@ -1,5 +1,4 @@
 import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
-import { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
 import { FormState } from 'formstate';
 import { OptOutMessage as Component } from '.';
 
@@ -9,7 +8,6 @@ export default {
     parameters: {},
 };
 
-@injectable()
 class OptOutStore {
     form = new FormState({
         subjectLine: new InputFieldState('Good bye'),
@@ -22,10 +20,8 @@ class OptOutStore {
     });
 }
 
-export const OptOutMessage = provide({
-    singletons: [OptOutStore],
-})(() => {
-    const [store] = useDependencies(OptOutStore);
+const store = new OptOutStore();
 
+export const OptOutMessage = () => {
     return <Component formState={store.form.$} />;
-});
+};

package/src/components/settings/settings-section/index.tsx

@@ -6,7 +6,7 @@ import { Text, Card, Layout, LayoutProps } from '@servicetitan/design-system';
 
 export interface SectionProps {
     title: ReactNode;
-    text?: JSX.Element | string;
+    text?: ReactNode | string;
     children: ReactNode;
     qaPrefix?: string;
     className?: string;
@@ -24,10 +24,12 @@ export const SettingsSection: FC<SectionProps> = observer(
                 ) : (
                     title
                 )}
-                {text && (
+                {typeof text === 'string' ? (
                     <Text size={2} subdued className={`${qaPrefix}-text`}>
                         {text}
                     </Text>
+                ) : (
+                    text
                 )}
             </Layout.Section>
             <Layout.Section>