@servicetitan/mpa-components 2.2.1 → 2.4.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 +24 -0
- package/dist/components/add-merge-tag-dialog/add-merge-tag-dialog.d.ts +11 -0
- package/dist/components/add-merge-tag-dialog/add-merge-tag-dialog.d.ts.map +1 -0
- package/dist/components/add-merge-tag-dialog/add-merge-tag-dialog.js +41 -0
- package/dist/components/add-merge-tag-dialog/add-merge-tag-dialog.js.map +1 -0
- package/dist/components/add-merge-tag-dialog/index.d.ts +3 -0
- package/dist/components/add-merge-tag-dialog/index.d.ts.map +1 -0
- package/dist/components/add-merge-tag-dialog/index.js +3 -0
- package/dist/components/add-merge-tag-dialog/index.js.map +1 -0
- package/dist/components/add-merge-tag-dialog/types.d.ts +10 -0
- package/dist/components/add-merge-tag-dialog/types.d.ts.map +1 -0
- package/dist/components/add-merge-tag-dialog/types.js +2 -0
- package/dist/components/add-merge-tag-dialog/types.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/add-merge-tag-dialog/add-merge-tag-dialog.tsx +150 -0
- package/src/components/add-merge-tag-dialog/index.ts +2 -0
- package/src/components/add-merge-tag-dialog/types.ts +10 -0
- package/src/index.ts +1 -0
- package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v2.4.0 (Tue Dec 16 2025)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- MPA-5588: MPA-5780: add learn more url to merge tags dialog [#111](https://github.com/servicetitan/standalone-fe/pull/111) ([@stadevosyan](https://github.com/stadevosyan))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Sam Tadevosyan ([@stadevosyan](https://github.com/stadevosyan))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v2.3.0 (Tue Dec 02 2025)
|
|
14
|
+
|
|
15
|
+
#### 🚀 Enhancement
|
|
16
|
+
|
|
17
|
+
- [mpa-components]: add merge tag dialog to be used for adding grouped merge tags [#109](https://github.com/servicetitan/standalone-fe/pull/109) ([@stadevosyan](https://github.com/stadevosyan))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Sam Tadevosyan ([@stadevosyan](https://github.com/stadevosyan))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v2.2.1 (Thu Sep 04 2025)
|
|
2
26
|
|
|
3
27
|
#### 🐛 Bug Fix
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import type { Group, IEmailMergeTag } from './types';
|
|
3
|
+
export interface AddMergeTagDialogProps {
|
|
4
|
+
open: boolean;
|
|
5
|
+
onClose: () => void;
|
|
6
|
+
onAdd: (mergeTag: IEmailMergeTag) => void;
|
|
7
|
+
mergeTags: IEmailMergeTag[];
|
|
8
|
+
groups: Group[];
|
|
9
|
+
}
|
|
10
|
+
export declare const AddMergeTagDialog: FC<AddMergeTagDialogProps>;
|
|
11
|
+
//# sourceMappingURL=add-merge-tag-dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"add-merge-tag-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/add-merge-tag-dialog/add-merge-tag-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,WAAW,sBAAsB;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,MAAM,EAAE,KAAK,EAAE,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAuIxD,CAAC"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo, useState } from 'react';
|
|
3
|
+
import { Button, Combobox, Dialog, Flex, Link, Text } from '@servicetitan/anvil2';
|
|
4
|
+
export const AddMergeTagDialog = ({ open, onClose, onAdd, mergeTags, groups, }) => {
|
|
5
|
+
const [selectedGroup, setSelectedGroup] = useState(null);
|
|
6
|
+
const [selectedMergeTag, setSelectedMergeTag] = useState(null);
|
|
7
|
+
const filteredMergeTags = useMemo(() => {
|
|
8
|
+
if (!selectedGroup) {
|
|
9
|
+
return mergeTags;
|
|
10
|
+
}
|
|
11
|
+
return mergeTags.filter(tag => tag.group === selectedGroup.name);
|
|
12
|
+
}, [mergeTags, selectedGroup]);
|
|
13
|
+
const handleGroupChange = (group) => {
|
|
14
|
+
setSelectedGroup(group);
|
|
15
|
+
// If merge tag is selected and group is selected
|
|
16
|
+
if (selectedMergeTag && group) {
|
|
17
|
+
// If selected merge tag doesn't belong to the new group, reset it
|
|
18
|
+
if (selectedMergeTag.group !== group.name) {
|
|
19
|
+
setSelectedMergeTag(null);
|
|
20
|
+
}
|
|
21
|
+
// If it belongs to the group, keep the selection
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
const handleMergeTagChange = (tag) => {
|
|
25
|
+
setSelectedMergeTag(tag);
|
|
26
|
+
};
|
|
27
|
+
const handleAdd = () => {
|
|
28
|
+
if (selectedMergeTag) {
|
|
29
|
+
onAdd(selectedMergeTag);
|
|
30
|
+
onClose();
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
const handleClose = () => {
|
|
34
|
+
// Reset selections when dialog closes
|
|
35
|
+
setSelectedGroup(null);
|
|
36
|
+
setSelectedMergeTag(null);
|
|
37
|
+
onClose();
|
|
38
|
+
};
|
|
39
|
+
return (_jsxs(Dialog, { open: open, onClose: handleClose, size: "large", children: [_jsx(Dialog.Header, { children: "Add Merge Tag" }), _jsx(Dialog.Content, { children: _jsxs(Flex, { direction: "column", gap: "4", grow: "1", children: [_jsxs(Combobox.Select, { items: groups, itemToKey: item => (item ? item.name : null), itemToString: item => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.displayName) !== null && _a !== void 0 ? _a : ''; }, selectedItem: selectedGroup, onChange: handleGroupChange, children: [_jsx(Combobox.SelectTrigger, { label: "Select Field Location", moreInfo: "Choose the field's source (Customer, Location, Job, etc)." }), _jsx(Combobox.Content, { children: ({ items }) => (_jsx(Combobox.List, { children: items.map((item, i) => (_jsx(Combobox.Item, { item: item, index: i, children: item.displayName }, item.name))) })) })] }), _jsxs(Combobox.Select, { items: filteredMergeTags, itemToKey: item => (item ? item.name : null), itemToString: item => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ''; }, selectedItem: selectedMergeTag, onChange: handleMergeTagChange, children: [_jsx(Combobox.SelectTrigger, { label: "Select Merge Tag", moreInfo: "Pick the merge tag to insert. Resolves to its value.", description: _jsx("div", { children: _jsxs(Text, { size: "small", subdued: true, children: [_jsx("b", { children: "Important:" }), " If you've gathered job-related data through custom fields, it will only be linked to the customer's most recent job. Similarly, if you've collected location-related data, we will only display the customer's primary location.", ' ', _jsx(Link, { href: "https://help.servicetitan.com/how-to/add-special-links-and-merge-tags-to-your-marketing-content", target: "_blank", children: "Learn More" })] }) }) }), _jsx(Combobox.Content, { children: ({ items }) => (_jsx(Combobox.List, { children: items.map((item, i) => (_jsx(Combobox.Item, { item: item, index: i, children: item.label }, item.name))) })) })] })] }) }), _jsx(Dialog.Footer, { children: _jsx(Flex, { justifyContent: "flex-end", children: _jsxs(Flex, { gap: "3", children: [_jsx(Dialog.CancelButton, { children: "Cancel" }), _jsx(Button, { appearance: "primary", onClick: handleAdd, disabled: !selectedMergeTag, children: "Add" })] }) }) })] }));
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=add-merge-tag-dialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"add-merge-tag-dialog.js","sourceRoot":"","sources":["../../../src/components/add-merge-tag-dialog/add-merge-tag-dialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/add-merge-tag-dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/add-merge-tag-dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/add-merge-tag-dialog/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,KAAK;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/add-merge-tag-dialog/types.ts"],"names":[],"mappings":""}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export * from './components/settings';
|
|
2
2
|
export * from './components/campaign-actions';
|
|
3
3
|
export * from './components/settings';
|
|
4
|
+
export * from './components/add-merge-tag-dialog';
|
|
4
5
|
export * from './utils/helpers';
|
|
5
6
|
export * from './utils/interfaces';
|
|
6
7
|
export * from './enums/brands';
|
package/dist/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;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,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,uBAAuB,CAAC;AACtC,cAAc,mCAAmC,CAAC;AAClD,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export * from './components/settings';
|
|
2
2
|
export * from './components/campaign-actions';
|
|
3
3
|
export * from './components/settings';
|
|
4
|
+
export * from './components/add-merge-tag-dialog';
|
|
4
5
|
export * from './utils/helpers';
|
|
5
6
|
export * from './utils/interfaces';
|
|
6
7
|
export * from './enums/brands';
|
package/dist/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;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,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,uBAAuB,CAAC;AACtC,cAAc,mCAAmC,CAAC;AAClD,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/mpa-components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"typings": "./dist/index.d.ts",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"cli": {
|
|
35
35
|
"webpack": false
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "72495a9546eafa20922c4b11c605af9a17aa4cff"
|
|
38
38
|
}
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { FC, useMemo, useState } from 'react';
|
|
2
|
+
|
|
3
|
+
import { Button, Combobox, Dialog, Flex, Link, Text } from '@servicetitan/anvil2';
|
|
4
|
+
|
|
5
|
+
import type { Group, IEmailMergeTag } from './types';
|
|
6
|
+
|
|
7
|
+
export interface AddMergeTagDialogProps {
|
|
8
|
+
open: boolean;
|
|
9
|
+
onClose: () => void;
|
|
10
|
+
onAdd: (mergeTag: IEmailMergeTag) => void;
|
|
11
|
+
mergeTags: IEmailMergeTag[];
|
|
12
|
+
groups: Group[];
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export const AddMergeTagDialog: FC<AddMergeTagDialogProps> = ({
|
|
16
|
+
open,
|
|
17
|
+
onClose,
|
|
18
|
+
onAdd,
|
|
19
|
+
mergeTags,
|
|
20
|
+
groups,
|
|
21
|
+
}) => {
|
|
22
|
+
const [selectedGroup, setSelectedGroup] = useState<Group | null>(null);
|
|
23
|
+
const [selectedMergeTag, setSelectedMergeTag] = useState<IEmailMergeTag | null>(null);
|
|
24
|
+
|
|
25
|
+
const filteredMergeTags = useMemo(() => {
|
|
26
|
+
if (!selectedGroup) {
|
|
27
|
+
return mergeTags;
|
|
28
|
+
}
|
|
29
|
+
return mergeTags.filter(tag => tag.group === selectedGroup.name);
|
|
30
|
+
}, [mergeTags, selectedGroup]);
|
|
31
|
+
|
|
32
|
+
const handleGroupChange = (group: Group | null) => {
|
|
33
|
+
setSelectedGroup(group);
|
|
34
|
+
|
|
35
|
+
// If merge tag is selected and group is selected
|
|
36
|
+
if (selectedMergeTag && group) {
|
|
37
|
+
// If selected merge tag doesn't belong to the new group, reset it
|
|
38
|
+
if (selectedMergeTag.group !== group.name) {
|
|
39
|
+
setSelectedMergeTag(null);
|
|
40
|
+
}
|
|
41
|
+
// If it belongs to the group, keep the selection
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
const handleMergeTagChange = (tag: IEmailMergeTag | null) => {
|
|
46
|
+
setSelectedMergeTag(tag);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const handleAdd = () => {
|
|
50
|
+
if (selectedMergeTag) {
|
|
51
|
+
onAdd(selectedMergeTag);
|
|
52
|
+
onClose();
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
const handleClose = () => {
|
|
57
|
+
// Reset selections when dialog closes
|
|
58
|
+
setSelectedGroup(null);
|
|
59
|
+
setSelectedMergeTag(null);
|
|
60
|
+
onClose();
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
return (
|
|
64
|
+
<Dialog open={open} onClose={handleClose} size="large">
|
|
65
|
+
<Dialog.Header>Add Merge Tag</Dialog.Header>
|
|
66
|
+
<Dialog.Content>
|
|
67
|
+
<Flex direction="column" gap="4" grow="1">
|
|
68
|
+
<Combobox.Select
|
|
69
|
+
items={groups}
|
|
70
|
+
itemToKey={item => (item ? item.name : null)}
|
|
71
|
+
itemToString={item => item?.displayName ?? ''}
|
|
72
|
+
selectedItem={selectedGroup}
|
|
73
|
+
onChange={handleGroupChange}
|
|
74
|
+
>
|
|
75
|
+
<Combobox.SelectTrigger
|
|
76
|
+
label="Select Field Location"
|
|
77
|
+
moreInfo="Choose the field's source (Customer, Location, Job, etc)."
|
|
78
|
+
/>
|
|
79
|
+
<Combobox.Content>
|
|
80
|
+
{({ items }) => (
|
|
81
|
+
<Combobox.List>
|
|
82
|
+
{items.map((item, i) => (
|
|
83
|
+
<Combobox.Item key={item.name} item={item} index={i}>
|
|
84
|
+
{item.displayName}
|
|
85
|
+
</Combobox.Item>
|
|
86
|
+
))}
|
|
87
|
+
</Combobox.List>
|
|
88
|
+
)}
|
|
89
|
+
</Combobox.Content>
|
|
90
|
+
</Combobox.Select>
|
|
91
|
+
|
|
92
|
+
<Combobox.Select
|
|
93
|
+
items={filteredMergeTags}
|
|
94
|
+
itemToKey={item => (item ? item.name : null)}
|
|
95
|
+
itemToString={item => item?.label ?? ''}
|
|
96
|
+
selectedItem={selectedMergeTag}
|
|
97
|
+
onChange={handleMergeTagChange}
|
|
98
|
+
>
|
|
99
|
+
<Combobox.SelectTrigger
|
|
100
|
+
label="Select Merge Tag"
|
|
101
|
+
moreInfo="Pick the merge tag to insert. Resolves to its value."
|
|
102
|
+
description={
|
|
103
|
+
<div>
|
|
104
|
+
<Text size="small" subdued>
|
|
105
|
+
<b>Important:</b> If you've gathered job-related data
|
|
106
|
+
through custom fields, it will only be linked to the
|
|
107
|
+
customer's most recent job. Similarly, if you've collected
|
|
108
|
+
location-related data, we will only display the customer's
|
|
109
|
+
primary location.{' '}
|
|
110
|
+
<Link
|
|
111
|
+
href="https://help.servicetitan.com/how-to/add-special-links-and-merge-tags-to-your-marketing-content"
|
|
112
|
+
target="_blank"
|
|
113
|
+
>
|
|
114
|
+
Learn More
|
|
115
|
+
</Link>
|
|
116
|
+
</Text>
|
|
117
|
+
</div>
|
|
118
|
+
}
|
|
119
|
+
/>
|
|
120
|
+
<Combobox.Content>
|
|
121
|
+
{({ items }) => (
|
|
122
|
+
<Combobox.List>
|
|
123
|
+
{items.map((item, i) => (
|
|
124
|
+
<Combobox.Item key={item.name} item={item} index={i}>
|
|
125
|
+
{item.label}
|
|
126
|
+
</Combobox.Item>
|
|
127
|
+
))}
|
|
128
|
+
</Combobox.List>
|
|
129
|
+
)}
|
|
130
|
+
</Combobox.Content>
|
|
131
|
+
</Combobox.Select>
|
|
132
|
+
</Flex>
|
|
133
|
+
</Dialog.Content>
|
|
134
|
+
<Dialog.Footer>
|
|
135
|
+
<Flex justifyContent="flex-end">
|
|
136
|
+
<Flex gap="3">
|
|
137
|
+
<Dialog.CancelButton>Cancel</Dialog.CancelButton>
|
|
138
|
+
<Button
|
|
139
|
+
appearance="primary"
|
|
140
|
+
onClick={handleAdd}
|
|
141
|
+
disabled={!selectedMergeTag}
|
|
142
|
+
>
|
|
143
|
+
Add
|
|
144
|
+
</Button>
|
|
145
|
+
</Flex>
|
|
146
|
+
</Flex>
|
|
147
|
+
</Dialog.Footer>
|
|
148
|
+
</Dialog>
|
|
149
|
+
);
|
|
150
|
+
};
|
package/src/index.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export * from './components/settings';
|
|
2
2
|
export * from './components/campaign-actions';
|
|
3
3
|
export * from './components/settings';
|
|
4
|
+
export * from './components/add-merge-tag-dialog';
|
|
4
5
|
export * from './utils/helpers';
|
|
5
6
|
export * from './utils/interfaces';
|
|
6
7
|
export * from './enums/brands';
|