Revert "(feature) Remove Pendo"

public/locales/en-US/translations.json

@@ -58,7 +58,8 @@
     "ppNotice": "This is consistent with the <privURL>Bitfinex Privacy Policy</privURL> and the <termsURL>Bitfinex API Terms of Service</termsURL>.",
     "weWill": "We will:",
     "willItem1": "Always allow you to opt-out from the settings",
-    "willItem2": "Send <bold>anonymised</bold> information to Bitfinex servers (such as errors or volume of trades) so we can know how the product is performing (<codeRefUrl>check the code</codeRefUrl>)",
+    "willItem2": "Send <bold>anonymised</bold> click and page-view events to 3rd party providers to guide your experience in the application and improve the product check the code (<codeRefUrl>check the code</codeRefUrl>)",
+    "willItem3": "Send <bold>anonymised</bold> information to Bitfinex servers (such as errors or volume of trades) so we can know how the product is performing (<codeRefUrl>check the code</codeRefUrl>)",
     "willNotItem1": "<bold>Never</bold> share any private information from your account (such as your IP address, balances, username, keys or order history) with 3rd parties",
     "willNotItem2": "<bold>Never</bold> collect any proprietary information (such as your strategies or exact order details)",
     "willNotItem3": "<bold>Never</bold> use the collected information to profile you in order to improve marketing communications",
@@ -68,7 +69,9 @@
     "unexpectedErrors": "We store unexpected errors",
     "unexpectedErrorsDesc": "Storing unexpected errors <strong>on our infrastructure</strong> allows us to proactively act on issues instead of relying on direct user reports, increasing our response time for fixes and making your overall experience safer (<codeRefUrl>check the code</codeRefUrl>).",
     "anonymousData": "We store anonymous usage data",
-    "anonymousDataDesc": "Storing anonymous usage data <strong>on our infrastructure</strong> allows us to analyse usage trends of the application worldwide and better understand which actions should be prioritised due to their reach (<codeRefUrl>check the code</codeRefUrl>)."
+    "anonymousDataDesc": "Storing anonymous usage data <strong>on our infrastructure</strong> allows us to analyse usage trends of the application worldwide and better understand which actions should be prioritised due to their reach (<codeRefUrl>check the code</codeRefUrl>).",
+    "pendoUsage": "We improve your experience with Pendo",
+    "pendoUsageDesc": "Interacting with <pendoURL>Pendo</pendoURL> allows us to present you with dynamic informative content and also better analyse how different users use the application worldwide.\nView their <pendoPP>Privacy Policy</pendoPP>.\n\nWe generate a unique ID for your user which is completely unrelated to your Bitfinex account and that's it. We don't share any other details (<codeRefUrl>check the code</codeRefUrl>)."
   },
   "launchStrategyModal": {
     "title": "Launch Strategy",

src/components/Navbar/Navbar.LanguageSettings.js

@@ -15,7 +15,15 @@ const LanguageSettings = () => {
   const i18nMappedKey = i18n.getMappedLanguageKey()
 
   const changeLanguageHandler = (lang) => {
+    const { pendo } = window
+
     i18n.changeLanguage(LANGUAGES[lang])
+
+    if (pendo) {
+      pendo.updateOptions({
+        language: LANGUAGES[lang],
+      })
+    }
   }
 
   return (

src/constants/variables.js

@@ -3,3 +3,6 @@ import { isElectronApp } from '../redux/config'
 export const MAX_STRATEGY_LABEL_LENGTH = 150
 export const DONT_SHOW_DMS_MODAL_KEY = 'HF_UI_DONT_SHOW_DMS_MODAL'
 export const MIN_SAFE_WIDTH = isElectronApp ? 1200 : 100
+
+// A random visitor ID which is generated on login and is used for Pendo tracking
+export const LOCAL_STORAGE_UID = 'HF_VISITOR_ID'

src/index.js

@@ -9,6 +9,7 @@ import HFUIWrapper from './components/HFUIWrapper'
 import i18n from './locales/i18n'
 import { isElectronApp } from './redux/config'
 
+import './util/pendo'
 import './passive_listener_fix'
 import './index.css'
 

src/modals/AppSettingsModal/AppSettingsModal.Analytics.js

@@ -10,9 +10,13 @@ import {
   SETTINGS_KEYS,
   getOptinCrashReports,
   getOptinBFXAnalytics,
+  getOptinVendorPendo,
 } from '../../redux/selectors/ui'
 import {
   METRICS_CODE_REF_URL,
+  PENDO_CODE_REF_URL,
+  PENDO_PRIVACY_POLICY_URL,
+  PENDO_WEB_URL,
   UNIQUE_ID_CODE_REF_URL,
 } from '../../redux/config'
 // import InnerModal from '../../ui/InnerModal/InnerModal'
@@ -23,6 +27,7 @@ const Analytics = () => {
 
   const optinCrashReports = useSelector(getOptinCrashReports)
   const optinBFXAnalytics = useSelector(getOptinBFXAnalytics)
+  const optinVendorPendo = useSelector(getOptinVendorPendo)
 
   const optinCrashReportsHandler = (isChecked) => {
     dispatch(
@@ -38,6 +43,13 @@ const Analytics = () => {
     dispatch(GAActions.updateSettings())
   }
 
+  const optinVendorPendoHandler = (isChecked) => {
+    dispatch(
+      WSActions.saveSetting(SETTINGS_KEYS.OPT_IN_VENDOR_PENDO, isChecked),
+    )
+    dispatch(GAActions.updateSettings())
+  }
+
   return (
     <div>
       <div className='appsettings-modal__setting appsettings-modal__setting--crash-reports'>
@@ -86,6 +98,43 @@ const Analytics = () => {
           />
         </div>
       </div>
+      <div className='appsettings-modal__setting appsettings-modal__setting--crash-reports'>
+        <Checkbox
+          onChange={optinVendorPendoHandler}
+          label={t('helpUsImproveModal.pendoUsage')}
+          checked={optinVendorPendo}
+          className='appsettings-modal__checkbox'
+        />
+        <p className='appsettings-modal__description'>
+          <Trans
+            t={t}
+            i18nKey='helpUsImproveModal.pendoUsageDesc'
+            components={{
+              pendoURL: (
+                <a
+                  href={PENDO_WEB_URL}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                />
+              ),
+              pendoPP: (
+                <a
+                  href={PENDO_PRIVACY_POLICY_URL}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                />
+              ),
+              codeRefUrl: (
+                <a
+                  href={PENDO_CODE_REF_URL}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                />
+              ),
+            }}
+          />
+        </p>
+      </div>
     </div>
   )
 }

src/modals/HelpUsImproveHoneyModal/HelpUsImproveHoneyModal.FirstStep.js

@@ -9,7 +9,7 @@ import {
   TERMS_CONDITIONS_URL,
 } from '../AppSettingsModal/AppSettingsModal.constants'
 import Modal from '../../ui/Modal'
-import { UNIQUE_ID_CODE_REF_URL } from '../../redux/config'
+import { PENDO_CODE_REF_URL, UNIQUE_ID_CODE_REF_URL } from '../../redux/config'
 
 const HelpUsImproveHoneyModalFirstStep = ({ onSubmit, goToSecondStep }) => {
   const { t } = useTranslation()
@@ -52,6 +52,23 @@ const HelpUsImproveHoneyModalFirstStep = ({ onSubmit, goToSecondStep }) => {
           <Trans
             t={t}
             i18nKey='helpUsImproveModal.willItem2'
+            components={{
+              bold: <b />,
+              codeRefUrl: (
+                <a
+                  href={PENDO_CODE_REF_URL}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                />
+              ),
+            }}
+          />
+        </li>
+        <li className='will-list-item'>
+          <Icon name='check' className='check-icon' />
+          <Trans
+            t={t}
+            i18nKey='helpUsImproveModal.willItem3'
             components={{
               bold: <b />,
               codeRefUrl: (

src/modals/HelpUsImproveHoneyModal/HelpUsImproveHoneyModal.SecondStep.js

@@ -9,6 +9,9 @@ import { SWITCH_THEME } from '../../components/SwitchMode/SwitchMode'
 import Modal from '../../ui/Modal'
 import {
   METRICS_CODE_REF_URL,
+  PENDO_CODE_REF_URL,
+  PENDO_PRIVACY_POLICY_URL,
+  PENDO_WEB_URL,
   UNIQUE_ID_CODE_REF_URL,
 } from '../../redux/config'
 
@@ -20,6 +23,8 @@ const HelpUsImproveHoneySecondStep = ({
   setOptinCrashReports,
   optinBFXAnalytics,
   setOptinBFXAnalytics,
+  optinVendorPendo,
+  setOptinVendorPendo,
 }) => {
   const { t } = useTranslation()
 
@@ -80,6 +85,47 @@ const HelpUsImproveHoneySecondStep = ({
           />
         </p>
       </div>
+      <div className='advanced-configuration'>
+        <div className='adv-setting-toggle'>
+          <span>{t('helpUsImproveModal.pendoUsage')}</span>
+          <ToggleSwitch
+            checked={optinVendorPendo}
+            onChange={setOptinVendorPendo}
+            onColor={SWITCH_THEME[settingsTheme].onColor}
+            offColor={SWITCH_THEME[settingsTheme].offColor}
+            className='toggle-switch'
+          />
+        </div>
+        <p>
+          <Trans
+            t={t}
+            i18nKey='helpUsImproveModal.pendoUsageDesc'
+            components={{
+              pendoURL: (
+                <a
+                  href={PENDO_WEB_URL}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                />
+              ),
+              pendoPP: (
+                <a
+                  href={PENDO_PRIVACY_POLICY_URL}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                />
+              ),
+              codeRefUrl: (
+                <a
+                  href={PENDO_CODE_REF_URL}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                />
+              ),
+            }}
+          />
+        </p>
+      </div>
       <Modal.Footer>
         <Modal.Button intent={Intent.NONE} onClick={goToFirstStep}>
           {t('ui.goBack')}
@@ -99,6 +145,8 @@ HelpUsImproveHoneySecondStep.propTypes = {
   setOptinCrashReports: PropTypes.func.isRequired,
   optinBFXAnalytics: PropTypes.bool.isRequired,
   setOptinBFXAnalytics: PropTypes.func.isRequired,
+  optinVendorPendo: PropTypes.bool.isRequired,
+  setOptinVendorPendo: PropTypes.func.isRequired,
   settingsTheme: PropTypes.oneOf([THEMES.LIGHT, THEMES.DARK]).isRequired,
 }
 

src/modals/HelpUsImproveHoneyModal/HelpUsImproveHoneyModal.js

@@ -20,6 +20,7 @@ const HelpUsImproveHoney = ({
   const [isFirstStep, , goToFirstStep, goToSecondStep] = useToggle(true)
   const [optinCrashReports, setOptinCrashReports] = useState(true)
   const [optinBFXAnalytics, setOptinBFXAnalytics] = useState(true)
+  const [optinVendorPendo, setOptinVendorPendo] = useState(true)
 
   const { t } = useTranslation()
 
@@ -28,12 +29,14 @@ const HelpUsImproveHoney = ({
       updateSettings({
         [SETTINGS_KEYS.OPT_IN_CRASH_REPORTS]: true,
         [SETTINGS_KEYS.OPT_IN_BFX_ANALYTICS]: true,
+        [SETTINGS_KEYS.OPT_IN_VENDOR_PENDO]: true,
         [SETTINGS_KEYS.SHOW_OPT_IN_MODAL]: false,
       })
     } else {
       updateSettings({
         [SETTINGS_KEYS.OPT_IN_CRASH_REPORTS]: optinCrashReports,
         [SETTINGS_KEYS.OPT_IN_BFX_ANALYTICS]: optinBFXAnalytics,
+        [SETTINGS_KEYS.OPT_IN_VENDOR_PENDO]: optinVendorPendo,
         [SETTINGS_KEYS.SHOW_OPT_IN_MODAL]: false,
       })
     }
@@ -69,6 +72,8 @@ const HelpUsImproveHoney = ({
           setOptinCrashReports={setOptinCrashReports}
           optinBFXAnalytics={optinBFXAnalytics}
           setOptinBFXAnalytics={setOptinBFXAnalytics}
+          optinVendorPendo={optinVendorPendo}
+          setOptinVendorPendo={setOptinVendorPendo}
         />
       )}
     </Modal>

src/redux/actions/ui.js

@@ -163,6 +163,11 @@ export const removeStrategy = (authToken, id) => ({
   payload: { authToken, id },
 })
 
+export const setPendoState = (isInitialized, auid) => ({
+  type: types.SET_PENDO_STATE,
+  payload: { isInitialized, auid },
+})
+
 export const logInformation = (message, level, action, trace) => ({
   type: types.LOG,
   payload: {
@@ -194,5 +199,6 @@ export default {
   removeStrategy,
   setCurrentStrategy,
   setIsStrategyDirty,
+  setPendoState,
   logInformation,
 }

src/redux/actions/ws.js

@@ -23,6 +23,11 @@ export default {
   disconnected: (alias) => ({ type: t.DISCONNECTED, payload: { alias } }),
   disconnect: (alias) => ({ type: t.DISCONNECT, payload: { alias } }),
 
+  recvUserAuid: (auid, mode) => ({
+    type: t.SET_AUID,
+    payload: { auid, mode },
+  }),
+
   setBacktestLoading: () => ({
     type: t.SET_BACKTEST_LOADING,
     payload: {},

src/redux/config.js

@@ -53,6 +53,9 @@ const STOP_ORDER_ARTICLE_URL = 'https://support.bitfinex.com/hc/en-us/articles/1
 
 const SETUP_TIMESTAMP_FORMAT_ARTICLE = 'https://bitfinex-honey.readme.io/docs/timestamp-format?utm-source=standalone'
 
+const PENDO_WEB_URL = 'https://www.pendo.io'
+const PENDO_PRIVACY_POLICY_URL = 'https://www.pendo.io/legal/privacy-policy'
+const PENDO_CODE_REF_URL = 'https://github.com/bitfinexcom/bfx-hf-ui-core/blob/main/src/redux/sagas/ui/pendo_identify.js'
 const METRICS_CODE_REF_URL = 'https://github.com/bitfinexcom/bfx-hf-ui-core/blob/main/src/redux/sagas/ui/on_log.js#L63-L65'
 const UNIQUE_ID_CODE_REF_URL = 'https://github.com/bitfinexcom/bfx-hf-server/blob/10d9db0a660661e8794d5c0a336ad04bbe52a467/lib/ws_servers/api/metrics_client.js#L154-L157'
 
@@ -99,6 +102,9 @@ export {
   SETUP_TIMESTAMP_FORMAT_ARTICLE,
   DISCUSSION_BOARD_URL,
   DISCORD_URL,
+  PENDO_WEB_URL,
+  PENDO_PRIVACY_POLICY_URL,
+  PENDO_CODE_REF_URL,
   METRICS_CODE_REF_URL,
   UNIQUE_ID_CODE_REF_URL,
 }

src/redux/constants/ui.js

@@ -41,5 +41,6 @@ module.exports = {
   TOGGLE_UI_MODAL_STATE: 'UI_TOGGLE_UI_MODAL_STATE',
 
   REMOVE_STRATEGY: 'UI_REMOVE_STRATEGY',
+  SET_PENDO_STATE: 'UI_SET_PENDO_STATE',
   LOG: 'UI_LOG',
 }

src/redux/constants/ws.js

@@ -20,6 +20,7 @@ export default {
   DISCONNECTED: 'WS_DISCONNECTED',
   FLUSH_QUEUE: 'WS_FLUSH_QUEUE',
 
+  SET_AUID: 'WS_SET_AUID',
   DATA_AUTH_CONFIGURED: 'WS_DATA_AUTH_CONFIGURED',
   DATA_AUTH_TOKEN: 'WS_DATA_AUTH_TOKEN',
   DATA_WEB_AUTH_SUCCESS: 'WS_DATA_WEB_AUTH_SUCCESS',

src/redux/middleware/ws/on_message.js

@@ -83,6 +83,13 @@ export default (alias, store) => (e = {}) => {
         break
       }
 
+      case 'info.auid': {
+        const [, auid, { mode }] = payload
+
+        store.dispatch(WSActions.recvUserAuid(auid, mode))
+        break
+      }
+
       case 'auth.user_id': {
         const [, userId, { mode } = {}] = payload
         store.dispatch(WSActions.recvUserId(userId))

src/redux/reducers/ui/index.js

@@ -88,6 +88,9 @@ function getInitialState() {
     isApplicationHidden: false,
     isFullscreenBarShown: false,
     isRCDisclaimerShown: false,
+    pendo: {
+      isInitialized: false,
+    },
   }
 
   _map(_values(UI_MODAL_KEYS), (modalKey) => {
@@ -548,6 +551,13 @@ function reducer(state = getInitialState(), action = {}) {
       }
     }
 
+    case types.SET_PENDO_STATE: {
+      return {
+        ...state,
+        pendo: { ...payload },
+      }
+    }
+
     default: {
       return state
     }

src/redux/sagas/ui/index.js

@@ -9,6 +9,7 @@ import workerFetchRemoteVersion from './worker_fetch_remote_version'
 import onChangeMode from './on_change_mode'
 import onRemoveStrategy from './on_remove_strategy'
 import onShowNotification from './on_show_notification'
+import pendoIdentify from './pendo_identify'
 import addComponent from './on_add_component'
 import removeComponent from './on_remove_component'
 import createLayout from './on_create_layout'
@@ -22,6 +23,7 @@ export default function* () {
   yield takeEvery(UITypes.SAVE_SETTINGS, onSaveSettings)
   yield takeEvery(UITypes.CHANGE_MODE, onChangeMode)
   yield takeEvery(UITypes.REMOVE_STRATEGY, onRemoveStrategy)
+  yield takeEvery(WSTypes.SET_AUID, pendoIdentify)
   yield takeEvery(UITypes.LOG, onLog)
   yield takeEvery(UITypes.ADD_COMPONENT, addComponent)
   yield takeEvery(UITypes.REMOVE_COMPONENT, removeComponent)