@flagship.io/react-sdk 3.0.2-alpha.0 → 3.0.3-alpha.1

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

@@ -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, useNonInitialEffect } from "./utils";
+const initStat = {
+  status: {
+    isLoading: true,
+    isSdkReady: false
+  }
+};
+export const FlagshipContext = /*#__PURE__*/createContext({
+  state: { ...initStat
+  }
+});
+export const FlagshipProvider = ({
+  children,
+  fetchNow,
+  envId,
+  apiKey,
+  decisionMode,
+  decisionApiUrl,
+  timeout,
+  logLevel,
+  statusChangedCallback,
+  logManager,
+  pollingInterval,
+  visitorData,
+  onInitStart,
+  onInitDone,
+  onBucketingSuccess,
+  onBucketingFail,
+  loadingComponent,
+  onBucketingUpdated,
+  onUpdate,
+  enableClientCache,
+  initialBucketing,
+  initialCampaigns,
+  initialModifications,
+  initialFlagsData,
+  synchronizeOnBucketingUpdated,
+  activateDeduplicationTime,
+  hitDeduplicationTime,
+  visitorCacheImplementation,
+  hitCacheImplementation,
+  disableCache
+}) => {
+  let modifications = new Map();
+
+  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);
+    });
+  } else if (initialCampaigns) {
+    modifications = getModificationsFromCampaigns(initialCampaigns);
+  }
+
+  const [state, setState] = useState({ ...initStat,
+    modifications
+  });
+  const [lastModified, setLastModified] = useState();
+  const stateRef = useRef();
+  stateRef.current = state;
+  useNonInitialEffect(() => {
+    if (synchronizeOnBucketingUpdated) {
+      var _state$visitor;
+
+      (_state$visitor = state.visitor) === null || _state$visitor === void 0 ? void 0 : _state$visitor.fetchFlags();
+    }
+  }, [lastModified]);
+  useNonInitialEffect(() => {
+    createVisitor(true);
+  }, [JSON.stringify(visitorData)]);
+  useEffect(() => {
+    initSdk();
+  }, [envId, apiKey, decisionMode]);
+
+  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 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);
+    }
+
+    if (status === FlagshipStatus.STARTING && onInitStart) {
+      onInitStart();
+      return;
+    }
+
+    if (status === FlagshipStatus.READY_PANIC_ON || status === FlagshipStatus.READY) {
+      if (onInitDone) {
+        onInitDone();
+      }
+
+      createVisitor();
+    }
+  };
+
+  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,
+      decisionApiUrl,
+      onBucketingUpdated: onBucketingLastModified,
+      initialBucketing,
+      activateDeduplicationTime,
+      hitDeduplicationTime,
+      visitorCacheImplementation,
+      hitCacheImplementation,
+      disableCache,
+      language: 1
+    });
+  };
+
+  const handleDisplay = () => {
+    const isFirstInit = !state.visitor;
+
+    if (state.status.isLoading && loadingComponent && isFirstInit && fetchNow) {
+      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 = {
+  activateDeduplicationTime: 10,
+  hitDeduplicationTime: 10
+};

package/dist/es/FlagshipHooks.js

@@ -0,0 +1,372 @@
+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;
+
+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.
+ * @deprecated use useFsGetFlag instead
+ */
+
+
+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.
+ * @deprecated use useFsGetFlag instead
+ */
+
+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.
+ * @deprecated use useFsGetFlag instead
+ */
+
+
+export const useFsModificationInfo = key => {
+  const {
+    state
+  } = useContext(FlagshipContext);
+  const {
+    visitor
+  } = state;
+  return fsModificationInfoSync({
+    key,
+    state,
+    visitor
+  });
+};
+
+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);
+  }
+};
+/**
+ * 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 useFsFlag = (key, defaultValue) => {
+  const {
+    state
+  } = useContext(FlagshipContext);
+  const {
+    visitor
+  } = state;
+
+  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
+  } = 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 () => {
+    if (!visitor) {
+      logWarn(config, noVisitorMessage, 'synchronizeModifications');
+      return;
+    }
+
+    await visitor.synchronizeModifications();
+  };
+
+  const getModifications = (params, activateAll) => {
+    const functionName = 'getModifications';
+    return fsModificationsSync({
+      functionName,
+      state,
+      visitor,
+      config,
+      params,
+      activateAll
+    });
+  };
+
+  const getModificationInfo = key => {
+    return fsModificationInfoSync({
+      key,
+      state,
+      visitor
+    });
+  };
+
+  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,
+    unauthenticate: fsUnauthenticate,
+    status: state.status,
+    activateModification,
+    synchronizeModifications,
+    getModifications,
+    modifications: modifications || [],
+    FlagsData: (visitor === null || visitor === void 0 ? void 0 : visitor.getFlagsDataArray()) || [],
+    getModificationInfo,
+    hit: {
+      send: fsSendHit,
+      sendMultiple: fsSendHits
+    },
+    getFlag,
+    fetchFlags
+  };
+};

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/index.js

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

package/dist/es/utils.js

@@ -0,0 +1,77 @@
+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;
+  }
+
+  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 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();
+
+  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;
+};
+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);
+}