@servicetitan/mpa-components 0.5.0 → 1.0.0

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

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import classnames from 'classnames';
 
 import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
-import { Form, Text, ToggleSwitch, Button } from '@servicetitan/design-system';
+import { Form, Text, ToggleSwitch, Button, LayoutProps } from '@servicetitan/design-system';
 import { useConfirm } from '@servicetitan/confirm';
 
 import { SettingsSection } from '../settings-section';
@@ -23,121 +23,127 @@ export interface DoubleOptInPropsFormState {
 }
 export interface DoubleOptInProps {
     formState: DoubleOptInPropsFormState;
+    layout?: LayoutProps['type'];
+    className?: string;
     onHandleClickEnable?(checkd: boolean): void;
 }
 
-export const DoubleOptIn: FC<DoubleOptInProps> = observer(({ onHandleClickEnable, formState }) => {
-    const { emailSubject, emailHeader, emailBody, emailButtonText, enabled } = formState;
-    const [isPreviewOpen, setIsPreviewOpen] = useState(false);
-    const openPreview = useCallback(() => setIsPreviewOpen(true), [setIsPreviewOpen]);
-    const closePreview = useCallback(() => setIsPreviewOpen(false), [setIsPreviewOpen]);
+export const DoubleOptIn: FC<DoubleOptInProps> = observer(
+    ({ onHandleClickEnable, formState, layout, className }) => {
+        const { emailSubject, emailHeader, emailBody, emailButtonText, enabled } = formState;
+        const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+        const openPreview = useCallback(() => setIsPreviewOpen(true), [setIsPreviewOpen]);
+        const closePreview = useCallback(() => setIsPreviewOpen(false), [setIsPreviewOpen]);
 
-    const handleClickEnable = useCallback(
-        (_0: any, checked: boolean) => {
-            onHandleClickEnable?.(checked);
-            enabled.onChange(checked);
-        },
-        [enabled, onHandleClickEnable]
-    );
+        const handleClickEnable = useCallback(
+            (_0: any, checked: boolean) => {
+                onHandleClickEnable?.(checked);
+                enabled.onChange(checked);
+            },
+            [enabled, onHandleClickEnable]
+        );
 
-    const [Confirm, handleConfirmed] = useConfirm(handleClickEnable);
+        const [Confirm, handleConfirmed] = useConfirm(handleClickEnable);
 
-    return (
-        <SettingsSection
-            qaPrefix="qa-double-opt-in"
-            title="Double Opt-In"
-            text={
-                <Fragment>
-                    <div>
-                        Double opt-in ensures that your emails will go to SPAM at a much lower rate.
-                        The opt-in confirmation happens after a job has been completed.
-                    </div>
-                    <ToggleSwitch
-                        label="Enable"
-                        onChange={handleConfirmed}
-                        checked={enabled.value}
-                        className="m-t-2 qa-double-opt-in-enable"
+        return (
+            <SettingsSection
+                layout={layout}
+                className={className}
+                qaPrefix="qa-double-opt-in"
+                title="Double Opt-In"
+                text={
+                    <Fragment>
+                        <div>
+                            Double opt-in ensures that your emails will go to SPAM at a much lower
+                            rate. The opt-in confirmation happens after a job has been completed.
+                        </div>
+                        <ToggleSwitch
+                            label="Enable"
+                            onChange={handleConfirmed}
+                            checked={enabled.value}
+                            className="m-t-2 qa-double-opt-in-enable"
+                        />
+                    </Fragment>
+                }
+            >
+                <Text bold className="m-b-2">
+                    Double Opt-In Email Content
+                </Text>
+                <Form className="m-b-0-i">
+                    <Form.Input
+                        className="m-b-2-i qa-double-opt-in-subject-line"
+                        value={emailSubject.value}
+                        onChange={emailSubject.onChangeHandler}
+                        error={emailSubject.hasError}
+                        label="Subject Line"
+                        fluid
+                        disabled={!enabled.value}
                     />
-                </Fragment>
-            }
-        >
-            <Text bold className="m-b-2">
-                Double Opt-In Email Content
-            </Text>
-            <Form className="m-b-0-i">
-                <Form.Input
-                    className="m-b-2-i qa-double-opt-in-subject-line"
-                    value={emailSubject.value}
-                    onChange={emailSubject.onChangeHandler}
-                    error={emailSubject.hasError}
-                    label="Subject Line"
-                    fluid
-                    disabled={!enabled.value}
-                />
-                <Form.Input
-                    className="m-b-2-i qa-double-opt-in-header"
-                    value={emailHeader.value}
-                    onChange={emailHeader.onChangeHandler}
-                    error={emailHeader.hasError}
-                    label="Header"
-                    fluid
-                    disabled={!enabled.value}
-                />
-                <Form.TextArea
-                    className="m-b-2-i qa-double-opt-in-body-copy"
-                    label="Body Copy"
-                    value={emailBody.value}
-                    onChange={emailBody.onChangeHandler}
-                    error={emailBody.hasError}
-                    rows={2}
-                    disabled={!enabled.value}
+                    <Form.Input
+                        className="m-b-2-i qa-double-opt-in-header"
+                        value={emailHeader.value}
+                        onChange={emailHeader.onChangeHandler}
+                        error={emailHeader.hasError}
+                        label="Header"
+                        fluid
+                        disabled={!enabled.value}
+                    />
+                    <Form.TextArea
+                        className="m-b-2-i qa-double-opt-in-body-copy"
+                        label="Body Copy"
+                        value={emailBody.value}
+                        onChange={emailBody.onChangeHandler}
+                        error={emailBody.hasError}
+                        rows={2}
+                        disabled={!enabled.value}
+                    />
+                    <Form.Input
+                        className={classnames(
+                            Styles.buttonInput,
+                            'm-b-2-i qa-double-opt-in-button-text'
+                        )}
+                        value={emailButtonText.value}
+                        onChange={emailButtonText.onChangeHandler}
+                        error={emailButtonText.hasError}
+                        label="Button Text"
+                        disabled={!enabled.value}
+                    />
+                    <Form.Field
+                        className="m-b-3-i"
+                        label={
+                            <Fragment>
+                                Footer&nbsp;
+                                <Text inline size={2} subdued>
+                                    (automatically added)
+                                </Text>
+                            </Fragment>
+                        }
+                    >
+                        <Text>{footerText}</Text>
+                    </Form.Field>
+                    <Button
+                        className="qa-double-opt-in-preview-email"
+                        primary
+                        onClick={openPreview}
+                        outline
+                        small
+                        disabled={!enabled.value}
+                    >
+                        Preview Email
+                    </Button>
+                </Form>
+                <Confirm
+                    title="Disable Double Opt-In"
+                    message="Disabling double opt-in could potentially lead to worse email performance and higher spam rates. Are you sure?"
+                    when={enabled.value}
                 />
-                <Form.Input
-                    className={classnames(
-                        Styles.buttonInput,
-                        'm-b-2-i qa-double-opt-in-button-text'
-                    )}
-                    value={emailButtonText.value}
-                    onChange={emailButtonText.onChangeHandler}
-                    error={emailButtonText.hasError}
-                    label="Button Text"
-                    disabled={!enabled.value}
+                <OptInEmailPreview
+                    {...formState}
+                    open={isPreviewOpen}
+                    footerText={footerText}
+                    onClose={closePreview}
                 />
-                <Form.Field
-                    className="m-b-3-i"
-                    label={
-                        <Fragment>
-                            Footer&nbsp;
-                            <Text inline size={2} subdued>
-                                (automatically added)
-                            </Text>
-                        </Fragment>
-                    }
-                >
-                    <Text>{footerText}</Text>
-                </Form.Field>
-                <Button
-                    className="qa-double-opt-in-preview-email"
-                    primary
-                    onClick={openPreview}
-                    outline
-                    small
-                    disabled={!enabled.value}
-                >
-                    Preview Email
-                </Button>
-            </Form>
-            <Confirm
-                title="Disable Double Opt-In"
-                message="Disabling double opt-in could potentially lead to worse email performance and higher spam rates. Are you sure?"
-                when={enabled.value}
-            />
-            <OptInEmailPreview
-                {...formState}
-                open={isPreviewOpen}
-                footerText={footerText}
-                onClose={closePreview}
-            />
-        </SettingsSection>
-    );
-});
+            </SettingsSection>
+        );
+    }
+);

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

@@ -3,37 +3,41 @@ import { observer } from 'mobx-react';
 import { ComposibleValidatable, FormState, ValidatableMapOrArray } from 'formstate';
 
 import { Banner } from '@servicetitan/design-system';
+import classNames from 'classnames';
 
 export interface FormErrorsListProps<T extends ValidatableMapOrArray = ValidatableMapOrArray> {
+    className?: string;
     form: FormState<T>;
 }
 
-export const FormErrorsList: FC<FormErrorsListProps> = observer(({ form }: FormErrorsListProps) => {
-    const getErrors = () => {
-        return Object.entries(form.$).map(
-            ([key, field]: [key: string, field: ComposibleValidatable<unknown>]) => {
-                return field.hasError ? (
-                    <li key={key} className="qa-settings-email-error-list-item">
-                        {field.error}
-                    </li>
-                ) : null;
-            }
-        );
-    };
+export const FormErrorsList: FC<FormErrorsListProps> = observer(
+    ({ form, className }: FormErrorsListProps) => {
+        const getErrors = () => {
+            return Object.entries(form.$).map(
+                ([key, field]: [key: string, field: ComposibleValidatable<unknown>]) => {
+                    return field.hasError ? (
+                        <li key={key} className="qa-settings-email-error-list-item">
+                            {field.error}
+                        </li>
+                    ) : null;
+                }
+            );
+        };
 
-    if (!form.hasError) {
-        return null;
-    }
+        if (!form.hasError) {
+            return null;
+        }
 
-    return (
-        <Banner
-            status="critical"
-            title="Missing Fields"
-            icon
-            className="m-b-2 qa-settings-email-error"
-        >
-            <p>Please complete all required fields:</p>
-            <ul className="qa-settings-email-error-list">{getErrors()}</ul>
-        </Banner>
-    );
-});
+        return (
+            <Banner
+                status="critical"
+                title="Missing Fields"
+                icon
+                className={classNames('m-b-2 qa-settings-email-error', className)}
+            >
+                <p>Please complete all required fields:</p>
+                <ul className="qa-settings-email-error-list">{getErrors()}</ul>
+            </Banner>
+        );
+    }
+);

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

@@ -40,6 +40,7 @@ export interface LogoPickerProps {
     maxSize?: number;
     minDimensions?: { width: number; height: number };
     tips?: ReactNode;
+    deletable?: boolean;
 
     deleteImage(): void;
     downloadImage?(): void;
@@ -61,6 +62,7 @@ export const LogoPicker: FC<LogoPickerProps> = observer(
         onBadImage,
         onFileChange,
         setError,
+        deletable = true,
         tips = DEFAULT_LOGO_TIPS,
     }) => {
         const [recommendLargerImage, setRecommendLargerImage] = useState(false);
@@ -222,14 +224,16 @@ export const LogoPicker: FC<LogoPickerProps> = observer(
                                                     </a>
                                                 )}
                                             </Tooltip>
-                                            <Tooltip el="div" text="Delete">
-                                                <Button
-                                                    className="qa-settings-logo-delete shadow-1-i bg-white-i"
-                                                    onClick={deleteImage}
-                                                    iconName="delete"
-                                                    outline
-                                                />
-                                            </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>

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

@@ -3,7 +3,7 @@ import { FC, Fragment, useCallback, useState } from 'react';
 import classnames from 'classnames';
 
 import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
-import { Button, Form, Stack, Text, ToggleSwitch } from '@servicetitan/design-system';
+import { Button, Form, LayoutProps, Stack, Text, ToggleSwitch } from '@servicetitan/design-system';
 import { useConfirm } from '@servicetitan/confirm';
 
 import { SettingsSection } from '../settings-section';
@@ -22,11 +22,13 @@ export interface OptOutMessageState {
 }
 export interface OptOutMessageProps {
     formState: OptOutMessageState;
+    layout?: LayoutProps['type'];
+    className?: string;
     onHandleClickEnable?(checked: boolean): void;
 }
 
 export const OptOutMessage: FC<OptOutMessageProps> = observer(
-    ({ onHandleClickEnable, formState }) => {
+    ({ onHandleClickEnable, formState, layout, className }) => {
         const {
             subjectLine,
             header,
@@ -50,7 +52,8 @@ export const OptOutMessage: FC<OptOutMessageProps> = observer(
 
         return (
             <SettingsSection
-                className={Styles.outOutMessage}
+                layout={layout}
+                className={classnames(Styles.outOutMessage, className)}
                 qaPrefix="qa-opt-out-message"
                 title="Opt-Out Message"
                 text={

package/src/components/settings/result-definitions-modal/row.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 
 import { Grid, Text, Tag } from '@servicetitan/design-system';
-import tokens from '@servicetitan/tokens';
+import { core as tokens } from '@servicetitan/tokens';
 
 export enum RiskType {
     Medium,
@@ -11,8 +11,8 @@ export enum RiskType {
 
 const riskTypeToColor = new Map<RiskType, string>([
     [RiskType.Medium, 'warning'],
-    [RiskType.High, tokens.colorRed500],
-    [RiskType.VeryHigh, tokens.colorRed600],
+    [RiskType.High, tokens.default.tokens.colorRed500],
+    [RiskType.VeryHigh, tokens.default.tokens.colorRed600],
 ]);
 
 const riskTypeToText = new Map<RiskType, string>([

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

@@ -2,23 +2,28 @@ import classNames from 'classnames';
 import { ReactNode, FC } from 'react';
 import { observer } from 'mobx-react';
 
-import { Text, Card, Layout } from '@servicetitan/design-system';
+import { Text, Card, Layout, LayoutProps } from '@servicetitan/design-system';
 
 export interface SectionProps {
-    title: string;
+    title: ReactNode;
     text?: JSX.Element | string;
     children: ReactNode;
     qaPrefix?: string;
     className?: string;
+    layout?: LayoutProps['type'];
 }
 
 export const SettingsSection: FC<SectionProps> = observer(
-    ({ title, text, children, qaPrefix, className = '' }: SectionProps) => (
-        <Layout type="support" direction="left" className={classNames(qaPrefix, className)}>
+    ({ title, text, children, qaPrefix, className = '', layout = 'support' }: SectionProps) => (
+        <Layout type={layout} direction="left" className={classNames(qaPrefix, className)}>
             <Layout.Section>
-                <Text size={3} bold className={`${qaPrefix}-title`}>
-                    {title}
-                </Text>
+                {typeof title === 'string' ? (
+                    <Text size={3} bold className={`${qaPrefix}-title`}>
+                        {title}
+                    </Text>
+                ) : (
+                    title
+                )}
                 {text && (
                     <Text size={2} subdued className={`${qaPrefix}-text`}>
                         {text}