@servicetitan/mpa-components 0.1.0

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

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { observer } from 'mobx-react';
+
+import { EmailPreview } from './email-preview';
+import type { DoubleOptInPropsFormState } from '../double-opt-in';
+
+interface OptInEmailPreviewProps extends DoubleOptInPropsFormState {
+    open: boolean;
+    footerText: string;
+    onClose(): void;
+}
+
+export const OptInEmailPreview: FC<OptInEmailPreviewProps> = observer(
+    ({ open, footerText, onClose, emailHeader, emailBody, emailButtonText }) => {
+        if (!open) {
+            return null;
+        }
+
+        return (
+            <EmailPreview
+                title="Double Opt-In Email Preview"
+                onClose={onClose}
+                header={emailHeader.value}
+                body={emailBody.value}
+                buttonText={emailButtonText.value}
+                footer={footerText}
+            />
+        );
+    }
+);

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

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+
+import { EmailPreview } from './email-preview';
+import { OptOutMessageState } from '../opt-out-message';
+
+interface OptOutMessagePreviewProps extends OptOutMessageState {
+    open: boolean;
+    onClose(): void;
+}
+
+export const OptOutEmailPreview: FC<OptOutMessagePreviewProps> = ({
+    open,
+    onClose,
+    header,
+    body,
+    buttonText,
+}) => {
+    if (!open) {
+        return null;
+    }
+
+    return (
+        <EmailPreview
+            title="Opt-Out Email Preview"
+            onClose={onClose}
+            header={header.value}
+            body={body.value}
+            buttonText={buttonText.value}
+        />
+    );
+};

package/src/components/settings/index.ts

@@ -0,0 +1,9 @@
+export * from './company-details';
+export * from './company-email-footer';
+export * from './company-email-reply-to';
+export * from './company-email-sender';
+export * from './company-trades-picker';
+export * from './double-opt-in';
+export * from './logo-picker';
+export * from './opt-out-message';
+export * from './settings-section';

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

@@ -0,0 +1,256 @@
+import { useEffect, useState, ReactNode, FC, useRef } from 'react';
+import { observer } from 'mobx-react';
+
+import {
+    FilePicker,
+    ButtonGroup,
+    Tooltip,
+    Button,
+    Card,
+    Banner,
+    Grid,
+} from '@servicetitan/design-system';
+import { Label } from '@servicetitan/form';
+
+import { getImageSize, formatBytes } from '../../../utils/helpers';
+
+export const LOGO_MIN_SIZE = 180;
+export const DEFAULT_MIN_DIMENSIONS = { width: LOGO_MIN_SIZE, height: LOGO_MIN_SIZE };
+export const DEFAULT_LOGO_TIPS = (
+    <ul>
+        <li>PNGs with a transparent background work best, but aren't required.</li>
+        <li>
+            Don't know where your logo is? Your social media profile would be a good place to look.
+        </li>
+        <li>Use a logo that is at least 180x180px in size.</li>
+        <li>
+            Avoid using a screenshot of your logo, right click and “save as” if you're pulling it
+            from somewhere else.
+        </li>
+    </ul>
+);
+
+import * as Styles from './logo-picker.module.less';
+
+export interface LogoPickerProps {
+    error?: string;
+    image?: File;
+    imageUrl?: string;
+    loaded?: boolean;
+    maxSize?: number;
+    minDimensions?: { width: number; height: number };
+    tips?: ReactNode;
+
+    deleteImage(): void;
+    downloadImage?(): void;
+    onBadImage?(opts: { category: string; error: string; data: { imageUrl: string } }): void;
+    onFileChange(files: FileList | null): void;
+    setError?(error: string): void;
+}
+
+export const LogoPicker: FC<LogoPickerProps> = observer(
+    ({
+        deleteImage,
+        downloadImage,
+        error,
+        image,
+        imageUrl,
+        loaded = true,
+        maxSize,
+        minDimensions = DEFAULT_MIN_DIMENSIONS,
+        onBadImage,
+        onFileChange,
+        setError,
+        tips = DEFAULT_LOGO_TIPS,
+    }) => {
+        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) {
+                    return;
+                }
+
+                setIsLoading(true);
+                try {
+                    const size = await getImageSize(imageUrl);
+                    setRecommendLargerImage(
+                        size.height < minDimensions.height || size.width < minDimensions.width
+                    );
+                    setLocalError('');
+
+                    if (setError) {
+                        setError('');
+                    }
+                } catch {
+                    onBadImage?.({
+                        category: 'LogoPicker',
+                        error: 'Got a bad image',
+                        data: { imageUrl },
+                    });
+                    deleteImage();
+
+                    setLocalError('File is not a valid image');
+                    setRecommendLargerImage(false);
+
+                    if (setError) {
+                        setError('File is not a valid image');
+                    }
+                } finally {
+                    setIsLoading(false);
+                }
+            };
+            handleImageUrlChange();
+        }, [imageUrl, minDimensions, setError, deleteImage, onBadImage]);
+
+        useEffect(() => {
+            if (!image?.size || !maxSize) {
+                return;
+            }
+
+            setIsLoading(true);
+
+            if (image && image.size > maxSize) {
+                deleteImage();
+
+                setSizeError(`File size should be less than ${formattedMaxSize.current}.`);
+
+                if (setError) {
+                    setError(`File size should be less than ${formattedMaxSize.current}.`);
+                }
+            } else {
+                setSizeError('');
+
+                if (setError) {
+                    setError('');
+                }
+            }
+
+            setIsLoading(false);
+        }, [image, maxSize, setError, deleteImage]);
+
+        if (!loaded || isLoading) {
+            return null;
+        }
+
+        return (
+            <div className="field">
+                <Label label="Logo" hasError={!!error || !!localError || !!sizeError} />
+                {(error || localError) && (
+                    <Banner
+                        className="m-b-2 qa-settings-logo-error"
+                        title={error ?? localError}
+                        status="critical"
+                        icon
+                    />
+                )}
+                {sizeError && (
+                    <Banner
+                        className="m-b-2 qa-settings-logo-error"
+                        title={sizeError}
+                        status="critical"
+                        icon
+                    />
+                )}
+                {imageUrl === undefined ? (
+                    <FilePicker
+                        typesNote="Allowed file types: jpeg, png, jpg"
+                        className="qa-settings-logo-file-picker"
+                        accept="image/png, image/jpeg"
+                        onSelected={onFileChange}
+                    />
+                ) : (
+                    <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>
+                                            <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>
+                        </Grid.Column>
+                    </Grid>
+                )}
+                {recommendLargerImage && minDimensions && (imageUrl || image) && (
+                    <Banner
+                        title={`We strongly recommend using a logo that is at least ${minDimensions.width}x${minDimensions.height}px in size. Using a lower-resolution image may result in logo pixelation in your templates.`}
+                        className="m-t-2"
+                        status="warning"
+                        icon
+                    />
+                )}
+                {(imageUrl === undefined || recommendLargerImage || localError || sizeError) && (
+                    <Banner icon title="Tips on Uploading Your Logo:" className="m-t-2">
+                        {tips}
+                    </Banner>
+                )}
+            </div>
+        );
+    }
+);

package/src/components/settings/logo-picker/logo-picker.module.less

@@ -0,0 +1,21 @@
+@import (reference) '~@servicetitan/tokens/dist/tokens.less';
+
+.logo-card {
+    position: relative;
+
+    .logo-action {
+        position: absolute;
+        right: 0;
+        top: 0;
+        padding: @spacing-2;
+    }
+
+    &:not(:hover) .logo-action {
+        display: none;
+    }
+
+    img {
+        width: 100%;
+        height: auto;
+    }
+}

package/src/components/settings/logo-picker/logo-picker.module.less.d.ts

@@ -0,0 +1,4 @@
+export const __esModule: true;
+export const logoCard: string;
+export const logoAction: string;
+

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

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import { LogoPicker as Component } from '.';
+
+export default {
+    title: 'MPA Components/settings/LogoPicker',
+    component: LogoPicker,
+    parameters: {},
+};
+
+export function LogoPicker() {
+    const [url, setUrl] = useState<string | undefined>();
+
+    return (
+        <Component
+            imageUrl={url}
+            minDimensions={{ height: 300, width: 300 }}
+            onFileChange={() => setUrl('https://place-hold.it/300x300')}
+            deleteImage={() => alert('image deleted')}
+        />
+    );
+}

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

@@ -0,0 +1,154 @@
+import { observer } from 'mobx-react';
+import { FC, Fragment, useCallback, useState } from 'react';
+import classnames from 'classnames';
+
+import { CheckboxFieldState, InputFieldState } from '@servicetitan/form';
+import { Button, Form, Stack, Text, ToggleSwitch } from '@servicetitan/design-system';
+import { useConfirm } from '@servicetitan/confirm';
+
+import { SettingsSection } from '../settings-section';
+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>;
+    enabled: CheckboxFieldState;
+    autoSuppressionEnabled: CheckboxFieldState;
+}
+export interface OptOutMessageProps {
+    formState: OptOutMessageState;
+    onHandleClickEnable?(checked: boolean): void;
+}
+
+export const OptOutMessage: FC<OptOutMessageProps> = observer(
+    ({ onHandleClickEnable, formState }) => {
+        const {
+            subjectLine,
+            header,
+            body,
+            buttonText,
+            monthsLimit,
+            enabled,
+            autoSuppressionEnabled,
+        } = formState;
+
+        const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+        const openPreview = useCallback(() => setIsPreviewOpen(true), [setIsPreviewOpen]);
+        const closePreview = useCallback(() => setIsPreviewOpen(false), [setIsPreviewOpen]);
+
+        const handleClickEnable = (_0: any, checked: boolean) => {
+            onHandleClickEnable?.(checked);
+            enabled.onChange(checked);
+        };
+
+        const [Confirm, handleConfirmed] = useConfirm(handleClickEnable);
+
+        return (
+            <SettingsSection
+                className={Styles.outOutMessage}
+                qaPrefix="qa-opt-out-message"
+                title="Opt-Out Message"
+                text={
+                    <Fragment>
+                        <div>
+                            If customers haven’t <b>opened</b> one of your emails in a set time
+                            frame, you can send an opt-out message to allow them to set their email
+                            preferences.
+                        </div>
+                        <ToggleSwitch
+                            label="Enable"
+                            onChange={handleConfirmed}
+                            checked={enabled.value}
+                            className="m-t-2 qa-opt-out-message-enable"
+                        />
+                    </Fragment>
+                }
+            >
+                <Text bold className="m-b-2">
+                    Opt-Out Email Content
+                </Text>
+                <Form className="m-b-0-i">
+                    <Form.Input
+                        className="m-b-2-i qa-opt-out-message-subject-line"
+                        value={subjectLine.value}
+                        onChange={subjectLine.onChangeHandler}
+                        error={subjectLine.hasError}
+                        label="Subject Line"
+                        fluid
+                        disabled={!enabled.value}
+                    />
+                    <Form.Input
+                        className="m-b-2-i qa-opt-out-message-header"
+                        value={header.value}
+                        onChange={header.onChangeHandler}
+                        error={header.hasError}
+                        label="Header"
+                        fluid
+                        disabled={!enabled.value}
+                    />
+                    <Form.TextArea
+                        className="m-b-2-i qa-opt-out-message-body-copy"
+                        label="Body Copy"
+                        value={body.value}
+                        onChange={body.onChangeHandler}
+                        error={body.hasError}
+                        rows={2}
+                        disabled={!enabled.value}
+                    />
+                    <Form.Input
+                        className={classnames(
+                            Styles.buttonInput,
+                            'm-b-3-i qa-opt-out-message-button-text'
+                        )}
+                        value={buttonText.value}
+                        onChange={buttonText.onChangeHandler}
+                        error={buttonText.hasError}
+                        label="Button Text"
+                        disabled={!enabled.value}
+                    />
+                    <Button
+                        className="qa-opt-out-message-preview-email"
+                        primary
+                        onClick={openPreview}
+                        outline
+                        small
+                        disabled={!enabled.value}
+                    >
+                        Preview Email
+                    </Button>
+                    <hr />
+                </Form>
+                <Stack alignItems="center" wrap="wrap">
+                    <Text className="m-b-1">Send when a recipient hasn’t opened an email in</Text>
+                    <Form.Input
+                        className={classnames(Styles.input, 'qa-opt-out-message-months', 'm-b-0')}
+                        value={monthsLimit.value}
+                        onChange={monthsLimit.onChangeHandler}
+                        error={monthsLimit.hasError}
+                        disabled={!enabled.value}
+                    />
+                    <Text className="m-b-1">months.</Text>
+                </Stack>
+                <Form.Checkbox
+                    className={classnames('m-t-2-i', 'qa-opt-out-message-auto-suppress')}
+                    checked={autoSuppressionEnabled.value}
+                    onChange={autoSuppressionEnabled.onChangeHandler}
+                    disabled={!enabled.value}
+                    label="Auto-suppress dormant emails"
+                />
+
+                <Confirm
+                    title="Disable Opt-Out Messaging"
+                    message="Opt-Out messaging helps you keep dormant emails out of your audiences. Disabling it could potentially lead to worse email performance. Are you sure?"
+                    when={enabled.value}
+                />
+                <OptOutEmailPreview {...formState} open={isPreviewOpen} onClose={closePreview} />
+            </SettingsSection>
+        );
+    }
+);

package/src/components/settings/opt-out-message/opt-out-message.module.less

@@ -0,0 +1,20 @@
+@import (reference) '~@servicetitan/tokens/dist/tokens.less';
+
+.out-out-message {
+    hr {
+        margin: @spacing-2 @spacing-0;
+        border: 0;
+        border-bottom: 1px solid @color-neutral-50;
+    }
+}
+
+.button-input {
+    width: 160px;
+}
+
+.input {
+    width: @spacing-5;
+    margin-left: @spacing-1;
+    margin-right: @spacing-1;
+    margin-bottom: @spacing-0;
+}

package/src/components/settings/opt-out-message/opt-out-message.module.less.d.ts

@@ -0,0 +1,5 @@
+export const __esModule: true;
+export const outOutMessage: string;
+export const buttonInput: string;
+export const input: string;
+

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

@@ -0,0 +1,31 @@
+import { CheckboxFieldState, InputFieldState } from '@servicetitan/form';
+import { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
+import { FormState } from 'formstate';
+import { OptOutMessage as Component } from '.';
+
+export default {
+    title: 'MPA Components/settings/OptOutMessage',
+    component: Component,
+    parameters: {},
+};
+
+@injectable()
+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!'),
+        buttonText: new InputFieldState('Bye'),
+        monthsLimit: new InputFieldState(6),
+        enabled: new CheckboxFieldState(true),
+        autoSuppressionEnabled: new CheckboxFieldState(true),
+    });
+}
+
+export const OptOutMessage = provide({
+    singletons: [OptOutStore],
+})(() => {
+    const [store] = useDependencies(OptOutStore);
+
+    return <Component formState={store.form.$} />;
+});

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

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

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components/settings';
+
+export * from './utils/helpers';

package/src/utils/helpers.ts

@@ -0,0 +1,31 @@
+export const formatBytes = (bytes: number | undefined, decimals = 2, isBinary = true) => {
+    if (!bytes) {
+        return '0 Bytes';
+    }
+
+    const k = isBinary ? 1024 : 1000;
+    const dm = Math.max(0, decimals);
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
+};
+
+export const getImageSize = (url: string) => {
+    return new Promise<{ width: number; height: number }>((resolve, reject) => {
+        const image = document.createElement('img');
+
+        image.onload = () => {
+            resolve({ width: image.width, height: image.height });
+        };
+
+        image.onerror = () => {
+            reject(undefined);
+        };
+
+        image.src = url;
+    });
+};
+
+export const convertDomainName = (value: string) => value.toLowerCase().replace(/ /g, '');

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "extends": "@servicetitan/startup/tsconfig/base",
+    "compilerOptions": {
+        "outDir": "lib",
+        "rootDir": "src",
+        "composite": true
+    },
+    "include": ["src/**/*"],
+    "exclude": ["src/**/__tests__/**/*"],
+    "references": [{ "path": "../utils" }]
+}