@commercetools-frontend/fullstory 1.0.0

package/README.md

@@ -0,0 +1,119 @@
+# @commercetools-frontend/fullstory
+
+> This is a package used internally for Merchant Center applications. We do not provide any guarantees or support for the functionality.
+
+This package provides an easy to use integration with FullStory. The official documentation of FullStory's SDK can be found [here](https://developer.fullstory.com).
+
+## Installation
+
+```bash
+$ npm install --save @commercetools-frontend/fullstory
+```
+
+## Usage
+
+### Initialization
+
+At first you will need to initialize FullStory and its SDK
+
+You need to add this _before_ you render your application's entry point with for instance `ReactDOM.render`:
+
+#### Configuration via a Custom Application configuration
+
+If you are developing a Custom Application for the Merchant Center we recommend you to add a `FULLSTORY_ORGANIZATION_ID` as a value to the environment.
+
+This environment variable should then we exposed via the `additionalEnv` and a `fullstoryOrganizationId` property in your Custom Application's configuration.
+
+```js
+additionalEnv: {
+    fullstoryOrganizationId: '${env:FULLSTORY_ORGANIZATION_ID}',
+},
+```
+
+Given that you can just initialize FullStory like this:
+
+```js
+import { initialize as initializeFullStory } from '@commercetools-frontend/fullstory';
+
+initializeFullStory();
+```
+
+In order for the SDK to be able to connect with FullStory's APIs you have to extend the `headers.csp` property of your Custom Application config to contain the following properties:
+
+```js
+import { CONTENT_SECURITY_POLICIES as FULLSTORY_CONTENT_SECURITY_POLICIES } from '@commercetools-frontend/fullstory/constants';
+
+headers: {
+    csp: {
+        'connect-src': [...FULLSTORY_CONTENT_SECURITY_POLICIES.CONNECT_SRC],
+        'script-src': [...FULLSTORY_CONTENT_SECURITY_POLICIES.SCRIPT_SRC],
+    },
+},
+```
+
+#### Configuration without Custom Application configuration
+
+If you are not building a Custom Application or prefer not to configure FullStory using the Custom Application's configuration you can pass the organization ID of FullStory as an argument like this:
+
+```js
+import { initialize as initializeFullStory } from '@commercetools-frontend/fullstory';
+
+initializeFullStory('myFullStoryOrgId');
+```
+
+Please also make sure that the `connect-src` and `script-src` Content Security Policies allow FullStory to connect with their services. If needed you can use the provided constants from `@commercetools-frontend/fullstory/constants` exported as `CONTENT_SECURITY_POLICIES`.
+
+#### Setting up the tracking effect
+
+As a last step for any case above you have to use the `useTrackingEffect` in the entry point of your application. Make sure that it is rendered below the `ApplicationShell` component as it depends on its React context.
+
+```js
+import { useTrackingEffect as useFullStoryTrackingEffect } from '@commercetools-frontend/fullstory';
+
+function EntryPoint() {
+    useFullStoryTrackingEffect();
+
+    return <>
+        <Application>
+    </>
+}
+```
+
+1. If you intend to send additional user variables you can pass them using the `additionalUserVars` object
+2. If you intend to disable FullStory entirely (e.g. based on a feature flag), use the `disable` flag
+   - Note that you can only disable until you initialized once.
+
+### Custom events
+
+Domain-specific events recorded by FullStory add additional intelligence when you're searching across sessions and creating new user segments. You can define and record these events with FullStory custom events.
+
+```js
+import { sendEvent as sendFullStoryEvent } from '@commercetools-frontend/fullstory';
+
+sendFullStoryEvent('eventName', {});
+```
+
+Custom events should be needed only in very rare cases as any user interaction is tracked by default.
+
+### User variables
+
+FullStory allows to record custom user data which is an object or dictionary containing simple key/value pairs you'd like to record.
+
+```js
+import { setUserVars as setFullStoryUserVars } from '@commercetools-frontend/fullstory';
+
+setFullStoryUserVars({ email: user.email });
+```
+
+It's recommended to be mindful in what you send especially with Personal Identifiable Information.
+
+## FAQ
+
+Question: _I want to disable FullStory on a specific environment_
+Answer: Unset or not set the `FULLSTORY_ORGANIZATION_ID` on that environments dotenv file.
+
+Question: _I want to unmask a specific part of the page_
+Answer: Add an `fs-unmask` class name to the outer most element of the area you intend to unmask.
+
+Question: _A function of the FullStory SDK is not supported here. How can I use it?_
+Answer: It's recommended to add wrapper to this package and release is to any FullStory SDK usage is encapsulated here.

package/constants/dist/commercetools-frontend-fullstory-constants.cjs.d.ts

@@ -0,0 +1 @@
+export * from "../../dist/declarations/src/constants";

package/constants/dist/commercetools-frontend-fullstory-constants.cjs.dev.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var CONTENT_SECURITY_POLICIES = {
+  CONNECT_SRC: ['*.fullstory.com'],
+  SCRIPT_SRC: ['*.fullstory.com']
+};
+
+exports.CONTENT_SECURITY_POLICIES = CONTENT_SECURITY_POLICIES;

package/constants/dist/commercetools-frontend-fullstory-constants.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-frontend-fullstory-constants.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-frontend-fullstory-constants.cjs.dev.js");
+}

package/constants/dist/commercetools-frontend-fullstory-constants.cjs.prod.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var CONTENT_SECURITY_POLICIES = {
+  CONNECT_SRC: ['*.fullstory.com'],
+  SCRIPT_SRC: ['*.fullstory.com']
+};
+
+exports.CONTENT_SECURITY_POLICIES = CONTENT_SECURITY_POLICIES;

package/constants/dist/commercetools-frontend-fullstory-constants.esm.js

@@ -0,0 +1,6 @@
+var CONTENT_SECURITY_POLICIES = {
+  CONNECT_SRC: ['*.fullstory.com'],
+  SCRIPT_SRC: ['*.fullstory.com']
+};
+
+export { CONTENT_SECURITY_POLICIES };

package/constants/package.json

@@ -0,0 +1,4 @@
+{
+    "main": "dist/commercetools-frontend-fullstory-constants.cjs.js",
+    "module": "dist/commercetools-frontend-fullstory-constants.esm.js"
+}

package/dist/commercetools-frontend-fullstory.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./declarations/src/index";

package/dist/commercetools-frontend-fullstory.cjs.dev.js

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var FullStory = require('@fullstory/browser');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var react = require('react');
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var FullStory__namespace = /*#__PURE__*/_interopNamespace(FullStory);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+
+function assertValidFullstoryOrganizationId(fullstoryOrganizationId) {
+  if (typeof fullstoryOrganizationId !== 'string') {
+    throw new Error('A valid FullStory organization id must be a string.');
+  }
+  if (fullstoryOrganizationId.length <= 0) {
+    throw new Error('A FullStory organization id can not be an empty string.');
+  }
+}
+function initialize() {
+  var fullstoryOrganizationId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.app.fullstoryOrganizationId;
+  try {
+    try {
+      assertValidFullstoryOrganizationId(fullstoryOrganizationId);
+    } catch (error) {
+      console.warn('[@commercetools-frontend/fullstory]: No valid `fullstoryOrganizationId` passed. Not initializing FullStory.');
+      return;
+    }
+    FullStory__namespace.init({
+      orgId: fullstoryOrganizationId,
+      devMode: process.env.NODE_ENV !== 'production'
+    });
+  } catch (error) {
+    console.warn('[@commercetools-frontend/fullstory]: Failed to initialize FullStory due to an error:', error);
+  }
+}
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+var defaultTrackingArgs = {
+  disable: false,
+  additionalUserVars: undefined
+};
+function useTrackingEffect() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultTrackingArgs,
+    disable = _ref.disable,
+    additionalUserVars = _ref.additionalUserVars;
+  var _useApplicationContex = applicationShellConnectors.useApplicationContext(function (context) {
+      return {
+        user: context.user,
+        project: context.project,
+        tenant: context.environment.tenant
+      };
+    }),
+    project = _useApplicationContex.project,
+    user = _useApplicationContex.user,
+    tenant = _useApplicationContex.tenant;
+  react.useEffect(function () {
+    // It's not safe to invoke any FullStory SDK methods.
+    if (!FullStory__namespace.isInitialized() || disable) {
+      return;
+    }
+    if (!(user !== null && user !== void 0 && user.id)) {
+      FullStory__namespace.anonymize();
+    } else {
+      FullStory__namespace.identify(user.id, _objectSpread({
+        environment: tenant,
+        projectKey: project === null || project === void 0 ? void 0 : project.key,
+        userBusinessRole: user.businessRole,
+        userLocale: user.locale
+      }, additionalUserVars));
+    }
+  }, [disable, additionalUserVars, tenant, project === null || project === void 0 ? void 0 : project.key, user === null || user === void 0 ? void 0 : user.businessRole, user === null || user === void 0 ? void 0 : user.id, user === null || user === void 0 ? void 0 : user.locale]);
+  return null;
+}
+
+// NOTE: This type is not exported from the @fullstory/browser package.
+
+function sendEvent(eventName, eventProperties) {
+  FullStory__namespace.event(eventName, eventProperties);
+}
+
+function setUserVars(userVars) {
+  FullStory__namespace.setUserVars(userVars);
+}
+
+exports.initialize = initialize;
+exports.sendEvent = sendEvent;
+exports.setUserVars = setUserVars;
+exports.useTrackingEffect = useTrackingEffect;

package/dist/commercetools-frontend-fullstory.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-frontend-fullstory.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-frontend-fullstory.cjs.dev.js");
+}

package/dist/commercetools-frontend-fullstory.cjs.prod.js

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var FullStory = require('@fullstory/browser');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var react = require('react');
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var FullStory__namespace = /*#__PURE__*/_interopNamespace(FullStory);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+
+function assertValidFullstoryOrganizationId(fullstoryOrganizationId) {
+  if (typeof fullstoryOrganizationId !== 'string') {
+    throw new Error('A valid FullStory organization id must be a string.');
+  }
+  if (fullstoryOrganizationId.length <= 0) {
+    throw new Error('A FullStory organization id can not be an empty string.');
+  }
+}
+function initialize() {
+  var fullstoryOrganizationId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.app.fullstoryOrganizationId;
+  try {
+    try {
+      assertValidFullstoryOrganizationId(fullstoryOrganizationId);
+    } catch (error) {
+      console.warn('[@commercetools-frontend/fullstory]: No valid `fullstoryOrganizationId` passed. Not initializing FullStory.');
+      return;
+    }
+    FullStory__namespace.init({
+      orgId: fullstoryOrganizationId,
+      devMode:         "production" !== 'production'
+    });
+  } catch (error) {
+    console.warn('[@commercetools-frontend/fullstory]: Failed to initialize FullStory due to an error:', error);
+  }
+}
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+var defaultTrackingArgs = {
+  disable: false,
+  additionalUserVars: undefined
+};
+function useTrackingEffect() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultTrackingArgs,
+    disable = _ref.disable,
+    additionalUserVars = _ref.additionalUserVars;
+  var _useApplicationContex = applicationShellConnectors.useApplicationContext(function (context) {
+      return {
+        user: context.user,
+        project: context.project,
+        tenant: context.environment.tenant
+      };
+    }),
+    project = _useApplicationContex.project,
+    user = _useApplicationContex.user,
+    tenant = _useApplicationContex.tenant;
+  react.useEffect(function () {
+    // It's not safe to invoke any FullStory SDK methods.
+    if (!FullStory__namespace.isInitialized() || disable) {
+      return;
+    }
+    if (!(user !== null && user !== void 0 && user.id)) {
+      FullStory__namespace.anonymize();
+    } else {
+      FullStory__namespace.identify(user.id, _objectSpread({
+        environment: tenant,
+        projectKey: project === null || project === void 0 ? void 0 : project.key,
+        userBusinessRole: user.businessRole,
+        userLocale: user.locale
+      }, additionalUserVars));
+    }
+  }, [disable, additionalUserVars, tenant, project === null || project === void 0 ? void 0 : project.key, user === null || user === void 0 ? void 0 : user.businessRole, user === null || user === void 0 ? void 0 : user.id, user === null || user === void 0 ? void 0 : user.locale]);
+  return null;
+}
+
+// NOTE: This type is not exported from the @fullstory/browser package.
+
+function sendEvent(eventName, eventProperties) {
+  FullStory__namespace.event(eventName, eventProperties);
+}
+
+function setUserVars(userVars) {
+  FullStory__namespace.setUserVars(userVars);
+}
+
+exports.initialize = initialize;
+exports.sendEvent = sendEvent;
+exports.setUserVars = setUserVars;
+exports.useTrackingEffect = useTrackingEffect;

package/dist/commercetools-frontend-fullstory.esm.js

@@ -0,0 +1,89 @@
+import * as FullStory from '@fullstory/browser';
+import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
+import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import { useEffect } from 'react';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+
+function assertValidFullstoryOrganizationId(fullstoryOrganizationId) {
+  if (typeof fullstoryOrganizationId !== 'string') {
+    throw new Error('A valid FullStory organization id must be a string.');
+  }
+  if (fullstoryOrganizationId.length <= 0) {
+    throw new Error('A FullStory organization id can not be an empty string.');
+  }
+}
+function initialize() {
+  var fullstoryOrganizationId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.app.fullstoryOrganizationId;
+  try {
+    try {
+      assertValidFullstoryOrganizationId(fullstoryOrganizationId);
+    } catch (error) {
+      console.warn('[@commercetools-frontend/fullstory]: No valid `fullstoryOrganizationId` passed. Not initializing FullStory.');
+      return;
+    }
+    FullStory.init({
+      orgId: fullstoryOrganizationId,
+      devMode: process.env.NODE_ENV !== 'production'
+    });
+  } catch (error) {
+    console.warn('[@commercetools-frontend/fullstory]: Failed to initialize FullStory due to an error:', error);
+  }
+}
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var defaultTrackingArgs = {
+  disable: false,
+  additionalUserVars: undefined
+};
+function useTrackingEffect() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultTrackingArgs,
+    disable = _ref.disable,
+    additionalUserVars = _ref.additionalUserVars;
+  var _useApplicationContex = useApplicationContext(function (context) {
+      return {
+        user: context.user,
+        project: context.project,
+        tenant: context.environment.tenant
+      };
+    }),
+    project = _useApplicationContex.project,
+    user = _useApplicationContex.user,
+    tenant = _useApplicationContex.tenant;
+  useEffect(function () {
+    // It's not safe to invoke any FullStory SDK methods.
+    if (!FullStory.isInitialized() || disable) {
+      return;
+    }
+    if (!(user !== null && user !== void 0 && user.id)) {
+      FullStory.anonymize();
+    } else {
+      FullStory.identify(user.id, _objectSpread({
+        environment: tenant,
+        projectKey: project === null || project === void 0 ? void 0 : project.key,
+        userBusinessRole: user.businessRole,
+        userLocale: user.locale
+      }, additionalUserVars));
+    }
+  }, [disable, additionalUserVars, tenant, project === null || project === void 0 ? void 0 : project.key, user === null || user === void 0 ? void 0 : user.businessRole, user === null || user === void 0 ? void 0 : user.id, user === null || user === void 0 ? void 0 : user.locale]);
+  return null;
+}
+
+// NOTE: This type is not exported from the @fullstory/browser package.
+
+function sendEvent(eventName, eventProperties) {
+  FullStory.event(eventName, eventProperties);
+}
+
+function setUserVars(userVars) {
+  FullStory.setUserVars(userVars);
+}
+
+export { initialize, sendEvent, setUserVars, useTrackingEffect };

package/dist/declarations/src/constants.d.ts

@@ -0,0 +1,5 @@
+declare const CONTENT_SECURITY_POLICIES: {
+    readonly CONNECT_SRC: readonly ["*.fullstory.com"];
+    readonly SCRIPT_SRC: readonly ["*.fullstory.com"];
+};
+export { CONTENT_SECURITY_POLICIES };

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,4 @@
+export { initialize } from './initialize';
+export { useTrackingEffect } from './tracking-effect';
+export { sendEvent } from './send-event';
+export { setUserVars } from './set-user-vars';

package/dist/declarations/src/initialize.d.ts

@@ -0,0 +1,7 @@
+declare global {
+    interface Window {
+        app: Record<string, unknown>;
+    }
+}
+declare function initialize(fullstoryOrganizationId?: unknown): void;
+export { initialize };

package/dist/declarations/src/send-event.d.ts

@@ -0,0 +1,3 @@
+type TFullStoryEventProperties = Record<string, unknown>;
+declare function sendEvent(eventName: string, eventProperties: TFullStoryEventProperties): void;
+export { sendEvent };

package/dist/declarations/src/set-user-vars.d.ts

@@ -0,0 +1,3 @@
+import type { UserVars } from '@fullstory/browser';
+declare function setUserVars(userVars: UserVars): void;
+export { setUserVars };

package/dist/declarations/src/tracking-effect.d.ts

@@ -0,0 +1,7 @@
+import type { UserVars } from '@fullstory/browser';
+type TTrackingArgs = {
+    disable?: boolean;
+    additionalUserVars?: UserVars;
+};
+declare function useTrackingEffect({ disable, additionalUserVars, }?: TTrackingArgs): null;
+export { useTrackingEffect };

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@commercetools-frontend/fullstory",
+  "version": "1.0.0",
+  "description": "",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/commercetools-frontend-fullstory.cjs.js",
+  "module": "dist/commercetools-frontend-fullstory.esm.js",
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "files": [
+    "dist",
+    "constants",
+    "package.json",
+    "README.md"
+  ],
+  "preconstruct": {
+    "entrypoints": [
+      "./index.ts",
+      "./constants.ts"
+    ]
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.20.7",
+    "@babel/runtime-corejs3": "^7.20.7",
+    "@fullstory/browser": "1.6.2"
+  },
+  "devDependencies": {
+    "@commercetools-frontend/application-shell": "21.23.6",
+    "@types/node": "18.11.19"
+  },
+  "peerDependencies": {
+    "@commercetools-frontend/application-shell-connectors": "21.x",
+    "react": "17.x"
+  }
+}