@flagship.io/react-sdk 2.2.0-beta.5 → 3.0.1

package/README.md

@@ -7,8 +7,8 @@
 
 ## Docs
 
-- coming soon
+- [docs](https://docs.developers.flagship.io/docs/react-v3-0-x)
 
 ## Licence
 
-[Apache License.](https://github.com/abtasty/flagship-react-sdk/blob/master/LICENSE)
+[Apache License.](https://github.com/flagship-io/flagship-react-sdk/blob/master/LICENSE)

package/dist/es/Flag.js

@@ -0,0 +1,36 @@
+import { FlagMetadata, LogLevel } from '@flagship.io/js-sdk';
+import { noVisitorMessage } from './constants';
+import { log } from './utils';
+export class Flag {
+  constructor(defaultValue) {
+    log(LogLevel.WARNING, noVisitorMessage, 'GetFlag');
+    this._defaultValue = defaultValue;
+  }
+
+  getValue() {
+    log(LogLevel.WARNING, noVisitorMessage, 'getValue');
+    return this._defaultValue;
+  }
+
+  exists() {
+    log(LogLevel.WARNING, noVisitorMessage, 'exists');
+    return false;
+  }
+
+  userExposed() {
+    log(LogLevel.WARNING, noVisitorMessage, 'userExposed');
+    return Promise.resolve();
+  }
+
+  get metadata() {
+    log(LogLevel.WARNING, noVisitorMessage, 'metadata');
+    return new FlagMetadata({
+      campaignId: '',
+      campaignType: '',
+      isReference: false,
+      variationGroupId: '',
+      variationId: ''
+    });
+  }
+
+}

package/dist/es/FlagshipContext.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useState, useEffect, createContext, useRef } from 'react';
-import { Flagship, FlagshipStatus } from '@flagship.io/js-sdk';
-import { getModificationsFromCampaigns, logError } from './utils';
+import React, { useState, useEffect, createContext, useRef } from "react";
+import { Flagship, FlagshipStatus } from "@flagship.io/js-sdk";
+import { getModificationsFromCampaigns, logError, useNonInitialEffect } from "./utils";
 const initStat = {
   status: {
     isLoading: true,
@@ -36,13 +36,21 @@ export const FlagshipProvider = ({
   initialBucketing,
   initialCampaigns,
   initialModifications,
+  initialFlagsData,
   synchronizeOnBucketingUpdated,
   activateDeduplicationTime,
-  hitDeduplicationTime
+  hitDeduplicationTime,
+  visitorCacheImplementation,
+  hitCacheImplementation,
+  disableCache
 }) => {
   let modifications = new Map();
 
-  if (initialModifications) {
+  if (initialFlagsData && initialFlagsData.forEach) {
+    initialFlagsData.forEach(flag => {
+      modifications.set(flag.key, flag);
+    });
+  } else if (initialModifications && initialModifications.forEach) {
     initialModifications.forEach(modification => {
       modifications.set(modification.key, modification);
     });
@@ -56,47 +64,20 @@ export const FlagshipProvider = ({
   const [lastModified, setLastModified] = useState();
   const stateRef = useRef();
   stateRef.current = state;
-  useEffect(() => {
+  useNonInitialEffect(() => {
     if (synchronizeOnBucketingUpdated) {
       var _state$visitor;
 
-      (_state$visitor = state.visitor) === null || _state$visitor === void 0 ? void 0 : _state$visitor.synchronizeModifications();
+      (_state$visitor = state.visitor) === null || _state$visitor === void 0 ? void 0 : _state$visitor.fetchFlags();
     }
   }, [lastModified]);
-  useEffect(() => {
-    updateVisitor();
+  useNonInitialEffect(() => {
+    createVisitor(true);
   }, [JSON.stringify(visitorData)]);
   useEffect(() => {
     initSdk();
   }, [envId, apiKey, decisionMode]);
 
-  const updateVisitor = () => {
-    if (!state.visitor) {
-      return;
-    }
-
-    if (visitorData.context) {
-      state.visitor.clearContext();
-      state.visitor.updateContext(visitorData.context);
-    }
-
-    if (typeof visitorData.hasConsented === 'boolean') {
-      state.visitor.setConsent(visitorData.hasConsented);
-    }
-
-    if (state.visitor.anonymousId && !visitorData.isAuthenticated) {
-      state.visitor.unauthenticate();
-    } else if (!state.visitor.anonymousId && visitorData.isAuthenticated) {
-      state.visitor.authenticate(visitorData.id);
-    }
-
-    if (visitorData.id) {
-      state.visitor.visitorId = visitorData.id;
-    }
-
-    state.visitor.synchronizeModifications();
-  };
-
   function initializeState(param) {
     const newStatus = {
       isSdkReady: param.isSdkReady,
@@ -124,7 +105,7 @@ export const FlagshipProvider = ({
 
   const onVisitorReady = (fsVisitor, error) => {
     if (error) {
-      logError(Flagship.getConfig(), error.message || error, 'onReady');
+      logError(Flagship.getConfig(), error.message || error, "onReady");
       return;
     }
 
@@ -143,6 +124,37 @@ export const FlagshipProvider = ({
     }
   };
 
+  const createVisitor = (fetchFlags = false) => {
+    if (!visitorData) {
+      return;
+    }
+
+    const fsVisitor = Flagship.newVisitor({
+      visitorId: visitorData.id,
+      context: visitorData.context,
+      isAuthenticated: visitorData.isAuthenticated,
+      hasConsented: visitorData.hasConsented,
+      initialCampaigns,
+      initialModifications,
+      initialFlagsData
+    });
+    fsVisitor === null || fsVisitor === void 0 ? void 0 : fsVisitor.on("ready", error => {
+      onVisitorReady(fsVisitor, error);
+    });
+
+    if (!fetchNow && fsVisitor && !fetchFlags) {
+      initializeState({
+        fsVisitor,
+        isSdkReady: true,
+        isLoading: false
+      });
+    }
+
+    if (fetchFlags && !fetchNow) {
+      fsVisitor === null || fsVisitor === void 0 ? void 0 : fsVisitor.fetchFlags();
+    }
+  };
+
   const statusChanged = status => {
     if (statusChangedCallback) {
       statusChangedCallback(status);
@@ -150,38 +162,15 @@ export const FlagshipProvider = ({
 
     if (status === FlagshipStatus.STARTING && onInitStart) {
       onInitStart();
-    } else if (status === FlagshipStatus.READY_PANIC_ON || status === FlagshipStatus.READY) {
-      var _stateRef$current;
+      return;
+    }
 
+    if (status === FlagshipStatus.READY_PANIC_ON || status === FlagshipStatus.READY) {
       if (onInitDone) {
         onInitDone();
       }
 
-      if ((_stateRef$current = stateRef.current) !== null && _stateRef$current !== void 0 && _stateRef$current.visitor) {
-        var _stateRef$current2;
-
-        (_stateRef$current2 = stateRef.current) === null || _stateRef$current2 === void 0 ? void 0 : _stateRef$current2.visitor.synchronizeModifications();
-      } else {
-        const fsVisitor = Flagship.newVisitor({
-          visitorId: visitorData.id,
-          context: visitorData.context,
-          isAuthenticated: visitorData.isAuthenticated,
-          hasConsented: visitorData.hasConsented,
-          initialCampaigns,
-          initialModifications
-        });
-        fsVisitor === null || fsVisitor === void 0 ? void 0 : fsVisitor.on('ready', error => {
-          onVisitorReady(fsVisitor, error);
-        });
-
-        if (!fetchNow && fsVisitor) {
-          initializeState({
-            fsVisitor,
-            isSdkReady: true,
-            isLoading: false
-          });
-        }
-      }
+      createVisitor();
     }
   };
 
@@ -209,14 +198,18 @@ export const FlagshipProvider = ({
       onBucketingUpdated: onBucketingLastModified,
       initialBucketing,
       activateDeduplicationTime,
-      hitDeduplicationTime
+      hitDeduplicationTime,
+      visitorCacheImplementation,
+      hitCacheImplementation,
+      disableCache,
+      language: 1
     });
   };
 
   const handleDisplay = () => {
     const isFirstInit = !state.visitor;
 
-    if (state.status.isLoading && loadingComponent && isFirstInit) {
+    if (state.status.isLoading && loadingComponent && isFirstInit && fetchNow) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, loadingComponent);
     }
 
@@ -231,7 +224,6 @@ export const FlagshipProvider = ({
   }, handleDisplay());
 };
 FlagshipProvider.defaultProps = {
-  nodeEnv: 'production',
   activateDeduplicationTime: 10,
   hitDeduplicationTime: 10
 };

package/dist/es/FlagshipHooks.js

@@ -1,6 +1,8 @@
 import { useContext } from 'react';
 import { FlagshipContext } from './FlagshipContext';
 import { logError, logWarn } from './utils';
+import { Flag } from './Flag';
+import { noVisitorDefault, noVisitorMessage } from './constants';
 
 const checkType = (value, defaultValue) => typeof value === 'object' && typeof defaultValue === 'object' && Array.isArray(value) === Array.isArray(defaultValue) || typeof value === typeof defaultValue;
 
@@ -44,6 +46,7 @@ const fsModificationsSync = args => {
 };
 /**
  * Retrieve a modification value by its key. If no modification match the given key or if the stored value type and default value type do not match, default value will be returned.
+ * @deprecated use useFsGetFlag instead
  */
 
 
@@ -67,6 +70,7 @@ export const useFsModifications = (params, activateAll) => {
 };
 /**
  * Retrieve a modification value by its key. If no modification match the given key or if the stored value type and default value type do not match, default value will be returned.
+ * @deprecated use useFsGetFlag instead
  */
 
 export const useFsModification = params => {
@@ -119,6 +123,7 @@ const fsModificationInfoSync = args => {
 /**
  * Get the campaign modification information value matching the given key.
  * @param {string} key key which identify the modification.
+ * @deprecated use useFsGetFlag instead
  */
 
 
@@ -136,54 +141,47 @@ export const useFsModificationInfo = key => {
   });
 };
 
-const fsSynchronizeModifications = async (functionName, visitor, config) => {
+const fsActivate = async (params, functionName, visitor, config) => {
   try {
     if (!visitor) {
-      reportNoVisitor(config, functionName);
+      logWarn(config, noVisitorMessage, functionName);
       return;
     }
 
-    await visitor.synchronizeModifications(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    await visitor.activateModifications(params); // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (error) {
-    logError(config, error.message || error, functionName);
+    logWarn(config, error.message || error, functionName);
   }
 };
 /**
- * This function calls the decision api and update all the campaigns modifications from the server according to the visitor context.
-*/
+ * This hook returns a flag object by its key. If no flag match the given key an empty flag will be returned.
+ * @param key
+ * @param defaultValue
+ * @returns
+ */
 
 
-export const useFsSynchronizeModifications = async () => {
+export const useFsFlag = (key, defaultValue) => {
   const {
     state
   } = useContext(FlagshipContext);
   const {
-    visitor,
-    config
+    visitor
   } = state;
-  const functionName = 'useFsSynchronizeModifications';
-  await fsSynchronizeModifications(functionName, visitor, config);
-};
 
-const fsActivate = async (params, functionName, visitor, config) => {
-  try {
-    if (!visitor) {
-      logWarn(config, noVisitorMessage, functionName);
-      return;
-    }
-
-    await visitor.activateModifications(params); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } catch (error) {
-    logWarn(config, error.message || error, functionName);
+  if (!visitor) {
+    return new Flag(defaultValue);
   }
+
+  return visitor.getFlag(key, defaultValue);
 };
 /**
  * Report this user has seen this modification. Report this user has seen these modifications.
  * @param params
+ * @deprecated use useFsGetFlag instead
  * @returns
  */
 
-
 export const useFsActivate = async params => {
   const {
     state
@@ -249,8 +247,8 @@ export const useFlagship = () => {
     visitor.unauthenticate();
   };
   /**
-  * Send a Hit to Flagship servers for reporting.
-  */
+   * Send a Hit to Flagship servers for reporting.
+   */
 
 
   const fsSendHit = hit => {
@@ -264,8 +262,8 @@ export const useFlagship = () => {
     return visitor.sendHit(hit);
   };
   /**
-  * Send a Hit to Flagship servers for reporting.
-  */
+   * Send a Hit to Flagship servers for reporting.
+   */
 
 
   const fsSendHits = hit => {
@@ -292,8 +290,12 @@ export const useFlagship = () => {
   };
 
   const synchronizeModifications = async () => {
-    const functionName = 'synchronizeModifications';
-    await fsSynchronizeModifications(functionName, visitor, config);
+    if (!visitor) {
+      logWarn(config, noVisitorMessage, 'synchronizeModifications');
+      return;
+    }
+
+    await visitor.synchronizeModifications();
   };
 
   const getModifications = (params, activateAll) => {
@@ -316,7 +318,39 @@ export const useFlagship = () => {
     });
   };
 
+  function getFlag(key, defaultValue) {
+    if (!visitor) {
+      return new Flag(defaultValue);
+    }
+
+    return visitor.getFlag(key, defaultValue);
+  }
+
+  function fetchFlags() {
+    if (!visitor) {
+      logWarn(config, noVisitorMessage, 'fetchFlags');
+      return Promise.resolve();
+    }
+
+    return visitor.fetchFlags();
+  }
+
+  function setConsent(hasConsented) {
+    if (!visitor) {
+      logWarn(config, noVisitorMessage, 'setConsent');
+      return;
+    }
+
+    visitor.setConsent(hasConsented);
+  }
+
   return {
+    visitorId: visitor === null || visitor === void 0 ? void 0 : visitor.visitorId,
+    anonymousId: visitor === null || visitor === void 0 ? void 0 : visitor.anonymousId,
+    context: { ...(visitor === null || visitor === void 0 ? void 0 : visitor.context)
+    },
+    hasConsented: visitor === null || visitor === void 0 ? void 0 : visitor.hasConsented,
+    setConsent,
     updateContext: fsUpdateContext,
     clearContext: fsClearContext,
     authenticate: fsAuthenticate,
@@ -326,16 +360,13 @@ export const useFlagship = () => {
     synchronizeModifications,
     getModifications,
     modifications: modifications || [],
+    FlagsData: (visitor === null || visitor === void 0 ? void 0 : visitor.getFlagsDataArray()) || [],
     getModificationInfo,
     hit: {
       send: fsSendHit,
       sendMultiple: fsSendHits
-    }
+    },
+    getFlag,
+    fetchFlags
   };
-};
-export const noVisitorMessage = 'sdk not correctly initialized... Make sure fsVisitor is ready.';
-export const noVisitorDefault = 'fsVisitor not initialized, returns default value';
-
-const reportNoVisitor = (config, tag) => {
-  logError(config, noVisitorMessage, tag);
 };

package/dist/es/constants.js

@@ -0,0 +1,2 @@
+export const noVisitorMessage = 'flagship Visitor not initialized.';
+export const noVisitorDefault = 'fsVisitor not initialized, returns default value';

package/dist/es/utils.js

@@ -1,4 +1,5 @@
 import { LogLevel } from '@flagship.io/js-sdk';
+import { useEffect, useRef } from 'react';
 export function logError(config, message, tag) {
   if (!config || !config.logManager || typeof config.logManager.error !== 'function' || !config.logLevel || config.logLevel < LogLevel.ERROR) {
     return;
@@ -20,6 +21,16 @@ export function logWarn(config, message, tag) {
 
   config.logManager.warning(message, tag);
 }
+export function log(level, message, tag) {
+  const now = new Date(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const getTwoDigit = value => {
+    return value.toString().length === 1 ? `0${value}` : value;
+  };
+
+  const out = `[${getTwoDigit(now.getFullYear())}-${getTwoDigit(now.getMonth())}-${getTwoDigit(now.getDay())} ${getTwoDigit(now.getHours())}:${getTwoDigit(now.getMinutes())}] [Flagship SDK] [${LogLevel[level]}] [${tag}] : ${message}`;
+  console.log(out);
+}
 export const getModificationsFromCampaigns = campaigns => {
   const modifications = new Map();
 
@@ -43,4 +54,24 @@ export const getModificationsFromCampaigns = campaigns => {
     }
   });
   return modifications;
-};
+};
+export function uuidV4() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (char) {
+    const rand = Math.random() * 16 | 0;
+    const value = char === 'x' ? rand : rand & 0x3 | 0x8;
+    return value.toString(16);
+  });
+}
+export function useNonInitialEffect(effect, deps) {
+  const initialRender = useRef(true);
+  useEffect(() => {
+    if (initialRender.current) {
+      initialRender.current = false;
+      return;
+    }
+
+    if (typeof effect === 'function') {
+      return effect();
+    }
+  }, deps);
+}

package/dist/esm/Flag.js

@@ -0,0 +1,55 @@
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { FlagMetadata, LogLevel } from '@flagship.io/js-sdk';
+import { noVisitorMessage } from './constants';
+import { log } from './utils';
+export var Flag = /*#__PURE__*/function () {
+  function Flag(defaultValue) {
+    _classCallCheck(this, Flag);
+
+    _defineProperty(this, "_defaultValue", void 0);
+
+    log(LogLevel.WARNING, noVisitorMessage, 'GetFlag');
+    this._defaultValue = defaultValue;
+  }
+
+  _createClass(Flag, [{
+    key: "getValue",
+    value: function getValue() {
+      log(LogLevel.WARNING, noVisitorMessage, 'getValue');
+      return this._defaultValue;
+    }
+  }, {
+    key: "exists",
+    value: function exists() {
+      log(LogLevel.WARNING, noVisitorMessage, 'exists');
+      return false;
+    }
+  }, {
+    key: "userExposed",
+    value: function userExposed() {
+      log(LogLevel.WARNING, noVisitorMessage, 'userExposed');
+      return Promise.resolve();
+    }
+  }, {
+    key: "metadata",
+    get: function get() {
+      log(LogLevel.WARNING, noVisitorMessage, 'metadata');
+      return new FlagMetadata({
+        campaignId: '',
+        campaignType: '',
+        isReference: false,
+        variationGroupId: '',
+        variationId: ''
+      });
+    }
+  }]);
+
+  return Flag;
+}();