@servicetitan/mpa-components 2.2.0 → 2.2.1

package/src/components/campaign-actions/actions-button/campaign-actions.stories.tsx

@@ -1,19 +0,0 @@
-import { CampaignActions as Component } from './campaign-actions';
-
-export function CampaignActions() {
-    return (
-        <Component
-            onClickEdit={() => {}}
-            onClickStop={() => {}}
-            onClickClone={() => {}}
-            onClickArchive={() => {}}
-            onClickUnarchive={() => {}}
-        />
-    );
-}
-
-export default {
-    title: 'MRK Components/CampaignActions',
-    component: CampaignActions,
-    parameters: {},
-};

package/src/components/settings/company-details/company-details-form.stories.tsx

@@ -1,45 +0,0 @@
-import { InputFieldState } from '@servicetitan/form';
-import { FormState } from 'formstate';
-
-import { CompanyDetails as Component } from '.';
-import { LogoPicker } from '../logo-picker/logo-picker.stories';
-import omit from 'lodash/omit';
-
-const form = new FormState({
-    companyName: new InputFieldState('Acme Inc'),
-    tagline: new InputFieldState('Ayo! The Acme rules'),
-    street: new InputFieldState('Backed st.'),
-    unit: new InputFieldState('123'),
-    city: new InputFieldState('Glendale'),
-    state: new InputFieldState('CA'),
-    zipCode: new InputFieldState('91203'),
-    companyEmail: new InputFieldState('info@acme.com'),
-    companyWebsite: new InputFieldState('www.acme.com'),
-    yearEstablished: new InputFieldState(1999),
-});
-
-export const CompanyDetailsWithoutWebsite = () => {
-    return (
-        <Component
-            formState={omit(form.$, ['companyWebsite'])}
-            logoPicker={<LogoPicker />}
-            handleCompanyEmailBlur={() => alert('company email blurred')}
-        />
-    );
-};
-
-export const CompanyDetails = () => {
-    return (
-        <Component
-            formState={form.$}
-            logoPicker={<LogoPicker />}
-            handleCompanyEmailBlur={() => alert('company email blurred')}
-        />
-    );
-};
-
-export default {
-    title: 'MPA Components/settings/CompanyDetails',
-    component: CompanyDetails,
-    parameters: {},
-};

package/src/components/settings/company-email-footer/company-email-footer.stories.tsx

@@ -1,24 +0,0 @@
-import { InputFieldState, TextAreaFieldState } from '@servicetitan/form';
-import { FormState } from 'formstate';
-
-import { CompanyEmailFooter as Component } from '.';
-
-export default {
-    title: 'MPA Components/settings/CompanyEmailFooter',
-    component: Component,
-    parameters: {},
-};
-
-class CompanyEmailStore {
-    form = new FormState({
-        legalCopy: new TextAreaFieldState('Legal copy example'),
-        license: new InputFieldState('License'),
-        copyrightText: new InputFieldState('Copyritght 2022'),
-    });
-}
-
-const store = new CompanyEmailStore();
-
-export const CompanyEmailFooter = () => {
-    return <Component formState={store.form.$} />;
-};

package/src/components/settings/company-email-reply-to/company-email-reply-to.stories.tsx

@@ -1,22 +0,0 @@
-import { InputFieldState } from '@servicetitan/form';
-import { FormState } from 'formstate';
-
-import { CompanyEmailReplyTo as Component } from '.';
-
-export default {
-    title: 'MPA Components/settings/CompanyEmailReplyTo',
-    component: Component,
-    parameters: {},
-};
-
-class CompanyEmailReplyToStore {
-    form = new FormState({
-        replyToEmail: new InputFieldState('info@acme.com'),
-    });
-}
-
-const store = new CompanyEmailReplyToStore();
-
-export const CompanyEmailReplyTo = () => {
-    return <Component replyToEmail={store.form.$.replyToEmail} />;
-};

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

@@ -1,28 +0,0 @@
-import { InputFieldState } from '@servicetitan/form';
-import { FormState } from 'formstate';
-
-import { CompanyEmailSender as Simple, CompanyEmailSenderCustomDomain as Custom } from '.';
-
-export default {
-    title: 'MPA Components/settings/CompanyEmailSender',
-    component: Simple,
-    parameters: {},
-};
-
-class CompanyEmailSenderStore {
-    form = new FormState({
-        senderEmail: new InputFieldState('email@acme.com'),
-        senderName: new InputFieldState('Pinky & Brain'),
-        senderDomain: new InputFieldState('acme'),
-    });
-}
-
-const store = new CompanyEmailSenderStore();
-
-export const CompanyEmailSenderCustomDomain = () => {
-    return <Custom formState={store.form.$} senderTld="tld.com" />;
-};
-
-export const CompanyEmailSender = () => {
-    return <Simple senderName={store.form.$.senderName} senderEmail={store.form.$.senderEmail} />;
-};

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

@@ -1,78 +0,0 @@
-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/double-opt-in/double-opt-in.stories.tsx

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

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

@@ -1,118 +0,0 @@
-import { useEffect, useState } from 'react';
-import { TableCellProps, TableState } from '@servicetitan/table';
-import { InMemoryDataSource } from '@servicetitan/data-query';
-
-import { emailValidationHoc, EmailValidationTableRecord } from '.';
-
-enum EmailValidationLevel {
-    Low = 1,
-    Medium = 2,
-    High = 3,
-}
-
-enum EmailValidationResult {
-    Undeliverable = 0,
-    Typo = 1,
-    Risky = 2,
-    Pending = -1,
-}
-
-const levelResultMap = new Map([
-    [EmailValidationLevel.High, [EmailValidationResult.Undeliverable]],
-    [EmailValidationLevel.Medium, [EmailValidationResult.Undeliverable]],
-    [EmailValidationLevel.Low, [EmailValidationResult.Undeliverable]],
-]);
-
-const resultToText = new Map<EmailValidationResult, string>([
-    [EmailValidationResult.Risky, 'Risky'],
-    [EmailValidationResult.Typo, 'Typo'],
-    [EmailValidationResult.Undeliverable, 'Undeliverable'],
-]);
-
-const resultToTooltipText = new Map<EmailValidationResult, string>([
-    [
-        EmailValidationResult.Risky,
-        'Address was determined risky based on historical analysis or problematic results.',
-    ],
-    [
-        EmailValidationResult.Typo,
-        'Address was possibly typed incorrectly during sign-up, or matches known typo domains',
-    ],
-    [
-        EmailValidationResult.Undeliverable,
-        'Address was determined invalid after performing multiple checks including MX, SMTP, etc.',
-    ],
-]);
-
-const EmailValidationComponent = emailValidationHoc<EmailValidationLevel, EmailValidationResult>({
-    resultToText,
-    levelTypeMap: {
-        high: EmailValidationLevel.High,
-        medium: EmailValidationLevel.Medium,
-        low: EmailValidationLevel.Low,
-    },
-    levelResultMap,
-    resultToTooltipText,
-    TenantDateCell: (props: TableCellProps) => {
-        const value = props.dataItem[props.field!];
-        return <td className={props.className}>{value.toString()}</td>;
-    },
-});
-
-export default {
-    title: 'MPA Components/settings/EmailValidation',
-    component: EmailValidationComponent,
-    parameters: {},
-};
-
-export function EmailValidation() {
-    const [type, setType] = useState<EmailValidationLevel>(EmailValidationLevel.High);
-    const [loading, setLoading] = useState(true);
-
-    const grid = new TableState<EmailValidationTableRecord<EmailValidationResult>>({
-        dataSource: null,
-        pageSize: 15,
-    });
-
-    useEffect(() => {
-        async function load() {
-            if (!loading) {
-                return;
-            }
-            setLoading(true);
-            const dataSource = new InMemoryDataSource<
-                EmailValidationTableRecord<EmailValidationResult>
-            >([
-                {
-                    id: 1,
-                    active: false,
-                    createdOn: new Date(),
-                    result: EmailValidationResult.Risky,
-                    email: 'varg@vikernes.com',
-                    dateAdded: new Date(),
-                },
-                {
-                    id: 2,
-                    active: true,
-                    createdOn: new Date(),
-                    result: EmailValidationResult.Typo,
-                    email: 'joe@biden.com',
-                    dateAdded: new Date(),
-                },
-            ]);
-            await grid.setDataSource(dataSource, true);
-            setLoading(false);
-        }
-        load();
-    });
-
-    return (
-        <EmailValidationComponent
-            loading={loading}
-            resultGrid={grid}
-            validationRiskType={type}
-            setValidationRiskType={setType}
-            handleDownload={() => alert('downloading csv')}
-        />
-    );
-}

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

@@ -1,21 +0,0 @@
-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/opt-out-message.stories.tsx

@@ -1,27 +0,0 @@
-import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
-import { FormState } from 'formstate';
-import { OptOutMessage as Component } from '.';
-
-export default {
-    title: 'MPA Components/settings/OptOutMessage',
-    component: Component,
-    parameters: {},
-};
-
-class OptOutStore {
-    form = new FormState({
-        subjectLine: new InputFieldState('Good bye'),
-        header: new InputFieldState('Opt out of emails'),
-        body: new TextAreaFieldState('Sorry to see you go!'),
-        buttonText: new InputFieldState('Bye'),
-        monthsLimit: new InputFieldState(6),
-        enabled: new CheckboxFieldState(true),
-        autoSuppressionEnabled: new CheckboxFieldState(true),
-    });
-}
-
-const store = new OptOutStore();
-
-export const OptOutMessage = () => {
-    return <Component formState={store.form.$} />;
-};

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

@@ -1,16 +0,0 @@
-import { Headline } from '@servicetitan/design-system';
-import { SettingsSection as Component } from '.';
-
-export default {
-    title: 'MPA Components/settings/SettingsSection',
-    component: Component,
-    parameters: {},
-};
-
-export const SettingsSection = () => {
-    return (
-        <Component title="Hey! The test">
-            <Headline>The body</Headline>
-        </Component>
-    );
-};