@servicetitan/mpa-components 1.11.0 → 2.1.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.1.0](https://github.com/servicetitan/marketing/compare/@servicetitan/mpa-components@2.0.0...@servicetitan/mpa-components@2.1.0) (2025-04-17)
+
+**Note:** Version bump only for package @servicetitan/mpa-components
+
+
+
+
+
+# [2.0.0](https://github.com/servicetitan/marketing/compare/@servicetitan/mpa-components@1.11.0...@servicetitan/mpa-components@2.0.0) (2025-04-10)
+
+**Note:** Version bump only for package @servicetitan/mpa-components
+
+
+
+
+
 # [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

package/lib/components/brands/brand-card/actions-button-section.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import { BrandAction } from '../../../utils/interfaces';
+export declare const ActionsButtonSection: FC<{
+    actions: BrandAction | BrandAction[];
+}>;
+//# sourceMappingURL=actions-button-section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"actions-button-section.d.ts","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/actions-button-section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC;IAClC,OAAO,EAAE,WAAW,GAAG,WAAW,EAAE,CAAC;CACxC,CA+BA,CAAC"}

package/lib/components/brands/brand-card/actions-button-section.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useHistory } from 'react-router-dom';
+import { Menu } from '@servicetitan/anvil2';
+import { SingleActionButtonSection } from './single-action-button';
+export const ActionsButtonSection = ({ actions }) => {
+    const history = useHistory();
+    if (!Array.isArray(actions)) {
+        return _jsx(SingleActionButtonSection, { action: actions });
+    }
+    return (_jsx(Menu, { label: "Actions", className: "qa-brand-card-action-menu", size: "small", children: actions.map(action => {
+            const actionClick = () => {
+                if (action.action) {
+                    action.action();
+                }
+                if (action.href) {
+                    history.push(action.href);
+                }
+            };
+            return (_jsx(Menu.Item, { disabled: action.disabled, onClick: actionClick, className: "qa-brand-card-action-menu-item", label: action.name }, action.name));
+        }) }));
+};
+//# sourceMappingURL=actions-button-section.js.map

package/lib/components/brands/brand-card/actions-button-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions-button-section.js","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/actions-button-section.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAGnE,MAAM,CAAC,MAAM,oBAAoB,GAE5B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACjB,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;QAC1B,OAAO,KAAC,yBAAyB,IAAC,MAAM,EAAE,OAAO,GAAI,CAAC;IAC1D,CAAC;IAED,OAAO,CACH,KAAC,IAAI,IAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAC,2BAA2B,EAAC,IAAI,EAAC,OAAO,YACnE,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAClB,MAAM,WAAW,GAAG,GAAG,EAAE;gBACrB,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;oBAChB,MAAM,CAAC,MAAM,EAAE,CAAC;gBACpB,CAAC;gBACD,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC;oBACd,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;gBAC9B,CAAC;YACL,CAAC,CAAC;YAEF,OAAO,CACH,KAAC,IAAI,CAAC,IAAI,IACN,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAEzB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EAAE,MAAM,CAAC,IAAI,IAHb,MAAM,CAAC,IAAI,CAIlB,CACL,CAAC;QACN,CAAC,CAAC,GACC,CACV,CAAC;AACN,CAAC,CAAC"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"brand-card.d.ts","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/brand-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAQ3D,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA+CxC,CAAC"}

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

@@ -1,61 +1,14 @@
 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 classNames from 'classnames';
+import { Flex, Card, Avatar } from '@servicetitan/anvil2';
+import { ActionsButtonSection } from './actions-button-section';
+import { InfoSection } from './info-section';
 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]);
+export const BrandCard = ({ actions, email, isDefault, isShared, logo, name, hasError, }) => {
     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;
-    }
+    return (_jsx(Card, { className: classNames({
+            [Styles.cardWithError]: hasError,
+        }, Styles.brandCard, 'qa-brand-card'), padding: "large", children: _jsxs(Flex, { className: Styles.cardContent, justifyContent: "space-between", direction: "column", gap: "6", children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", className: "qa-brand-card-left-section", children: [_jsx(Avatar, { image: logo, name: nameToShow, size: "large" }), _jsx(ActionsButtonSection, { actions: actions })] }), _jsx(InfoSection, { name: name, nameToShow: nameToShow, email: email, isDefault: isDefault, isShared: isShared })] }) }));
 };
 //# sourceMappingURL=brand-card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"brand-card.js","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/brand-card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"brand-card.js","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/brand-card.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,KAAK,MAAM,MAAM,uBAAuB,CAAC;AAEhD,MAAM,sBAAsB,GAAG,mBAAmB,CAAC;AAEnD,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAC1C,OAAO,EACP,KAAK,EACL,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,UAAU,GAAG,IAAI,IAAI,sBAAsB,CAAC;IAElD,OAAO,CACH,KAAC,IAAI,IACD,SAAS,EAAE,UAAU,CACjB;YACI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,QAAQ;SACnC,EACD,MAAM,CAAC,SAAS,EAChB,eAAe,CAClB,EACD,OAAO,EAAC,OAAO,YAEf,MAAC,IAAI,IACD,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAC,GAAG,aAEP,MAAC,IAAI,IACD,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,YAAY,EACvB,SAAS,EAAC,4BAA4B,aAEtC,KAAC,MAAM,IAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,GAAG,EACtD,KAAC,oBAAoB,IAAC,OAAO,EAAE,OAAO,GAAI,IACvC,EAEP,KAAC,WAAW,IACR,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,GACpB,IACC,GACJ,CACV,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+interface InfoSectionProps {
+    nameToShow: string;
+    name?: string;
+    email?: string;
+    isDefault?: boolean;
+    isShared?: boolean;
+}
+export declare const InfoSection: FC<InfoSectionProps>;
+export {};
+//# sourceMappingURL=info-section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"info-section.d.ts","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/info-section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,UAAU,gBAAgB;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAmB5C,CAAC"}

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Chip, Flex, Text } from '@servicetitan/anvil2';
+export const InfoSection = ({ nameToShow, email, isDefault, isShared }) => (_jsx(Flex, { direction: "column", gap: "4", children: _jsxs(Flex, { direction: "column", gap: "1", children: [_jsxs(Flex, { gap: "2", alignItems: "center", children: [_jsx(Text, { className: "t-truncate-i m-0", title: nameToShow, variant: "headline", el: "h3", children: nameToShow }), _jsxs(Flex, { gap: "1", children: [isDefault && _jsx(Chip, { label: "Default" }), isShared && _jsx(Chip, { color: "#b5deff", label: "Corporate HQ" })] })] }), email && (_jsx(Text, { subdued: true, title: email, className: "t-truncate-i", children: email }))] }) }));
+//# sourceMappingURL=info-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"info-section.js","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/info-section.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAUxD,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC7F,KAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,YAC5B,MAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,aAC5B,MAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,aAC7B,KAAC,IAAI,IAAC,SAAS,EAAC,kBAAkB,EAAC,KAAK,EAAE,UAAU,EAAE,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,IAAI,YAC3E,UAAU,GACR,EACP,MAAC,IAAI,IAAC,GAAG,EAAC,GAAG,aACR,SAAS,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,SAAS,GAAG,EACrC,QAAQ,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,cAAc,GAAG,IACvD,IACJ,EACN,KAAK,IAAI,CACN,KAAC,IAAI,IAAC,OAAO,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,cAAc,YAC/C,KAAK,GACH,CACV,IACE,GACJ,CACV,CAAC"}

package/lib/components/brands/brand-card/single-action-button.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { BrandAction } from '../../../utils/interfaces';
+export declare const SingleActionButtonSection: FC<{
+    action: BrandAction;
+}>;
+//# sourceMappingURL=single-action-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"single-action-button.d.ts","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/single-action-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAC;AAO9C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAIxD,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC;IACvC,MAAM,EAAE,WAAW,CAAC;CACvB,CAmCA,CAAC"}

package/lib/components/brands/brand-card/single-action-button.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { BrandActionChipColor, BrandActionChipLabel } from '../../../utils/mappers';
+export const SingleActionButtonSection = ({ action }) => {
+    var _a;
+    const history = useHistory();
+    const handleClick = () => {
+        if (action.action) {
+            action.action();
+        }
+        if (action.href) {
+            history.push(action.href);
+        }
+    };
+    let buttonAppearance;
+    if (action.status === undefined) {
+        buttonAppearance = 'primary';
+    }
+    else if (!action.disabled) {
+        buttonAppearance = 'secondary';
+    }
+    return (_jsxs(Flex, { gap: "2", alignItems: "center", className: "qa-brand-card-single-action", children: [_jsx(ActionChip, { status: action.status, statusTooltip: action.statusTooltip }), _jsx(Button, { size: "small", onClick: handleClick, disabled: action.disabled, appearance: buttonAppearance, children: action.name }), action.disabled && (_jsx(DisabledActionHelper, { children: (_a = action.disableTooltipContent) === null || _a === void 0 ? void 0 : _a.call(action) }))] }));
+};
+const ActionChip = ({ status, statusTooltip, }) => {
+    if (status === undefined) {
+        return null;
+    }
+    const chip = (_jsx(Chip, { label: BrandActionChipLabel[status], color: BrandActionChipColor[status], size: "small" }));
+    return statusTooltip ? (_jsxs(TooltipA2, { children: [_jsx(TooltipA2.Trigger, { children: chip }), _jsx(TooltipA2.Content, { children: statusTooltip })] })) : (chip);
+};
+const DisabledActionHelper = ({ children }) => (_jsxs(TooltipA2, { children: [_jsx(TooltipA2.Trigger, { children: _jsx(Button, { icon: HelpIcon, size: "small" }) }), _jsx(TooltipA2.Content, { children: children })] }));
+//# sourceMappingURL=single-action-button.js.map

package/lib/components/brands/brand-card/single-action-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"single-action-button.js","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/single-action-button.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,QAAQ,MAAM,2DAA2D,CAAC;AACjF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAIhF,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGpF,MAAM,CAAC,MAAM,yBAAyB,GAEjC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;;IAChB,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,CAAC,MAAM,EAAE,CAAC;QACpB,CAAC;QAED,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC;IACL,CAAC,CAAC;IAEF,IAAI,gBAA8C,CAAC;IACnD,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QAC9B,gBAAgB,GAAG,SAAS,CAAC;IACjC,CAAC;SAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;QAC1B,gBAAgB,GAAG,WAAW,CAAC;IACnC,CAAC;IAED,OAAO,CACH,MAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAC,6BAA6B,aACrE,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,MAAM,CAAC,aAAa,GAAI,EAC1E,KAAC,MAAM,IACH,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,UAAU,EAAE,gBAAgB,YAE3B,MAAM,CAAC,IAAI,GACP,EACR,MAAM,CAAC,QAAQ,IAAI,CAChB,KAAC,oBAAoB,cAAE,MAAA,MAAM,CAAC,qBAAqB,sDAAI,GAAwB,CAClF,IACE,CACV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,UAAU,GAA0D,CAAC,EACvE,MAAM,EACN,aAAa,GAChB,EAAE,EAAE;IACD,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,IAAI,GAAG,CACT,KAAC,IAAI,IACD,KAAK,EAAE,oBAAoB,CAAC,MAAM,CAAC,EACnC,KAAK,EAAE,oBAAoB,CAAC,MAAM,CAAC,EACnC,IAAI,EAAC,OAAO,GACd,CACL,CAAC;IAEF,OAAO,aAAa,CAAC,CAAC,CAAC,CACnB,MAAC,SAAS,eACN,KAAC,SAAS,CAAC,OAAO,cAAE,IAAI,GAAqB,EAC7C,KAAC,SAAS,CAAC,OAAO,cAAE,aAAa,GAAqB,IAC9C,CACf,CAAC,CAAC,CAAC,CACA,IAAI,CACP,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAClE,MAAC,SAAS,eACN,KAAC,SAAS,CAAC,OAAO,cACd,KAAC,MAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAG,GACvB,EACpB,KAAC,SAAS,CAAC,OAAO,cAAE,QAAQ,GAAqB,IACzC,CACf,CAAC"}

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

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

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

@@ -1 +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"}
+{"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;AAM3B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC;IACvB,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;CACxB,CAMA,CAAC"}

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
 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);
-    }) }));
+export const CardsGrid = ({ brands, qaIdentifier }) => (_jsx(Grid, { className: classNames(Styles.grid, `qa-${qaIdentifier}-cards-grid`), gap: "6", children: brands.map(brand => (_jsx(BrandCard, { ...brand }, brand.id))) }));
 //# sourceMappingURL=cards-grid.js.map

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

@@ -1 +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"}
+{"version":3,"file":"cards-grid.js","sourceRoot":"","sources":["../../../../src/components/brands/cards-grid/cards-grid.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,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,GAGjB,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAC/B,KAAC,IAAI,IAAC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,YAAY,aAAa,CAAC,EAAE,GAAG,EAAC,GAAG,YAC7E,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACjB,KAAC,SAAS,OAAoB,KAAK,IAAnB,KAAK,CAAC,EAAE,CAAe,CAC1C,CAAC,GACC,CACV,CAAC"}

package/lib/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/lib/enums/brands.d.ts

@@ -1,21 +1,6 @@
-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 declare enum ActionStatus {
+    Error = 0,
+    Pending = 1,
+    Approved = 2
 }
 //# sourceMappingURL=brands.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"brands.d.ts","sourceRoot":"","sources":["../../src/enums/brands.ts"],"names":[],"mappings":"AAAA,oBAAY,YAAY;IACpB,KAAK,IAAA;IACL,OAAO,IAAA;IACP,QAAQ,IAAA;CACX"}

package/lib/enums/brands.js

@@ -1,2 +1,7 @@
-export {};
+export var ActionStatus;
+(function (ActionStatus) {
+    ActionStatus[ActionStatus["Error"] = 0] = "Error";
+    ActionStatus[ActionStatus["Pending"] = 1] = "Pending";
+    ActionStatus[ActionStatus["Approved"] = 2] = "Approved";
+})(ActionStatus || (ActionStatus = {}));
 //# sourceMappingURL=brands.js.map

package/lib/enums/brands.js.map

@@ -1 +1 @@
-{"version":3,"file":"brands.js","sourceRoot":"","sources":["../../src/enums/brands.ts"],"names":[],"mappings":""}
+{"version":3,"file":"brands.js","sourceRoot":"","sources":["../../src/enums/brands.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,YAIX;AAJD,WAAY,YAAY;IACpB,iDAAK,CAAA;IACL,qDAAO,CAAA;IACP,uDAAQ,CAAA;AACZ,CAAC,EAJW,YAAY,KAAZ,YAAY,QAIvB"}

package/lib/index.d.ts

@@ -1,5 +1,7 @@
 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';
 //# 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;AAC9C,cAAc,gBAAgB,CAAC;AAC/B,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,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC"}

package/lib/index.js

@@ -1,5 +1,7 @@
 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';
 //# 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;AAC9C,cAAc,gBAAgB,CAAC;AAC/B,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,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC"}

package/lib/utils/interfaces.d.ts

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

package/lib/utils/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../src/utils/interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/lib/utils/interfaces.js

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

package/lib/utils/interfaces.js.map

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

package/lib/utils/mappers.d.ts

@@ -0,0 +1,4 @@
+import { ActionStatus } from '../enums/brands';
+export declare const BrandActionChipLabel: Record<ActionStatus, string>;
+export declare const BrandActionChipColor: Record<ActionStatus, string>;
+//# sourceMappingURL=mappers.d.ts.map

package/lib/utils/mappers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mappers.d.ts","sourceRoot":"","sources":["../../src/utils/mappers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAI7D,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAI7D,CAAC"}

package/lib/utils/mappers.js

@@ -0,0 +1,13 @@
+import { ActionStatus } from '../enums/brands';
+import { tokens } from '@servicetitan/tokens/core';
+export const BrandActionChipLabel = {
+    [ActionStatus.Pending]: 'Pending',
+    [ActionStatus.Error]: 'Error',
+    [ActionStatus.Approved]: 'Complete',
+};
+export const BrandActionChipColor = {
+    [ActionStatus.Pending]: tokens.colorOrange200,
+    [ActionStatus.Error]: tokens.colorRed500,
+    [ActionStatus.Approved]: tokens.colorGreen200,
+};
+//# sourceMappingURL=mappers.js.map

package/lib/utils/mappers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mappers.js","sourceRoot":"","sources":["../../src/utils/mappers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,MAAM,CAAC,MAAM,oBAAoB,GAAiC;IAC9D,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,SAAS;IACjC,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO;IAC7B,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,UAAU;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAiC;IAC9D,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,cAAc;IAC7C,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,WAAW;IACxC,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,aAAa;CAChD,CAAC"}

package/package.json

@@ -3,7 +3,7 @@
     "repository": {
         "url": "https://github.com/servicetitan/marketing"
     },
-    "version": "1.11.0",
+    "version": "2.1.0",
     "description": "",
     "main": "./lib/index.js",
     "typings": "./lib/index.d.ts",
@@ -34,5 +34,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "cd109a383e221446aaa2fed378646ad14bd07a90"
+    "gitHead": "fc10244696665b2bc7e58fc2404e314da0013ad2"
 }

package/src/components/brands/brand-card/actions-button-section.tsx

@@ -0,0 +1,42 @@
+import type { FC } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { Menu } from '@servicetitan/anvil2';
+
+import { SingleActionButtonSection } from './single-action-button';
+import { BrandAction } from '../../../utils/interfaces';
+
+export const ActionsButtonSection: FC<{
+    actions: BrandAction | BrandAction[];
+}> = ({ actions }) => {
+    const history = useHistory();
+
+    if (!Array.isArray(actions)) {
+        return <SingleActionButtonSection action={actions} />;
+    }
+
+    return (
+        <Menu label="Actions" className="qa-brand-card-action-menu" size="small">
+            {actions.map(action => {
+                const actionClick = () => {
+                    if (action.action) {
+                        action.action();
+                    }
+                    if (action.href) {
+                        history.push(action.href);
+                    }
+                };
+
+                return (
+                    <Menu.Item
+                        disabled={action.disabled}
+                        key={action.name}
+                        onClick={actionClick}
+                        className="qa-brand-card-action-menu-item"
+                        label={action.name}
+                    />
+                );
+            })}
+        </Menu>
+    );
+};