@flagship.io/react-sdk 2.2.0-alpha.5 → 2.2.0-alpha.9

package/dist/es/FlagshipContext.js

@@ -0,0 +1,229 @@
+// 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';
+const initStat = {
+  status: {
+    isLoading: true,
+    isSdkReady: false
+  }
+};
+export const FlagshipContext = /*#__PURE__*/createContext({
+  state: { ...initStat
+  }
+});
+export const FlagshipProvider = ({
+  children,
+  fetchNow,
+  envId,
+  apiKey,
+  decisionMode,
+  timeout,
+  logLevel,
+  statusChangedCallback,
+  logManager,
+  pollingInterval,
+  visitorData,
+  onInitStart,
+  onInitDone,
+  onBucketingSuccess,
+  onBucketingFail,
+  loadingComponent,
+  onBucketingUpdated,
+  onUpdate,
+  enableClientCache,
+  initialBucketing,
+  initialCampaigns,
+  initialModifications,
+  synchronizeOnBucketingUpdated
+}) => {
+  let modifications = new Map();
+
+  if (initialModifications) {
+    initialModifications.forEach(modification => {
+      modifications.set(modification.key, modification);
+    });
+  } else if (initialCampaigns) {
+    modifications = getModificationsFromCampaigns(initialCampaigns);
+  }
+
+  const [state, setState] = useState({ ...initStat,
+    modifications
+  });
+  const [lastModified, setLastModified] = useState();
+  const stateRef = useRef();
+  stateRef.current = state;
+  useEffect(() => {
+    if (synchronizeOnBucketingUpdated) {
+      var _state$visitor;
+
+      (_state$visitor = state.visitor) === null || _state$visitor === void 0 ? void 0 : _state$visitor.synchronizeModifications();
+    }
+  }, [lastModified]);
+  useEffect(() => {
+    updateVisitor();
+  }, [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,
+      isLoading: param.isLoading,
+      isVisitorDefined: !!param.fsVisitor,
+      lastRefresh: new Date().toISOString()
+    };
+    setState(currentState => {
+      if (!currentState.status.firstInitSuccess) {
+        newStatus.firstInitSuccess = new Date().toISOString();
+      }
+
+      return { ...currentState,
+        visitor: param.fsVisitor,
+        modifications: param.fsVisitor.modifications,
+        config: Flagship.getConfig(),
+        status: { ...currentState.status,
+          ...newStatus
+        }
+      };
+    });
+    return newStatus;
+  } // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+  const onVisitorReady = (fsVisitor, error) => {
+    if (error) {
+      logError(Flagship.getConfig(), error.message || error, 'onReady');
+      return;
+    }
+
+    const newStatus = initializeState({
+      fsVisitor,
+      isSdkReady: true,
+      isLoading: false
+    });
+
+    if (onUpdate) {
+      onUpdate({
+        fsModifications: fsVisitor.modifications,
+        config: Flagship.getConfig(),
+        status: newStatus
+      });
+    }
+  };
+
+  const statusChanged = status => {
+    if (statusChangedCallback) {
+      statusChangedCallback(status);
+    }
+
+    if (status === FlagshipStatus.STARTING && onInitStart) {
+      onInitStart();
+    } else if (status === FlagshipStatus.READY_PANIC_ON || status === FlagshipStatus.READY) {
+      var _stateRef$current;
+
+      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
+          });
+        }
+      }
+    }
+  };
+
+  const onBucketingLastModified = lastUpdate => {
+    if (onBucketingUpdated) {
+      onBucketingUpdated(lastUpdate);
+    }
+
+    setLastModified(lastUpdate);
+  };
+
+  const initSdk = () => {
+    Flagship.start(envId, apiKey, {
+      decisionMode,
+      fetchNow,
+      timeout,
+      logLevel,
+      statusChangedCallback: statusChanged,
+      logManager,
+      pollingInterval,
+      onBucketingFail,
+      onBucketingSuccess,
+      enableClientCache,
+      onBucketingUpdated: onBucketingLastModified,
+      initialBucketing
+    });
+  };
+
+  const handleDisplay = () => {
+    const isFirstInit = !state.visitor;
+
+    if (state.status.isLoading && loadingComponent && isFirstInit) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, loadingComponent);
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  };
+
+  return /*#__PURE__*/React.createElement(FlagshipContext.Provider, {
+    value: {
+      state,
+      setState
+    }
+  }, handleDisplay());
+};
+FlagshipProvider.defaultProps = {
+  nodeEnv: 'production'
+};

package/dist/es/FlagshipHooks.js

@@ -0,0 +1,363 @@
+import { useContext } from 'react';
+import { FlagshipContext } from './FlagshipContext';
+import { logError, logWarn } from './utils';
+
+const checkType = (value, defaultValue) => typeof value === 'object' && typeof defaultValue === 'object' && Array.isArray(value) === Array.isArray(defaultValue) || typeof value === typeof defaultValue;
+
+const fsModificationsSync = args => {
+  const {
+    visitor,
+    params,
+    activateAll,
+    state,
+    functionName,
+    config
+  } = args;
+
+  if (visitor) {
+    return visitor.getModificationsSync(params, activateAll);
+  }
+
+  const check = !state.status.isSdkReady && !!state.modifications && state.modifications.size > 0;
+  const flags = {};
+
+  if (check) {
+    params.forEach(item => {
+      var _state$modifications;
+
+      const modification = (_state$modifications = state.modifications) === null || _state$modifications === void 0 ? void 0 : _state$modifications.get(item.key);
+
+      if (modification && checkType(modification === null || modification === void 0 ? void 0 : modification.value, item.defaultValue)) {
+        flags[item.key] = modification.value;
+      } else {
+        flags[item.key] = item.defaultValue;
+      }
+    });
+    return flags;
+  }
+
+  logWarn(config, noVisitorDefault, functionName);
+  params.forEach(item => {
+    flags[item.key] = item.defaultValue;
+  });
+  return flags;
+};
+/**
+ * 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.
+ */
+
+
+export const useFsModifications = (params, activateAll) => {
+  const {
+    state
+  } = useContext(FlagshipContext);
+  const {
+    visitor,
+    config
+  } = state;
+  const functionName = 'useFsModifications';
+  return fsModificationsSync({
+    functionName,
+    state,
+    visitor,
+    config,
+    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.
+ */
+
+export const useFsModification = params => {
+  var _state$modifications2;
+
+  const {
+    state
+  } = useContext(FlagshipContext);
+  const {
+    visitor,
+    config
+  } = state;
+  const functionName = 'useFsModifications';
+
+  if (visitor) {
+    return visitor.getModificationSync(params);
+  }
+
+  const modification = (_state$modifications2 = state.modifications) === null || _state$modifications2 === void 0 ? void 0 : _state$modifications2.get(params.key);
+
+  if (!state.status.isSdkReady && modification && checkType(modification === null || modification === void 0 ? void 0 : modification.value, params.defaultValue)) {
+    return modification.value;
+  }
+
+  logWarn(config, noVisitorDefault, functionName);
+  return params.defaultValue;
+};
+
+const fsModificationInfoSync = args => {
+  var _state$modifications3;
+
+  const {
+    key,
+    visitor,
+    state
+  } = args;
+
+  if (visitor) {
+    return visitor.getModificationInfoSync(key);
+  }
+
+  const modification = (_state$modifications3 = state.modifications) === null || _state$modifications3 === void 0 ? void 0 : _state$modifications3.get(key);
+
+  if (!state.status.isSdkReady && modification) {
+    return modification;
+  }
+
+  return null;
+};
+/**
+ * Get the campaign modification information value matching the given key.
+ * @param {string} key key which identify the modification.
+ */
+
+
+export const useFsModificationInfo = key => {
+  const {
+    state
+  } = useContext(FlagshipContext);
+  const {
+    visitor
+  } = state;
+  return fsModificationInfoSync({
+    key,
+    state,
+    visitor
+  });
+};
+
+const fsSynchronizeModifications = async (functionName, visitor, config) => {
+  try {
+    if (!visitor) {
+      reportNoVisitor(config, functionName);
+      return;
+    }
+
+    await visitor.synchronizeModifications(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (error) {
+    logError(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.
+*/
+
+
+export const useFsSynchronizeModifications = async () => {
+  const {
+    state
+  } = useContext(FlagshipContext);
+  const {
+    visitor,
+    config
+  } = 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);
+  }
+};
+/**
+ * Report this user has seen this modification. Report this user has seen these modifications.
+ * @param params
+ * @returns
+ */
+
+
+export const useFsActivate = async params => {
+  const {
+    state
+  } = useContext(FlagshipContext);
+  const {
+    visitor,
+    config
+  } = state;
+  const functionName = 'useFsModifications';
+  await fsActivate(params, functionName, visitor, config);
+};
+export const useFlagship = () => {
+  const {
+    state
+  } = useContext(FlagshipContext);
+  const {
+    visitor,
+    config
+  } = state;
+
+  const fsUpdateContext = context => {
+    const functionName = 'updateContext';
+
+    if (!visitor) {
+      logError(config, noVisitorMessage, functionName);
+      return;
+    }
+
+    visitor.clearContext();
+    visitor.updateContext(context);
+  };
+
+  const fsClearContext = () => {
+    const functionName = 'cleanContext';
+
+    if (!visitor) {
+      logError(config, noVisitorMessage, functionName);
+      return;
+    }
+
+    visitor.clearContext();
+  };
+
+  const fsAuthenticate = visitorId => {
+    const functionName = 'authenticate';
+
+    if (!visitor) {
+      logError(config, noVisitorMessage, functionName);
+      return;
+    }
+
+    visitor.authenticate(visitorId);
+  };
+
+  const fsUnauthenticate = () => {
+    const functionName = 'unauthenticate';
+
+    if (!visitor) {
+      logError(config, noVisitorMessage, functionName);
+      return;
+    }
+
+    visitor.unauthenticate();
+  };
+  /**
+  * Send a Hit to Flagship servers for reporting.
+  */
+
+
+  const fsSendHit = hit => {
+    const functionName = 'sendHit';
+
+    if (!visitor) {
+      logError(config, noVisitorMessage, functionName);
+      return Promise.resolve();
+    }
+
+    return visitor.sendHit(hit);
+  };
+  /**
+  * Send a Hit to Flagship servers for reporting.
+  */
+
+
+  const fsSendHits = hit => {
+    const functionName = 'sendHits';
+
+    if (!visitor) {
+      logError(config, noVisitorMessage, functionName);
+      return Promise.resolve();
+    }
+
+    return visitor.sendHits(hit);
+  };
+
+  let modifications = visitor === null || visitor === void 0 ? void 0 : visitor.getModificationsArray();
+
+  if (!state.status.isSdkReady && state.modifications) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    modifications = Array.from(state.modifications, ([_key, item]) => item);
+  }
+
+  const activateModification = async params => {
+    const functionName = 'activateModification';
+    await fsActivate(params, functionName, visitor, config);
+  };
+
+  const synchronizeModifications = async () => {
+    const functionName = 'synchronizeModifications';
+    await fsSynchronizeModifications(functionName, visitor, config);
+  };
+
+  const getModificationsSync = (params, activateAll) => {
+    const functionName = 'getModificationsSync';
+    return fsModificationsSync({
+      functionName,
+      state,
+      visitor,
+      config,
+      params,
+      activateAll
+    });
+  };
+
+  const getModifications = async (params, activateAll) => {
+    const functionName = 'getModifications';
+    return fsModificationsSync({
+      functionName,
+      state,
+      visitor,
+      config,
+      params,
+      activateAll
+    });
+  };
+
+  const getModificationInfoSync = key => {
+    return fsModificationInfoSync({
+      key,
+      state,
+      visitor
+    });
+  };
+
+  const getModificationInfo = async key => {
+    return fsModificationInfoSync({
+      key,
+      state,
+      visitor
+    });
+  };
+
+  return {
+    updateContext: fsUpdateContext,
+    clearContext: fsClearContext,
+    authenticate: fsAuthenticate,
+    unauthenticate: fsUnauthenticate,
+    status: state.status,
+    activateModification,
+    synchronizeModifications,
+    getModificationsSync,
+    getModifications,
+    modifications: modifications || [],
+    getModificationInfo,
+    getModificationInfoSync,
+    hit: {
+      send: fsSendHit,
+      sendMultiple: fsSendHits
+    }
+  };
+};
+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/index.js

@@ -0,0 +1,3 @@
+export * from './FlagshipContext';
+export { DecisionMode } from '@flagship.io/js-sdk';
+export * from './FlagshipHooks';

package/dist/es/utils.js

@@ -0,0 +1,46 @@
+import { LogLevel } from '@flagship.io/js-sdk';
+export function logError(config, message, tag) {
+  if (!config || !config.logManager || typeof config.logManager.error !== 'function' || !config.logLevel || config.logLevel < LogLevel.ERROR) {
+    return;
+  }
+
+  config.logManager.error(message, tag);
+}
+export function logInfo(config, message, tag) {
+  if (!config || !config.logManager || typeof config.logManager.info !== 'function' || !config.logLevel || config.logLevel < LogLevel.INFO) {
+    return;
+  }
+
+  config.logManager.info(message, tag);
+}
+export function logWarn(config, message, tag) {
+  if (!config || !config.logManager || typeof config.logManager.warning !== 'function' || !config.logLevel || config.logLevel < LogLevel.WARNING) {
+    return;
+  }
+
+  config.logManager.warning(message, tag);
+}
+export const getModificationsFromCampaigns = campaigns => {
+  const modifications = new Map();
+
+  if (!campaigns || !Array.isArray(campaigns)) {
+    return modifications;
+  }
+
+  campaigns.forEach(campaign => {
+    const object = campaign.variation.modifications.value;
+
+    for (const key in object) {
+      const value = object[key];
+      modifications.set(key, {
+        key,
+        campaignId: campaign.id,
+        variationGroupId: campaign.variationGroupId,
+        variationId: campaign.variation.id,
+        isReference: campaign.variation.reference,
+        value
+      });
+    }
+  });
+  return modifications;
+};