@servicetitan/mpa-components 0.2.1 → 0.3.0

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

@@ -6,7 +6,7 @@ import { Grid, Text } from '@servicetitan/design-system';
 import { SettingsSection } from '../settings-section';
 import { CompanyTradeCheckbox } from '../company-trade-checkbox';
 
-export interface Trade<TradeType extends string> {
+export interface Trade<TradeType extends string | number> {
     qaKey?: string;
     name: string;
     value: TradeType;
@@ -19,12 +19,12 @@ export interface Trade<TradeType extends string> {
     };
 }
 
-export interface CompanyTradesPickerProps<TradeType extends string = string> {
+export interface CompanyTradesPickerProps<TradeType extends string | number = string> {
     trades: Trade<TradeType>[];
     onTradeChange(t?: TradeType): void;
 }
 
-export function CompanyTradesPicker<T extends string = string>({
+export function CompanyTradesPicker<T extends string | number = string>({
     trades,
     onTradeChange,
 }: CompanyTradesPickerProps<T>) {
@@ -46,7 +46,7 @@ export function CompanyTradesPicker<T extends string = string>({
                             {row.map(trade => {
                                 return (
                                     <Grid.Column key={trade.value}>
-                                        <CompanyTradeCheckbox
+                                        <CompanyTradeCheckbox<T>
                                             className={`qa-settings-select-your-trades-${
                                                 trade.qaKey ?? trade.value
                                             }`}

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

@@ -1,4 +1,4 @@
-import { CheckboxFieldState, InputFieldState } from '@servicetitan/form';
+import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
 import { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
 import { FormState } from 'formstate';
 import { DoubleOptIn as Component } from '.';
@@ -14,7 +14,7 @@ class DoubleOptInStore {
     form = new FormState({
         emailSubject: new InputFieldState('Jump in'),
         emailHeader: new InputFieldState('Right now'),
-        emailBody: new InputFieldState('Jump in right now! Please!'),
+        emailBody: new TextAreaFieldState('Jump in right now! Please!'),
         emailButtonText: new InputFieldState('JUMP IN'),
         enabled: new CheckboxFieldState(true),
     });

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

@@ -2,7 +2,7 @@ import { FC, Fragment, useCallback, useState } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 
-import { CheckboxFieldState, InputFieldState } from '@servicetitan/form';
+import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
 import { Form, Text, ToggleSwitch, Button } from '@servicetitan/design-system';
 import { useConfirm } from '@servicetitan/confirm';
 
@@ -15,10 +15,10 @@ export const footerText =
     'If you’ve received this email by mistake, no action is needed, just delete this message.';
 
 export interface DoubleOptInPropsFormState {
-    emailSubject: InputFieldState<string>;
-    emailHeader: InputFieldState<string>;
-    emailBody: InputFieldState<string>;
-    emailButtonText: InputFieldState<string>;
+    emailSubject: InputFieldState<string | undefined>;
+    emailHeader: InputFieldState<string | undefined>;
+    emailBody: TextAreaFieldState<string | undefined>;
+    emailButtonText: InputFieldState<string | undefined>;
     enabled: CheckboxFieldState;
 }
 export interface DoubleOptInProps {

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

@@ -43,20 +43,20 @@ export interface EmailValidationTableRecord<T> {
 }
 
 export interface EmailValidationProps<
-    TEmailValidationType extends string = string,
-    TEmailValidationResult extends string = string
+    TEmailValidationType extends string | number = string,
+    TEmailValidationResult extends string | number = string
 > {
     className?: string;
     loading: boolean;
     resultGrid: TableState<EmailValidationTableRecord<TEmailValidationResult>>;
-    validationRiskType: TEmailValidationType;
+    validationRiskType?: TEmailValidationType;
     handleDownload(): void;
     setValidationRiskType(type: TEmailValidationType): void;
 }
 
 interface EmailValidationHocOptions<
-    TEmailValidationType extends string = string,
-    TEmailValidationResult extends string = string
+    TEmailValidationType extends string | number = string,
+    TEmailValidationResult extends string | number = string
 > {
     resultToText: Map<TEmailValidationResult, string>;
     levelTypeMap: {
@@ -70,8 +70,8 @@ interface EmailValidationHocOptions<
 }
 
 export function emailValidationHoc<
-    TEmailValidationType extends string = string,
-    TEmailValidationResult extends string = string
+    TEmailValidationType extends string | number = string,
+    TEmailValidationResult extends string | number = string
 >({
     resultToText,
     levelTypeMap,
@@ -103,7 +103,7 @@ export function emailValidationHoc<
         resultGrid,
         setValidationRiskType,
         validationRiskType,
-    }: EmailValidationProps<TEmailValidationType>) {
+    }: EmailValidationProps<TEmailValidationType, TEmailValidationResult>) {
         const localStore: EmailValidationLocalStore = useLocalStore(() => ({
             open: false,
             setOpen: action(function (this: EmailValidationLocalStore, state: boolean) {

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

@@ -0,0 +1,41 @@
+import { FC, useMemo } from 'react';
+import { observer } from 'mobx-react';
+import { ComposibleValidatable, FormState, ValidatableMapOrArray } from 'formstate';
+
+import { Banner } from '@servicetitan/design-system';
+
+export interface FormErrorsListProps<T extends ValidatableMapOrArray = ValidatableMapOrArray> {
+    form: FormState<T>;
+}
+
+export const FormErrorsList: FC<FormErrorsListProps> = observer(({ form }: FormErrorsListProps) => {
+    if (!form.hasError) {
+        return null;
+    }
+
+    const errorsList = useMemo(
+        () =>
+            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;
+                }
+            ),
+        [form.$]
+    );
+
+    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">{errorsList}</ul>
+        </Banner>
+    );
+});

package/src/components/settings/index.ts

@@ -4,6 +4,8 @@ export * from './company-email-reply-to';
 export * from './company-email-sender';
 export * from './company-trades-picker';
 export * from './double-opt-in';
+export * from './email-validation';
+export * from './form-errors-list';
 export * from './logo-picker';
 export * from './opt-out-message';
 export * from './settings-section';

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

@@ -2,7 +2,7 @@ import { observer } from 'mobx-react';
 import { FC, Fragment, useCallback, useState } from 'react';
 import classnames from 'classnames';
 
-import { CheckboxFieldState, InputFieldState } from '@servicetitan/form';
+import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
 import { Button, Form, Stack, Text, ToggleSwitch } from '@servicetitan/design-system';
 import { useConfirm } from '@servicetitan/confirm';
 
@@ -12,11 +12,11 @@ import { OptOutEmailPreview } from '../email-preview/opt-out-email-preview';
 import * as Styles from './opt-out-message.module.less';
 
 export interface OptOutMessageState {
-    subjectLine: InputFieldState<string>;
-    header: InputFieldState<string>;
-    body: InputFieldState<string>;
-    buttonText: InputFieldState<string>;
-    monthsLimit: InputFieldState<number>;
+    subjectLine: InputFieldState<string | undefined>;
+    header: InputFieldState<string | undefined>;
+    body: TextAreaFieldState<string | undefined>;
+    buttonText: InputFieldState<string | undefined>;
+    monthsLimit: InputFieldState<number | undefined>;
     enabled: CheckboxFieldState;
     autoSuppressionEnabled: CheckboxFieldState;
 }

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

@@ -1,4 +1,4 @@
-import { CheckboxFieldState, InputFieldState } from '@servicetitan/form';
+import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
 import { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
 import { FormState } from 'formstate';
 import { OptOutMessage as Component } from '.';
@@ -14,7 +14,7 @@ class OptOutStore {
     form = new FormState({
         subjectLine: new InputFieldState('Good bye'),
         header: new InputFieldState('Opt out of emails'),
-        body: new InputFieldState('Sorry to see you go!'),
+        body: new TextAreaFieldState('Sorry to see you go!'),
         buttonText: new InputFieldState('Bye'),
         monthsLimit: new InputFieldState(6),
         enabled: new CheckboxFieldState(true),