@servicetitan/mpa-components 1.11.0 → 2.1.0

package/src/components/brands/brand-card/brand-card.tsx

@@ -1,21 +1,11 @@
-import { FC, useMemo, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { FC } from 'react';
+import classNames from 'classnames';
 
-import {
-    ActionMenu,
-    BodyText,
-    Button,
-    Card,
-    Headline,
-    Icon,
-    Stack,
-    Tag,
-    Tooltip,
-} from '@servicetitan/design-system';
-import { DomainValidationStatus } from '@servicetitan/marketing-services-api/dist/settings/brand.mrk.api';
-import { tokens } from '@servicetitan/tokens/core';
+import { Flex, Card, Avatar } from '@servicetitan/anvil2';
 
-import { BrandAction, BrandCardProps } from '../../../enums/brands';
+import { BrandCardProps } from '../../../utils/interfaces';
+import { ActionsButtonSection } from './actions-button-section';
+import { InfoSection } from './info-section';
 
 import * as Styles from '../styles.module.less';
 
@@ -23,223 +13,49 @@ const BRAND_NAME_PLACEHOLDER = 'Assign Brand Name';
 
 export const BrandCard: FC<BrandCardProps> = ({
     actions,
-    domainValidationStatus,
     email,
     isDefault,
     isShared,
     logo,
     name,
+    hasError,
 }) => {
-    const [isOpen, setOpen] = useState(false);
-
-    const actionsButtonSection = useMemo(() => {
-        if (!Array.isArray(actions)) {
-            return (
-                <SingleActionButtonSection
-                    action={actions}
-                    domainValidationStatus={domainValidationStatus}
-                />
-            );
-        }
-
-        const trigger = (
-            <Button outline size="small" onClick={() => setOpen(true)}>
-                Actions <Icon name="keyboard_arrow_down" size={16} />
-            </Button>
-        );
-
-        return (
-            <ActionMenu
-                trigger={trigger}
-                open={isOpen}
-                onClickOutside={() => setOpen(false)}
-                direction="bl"
-            >
-                {actions.map(action => {
-                    if (action.href) {
-                        return (
-                            <Link to={action.href} key={action.name}>
-                                <ActionMenu.Item key={action.name} disabled={action.disabled}>
-                                    <BodyText subdued={action.disabled}>{action.name}</BodyText>
-                                </ActionMenu.Item>
-                            </Link>
-                        );
-                    }
-
-                    const actionClick = () => {
-                        setOpen(false);
-                        if (action.action) {
-                            action.action();
-                        }
-                    };
-
-                    return (
-                        <ActionMenu.Item
-                            disabled={action.disabled}
-                            key={action.name}
-                            onClick={actionClick}
-                        >
-                            <BodyText subdued={action.disabled}>{action.name}</BodyText>
-                        </ActionMenu.Item>
-                    );
-                })}
-            </ActionMenu>
-        );
-    }, [isOpen, setOpen, actions, domainValidationStatus]);
-
     const nameToShow = name || BRAND_NAME_PLACEHOLDER;
 
     return (
         <Card
-            className={Styles.brandCard}
-            status={domainValidationStatus === DomainValidationStatus.Error ? 'error' : 'default'}
+            className={classNames(
+                {
+                    [Styles.cardWithError]: hasError,
+                },
+                Styles.brandCard,
+                'qa-brand-card',
+            )}
+            padding="large"
         >
-            <Stack direction="row" spacing={2} className={Styles.cardContent}>
-                <Stack.Item fill>
-                    <Stack direction="column">
-                        {logo && nameToShow !== 'Corporate Brand 2' ? (
-                            <img className={Styles.brandImg} src={logo} alt={name} />
-                        ) : (
-                            <div className={Styles.brandImgPlaceholder}>
-                                <Icon name="image" className="c-neutral-90" size={24} />
-                            </div>
-                        )}
-
-                        <Stack direction="column" className="m-t-3">
-                            <Headline
-                                el="p"
-                                subdued={!name}
-                                className="t-truncate-i m-0"
-                                title={nameToShow}
-                            >
-                                {nameToShow}
-                            </Headline>
-                            {email && (
-                                <BodyText subdued title={email} className="t-truncate-i">
-                                    {email}
-                                </BodyText>
-                            )}
-                        </Stack>
-                    </Stack>
-                </Stack.Item>
-                <Stack direction="column">
-                    {actionsButtonSection}
-                    <CardTags isDefault={isDefault} isShared={isShared} />
-                </Stack>
-            </Stack>
+            <Flex
+                className={Styles.cardContent}
+                justifyContent="space-between"
+                direction="column"
+                gap="6"
+            >
+                <Flex
+                    justifyContent="space-between"
+                    alignItems="flex-start"
+                    className="qa-brand-card-left-section"
+                >
+                    <Avatar image={logo} name={nameToShow} size="large" />
+                    <ActionsButtonSection actions={actions} />
+                </Flex>
+
+                <InfoSection
+                    name={name}
+                    nameToShow={nameToShow}
+                    email={email}
+                    isDefault={isDefault}
+                    isShared={isShared}
+                />
+            </Flex>
         </Card>
     );
 };
-
-const CardTags: FC<{ isDefault: boolean; isShared: boolean }> = ({ isDefault, isShared }) => {
-    if (!isDefault && !isShared) {
-        return null;
-    }
-
-    return (
-        <Stack direction="column" alignItems="flex-end" className={Styles.tags}>
-            {isShared && (
-                <Tag className={Styles.corporateTag} color="info" subtle compact>
-                    Corporate HQ
-                </Tag>
-            )}
-            {isDefault && (
-                <Tag className={Styles.defaultTag} compact>
-                    Default
-                </Tag>
-            )}
-        </Stack>
-    );
-};
-
-const SingleActionButtonSection: FC<{
-    action: BrandAction;
-    domainValidationStatus?: DomainValidationStatus;
-}> = ({ domainValidationStatus, action }) => {
-    const validationStatusIcon = useMemo(() => {
-        return <ValidationStatusIcon status={domainValidationStatus} />;
-    }, [domainValidationStatus]);
-
-    if (domainValidationStatus === DomainValidationStatus.Pending) {
-        return (
-            <Stack spacing={1} alignItems="center">
-                <BodyText size="small">Validation In Process</BodyText>
-                {validationStatusIcon}
-            </Stack>
-        );
-    }
-
-    return (
-        <Stack spacing={2} alignItems="center">
-            {validationStatusIcon}
-            {action.isConfigured && (
-                <Icon name="check_circle" color={tokens.colorGreen500} size={24} />
-            )}
-
-            {action.inProgress ? (
-                <InProgressButton action={action} />
-            ) : (
-                <StandardButton action={action} />
-            )}
-        </Stack>
-    );
-};
-
-const StandardButton: FC<{ action: BrandAction }> = ({ action }) => (
-    <Tooltip text={action.disabled ? action.tooltipMessage : ''}>
-        {action.href ? (
-            <Link to={action.href}>
-                <Button size="small" primary outline disabled={action.disabled}>
-                    {action.name}
-                </Button>
-            </Link>
-        ) : (
-            <Button size="small" primary onClick={action.action} outline disabled={action.disabled}>
-                {action.name}
-            </Button>
-        )}
-    </Tooltip>
-);
-
-const InProgressButton: FC<{ action: BrandAction }> = ({ action }) => (
-    <Tooltip text={action.disabled ? action.tooltipMessage : ''}>
-        {action.href ? (
-            <Link to={action.href}>
-                <Button size="small" primary text className="m-0 p-1">
-                    <BodyText size="small" className="m-r-half">
-                        Registration In Progress
-                    </BodyText>
-                    <Icon name="hourglass_full" color={tokens.colorBlue} size={16} />
-                </Button>
-            </Link>
-        ) : (
-            <Button size="small" primary text className="m-0 p-1" onClick={action.action}>
-                <BodyText size="small" className="m-r-1">
-                    Registration In Progress
-                </BodyText>
-                <Icon name="hourglass_full" color={tokens.colorBlue} size={16} />
-            </Button>
-        )}
-    </Tooltip>
-);
-
-const ValidationStatusIcon: FC<{ status?: DomainValidationStatus }> = ({ status }) => {
-    switch (status) {
-        case DomainValidationStatus.Error:
-            return (
-                <Tooltip
-                    direction="t"
-                    text="Error is detected in processing the Sender Domain validation. Please check and try again."
-                    className="cursor-pointer"
-                >
-                    <Icon name="warning" color={tokens.colorRed500} size={24} />
-                </Tooltip>
-            );
-        case DomainValidationStatus.Validated:
-            return <Icon name="check_circle" color={tokens.colorGreen500} size={24} />;
-        case DomainValidationStatus.Pending:
-            return <Icon name="hourglass_full" color={tokens.colorBlue500} size={24} />;
-        default:
-            return null;
-    }
-};

package/src/components/brands/brand-card/info-section.tsx

@@ -0,0 +1,32 @@
+import type { FC } from 'react';
+
+import { Chip, Flex, Text } from '@servicetitan/anvil2';
+
+interface InfoSectionProps {
+    nameToShow: string;
+    name?: string;
+    email?: string;
+    isDefault?: boolean;
+    isShared?: boolean;
+}
+
+export const InfoSection: FC<InfoSectionProps> = ({ nameToShow, email, isDefault, isShared }) => (
+    <Flex direction="column" gap="4">
+        <Flex direction="column" gap="1">
+            <Flex gap="2" alignItems="center">
+                <Text className="t-truncate-i m-0" title={nameToShow} variant="headline" el="h3">
+                    {nameToShow}
+                </Text>
+                <Flex gap="1">
+                    {isDefault && <Chip label="Default" />}
+                    {isShared && <Chip color="#b5deff" label="Corporate HQ" />}
+                </Flex>
+            </Flex>
+            {email && (
+                <Text subdued title={email} className="t-truncate-i">
+                    {email}
+                </Text>
+            )}
+        </Flex>
+    </Flex>
+);

package/src/components/brands/brand-card/single-action-button.tsx

@@ -0,0 +1,84 @@
+import { FC, PropsWithChildren } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import HelpIcon from '@servicetitan/anvil2/assets/icons/material/round/help.svg';
+import { Chip, Flex, Tooltip as TooltipA2, Button } from '@servicetitan/anvil2';
+import { ButtonAppearance } from '@servicetitan/hammer-react/dist/types/props';
+
+import { BrandAction } from '../../../utils/interfaces';
+import { BrandActionChipColor, BrandActionChipLabel } from '../../../utils/mappers';
+import { ActionStatus } from '../../../enums/brands';
+
+export const SingleActionButtonSection: FC<{
+    action: BrandAction;
+}> = ({ action }) => {
+    const history = useHistory();
+    const handleClick = () => {
+        if (action.action) {
+            action.action();
+        }
+
+        if (action.href) {
+            history.push(action.href);
+        }
+    };
+
+    let buttonAppearance: ButtonAppearance | undefined;
+    if (action.status === undefined) {
+        buttonAppearance = 'primary';
+    } else if (!action.disabled) {
+        buttonAppearance = 'secondary';
+    }
+
+    return (
+        <Flex gap="2" alignItems="center" className="qa-brand-card-single-action">
+            <ActionChip status={action.status} statusTooltip={action.statusTooltip} />
+            <Button
+                size="small"
+                onClick={handleClick}
+                disabled={action.disabled}
+                appearance={buttonAppearance}
+            >
+                {action.name}
+            </Button>
+            {action.disabled && (
+                <DisabledActionHelper>{action.disableTooltipContent?.()}</DisabledActionHelper>
+            )}
+        </Flex>
+    );
+};
+
+const ActionChip: FC<{ status?: ActionStatus; statusTooltip?: string }> = ({
+    status,
+    statusTooltip,
+}) => {
+    if (status === undefined) {
+        return null;
+    }
+
+    const chip = (
+        <Chip
+            label={BrandActionChipLabel[status]}
+            color={BrandActionChipColor[status]}
+            size="small"
+        />
+    );
+
+    return statusTooltip ? (
+        <TooltipA2>
+            <TooltipA2.Trigger>{chip}</TooltipA2.Trigger>
+            <TooltipA2.Content>{statusTooltip}</TooltipA2.Content>
+        </TooltipA2>
+    ) : (
+        chip
+    );
+};
+
+const DisabledActionHelper: FC<PropsWithChildren> = ({ children }) => (
+    <TooltipA2>
+        <TooltipA2.Trigger>
+            <Button icon={HelpIcon} size="small" />
+        </TooltipA2.Trigger>
+        <TooltipA2.Content>{children}</TooltipA2.Content>
+    </TooltipA2>
+);

package/src/components/brands/cards-grid/cards-grid.tsx

@@ -1,16 +1,20 @@
 import { FC } from 'react';
+import classNames from 'classnames';
 
 import { Grid } from '@servicetitan/anvil2';
 
 import { BrandCard } from '../brand-card/brand-card';
-import { BrandCardProps } from '../../../enums/brands';
+import { BrandCardProps } from '../../../utils/interfaces';
 
 import * as Styles from '../styles.module.less';
 
-export const CardsGrid: FC<{ brands: BrandCardProps[] }> = ({ brands }) => (
-    <Grid className={Styles.grid} gap="6">
-        {brands.map(brand => {
-            return <BrandCard key={brand.id} {...brand} />;
-        })}
+export const CardsGrid: FC<{
+    brands: BrandCardProps[];
+    qaIdentifier: string;
+}> = ({ brands, qaIdentifier }) => (
+    <Grid className={classNames(Styles.grid, `qa-${qaIdentifier}-cards-grid`)} gap="6">
+        {brands.map(brand => (
+            <BrandCard key={brand.id} {...brand} />
+        ))}
     </Grid>
 );

package/src/components/brands/styles.module.less

@@ -5,10 +5,6 @@
 @card-max-width: 700px;
 @max-number-of-cards: 3;
 
-.delete-tooltip {
-    min-width: 327px;
-}
-
 .grid {
     grid-template-columns: repeat(auto-fill, minmax(@card-min-width, 1fr));
     max-width: calc(@card-max-width * @max-number-of-cards + @spacing-3 * 2);
@@ -27,47 +23,14 @@
 }
 
 .brand-card {
-    height: 200px;
     min-width: @card-min-width;
     max-width: @card-max-width;
-    box-sizing: border-box;
-    background: inherit !important;
-
-    :global(.CardSection) {
-        height: 150px;
-        background-color: @color-white;
-    }
 }
 
 .card-content {
-    height: 139px;
-}
-
-.brand-img {
-    width: @spacing-6;
-    height: @spacing-6;
-    min-width: @spacing-6;
-    min-height: @spacing-6;
-    border-radius: @border-radius-circular;
-    border: solid 1px @color-neutral-60;
-}
-
-.brand-img-placeholder {
-    .brand-img();
-    background-color: @color-neutral-60;
-}
-
-.tags {
-    height: 41px;
-    margin-bottom: 2px;
-    margin-top: auto;
-}
-
-.default-tag {
-    width: 53px;
+    width: 100%;
 }
 
-.corporate-tag {
-    min-width: 86px;
-    margin-bottom: @spacing-half;
+.card-with-error {
+    border-color: @color-red-500;
 }

package/src/components/brands/styles.module.less.d.ts

@@ -1,11 +1,6 @@
 export const __esModule: true;
 export const brandCard: string;
-export const brandImg: string;
-export const brandImgPlaceholder: string;
 export const cardContent: string;
-export const corporateTag: string;
-export const defaultTag: string;
-export const deleteTooltip: string;
+export const cardWithError: string;
 export const grid: string;
-export const tags: string;
 

package/src/enums/brands.ts

@@ -1,23 +1,5 @@
-import { DomainValidationStatus } from '@servicetitan/marketing-services-api/dist/settings/brand.mrk.api';
-
-export interface BrandAction {
-    name: string;
-    disabled?: boolean;
-
-    tooltipMessage?: string;
-    inProgress?: boolean;
-    isConfigured?: boolean;
-    href?: string;
-    action?: () => void;
-}
-
-export interface BrandCardProps {
-    id: string;
-    actions: BrandAction | BrandAction[];
-    logo?: string;
-    name?: string;
-    isDefault: boolean;
-    email?: string;
-    domainValidationStatus?: DomainValidationStatus;
-    isShared: boolean;
+export enum ActionStatus {
+    Error,
+    Pending,
+    Approved,
 }

package/src/index.ts

@@ -1,4 +1,6 @@
 export * from './components/settings';
 export * from './components/campaign-actions';
-export * from './enums/brands';
+export * from './components/settings';
 export * from './utils/helpers';
+export * from './utils/interfaces';
+export * from './enums/brands';

package/src/utils/interfaces.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'react';
+import { ActionStatus } from '../enums/brands';
+
+export interface BrandAction {
+    name: string;
+    disabled?: boolean;
+    disableTooltipContent?: () => JSX.Element | string;
+    href?: string;
+    status?: ActionStatus;
+    statusTooltip?: string;
+    action?: () => void;
+}
+
+export interface BrandCardProps {
+    id: string;
+    hasError?: boolean;
+    actions: BrandAction | BrandAction[];
+    logo?: string;
+    name?: string;
+    isDefault: boolean;
+    email?: string;
+    isShared?: boolean;
+}

package/src/utils/mappers.ts

@@ -0,0 +1,14 @@
+import { ActionStatus } from '../enums/brands';
+import { tokens } from '@servicetitan/tokens/core';
+
+export const BrandActionChipLabel: Record<ActionStatus, string> = {
+    [ActionStatus.Pending]: 'Pending',
+    [ActionStatus.Error]: 'Error',
+    [ActionStatus.Approved]: 'Complete',
+};
+
+export const BrandActionChipColor: Record<ActionStatus, string> = {
+    [ActionStatus.Pending]: tokens.colorOrange200,
+    [ActionStatus.Error]: tokens.colorRed500,
+    [ActionStatus.Approved]: tokens.colorGreen200,
+};