@servicetitan/mpa-components 0.1.0

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

@@ -0,0 +1,129 @@
+import { SyntheticEvent, Fragment, useCallback, FC } from 'react';
+import { observer } from 'mobx-react';
+
+import { Form, Text } from '@servicetitan/design-system';
+import { InputFieldState } from '@servicetitan/form';
+
+import { SettingsSection } from '../settings-section';
+import { convertDomainName } from '../../../utils/helpers';
+
+import * as Styles from './company-email-sender.module.less';
+
+export interface CompanyEmailSenderProps {
+    formState: {
+        senderName: InputFieldState<string>;
+        senderDomain: InputFieldState<string>;
+        senderEmail: InputFieldState<string>;
+    };
+
+    senderTld: string;
+}
+
+export const CompanyEmailSender: FC<CompanyEmailSenderProps> = observer(
+    ({ formState: { senderDomain, senderName, senderEmail }, senderTld }) => {
+        const handleSenderNameChange = useCallback(
+            (_0: SyntheticEvent<HTMLInputElement>, data: { value: string }) => {
+                if (data.value.length > 80) {
+                    return;
+                }
+
+                senderName.onChange(data.value);
+            },
+            [senderName]
+        );
+
+        const handleSenderDomainChange = useCallback(
+            (_0: SyntheticEvent<HTMLInputElement>, data: { value: string }) => {
+                if (data.value.length > 30) {
+                    return;
+                }
+
+                senderDomain.onChange(data.value);
+            },
+            [senderDomain]
+        );
+
+        const handleSenderEmailChange = useCallback(
+            (_0: SyntheticEvent<HTMLInputElement>, data: { value: string }) => {
+                if (data.value.length > 50) {
+                    return;
+                }
+
+                senderEmail.onChange(data.value);
+            },
+            [senderEmail]
+        );
+
+        return (
+            <SettingsSection
+                title="Sender"
+                text="Configure sender name and email."
+                qaPrefix="qa-settings-sender"
+            >
+                <Form className="m-b-0-i">
+                    <Form.Group widths="equal" className="m-b-2-i">
+                        <Form.Input
+                            width={6}
+                            className="m-b-0-i qa-settings-sender-name"
+                            value={senderName.value}
+                            onChange={handleSenderNameChange}
+                            error={senderName.hasError}
+                            label={
+                                <Fragment>
+                                    Sender Name &nbsp;&nbsp;
+                                    <Text inline size={2} subdued>
+                                        max 80 characters
+                                    </Text>
+                                </Fragment>
+                            }
+                            placeholder="John Doe"
+                            fluid
+                        />
+                        <Form.Input
+                            width={6}
+                            className="m-b-0-i qa-settings-sender-domain"
+                            value={senderDomain.value}
+                            onChange={handleSenderDomainChange}
+                            error={senderDomain.hasError}
+                            label="Sender Domain"
+                            placeholder="Your Company"
+                            fluid
+                        />
+                    </Form.Group>
+                    <Form.Group className="m-b-0-i">
+                        <Form.Input
+                            width={6}
+                            className="m-b-0-i qa-settings-sender-email"
+                            value={senderEmail.value}
+                            onChange={handleSenderEmailChange}
+                            error={senderEmail.hasError}
+                            label={
+                                <Fragment>
+                                    Sender Email&nbsp;
+                                    <Text inline size={2} subdued>
+                                        (domain added automatically)
+                                    </Text>
+                                </Fragment>
+                            }
+                            placeholder="john.doe"
+                            fluid
+                        />
+                        <Form.Field label={'\u00A0'}>
+                            <div className={Styles.domain}>
+                                <Text
+                                    size={3}
+                                    bold
+                                    subdued
+                                    className="qa-settings-sender-generated-domain"
+                                >
+                                    @{senderDomain.$ ? convertDomainName(senderDomain.$) : 'domain'}
+                                    .{senderTld}
+                                </Text>
+                            </div>
+                        </Form.Field>
+                    </Form.Group>
+                </Form>
+            </SettingsSection>
+        );
+    }
+);

package/src/components/settings/company-trade-checkbox/company-trade-checkbox.module.less

@@ -0,0 +1,13 @@
+@import (reference) '~@servicetitan/tokens/dist/tokens.less';
+
+.card {
+    position: relative;
+
+    .checkbox {
+        position: absolute;
+        top: -@spacing-1;
+        left: -@spacing-1;
+        color: @color-blue;
+        background-color: @color-white;
+    }
+}

package/src/components/settings/company-trade-checkbox/company-trade-checkbox.module.less.d.ts

@@ -0,0 +1,4 @@
+export const __esModule: true;
+export const card: string;
+export const checkbox: string;
+

package/src/components/settings/company-trade-checkbox/index.tsx

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+import classnames from 'classnames';
+
+import { Card, Icon } from '@servicetitan/design-system';
+
+import * as Styles from './company-trade-checkbox.module.less';
+
+export interface CompanyTradeCheckboxProps<TradesType extends string = string> {
+    label?: JSX.Element | string;
+    value?: TradesType;
+    className?: string;
+    active?: boolean;
+    onClick?(item?: TradesType): void;
+}
+
+export function CompanyTradeCheckbox({
+    label,
+    value,
+    className,
+    active,
+    onClick,
+}: CompanyTradeCheckboxProps) {
+    const handleClick = useCallback(() => {
+        if (onClick) {
+            onClick(value);
+        }
+    }, [onClick, value]);
+
+    return (
+        <Card
+            onClick={handleClick}
+            active={active}
+            className={classnames(Styles.card, className)}
+            sharp
+            thin
+        >
+            <Card.Section>
+                {active && <Icon name="check_circle" className={Styles.checkbox} size={24} />}
+                {label}
+            </Card.Section>
+        </Card>
+    );
+}

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

@@ -0,0 +1,78 @@
+import { useCallback, useState } from 'react';
+import { CompanyTradesPicker as Component, Trade } from '.';
+
+export default {
+    title: 'MPA Components/settings/CompanyTradesPicker',
+    component: Component,
+    parameters: {},
+};
+
+enum TradeType {
+    first = 'FIRST',
+    second = 'SECOND',
+    third = 'THIRD',
+    fourth = 'FOURTH',
+}
+
+export function CompanyTradesPicker() {
+    const [trades, setTrades] = useState<Trade<TradeType>[]>([
+        {
+            qaKey: 'first',
+            name: 'first',
+            value: TradeType.first,
+            active: true,
+            asset: {
+                main: 'https://place-hold.it/64x64',
+                x2: 'https://place-hold.it/128x128',
+                x3: 'https://place-hold.it/192x192',
+            },
+        },
+        {
+            qaKey: 'second',
+            name: 'second',
+            value: TradeType.second,
+            active: false,
+            asset: {
+                main: 'https://place-hold.it/64x64',
+                x2: 'https://place-hold.it/128x128',
+                x3: 'https://place-hold.it/192x192',
+            },
+        },
+        {
+            qaKey: 'third',
+            name: 'third',
+            value: TradeType.third,
+            active: false,
+            asset: {
+                main: 'https://place-hold.it/64x64',
+                x2: 'https://place-hold.it/128x128',
+                x3: 'https://place-hold.it/192x192',
+            },
+        },
+        {
+            qaKey: 'fourth',
+            name: 'fourth',
+            value: TradeType.fourth,
+            active: false,
+            asset: {
+                main: 'https://place-hold.it/64x64',
+                x2: 'https://place-hold.it/128x128',
+                x3: 'https://place-hold.it/192x192',
+            },
+        },
+    ]);
+
+    const selectTrade = useCallback(
+        (t: TradeType) => {
+            setTrades(
+                trades.map(trade => ({
+                    ...trade,
+                    active: trade.value === t ? !trade.active : trade.active,
+                }))
+            );
+        },
+        [trades]
+    );
+
+    return <Component<TradeType> trades={trades} onTradeChange={selectTrade} />;
+}

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

@@ -0,0 +1,78 @@
+import { useMemo } from 'react';
+import chunk from 'lodash/chunk';
+
+import { Grid, Text } from '@servicetitan/design-system';
+
+import { SettingsSection } from '../settings-section';
+import { CompanyTradeCheckbox } from '../company-trade-checkbox';
+
+export interface Trade<TradeType extends string> {
+    qaKey?: string;
+    name: string;
+    value: TradeType;
+    active: boolean;
+    asset: {
+        main: string;
+        x2: string;
+        x3: string;
+        alt?: string;
+    };
+}
+
+export interface CompanyTradesPickerProps<TradeType extends string = string> {
+    trades: Trade<TradeType>[];
+    onTradeChange(t?: TradeType): void;
+}
+
+export function CompanyTradesPicker<T extends string = string>({
+    trades,
+    onTradeChange,
+}: CompanyTradesPickerProps<T>) {
+    const rows = useMemo(
+        () => chunk(trades, 4).map((row, idx) => ({ row, key: `row=${idx}` })),
+        [trades]
+    );
+
+    return (
+        <SettingsSection
+            qaPrefix="qa-settings-select-your-trades"
+            title="Select Your Trades"
+            text="Choose which trades describe your business so we can give you relevant content and merge tags."
+        >
+            <Grid columns={4}>
+                {rows.map(({ row, key }) => {
+                    return (
+                        <Grid.Row key={key} stretched className="p-0">
+                            {row.map(trade => {
+                                return (
+                                    <Grid.Column key={trade.value}>
+                                        <CompanyTradeCheckbox
+                                            className={`qa-settings-select-your-trades-${
+                                                trade.qaKey ?? trade.value
+                                            }`}
+                                            active={trade.active}
+                                            onClick={onTradeChange}
+                                            value={trade.value}
+                                            label={
+                                                <div className="ta-center">
+                                                    <img
+                                                        src={trade.asset.main}
+                                                        srcSet={`${trade.asset.x3} 3x, ${trade.asset.x2} 2x`}
+                                                        alt={trade.asset.alt ?? ''}
+                                                    />
+                                                    <Text bold className="m-t-2" size={2}>
+                                                        {trade.name}
+                                                    </Text>
+                                                </div>
+                                            }
+                                        />
+                                    </Grid.Column>
+                                );
+                            })}
+                        </Grid.Row>
+                    );
+                })}
+            </Grid>
+        </SettingsSection>
+    );
+}

package/src/components/settings/double-opt-in/double-opt-in.module.less

@@ -0,0 +1,3 @@
+.button-input {
+    width: 160px;
+}

package/src/components/settings/double-opt-in/double-opt-in.module.less.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const buttonInput: string;
+

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

@@ -0,0 +1,28 @@
+import { CheckboxFieldState, InputFieldState } from '@servicetitan/form';
+import { injectable, provide, useDependencies } from '@servicetitan/react-ioc';
+import { FormState } from 'formstate';
+import { DoubleOptIn as Component } from '.';
+
+export default {
+    title: 'MPA Components/settings/DoubleOptIn',
+    component: Component,
+    parameters: {},
+};
+
+@injectable()
+class DoubleOptInStore {
+    form = new FormState({
+        emailSubject: new InputFieldState('Jump in'),
+        emailHeader: new InputFieldState('Right now'),
+        emailBody: new InputFieldState('Jump in right now! Please!'),
+        emailButtonText: new InputFieldState('JUMP IN'),
+        enabled: new CheckboxFieldState(true),
+    });
+}
+
+export const DoubleOptIn = provide({
+    singletons: [DoubleOptInStore],
+})(() => {
+    const [store] = useDependencies(DoubleOptInStore);
+    return <Component formState={store.form.$} />;
+});

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

@@ -0,0 +1,143 @@
+import { FC, Fragment, useCallback, useState } from 'react';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+
+import { CheckboxFieldState, InputFieldState } from '@servicetitan/form';
+import { Form, Text, ToggleSwitch, Button } from '@servicetitan/design-system';
+import { useConfirm } from '@servicetitan/confirm';
+
+import { SettingsSection } from '../settings-section';
+import { OptInEmailPreview } from '../email-preview/opt-in-email-preview';
+
+import * as Styles from './double-opt-in.module.less';
+
+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>;
+    enabled: CheckboxFieldState;
+}
+export interface DoubleOptInProps {
+    formState: DoubleOptInPropsFormState;
+    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]);
+
+    const handleClickEnable = useCallback(
+        (_0: any, checked: boolean) => {
+            onHandleClickEnable?.(checked);
+            enabled.onChange(checked);
+        },
+        [enabled, onHandleClickEnable]
+    );
+
+    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"
+                    />
+                </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={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}
+            />
+            <OptInEmailPreview
+                {...formState}
+                open={isPreviewOpen}
+                footerText={footerText}
+                onClose={closePreview}
+            />
+        </SettingsSection>
+    );
+});

package/src/components/settings/email-preview/email-preview.module.less

@@ -0,0 +1,62 @@
+@import (reference) '@servicetitan/tokens/dist/tokens.less';
+
+.preview {
+    max-width: 600px;
+    margin: @spacing-0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: @spacing-2 @spacing-0;
+    min-height: 400px;
+    max-height: 70vh;
+
+    .card {
+        background: @color-neutral-10;
+        border: 1px solid @color-neutral-60;
+        border-radius: @border-radius-2;
+        padding: @spacing-5;
+        width: 100%;
+        box-sizing: border-box;
+
+        .title {
+            font-family: Arial, sans-serif;
+            font-weight: bold;
+            font-size: 30px;
+            line-height: 34px;
+            color: @color-neutral-400;
+            margin-bottom: @spacing-0;
+        }
+
+        .text {
+            font-family: Helvetica, sans-serif;
+            font-size: @typescale-4;
+            line-height: 23px;
+            color: @color-neutral-200;
+            margin-top: 20px;
+            margin-bottom: @spacing-0;
+        }
+
+        .button {
+            background: @color-blue-400;
+            border-radius: 4px;
+            font-family: Helvetica, sans-serif;
+            font-size: @typescale-4;
+            line-height: 23px;
+            text-align: center;
+            color: @color-neutral-0;
+            padding: 13px @spacing-2;
+            cursor: pointer;
+            margin-top: 30px;
+            display: inline-block;
+        }
+
+        .footer {
+            font-family: Helvetica, sans-serif;
+            font-size: @typescale-3;
+            line-height: 18px;
+            color: @color-neutral-200;
+            margin-top: 30px;
+            margin-bottom: @spacing-0;
+        }
+    }
+}

package/src/components/settings/email-preview/email-preview.module.less.d.ts

@@ -0,0 +1,8 @@
+export const __esModule: true;
+export const preview: string;
+export const card: string;
+export const title: string;
+export const text: string;
+export const button: string;
+export const footer: string;
+

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

@@ -0,0 +1,69 @@
+import { FC } from 'react';
+import classnames from 'classnames';
+
+import { Modal, ModalProps } from '@servicetitan/design-system';
+
+import * as Styles from './email-preview.module.less';
+
+interface EmailPreviewProps {
+    title: string;
+    header?: string;
+    body?: string;
+    buttonText?: string;
+    footer?: string;
+    onClose: ModalProps['onClose'];
+}
+
+export const EmailPreview: FC<EmailPreviewProps> = ({
+    title,
+    header,
+    body,
+    buttonText,
+    footer,
+    onClose,
+}) => {
+    const isCardEmpty = !header && !body && !buttonText;
+
+    return (
+        <Modal
+            open
+            size={Modal.Sizes.M}
+            closable
+            title={title}
+            onClose={onClose}
+            className="qa-email-preview"
+        >
+            <div className={Styles.preview}>
+                {!isCardEmpty && (
+                    <div className={Styles.card}>
+                        {header && (
+                            <h1 className={classnames(Styles.title, 'qa-email-preview-header')}>
+                                {header}
+                            </h1>
+                        )}
+                        {body && (
+                            <p className={classnames(Styles.text, 'qa-email-preview-body-copy')}>
+                                {body}
+                            </p>
+                        )}
+                        {buttonText && (
+                            <a
+                                className={classnames(
+                                    Styles.button,
+                                    'qa-email-preview-button-text'
+                                )}
+                            >
+                                {buttonText}
+                            </a>
+                        )}
+                        {footer && (
+                            <p className={classnames(Styles.footer, 'qa-email-preview-footer')}>
+                                {footer}
+                            </p>
+                        )}
+                    </div>
+                )}
+            </div>
+        </Modal>
+    );
+};