@servicetitan/mpa-components 1.8.0 → 1.10.0

package/src/components/settings/company-email-sender/custom-domain-sender.tsx

@@ -40,7 +40,7 @@ export const CompanyEmailSender: FC<CompanyEmailSenderProps> = observer(
 
                 senderName.onChange(data.value);
             },
-            [senderName]
+            [senderName],
         );
 
         const handleSenderDomainChange = useCallback(
@@ -51,7 +51,7 @@ export const CompanyEmailSender: FC<CompanyEmailSenderProps> = observer(
 
                 senderDomain.onChange(data.value);
             },
-            [senderDomain]
+            [senderDomain],
         );
 
         const handleSenderEmailChange = useCallback(
@@ -62,7 +62,7 @@ export const CompanyEmailSender: FC<CompanyEmailSenderProps> = observer(
 
                 senderEmail.onChange(data.value);
             },
-            [senderEmail]
+            [senderEmail],
         );
 
         return (
@@ -156,5 +156,5 @@ export const CompanyEmailSender: FC<CompanyEmailSenderProps> = observer(
                 </Form>
             </SettingsSection>
         );
-    }
+    },
 );

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

@@ -22,7 +22,7 @@ export const CompanyEmailSender: FC<CompanyEmailSender> = observer(
 
                 senderName.onChange(data.value);
             },
-            [senderName]
+            [senderName],
         );
 
         const handleSenderEmailBlur = useCallback(() => {
@@ -71,5 +71,5 @@ export const CompanyEmailSender: FC<CompanyEmailSender> = observer(
                 </Form>
             </SettingsSection>
         );
-    }
+    },
 );

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

@@ -68,10 +68,10 @@ export function CompanyTradesPicker() {
                 trades.map(trade => ({
                     ...trade,
                     active: trade.value === t ? !trade.active : trade.active,
-                }))
+                })),
             );
         },
-        [trades]
+        [trades],
     );
 
     return <Component<TradeType> trades={trades} onTradeChange={selectTrade} />;

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,10 +36,11 @@ 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}` })),
-        [trades, columns]
+        [trades, columns],
     );
 
     return (
@@ -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/double-opt-in/index.tsx

@@ -40,7 +40,7 @@ export const DoubleOptIn: FC<DoubleOptInProps> = observer(
                 onHandleClickEnable?.(checked);
                 enabled.onChange(checked);
             },
-            [enabled, onHandleClickEnable]
+            [enabled, onHandleClickEnable],
         );
 
         const [Confirm, handleConfirmed] = useConfirm(handleClickEnable);
@@ -100,7 +100,7 @@ export const DoubleOptIn: FC<DoubleOptInProps> = observer(
                     <Form.Input
                         className={classnames(
                             Styles.buttonInput,
-                            'm-b-2-i qa-double-opt-in-button-text'
+                            'm-b-2-i qa-double-opt-in-button-text',
                         )}
                         value={emailButtonText.value}
                         onChange={emailButtonText.onChangeHandler}
@@ -145,5 +145,5 @@ export const DoubleOptIn: FC<DoubleOptInProps> = observer(
                 />
             </SettingsSection>
         );
-    }
+    },
 );

package/src/components/settings/email-preview/email-preview.tsx

@@ -50,7 +50,7 @@ export const EmailPreview: FC<EmailPreviewProps> = ({
                             <a
                                 className={classnames(
                                     Styles.button,
-                                    'qa-email-preview-button-text'
+                                    'qa-email-preview-button-text',
                                 )}
                             >
                                 {buttonText}

package/src/components/settings/email-preview/opt-in-email-preview.tsx

@@ -26,5 +26,5 @@ export const OptInEmailPreview: FC<OptInEmailPreviewProps> = observer(
                 footer={footerText}
             />
         );
-    }
+    },
 );

package/src/components/settings/email-validation/index.tsx

@@ -44,7 +44,7 @@ export interface EmailValidationTableRecord<T> {
 
 export interface EmailValidationProps<
     TEmailValidationType extends string | number = string,
-    TEmailValidationResult extends string | number = string
+    TEmailValidationResult extends string | number = string,
 > {
     className?: string;
     loading: boolean;
@@ -56,7 +56,7 @@ export interface EmailValidationProps<
 
 interface EmailValidationHocOptions<
     TEmailValidationType extends string | number = string,
-    TEmailValidationResult extends string | number = string
+    TEmailValidationResult extends string | number = string,
 > {
     resultToText: Map<TEmailValidationResult, string>;
     levelTypeMap: {
@@ -71,7 +71,7 @@ interface EmailValidationHocOptions<
 
 export function emailValidationHoc<
     TEmailValidationType extends string | number = string,
-    TEmailValidationResult extends string | number = string
+    TEmailValidationResult extends string | number = string,
 >({
     resultToText,
     levelTypeMap,
@@ -81,7 +81,7 @@ export function emailValidationHoc<
 }: EmailValidationHocOptions<TEmailValidationType, TEmailValidationResult>) {
     const ResultColumnMenuFilter = multiSelectColumnMenuFilter(
         [...resultToText.keys()],
-        result => resultToText.get(result)!
+        result => resultToText.get(result)!,
     );
 
     const ResultCell: FC<TableCellProps> = props => {
@@ -115,7 +115,7 @@ export function emailValidationHoc<
             (riskType: TEmailValidationType) => () => {
                 setValidationRiskType(riskType);
             },
-            [setValidationRiskType]
+            [setValidationRiskType],
         );
 
         const handleClickLearnMore = () => {

package/src/components/settings/form-errors-list/index.tsx

@@ -20,7 +20,7 @@ export const FormErrorsList: FC<FormErrorsListProps> = observer(
                             {field.error}
                         </li>
                     ) : null;
-                }
+                },
             );
         };
 
@@ -39,5 +39,5 @@ export const FormErrorsList: FC<FormErrorsListProps> = observer(
                 <ul className="qa-settings-email-error-list">{getErrors()}</ul>
             </Banner>
         );
-    }
+    },
 );

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) {
@@ -85,7 +84,7 @@ export const LogoPicker: FC<LogoPickerProps> = observer(
                 try {
                     const size = await getImageSize(imageUrl);
                     setRecommendLargerImage(
-                        size.height < minDimensions.height || size.width < minDimensions.width
+                        size.height < minDimensions.height || size.width < minDimensions.width,
                     );
                     setLocalError('');
 
@@ -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
@@ -256,5 +206,87 @@ export const LogoPicker: FC<LogoPickerProps> = observer(
                 )}
             </div>
         );
-    }
+    },
 );
+
+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/index.tsx

@@ -106,7 +106,7 @@ export const OptOutMessage: FC<OptOutMessageProps> = observer(
                     <Form.Input
                         className={classnames(
                             Styles.buttonInput,
-                            'm-b-3-i qa-opt-out-message-button-text'
+                            'm-b-3-i qa-opt-out-message-button-text',
                         )}
                         value={buttonText.value}
                         onChange={buttonText.onChangeHandler}
@@ -153,5 +153,5 @@ export const OptOutMessage: FC<OptOutMessageProps> = observer(
                 <OptOutEmailPreview {...formState} open={isPreviewOpen} onClose={closePreview} />
             </SettingsSection>
         );
-    }
+    },
 );

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>
@@ -36,5 +38,5 @@ export const SettingsSection: FC<SectionProps> = observer(
                 </Card>
             </Layout.Section>
         </Layout>
-    )
+    ),
 );