@servicetitan/mpa-components 1.10.0 → 2.0.0

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

@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import classNames from 'classnames';
+
+import { Flex, Card } from '@servicetitan/anvil2';
+
+import { NameAndMailSection } from './name-and-mail-section';
+import { BrandCardProps } from '../../../utils/interfaces';
+import { ActionsButtonSection } from './actions-button-section';
+import { CardTags } from './cart-tags';
+import { BrandLogo } from './brand-logo';
+
+import * as Styles from '../styles.module.less';
+
+const BRAND_NAME_PLACEHOLDER = 'Assign Brand Name';
+
+export const BrandCard: FC<BrandCardProps> = ({
+    actions,
+    email,
+    isDefault,
+    isShared,
+    logo,
+    name,
+    hasError,
+}) => {
+    const nameToShow = name || BRAND_NAME_PLACEHOLDER;
+
+    return (
+        <Card
+            className={classNames(
+                {
+                    [Styles.cardWithError]: hasError,
+                },
+                Styles.brandCard,
+                'qa-brand-card',
+            )}
+            padding="large"
+        >
+            <Flex className={Styles.cardContent} justifyContent="space-between" direction="column">
+                <Flex
+                    justifyContent="space-between"
+                    alignItems="flex-start"
+                    className="qa-brand-card-left-section"
+                >
+                    <BrandLogo logo={logo} alt={nameToShow} />
+                    <ActionsButtonSection actions={actions} />
+                </Flex>
+
+                <Flex justifyContent="space-between">
+                    <NameAndMailSection name={name} nameToShow={nameToShow} email={email} />
+                    <CardTags isDefault={isDefault} isShared={isShared} />
+                </Flex>
+            </Flex>
+        </Card>
+    );
+};

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

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import classNames from 'classnames';
+
+import { Flex, Icon } from '@servicetitan/anvil2';
+import ImageIcon from '@servicetitan/anvil2/assets/icons/material/round/image.svg';
+import { tokens } from '@servicetitan/tokens/core/index';
+
+import * as Styles from '../styles.module.less';
+
+export const BrandLogo: FC<{ logo?: string; alt?: string }> = ({ logo, alt }) =>
+    logo ? (
+        <img className={classNames(Styles.brandImg, 'qa-brand-logo')} src={logo} alt={alt} />
+    ) : (
+        <Flex
+            className={classNames(Styles.brandImgPlaceholder, 'qa-brand-logo-placeholder')}
+            alignItems="center"
+            justifyContent="center"
+        >
+            <Icon svg={ImageIcon} size="large" color={tokens.colorNeutral90} />
+        </Flex>
+    );

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

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+
+import { Chip, Flex } from '@servicetitan/anvil2';
+import { tokens } from '@servicetitan/tokens/core/index';
+
+export const CardTags: FC<{ isDefault?: boolean; isShared?: boolean }> = ({
+    isDefault,
+    isShared,
+}) => {
+    if (!isDefault && !isShared) {
+        return null;
+    }
+
+    return (
+        <Flex direction="column" alignItems="flex-end" className="qa-brand-card-tags" gap="1">
+            {isShared && <Chip color={tokens.colorPurple100} label="Corporate HQ" size="small" />}
+            {isDefault && <Chip label="Default" color={tokens.colorNeutral50} size="small" />}
+        </Flex>
+    );
+};

package/src/components/brands/brand-card/name-and-mail-section.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import classNames from 'classnames';
+
+import { BodyText, Headline } from '@servicetitan/design-system';
+import { Flex } from '@servicetitan/anvil2';
+
+import * as Styles from '../styles.module.less';
+
+export const NameAndMailSection: FC<{ name?: string; nameToShow: string; email?: string }> = ({
+    name,
+    email,
+    nameToShow,
+}) => (
+    <Flex
+        justifyContent="space-between"
+        direction="column"
+        className={classNames(Styles.cardLeftSectionTexts, 'qa-brand-card-name-and-mail')}
+    >
+        <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>
+        )}
+    </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

@@ -0,0 +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 '../../../utils/interfaces';
+
+import * as Styles from '../styles.module.less';
+
+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/index.ts

@@ -0,0 +1 @@
+export * from './cards-grid/cards-grid';

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

@@ -0,0 +1,59 @@
+@import (reference) '@servicetitan/tokens/dist/tokens.less';
+
+@action-menu-item-padding: 12px;
+@card-min-width: 330px;
+@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);
+}
+
+@media (min-width: 1120px) {
+    .grid {
+        grid-template-columns: repeat(@max-number-of-cards - 1, 1fr);
+    }
+}
+
+@media (min-width: 1620px) {
+    .grid {
+        grid-template-columns: repeat(@max-number-of-cards, 1fr);
+    }
+}
+
+.brand-card {
+    height: 200px;
+    min-width: @card-min-width;
+    max-width: @card-max-width;
+}
+
+.card-content {
+    width: 100%;
+}
+
+.card-left-section-texts {
+    min-width: 0;
+}
+
+.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;
+}
+
+.card-with-error {
+    border-color: @color-red-500;
+}

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

@@ -0,0 +1,10 @@
+export const __esModule: true;
+export const brandCard: string;
+export const brandImg: string;
+export const brandImgPlaceholder: string;
+export const cardContent: string;
+export const cardLeftSectionTexts: string;
+export const cardWithError: string;
+export const deleteTooltip: string;
+export const grid: string;
+

package/src/enums/brands.ts

@@ -0,0 +1,5 @@
+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 './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,
+};