@servicetitan/mpa-components 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v2.3.0 (Tue Dec 02 2025)
+
+#### 🚀 Enhancement
+
+- [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))
+
+#### Authors: 1
+
+- Sam Tadevosyan ([@stadevosyan](https://github.com/stadevosyan))
+
+---
+
+# v2.2.1 (Thu Sep 04 2025)
+
+#### 🐛 Bug Fix
+
+- [standalone-root]: pick valid locale or fall back to default one [#86](https://github.com/servicetitan/standalone-fe/pull/86) ([@dkhachatryan-st](https://github.com/dkhachatryan-st))
+
+#### Authors: 1
+
+- David Khachatryan ([@dkhachatryan-st](https://github.com/dkhachatryan-st))
+
+---
+
 # Change Log
 
 All notable changes to this project will be documented in this file.

package/dist/components/add-merge-tag-dialog/add-merge-tag-dialog.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import type { Group, IEmailMergeTag } from './types';
+export interface AddMergeTagDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onAdd: (mergeTag: IEmailMergeTag) => void;
+    mergeTags: IEmailMergeTag[];
+    groups: Group[];
+}
+export declare const AddMergeTagDialog: FC<AddMergeTagDialogProps>;
+//# sourceMappingURL=add-merge-tag-dialog.d.ts.map

package/dist/components/add-merge-tag-dialog/add-merge-tag-dialog.d.ts.map

@@ -0,0 +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,CAoIxD,CAAC"}

package/dist/components/add-merge-tag-dialog/add-merge-tag-dialog.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Button, Combobox, Dialog, Flex, Link, Text } from '@servicetitan/anvil2';
+export const AddMergeTagDialog = ({ open, onClose, onAdd, mergeTags, groups, }) => {
+    const [selectedGroup, setSelectedGroup] = useState(null);
+    const [selectedMergeTag, setSelectedMergeTag] = useState(null);
+    const filteredMergeTags = useMemo(() => {
+        if (!selectedGroup) {
+            return mergeTags;
+        }
+        return mergeTags.filter(tag => tag.group === selectedGroup.name);
+    }, [mergeTags, selectedGroup]);
+    const handleGroupChange = (group) => {
+        setSelectedGroup(group);
+        // If merge tag is selected and group is selected
+        if (selectedMergeTag && group) {
+            // If selected merge tag doesn't belong to the new group, reset it
+            if (selectedMergeTag.group !== group.name) {
+                setSelectedMergeTag(null);
+            }
+            // If it belongs to the group, keep the selection
+        }
+    };
+    const handleMergeTagChange = (tag) => {
+        setSelectedMergeTag(tag);
+    };
+    const handleAdd = () => {
+        if (selectedMergeTag) {
+            onAdd(selectedMergeTag);
+            onClose();
+        }
+    };
+    const handleClose = () => {
+        // Reset selections when dialog closes
+        setSelectedGroup(null);
+        setSelectedMergeTag(null);
+        onClose();
+    };
+    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://www.servicetitan.com/", 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" })] }) }) })] }));
+};
+//# sourceMappingURL=add-merge-tag-dialog.js.map

package/dist/components/add-merge-tag-dialog/add-merge-tag-dialog.js.map

@@ -0,0 +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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"}

package/dist/components/add-merge-tag-dialog/index.d.ts

@@ -0,0 +1,3 @@
+export * from './add-merge-tag-dialog';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/add-merge-tag-dialog/index.d.ts.map

@@ -0,0 +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"}

package/dist/components/add-merge-tag-dialog/index.js

@@ -0,0 +1,3 @@
+export * from './add-merge-tag-dialog';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/components/add-merge-tag-dialog/index.js.map

@@ -0,0 +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"}

package/dist/components/add-merge-tag-dialog/types.d.ts

@@ -0,0 +1,10 @@
+export interface IEmailMergeTag {
+    name: string;
+    label: string;
+    group?: string | undefined;
+}
+export interface Group {
+    name?: string | undefined;
+    displayName?: string | undefined;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/add-merge-tag-dialog/types.d.ts.map

@@ -0,0 +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"}

package/dist/components/add-merge-tag-dialog/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/add-merge-tag-dialog/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/add-merge-tag-dialog/types.ts"],"names":[],"mappings":""}

package/{lib → dist}/index.d.ts

@@ -1,6 +1,7 @@
 export * from './components/settings';
 export * from './components/campaign-actions';
 export * from './components/settings';
+export * from './components/add-merge-tag-dialog';
 export * from './utils/helpers';
 export * from './utils/interfaces';
 export * from './enums/brands';

package/dist/index.d.ts.map

@@ -0,0 +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/{lib → dist}/index.js

@@ -1,6 +1,7 @@
 export * from './components/settings';
 export * from './components/campaign-actions';
 export * from './components/settings';
+export * from './components/add-merge-tag-dialog';
 export * from './utils/helpers';
 export * from './utils/interfaces';
 export * from './enums/brands';

package/dist/index.js.map

@@ -0,0 +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

@@ -1,38 +1,38 @@
 {
-    "name": "@servicetitan/mpa-components",
-    "repository": {
-        "url": "https://github.com/servicetitan/marketing"
-    },
-    "version": "2.2.0",
-    "description": "",
-    "main": "./lib/index.js",
-    "typings": "./lib/index.d.ts",
-    "peerDependencies": {
-        "@servicetitan/anvil2": "^1.23.1",
-        "@servicetitan/confirm": "~28.5.1",
-        "@servicetitan/design-system": "~14.5.1",
-        "@servicetitan/form": "~28.5.1",
-        "@servicetitan/form-state": "~28.5.1",
-        "@servicetitan/marketing-services-api": "^3.29.0",
-        "@servicetitan/react-ioc": "~28.4.0",
-        "@servicetitan/tokens": "~12.2.1",
-        "formstate": "2.0.0",
-        "mobx": "6.13.5",
-        "mobx-react": "9.0.2",
-        "moment": "~2.29.1",
-        "react": "~18.3.1",
-        "react-router-dom": "~5.3.0"
-    },
-    "devDependencies": {
-        "@testing-library/react": "^14.0.0",
-        "@types/history": "4.7.9",
-        "@types/react-router-dom": "~5.3.3"
-    },
-    "publishConfig": {
-        "access": "restricted"
-    },
-    "cli": {
-        "webpack": false
-    },
-    "gitHead": "85b07514ffda2ade719c453ddf5a33f13ab09926"
+  "name": "@servicetitan/mpa-components",
+  "version": "2.3.0",
+  "description": "",
+  "main": "./dist/index.js",
+  "typings": "./dist/index.d.ts",
+  "dependencies": {
+    "lodash.chunk": "^4.2.0"
+  },
+  "peerDependencies": {
+    "@servicetitan/anvil2": ">=1.30.0",
+    "@servicetitan/confirm": ">=30.0.0",
+    "@servicetitan/design-system": ">=14.5.0",
+    "@servicetitan/form": ">=30.0.0",
+    "@servicetitan/form-state": ">=30.0.0",
+    "@servicetitan/table": ">=30.0.0",
+    "@servicetitan/tokens": ">=12.9.0",
+    "classnames": ">=2.5.0",
+    "formstate": ">=2.0.0",
+    "mobx": "^6.13.7",
+    "mobx-react": ">=9.0.0",
+    "react": ">=18.0.0",
+    "react-router-dom": ">=5.3.0"
+  },
+  "devDependencies": {
+    "@servicetitan/anvil2": "^1.43.1",
+    "@servicetitan/table": "^32.2.0",
+    "@types/lodash.chunk": "^4.2.9",
+    "@types/react-router-dom": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "cli": {
+    "webpack": false
+  },
+  "gitHead": "e3a1db5dca55e5593c2129be3ec068a417fbbdaf"
 }

package/src/components/add-merge-tag-dialog/add-merge-tag-dialog.tsx

@@ -0,0 +1,147 @@
+import { FC, useMemo, useState } from 'react';
+
+import { Button, Combobox, Dialog, Flex, Link, Text } from '@servicetitan/anvil2';
+
+import type { Group, IEmailMergeTag } from './types';
+
+export interface AddMergeTagDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onAdd: (mergeTag: IEmailMergeTag) => void;
+    mergeTags: IEmailMergeTag[];
+    groups: Group[];
+}
+
+export const AddMergeTagDialog: FC<AddMergeTagDialogProps> = ({
+    open,
+    onClose,
+    onAdd,
+    mergeTags,
+    groups,
+}) => {
+    const [selectedGroup, setSelectedGroup] = useState<Group | null>(null);
+    const [selectedMergeTag, setSelectedMergeTag] = useState<IEmailMergeTag | null>(null);
+
+    const filteredMergeTags = useMemo(() => {
+        if (!selectedGroup) {
+            return mergeTags;
+        }
+        return mergeTags.filter(tag => tag.group === selectedGroup.name);
+    }, [mergeTags, selectedGroup]);
+
+    const handleGroupChange = (group: Group | null) => {
+        setSelectedGroup(group);
+
+        // If merge tag is selected and group is selected
+        if (selectedMergeTag && group) {
+            // If selected merge tag doesn't belong to the new group, reset it
+            if (selectedMergeTag.group !== group.name) {
+                setSelectedMergeTag(null);
+            }
+            // If it belongs to the group, keep the selection
+        }
+    };
+
+    const handleMergeTagChange = (tag: IEmailMergeTag | null) => {
+        setSelectedMergeTag(tag);
+    };
+
+    const handleAdd = () => {
+        if (selectedMergeTag) {
+            onAdd(selectedMergeTag);
+            onClose();
+        }
+    };
+
+    const handleClose = () => {
+        // Reset selections when dialog closes
+        setSelectedGroup(null);
+        setSelectedMergeTag(null);
+        onClose();
+    };
+
+    return (
+        <Dialog open={open} onClose={handleClose} size="large">
+            <Dialog.Header>Add Merge Tag</Dialog.Header>
+            <Dialog.Content>
+                <Flex direction="column" gap="4" grow="1">
+                    <Combobox.Select
+                        items={groups}
+                        itemToKey={item => (item ? item.name : null)}
+                        itemToString={item => item?.displayName ?? ''}
+                        selectedItem={selectedGroup}
+                        onChange={handleGroupChange}
+                    >
+                        <Combobox.SelectTrigger
+                            label="Select Field Location"
+                            moreInfo="Choose the field's source (Customer, Location, Job, etc)."
+                        />
+                        <Combobox.Content>
+                            {({ items }) => (
+                                <Combobox.List>
+                                    {items.map((item, i) => (
+                                        <Combobox.Item key={item.name} item={item} index={i}>
+                                            {item.displayName}
+                                        </Combobox.Item>
+                                    ))}
+                                </Combobox.List>
+                            )}
+                        </Combobox.Content>
+                    </Combobox.Select>
+
+                    <Combobox.Select
+                        items={filteredMergeTags}
+                        itemToKey={item => (item ? item.name : null)}
+                        itemToString={item => item?.label ?? ''}
+                        selectedItem={selectedMergeTag}
+                        onChange={handleMergeTagChange}
+                    >
+                        <Combobox.SelectTrigger
+                            label="Select Merge Tag"
+                            moreInfo="Pick the merge tag to insert. Resolves to its value."
+                            description={
+                                <div>
+                                    <Text size="small" subdued>
+                                        <b>Important:</b> 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.{' '}
+                                        <Link href="https://www.servicetitan.com/" target="_blank">
+                                            Learn More
+                                        </Link>
+                                    </Text>
+                                </div>
+                            }
+                        />
+                        <Combobox.Content>
+                            {({ items }) => (
+                                <Combobox.List>
+                                    {items.map((item, i) => (
+                                        <Combobox.Item key={item.name} item={item} index={i}>
+                                            {item.label}
+                                        </Combobox.Item>
+                                    ))}
+                                </Combobox.List>
+                            )}
+                        </Combobox.Content>
+                    </Combobox.Select>
+                </Flex>
+            </Dialog.Content>
+            <Dialog.Footer>
+                <Flex justifyContent="flex-end">
+                    <Flex gap="3">
+                        <Dialog.CancelButton>Cancel</Dialog.CancelButton>
+                        <Button
+                            appearance="primary"
+                            onClick={handleAdd}
+                            disabled={!selectedMergeTag}
+                        >
+                            Add
+                        </Button>
+                    </Flex>
+                </Flex>
+            </Dialog.Footer>
+        </Dialog>
+    );
+};

package/src/components/add-merge-tag-dialog/index.ts

@@ -0,0 +1,2 @@
+export * from './add-merge-tag-dialog';
+export * from './types';

package/src/components/add-merge-tag-dialog/types.ts

@@ -0,0 +1,10 @@
+export interface IEmailMergeTag {
+    name: string;
+    label: string;
+    group?: string | undefined;
+}
+
+export interface Group {
+    name?: string | undefined;
+    displayName?: string | undefined;
+}

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from './components/settings';
 export * from './components/campaign-actions';
 export * from './components/settings';
+export * from './components/add-merge-tag-dialog';
 export * from './utils/helpers';
 export * from './utils/interfaces';
 export * from './enums/brands';

package/tsconfig.json

@@ -1,11 +1,9 @@
 {
     "extends": "@servicetitan/startup/tsconfig/base",
     "compilerOptions": {
-        "outDir": "lib",
-        "rootDir": "src",
-        "composite": true
+        "outDir": "dist",
+        "rootDir": "src"
     },
     "include": ["src/**/*"],
-    "exclude": ["src/**/__tests__/**/*"],
-    "references": [{ "path": "../utils" }]
+    "exclude": ["src/**/__tests__/**/*"]
 }