@servicetitan/mpa-components 1.9.0 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/lib/components/brands/brand-card/brand-card.d.ts +4 -0
- package/lib/components/brands/brand-card/brand-card.d.ts.map +1 -0
- package/lib/components/brands/brand-card/brand-card.js +61 -0
- package/lib/components/brands/brand-card/brand-card.js.map +1 -0
- package/lib/components/brands/cards-grid/cards-grid.d.ts +6 -0
- package/lib/components/brands/cards-grid/cards-grid.d.ts.map +1 -0
- package/lib/components/brands/cards-grid/cards-grid.js +8 -0
- package/lib/components/brands/cards-grid/cards-grid.js.map +1 -0
- package/lib/components/brands/index.d.ts +2 -0
- package/lib/components/brands/index.d.ts.map +1 -0
- package/lib/components/brands/index.js +2 -0
- package/lib/components/brands/index.js.map +1 -0
- package/lib/components/brands/styles.module.less +73 -0
- package/lib/components/campaign-actions/action-button/action-button-archive.js +1 -1
- package/lib/components/campaign-actions/action-button/action-button-archive.js.map +1 -1
- package/lib/components/campaign-actions/action-button/action-button-clone.js +1 -1
- package/lib/components/campaign-actions/action-button/action-button-clone.js.map +1 -1
- package/lib/components/campaign-actions/action-button/action-button-edit.js +1 -1
- package/lib/components/campaign-actions/action-button/action-button-edit.js.map +1 -1
- package/lib/components/campaign-actions/action-button/action-button-unarchive.js +1 -1
- package/lib/components/campaign-actions/action-button/action-button-unarchive.js.map +1 -1
- package/lib/components/campaign-actions/action-button/action-button.js +2 -2
- package/lib/components/campaign-actions/action-button/action-button.js.map +1 -1
- package/lib/components/campaign-actions/actions-button/actions-button.js +2 -2
- package/lib/components/campaign-actions/actions-button/actions-button.js.map +1 -1
- package/lib/components/campaign-actions/actions-button/campaign-actions.js +2 -2
- package/lib/components/campaign-actions/actions-button/campaign-actions.js.map +1 -1
- package/lib/components/settings/company-details/index.js +2 -2
- package/lib/components/settings/company-details/index.js.map +1 -1
- package/lib/components/settings/company-email-footer/company-email-footer.stories.d.ts +0 -1
- package/lib/components/settings/company-email-footer/company-email-footer.stories.d.ts.map +1 -1
- package/lib/components/settings/company-email-footer/index.js +2 -2
- package/lib/components/settings/company-email-footer/index.js.map +1 -1
- package/lib/components/settings/company-email-reply-to/company-email-reply-to.stories.d.ts +0 -1
- package/lib/components/settings/company-email-reply-to/company-email-reply-to.stories.d.ts.map +1 -1
- package/lib/components/settings/company-email-reply-to/index.js +1 -1
- package/lib/components/settings/company-email-reply-to/index.js.map +1 -1
- package/lib/components/settings/company-email-sender/company-email-sender.stories.d.ts +0 -1
- package/lib/components/settings/company-email-sender/company-email-sender.stories.d.ts.map +1 -1
- package/lib/components/settings/company-email-sender/custom-domain-sender.js +3 -3
- package/lib/components/settings/company-email-sender/custom-domain-sender.js.map +1 -1
- package/lib/components/settings/company-email-sender/simple-sender.js +1 -1
- package/lib/components/settings/company-email-sender/simple-sender.js.map +1 -1
- package/lib/components/settings/company-trade-checkbox/index.d.ts +0 -1
- package/lib/components/settings/company-trade-checkbox/index.d.ts.map +1 -1
- package/lib/components/settings/company-trade-checkbox/index.js +1 -1
- package/lib/components/settings/company-trade-checkbox/index.js.map +1 -1
- package/lib/components/settings/company-trades-picker/company-trades-picker.stories.js +4 -1
- package/lib/components/settings/company-trades-picker/company-trades-picker.stories.js.map +1 -1
- package/lib/components/settings/company-trades-picker/index.js +5 -5
- package/lib/components/settings/company-trades-picker/index.js.map +1 -1
- package/lib/components/settings/double-opt-in/double-opt-in.stories.d.ts +0 -1
- package/lib/components/settings/double-opt-in/double-opt-in.stories.d.ts.map +1 -1
- package/lib/components/settings/double-opt-in/index.js +1 -1
- package/lib/components/settings/double-opt-in/index.js.map +1 -1
- package/lib/components/settings/email-preview/email-preview.js +1 -1
- package/lib/components/settings/email-preview/email-preview.js.map +1 -1
- package/lib/components/settings/email-preview/opt-in-email-preview.js.map +1 -1
- package/lib/components/settings/email-preview/opt-out-email-preview.js.map +1 -1
- package/lib/components/settings/email-validation/email-validation.stories.js +26 -37
- package/lib/components/settings/email-validation/email-validation.stories.js.map +1 -1
- package/lib/components/settings/email-validation/index.d.ts.map +1 -1
- package/lib/components/settings/email-validation/index.js +2 -2
- package/lib/components/settings/email-validation/index.js.map +1 -1
- package/lib/components/settings/form-errors-list/index.js +2 -2
- package/lib/components/settings/form-errors-list/index.js.map +1 -1
- package/lib/components/settings/logo-picker/index.js +5 -14
- package/lib/components/settings/logo-picker/index.js.map +1 -1
- package/lib/components/settings/opt-out-message/index.js +1 -1
- package/lib/components/settings/opt-out-message/index.js.map +1 -1
- package/lib/components/settings/opt-out-message/opt-out-message.stories.d.ts +0 -1
- package/lib/components/settings/opt-out-message/opt-out-message.stories.d.ts.map +1 -1
- package/lib/components/settings/result-definitions-modal/header.js +1 -1
- package/lib/components/settings/result-definitions-modal/header.js.map +1 -1
- package/lib/components/settings/result-definitions-modal/index.js +1 -1
- package/lib/components/settings/result-definitions-modal/index.js.map +1 -1
- package/lib/components/settings/result-definitions-modal/row.js +1 -1
- package/lib/components/settings/result-definitions-modal/row.js.map +1 -1
- package/lib/components/settings/settings-section/index.js +1 -1
- package/lib/components/settings/settings-section/index.js.map +1 -1
- package/lib/components/settings/settings-section/settings-section.stories.d.ts +0 -1
- package/lib/components/settings/settings-section/settings-section.stories.d.ts.map +1 -1
- package/lib/components/settings/settings-section/settings-section.stories.js +1 -1
- package/lib/components/settings/settings-section/settings-section.stories.js.map +1 -1
- package/lib/enums/brands.d.ts +21 -0
- package/lib/enums/brands.d.ts.map +1 -0
- package/lib/enums/brands.js +2 -0
- package/lib/enums/brands.js.map +1 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/lib/utils/helpers.js +1 -1
- package/lib/utils/helpers.js.map +1 -1
- package/package.json +15 -11
- package/src/components/brands/brand-card/brand-card.tsx +245 -0
- package/src/components/brands/cards-grid/cards-grid.tsx +16 -0
- package/src/components/brands/index.ts +1 -0
- package/src/components/brands/styles.module.less +73 -0
- package/src/components/brands/styles.module.less.d.ts +11 -0
- package/src/components/settings/company-details/index.tsx +1 -1
- package/src/components/settings/company-email-footer/index.tsx +1 -1
- package/src/components/settings/company-email-reply-to/index.tsx +1 -1
- package/src/components/settings/company-email-sender/custom-domain-sender.tsx +4 -4
- package/src/components/settings/company-email-sender/simple-sender.tsx +2 -2
- package/src/components/settings/company-trades-picker/company-trades-picker.stories.tsx +2 -2
- package/src/components/settings/company-trades-picker/index.tsx +1 -1
- package/src/components/settings/double-opt-in/index.tsx +3 -3
- package/src/components/settings/email-preview/email-preview.tsx +1 -1
- package/src/components/settings/email-preview/opt-in-email-preview.tsx +1 -1
- package/src/components/settings/email-validation/index.tsx +5 -5
- package/src/components/settings/form-errors-list/index.tsx +2 -2
- package/src/components/settings/logo-picker/index.tsx +2 -2
- package/src/components/settings/opt-out-message/index.tsx +2 -2
- package/src/components/settings/settings-section/index.tsx +1 -1
- package/src/enums/brands.ts +23 -0
- package/src/index.ts +1 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -4,5 +4,5 @@ import { Modal, Text } from '@servicetitan/design-system';
|
|
|
4
4
|
import { Header } from './header';
|
|
5
5
|
import { Row, RiskType } from './row';
|
|
6
6
|
import * as Styles from './result-definitions-modal.module.less';
|
|
7
|
-
export const ResultDefinitionsModal = ({ onClose }) => (_jsxs(Modal,
|
|
7
|
+
export const ResultDefinitionsModal = ({ onClose }) => (_jsxs(Modal, { open: true, closable: true, title: "Email Validation Result Definitions", onClose: onClose, className: classnames(Styles.modal, 'qa-result-definitions-modal'), children: [_jsx(Header, {}), _jsx("div", { className: Styles.wall }), _jsx(Row, { result: "Undeliverable", risk: RiskType.VeryHigh, recommendation: "Suppress" }), _jsx("hr", { className: Styles.divider }), _jsxs(Text, { size: 2, className: "m-y-2", children: ["Address was determined invalid after performing multiple checks including MX, SMTP, etc., likely due to:", _jsxs("ul", { className: "m-y-0", children: [_jsx("li", { children: "The receiving recipient domain is not configured to accept email" }), _jsx("li", { children: "The SMTP commands issued resulted in a hard bounce, i.e., \"user does not exist\" or \"mailbox full\" errors" }), _jsx("li", { children: "The recipient address historically hard-bounced or appeared on suppression lists" }), _jsx("li", { children: "Mailbox providers require specific standard for an email address including min/max number of characters, max number of periods, etc." })] })] }), _jsx("hr", { className: Styles.divider }), _jsx(Row, { result: "Risky", risk: RiskType.Medium, recommendation: "Proceed With Caution" }), _jsx("hr", { className: Styles.divider }), _jsxs(Text, { size: 2, className: "m-y-2", children: ["Address was determined risky based on historical analysis or problematic results, likely due to:", _jsx("ul", { className: "m-y-0", children: _jsx("li", { children: "The receiving address may be valid, but was found on one or more suppression lists Addresses matching a known spam trap are not ideal for sending campaigns to and can impact reputation" }) })] }), _jsx("hr", { className: Styles.divider }), _jsx(Row, { result: "Typo", risk: RiskType.High, recommendation: "Suppress" }), _jsx("hr", { className: Styles.divider }), _jsxs(Text, { size: 2, className: "m-y-2", children: ["Address was possibly typed incorrectly during sign-up, or matches known typo domains, likely due to:", _jsx("ul", { className: "m-y-0", children: _jsx("li", { children: "Typos are mistyped address domains like \"gmil.com\" instead of \"gmail.com,\" and are often undeliverable. Address is checked against database of common domain misspellings. These kinds of addresses are usually not good for sending." }) })] }), _jsx("hr", { className: Styles.divider }), _jsx(Row, { result: "Accept-All", risk: RiskType.Medium, recommendation: "Proceed With Caution" }), _jsx("hr", { className: Styles.divider }), _jsxs(Text, { size: 2, className: "m-y-2", children: ["The receiving domain of the address accepts all mail, indicating it may be a spam trap, likely due to:", _jsx("ul", { className: "m-y-0", children: _jsx("li", { children: "Some domains do not distinguish between existing and non-existing addresses and accept all mail" }) })] }), _jsx("hr", { className: Styles.divider }), _jsx(Row, { result: "Dispose", risk: RiskType.Medium, recommendation: "Proceed With Caution" }), _jsx("hr", { className: Styles.divider }), _jsxs(Text, { size: 2, className: "m-y-2", children: ["The receiving domain of the address accepts all mail, indicating it may be a spam trap, likely due to:", _jsx("ul", { className: "m-y-0", children: _jsx("li", { children: "Some domains do not distinguish between existing and non-existing addresses and accept all mail" }) })] }), _jsx("hr", { className: Styles.divider }), _jsx(Row, { result: "Role", risk: RiskType.Medium, recommendation: "Proceed With Caution" }), _jsx("hr", { className: Styles.divider }), _jsxs(Text, { size: 2, className: "m-y-2", children: ["Address likely is not a particular person, but rather a group or department, likely due to:", _jsx("ul", { className: "m-y-0", children: _jsx("li", { children: "Role addresses belong to the end user and are deliverable, but include multiple end recipients as part of a larger distribution list. These kinds of addreses are usually not good for sending campaigns" }) })] }), _jsx("hr", { className: Styles.divider }), _jsx(Row, { result: "Unknown", risk: RiskType.Medium, recommendation: "Proceed With Caution" }), _jsx("hr", { className: Styles.divider }), _jsxs(Text, { size: 2, className: "m-y-2", children: ["A connection problem or unresponsive SMTP server prevented validation, likely due to:", _jsxs("ul", { className: "m-y-0", children: [_jsx("li", { children: "Unable to connect and resolve to service during SMTP connection" }), _jsx("li", { children: "Unable to successfully get a response from SMTP server" }), _jsx("li", { children: "Address was outside known result definitions and criteria and was unable to be classified" })] })] })] }));
|
|
8
8
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/settings/result-definitions-modal/index.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,KAAK,MAAM,MAAM,wCAAwC,CAAC;AAMjE,MAAM,CAAC,MAAM,sBAAsB,GAAoC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CACpF,MAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/settings/result-definitions-modal/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,5 +17,5 @@ const riskTypeToText = new Map([
|
|
|
17
17
|
[RiskType.High, 'High'],
|
|
18
18
|
[RiskType.VeryHigh, 'Very High'],
|
|
19
19
|
]);
|
|
20
|
-
export const Row = ({ result, risk, recommendation }) => (_jsxs(Grid,
|
|
20
|
+
export const Row = ({ result, risk, recommendation }) => (_jsxs(Grid, { columns: 3, className: "m-y-1", children: [_jsx(Grid.Column, { children: _jsx(Text, { size: 2, bold: true, children: result }) }), _jsx(Grid.Column, { children: _jsx(Tag, { color: riskTypeToColor.get(risk), compact: true, children: riskTypeToText.get(risk) }) }), _jsx(Grid.Column, { children: _jsx(Text, { size: 2, bold: true, children: recommendation }) })] }));
|
|
21
21
|
//# sourceMappingURL=row.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../../src/components/settings/result-definitions-modal/row.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAN,IAAY,QAIX;AAJD,WAAY,QAAQ;IAChB,2CAAM,CAAA;IACN,uCAAI,CAAA;IACJ,+CAAQ,CAAA;AACZ,CAAC,EAJW,QAAQ,KAAR,QAAQ,QAInB;AAED,MAAM,eAAe,GAAG,IAAI,GAAG,CAAmB;IAC9C,CAAC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC5B,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC;IAClD,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC;CACzD,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,IAAI,GAAG,CAAmB;IAC7C,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC;IAC3B,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACvB,CAAC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC;CACnC,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACnE,MAAC,IAAI,
|
|
1
|
+
{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../../src/components/settings/result-definitions-modal/row.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAN,IAAY,QAIX;AAJD,WAAY,QAAQ;IAChB,2CAAM,CAAA;IACN,uCAAI,CAAA;IACJ,+CAAQ,CAAA;AACZ,CAAC,EAJW,QAAQ,KAAR,QAAQ,QAInB;AAED,MAAM,eAAe,GAAG,IAAI,GAAG,CAAmB;IAC9C,CAAC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC5B,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC;IAClD,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC;CACzD,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,IAAI,GAAG,CAAmB;IAC7C,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC;IAC3B,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACvB,CAAC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC;CACnC,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACnE,MAAC,IAAI,IAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAC,OAAO,aAC/B,KAAC,IAAI,CAAC,MAAM,cACR,KAAC,IAAI,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,kBACd,MAAM,GACJ,GACG,EACd,KAAC,IAAI,CAAC,MAAM,cACR,KAAC,GAAG,IAAC,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,OAAO,kBACzC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,GACvB,GACI,EACd,KAAC,IAAI,CAAC,MAAM,cACR,KAAC,IAAI,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,kBACd,cAAc,GACZ,GACG,IACX,CACV,CAAC"}
|
|
@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { observer } from 'mobx-react';
|
|
4
4
|
import { Text, Card, Layout } from '@servicetitan/design-system';
|
|
5
|
-
export const SettingsSection = observer(({ title, text, children, qaPrefix, className = '', layout = 'support' }) => (_jsxs(Layout,
|
|
5
|
+
export const SettingsSection = observer(({ title, text, children, qaPrefix, className = '', layout = 'support' }) => (_jsxs(Layout, { type: layout, direction: "left", className: classNames(qaPrefix, className), children: [_jsxs(Layout.Section, { children: [typeof title === 'string' ? (_jsx(Text, { size: 3, bold: true, className: `${qaPrefix}-title`, children: title })) : (title), typeof text === 'string' ? (_jsx(Text, { size: 2, subdued: true, className: `${qaPrefix}-text`, children: text })) : (text)] }), _jsx(Layout.Section, { children: _jsx(Card, { raised: true, children: _jsx(Card.Section, { className: `${qaPrefix}-content`, children: children }) }) })] })));
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/settings/settings-section/index.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAe,MAAM,6BAA6B,CAAC;AAW9E,MAAM,CAAC,MAAM,eAAe,GAAqB,QAAQ,CACrD,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,EAAgB,EAAE,EAAE,CAAC,CACvF,MAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/settings/settings-section/index.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAe,MAAM,6BAA6B,CAAC;AAW9E,MAAM,CAAC,MAAM,eAAe,GAAqB,QAAQ,CACrD,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,EAAgB,EAAE,EAAE,CAAC,CACvF,MAAC,MAAM,IAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,aAC7E,MAAC,MAAM,CAAC,OAAO,eACV,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CACzB,KAAC,IAAI,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,QAAC,SAAS,EAAE,GAAG,QAAQ,QAAQ,YAC7C,KAAK,GACH,CACV,CAAC,CAAC,CAAC,CACA,KAAK,CACR,EACA,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACxB,KAAC,IAAI,IAAC,IAAI,EAAE,CAAC,EAAE,OAAO,QAAC,SAAS,EAAE,GAAG,QAAQ,OAAO,YAC/C,IAAI,GACF,CACV,CAAC,CAAC,CAAC,CACA,IAAI,CACP,IACY,EACjB,KAAC,MAAM,CAAC,OAAO,cACX,KAAC,IAAI,IAAC,MAAM,kBACR,KAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAE,GAAG,QAAQ,UAAU,YAAG,QAAQ,GAAgB,GACtE,GACM,IACZ,CACZ,CACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/settings-section/settings-section.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/settings-section/settings-section.stories.tsx"],"names":[],"mappings":";;;;;AAGA,wBAIE;AAEF,eAAO,MAAM,eAAe,+CAM3B,CAAC"}
|
|
@@ -7,6 +7,6 @@ export default {
|
|
|
7
7
|
parameters: {},
|
|
8
8
|
};
|
|
9
9
|
export const SettingsSection = () => {
|
|
10
|
-
return (_jsx(Component,
|
|
10
|
+
return (_jsx(Component, { title: "Hey! The test", children: _jsx(Headline, { children: "The body" }) }));
|
|
11
11
|
};
|
|
12
12
|
//# sourceMappingURL=settings-section.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"settings-section.stories.js","sourceRoot":"","sources":["../../../../src/components/settings/settings-section/settings-section.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,eAAe,IAAI,SAAS,EAAE,MAAM,GAAG,CAAC;AAEjD,eAAe;IACX,KAAK,EAAE,yCAAyC;IAChD,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAChC,OAAO,CACH,KAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"settings-section.stories.js","sourceRoot":"","sources":["../../../../src/components/settings/settings-section/settings-section.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,eAAe,IAAI,SAAS,EAAE,MAAM,GAAG,CAAC;AAEjD,eAAe;IACX,KAAK,EAAE,yCAAyC;IAChD,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAChC,OAAO,CACH,KAAC,SAAS,IAAC,KAAK,EAAC,eAAe,YAC5B,KAAC,QAAQ,2BAAoB,GACrB,CACf,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { DomainValidationStatus } from '@servicetitan/marketing-services-api/dist/settings/brand.mrk.api';
|
|
2
|
+
export interface BrandAction {
|
|
3
|
+
name: string;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
tooltipMessage?: string;
|
|
6
|
+
inProgress?: boolean;
|
|
7
|
+
isConfigured?: boolean;
|
|
8
|
+
href?: string;
|
|
9
|
+
action?: () => void;
|
|
10
|
+
}
|
|
11
|
+
export interface BrandCardProps {
|
|
12
|
+
id: string;
|
|
13
|
+
actions: BrandAction | BrandAction[];
|
|
14
|
+
logo?: string;
|
|
15
|
+
name?: string;
|
|
16
|
+
isDefault: boolean;
|
|
17
|
+
email?: string;
|
|
18
|
+
domainValidationStatus?: DomainValidationStatus;
|
|
19
|
+
isShared: boolean;
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=brands.d.ts.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"brands.js","sourceRoot":"","sources":["../../src/enums/brands.ts"],"names":[],"mappings":""}
|
package/lib/index.d.ts
CHANGED
package/lib/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;
|
|
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"}
|
package/lib/index.js
CHANGED
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;
|
|
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"}
|
package/lib/utils/helpers.js
CHANGED
|
@@ -6,7 +6,7 @@ export const formatBytes = (bytes, decimals = 2, isBinary = true) => {
|
|
|
6
6
|
const dm = Math.max(0, decimals);
|
|
7
7
|
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
|
8
8
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
9
|
-
return `${parseFloat((bytes /
|
|
9
|
+
return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
|
|
10
10
|
};
|
|
11
11
|
export const getImageSize = (url) => {
|
|
12
12
|
return new Promise((resolve, reject) => {
|
package/lib/utils/helpers.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/utils/helpers.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAyB,EAAE,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,EAAE;IACpF,IAAI,CAAC,KAAK,EAAE;
|
|
1
|
+
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/utils/helpers.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAyB,EAAE,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,EAAE;IACpF,IAAI,CAAC,KAAK,EAAE,CAAC;QACT,OAAO,SAAS,CAAC;IACrB,CAAC;IAED,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACjC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;IACjC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAEhD,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAEpD,OAAO,GAAG,UAAU,CAAC,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;AACrE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;IACxC,OAAO,IAAI,OAAO,CAAoC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACtE,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE5C,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE;YAChB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;QAC1D,CAAC,CAAC;QAEF,KAAK,CAAC,OAAO,GAAG,GAAG,EAAE;YACjB,MAAM,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC,CAAC;QAEF,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;IACpB,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -3,26 +3,30 @@
|
|
|
3
3
|
"repository": {
|
|
4
4
|
"url": "https://github.com/servicetitan/marketing"
|
|
5
5
|
},
|
|
6
|
-
"version": "1.
|
|
6
|
+
"version": "1.11.0",
|
|
7
7
|
"description": "",
|
|
8
8
|
"main": "./lib/index.js",
|
|
9
9
|
"typings": "./lib/index.d.ts",
|
|
10
10
|
"peerDependencies": {
|
|
11
|
-
"@servicetitan/
|
|
12
|
-
"@servicetitan/
|
|
13
|
-
"@servicetitan/
|
|
14
|
-
"@servicetitan/form
|
|
15
|
-
"@servicetitan/
|
|
11
|
+
"@servicetitan/anvil2": "^1.23.1",
|
|
12
|
+
"@servicetitan/confirm": "~28.5.1",
|
|
13
|
+
"@servicetitan/design-system": "~14.5.1",
|
|
14
|
+
"@servicetitan/form": "~28.5.1",
|
|
15
|
+
"@servicetitan/form-state": "~28.5.1",
|
|
16
|
+
"@servicetitan/marketing-services-api": "^3.29.0",
|
|
17
|
+
"@servicetitan/react-ioc": "~28.4.0",
|
|
16
18
|
"@servicetitan/tokens": "~12.2.1",
|
|
17
|
-
"formstate": "
|
|
18
|
-
"mobx": "6.
|
|
19
|
+
"formstate": "2.0.0",
|
|
20
|
+
"mobx": "6.13.5",
|
|
19
21
|
"mobx-react": "9.0.2",
|
|
20
22
|
"moment": "~2.29.1",
|
|
21
|
-
"react": "~18.3.1"
|
|
23
|
+
"react": "~18.3.1",
|
|
24
|
+
"react-router-dom": "~5.3.0"
|
|
22
25
|
},
|
|
23
26
|
"devDependencies": {
|
|
24
27
|
"@testing-library/react": "^14.0.0",
|
|
25
|
-
"@types/history": "4.7.9"
|
|
28
|
+
"@types/history": "4.7.9",
|
|
29
|
+
"@types/react-router-dom": "~5.3.3"
|
|
26
30
|
},
|
|
27
31
|
"publishConfig": {
|
|
28
32
|
"access": "restricted"
|
|
@@ -30,5 +34,5 @@
|
|
|
30
34
|
"cli": {
|
|
31
35
|
"webpack": false
|
|
32
36
|
},
|
|
33
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "cd109a383e221446aaa2fed378646ad14bd07a90"
|
|
34
38
|
}
|
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
import { FC, useMemo, useState } from 'react';
|
|
2
|
+
import { Link } from 'react-router-dom';
|
|
3
|
+
|
|
4
|
+
import {
|
|
5
|
+
ActionMenu,
|
|
6
|
+
BodyText,
|
|
7
|
+
Button,
|
|
8
|
+
Card,
|
|
9
|
+
Headline,
|
|
10
|
+
Icon,
|
|
11
|
+
Stack,
|
|
12
|
+
Tag,
|
|
13
|
+
Tooltip,
|
|
14
|
+
} from '@servicetitan/design-system';
|
|
15
|
+
import { DomainValidationStatus } from '@servicetitan/marketing-services-api/dist/settings/brand.mrk.api';
|
|
16
|
+
import { tokens } from '@servicetitan/tokens/core';
|
|
17
|
+
|
|
18
|
+
import { BrandAction, BrandCardProps } from '../../../enums/brands';
|
|
19
|
+
|
|
20
|
+
import * as Styles from '../styles.module.less';
|
|
21
|
+
|
|
22
|
+
const BRAND_NAME_PLACEHOLDER = 'Assign Brand Name';
|
|
23
|
+
|
|
24
|
+
export const BrandCard: FC<BrandCardProps> = ({
|
|
25
|
+
actions,
|
|
26
|
+
domainValidationStatus,
|
|
27
|
+
email,
|
|
28
|
+
isDefault,
|
|
29
|
+
isShared,
|
|
30
|
+
logo,
|
|
31
|
+
name,
|
|
32
|
+
}) => {
|
|
33
|
+
const [isOpen, setOpen] = useState(false);
|
|
34
|
+
|
|
35
|
+
const actionsButtonSection = useMemo(() => {
|
|
36
|
+
if (!Array.isArray(actions)) {
|
|
37
|
+
return (
|
|
38
|
+
<SingleActionButtonSection
|
|
39
|
+
action={actions}
|
|
40
|
+
domainValidationStatus={domainValidationStatus}
|
|
41
|
+
/>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
const trigger = (
|
|
46
|
+
<Button outline size="small" onClick={() => setOpen(true)}>
|
|
47
|
+
Actions <Icon name="keyboard_arrow_down" size={16} />
|
|
48
|
+
</Button>
|
|
49
|
+
);
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<ActionMenu
|
|
53
|
+
trigger={trigger}
|
|
54
|
+
open={isOpen}
|
|
55
|
+
onClickOutside={() => setOpen(false)}
|
|
56
|
+
direction="bl"
|
|
57
|
+
>
|
|
58
|
+
{actions.map(action => {
|
|
59
|
+
if (action.href) {
|
|
60
|
+
return (
|
|
61
|
+
<Link to={action.href} key={action.name}>
|
|
62
|
+
<ActionMenu.Item key={action.name} disabled={action.disabled}>
|
|
63
|
+
<BodyText subdued={action.disabled}>{action.name}</BodyText>
|
|
64
|
+
</ActionMenu.Item>
|
|
65
|
+
</Link>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
const actionClick = () => {
|
|
70
|
+
setOpen(false);
|
|
71
|
+
if (action.action) {
|
|
72
|
+
action.action();
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
return (
|
|
77
|
+
<ActionMenu.Item
|
|
78
|
+
disabled={action.disabled}
|
|
79
|
+
key={action.name}
|
|
80
|
+
onClick={actionClick}
|
|
81
|
+
>
|
|
82
|
+
<BodyText subdued={action.disabled}>{action.name}</BodyText>
|
|
83
|
+
</ActionMenu.Item>
|
|
84
|
+
);
|
|
85
|
+
})}
|
|
86
|
+
</ActionMenu>
|
|
87
|
+
);
|
|
88
|
+
}, [isOpen, setOpen, actions, domainValidationStatus]);
|
|
89
|
+
|
|
90
|
+
const nameToShow = name || BRAND_NAME_PLACEHOLDER;
|
|
91
|
+
|
|
92
|
+
return (
|
|
93
|
+
<Card
|
|
94
|
+
className={Styles.brandCard}
|
|
95
|
+
status={domainValidationStatus === DomainValidationStatus.Error ? 'error' : 'default'}
|
|
96
|
+
>
|
|
97
|
+
<Stack direction="row" spacing={2} className={Styles.cardContent}>
|
|
98
|
+
<Stack.Item fill>
|
|
99
|
+
<Stack direction="column">
|
|
100
|
+
{logo && nameToShow !== 'Corporate Brand 2' ? (
|
|
101
|
+
<img className={Styles.brandImg} src={logo} alt={name} />
|
|
102
|
+
) : (
|
|
103
|
+
<div className={Styles.brandImgPlaceholder}>
|
|
104
|
+
<Icon name="image" className="c-neutral-90" size={24} />
|
|
105
|
+
</div>
|
|
106
|
+
)}
|
|
107
|
+
|
|
108
|
+
<Stack direction="column" className="m-t-3">
|
|
109
|
+
<Headline
|
|
110
|
+
el="p"
|
|
111
|
+
subdued={!name}
|
|
112
|
+
className="t-truncate-i m-0"
|
|
113
|
+
title={nameToShow}
|
|
114
|
+
>
|
|
115
|
+
{nameToShow}
|
|
116
|
+
</Headline>
|
|
117
|
+
{email && (
|
|
118
|
+
<BodyText subdued title={email} className="t-truncate-i">
|
|
119
|
+
{email}
|
|
120
|
+
</BodyText>
|
|
121
|
+
)}
|
|
122
|
+
</Stack>
|
|
123
|
+
</Stack>
|
|
124
|
+
</Stack.Item>
|
|
125
|
+
<Stack direction="column">
|
|
126
|
+
{actionsButtonSection}
|
|
127
|
+
<CardTags isDefault={isDefault} isShared={isShared} />
|
|
128
|
+
</Stack>
|
|
129
|
+
</Stack>
|
|
130
|
+
</Card>
|
|
131
|
+
);
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
const CardTags: FC<{ isDefault: boolean; isShared: boolean }> = ({ isDefault, isShared }) => {
|
|
135
|
+
if (!isDefault && !isShared) {
|
|
136
|
+
return null;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
return (
|
|
140
|
+
<Stack direction="column" alignItems="flex-end" className={Styles.tags}>
|
|
141
|
+
{isShared && (
|
|
142
|
+
<Tag className={Styles.corporateTag} color="info" subtle compact>
|
|
143
|
+
Corporate HQ
|
|
144
|
+
</Tag>
|
|
145
|
+
)}
|
|
146
|
+
{isDefault && (
|
|
147
|
+
<Tag className={Styles.defaultTag} compact>
|
|
148
|
+
Default
|
|
149
|
+
</Tag>
|
|
150
|
+
)}
|
|
151
|
+
</Stack>
|
|
152
|
+
);
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
const SingleActionButtonSection: FC<{
|
|
156
|
+
action: BrandAction;
|
|
157
|
+
domainValidationStatus?: DomainValidationStatus;
|
|
158
|
+
}> = ({ domainValidationStatus, action }) => {
|
|
159
|
+
const validationStatusIcon = useMemo(() => {
|
|
160
|
+
return <ValidationStatusIcon status={domainValidationStatus} />;
|
|
161
|
+
}, [domainValidationStatus]);
|
|
162
|
+
|
|
163
|
+
if (domainValidationStatus === DomainValidationStatus.Pending) {
|
|
164
|
+
return (
|
|
165
|
+
<Stack spacing={1} alignItems="center">
|
|
166
|
+
<BodyText size="small">Validation In Process</BodyText>
|
|
167
|
+
{validationStatusIcon}
|
|
168
|
+
</Stack>
|
|
169
|
+
);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
return (
|
|
173
|
+
<Stack spacing={2} alignItems="center">
|
|
174
|
+
{validationStatusIcon}
|
|
175
|
+
{action.isConfigured && (
|
|
176
|
+
<Icon name="check_circle" color={tokens.colorGreen500} size={24} />
|
|
177
|
+
)}
|
|
178
|
+
|
|
179
|
+
{action.inProgress ? (
|
|
180
|
+
<InProgressButton action={action} />
|
|
181
|
+
) : (
|
|
182
|
+
<StandardButton action={action} />
|
|
183
|
+
)}
|
|
184
|
+
</Stack>
|
|
185
|
+
);
|
|
186
|
+
};
|
|
187
|
+
|
|
188
|
+
const StandardButton: FC<{ action: BrandAction }> = ({ action }) => (
|
|
189
|
+
<Tooltip text={action.disabled ? action.tooltipMessage : ''}>
|
|
190
|
+
{action.href ? (
|
|
191
|
+
<Link to={action.href}>
|
|
192
|
+
<Button size="small" primary outline disabled={action.disabled}>
|
|
193
|
+
{action.name}
|
|
194
|
+
</Button>
|
|
195
|
+
</Link>
|
|
196
|
+
) : (
|
|
197
|
+
<Button size="small" primary onClick={action.action} outline disabled={action.disabled}>
|
|
198
|
+
{action.name}
|
|
199
|
+
</Button>
|
|
200
|
+
)}
|
|
201
|
+
</Tooltip>
|
|
202
|
+
);
|
|
203
|
+
|
|
204
|
+
const InProgressButton: FC<{ action: BrandAction }> = ({ action }) => (
|
|
205
|
+
<Tooltip text={action.disabled ? action.tooltipMessage : ''}>
|
|
206
|
+
{action.href ? (
|
|
207
|
+
<Link to={action.href}>
|
|
208
|
+
<Button size="small" primary text className="m-0 p-1">
|
|
209
|
+
<BodyText size="small" className="m-r-half">
|
|
210
|
+
Registration In Progress
|
|
211
|
+
</BodyText>
|
|
212
|
+
<Icon name="hourglass_full" color={tokens.colorBlue} size={16} />
|
|
213
|
+
</Button>
|
|
214
|
+
</Link>
|
|
215
|
+
) : (
|
|
216
|
+
<Button size="small" primary text className="m-0 p-1" onClick={action.action}>
|
|
217
|
+
<BodyText size="small" className="m-r-1">
|
|
218
|
+
Registration In Progress
|
|
219
|
+
</BodyText>
|
|
220
|
+
<Icon name="hourglass_full" color={tokens.colorBlue} size={16} />
|
|
221
|
+
</Button>
|
|
222
|
+
)}
|
|
223
|
+
</Tooltip>
|
|
224
|
+
);
|
|
225
|
+
|
|
226
|
+
const ValidationStatusIcon: FC<{ status?: DomainValidationStatus }> = ({ status }) => {
|
|
227
|
+
switch (status) {
|
|
228
|
+
case DomainValidationStatus.Error:
|
|
229
|
+
return (
|
|
230
|
+
<Tooltip
|
|
231
|
+
direction="t"
|
|
232
|
+
text="Error is detected in processing the Sender Domain validation. Please check and try again."
|
|
233
|
+
className="cursor-pointer"
|
|
234
|
+
>
|
|
235
|
+
<Icon name="warning" color={tokens.colorRed500} size={24} />
|
|
236
|
+
</Tooltip>
|
|
237
|
+
);
|
|
238
|
+
case DomainValidationStatus.Validated:
|
|
239
|
+
return <Icon name="check_circle" color={tokens.colorGreen500} size={24} />;
|
|
240
|
+
case DomainValidationStatus.Pending:
|
|
241
|
+
return <Icon name="hourglass_full" color={tokens.colorBlue500} size={24} />;
|
|
242
|
+
default:
|
|
243
|
+
return null;
|
|
244
|
+
}
|
|
245
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
|
|
3
|
+
import { Grid } from '@servicetitan/anvil2';
|
|
4
|
+
|
|
5
|
+
import { BrandCard } from '../brand-card/brand-card';
|
|
6
|
+
import { BrandCardProps } from '../../../enums/brands';
|
|
7
|
+
|
|
8
|
+
import * as Styles from '../styles.module.less';
|
|
9
|
+
|
|
10
|
+
export const CardsGrid: FC<{ brands: BrandCardProps[] }> = ({ brands }) => (
|
|
11
|
+
<Grid className={Styles.grid} gap="6">
|
|
12
|
+
{brands.map(brand => {
|
|
13
|
+
return <BrandCard key={brand.id} {...brand} />;
|
|
14
|
+
})}
|
|
15
|
+
</Grid>
|
|
16
|
+
);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './cards-grid/cards-grid';
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
@import (reference) '@servicetitan/tokens/dist/tokens.less';
|
|
2
|
+
|
|
3
|
+
@action-menu-item-padding: 12px;
|
|
4
|
+
@card-min-width: 330px;
|
|
5
|
+
@card-max-width: 700px;
|
|
6
|
+
@max-number-of-cards: 3;
|
|
7
|
+
|
|
8
|
+
.delete-tooltip {
|
|
9
|
+
min-width: 327px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.grid {
|
|
13
|
+
grid-template-columns: repeat(auto-fill, minmax(@card-min-width, 1fr));
|
|
14
|
+
max-width: calc(@card-max-width * @max-number-of-cards + @spacing-3 * 2);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@media (min-width: 1120px) {
|
|
18
|
+
.grid {
|
|
19
|
+
grid-template-columns: repeat(@max-number-of-cards - 1, 1fr);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@media (min-width: 1620px) {
|
|
24
|
+
.grid {
|
|
25
|
+
grid-template-columns: repeat(@max-number-of-cards, 1fr);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.brand-card {
|
|
30
|
+
height: 200px;
|
|
31
|
+
min-width: @card-min-width;
|
|
32
|
+
max-width: @card-max-width;
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
background: inherit !important;
|
|
35
|
+
|
|
36
|
+
:global(.CardSection) {
|
|
37
|
+
height: 150px;
|
|
38
|
+
background-color: @color-white;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.card-content {
|
|
43
|
+
height: 139px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.brand-img {
|
|
47
|
+
width: @spacing-6;
|
|
48
|
+
height: @spacing-6;
|
|
49
|
+
min-width: @spacing-6;
|
|
50
|
+
min-height: @spacing-6;
|
|
51
|
+
border-radius: @border-radius-circular;
|
|
52
|
+
border: solid 1px @color-neutral-60;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.brand-img-placeholder {
|
|
56
|
+
.brand-img();
|
|
57
|
+
background-color: @color-neutral-60;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.tags {
|
|
61
|
+
height: 41px;
|
|
62
|
+
margin-bottom: 2px;
|
|
63
|
+
margin-top: auto;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.default-tag {
|
|
67
|
+
width: 53px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.corporate-tag {
|
|
71
|
+
min-width: 86px;
|
|
72
|
+
margin-bottom: @spacing-half;
|
|
73
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export const __esModule: true;
|
|
2
|
+
export const brandCard: string;
|
|
3
|
+
export const brandImg: string;
|
|
4
|
+
export const brandImgPlaceholder: string;
|
|
5
|
+
export const cardContent: string;
|
|
6
|
+
export const corporateTag: string;
|
|
7
|
+
export const defaultTag: string;
|
|
8
|
+
export const deleteTooltip: string;
|
|
9
|
+
export const grid: string;
|
|
10
|
+
export const tags: string;
|
|
11
|
+
|