@servicetitan/mpa-components 1.10.0 → 2.0.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.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
+
+
+
+
+
 # [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/actions-button-section.d.ts

@@ -0,0 +1,6 @@
+import { 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,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAMrC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC;IAClC,OAAO,EAAE,WAAW,GAAG,WAAW,EAAE,CAAC;CACxC,CAmDA,CAAC"}

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { ActionMenu, BodyText, Button, Icon } from '@servicetitan/design-system';
+import { SingleActionButtonSection } from './single-action-button';
+export const ActionsButtonSection = ({ actions }) => {
+    const [isOpen, setOpen] = useState(false);
+    const history = useHistory();
+    if (!Array.isArray(actions)) {
+        return _jsx(SingleActionButtonSection, { action: actions });
+    }
+    const trigger = (_jsxs(Button, { outline: true, size: "small", onClick: () => setOpen(true), className: "qa-brand-card-actions-trigger", children: ["Actions ", _jsx(Icon, { name: "keyboard_arrow_down", size: 16 })] }));
+    return (_jsx(ActionMenu, { trigger: trigger, open: isOpen, onClickOutside: () => setOpen(false), direction: "bl", className: "qa-brand-card-action-menu", children: actions.map(action => {
+            const actionClick = () => {
+                setOpen(false);
+                if (action.action) {
+                    action.action();
+                }
+                if (action.href) {
+                    history.push(action.href);
+                }
+            };
+            return (_jsx(ActionMenu.Item, { disabled: action.disabled, onClick: actionClick, className: "qa-brand-card-action-menu-item", children: _jsx(BodyText, { subdued: action.disabled, children: 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":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAEjF,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAGnE,MAAM,CAAC,MAAM,oBAAoB,GAE5B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACjB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,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,MAAM,OAAO,GAAG,CACZ,MAAC,MAAM,IACH,OAAO,QACP,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAC5B,SAAS,EAAC,+BAA+B,yBAEjC,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,IAAI,EAAE,EAAE,GAAI,IAChD,CACZ,CAAC;IAEF,OAAO,CACH,KAAC,UAAU,IACP,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,MAAM,EACZ,cAAc,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EACpC,SAAS,EAAC,IAAI,EACd,SAAS,EAAC,2BAA2B,YAEpC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAClB,MAAM,WAAW,GAAG,GAAG,EAAE;gBACrB,OAAO,CAAC,KAAK,CAAC,CAAC;gBACf,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,UAAU,CAAC,IAAI,IACZ,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAEzB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAC,gCAAgC,YAE1C,KAAC,QAAQ,IAAC,OAAO,EAAE,MAAM,CAAC,QAAQ,YAAG,MAAM,CAAC,IAAI,GAAY,IAJvD,MAAM,CAAC,IAAI,CAKF,CACrB,CAAC;QACN,CAAC,CAAC,GACO,CAChB,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+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

@@ -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,EAAE,MAAM,OAAO,CAAC;AAM3B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAS3D,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAuCxC,CAAC"}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Flex, Card } from '@servicetitan/anvil2';
+import { NameAndMailSection } from './name-and-mail-section';
+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 = ({ actions, email, isDefault, isShared, logo, name, hasError, }) => {
+    const nameToShow = name || BRAND_NAME_PLACEHOLDER;
+    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", children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", className: "qa-brand-card-left-section", children: [_jsx(BrandLogo, { logo: logo, alt: nameToShow }), _jsx(ActionsButtonSection, { actions: actions })] }), _jsxs(Flex, { justifyContent: "space-between", children: [_jsx(NameAndMailSection, { name: name, nameToShow: nameToShow, email: email }), _jsx(CardTags, { isDefault: isDefault, isShared: isShared })] })] }) }));
+};
+//# 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":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,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,IAAC,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,EAAC,eAAe,EAAC,SAAS,EAAC,QAAQ,aAClF,MAAC,IAAI,IACD,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,YAAY,EACvB,SAAS,EAAC,4BAA4B,aAEtC,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,GAAI,EAC1C,KAAC,oBAAoB,IAAC,OAAO,EAAE,OAAO,GAAI,IACvC,EAEP,MAAC,IAAI,IAAC,cAAc,EAAC,eAAe,aAChC,KAAC,kBAAkB,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,EACxE,KAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAI,IACnD,IACJ,GACJ,CACV,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export declare const BrandLogo: FC<{
+    logo?: string;
+    alt?: string;
+}>;
+//# sourceMappingURL=brand-logo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"brand-logo.d.ts","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/brand-logo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAS3B,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CAWrD,CAAC"}

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 = ({ logo, alt }) => logo ? (_jsx("img", { className: classNames(Styles.brandImg, 'qa-brand-logo'), src: logo, alt: alt })) : (_jsx(Flex, { className: classNames(Styles.brandImgPlaceholder, 'qa-brand-logo-placeholder'), alignItems: "center", justifyContent: "center", children: _jsx(Icon, { svg: ImageIcon, size: "large", color: tokens.colorNeutral90 }) }));
+//# sourceMappingURL=brand-logo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"brand-logo.js","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/brand-logo.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,SAAS,MAAM,4DAA4D,CAAC;AACnF,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAEzD,OAAO,KAAK,MAAM,MAAM,uBAAuB,CAAC;AAEhD,MAAM,CAAC,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,CAC5E,IAAI,CAAC,CAAC,CAAC,CACH,cAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,QAAQ,EAAE,eAAe,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,GAAI,CACxF,CAAC,CAAC,CAAC,CACA,KAAC,IAAI,IACD,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,mBAAmB,EAAE,2BAA2B,CAAC,EAC9E,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,YAEvB,KAAC,IAAI,IAAC,GAAG,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,CAAC,cAAc,GAAI,GAChE,CACV,CAAC"}

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

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export declare const CardTags: FC<{
+    isDefault?: boolean;
+    isShared?: boolean;
+}>;
+//# sourceMappingURL=cart-tags.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cart-tags.d.ts","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/cart-tags.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAcpE,CAAC"}

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Chip, Flex } from '@servicetitan/anvil2';
+import { tokens } from '@servicetitan/tokens/core/index';
+export const CardTags = ({ isDefault, isShared, }) => {
+    if (!isDefault && !isShared) {
+        return null;
+    }
+    return (_jsxs(Flex, { direction: "column", alignItems: "flex-end", className: "qa-brand-card-tags", gap: "1", children: [isShared && _jsx(Chip, { color: tokens.colorPurple100, label: "Corporate HQ", size: "small" }), isDefault && _jsx(Chip, { label: "Default", color: tokens.colorNeutral50, size: "small" })] }));
+};
+//# sourceMappingURL=cart-tags.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cart-tags.js","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/cart-tags.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAEzD,MAAM,CAAC,MAAM,QAAQ,GAAoD,CAAC,EACtE,SAAS,EACT,QAAQ,GACX,EAAE,EAAE;IACD,IAAI,CAAC,SAAS,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,MAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,UAAU,EAAC,UAAU,EAAC,SAAS,EAAC,oBAAoB,EAAC,GAAG,EAAC,GAAG,aAChF,QAAQ,IAAI,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,cAAc,EAAE,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,OAAO,GAAG,EACpF,SAAS,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,MAAM,CAAC,cAAc,EAAE,IAAI,EAAC,OAAO,GAAG,IAC9E,CACV,CAAC;AACN,CAAC,CAAC"}

package/lib/components/brands/brand-card/name-and-mail-section.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export declare const NameAndMailSection: FC<{
+    name?: string;
+    nameToShow: string;
+    email?: string;
+}>;
+//# sourceMappingURL=name-and-mail-section.d.ts.map

package/lib/components/brands/brand-card/name-and-mail-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"name-and-mail-section.d.ts","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/name-and-mail-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQ3B,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAmBxF,CAAC"}

package/lib/components/brands/brand-card/name-and-mail-section.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 = ({ name, email, nameToShow, }) => (_jsxs(Flex, { justifyContent: "space-between", direction: "column", className: classNames(Styles.cardLeftSectionTexts, 'qa-brand-card-name-and-mail'), 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 }))] }));
+//# sourceMappingURL=name-and-mail-section.js.map

package/lib/components/brands/brand-card/name-and-mail-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"name-and-mail-section.js","sourceRoot":"","sources":["../../../../src/components/brands/brand-card/name-and-mail-section.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,OAAO,KAAK,MAAM,MAAM,uBAAuB,CAAC;AAEhD,MAAM,CAAC,MAAM,kBAAkB,GAA8D,CAAC,EAC1F,IAAI,EACJ,KAAK,EACL,UAAU,GACb,EAAE,EAAE,CAAC,CACF,MAAC,IAAI,IACD,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,oBAAoB,EAAE,6BAA6B,CAAC,aAEjF,KAAC,QAAQ,IAAC,EAAE,EAAC,GAAG,EAAC,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,EAAC,kBAAkB,EAAC,KAAK,EAAE,UAAU,YAC1E,UAAU,GACJ,EACV,KAAK,IAAI,CACN,KAAC,QAAQ,IAAC,OAAO,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,cAAc,YACnD,KAAK,GACC,CACd,IACE,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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+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

@@ -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;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

@@ -0,0 +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, 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

@@ -0,0 +1 @@
+{"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/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,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/lib/enums/brands.d.ts

@@ -0,0 +1,6 @@
+export declare enum ActionStatus {
+    Error = 0,
+    Pending = 1,
+    Approved = 2
+}
+//# 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,oBAAY,YAAY;IACpB,KAAK,IAAA;IACL,OAAO,IAAA;IACP,QAAQ,IAAA;CACX"}

package/lib/enums/brands.js

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1 @@
+{"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,4 +1,7 @@
 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';
 //# 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,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC"}

package/lib/index.js

@@ -1,4 +1,7 @@
 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';
 //# 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,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,26 +3,30 @@
     "repository": {
         "url": "https://github.com/servicetitan/marketing"
     },
-    "version": "1.10.0",
+    "version": "2.0.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": "45fb622e2875d33d9db1a15935ec8cb327bb5326"
 }

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

@@ -0,0 +1,62 @@
+import { FC, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { ActionMenu, BodyText, Button, Icon } from '@servicetitan/design-system';
+
+import { SingleActionButtonSection } from './single-action-button';
+import { BrandAction } from '../../../utils/interfaces';
+
+export const ActionsButtonSection: FC<{
+    actions: BrandAction | BrandAction[];
+}> = ({ actions }) => {
+    const [isOpen, setOpen] = useState(false);
+    const history = useHistory();
+
+    if (!Array.isArray(actions)) {
+        return <SingleActionButtonSection action={actions} />;
+    }
+
+    const trigger = (
+        <Button
+            outline
+            size="small"
+            onClick={() => setOpen(true)}
+            className="qa-brand-card-actions-trigger"
+        >
+            Actions <Icon name="keyboard_arrow_down" size={16} />
+        </Button>
+    );
+
+    return (
+        <ActionMenu
+            trigger={trigger}
+            open={isOpen}
+            onClickOutside={() => setOpen(false)}
+            direction="bl"
+            className="qa-brand-card-action-menu"
+        >
+            {actions.map(action => {
+                const actionClick = () => {
+                    setOpen(false);
+                    if (action.action) {
+                        action.action();
+                    }
+                    if (action.href) {
+                        history.push(action.href);
+                    }
+                };
+
+                return (
+                    <ActionMenu.Item
+                        disabled={action.disabled}
+                        key={action.name}
+                        onClick={actionClick}
+                        className="qa-brand-card-action-menu-item"
+                    >
+                        <BodyText subdued={action.disabled}>{action.name}</BodyText>
+                    </ActionMenu.Item>
+                );
+            })}
+        </ActionMenu>
+    );
+};