Merge pull request #8638 from sashodada/userguiding-integration

feat: Userguiding integration

package-lock.json

@@ -80,6 +80,7 @@
         "lodash.merge": "4.6.2",
         "lodash.mergewith": "4.6.2",
         "lodash.omit": "3.1.0",
+        "lodash.sample": "4.2.1",
         "lodash.uniqby": "4.7.0",
         "mini-css-extract-plugin": "1.6.2",
         "minilog": "2.1.0",
@@ -17059,6 +17060,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.sample": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lodash.sample/-/lodash.sample-4.2.1.tgz",
+      "integrity": "sha512-odCZufa8jYDBZQ+JOSePWRs+iApPdvIp3qAiKc9F22RdSCMLuUu60Jvgs2M6qMisKAeBZoumAkqDiGr9HDym/Q==",
+      "dev": true
+    },
     "node_modules/lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",

package.json

@@ -116,6 +116,7 @@
     "lodash.mergewith": "4.6.2",
     "lodash.omit": "3.1.0",
     "lodash.uniqby": "4.7.0",
+    "lodash.sample": "4.2.1",
     "mini-css-extract-plugin": "1.6.2",
     "minilog": "2.1.0",
     "pako": "0.2.8",

src/lib/user-guiding.js

@@ -0,0 +1,124 @@
+const api = require('./api');
+const sample = require('lodash.sample');
+
+const USER_GUIDING_ID = process.env.USER_GUIDING_ID;
+const AUTONOMY_SURVEY_ID = 3048;
+const RELATIONSHIP_SURVEY_ID = 3049;
+const JOY_SURVEY_ID = 3050;
+const COMPETENCE_SURVEY_ID = 3045;
+const EDITOR_INTERACTION_SURVEY_IDS = [COMPETENCE_SURVEY_ID, JOY_SURVEY_ID];
+
+const CONDITIONS = {condition_list: [
+    'IsLoggedIn',
+    'NotAdmin',
+    'NotMuted'
+]};
+
+const USER_GUIDING_SNIPPET = `
+    (function(g, u, i, d, e, s) {
+        g[e] = g[e] || [];
+        var f = u.getElementsByTagName(i)[0];
+        var k = u.createElement(i);
+        k.async = true;
+        k.src = 'https://static.userguiding.com/media/user-guiding-' + s + '-embedded.js';
+        f.parentNode.insertBefore(k, f);
+        if (g[d]) return;
+        var ug = g[d] = {
+            q: []
+        };
+        ug.c = function(n) {
+            return function() {
+                ug.q.push([n, arguments])
+            };
+        };
+        var m = ['previewGuide', 'finishPreview', 'track', 'identify', 'hideChecklist', 'launchChecklist'];
+        for (var j = 0; j < m.length; j += 1) {
+            ug[m[j]] = ug.c(m[j]);
+        }
+    })(window, document, 'script', 'userGuiding', 'userGuidingLayer', '${USER_GUIDING_ID}');
+`;
+
+const activateUserGuiding = (userId, callback) => {
+    if (window.userGuiding) {
+        callback();
+        return;
+    }
+
+    const userGuidingScript = document.createElement('script');
+    userGuidingScript.innerHTML = USER_GUIDING_SNIPPET;
+    document.head.insertBefore(userGuidingScript, document.head.firstChild);
+
+    window.userGuidingSettings = {disablePageViewAutoCapture: true};
+
+    window.userGuidingLayer.push({
+        event: 'onload',
+        fn: () => window.userGuiding.identify(userId.toString())
+    });
+
+    window.userGuidingLayer.push({
+        event: 'onIdentificationComplete',
+        fn: callback
+    });
+};
+
+const attemptDisplayUserGuidingSurvey = (userId, permissions, guideId, callback) => {
+    if (!USER_GUIDING_ID || !process.env.SORTING_HAT_HOST) {
+        return;
+    }
+
+    api({
+        uri: '/user_guiding',
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-USERID': userId,
+            'X-PERMISSIONS': JSON.stringify(permissions),
+            'X-CONDITIONS': JSON.stringify(CONDITIONS),
+            'X-QUESTION-NUMBER': guideId
+        },
+        host: process.env.SORTING_HAT_HOST
+    }, (err, body, res) => {
+        if (err || res.statusCode !== 200) {
+            return;
+        }
+
+        if (body?.result === 'true') {
+            activateUserGuiding(userId, callback);
+        }
+    });
+};
+
+const onCommented = (userId, permissions) => {
+    attemptDisplayUserGuidingSurvey(
+        userId,
+        permissions,
+        AUTONOMY_SURVEY_ID,
+        () => window.userGuiding.launchSurvey(AUTONOMY_SURVEY_ID)
+    );
+};
+
+const onProjectShared = (userId, permissions) => {
+    attemptDisplayUserGuidingSurvey(
+        userId,
+        permissions,
+        RELATIONSHIP_SURVEY_ID,
+        () => window.userGuiding.launchSurvey(RELATIONSHIP_SURVEY_ID)
+    );
+};
+
+const onProjectLoaded = (userId, permissions) => {
+    const surveyId = sample(EDITOR_INTERACTION_SURVEY_IDS);
+
+    attemptDisplayUserGuidingSurvey(
+        userId,
+        permissions,
+        surveyId,
+        () => window.userGuiding.launchSurvey(surveyId)
+    );
+};
+
+module.exports = {
+    onProjectLoaded,
+    onCommented,
+    onProjectShared
+};

src/views/preview/presentation.jsx

@@ -34,11 +34,13 @@ const thumbnailUrl = require('../../lib/user-thumbnail');
 const FormsyProjectUpdater = require('./formsy-project-updater.jsx');
 const EmailConfirmationModal = require('../../components/modal/email-confirmation/modal.jsx');
 const EmailConfirmationBanner = require('../../components/dropdown-banner/email-confirmation/banner.jsx');
+const {onCommented} = require('../../lib/user-guiding.js');
 
 const projectShape = require('./projectshape.jsx').projectShape;
 require('./preview.scss');
 
 const frameless = require('../../lib/frameless');
+const {useState, useCallback} = require('react');
 
 // disable enter key submission on formsy input fields; otherwise formsy thinks
 // we meant to trigger the "See inside" button. Instead, treat these keypresses
@@ -127,6 +129,7 @@ const PreviewPresentation = ({
     showCloudDataAlert,
     showCloudDataAndVideoAlert,
     showUsernameBlockAlert,
+    permissions,
     projectHost,
     projectId,
     projectInfo,
@@ -140,9 +143,11 @@ const PreviewPresentation = ({
     showEmailConfirmationBanner,
     singleCommentId,
     socialOpen,
+    user,
     userOwnsProject,
     visibilityInfo
 }) => {
+    const [hasSubmittedComment, setHasSubmittedComment] = useState(false);
     const shareDate = ((projectInfo.history && projectInfo.history.shared)) ? projectInfo.history.shared : '';
     const revisedDate = ((projectInfo.history && projectInfo.history.modified)) ? projectInfo.history.modified : '';
     const showInstructions = editable || projectInfo.instructions ||
@@ -215,6 +220,15 @@ const PreviewPresentation = ({
             ))}
         </FlexRow>
     );
+
+    const onAddCommentWrapper = useCallback(body => {
+        onAddComment(body);
+        if (!hasSubmittedComment && user) {
+            setHasSubmittedComment(true);
+            onCommented(user.id, permissions);
+        }
+    }, [hasSubmittedComment, user]);
+    
     return (
         <div className="preview">
             {showEmailConfirmationModal && <EmailConfirmationModal
@@ -610,7 +624,7 @@ const PreviewPresentation = ({
                                                         isLoggedIn ? (
                                                             isShared && <ComposeComment
                                                                 postURI={`/proxy/comments/project/${projectId}`}
-                                                                onAddComment={onAddComment}
+                                                                onAddComment={onAddCommentWrapper}
                                                             />
                                                         ) : (
                                                         /* TODO add box for signing in to leave a comment */
@@ -784,6 +798,7 @@ PreviewPresentation.propTypes = {
     onUpdateProjectThumbnail: PropTypes.func,
     originalInfo: projectShape,
     parentInfo: projectShape,
+    permissions: PropTypes.object,
     projectHost: PropTypes.string,
     projectId: PropTypes.string,
     projectInfo: projectShape,
@@ -800,6 +815,9 @@ PreviewPresentation.propTypes = {
     showUsernameBlockAlert: PropTypes.bool,
     singleCommentId: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
     socialOpen: PropTypes.bool,
+    user: PropTypes.shape({
+        id: PropTypes.number
+    }),
     userOwnsProject: PropTypes.bool,
     visibilityInfo: PropTypes.shape({
         censored: PropTypes.bool,

src/views/preview/project-view.jsx

@@ -25,6 +25,10 @@ const ConnectedLogin = require('../../components/login/connected-login.jsx');
 const CanceledDeletionModal = require('../../components/login/canceled-deletion-modal.jsx');
 const NotAvailable = require('../../components/not-available/not-available.jsx');
 const Meta = require('./meta.jsx');
+const {
+    onProjectShared,
+    onProjectLoaded
+} = require('../../lib/user-guiding.js');
 
 const sessionActions = require('../../redux/session.js');
 const {selectProjectCommentsGloballyEnabled, selectIsTotallyNormal} = require('../../redux/session');
@@ -40,6 +44,25 @@ const IntlGUI = injectIntl(GUI.default);
 const localStorageAvailable = 'localStorage' in window && window.localStorage !== null;
 
 const xhr = require('xhr');
+const {useEffect} = require('react');
+
+const IntlGUIWithProjectHandler = ({user, permissions, ...props}) => {
+    useEffect(() => {
+        if (props.projectId && props.projectId !== '0') {
+            onProjectLoaded(user.id, permissions);
+        }
+    }, [props.projectId, user.id, permissions]);
+
+    return <IntlGUI {...props} />;
+};
+
+IntlGUIWithProjectHandler.propTypes = {
+    ...GUI.propTypes,
+    user: PropTypes.shape({
+        id: PropTypes.number
+    }),
+    permissions: PropTypes.object
+};
 
 class Preview extends React.Component {
     constructor (props) {
@@ -627,6 +650,7 @@ class Preview extends React.Component {
             justRemixed: false,
             justShared: true
         });
+        onProjectShared(this.props.user.id, this.props.permissions);
     }
     handleShareAttempt () {
         this.setState({
@@ -786,6 +810,7 @@ class Preview extends React.Component {
                             moreCommentsToLoad={this.props.moreCommentsToLoad}
                             originalInfo={this.props.original}
                             parentInfo={this.props.parent}
+                            permissions={this.props.permissions}
                             projectHost={this.props.projectHost}
                             projectId={this.state.projectId}
                             projectInfo={this.props.projectInfo}
@@ -802,6 +827,7 @@ class Preview extends React.Component {
                             showUsernameBlockAlert={this.state.showUsernameBlockAlert}
                             singleCommentId={this.state.singleCommentId}
                             socialOpen={this.state.socialOpen}
+                            user={this.props.user}
                             userOwnsProject={this.props.userOwnsProject}
                             visibilityInfo={this.props.visibilityInfo}
                             onAddComment={this.handleAddComment}
@@ -841,7 +867,7 @@ class Preview extends React.Component {
                     </Page> :
                     <React.Fragment>
                         {showGUI && (
-                            <IntlGUI
+                            <IntlGUIWithProjectHandler
                                 assetHost={this.props.assetHost}
                                 authorId={this.props.authorId}
                                 authorThumbnailUrl={this.props.authorThumbnailUrl}
@@ -879,6 +905,8 @@ class Preview extends React.Component {
                                 onUpdateProjectId={this.handleUpdateProjectId}
                                 onUpdateProjectThumbnail={this.props.handleUpdateProjectThumbnail}
                                 onUpdateProjectTitle={this.handleUpdateProjectTitle}
+                                user={this.props.user}
+                                permissions={this.props.permissions}
                             />
                         )}
                         {this.props.registrationOpen && (
@@ -957,6 +985,7 @@ Preview.propTypes = {
     moreCommentsToLoad: PropTypes.bool,
     original: projectShape,
     parent: projectShape,
+    permissions: PropTypes.object,
     playerMode: PropTypes.bool,
     projectHost: PropTypes.string.isRequired,
     projectInfo: projectShape,
@@ -1076,6 +1105,7 @@ const mapStateToProps = state => {
         moreCommentsToLoad: state.comments.moreCommentsToLoad,
         original: state.preview.original,
         parent: state.preview.parent,
+        permissions: state.permissions,
         playerMode: state.scratchGui.mode.isPlayerOnly,
         projectInfo: state.preview.projectInfo,
         projectNotAvailable: state.preview.projectNotAvailable,

webpack.config.js

@@ -279,7 +279,9 @@ module.exports = {
             'process.env.DEBUG': Boolean(process.env.DEBUG),
             'process.env.GA_ID': `"${process.env.GA_ID || 'UA-000000-01'}"`,
             'process.env.GTM_ENV_AUTH': `"${process.env.GTM_ENV_AUTH || ''}"`,
-            'process.env.GTM_ID': process.env.GTM_ID ? `"${process.env.GTM_ID}"` : null
+            'process.env.GTM_ID': process.env.GTM_ID ? `"${process.env.GTM_ID}"` : null,
+            'process.env.USER_GUIDING_ID': `"${process.env.USER_GUIDING_ID || ''}"`,
+            'process.env.SORTING_HAT_HOST': `"${process.env.SORTING_HAT_HOST || ''}"`
         })
     ])
         .concat(process.env.ANALYZE_BUNDLE === 'true' ? [