@servicetitan/mpa-components 1.10.0 → 1.11.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.11.0](https://github.com/servicetitan/marketing/compare/@servicetitan/mpa-components@1.10.0...@servicetitan/mpa-components@1.11.0) (2025-04-02)
+
+**Note:** Version bump only for package @servicetitan/mpa-components
+
+
+
+
+
 # [1.10.0](https://github.com/servicetitan/marketing/compare/@servicetitan/mpa-components@1.9.0...@servicetitan/mpa-components@1.10.0) (2024-09-18)
 
 **Note:** Version bump only for package @servicetitan/mpa-components

package/lib/components/brands/brand-card/brand-card.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { BrandCardProps } from '../../../enums/brands';
+export declare const BrandCard: FC<BrandCardProps>;
+//# sourceMappingURL=brand-card.d.ts.map

package/lib/components/brands/brand-card/brand-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-card.d.ts","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/brand-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAC;AAiB9C,OAAO,EAAe,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAMpE,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA4GxC,CAAC"}

package/lib/components/brands/brand-card/brand-card.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+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 * as Styles from '../styles.module.less';
+const BRAND_NAME_PLACEHOLDER = 'Assign Brand Name';
+export const BrandCard = ({ actions, domainValidationStatus, email, isDefault, isShared, logo, name, }) => {
+    const [isOpen, setOpen] = useState(false);
+    const actionsButtonSection = useMemo(() => {
+        if (!Array.isArray(actions)) {
+            return (_jsx(SingleActionButtonSection, { action: actions, domainValidationStatus: domainValidationStatus }));
+        }
+        const trigger = (_jsxs(Button, { outline: true, size: "small", onClick: () => setOpen(true), children: ["Actions ", _jsx(Icon, { name: "keyboard_arrow_down", size: 16 })] }));
+        return (_jsx(ActionMenu, { trigger: trigger, open: isOpen, onClickOutside: () => setOpen(false), direction: "bl", children: actions.map(action => {
+                if (action.href) {
+                    return (_jsx(Link, { to: action.href, children: _jsx(ActionMenu.Item, { disabled: action.disabled, children: _jsx(BodyText, { subdued: action.disabled, children: action.name }) }, action.name) }, action.name));
+                }
+                const actionClick = () => {
+                    setOpen(false);
+                    if (action.action) {
+                        action.action();
+                    }
+                };
+                return (_jsx(ActionMenu.Item, { disabled: action.disabled, onClick: actionClick, children: _jsx(BodyText, { subdued: action.disabled, children: action.name }) }, action.name));
+            }) }));
+    }, [isOpen, setOpen, actions, domainValidationStatus]);
+    const nameToShow = name || BRAND_NAME_PLACEHOLDER;
+    return (_jsx(Card, { className: Styles.brandCard, status: domainValidationStatus === DomainValidationStatus.Error ? 'error' : 'default', children: _jsxs(Stack, { direction: "row", spacing: 2, className: Styles.cardContent, children: [_jsx(Stack.Item, { fill: true, children: _jsxs(Stack, { direction: "column", children: [logo && nameToShow !== 'Corporate Brand 2' ? (_jsx("img", { className: Styles.brandImg, src: logo, alt: name })) : (_jsx("div", { className: Styles.brandImgPlaceholder, children: _jsx(Icon, { name: "image", className: "c-neutral-90", size: 24 }) })), _jsxs(Stack, { direction: "column", className: "m-t-3", children: [_jsx(Headline, { el: "p", subdued: !name, className: "t-truncate-i m-0", title: nameToShow, children: nameToShow }), email && (_jsx(BodyText, { subdued: true, title: email, className: "t-truncate-i", children: email }))] })] }) }), _jsxs(Stack, { direction: "column", children: [actionsButtonSection, _jsx(CardTags, { isDefault: isDefault, isShared: isShared })] })] }) }));
+};
+const CardTags = ({ isDefault, isShared }) => {
+    if (!isDefault && !isShared) {
+        return null;
+    }
+    return (_jsxs(Stack, { direction: "column", alignItems: "flex-end", className: Styles.tags, children: [isShared && (_jsx(Tag, { className: Styles.corporateTag, color: "info", subtle: true, compact: true, children: "Corporate HQ" })), isDefault && (_jsx(Tag, { className: Styles.defaultTag, compact: true, children: "Default" }))] }));
+};
+const SingleActionButtonSection = ({ domainValidationStatus, action }) => {
+    const validationStatusIcon = useMemo(() => {
+        return _jsx(ValidationStatusIcon, { status: domainValidationStatus });
+    }, [domainValidationStatus]);
+    if (domainValidationStatus === DomainValidationStatus.Pending) {
+        return (_jsxs(Stack, { spacing: 1, alignItems: "center", children: [_jsx(BodyText, { size: "small", children: "Validation In Process" }), validationStatusIcon] }));
+    }
+    return (_jsxs(Stack, { spacing: 2, alignItems: "center", children: [validationStatusIcon, action.isConfigured && (_jsx(Icon, { name: "check_circle", color: tokens.colorGreen500, size: 24 })), action.inProgress ? (_jsx(InProgressButton, { action: action })) : (_jsx(StandardButton, { action: action }))] }));
+};
+const StandardButton = ({ action }) => (_jsx(Tooltip, { text: action.disabled ? action.tooltipMessage : '', children: action.href ? (_jsx(Link, { to: action.href, children: _jsx(Button, { size: "small", primary: true, outline: true, disabled: action.disabled, children: action.name }) })) : (_jsx(Button, { size: "small", primary: true, onClick: action.action, outline: true, disabled: action.disabled, children: action.name })) }));
+const InProgressButton = ({ action }) => (_jsx(Tooltip, { text: action.disabled ? action.tooltipMessage : '', children: action.href ? (_jsx(Link, { to: action.href, children: _jsxs(Button, { size: "small", primary: true, text: true, className: "m-0 p-1", children: [_jsx(BodyText, { size: "small", className: "m-r-half", children: "Registration In Progress" }), _jsx(Icon, { name: "hourglass_full", color: tokens.colorBlue, size: 16 })] }) })) : (_jsxs(Button, { size: "small", primary: true, text: true, className: "m-0 p-1", onClick: action.action, children: [_jsx(BodyText, { size: "small", className: "m-r-1", children: "Registration In Progress" }), _jsx(Icon, { name: "hourglass_full", color: tokens.colorBlue, size: 16 })] })) }));
+const ValidationStatusIcon = ({ status }) => {
+    switch (status) {
+        case DomainValidationStatus.Error:
+            return (_jsx(Tooltip, { direction: "t", text: "Error is detected in processing the Sender Domain validation. Please check and try again.", className: "cursor-pointer", children: _jsx(Icon, { name: "warning", color: tokens.colorRed500, size: 24 }) }));
+        case DomainValidationStatus.Validated:
+            return _jsx(Icon, { name: "check_circle", color: tokens.colorGreen500, size: 24 });
+        case DomainValidationStatus.Pending:
+            return _jsx(Icon, { name: "hourglass_full", color: tokens.colorBlue500, size: 24 });
+        default:
+            return null;
+    }
+};
+//# sourceMappingURL=brand-card.js.map

package/lib/components/brands/brand-card/brand-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-card.js","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/brand-card.tsx"],"names":[],"mappings":"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"}

package/lib/components/brands/cards-grid/cards-grid.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { BrandCardProps } from '../../../enums/brands';
+export declare const CardsGrid: FC<{
+    brands: BrandCardProps[];
+}>;
+//# sourceMappingURL=cards-grid.d.ts.map

package/lib/components/brands/cards-grid/cards-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cards-grid.d.ts","sourceRoot":"","sources":["../../../../src/components/brands/cards-grid/cards-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAIvD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC;IAAE,MAAM,EAAE,cAAc,EAAE,CAAA;CAAE,CAMtD,CAAC"}

package/lib/components/brands/cards-grid/cards-grid.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Grid } from '@servicetitan/anvil2';
+import { BrandCard } from '../brand-card/brand-card';
+import * as Styles from '../styles.module.less';
+export const CardsGrid = ({ brands }) => (_jsx(Grid, { className: Styles.grid, gap: "6", children: brands.map(brand => {
+        return _jsx(BrandCard, { ...brand }, brand.id);
+    }) }));
+//# sourceMappingURL=cards-grid.js.map

package/lib/components/brands/cards-grid/cards-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cards-grid.js","sourceRoot":"","sources":["../../../../src/components/brands/cards-grid/cards-grid.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD,OAAO,KAAK,MAAM,MAAM,uBAAuB,CAAC;AAEhD,MAAM,CAAC,MAAM,SAAS,GAAqC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACvE,KAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,GAAG,EAAC,GAAG,YAChC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QAChB,OAAO,KAAC,SAAS,OAAoB,KAAK,IAAnB,KAAK,CAAC,EAAE,CAAe,CAAC;IACnD,CAAC,CAAC,GACC,CACV,CAAC"}

package/lib/components/brands/index.d.ts

@@ -0,0 +1,2 @@
+export * from './cards-grid/cards-grid';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/brands/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/brands/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/lib/components/brands/index.js

@@ -0,0 +1,2 @@
+export * from './cards-grid/cards-grid';
+//# sourceMappingURL=index.js.map

package/lib/components/brands/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/brands/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

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

@@ -0,0 +1,73 @@
+@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;
+    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;
+}
+
+.corporate-tag {
+    min-width: 86px;
+    margin-bottom: @spacing-half;
+}

package/lib/enums/brands.d.ts

@@ -0,0 +1,21 @@
+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;
+}
+//# sourceMappingURL=brands.d.ts.map

package/lib/enums/brands.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brands.d.ts","sourceRoot":"","sources":["../../src/enums/brands.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,kEAAkE,CAAC;AAE1G,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,WAAW,GAAG,WAAW,EAAE,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD,QAAQ,EAAE,OAAO,CAAC;CACrB"}

package/lib/enums/brands.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=brands.js.map

package/lib/enums/brands.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brands.js","sourceRoot":"","sources":["../../src/enums/brands.ts"],"names":[],"mappings":""}

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components/settings';
 export * from './components/campaign-actions';
+export * from './enums/brands';
 export * from './utils/helpers';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAE9C,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}

package/lib/index.js

@@ -1,4 +1,5 @@
 export * from './components/settings';
 export * from './components/campaign-actions';
+export * from './enums/brands';
 export * from './utils/helpers';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAE9C,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -3,26 +3,30 @@
     "repository": {
         "url": "https://github.com/servicetitan/marketing"
     },
-    "version": "1.10.0",
+    "version": "1.11.0",
     "description": "",
     "main": "./lib/index.js",
     "typings": "./lib/index.d.ts",
     "peerDependencies": {
-        "@servicetitan/confirm": "~26.3.0",
-        "@servicetitan/design-system": "~13.6.0",
-        "@servicetitan/form": "~26.3.0",
-        "@servicetitan/form-state": "~26.3.0",
-        "@servicetitan/react-ioc": "~23.5.2",
+        "@servicetitan/anvil2": "^1.23.1",
+        "@servicetitan/confirm": "~28.5.1",
+        "@servicetitan/design-system": "~14.5.1",
+        "@servicetitan/form": "~28.5.1",
+        "@servicetitan/form-state": "~28.5.1",
+        "@servicetitan/marketing-services-api": "^3.29.0",
+        "@servicetitan/react-ioc": "~28.4.0",
         "@servicetitan/tokens": "~12.2.1",
-        "formstate": "~2.1.0",
-        "mobx": "6.10.2",
+        "formstate": "2.0.0",
+        "mobx": "6.13.5",
         "mobx-react": "9.0.2",
         "moment": "~2.29.1",
-        "react": "~18.3.1"
+        "react": "~18.3.1",
+        "react-router-dom": "~5.3.0"
     },
     "devDependencies": {
         "@testing-library/react": "^14.0.0",
-        "@types/history": "4.7.9"
+        "@types/history": "4.7.9",
+        "@types/react-router-dom": "~5.3.3"
     },
     "publishConfig": {
         "access": "restricted"
@@ -30,5 +34,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "a80589bd64eb965e97ae60aa28232ea60b5ed19c"
+    "gitHead": "cd109a383e221446aaa2fed378646ad14bd07a90"
 }

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

@@ -0,0 +1,245 @@
+import { FC, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+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 { BrandAction, BrandCardProps } from '../../../enums/brands';
+
+import * as Styles from '../styles.module.less';
+
+const BRAND_NAME_PLACEHOLDER = 'Assign Brand Name';
+
+export const BrandCard: FC<BrandCardProps> = ({
+    actions,
+    domainValidationStatus,
+    email,
+    isDefault,
+    isShared,
+    logo,
+    name,
+}) => {
+    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'}
+        >
+            <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>
+        </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/cards-grid/cards-grid.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+
+import { Grid } from '@servicetitan/anvil2';
+
+import { BrandCard } from '../brand-card/brand-card';
+import { BrandCardProps } from '../../../enums/brands';
+
+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} />;
+        })}
+    </Grid>
+);

package/src/components/brands/index.ts

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