@servicetitan/marketing-ui 1.8.0 → 1.12.0

package/src/components/ui/centered-spinner.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 import { CenteredSpinner } from './centered-spinner';
 
 export default {
@@ -7,7 +7,7 @@ export default {
     parameters: {},
 };
 
-const w = (style: { width?: string; height?: string }, cb: () => React.ReactElement) => () =>
+const w = (style: { width?: string; height?: string }, cb: () => ReactElement) => () =>
     <div style={style}>{cb()}</div>;
 
 export const centeredSpinnerTiny = w({}, () => <CenteredSpinner size="tiny" />);

package/src/components/ui/centered-spinner.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import classnames from 'classnames';
 import { BodyText, Stack, Spinner } from '@servicetitan/design-system';
 
@@ -9,11 +9,7 @@ export interface CenteredSpinnerPropsStrict {
     info?: string;
 }
 
-export const CenteredSpinner: React.FC<CenteredSpinnerPropsStrict> = ({
-    size,
-    className,
-    info,
-}) => {
+export const CenteredSpinner: FC<CenteredSpinnerPropsStrict> = ({ size, className, info }) => {
     return (
         <Stack
             justifyContent="center"

package/src/components/ui/date-range-picker/date-range-picker.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { DateRangePicker } from './date-range-picker';
 import { DateRangePickerState, DateRangePickerOptionsTenantAds } from '../../../utils/date';
 
@@ -11,7 +11,7 @@ export default {
 const tz = { UtcOffset: 0 };
 const state = DateRangePickerState.createWithOptions(DateRangePickerOptionsTenantAds.create(tz));
 
-const w = (style: { width?: string; height?: string }, Component: React.FC) => () =>
+const w = (style: { width?: string; height?: string }, Component: FC) => () =>
     (
         <div style={style}>
             <Component />

package/src/components/ui/date-range-picker/date-range-picker.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
 import { BodyText, Form, Stack } from '@servicetitan/design-system';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { Button, ButtonProps, Tooltip } from '@servicetitan/design-system';
 
 interface DisabledButtonProps extends Omit<ButtonProps, 'disabled'> {
@@ -14,7 +14,7 @@ interface DisabledButtonProps extends Omit<ButtonProps, 'disabled'> {
  *   <DisabledButton disabled="This button is disabled">knock knock</Button>
  * )
  */
-export const DisabledButton: React.FC<DisabledButtonProps> = props => {
+export const DisabledButton: FC<DisabledButtonProps> = props => {
     return props.disabled && props.disabled !== true ? (
         <Tooltip text={props.disabled}>
             <Button {...props} disabled />

package/src/components/ui/line-text/line-text-body.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 import { BodyTextLine } from './line-text';
 
 export default {
@@ -7,7 +7,7 @@ export default {
     parameters: {},
 };
 
-const w = (style: { width?: string }, cb: () => React.ReactElement) => () =>
+const w = (style: { width?: string }, cb: () => ReactElement) => () =>
     <div style={style}>{cb()}</div>;
 
 export const bodyTextLineUnlimited = w({}, () => <BodyTextLine>just a simple text</BodyTextLine>);

package/src/components/ui/line-text/line-text-head.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 import { HeadlineLine } from './line-text';
 
 export default {
@@ -7,7 +7,7 @@ export default {
     parameters: {},
 };
 
-const w = (style: { width?: string }, cb: () => React.ReactElement) => () =>
+const w = (style: { width?: string }, cb: () => ReactElement) => () =>
     <div style={style}>{cb()}</div>;
 
 export const headlineLineUnlimited = w({}, () => <HeadlineLine>just a simple text</HeadlineLine>);

package/src/components/ui/line-text/line-text.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo, FC } from 'react';
 import classNames from 'classnames';
 import {
     BodyText,
@@ -30,11 +30,7 @@ export interface BodyTextLineProps extends BodyTextPropsStrict {
     children?: string;
 }
 
-export const BodyTextLine: React.FC<BodyTextLineProps> = ({
-    children,
-    wrapperClassName,
-    ...props
-}) => {
+export const BodyTextLine: FC<BodyTextLineProps> = ({ children, wrapperClassName, ...props }) => {
     const [ref1, ref2, limited] = useLimited();
 
     return (
@@ -79,11 +75,7 @@ export interface HeadlineLineProps extends HeadlinePropsStrict {
     children?: string;
 }
 
-export const HeadlineLine: React.FC<HeadlineLineProps> = ({
-    children,
-    wrapperClassName,
-    ...props
-}) => {
+export const HeadlineLine: FC<HeadlineLineProps> = ({ children, wrapperClassName, ...props }) => {
     const [ref1, ref2, limited] = useLimited();
 
     return (

package/src/index.ts

@@ -10,3 +10,4 @@ export * from './utils/formatters';
 export * from './utils/string-case';
 export * from './utils/use-client-rect';
 export * from './utils/helpers';
+export * from './utils/format-big-numbers';

package/src/utils/__tests__/format-big-numbers.test.ts

@@ -0,0 +1,17 @@
+import { formatBigNumber } from '../format-big-numbers';
+
+test('formatBigNumber', () => {
+    expect(formatBigNumber(12.333333, 0)).toEqual('12');
+    expect(formatBigNumber(12000.333333, 0)).toEqual('12K');
+    expect(formatBigNumber(12000000.333333, 0)).toEqual('12M');
+    expect(formatBigNumber(12.333333, 2)).toEqual(
+        /*
+         * I know it's a bad practice to compare like this
+         * but I don't want to use preset culture that I get from backend side
+         * I want to define culture on the user side
+         */
+        (12.333333).toLocaleString(undefined, {
+            maximumFractionDigits: 2,
+        })
+    );
+});

package/src/utils/__tests__/helpers.test.ts

@@ -0,0 +1,31 @@
+import { findSubstrIndexes } from '../helpers';
+
+describe('[Marketing] helpers', () => {
+    test('findSubstrIndexes works well', () => {
+        expect(findSubstrIndexes('91203 - Glendale, CA', '912')).toEqual([{ start: 0, end: 3 }]);
+        expect(findSubstrIndexes('91203 - Glendale, CA', '912 ')).toEqual([{ start: 0, end: 3 }]);
+        expect(findSubstrIndexes('91203 - Glendale, CA', ' 912 ')).toEqual([{ start: 0, end: 3 }]);
+        expect(findSubstrIndexes('91203 - Glendale, CA', '912 glen')).toEqual([
+            { start: 0, end: 3 },
+            { start: 8, end: 12 },
+        ]);
+        expect(findSubstrIndexes('91203 - Glendale, CA', 'glen 912')).toEqual([
+            { start: 0, end: 3 },
+            { start: 8, end: 12 },
+        ]);
+        expect(findSubstrIndexes('91203 - Glendale, CA', 'glen lend 912')).toEqual([
+            { start: 0, end: 3 },
+            { start: 8, end: 13 },
+        ]);
+        expect(findSubstrIndexes('91203 - Glendale, CA', 'lend glen 912')).toEqual([
+            { start: 0, end: 3 },
+            { start: 8, end: 13 },
+        ]);
+        expect(findSubstrIndexes('91203 - Glendale, CA', 'glen glen 912')).toEqual([
+            { start: 0, end: 3 },
+            { start: 8, end: 12 },
+        ]);
+        expect(findSubstrIndexes('91203 - Glendale, CA', '')).toEqual([]);
+        expect(findSubstrIndexes('91203 - Glendale, CA', 'blabla')).toEqual([]);
+    });
+});

package/src/utils/ads-texts.tsx

@@ -7,6 +7,7 @@ export type AdsStatType =
     | 'closeRate'
     | 'sessions'
     | 'conversions'
+    | 'allConversions'
     | 'transactions'
     | 'bookedJobs'
     | 'ranJobs'
@@ -42,6 +43,8 @@ export const adsStatDescriptions: Record<AdsStatType, string> = {
         "The number of times your website registered a visitor. This can differ from clicks because clicks can include clicks on extensions on the ad that don't lead to the website, like call extensions. Also, some clickers immediately leave the website before the website can register a session",
     conversions:
         'The number of people who took a predesignated action resulting from a marketing campaign. This typically includes Phone Calls, Form Submissions, Appointments Booked, and Live Chats',
+    allConversions:
+        'Every conversion reported by Google Ads, including those that are marked to NOT be included in the Conversions column',
     transactions: 'The number of completed jobs where revenue was generated',
     leads: 'Phone Calls that are longer than 60 seconds and not dismissed, plus online bookings and manual jobs',
     ranJobs:

package/src/utils/format-big-numbers.ts

@@ -0,0 +1,15 @@
+export const formatBigNumber = (num: number, maximumFractionDigits: number) => {
+    let formatedNum = num;
+    const ranks = ['', 'K', 'M'];
+    let rankIndex = 0;
+    while (formatedNum > 10000 && rankIndex < ranks.length - 1) {
+        formatedNum /= 1000;
+        rankIndex++;
+    }
+
+    return (
+        formatedNum.toLocaleString(undefined, {
+            maximumFractionDigits,
+        }) + ranks[rankIndex]
+    );
+};

package/src/utils/helpers.ts

@@ -1 +1,44 @@
 export const keys = <T extends Record<string, any>>(obj: T): (keyof T)[] => Object.keys(obj);
+
+/**
+ * Searches for words (divided by white space) in the string,
+ * i.e `findSubstrIndexes('91203 - Glendale, CA', 'glen 912')`
+ * returns `[
+ *   { start: 0, end: 3 },
+ *   { start: 8, end: 12 },
+ * ]`
+ * @param str - String to search in
+ * @param substr - Searched words, i.e 'hello world'
+ * @returns Array of start and end indexes of the words
+ */
+export const findSubstrIndexes = (str: string, substr: string) => {
+    const searchWords = substr.split(' ');
+    const realSearchWords = searchWords.filter(word => word !== '');
+    const indexes = realSearchWords.map(word => {
+        const index = str.toLowerCase().indexOf(word.toLowerCase());
+        return {
+            start: index,
+            end: index + word.length,
+        };
+    });
+
+    const realIndexes = indexes
+        .filter(index => index.start !== -1)
+        .sort((indexA, indexB) => indexA.start - indexB.start);
+
+    const realRanges = [];
+
+    if (realIndexes.length >= 1) {
+        realRanges.push(realIndexes[0]);
+        for (let i = 1; i < realIndexes.length; i++) {
+            const lastRealRange = realRanges[realRanges.length - 1];
+            if (realIndexes[i].start < lastRealRange.end) {
+                lastRealRange.end = realIndexes[i].end;
+            } else {
+                realRanges.push(realIndexes[i]);
+            }
+        }
+    }
+
+    return realRanges;
+};

package/src/utils/use-client-rect.ts

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 export const useClientRect = (): [
     DOMRect | null,
@@ -41,7 +41,7 @@ export const useClientRect = (): [
         return () => clearTimeout(to);
     });
 
-    const ref = React.useCallback(
+    const ref = useCallback(
         (node: HTMLElement | null) => {
             if (node !== null) {
                 window.addEventListener('resize', handleResize);