@commercetools-frontend/fullstory 1.0.2 → 1.0.4

package/README.md

@@ -107,6 +107,26 @@ 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.
+
 ## FAQ
 
 Question: _I want to disable FullStory on a specific environment_

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var CONTENT_SECURITY_POLICIES = {
+const CONTENT_SECURITY_POLICIES = {
   CONNECT_SRC: ['*.fullstory.com'],
   SCRIPT_SRC: ['*.fullstory.com']
 };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var CONTENT_SECURITY_POLICIES = {
+const CONTENT_SECURITY_POLICIES = {
   CONNECT_SRC: ['*.fullstory.com'],
   SCRIPT_SRC: ['*.fullstory.com']
 };

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

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

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

@@ -14,6 +14,7 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
 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');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -54,7 +55,7 @@ function assertValidFullstoryOrganizationId(fullstoryOrganizationId) {
   }
 }
 function initialize() {
-  var fullstoryOrganizationId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.app.fullstoryOrganizationId;
+  let fullstoryOrganizationId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.app.fullstoryOrganizationId;
   try {
     try {
       assertValidFullstoryOrganizationId(fullstoryOrganizationId);
@@ -73,25 +74,23 @@ function initialize() {
 
 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 = {
+const defaultTrackingArgs = {
   disable: false,
   additionalUserVars: undefined
 };
 function useTrackingEffect() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultTrackingArgs,
+  let _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
-      };
-    }),
+  const _useApplicationContex = applicationShellConnectors.useApplicationContext(context => ({
+      user: context.user,
+      project: context.project,
+      tenant: context.environment.tenant
+    })),
     project = _useApplicationContex.project,
     user = _useApplicationContex.user,
     tenant = _useApplicationContex.tenant;
-  react.useEffect(function () {
+  react.useEffect(() => {
     // It's not safe to invoke any FullStory SDK methods.
     if (!FullStory__namespace.isInitialized() || disable) {
       return;
@@ -120,6 +119,34 @@ function setUserVars(userVars) {
   FullStory__namespace.setUserVars(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
+};
+
+exports.Masking = Masking;
 exports.initialize = initialize;
 exports.sendEvent = sendEvent;
 exports.setUserVars = setUserVars;

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

@@ -14,6 +14,7 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
 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');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -54,7 +55,7 @@ function assertValidFullstoryOrganizationId(fullstoryOrganizationId) {
   }
 }
 function initialize() {
-  var fullstoryOrganizationId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.app.fullstoryOrganizationId;
+  let fullstoryOrganizationId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.app.fullstoryOrganizationId;
   try {
     try {
       assertValidFullstoryOrganizationId(fullstoryOrganizationId);
@@ -73,25 +74,23 @@ function initialize() {
 
 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 = {
+const defaultTrackingArgs = {
   disable: false,
   additionalUserVars: undefined
 };
 function useTrackingEffect() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultTrackingArgs,
+  let _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
-      };
-    }),
+  const _useApplicationContex = applicationShellConnectors.useApplicationContext(context => ({
+      user: context.user,
+      project: context.project,
+      tenant: context.environment.tenant
+    })),
     project = _useApplicationContex.project,
     user = _useApplicationContex.user,
     tenant = _useApplicationContex.tenant;
-  react.useEffect(function () {
+  react.useEffect(() => {
     // It's not safe to invoke any FullStory SDK methods.
     if (!FullStory__namespace.isInitialized() || disable) {
       return;
@@ -120,6 +119,34 @@ function setUserVars(userVars) {
   FullStory__namespace.setUserVars(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
+};
+
+exports.Masking = Masking;
 exports.initialize = initialize;
 exports.sendEvent = sendEvent;
 exports.setUserVars = setUserVars;

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

@@ -10,6 +10,7 @@ import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object
 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';
 
 function assertValidFullstoryOrganizationId(fullstoryOrganizationId) {
   if (typeof fullstoryOrganizationId !== 'string') {
@@ -20,7 +21,7 @@ function assertValidFullstoryOrganizationId(fullstoryOrganizationId) {
   }
 }
 function initialize() {
-  var fullstoryOrganizationId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.app.fullstoryOrganizationId;
+  let fullstoryOrganizationId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.app.fullstoryOrganizationId;
   try {
     try {
       assertValidFullstoryOrganizationId(fullstoryOrganizationId);
@@ -39,25 +40,23 @@ function initialize() {
 
 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 = {
+const defaultTrackingArgs = {
   disable: false,
   additionalUserVars: undefined
 };
 function useTrackingEffect() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultTrackingArgs,
+  let _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
-      };
-    }),
+  const _useApplicationContex = useApplicationContext(context => ({
+      user: context.user,
+      project: context.project,
+      tenant: context.environment.tenant
+    })),
     project = _useApplicationContex.project,
     user = _useApplicationContex.user,
     tenant = _useApplicationContex.tenant;
-  useEffect(function () {
+  useEffect(() => {
     // It's not safe to invoke any FullStory SDK methods.
     if (!FullStory.isInitialized() || disable) {
       return;
@@ -86,4 +85,31 @@ function setUserVars(userVars) {
   FullStory.setUserVars(userVars);
 }
 
-export { initialize, sendEvent, setUserVars, useTrackingEffect };
+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
+};
+
+export { Masking, initialize, sendEvent, setUserVars, useTrackingEffect };

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

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

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/jsx-runtime").JSX.Element;
+declare function Unmask(props: TMaskingProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Mask(props: TMaskingProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Masking: {
+    Unmask: typeof Unmask;
+    Mask: typeof Mask;
+    Exclude: typeof Exclude;
+};
+export { Masking };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/fullstory",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "A package integrating with the FullStory SDK",
   "license": "MIT",
   "main": "dist/commercetools-frontend-fullstory.cjs.js",
@@ -12,20 +12,21 @@
     "package.json",
     "README.md"
   ],
-  "scripts": {
-    "typecheck": "tsc --noEmit"
-  },
   "dependencies": {
+    "@babel/core": "^7.21.0",
     "@babel/runtime": "^7.21.0",
     "@babel/runtime-corejs3": "^7.21.0",
     "@fullstory/browser": "1.7.0"
   },
   "devDependencies": {
-    "@apollo/client": "3.7.9",
-    "@commercetools-frontend/application-shell": "21.23.8",
+    "@apollo/client": "3.7.10",
+    "@commercetools-frontend/application-shell": "21.24.1",
+    "@commercetools-frontend/application-shell-connectors": "21.24.1",
+    "@commercetools-frontend/constants": "21.24.1",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "8.0.1",
-    "@types/node": "18.14.6",
+    "@types/node": "18.15.10",
+    "@types/react": "17.0.54",
     "graphql": "16.6.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -37,6 +38,8 @@
   },
   "peerDependencies": {
     "@commercetools-frontend/application-shell-connectors": "21.x",
+    "@commercetools-frontend/constants": "21.x",
+    "@emotion/react": "11.x",
     "react": "17.x"
   },
   "publishConfig": {
@@ -47,5 +50,8 @@
       "./index.ts",
       "./constants.ts"
     ]
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
   }
-}
+}