@servicetitan/marketing-ui 0.5.0 → 0.8.0

package/dist/utils/history/url-params-handler.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UrlParamsHandler = void 0;
+const param_parsers_1 = require("../param-parsers");
+const helpers_1 = require("../helpers");
+class UrlParamsHandler {
+    constructor(parsers) {
+        Object.defineProperty(this, "parsers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: parsers
+        });
+    }
+    static from(parsers) {
+        return new UrlParamsHandler(parsers);
+    }
+    toString(values) {
+        const params = {};
+        if (!values) {
+            return params;
+        }
+        for (const key of helpers_1.keys(values)) {
+            const parser = this.parsers[key];
+            if (!parser) {
+                continue;
+            }
+            const value = values[key];
+            if (value !== undefined) {
+                params[key] = parser.stringify(value);
+            }
+        }
+        return params;
+    }
+    parse(params) {
+        var _a;
+        const values = {};
+        for (const key of helpers_1.keys(params)) {
+            const parser = (_a = this.parsers) === null || _a === void 0 ? void 0 : _a[key];
+            if (!parser) {
+                continue;
+            }
+            const value = params[key];
+            if (value !== undefined) {
+                values[key] = parser.parse(value);
+            }
+        }
+        return values;
+    }
+}
+exports.UrlParamsHandler = UrlParamsHandler;
+Object.defineProperty(UrlParamsHandler, "parserString", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: param_parsers_1.paramParsers.uri
+});
+Object.defineProperty(UrlParamsHandler, "parserNumber", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: param_parsers_1.paramParsers.number
+});
+//# sourceMappingURL=url-params-handler.js.map

package/dist/utils/history/url-params-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"url-params-handler.js","sourceRoot":"","sources":["../../../src/utils/history/url-params-handler.ts"],"names":[],"mappings":";;;AAAA,oDAAmE;AACnE,wCAAkC;AAUlC,MAAa,gBAAgB;IAIzB,YAAoB,OAAmC;;;;;mBAAnC;;IAAsC,CAAC;IAE3D,MAAM,CAAC,IAAI,CAAI,OAA8B;QACzC,OAAO,IAAI,gBAAgB,CAAI,OAAO,CAAC,CAAC;IAC5C,CAAC;IAED,QAAQ,CAAC,MAAwB;QAC7B,MAAM,MAAM,GAAkC,EAAE,CAAC;QAEjD,IAAI,CAAC,MAAM,EAAE;YACT,OAAO,MAAM,CAAC;SACjB;QAED,KAAK,MAAM,GAAG,IAAI,cAAI,CAAC,MAAM,CAAC,EAAE;YAC5B,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YAEjC,IAAI,CAAC,MAAM,EAAE;gBACT,SAAS;aACZ;YAED,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;YAE1B,IAAI,KAAK,KAAK,SAAS,EAAE;gBACrB,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,SAAS,CAAC,KAAM,CAAC,CAAC;aAC1C;SACJ;QAED,OAAO,MAAM,CAAC;IAClB,CAAC;IAED,KAAK,CAAC,MAA4B;;QAC9B,MAAM,MAAM,GAAoB,EAAE,CAAC;QAEnC,KAAK,MAAM,GAAG,IAAI,cAAI,CAAC,MAAM,CAAC,EAAE;YAC5B,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAG,GAAG,CAAC,CAAC;YAEnC,IAAI,CAAC,MAAM,EAAE;gBACT,SAAS;aACZ;YAED,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;YAE1B,IAAI,KAAK,KAAK,SAAS,EAAE;gBACrB,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;aACrC;SACJ;QAED,OAAO,MAAM,CAAC;IAClB,CAAC;;AApDL,4CAqDC;AApDG;;;;WAA+B,4BAAY,CAAC,GAAG;GAAC;AAChD;;;;WAA+B,4BAAY,CAAC,MAAM;GAAC"}

package/dist/utils/history/use-query-params.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-query-params.d.ts","sourceRoot":"","sources":["../../../src/utils/history/use-query-params.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,GAAG,SAAS,CAAC;IACtE,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;IACxB,aAAa,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACxC,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;IACxC,OAAO,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;IAC3C,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,MAAM,CAAC;IAC1C,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,MAAM,CAAC;CAC7C;AAcD,iBAAS,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,eAAe,CAAC,CAAC,CAAC,CAAC;AAChF,iBAAS,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACjD,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAC/B,eAAe,CAAC,CAAC,CAAC,CAAC;AAoCtB,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"use-query-params.d.ts","sourceRoot":"","sources":["../../../src/utils/history/use-query-params.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAG5D,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,GAAG,SAAS,CAAC;IACtE,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;IACxB,aAAa,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACxC,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;IACxC,OAAO,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;IAC3C,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,MAAM,CAAC;IAC1C,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,MAAM,CAAC;CAC7C;AAcD,iBAAS,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,eAAe,CAAC,CAAC,CAAC,CAAC;AAChF,iBAAS,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACjD,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAC/B,eAAe,CAAC,CAAC,CAAC,CAAC;AAqCtB,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/utils/history/use-query-params.js

@@ -4,6 +4,7 @@ exports.useQueryParams = void 0;
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const history_1 = require("history");
+const invariable_hooks_1 = require("../invariable-hooks");
 const parseParams = (search) => {
     const params = new URLSearchParams(search);
     const out = {};
@@ -14,9 +15,10 @@ const stringifyParams = (params) => new URLSearchParams(params).toString();
 function useQueryParams(handler) {
     const history = react_router_dom_1.useHistory();
     const search = history.location.search || '';
+    const memoHandler = invariable_hooks_1.useInvariableMemo(() => handler);
     return react_1.useMemo(() => {
-        const currentValues = handler ? handler.parse(search) : parseParams(search);
-        const stringify = (params) => handler ? handler.toString(params) : stringifyParams(params);
+        const currentValues = memoHandler ? memoHandler.parse(search) : parseParams(search);
+        const stringify = (params) => memoHandler ? memoHandler.toString(params) : stringifyParams(params);
         const createPathWithParams = (pathName, params) => history_1.createPath({ pathname: pathName, search: stringify(params) });
         const update = (params) => {
             history.replace(createPathWithParams(history.location.pathname, params));
@@ -36,7 +38,7 @@ function useQueryParams(handler) {
                 pathname: history_1.createPath({ pathname: pathName, search: stringify(params) }),
             }),
         };
-    }, [search, handler, history]);
+    }, [search, memoHandler, history]);
 }
 exports.useQueryParams = useQueryParams;
 //# sourceMappingURL=use-query-params.js.map

package/dist/utils/history/use-query-params.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-query-params.js","sourceRoot":"","sources":["../../../src/utils/history/use-query-params.ts"],"names":[],"mappings":";;;AAAA,iCAAgC;AAChC,uDAA8C;AAC9C,qCAAqC;AAarC,MAAM,WAAW,GAAG,CAAI,MAAc,EAAK,EAAE;IACzC,MAAM,MAAM,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,CAAC;IAC3C,MAAM,GAAG,GAAG,EAAE,CAAC;IAEf,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAAE,GAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;IAE5D,OAAO,GAAQ,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAgC,MAAS,EAAU,EAAE,CACzE,IAAI,eAAe,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,CAAC;AAM3C,SAAS,cAAc,CAAI,OAA+B;IACtD,MAAM,OAAO,GAAG,6BAAU,EAAE,CAAC;IAC7B,MAAM,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,MAAM,IAAI,EAAE,CAAC;IAE7C,OAAO,eAAO,CAAC,GAAG,EAAE;QAChB,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,CAAI,MAAM,CAAC,CAAC;QAC/E,MAAM,SAAS,GAAG,CAAC,MAAS,EAAE,EAAE,CAC5B,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAEjE,MAAM,oBAAoB,GAAG,CAAC,QAAgB,EAAE,MAAS,EAAE,EAAE,CACzD,oBAAU,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAElE,MAAM,MAAM,GAAG,CAAC,MAAS,EAAE,EAAE;YACzB,OAAO,CAAC,OAAO,CAAC,oBAAoB,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;QAC7E,CAAC,CAAC;QAEF,OAAO;YACH,MAAM,EAAE,aAAa;YACrB,MAAM;YACN,aAAa,EAAE,CAAC,MAAkB,EAAE,EAAE,CAAC,MAAM,iCAAM,aAAa,GAAK,MAAM,EAAG;YAC9E,IAAI,EAAE,CAAC,QAAgB,EAAE,MAAS,EAAE,EAAE;gBAClC,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;YACzD,CAAC;YACD,OAAO,EAAE,CAAC,QAAgB,EAAE,MAAS,EAAE,EAAE;gBACrC,OAAO,CAAC,OAAO,CAAC,oBAAoB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;YAC5D,CAAC;YACD,IAAI,EAAE,oBAAoB;YAC1B,IAAI,EAAE,CAAC,QAAgB,EAAE,MAAS,EAAE,EAAE,CAClC,OAAO,CAAC,UAAU,CAAC;gBACf,QAAQ,EAAE,oBAAU,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;aAC1E,CAAC;SACT,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;AACnC,CAAC;AAEQ,wCAAc"}
+{"version":3,"file":"use-query-params.js","sourceRoot":"","sources":["../../../src/utils/history/use-query-params.ts"],"names":[],"mappings":";;;AAAA,iCAAgC;AAChC,uDAA8C;AAC9C,qCAAqC;AAErC,0DAAwD;AAYxD,MAAM,WAAW,GAAG,CAAI,MAAc,EAAK,EAAE;IACzC,MAAM,MAAM,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,CAAC;IAC3C,MAAM,GAAG,GAAG,EAAE,CAAC;IAEf,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAAE,GAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;IAE5D,OAAO,GAAQ,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAgC,MAAS,EAAU,EAAE,CACzE,IAAI,eAAe,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,CAAC;AAM3C,SAAS,cAAc,CAAI,OAA+B;IACtD,MAAM,OAAO,GAAG,6BAAU,EAAE,CAAC;IAC7B,MAAM,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,MAAM,IAAI,EAAE,CAAC;IAC7C,MAAM,WAAW,GAAG,oCAAiB,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC;IAErD,OAAO,eAAO,CAAC,GAAG,EAAE;QAChB,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,CAAI,MAAM,CAAC,CAAC;QACvF,MAAM,SAAS,GAAG,CAAC,MAAS,EAAE,EAAE,CAC5B,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAEzE,MAAM,oBAAoB,GAAG,CAAC,QAAgB,EAAE,MAAS,EAAE,EAAE,CACzD,oBAAU,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAElE,MAAM,MAAM,GAAG,CAAC,MAAS,EAAE,EAAE;YACzB,OAAO,CAAC,OAAO,CAAC,oBAAoB,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;QAC7E,CAAC,CAAC;QAEF,OAAO;YACH,MAAM,EAAE,aAAa;YACrB,MAAM;YACN,aAAa,EAAE,CAAC,MAAkB,EAAE,EAAE,CAAC,MAAM,iCAAM,aAAa,GAAK,MAAM,EAAG;YAC9E,IAAI,EAAE,CAAC,QAAgB,EAAE,MAAS,EAAE,EAAE;gBAClC,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;YACzD,CAAC;YACD,OAAO,EAAE,CAAC,QAAgB,EAAE,MAAS,EAAE,EAAE;gBACrC,OAAO,CAAC,OAAO,CAAC,oBAAoB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;YAC5D,CAAC;YACD,IAAI,EAAE,oBAAoB;YAC1B,IAAI,EAAE,CAAC,QAAgB,EAAE,MAAS,EAAE,EAAE,CAClC,OAAO,CAAC,UAAU,CAAC;gBACf,QAAQ,EAAE,oBAAU,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;aAC1E,CAAC;SACT,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;AACvC,CAAC;AAEQ,wCAAc"}

package/dist/utils/history/use-url-params.d.ts

@@ -1,8 +1,8 @@
-import { StringParamParser } from '../param-parsers';
-declare type ParsersFromValues<Values extends Record<string, any | undefined>> = {
-    [Prop in keyof Values]: StringParamParser<Values[Prop]>;
+import { UrlParamsHandler } from './url-params-handler';
+declare type StringParams<T extends Record<string, any>> = {
+    [Prop in keyof T]: string | undefined;
 };
-declare function useUrlParams<T extends Record<string, string>>(): Partial<T>;
-declare function useUrlParams<T extends Record<string, any>>(parsers: ParsersFromValues<T>): Partial<T>;
+declare function useUrlParams<T extends Record<string, string>>(): StringParams<T>;
+declare function useUrlParams<T extends Record<string, any>>(parsers: UrlParamsHandler<T>): Partial<T>;
 export { useUrlParams };
 //# sourceMappingURL=use-url-params.d.ts.map

package/dist/utils/history/use-url-params.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-url-params.d.ts","sourceRoot":"","sources":["../../../src/utils/history/use-url-params.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAOrD,aAAK,iBAAiB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,GAAG,SAAS,CAAC,IAAI;KACpE,IAAI,IAAI,MAAM,MAAM,GAAG,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;CAC1D,CAAC;AAEF,iBAAS,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;AACtE,iBAAS,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;AA6BhG,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"use-url-params.d.ts","sourceRoot":"","sources":["../../../src/utils/history/use-url-params.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGxD,aAAK,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;KAC9C,IAAI,IAAI,MAAM,CAAC,GAAG,MAAM,GAAG,SAAS;CACxC,CAAC;AAEF,iBAAS,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,CAAC;AAC3E,iBAAS,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;AAQ/F,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/utils/history/use-url-params.js

@@ -3,26 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useUrlParams = void 0;
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
-const helpers_1 = require("../helpers");
-function useUrlParams(parsers) {
+const invariable_hooks_1 = require("../invariable-hooks");
+function useUrlParams(handler) {
     const params = react_router_dom_1.useParams();
-    return react_1.useMemo(() => {
-        if (!parsers) {
-            return params;
-        }
-        const values = {};
-        for (const key of helpers_1.keys(params)) {
-            const parser = parsers[key];
-            if (!parser) {
-                continue;
-            }
-            const value = params[key];
-            if (value !== undefined) {
-                values[key] = parser.parse(value);
-            }
-        }
-        return values;
-    }, [parsers, params]);
+    const memoHandler = invariable_hooks_1.useInvariableMemo(() => handler);
+    return react_1.useMemo(() => (memoHandler ? memoHandler.parse(params) : params), [params, memoHandler]);
 }
 exports.useUrlParams = useUrlParams;
 //# sourceMappingURL=use-url-params.js.map

package/dist/utils/history/use-url-params.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-url-params.js","sourceRoot":"","sources":["../../../src/utils/history/use-url-params.ts"],"names":[],"mappings":";;;AAAA,iCAAgC;AAChC,uDAA6C;AAE7C,wCAAkC;AAYlC,SAAS,YAAY,CAAI,OAA8B;IACnD,MAAM,MAAM,GAAG,4BAAS,EAAmB,CAAC;IAE5C,OAAO,eAAO,CAAC,GAAG,EAAE;QAChB,IAAI,CAAC,OAAO,EAAE;YACV,OAAO,MAA+B,CAAC;SAC1C;QAED,MAAM,MAAM,GAAe,EAAE,CAAC;QAE9B,KAAK,MAAM,GAAG,IAAI,cAAI,CAAC,MAAM,CAAC,EAAE;YAC5B,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;YAE5B,IAAI,CAAC,MAAM,EAAE;gBACT,SAAS;aACZ;YAED,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;YAE1B,IAAI,KAAK,KAAK,SAAS,EAAE;gBACrB,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;aACrC;SACJ;QAED,OAAO,MAAM,CAAC;IAClB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;AAC1B,CAAC;AAEQ,oCAAY"}
+{"version":3,"file":"use-url-params.js","sourceRoot":"","sources":["../../../src/utils/history/use-url-params.ts"],"names":[],"mappings":";;;AAAA,iCAAgC;AAChC,uDAA6C;AAE7C,0DAAwD;AAQxD,SAAS,YAAY,CAAI,OAA6B;IAClD,MAAM,MAAM,GAAG,4BAAS,EAAmB,CAAC;IAC5C,MAAM,WAAW,GAAG,oCAAiB,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC;IAErD,OAAO,eAAO,CAAC,GAAG,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;AACpG,CAAC;AAEQ,oCAAY"}

package/dist/utils/{use-init-effect.d.ts → invariable-hooks.d.ts}

@@ -4,4 +4,9 @@
  * @param dispose method called after component unmount
  */
 export declare function useInitEffect(init: () => void, dispose?: () => void): void;
-//# sourceMappingURL=use-init-effect.d.ts.map
+/**
+ * gets memo only once
+ * @param memo method that returns memoed data
+ */
+export declare function useInvariableMemo<T>(memo: () => T): T;
+//# sourceMappingURL=invariable-hooks.d.ts.map

package/dist/utils/invariable-hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"invariable-hooks.d.ts","sourceRoot":"","sources":["../../src/utils/invariable-hooks.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,IAAI,EAAE,OAAO,CAAC,EAAE,MAAM,IAAI,QAOnE;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,CAGrD"}

package/dist/utils/{use-init-effect.js → invariable-hooks.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInitEffect = void 0;
+exports.useInvariableMemo = exports.useInitEffect = void 0;
 const react_1 = require("react");
 /**
  * runs effect only once for component
@@ -15,4 +15,13 @@ function useInitEffect(init, dispose) {
     }, []);
 }
 exports.useInitEffect = useInitEffect;
-//# sourceMappingURL=use-init-effect.js.map
+/**
+ * gets memo only once
+ * @param memo method that returns memoed data
+ */
+function useInvariableMemo(memo) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return react_1.useMemo(memo, []);
+}
+exports.useInvariableMemo = useInvariableMemo;
+//# sourceMappingURL=invariable-hooks.js.map

package/dist/utils/invariable-hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"invariable-hooks.js","sourceRoot":"","sources":["../../src/utils/invariable-hooks.ts"],"names":[],"mappings":";;;AAAA,iCAA2C;AAE3C;;;;GAIG;AACH,SAAgB,aAAa,CAAC,IAAgB,EAAE,OAAoB;IAChE,iBAAS,CAAC,GAAG,EAAE;QACX,IAAI,EAAE,CAAC;QAEP,OAAO,OAAO,CAAC;QACf,uDAAuD;IAC3D,CAAC,EAAE,EAAE,CAAC,CAAC;AACX,CAAC;AAPD,sCAOC;AAED;;;GAGG;AACH,SAAgB,iBAAiB,CAAI,IAAa;IAC9C,uDAAuD;IACvD,OAAO,eAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAC7B,CAAC;AAHD,8CAGC"}

package/dist/utils/param-parsers.d.ts

@@ -4,7 +4,8 @@ export interface StringParamParser<T> {
 }
 export declare const paramParsers: {
     string: StringParamParser<string>;
-    stringEnum: <T extends string>(values: T[]) => StringParamParser<T>;
+    stringSet: <T extends string>(values: (string | T)[]) => StringParamParser<T>;
+    stringEnum: <TS extends string, TV>(map: Record<TS, TV>) => StringParamParser<TV>;
     uri: StringParamParser<string>;
     number: StringParamParser<number>;
     date: StringParamParser<Date>;

package/dist/utils/param-parsers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"param-parsers.d.ts","sourceRoot":"","sources":["../../src/utils/param-parsers.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAChC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS,CAAC;CACvC;AAmED,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAC"}
+{"version":3,"file":"param-parsers.d.ts","sourceRoot":"","sources":["../../src/utils/param-parsers.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAChC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS,CAAC;CACvC;AAyFD,eAAO,MAAM,YAAY;;;;;;;;CAQxB,CAAC"}

package/dist/utils/param-parsers.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.paramParsers = void 0;
+const helpers_1 = require("./helpers");
 const stringParser = {
     stringify(value) {
         return value || undefined;
@@ -9,7 +10,7 @@ const stringParser = {
         return query || undefined;
     },
 };
-const stringEnumParser = (values) => ({
+const stringSetParser = (values) => ({
     stringify(value) {
         return value || undefined;
     },
@@ -20,6 +21,24 @@ const stringEnumParser = (values) => ({
         return undefined;
     },
 });
+const stringEnumParser = (map) => ({
+    stringify(value) {
+        for (const key of helpers_1.keys(map)) {
+            if (map[key] === value) {
+                return key;
+            }
+        }
+        return undefined;
+    },
+    parse(query) {
+        const key = query;
+        // eslint-disable-next-line no-prototype-builtins
+        if (map.hasOwnProperty(key)) {
+            return map[key];
+        }
+        return undefined;
+    },
+});
 const uriParser = {
     stringify(value) {
         return value || undefined;
@@ -59,6 +78,7 @@ const boolParser = {
 };
 exports.paramParsers = {
     string: stringParser,
+    stringSet: stringSetParser,
     stringEnum: stringEnumParser,
     uri: uriParser,
     number: numberParser,

package/dist/utils/param-parsers.js.map

@@ -1 +1 @@
-{"version":3,"file":"param-parsers.js","sourceRoot":"","sources":["../../src/utils/param-parsers.ts"],"names":[],"mappings":";;;AAKA,MAAM,YAAY,GAA8B;IAC5C,SAAS,CAAC,KAAK;QACX,OAAO,KAAK,IAAI,SAAS,CAAC;IAC9B,CAAC;IACD,KAAK,CAAC,KAAK;QACP,OAAO,KAAK,IAAI,SAAS,CAAC;IAC9B,CAAC;CACJ,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAmB,MAAW,EAAwB,EAAE,CAAC,CAAC;IAC/E,SAAS,CAAC,KAAK;QACX,OAAO,KAAK,IAAI,SAAS,CAAC;IAC9B,CAAC;IACD,KAAK,CAAC,KAAK;QACP,IAAI,KAAK,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAU,CAAC,EAAE;YACtC,OAAO,KAAU,CAAC;SACrB;QAED,OAAO,SAAS,CAAC;IACrB,CAAC;CACJ,CAAC,CAAC;AAEH,MAAM,SAAS,GAA8B;IACzC,SAAS,CAAC,KAAK;QACX,OAAO,KAAK,IAAI,SAAS,CAAC;IAC9B,CAAC;IACD,KAAK,CAAC,KAAK;QACP,OAAO,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACzD,CAAC;CACJ,CAAC;AAEF,MAAM,YAAY,GAA8B;IAC5C,SAAS,CAAC,KAAK;QACX,OAAO,GAAG,CAAC,KAAK,EAAE,CAAC;IACvB,CAAC;IACD,KAAK,CAAC,KAAK;QACP,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC;QAEnB,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC;IACxC,CAAC;CACJ,CAAC;AAEF,MAAM,UAAU,GAA4B;IACxC,SAAS,CAAC,KAAK;QACX,OAAO,GAAG,KAAK,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,KAAK;aACvF,OAAO,EAAE;aACT,QAAQ,EAAE;aACV,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;IAC5B,CAAC;IACD,KAAK,CAAC,KAAK;QACP,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC,CAAC;QAE1C,OAAO,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3C,CAAC;CACJ,CAAC;AAEF,MAAM,UAAU,GAA+B;IAC3C,SAAS,CAAC,KAAK;QACX,OAAO,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IACnC,CAAC;IACD,KAAK,CAAC,KAAK;QACP,OAAO,KAAK,KAAK,GAAG,CAAC;IACzB,CAAC;CACJ,CAAC;AAEW,QAAA,YAAY,GAAG;IACxB,MAAM,EAAE,YAAY;IACpB,UAAU,EAAE,gBAAgB;IAC5B,GAAG,EAAE,SAAS;IACd,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,UAAU;CACnB,CAAC"}
+{"version":3,"file":"param-parsers.js","sourceRoot":"","sources":["../../src/utils/param-parsers.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/marketing-ui",
-    "version": "0.5.0",
+    "version": "0.8.0",
     "description": "Marketing UI component and utils",
     "repository": {
         "type": "git",
@@ -14,7 +14,8 @@
         "src"
     ],
     "dependencies": {
-        "classnames": "~2.3.1"
+        "classnames": "~2.3.1",
+        "react-image-crop": "8.6.5"
     },
     "peerDependencies": {
         "@servicetitan/design-system": "~10.1.1",
@@ -36,6 +37,7 @@
         "@types/accounting": "~0.4.2",
         "@types/history": "~4.7.7",
         "@types/react": "~17.0.15",
+        "@types/react-image-crop": "8.1.2",
         "@types/react-router-dom": "^5.1.8",
         "accounting": "~0.4.1",
         "history": "~4.10.1",
@@ -52,5 +54,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "5c2bbde042f6f4f71ed1f2558ac813bbfc0ac854"
+    "gitHead": "67ee035810f83c8ee85519f18ee746a7417f1c6d"
 }

package/src/components/image-cropper/image-cropper.stories.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { ImageCropper } from './image-cropper';
+
+export default {
+    title: 'Marketing UI/ImageCropper/ImageCropper',
+    component: ImageCropper,
+    parameters: {},
+};
+
+const BasicExample: React.FC = () => {
+    const [imageToEdit, setImageToEdit] = React.useState<File>();
+    const [croppedImage, setCroppedImage] = React.useState<string>();
+
+    const imageCropper = React.useRef<ImageCropper>(null);
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) {
+            return;
+        }
+
+        setImageToEdit(file);
+    };
+
+    const handleSave = async () => {
+        if (!imageToEdit) {
+            return;
+        }
+        const file = await imageCropper.current?.getCroppedImg(imageToEdit.type, imageToEdit.name);
+        if (!file) {
+            return;
+        }
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+            setCroppedImage(reader.result as string);
+        };
+    };
+
+    return (
+        <React.Fragment>
+            <input type="file" accept="image/png, image/jpeg" onChange={handleFileChange} />
+            {imageToEdit && (
+                <div style={{ marginTop: 30 }}>
+                    <button onClick={handleSave}>Save cropped image</button>
+                    <div style={{ marginTop: 30 }}>
+                        <ImageCropper
+                            file={imageToEdit}
+                            ref={imageCropper}
+                            crop={{ width: 300, height: 300 }}
+                        />
+                    </div>
+                </div>
+            )}
+            {croppedImage && (
+                <div style={{ marginTop: 30 }}>
+                    <a href={croppedImage} download={imageToEdit?.name}>
+                        Download
+                    </a>
+                    <div style={{ marginTop: 30 }}>
+                        <img src={croppedImage} />
+                    </div>
+                </div>
+            )}
+        </React.Fragment>
+    );
+};
+
+export const basic = () => <BasicExample />;

package/src/components/image-cropper/image-cropper.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { observable, action, makeObservable } from 'mobx';
+import { observer } from 'mobx-react';
+import ReactCrop, { Crop } from 'react-image-crop';
+import 'react-image-crop/dist/ReactCrop.css';
+
+interface ImageCropperProps {
+    file: File;
+    crop: {
+        width: number;
+        height: number;
+    };
+}
+
+@observer
+export class ImageCropper extends React.Component<ImageCropperProps> {
+    @observable private src?: string;
+    @observable private crop?: Crop;
+    @observable private image?: HTMLImageElement;
+
+    constructor(props: ImageCropperProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    getCroppedImg = (type: string, fileName: string) =>
+        new Promise<File | undefined>(resolve => {
+            if (!this.image || !this.crop) {
+                resolve(undefined);
+                return;
+            }
+
+            const { x, y } = this.crop;
+            if (x == null || y == null) {
+                resolve(undefined);
+                return;
+            }
+
+            const { width, height } = this.props.crop;
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                resolve(undefined);
+                return;
+            }
+
+            ctx.drawImage(
+                this.image,
+                x * (this.image.naturalWidth / this.image.width),
+                y * (this.image.naturalHeight / this.image.height),
+                width,
+                height,
+                0,
+                0,
+                width,
+                height
+            );
+
+            canvas.toBlob(
+                blob => {
+                    const result = blob ? new File([blob], fileName) : undefined;
+                    resolve(result);
+                },
+                type,
+                1
+            );
+        });
+
+    @action
+    componentDidMount = () => (this.src = URL.createObjectURL(this.props.file));
+
+    componentWillUnmount = () => {
+        if (this.src) {
+            URL.revokeObjectURL(this.src);
+        }
+    };
+
+    render() {
+        return this.src ? (
+            <ReactCrop
+                locked
+                src={this.src}
+                crop={this.crop}
+                onChange={this.handleChange}
+                onImageLoaded={this.handleImageLoaded}
+            />
+        ) : null;
+    }
+
+    @action
+    private handleChange = (crop: Crop) => (this.crop = crop);
+
+    @action
+    private handleImageLoaded = (image: HTMLImageElement) => {
+        this.image = image;
+        this.crop = {
+            unit: 'px',
+            x: 0,
+            y: 0,
+            width: this.props.crop.width * (image.width / image.naturalWidth),
+            height: this.props.crop.height * (image.height / image.naturalHeight),
+        };
+
+        return false;
+    };
+}

package/src/components/ui/date-range-picker/date-range-picker.module.less

@@ -0,0 +1,42 @@
+@import (reference) '~@servicetitan/tokens/dist/tokens';
+
+/*
+ *  Custom value text is not supported for DateRangePicker now (will be implemented in DS-699)
+ *  so temporary adding custom value manually
+ */
+.picker-container {
+    width: 260px;
+
+    :global {
+        .FormField {
+            position: relative;
+        }
+
+        .FormField__label {
+            margin: 0;
+        }
+
+        .DateRangeTrigger__shortLabel {
+            background: @color-white;
+            color: @color-neutral-90;
+            border-right: 0;
+        }
+
+        .Trigger__value {
+            display: none;
+        }
+
+        .Label__required {
+            display: none;
+        }
+    }
+
+    .picker-value {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 40px;
+        z-index: 1;
+        max-width: 190px;
+    }
+}

package/src/components/ui/date-range-picker/date-range-picker.module.less.d.ts

@@ -0,0 +1,4 @@
+export const __esModule: true;
+export const pickerContainer: string;
+export const pickerValue: string;
+

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { DateRangePicker } from './date-range-picker';
+import { DateRangePickerState, DateRangePickerOptionsTenantAds } from '../../../utils/date';
+
+export default {
+    title: 'Marketing UI/ui/date-range-picker/DateRangePicker',
+    component: DateRangePicker,
+    parameters: {},
+};
+
+const tz = { UtcOffset: 0 };
+const state = DateRangePickerState.createWithOptions(DateRangePickerOptionsTenantAds.create(tz));
+
+const w = (style: { width?: string; height?: string }, Component: React.FC) => () =>
+    (
+        <div style={style}>
+            <Component />
+        </div>
+    );
+
+export const dateRangePicker = w({}, () => <DateRangePicker state={state} />);
+export const dateRangePickerCompare = w({}, () => <DateRangePicker state={state} compare />);