@servicetitan/marketing-ui 1.14.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/marketing-ui",
-    "version": "1.14.0",
+    "version": "1.17.0",
     "description": "Marketing UI component and utils",
     "repository": {
         "type": "git",
@@ -51,5 +51,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "b878482bbfa5abbf3a7b63f0685a9088d55a5d17"
+    "gitHead": "7f16e97f49ef5de21150d63a93b7abbe8396b89e"
 }

package/src/components/ui/action-button/action-button.module.less

@@ -0,0 +1,51 @@
+@import (reference) '@servicetitan/tokens/dist/tokens.less';
+
+.action-button {
+    color: @color-neutral-80;
+    padding: @spacing-half @spacing-2;
+    box-sizing: border-box;
+    border: none;
+    background-color: transparent;
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    &.active {
+        background-color: @color-neutral-60;
+    }
+
+    &.disabled {
+        cursor: default;
+        color: @color-blue-grey-400;
+
+        .text {
+            color: @color-blue-grey-400;
+        }
+    }
+
+    &.primary,
+    &.negative {
+        &:focus {
+            outline: none;
+        }
+
+        &:hover,
+        &.focus-visible:focus {
+            color: @color-white;
+
+            .text {
+                color: @color-white;
+            }
+        }
+    }
+
+    &.primary:hover,
+    &.primary.focus-visible:focus {
+        background-color: @color-blue-400;
+    }
+
+    &.negative:hover,
+    &.negative.focus-visible:focus {
+        background-color: @color-red-400;
+    }
+}

package/src/components/ui/action-button/action-button.module.less.d.ts

@@ -0,0 +1,9 @@
+export const __esModule: true;
+export const actionButton: string;
+export const active: string;
+export const disabled: string;
+export const text: string;
+export const primary: string;
+export const negative: string;
+export const focusVisible: string;
+

package/src/components/ui/action-button/action-button.stories.tsx

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react';
+import { ActionButton } from './action-button';
+
+export default {
+    title: 'Marketing UI/ui/ActionButton',
+    component: ActionButton,
+    parameters: {},
+};
+
+const w = (style: { width?: string; height?: string }, cb: () => ReactElement) => () =>
+    <div style={style}>{cb()}</div>;
+
+export const actionButtonHoverPrimary = w({}, () => (
+    <ActionButton hover="primary">Button</ActionButton>
+));
+
+export const actionButtonHoverNegative = w({}, () => (
+    <ActionButton hover="negative">Button</ActionButton>
+));

package/src/components/ui/action-button/action-button.tsx

@@ -0,0 +1,82 @@
+import { ReactNode, FC, useRef } from 'react';
+import classnames from 'classnames';
+import {
+    Icon,
+    BodyText,
+    IconNameType,
+    Tooltip,
+    useFocusVisible,
+} from '@servicetitan/design-system';
+import * as Styles from './action-button.module.less';
+
+export interface ActionButtonProps {
+    children: ReactNode;
+    iconName?: IconNameType;
+    hover?: 'primary' | 'negative' | 'none';
+    disabled?: boolean;
+    tooltip?: string;
+    qaPrefix?: string;
+    active?: boolean;
+    onClick?(): void;
+}
+
+export const ActionButton: FC<ActionButtonProps> = ({
+    onClick,
+    disabled,
+    children,
+    iconName,
+    hover,
+    qaPrefix,
+    active,
+    tooltip,
+}) => {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const { isFocusVisible, focusFunction, blurFunction } = useFocusVisible(buttonRef);
+
+    const handleClick = () => {
+        if (disabled) {
+            return;
+        }
+
+        if (onClick) {
+            onClick();
+        }
+    };
+
+    const getButton = () => {
+        const classes = classnames(Styles.actionButton, qaPrefix, {
+            [Styles.primary]: hover === 'primary' && !disabled,
+            [Styles.negative]: hover === 'negative' && !disabled,
+            [Styles.active]: active && !disabled,
+            [Styles.disabled]: disabled,
+            [Styles.focusVisible]: isFocusVisible,
+        });
+
+        return (
+            <button
+                type="button"
+                ref={buttonRef}
+                className={classes}
+                onClick={handleClick}
+                disabled={disabled}
+                onFocus={focusFunction}
+                onBlur={blurFunction}
+            >
+                {iconName && <Icon name={iconName} size="20px" className="m-r-1" />}
+                <BodyText className={classnames(Styles.text, `${qaPrefix}-text`)}>
+                    {children}
+                </BodyText>
+            </button>
+        );
+    };
+
+    if (!tooltip) {
+        return getButton();
+    }
+
+    return (
+        <Tooltip text={tooltip} direction="l" el="div" className={`${qaPrefix}-tooltip`}>
+            {getButton()}
+        </Tooltip>
+    );
+};

package/src/components/ui/action-button/index.tsx

@@ -0,0 +1 @@
+export * from './action-button';

package/src/components/ui/title-popover/index.tsx

@@ -0,0 +1 @@
+export * from './title-popover';

package/src/components/ui/title-popover/title-popover.module.less

@@ -0,0 +1,10 @@
+@import (reference) '@servicetitan/tokens/dist/tokens.less';
+
+.popover {
+    padding: @spacing-0;
+
+    :global(.Popover__content) {
+        padding: @spacing-half @spacing-0;
+        overflow: visible;
+    }
+}

package/src/components/ui/title-popover/title-popover.module.less.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const popover: string;
+

package/src/components/ui/title-popover/title-popover.stories.tsx

@@ -0,0 +1,28 @@
+import { ReactElement, useState } from 'react';
+import { ActionButton } from '../action-button/action-button';
+import { TitlePopover } from './title-popover';
+
+export default {
+    title: 'Marketing UI/ui/TitlePopover',
+    component: TitlePopover,
+    parameters: {},
+};
+
+const w = (style: { width?: string; height?: string }, cb: () => ReactElement) => () =>
+    <div style={style}>{cb()}</div>;
+
+export const titlePopover = w({}, () => <TitlePopover text="Title text">Content</TitlePopover>);
+export const titlePopoverToggle = w({}, () => {
+    const [isActive, setIsActive] = useState(true);
+    const title = isActive ? 'Entities' : 'Archived Entities';
+    return (
+        <TitlePopover text={title}>
+            <ActionButton hover="primary" active={isActive} onClick={() => setIsActive(true)}>
+                Entities
+            </ActionButton>
+            <ActionButton hover="primary" active={!isActive} onClick={() => setIsActive(false)}>
+                Archived Entities
+            </ActionButton>
+        </TitlePopover>
+    );
+});

package/src/components/ui/title-popover/title-popover.tsx

@@ -0,0 +1,86 @@
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { createRef, Component } from 'react';
+import { observable, action, makeObservable } from 'mobx';
+import { Popover, Stack, BodyText, Icon } from '@servicetitan/design-system';
+import * as Styles from './title-popover.module.less';
+
+interface TitlePopoverProps {
+    text?: string;
+}
+
+@observer
+export class TitlePopover extends Component<TitlePopoverProps> {
+    @observable isOpen = false;
+
+    wrapElem = createRef<HTMLDivElement>();
+
+    constructor(props: TitlePopoverProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    @action
+    toggle = () => {
+        this.isOpen = !this.isOpen;
+    };
+
+    @action
+    close = () => {
+        this.isOpen = false;
+    };
+
+    @action
+    handleClick = (event: MouseEvent) => {
+        if (!this.wrapElem.current) {
+            return;
+        }
+
+        const isClickedInside = this.wrapElem.current.contains(event.target as Node);
+
+        if (!isClickedInside) {
+            this.close();
+        }
+    };
+
+    componentDidMount() {
+        window.addEventListener('click', this.handleClick);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('click', this.handleClick);
+    }
+
+    render() {
+        const { text, children } = this.props;
+
+        return (
+            <div ref={this.wrapElem} className="qa-title-popover">
+                <Popover
+                    className={classNames(Styles.popover, 'qa-title-popover')}
+                    width="xs"
+                    open={this.isOpen}
+                    direction="br"
+                    trigger={
+                        <Stack
+                            alignItems="center"
+                            className="qa-title-popover-button cursor-pointer"
+                            onClick={this.toggle}
+                        >
+                            <BodyText size="large" className="qa-title-popover-text">
+                                {text}
+                            </BodyText>
+                            <Icon
+                                name="expand_more"
+                                size={20}
+                                className="m-l-1 qa-title-popover-icon"
+                            />
+                        </Stack>
+                    }
+                >
+                    {children}
+                </Popover>
+            </div>
+        );
+    }
+}

package/src/index.ts

@@ -1,8 +1,10 @@
 export * from './components/stat/stat-card';
 export * from './components/stat/stat-extended-card';
 export * from './components/ads/ads-stat';
+export * from './components/ui/action-button';
 export * from './components/ui/centered-spinner';
 export * from './components/ui/line-text';
+export * from './components/ui/title-popover';
 export * from './components/image-cropper/image-cropper';
 
 export * from './utils/ads-texts';
@@ -11,3 +13,4 @@ export * from './utils/string-case';
 export * from './utils/use-client-rect';
 export * from './utils/helpers';
 export * from './utils/format-big-numbers';
+export * from './utils/use-target-range-store';

package/src/utils/ads-texts.tsx

@@ -29,6 +29,7 @@ export type AdsStatType =
     | 'averageJobValue'
     | 'roi'
     | 'bookingRate'
+    | 'callBookingRate'
     | 'opportunityRate'
     | 'newCustomerLeads'
     | 'newCustomerLeadRate'
@@ -49,7 +50,8 @@ export const adsStatDescriptions: Record<AdsStatType, string> = {
     leads: 'Phone Calls that are longer than 60 seconds and not dismissed, plus online bookings and manual jobs',
     ranJobs:
         'A booking where a truck was dispatched. On the marketing dashboard, we show Ran Jobs that have marketing attribution',
-    ranRate: 'The percentage of leads that turned into Ran Jobs',
+    ranRate:
+        'The percentage of Booked Jobs that turned into Ran Jobs. This is a measure of how many booked jobs are not cancelled or left unfulfilled',
     bookedJobs: 'Leads that were booked/scheduled for a job',
     completedJobs: 'Scheduled jobs that were actually completed',
     soldJobs:
@@ -79,6 +81,7 @@ export const adsStatDescriptions: Record<AdsStatType, string> = {
     averageJobValue: 'The average income generated across all your jobs',
     roi: 'The number of dollars generated from each dollar of marketing spend. For example, and ROI of 5x means that every $1 spent on marketing leads to $5 of revenue',
     bookingRate: 'The percentage of leads that resulted in Booked Job',
+    callBookingRate: 'The percentage of lead calls that resulted in Booked Jobs',
     opportunityRate: 'The percentage of Ran Jobs that resulted in an Opportunity',
     newCustomerLeads:
         'Leads that came from someone not already part of your database, ie. you have never ran a job for them before',

package/src/utils/use-target-range-store.ts

@@ -0,0 +1,17 @@
+import { useLocalStore } from 'mobx-react';
+import { action } from 'mobx';
+
+export type OptionalRange = Range | undefined;
+
+export interface TargetRangeStore {
+    targetRange: OptionalRange;
+    setTargetRange: (range: OptionalRange) => void;
+}
+
+export const useTargetRangeStore = () =>
+    useLocalStore<TargetRangeStore>(() => ({
+        targetRange: undefined,
+        setTargetRange: action(function (this: TargetRangeStore, range: OptionalRange) {
+            this.targetRange = range;
+        }),
+    }));