@servicetitan/mpa-components 0.6.0 → 1.0.0

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/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}