@servicetitan/marketing-ui 5.4.0 → 5.6.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/dist/components/ads/ads-stat.d.ts +2 -3
- package/dist/components/ads/ads-stat.d.ts.map +1 -1
- package/dist/components/stat/stat-extended-card.d.ts +2 -1
- package/dist/components/stat/stat-extended-card.d.ts.map +1 -1
- package/dist/components/stat/stat-extended-card.js +2 -2
- package/dist/components/stat/stat-extended-card.js.map +1 -1
- package/dist/utils/ads-texts.d.ts +1 -1
- package/dist/utils/ads-texts.d.ts.map +1 -1
- package/dist/utils/ads-texts.js +1 -0
- package/dist/utils/ads-texts.js.map +1 -1
- package/package.json +2 -2
- package/src/components/ads/ads-stat.tsx +2 -2
- package/src/components/stat/stat-extended-card.tsx +23 -16
- package/src/utils/ads-texts.tsx +4 -1
|
@@ -2,16 +2,15 @@ import { FC } from 'react';
|
|
|
2
2
|
import { StatCardProps } from '../stat/stat-card';
|
|
3
3
|
import { StatExtendedCardProps } from '../stat/stat-extended-card';
|
|
4
4
|
import { AdsStatType } from '../../utils/ads-texts';
|
|
5
|
-
interface AdsPerformanceStatProps extends Omit<StatCardProps, 'title'> {
|
|
5
|
+
export interface AdsPerformanceStatProps extends Omit<StatCardProps, 'title'> {
|
|
6
6
|
stat: AdsStatType;
|
|
7
7
|
title?: string;
|
|
8
8
|
}
|
|
9
9
|
export declare const AdsPerformanceStatCard: FC<AdsPerformanceStatProps>;
|
|
10
|
-
interface AdsPerformanceStatExtendedProps extends Omit<StatExtendedCardProps, 'title'> {
|
|
10
|
+
export interface AdsPerformanceStatExtendedProps extends Omit<StatExtendedCardProps, 'title'> {
|
|
11
11
|
stat: AdsStatType;
|
|
12
12
|
title?: string;
|
|
13
13
|
title2: string;
|
|
14
14
|
}
|
|
15
15
|
export declare const AdsPerformanceStatExtendedCard: FC<AdsPerformanceStatExtendedProps>;
|
|
16
|
-
export {};
|
|
17
16
|
//# sourceMappingURL=ads-stat.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ads-stat.d.ts","sourceRoot":"","sources":["../../../src/components/ads/ads-stat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAY,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAoB,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EAAuB,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGzE,
|
|
1
|
+
{"version":3,"file":"ads-stat.d.ts","sourceRoot":"","sources":["../../../src/components/ads/ads-stat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAY,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAoB,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EAAuB,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGzE,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC;IACzE,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,uBAAuB,CAK9D,CAAC;AAEF,MAAM,WAAW,+BAAgC,SAAQ,IAAI,CAAC,qBAAqB,EAAE,OAAO,CAAC;IACzF,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,8BAA8B,EAAE,EAAE,CAAC,+BAA+B,CAK9E,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
2
|
export interface StatExtendedCardProps {
|
|
3
3
|
title: string;
|
|
4
4
|
description?: string;
|
|
@@ -13,6 +13,7 @@ export interface StatExtendedCardProps {
|
|
|
13
13
|
neutral?: boolean;
|
|
14
14
|
fill?: boolean;
|
|
15
15
|
className?: string;
|
|
16
|
+
actions?: ReactNode;
|
|
16
17
|
}
|
|
17
18
|
export declare const StatExtendedCard: FC<StatExtendedCardProps>;
|
|
18
19
|
//# sourceMappingURL=stat-extended-card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-extended-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-extended-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"stat-extended-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-extended-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOtC,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;CACvB;AACD,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA8EtD,CAAC"}
|
|
@@ -4,10 +4,10 @@ import { BodyText, Icon, Headline, Eyebrow, Stack, Tooltip } from '@servicetitan
|
|
|
4
4
|
import { formatValue } from '../../utils/formatters';
|
|
5
5
|
import { StatDiff } from './stat-card';
|
|
6
6
|
import * as Styles from './stat-card.module.less';
|
|
7
|
-
export const StatExtendedCard = ({ title, title2, description, value, goal, prev, percent, money, rate, inverted, neutral, fill, className, }) => {
|
|
7
|
+
export const StatExtendedCard = ({ title, title2, description, value, goal, prev, percent, money, rate, inverted, neutral, fill, className, actions, }) => {
|
|
8
8
|
const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
|
|
9
9
|
return (_jsxs("div", { className: classNames('p-3 bg-white border border-radius-2', {
|
|
10
10
|
'flex-grow-1 flex-basis-0': fill,
|
|
11
|
-
}, className), children: [_jsxs(Stack, { children: [_jsx(Headline, { size: "small", children: title }), !!description && (_jsx(Tooltip, { text: description, "data-cy": `marketing-stat-card-${title}-info-tooltip`, children: _jsx(Icon, { name: "info", size: 18, className: "c-neutral-80 m-l-half", "data-cy": `marketing-stat-card-${title}-info-icon` }) }))] }), _jsx(Eyebrow, { size: "small", className: "m-t-2 c-black", "data-cy": `marketing-stat-card-${title2}-title2`, children: title2 }), _jsx(Stack, { justifyContent: "space-between", className: "m-t-half", children: _jsxs(Stack, { alignItems: "flex-end", className: "flex-grow-1 flex-basis-0", children: [_jsx(Headline, { className: "m-b-0-i m-r-half fw-normal-i", size: "xlarge", children: formatValue(value, format) }), goal !== undefined ? (_jsxs(BodyText, { subdued: true, children: ["/ ", formatValue(goal, format), " (Goal)"] })) : prev !== undefined ? (_jsx(StatDiff, { value: value, prev: prev, format: format, inverted: inverted, neutral: neutral, className: classNames(Styles.statExtendedDiff, 'm-l-1') })) : undefined] }) })] }));
|
|
11
|
+
}, className), children: [_jsxs(Stack, { justifyContent: "space-between", alignItems: "center", children: [_jsx(Stack.Item, { fill: true, children: _jsxs(Stack, { children: [_jsx(Headline, { size: "small", children: title }), !!description && (_jsx(Tooltip, { text: description, "data-cy": `marketing-stat-card-${title}-info-tooltip`, children: _jsx(Icon, { name: "info", size: 18, className: "c-neutral-80 m-l-half", "data-cy": `marketing-stat-card-${title}-info-icon` }) }))] }) }), actions && _jsx(Stack.Item, { shrink: 0, children: actions })] }), _jsx(Eyebrow, { size: "small", className: "m-t-2 c-black", "data-cy": `marketing-stat-card-${title2}-title2`, children: title2 }), _jsx(Stack, { justifyContent: "space-between", className: "m-t-half", children: _jsxs(Stack, { alignItems: "flex-end", className: "flex-grow-1 flex-basis-0", children: [_jsx(Headline, { className: "m-b-0-i m-r-half fw-normal-i", size: "xlarge", children: formatValue(value, format) }), goal !== undefined ? (_jsxs(BodyText, { subdued: true, children: ["/ ", formatValue(goal, format), " (Goal)"] })) : prev !== undefined ? (_jsx(StatDiff, { value: value, prev: prev, format: format, inverted: inverted, neutral: neutral, className: classNames(Styles.statExtendedDiff, 'm-l-1') })) : undefined] }) })] }));
|
|
12
12
|
};
|
|
13
13
|
//# sourceMappingURL=stat-extended-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-extended-card.js","sourceRoot":"","sources":["../../../src/components/stat/stat-extended-card.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"stat-extended-card.js","sourceRoot":"","sources":["../../../src/components/stat/stat-extended-card.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAC;AAkBlD,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,EACxD,KAAK,EACL,MAAM,EACN,WAAW,EACX,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,EACT,OAAO,GACV,EAAE,EAAE;IACD,MAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEhF,OAAO,CACH,eACI,SAAS,EAAE,UAAU,CACjB,qCAAqC,EACrC;YACI,0BAA0B,EAAE,IAAI;SACnC,EACD,SAAS,CACZ,aAED,MAAC,KAAK,IAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,aACrD,KAAC,KAAK,CAAC,IAAI,IAAC,IAAI,kBACZ,MAAC,KAAK,eACF,KAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,YAAE,KAAK,GAAY,EACxC,CAAC,CAAC,WAAW,IAAI,CACd,KAAC,OAAO,IACJ,IAAI,EAAE,WAAW,aACR,uBAAuB,KAAK,eAAe,YAEpD,KAAC,IAAI,IACD,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,EAAE,EACR,SAAS,EAAC,uBAAuB,aACxB,uBAAuB,KAAK,YAAY,GACnD,GACI,CACb,IACG,GACC,EACZ,OAAO,IAAI,KAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,CAAC,YAAG,OAAO,GAAc,IACrD,EACR,KAAC,OAAO,IACJ,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,eAAe,aAChB,uBAAuB,MAAM,SAAS,YAE9C,MAAM,GACD,EAEV,KAAC,KAAK,IAAC,cAAc,EAAC,eAAe,EAAC,SAAS,EAAC,UAAU,YACtD,MAAC,KAAK,IAAC,UAAU,EAAC,UAAU,EAAC,SAAS,EAAC,0BAA0B,aAC7D,KAAC,QAAQ,IAAC,SAAS,EAAC,8BAA8B,EAAC,IAAI,EAAC,QAAQ,YAC3D,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,GACpB,EACV,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAClB,MAAC,QAAQ,IAAC,OAAO,yBAAI,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,eAAmB,CACpE,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CACrB,KAAC,QAAQ,IACL,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,gBAAgB,EAAE,OAAO,CAAC,GACzD,CACL,CAAC,CAAC,CAAC,SAAS,IACT,GACJ,IACN,CACT,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export type AdsStatType = 'impressions' | 'views' | 'clicks' | 'clickRate' | 'conversionRate' | 'closeRate' | 'sessions' | 'conversions' | 'allConversions' | 'transactions' | 'bookedJobs' | 'ranJobs' | 'ranRate' | 'leads' | 'leadRate' | 'completedJobs' | 'soldJobs' | 'revenue' | 'marketingRevenue' | 'expenseToIncomeRatio' | 'costPerBookedJob' | 'costPerLead' | 'costPerRanJob' | 'costPerSoldJob' | 'costPerConversion' | 'cost' | 'averageCostPerClick' | 'averageJobValue' | 'roi' | 'bookingRate' | 'callBookingRate' | 'opportunityRate' | 'newCustomerLeads' | 'newCustomerLeadRate' | 'ranJobsFromMarketing' | 'existingCustomerLeads';
|
|
1
|
+
export type AdsStatType = 'impressions' | 'views' | 'clicks' | 'clickRate' | 'conversionRate' | 'closeRate' | 'sessions' | 'conversions' | 'allConversions' | 'transactions' | 'bookedJobs' | 'ranJobs' | 'ranRate' | 'leads' | 'leadRate' | 'completedJobs' | 'soldJobs' | 'revenue' | 'marketingRevenue' | 'expenseToIncomeRatio' | 'costPerBookedJob' | 'costPerLead' | 'costPerRanJob' | 'costPerSoldJob' | 'costPerConversion' | 'cost' | 'averageCostPerClick' | 'averageJobValue' | 'roi' | 'bookingRate' | 'callBookingRate' | 'opportunityRate' | 'newCustomerLeads' | 'newCustomerLeadRate' | 'ranJobsFromMarketing' | 'existingCustomerLeads' | 'returnOnInvestment';
|
|
2
2
|
export declare const adsStatDescriptions: Record<AdsStatType, string>;
|
|
3
3
|
//# sourceMappingURL=ads-texts.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ads-texts.d.ts","sourceRoot":"","sources":["../../src/utils/ads-texts.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GACjB,aAAa,GACb,OAAO,GACP,QAAQ,GACR,WAAW,GACX,gBAAgB,GAChB,WAAW,GACX,UAAU,GACV,aAAa,GACb,gBAAgB,GAChB,cAAc,GACd,YAAY,GACZ,SAAS,GACT,SAAS,GACT,OAAO,GACP,UAAU,GACV,eAAe,GACf,UAAU,GACV,SAAS,GACT,kBAAkB,GAClB,sBAAsB,GACtB,kBAAkB,GAClB,aAAa,GACb,eAAe,GACf,gBAAgB,GAChB,mBAAmB,GACnB,MAAM,GACN,qBAAqB,GACrB,iBAAiB,GACjB,KAAK,GACL,aAAa,GACb,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,qBAAqB,GACrB,sBAAsB,GACtB,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"ads-texts.d.ts","sourceRoot":"","sources":["../../src/utils/ads-texts.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GACjB,aAAa,GACb,OAAO,GACP,QAAQ,GACR,WAAW,GACX,gBAAgB,GAChB,WAAW,GACX,UAAU,GACV,aAAa,GACb,gBAAgB,GAChB,cAAc,GACd,YAAY,GACZ,SAAS,GACT,SAAS,GACT,OAAO,GACP,UAAU,GACV,eAAe,GACf,UAAU,GACV,SAAS,GACT,kBAAkB,GAClB,sBAAsB,GACtB,kBAAkB,GAClB,aAAa,GACb,eAAe,GACf,gBAAgB,GAChB,mBAAmB,GACnB,MAAM,GACN,qBAAqB,GACrB,iBAAiB,GACjB,KAAK,GACL,aAAa,GACb,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,qBAAqB,GACrB,sBAAsB,GACtB,uBAAuB,GACvB,oBAAoB,CAAC;AAE3B,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAyD3D,CAAC"}
|
package/dist/utils/ads-texts.js
CHANGED
|
@@ -35,5 +35,6 @@ export const adsStatDescriptions = {
|
|
|
35
35
|
newCustomerLeadRate: 'The percentage of Leads that came from someone not already part of your database. If this number is low, then you are mostly reaching your existing customers with marketing',
|
|
36
36
|
existingCustomerLeads: 'Leads that came from someone already in your database, ie. you have ran a job for them previously',
|
|
37
37
|
ranJobsFromMarketing: 'Ran Jobs with Campaigns/Categories that match the filter selected at the top of this page',
|
|
38
|
+
returnOnInvestment: 'Shown as a percentage, this is the ratio of what revenue you make from marketing versus what you spend on your marketing activity',
|
|
38
39
|
};
|
|
39
40
|
//# sourceMappingURL=ads-texts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ads-texts.js","sourceRoot":"","sources":["../../src/utils/ads-texts.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ads-texts.js","sourceRoot":"","sources":["../../src/utils/ads-texts.tsx"],"names":[],"mappings":"AAuCA,MAAM,CAAC,MAAM,mBAAmB,GAAgC;IAC5D,WAAW,EAAE,oCAAoC;IACjD,KAAK,EAAE,2HAA2H;IAClI,MAAM,EAAE,4EAA4E;IACpF,QAAQ,EACJ,gSAAgS;IACpS,WAAW,EACP,sLAAsL;IAC1L,cAAc,EACV,uHAAuH;IAC3H,YAAY,EAAE,0DAA0D;IACxE,KAAK,EAAE,qGAAqG;IAC5G,OAAO,EACH,sHAAsH;IAC1H,OAAO,EACH,0IAA0I;IAC9I,UAAU,EAAE,4CAA4C;IACxD,aAAa,EAAE,6CAA6C;IAC5D,QAAQ,EACJ,kIAAkI;IACtI,OAAO,EAAE,uEAAuE;IAChF,gBAAgB,EACZ,wFAAwF;IAC5F,oBAAoB,EAChB,2HAA2H;IAC/H,WAAW,EAAE,0CAA0C;IACvD,gBAAgB,EAAE,gDAAgD;IAClE,aAAa,EACT,iGAAiG;IACrG,cAAc,EAAE,mDAAmD;IACnE,iBAAiB,EAAE,0DAA0D;IAC7E,mBAAmB,EACf,8JAA8J;IAClK,IAAI,EAAE,2DAA2D;IAEjE,SAAS,EAAE,kEAAkE;IAC7E,cAAc,EACV,wLAAwL;IAC5L,SAAS,EACL,2LAA2L;IAC/L,QAAQ,EACJ,iJAAiJ;IACrJ,eAAe,EAAE,mDAAmD;IACpE,GAAG,EAAE,+JAA+J;IACpK,WAAW,EAAE,qDAAqD;IAClE,eAAe,EAAE,2DAA2D;IAC5E,eAAe,EAAE,4DAA4D;IAC7E,gBAAgB,EACZ,8GAA8G;IAClH,mBAAmB,EACf,8KAA8K;IAClL,qBAAqB,EACjB,mGAAmG;IACvG,oBAAoB,EAChB,2FAA2F;IAC/F,kBAAkB,EACd,mIAAmI;CAC1I,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/marketing-ui",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.6.0",
|
|
4
4
|
"description": "Marketing UI component and utils",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"less": true,
|
|
53
53
|
"webpack": false
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "0a035dd9fe9c3e29cfbc9f123bcd5bae836206da"
|
|
56
56
|
}
|
|
@@ -4,7 +4,7 @@ import { StatExtendedCard, StatExtendedCardProps } from '../stat/stat-extended-c
|
|
|
4
4
|
import { adsStatDescriptions, AdsStatType } from '../../utils/ads-texts';
|
|
5
5
|
import { camelCaseToTitleCase } from '../../utils/string-case';
|
|
6
6
|
|
|
7
|
-
interface AdsPerformanceStatProps extends Omit<StatCardProps, 'title'> {
|
|
7
|
+
export interface AdsPerformanceStatProps extends Omit<StatCardProps, 'title'> {
|
|
8
8
|
stat: AdsStatType;
|
|
9
9
|
title?: string;
|
|
10
10
|
}
|
|
@@ -16,7 +16,7 @@ export const AdsPerformanceStatCard: FC<AdsPerformanceStatProps> = props => {
|
|
|
16
16
|
return <StatCard {...props} title={titleText} description={hintText} />;
|
|
17
17
|
};
|
|
18
18
|
|
|
19
|
-
interface AdsPerformanceStatExtendedProps extends Omit<StatExtendedCardProps, 'title'> {
|
|
19
|
+
export interface AdsPerformanceStatExtendedProps extends Omit<StatExtendedCardProps, 'title'> {
|
|
20
20
|
stat: AdsStatType;
|
|
21
21
|
title?: string;
|
|
22
22
|
title2: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { BodyText, Icon, Headline, Eyebrow, Stack, Tooltip } from '@servicetitan/design-system';
|
|
4
4
|
import { formatValue } from '../../utils/formatters';
|
|
@@ -19,6 +19,7 @@ export interface StatExtendedCardProps {
|
|
|
19
19
|
neutral?: boolean;
|
|
20
20
|
fill?: boolean;
|
|
21
21
|
className?: string;
|
|
22
|
+
actions?: ReactNode;
|
|
22
23
|
}
|
|
23
24
|
export const StatExtendedCard: FC<StatExtendedCardProps> = ({
|
|
24
25
|
title,
|
|
@@ -34,6 +35,7 @@ export const StatExtendedCard: FC<StatExtendedCardProps> = ({
|
|
|
34
35
|
neutral,
|
|
35
36
|
fill,
|
|
36
37
|
className,
|
|
38
|
+
actions,
|
|
37
39
|
}) => {
|
|
38
40
|
const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
|
|
39
41
|
|
|
@@ -47,21 +49,26 @@ export const StatExtendedCard: FC<StatExtendedCardProps> = ({
|
|
|
47
49
|
className
|
|
48
50
|
)}
|
|
49
51
|
>
|
|
50
|
-
<Stack>
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
52
|
+
<Stack justifyContent="space-between" alignItems="center">
|
|
53
|
+
<Stack.Item fill>
|
|
54
|
+
<Stack>
|
|
55
|
+
<Headline size="small">{title}</Headline>
|
|
56
|
+
{!!description && (
|
|
57
|
+
<Tooltip
|
|
58
|
+
text={description}
|
|
59
|
+
data-cy={`marketing-stat-card-${title}-info-tooltip`}
|
|
60
|
+
>
|
|
61
|
+
<Icon
|
|
62
|
+
name="info"
|
|
63
|
+
size={18}
|
|
64
|
+
className="c-neutral-80 m-l-half"
|
|
65
|
+
data-cy={`marketing-stat-card-${title}-info-icon`}
|
|
66
|
+
/>
|
|
67
|
+
</Tooltip>
|
|
68
|
+
)}
|
|
69
|
+
</Stack>
|
|
70
|
+
</Stack.Item>
|
|
71
|
+
{actions && <Stack.Item shrink={0}>{actions}</Stack.Item>}
|
|
65
72
|
</Stack>
|
|
66
73
|
<Eyebrow
|
|
67
74
|
size="small"
|
package/src/utils/ads-texts.tsx
CHANGED
|
@@ -34,7 +34,8 @@ export type AdsStatType =
|
|
|
34
34
|
| 'newCustomerLeads'
|
|
35
35
|
| 'newCustomerLeadRate'
|
|
36
36
|
| 'ranJobsFromMarketing'
|
|
37
|
-
| 'existingCustomerLeads'
|
|
37
|
+
| 'existingCustomerLeads'
|
|
38
|
+
| 'returnOnInvestment';
|
|
38
39
|
|
|
39
40
|
export const adsStatDescriptions: Record<AdsStatType, string> = {
|
|
40
41
|
impressions: 'The number of times an ad was seen',
|
|
@@ -91,4 +92,6 @@ export const adsStatDescriptions: Record<AdsStatType, string> = {
|
|
|
91
92
|
'Leads that came from someone already in your database, ie. you have ran a job for them previously',
|
|
92
93
|
ranJobsFromMarketing:
|
|
93
94
|
'Ran Jobs with Campaigns/Categories that match the filter selected at the top of this page',
|
|
95
|
+
returnOnInvestment:
|
|
96
|
+
'Shown as a percentage, this is the ratio of what revenue you make from marketing versus what you spend on your marketing activity',
|
|
94
97
|
};
|