@commercetools-frontend/fullstory 2.1.3 → 2.2.0

package/README.md

@@ -127,6 +127,32 @@ import { Masking as FullStoryMasking } from '@commercetools-frontend/fullstory';
 
 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>;
+```
+
+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_

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

@@ -72,8 +72,8 @@ function initialize() {
   }
 }
 
-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 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
@@ -98,7 +98,7 @@ function useTrackingEffect() {
     if (!(user !== null && user !== void 0 && user.id)) {
       FullStory__namespace.anonymize();
     } else {
-      FullStory__namespace.identify(user.id, _objectSpread({
+      FullStory__namespace.identify(user.id, _objectSpread$1({
         environment: tenant,
         projectKey: project === null || project === void 0 ? void 0 : project.key,
         userBusinessRole: user.businessRole,
@@ -150,6 +150,24 @@ const Masking = {
   Exclude
 };
 
+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(props) {
+  return jsxRuntime.jsx("section", _objectSpread(_objectSpread({}, applyMarker(props.name)), {}, {
+    children: props.children
+  }));
+}
+const Marking = {
+  Section,
+  applyMarker
+};
+
+exports.Marking = Marking;
 exports.Masking = Masking;
 exports.initialize = initialize;
 exports.sendEvent = sendEvent;

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

@@ -72,8 +72,8 @@ function initialize() {
   }
 }
 
-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 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
@@ -98,7 +98,7 @@ function useTrackingEffect() {
     if (!(user !== null && user !== void 0 && user.id)) {
       FullStory__namespace.anonymize();
     } else {
-      FullStory__namespace.identify(user.id, _objectSpread({
+      FullStory__namespace.identify(user.id, _objectSpread$1({
         environment: tenant,
         projectKey: project === null || project === void 0 ? void 0 : project.key,
         userBusinessRole: user.businessRole,
@@ -150,6 +150,24 @@ const Masking = {
   Exclude
 };
 
+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(props) {
+  return jsxRuntime.jsx("section", _objectSpread(_objectSpread({}, applyMarker(props.name)), {}, {
+    children: props.children
+  }));
+}
+const Marking = {
+  Section,
+  applyMarker
+};
+
+exports.Marking = Marking;
 exports.Masking = Masking;
 exports.initialize = initialize;
 exports.sendEvent = sendEvent;

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

@@ -38,8 +38,8 @@ function initialize() {
   }
 }
 
-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 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
@@ -64,7 +64,7 @@ function useTrackingEffect() {
     if (!(user !== null && user !== void 0 && user.id)) {
       FullStory.anonymize();
     } else {
-      FullStory.identify(user.id, _objectSpread({
+      FullStory.identify(user.id, _objectSpread$1({
         environment: tenant,
         projectKey: project === null || project === void 0 ? void 0 : project.key,
         userBusinessRole: user.businessRole,
@@ -116,4 +116,21 @@ const Masking = {
   Exclude
 };
 
-export { Masking, initialize, sendEvent, setUserVars, useTrackingEffect };
+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(props) {
+  return jsx("section", _objectSpread(_objectSpread({}, applyMarker(props.name)), {}, {
+    children: props.children
+  }));
+}
+const Marking = {
+  Section,
+  applyMarker
+};
+
+export { Marking, Masking, initialize, sendEvent, setUserVars, useTrackingEffect };

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

@@ -3,3 +3,4 @@ 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/marking.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/fullstory",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "A package integrating with the FullStory SDK",
   "license": "MIT",
   "main": "dist/commercetools-frontend-fullstory.cjs.js",
@@ -20,9 +20,9 @@
   },
   "devDependencies": {
     "@apollo/client": "3.7.10",
-    "@commercetools-frontend/application-shell": "22.8.2",
-    "@commercetools-frontend/application-shell-connectors": "22.8.2",
-    "@commercetools-frontend/constants": "22.8.2",
+    "@commercetools-frontend/application-shell": "22.9.1",
+    "@commercetools-frontend/application-shell-connectors": "22.9.1",
+    "@commercetools-frontend/constants": "22.9.1",
     "@emotion/react": "^11.11.1",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "8.0.1",