@commercetools-frontend/fullstory 0.0.0-FEC-212-react19-20250122084835

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,167 @@
+# @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.
+
+### Masking
+
+FullStory has a built-in way to [mask, unmask or exclude](https://help.fullstory.com/hc/en-us/articles/360020623574-How-do-I-protect-my-users-privacy-in-FullStory-) certain elements on a page. As FullStory should be used with the [Private By Default](https://help.fullstory.com/hc/en-us/articles/360044349073) settings, unmasking may be considered and carefully implemented when needed.
+
+If an unmasking request occurs and has been deemed necessary and can not be accomplished via the "app-first" approach within FullStory's settings only then a "code-first" approach should be taken. The "code-first" approach can be implemented using one of three masking components from this package.
+
+```jsx
+import { Masking as FullStoryMasking } from '@commercetools-frontend/fullstory';
+
+// Assuming some component three exists you can use one of:
+
+<>
+  <FullStoryMasking.Unmask>{props.children}</FullStoryMasking.Unmask>
+  <FullStoryMasking.Mask>{props.children}</FullStoryMasking.Mask>
+  <FullStoryMasking.Exclude>{props.children}</FullStoryMasking.Exclude>
+</>;
+```
+
+Each of the components above accepts an `as` `prop` which can be either `span` or `div` depending on your layout needs.
+
+### Marking
+
+FullStory allows definitions of CSS and other Elements that represent key pieces of data you use regularly. When defining these key pieces you will have to write stable CSS selectors to those elements. These selectors should be resilient to changes in the layout of any Merchant Center application.
+
+One way to achieve this is to mark elements directly or contextualize them in a `section` element. The `Marking` API of this package helps with this.
+
+To wrap an entire section of an application you can use `FullStory.Marking.Section`:
+
+```jsx
+import { Marking as FullStoryMarking } from '@commercetools-frontend/fullstory';
+
+<FullStoryMarking.Section name="Discount Rules">
+  <PartOfApplication />
+</FullStoryMarking.Section>;
+```
+
+You can also pass additional props to the `FullStoryMarking.Section` component, such as a `className`. These will be forwarded to the underlying `section` HTML element.
+
+Please do not wrap individual elements. If you need to mark individual elements such as a unlabelled input you can use `applyMarker`:
+
+```jsx
+import { Marking as FullStoryMarking } from '@commercetools-frontend/fullstory';
+
+<input {...FullStoryMarking.applyMarker('Discount Rule')} />;
+```
+
+Both cases will add a `data-tracking="Discount Rule"` to either the `input` or `section` element. You can then use these elements to target the element as in `input[data-tracking="Discount Rule"]` or `section[data-tracking="Discount Rules"] button[label="some label"]`.
+
+## 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,2 @@
+export * from "../../dist/declarations/src/constants.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tbWVyY2V0b29scy1mcm9udGVuZC1mdWxsc3RvcnktY29uc3RhbnRzLmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vZGlzdC9kZWNsYXJhdGlvbnMvc3JjL2NvbnN0YW50cy5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=

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

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const 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 });
+
+const 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 @@
+const 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,2 @@
+export * from "./declarations/src/index.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tbWVyY2V0b29scy1mcm9udGVuZC1mdWxsc3RvcnkuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

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

@@ -0,0 +1,190 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var browser = 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');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+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() {
+  let 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;
+    }
+    browser.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$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const defaultTrackingArgs = {
+  disable: false,
+  additionalUserVars: undefined
+};
+function useTrackingEffect() {
+  let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultTrackingArgs,
+    disable = _ref.disable,
+    additionalUserVars = _ref.additionalUserVars;
+  const _useApplicationContex = applicationShellConnectors.useApplicationContext(context => ({
+      user: context.user,
+      project: context.project,
+      cloudEnvironment: context.environment.cloudEnvironment,
+      organizationId: context.project?.ownerId,
+      isProductionProject: context.project?.isProductionProject
+    })),
+    project = _useApplicationContex.project,
+    user = _useApplicationContex.user,
+    cloudEnvironment = _useApplicationContex.cloudEnvironment,
+    organizationId = _useApplicationContex.organizationId,
+    isProductionProject = _useApplicationContex.isProductionProject;
+  react.useEffect(() => {
+    function getUserRole() {
+      switch (project?.isUserAdminOfCurrentProject) {
+        case true:
+          return 'admin';
+        case false:
+          return 'regular';
+        default:
+          return 'unknown';
+      }
+    }
+
+    // It's not safe to invoke any FullStory SDK methods.
+    if (!browser.isInitialized() || disable) {
+      return;
+    }
+    if (!user?.id) {
+      browser.FullStory('setIdentity', {
+        anonymous: true
+      });
+    } else {
+      browser.FullStory('setIdentity', {
+        uid: user.id,
+        properties: _objectSpread$1({
+          environment: cloudEnvironment,
+          projectKey: project?.key,
+          isProductionProject,
+          organizationId,
+          userBusinessRole: user.businessRole,
+          userLocale: user.locale,
+          userRole: getUserRole()
+        }, additionalUserVars)
+      });
+    }
+  }, [disable, additionalUserVars, cloudEnvironment, project?.key, user?.businessRole, user?.id, user?.locale, isProductionProject, organizationId, project?.isUserAdminOfCurrentProject]);
+  return null;
+}
+
+// NOTE: This type is not exported from the @fullstory/browser package.
+
+function sendEvent(eventName, eventProperties) {
+  // Don't send events if FullStory is not initialized.
+  if (!browser.isInitialized()) {
+    return;
+  }
+  browser.FullStory('trackEvent', {
+    name: eventName,
+    properties: eventProperties
+  });
+}
+
+function setUserVars(userVars) {
+  browser.FullStory('setProperties', {
+    type: 'user',
+    properties: userVars
+  });
+}
+
+function Exclude(props) {
+  const ExcludeElement = props.as || 'div';
+  return jsxRuntime.jsx(ExcludeElement, {
+    className: "fs-exclude",
+    children: props.children
+  });
+}
+function Unmask(props) {
+  const UnmaskElement = props.as || 'div';
+  return jsxRuntime.jsx(UnmaskElement, {
+    className: "fs-unmask",
+    children: props.children
+  });
+}
+function Mask(props) {
+  const MaskElement = props.as || 'div';
+  return jsxRuntime.jsx(MaskElement, {
+    className: "fs-mask",
+    children: props.children
+  });
+}
+const Masking = {
+  Unmask,
+  Mask,
+  Exclude
+};
+
+const _excluded = ["children", "name"];
+function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function applyMarker(name) {
+  return {
+    'data-tracking': name
+  };
+}
+function Section(_ref) {
+  let children = _ref.children,
+    name = _ref.name,
+    additionalProps = _objectWithoutProperties(_ref, _excluded);
+  return jsxRuntime.jsx("section", _objectSpread(_objectSpread(_objectSpread({}, additionalProps), applyMarker(name)), {}, {
+    children: children
+  }));
+}
+const Marking = {
+  Section,
+  applyMarker
+};
+
+exports.Marking = Marking;
+exports.Masking = Masking;
+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,190 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var browser = 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');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+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() {
+  let 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;
+    }
+    browser.init({
+      orgId: fullstoryOrganizationId,
+      devMode:         "production" !== 'production'
+    });
+  } catch (error) {
+    console.warn('[@commercetools-frontend/fullstory]: Failed to initialize FullStory due to an error:', error);
+  }
+}
+
+function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const defaultTrackingArgs = {
+  disable: false,
+  additionalUserVars: undefined
+};
+function useTrackingEffect() {
+  let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultTrackingArgs,
+    disable = _ref.disable,
+    additionalUserVars = _ref.additionalUserVars;
+  const _useApplicationContex = applicationShellConnectors.useApplicationContext(context => ({
+      user: context.user,
+      project: context.project,
+      cloudEnvironment: context.environment.cloudEnvironment,
+      organizationId: context.project?.ownerId,
+      isProductionProject: context.project?.isProductionProject
+    })),
+    project = _useApplicationContex.project,
+    user = _useApplicationContex.user,
+    cloudEnvironment = _useApplicationContex.cloudEnvironment,
+    organizationId = _useApplicationContex.organizationId,
+    isProductionProject = _useApplicationContex.isProductionProject;
+  react.useEffect(() => {
+    function getUserRole() {
+      switch (project?.isUserAdminOfCurrentProject) {
+        case true:
+          return 'admin';
+        case false:
+          return 'regular';
+        default:
+          return 'unknown';
+      }
+    }
+
+    // It's not safe to invoke any FullStory SDK methods.
+    if (!browser.isInitialized() || disable) {
+      return;
+    }
+    if (!user?.id) {
+      browser.FullStory('setIdentity', {
+        anonymous: true
+      });
+    } else {
+      browser.FullStory('setIdentity', {
+        uid: user.id,
+        properties: _objectSpread$1({
+          environment: cloudEnvironment,
+          projectKey: project?.key,
+          isProductionProject,
+          organizationId,
+          userBusinessRole: user.businessRole,
+          userLocale: user.locale,
+          userRole: getUserRole()
+        }, additionalUserVars)
+      });
+    }
+  }, [disable, additionalUserVars, cloudEnvironment, project?.key, user?.businessRole, user?.id, user?.locale, isProductionProject, organizationId, project?.isUserAdminOfCurrentProject]);
+  return null;
+}
+
+// NOTE: This type is not exported from the @fullstory/browser package.
+
+function sendEvent(eventName, eventProperties) {
+  // Don't send events if FullStory is not initialized.
+  if (!browser.isInitialized()) {
+    return;
+  }
+  browser.FullStory('trackEvent', {
+    name: eventName,
+    properties: eventProperties
+  });
+}
+
+function setUserVars(userVars) {
+  browser.FullStory('setProperties', {
+    type: 'user',
+    properties: userVars
+  });
+}
+
+function Exclude(props) {
+  const ExcludeElement = props.as || 'div';
+  return jsxRuntime.jsx(ExcludeElement, {
+    className: "fs-exclude",
+    children: props.children
+  });
+}
+function Unmask(props) {
+  const UnmaskElement = props.as || 'div';
+  return jsxRuntime.jsx(UnmaskElement, {
+    className: "fs-unmask",
+    children: props.children
+  });
+}
+function Mask(props) {
+  const MaskElement = props.as || 'div';
+  return jsxRuntime.jsx(MaskElement, {
+    className: "fs-mask",
+    children: props.children
+  });
+}
+const Masking = {
+  Unmask,
+  Mask,
+  Exclude
+};
+
+const _excluded = ["children", "name"];
+function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function applyMarker(name) {
+  return {
+    'data-tracking': name
+  };
+}
+function Section(_ref) {
+  let children = _ref.children,
+    name = _ref.name,
+    additionalProps = _objectWithoutProperties(_ref, _excluded);
+  return jsxRuntime.jsx("section", _objectSpread(_objectSpread(_objectSpread({}, additionalProps), applyMarker(name)), {}, {
+    children: children
+  }));
+}
+const Marking = {
+  Section,
+  applyMarker
+};
+
+exports.Marking = Marking;
+exports.Masking = Masking;
+exports.initialize = initialize;
+exports.sendEvent = sendEvent;
+exports.setUserVars = setUserVars;
+exports.useTrackingEffect = useTrackingEffect;

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

@@ -0,0 +1,170 @@
+import { init, isInitialized, 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';
+import { jsx } from '@emotion/react/jsx-runtime';
+import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
+
+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() {
+  let 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;
+    }
+    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$1(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+const defaultTrackingArgs = {
+  disable: false,
+  additionalUserVars: undefined
+};
+function useTrackingEffect() {
+  let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultTrackingArgs,
+    disable = _ref.disable,
+    additionalUserVars = _ref.additionalUserVars;
+  const _useApplicationContex = useApplicationContext(context => ({
+      user: context.user,
+      project: context.project,
+      cloudEnvironment: context.environment.cloudEnvironment,
+      organizationId: context.project?.ownerId,
+      isProductionProject: context.project?.isProductionProject
+    })),
+    project = _useApplicationContex.project,
+    user = _useApplicationContex.user,
+    cloudEnvironment = _useApplicationContex.cloudEnvironment,
+    organizationId = _useApplicationContex.organizationId,
+    isProductionProject = _useApplicationContex.isProductionProject;
+  useEffect(() => {
+    function getUserRole() {
+      switch (project?.isUserAdminOfCurrentProject) {
+        case true:
+          return 'admin';
+        case false:
+          return 'regular';
+        default:
+          return 'unknown';
+      }
+    }
+
+    // It's not safe to invoke any FullStory SDK methods.
+    if (!isInitialized() || disable) {
+      return;
+    }
+    if (!user?.id) {
+      FullStory('setIdentity', {
+        anonymous: true
+      });
+    } else {
+      FullStory('setIdentity', {
+        uid: user.id,
+        properties: _objectSpread$1({
+          environment: cloudEnvironment,
+          projectKey: project?.key,
+          isProductionProject,
+          organizationId,
+          userBusinessRole: user.businessRole,
+          userLocale: user.locale,
+          userRole: getUserRole()
+        }, additionalUserVars)
+      });
+    }
+  }, [disable, additionalUserVars, cloudEnvironment, project?.key, user?.businessRole, user?.id, user?.locale, isProductionProject, organizationId, project?.isUserAdminOfCurrentProject]);
+  return null;
+}
+
+// NOTE: This type is not exported from the @fullstory/browser package.
+
+function sendEvent(eventName, eventProperties) {
+  // Don't send events if FullStory is not initialized.
+  if (!isInitialized()) {
+    return;
+  }
+  FullStory('trackEvent', {
+    name: eventName,
+    properties: eventProperties
+  });
+}
+
+function setUserVars(userVars) {
+  FullStory('setProperties', {
+    type: 'user',
+    properties: userVars
+  });
+}
+
+function Exclude(props) {
+  const ExcludeElement = props.as || 'div';
+  return jsx(ExcludeElement, {
+    className: "fs-exclude",
+    children: props.children
+  });
+}
+function Unmask(props) {
+  const UnmaskElement = props.as || 'div';
+  return jsx(UnmaskElement, {
+    className: "fs-unmask",
+    children: props.children
+  });
+}
+function Mask(props) {
+  const MaskElement = props.as || 'div';
+  return jsx(MaskElement, {
+    className: "fs-mask",
+    children: props.children
+  });
+}
+const Masking = {
+  Unmask,
+  Mask,
+  Exclude
+};
+
+const _excluded = ["children", "name"];
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function applyMarker(name) {
+  return {
+    'data-tracking': name
+  };
+}
+function Section(_ref) {
+  let children = _ref.children,
+    name = _ref.name,
+    additionalProps = _objectWithoutProperties(_ref, _excluded);
+  return jsx("section", _objectSpread(_objectSpread(_objectSpread({}, additionalProps), applyMarker(name)), {}, {
+    children: children
+  }));
+}
+const Marking = {
+  Section,
+  applyMarker
+};
+
+export { Marking, Masking, 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,6 @@
+export { initialize } from "./initialize.js";
+export { useTrackingEffect } from "./tracking-effect.js";
+export { sendEvent } from "./send-event.js";
+export { setUserVars } from "./set-user-vars.js";
+export { Masking } from "./masking.js";
+export { Marking } from "./marking.js";

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/marking.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type TMarkingProps = HTMLAttributes<HTMLDivElement> & {
+    name: string;
+    children: ReactNode;
+    className?: string;
+};
+declare function applyMarker(name: TMarkingProps['name']): {
+    'data-tracking': string;
+};
+declare function Section({ children, name, ...additionalProps }: TMarkingProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare const Marking: {
+    Section: typeof Section;
+    applyMarker: typeof applyMarker;
+};
+export { Marking };

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export type TMaskingProps = {
+    children: ReactNode;
+    as?: 'div' | 'span';
+};
+declare function Exclude(props: TMaskingProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare function Unmask(props: TMaskingProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare function Mask(props: TMaskingProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare const Masking: {
+    Unmask: typeof Unmask;
+    Mask: typeof Mask;
+    Exclude: typeof Exclude;
+};
+export { Masking };

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,2 @@
+declare function setUserVars(userVars: object): void;
+export { setUserVars };

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

@@ -0,0 +1,8 @@
+/// <reference types="node" />
+import { KeyObject } from 'crypto';
+type TTrackingArgs = {
+    disable?: boolean;
+    additionalUserVars?: KeyObject;
+};
+declare function useTrackingEffect({ disable, additionalUserVars, }?: TTrackingArgs): null;
+export { useTrackingEffect };

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@commercetools-frontend/fullstory",
+  "version": "0.0.0-FEC-212-react19-20250122084835",
+  "description": "A package integrating with the FullStory SDK",
+  "license": "MIT",
+  "main": "dist/commercetools-frontend-fullstory.cjs.js",
+  "module": "dist/commercetools-frontend-fullstory.esm.js",
+  "files": [
+    "dist",
+    "constants",
+    "LICENSE",
+    "package.json",
+    "README.md"
+  ],
+  "dependencies": {
+    "@babel/core": "^7.22.11",
+    "@babel/runtime-corejs3": "^7.21.0",
+    "@fullstory/browser": "2.0.5"
+  },
+  "devDependencies": {
+    "@apollo/client": "3.12.3",
+    "@commercetools-frontend/application-shell": "0.0.0-fec-156-react19-20250117164550",
+    "@commercetools-frontend/application-shell-connectors": "0.0.0-fec-156-react19-20250117164550",
+    "@commercetools-frontend/constants": "0.0.0-fec-156-react19-20250117164550",
+    "@emotion/react": "11.13.3",
+    "@testing-library/react": "16.1.0",
+    "@types/jest": "^29.5.2",
+    "@types/node": "20.17.13",
+    "@types/react": "19.0.0",
+    "@types/testing-library__jest-dom": "^5.14.6",
+    "graphql": "16.9.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-intl": "6.6.8",
+    "react-redux": "7.2.9",
+    "react-router-dom": "5.3.4",
+    "redux": "4.2.1",
+    "typescript": "5.2.2"
+  },
+  "peerDependencies": {
+    "@commercetools-frontend/application-shell-connectors": "0.0.0-fec-156-react19-20250117164550",
+    "@commercetools-frontend/constants": "0.0.0-fec-156-react19-20250117164550",
+    "@emotion/react": "11.x",
+    "react": "19.x",
+    "react-intl": "6.x"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "preconstruct": {
+    "entrypoints": [
+      "./index.ts",
+      "./constants.ts"
+    ]
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
+}