Fix (hopefully) for the community registration flow

It turned out that community registration flow did not work for
communities protected by DocuSign terms, if at a page there were
multiple instances of Join Community buttons. The reason was that
multiple terms modals opened simultaneously (and invisibly to the
end-user), and failed when they tried to load the same DocuSign term.

Author: birdofpreyru

.exchange-rates.cache

@@ -1 +1 @@
-{"disclaimer":"Usage subject to terms: https://openexchangerates.org/terms","license":"https://openexchangerates.org/license","timestamp":1523109602,"base":"USD","rates":{"AED":3.673014,"AFN":69.55,"ALL":105.4,"AMD":479.87899,"ANG":1.784605,"AOA":214.3575,"ARS":20.1495,"AUD":1.3019,"AWG":1.784998,"AZN":1.7025,"BAM":1.5934,"BBD":2,"BDT":82.96,"BGN":1.59263,"BHD":0.377025,"BIF":1781,"BMD":1,"BND":1.317363,"BOB":6.910011,"BRL":3.368012,"BSD":1,"BTC":0.000146198031,"BTN":65.156563,"BWP":9.611152,"BYN":1.962861,"BZD":2.00983,"CAD":1.2791,"CDF":1615,"CHF":0.959255,"CLF":0.02218,"CLP":604.8,"CNH":6.311338,"CNY":6.3017,"COP":2817.460317,"CRC":567.097559,"CUC":1,"CUP":25.5,"CVE":90.45,"CZK":20.654991,"DJF":177,"DKK":6.0634,"DOP":49.527617,"DZD":114.36,"EGP":17.6585,"ERN":15.09,"ETB":27.417298,"EUR":0.81382,"FJD":2.043351,"FKP":0.7096,"GBP":0.7096,"GEL":2.425502,"GGP":0.7096,"GHS":4.437767,"GIP":0.7096,"GMD":47.32,"GNF":9026.25,"GTQ":7.415922,"GYD":206.749115,"HKD":7.84895,"HNL":23.681908,"HRK":6.045872,"HTG":64.707141,"HUF":254.415,"IDR":13776.647095,"ILS":3.53138,"IMP":0.7096,"INR":64.9145,"IQD":1189,"IRR":37636.02369,"ISK":98.768306,"JEP":0.7096,"JMD":124.766797,"JOD":0.709503,"JPY":106.93,"KES":101,"KGS":68.300749,"KHR":4008,"KMF":402.498446,"KPW":900,"KRW":1070.44,"KWD":0.300118,"KYD":0.833149,"KZT":319.890241,"LAK":8315,"LBP":1513,"LKR":155.45,"LRD":131.751267,"LSL":11.936136,"LYD":1.332,"MAD":9.215767,"MDL":16.433954,"MGA":3230.2,"MKD":50.1385,"MMK":1332.860206,"MNT":2388.332694,"MOP":8.087069,"MRO":355.5,"MRU":35.4,"MUR":33.5735,"MVR":15.404937,"MWK":726.3,"MXN":18.2883,"MYR":3.870046,"MZN":61.17,"NAD":12.05125,"NGN":360,"NIO":31.162733,"NOK":7.8285,"NPR":104.23432,"NZD":1.37645,"OMR":0.384981,"PAB":1,"PEN":3.232482,"PGK":3.261758,"PHP":52.044,"PKR":115.5,"PLN":3.417343,"PYG":5561.8,"QAR":3.640999,"RON":3.796299,"RSD":96.23474,"RUB":57.989,"RWF":866.275,"SAR":3.7508,"SBD":7.806884,"SCR":13.455,"SDG":18.160225,"SEK":8.39015,"SGD":1.315422,"SHP":0.7096,"SLL":7664.007735,"SOS":578.199728,"SRD":7.468,"SSP":130.2634,"STD":19928.859374,"STN":20.1,"SVC":8.748292,"SYP":514.98999,"SZL":11.932171,"THB":31.231,"TJS":8.824145,"TMT":3.499986,"TND":2.431109,"TOP":2.237882,"TRY":4.045708,"TTD":6.7429,"TWD":29.328,"TZS":2262.9,"UAH":26.2729,"UGX":3692.15,"USD":1,"UYU":28.265527,"UZS":8100.2,"VEF":40241.5117,"VND":22795.76534,"VUV":106.388832,"WST":2.526438,"XAF":533.830926,"XAG":0.06105823,"XAU":0.00075007,"XCD":2.70255,"XDR":0.690534,"XOF":533.830926,"XPD":0.00110637,"XPF":97.114558,"XPT":0.00109154,"YER":250.306642,"ZAR":12.032145,"ZMW":9.384,"ZWL":322.355011}}
+{"disclaimer":"Usage subject to terms: https://openexchangerates.org/terms","license":"https://openexchangerates.org/license","timestamp":1523394000,"base":"USD","rates":{"AED":3.673014,"AFN":69.841474,"ALL":104.75,"AMD":480.835755,"ANG":1.78455,"AOA":217.689,"ARS":20.1498,"AUD":1.288598,"AWG":1.784998,"AZN":1.7025,"BAM":1.586412,"BBD":2,"BDT":82.949445,"BGN":1.583075,"BHD":0.376926,"BIF":1781,"BMD":1,"BND":1.30961,"BOB":6.910011,"BRL":3.409706,"BSD":1,"BTC":0.000146310823,"BTN":64.987163,"BWP":9.636446,"BYN":1.980564,"BZD":2.009463,"CAD":1.260319,"CDF":1615,"CHF":0.956855,"CLF":0.02201,"CLP":600.4,"CNH":6.277035,"CNY":6.283404,"COP":2771.5,"CRC":567.465,"CUC":1,"CUP":25.5,"CVE":89.875,"CZK":20.4789,"DJF":176.525,"DKK":6.026823,"DOP":49.42,"DZD":113.880333,"EGP":17.681,"ERN":14.996667,"ETB":27.55,"EUR":0.809323,"FJD":2.029692,"FKP":0.7055,"GBP":0.7055,"GEL":2.426152,"GGP":0.7055,"GHS":4.435,"GIP":0.7055,"GMD":47.26,"GNF":9025.5,"GTQ":7.415666,"GYD":207.14,"HKD":7.84958,"HNL":23.660322,"HRK":6.011264,"HTG":64.706641,"HUF":251.93,"IDR":13761.147095,"ILS":3.501903,"IMP":0.7055,"INR":64.935,"IQD":1187.5,"IRR":37639.02369,"ISK":98.34,"JEP":0.7055,"JMD":124.781797,"JOD":0.709503,"JPY":107.19263007,"KES":101.101,"KGS":68.275351,"KHR":4005,"KMF":398.6,"KPW":900,"KRW":1064.7,"KWD":0.29987,"KYD":0.833134,"KZT":321.06,"LAK":8310,"LBP":1515.55,"LKR":155.55,"LRD":131.715,"LSL":12.055,"LYD":1.330156,"MAD":9.1718,"MDL":16.451521,"MGA":3205,"MKD":49.83175,"MMK":1324.65,"MNT":2389.832694,"MOP":8.083019,"MRO":355.5,"MRU":35.47,"MUR":33.598,"MVR":15.404937,"MWK":722.08,"MXN":18.2659,"MYR":3.871619,"MZN":60.99,"NAD":12.0525,"NGN":360,"NIO":31.19,"NOK":7.79538,"NPR":103.969545,"NZD":1.35846,"OMR":0.384996,"PAB":1,"PEN":3.238763,"PGK":3.234,"PHP":51.815,"PKR":115.78,"PLN":3.389,"PYG":5534.25,"QAR":3.640999,"RON":3.76902,"RSD":95.68,"RUB":63.1649,"RWF":860,"SAR":3.7587,"SBD":7.806884,"SCR":13.455839,"SDG":18.156826,"SEK":8.30604,"SGD":1.309245,"SHP":0.7055,"SLL":7729.007735,"SOS":577,"SRD":7.468,"SSP":130.2634,"STD":19869.909179,"STN":19.97,"SVC":8.747525,"SYP":514.98999,"SZL":12.06,"THB":31.195,"TJS":8.796594,"TMT":3.504988,"TND":2.390312,"TOP":2.225182,"TRY":4.112305,"TTD":6.728287,"TWD":29.192046,"TZS":2262.95,"UAH":25.926,"UGX":3691.5,"USD":1,"UYU":28.293384,"UZS":8115,"VEF":40241.5117,"VND":22788.26534,"VUV":106.192164,"WST":2.516171,"XAF":530.881357,"XAG":0.06034587,"XAU":0.00074582,"XCD":2.70255,"XDR":0.687937,"XOF":530.881357,"XPD":0.00105153,"XPF":96.577973,"XPT":0.00107644,"YER":250.3,"ZAR":12.0381,"ZMW":9.394379,"ZWL":322.355011}}

src/shared/actions/terms.js

@@ -187,6 +187,30 @@ function checkStatusDone(entity, tokens) {
   return checkStatus(MAX_ATTEMPTS);
 }
 
+/**
+ * Payload creator for the action that opens the specified terms modal.
+ * @param {String} modalInstanceUuid ID of the terms modal instance to be
+ *  opened. Any other instances of terms modals present in the page will be
+ *  closed automatically by this action, as it is not safe to open multiple
+ *  modals, (and makes no sense in current implementation).
+ * @param {???} selectedTerm Optional. Selected term. It was not documented by
+ *  author of related code, thus the exact value is not clear.
+ * @return {Object} Action payload.
+ */
+function openTermsModal(modalInstanceUuid, selectedTerm) {
+  return { modalInstanceUuid, selectedTerm };
+}
+
+/**
+ * Payload creator for the action that closes the specified terms modal.
+ * @param {String} modalInstanceUuid ID of the terms modal instance to be
+ *  closed. If another terms modal is open, it won't be affected.
+ * @return {String} Action payload.
+ */
+function closeTermsModal(modalInstanceUuid) {
+  return modalInstanceUuid;
+}
+
 export default createActions({
   TERMS: {
     GET_TERMS_INIT: _.identity,
@@ -197,8 +221,10 @@ export default createActions({
     GET_DOCU_SIGN_URL_DONE: getDocuSignUrlDone,
     AGREE_TERM_INIT: agreeTermInit,
     AGREE_TERM_DONE: agreeTermDone,
-    OPEN_TERMS_MODAL: _.identity,
-    CLOSE_TERMS_MODAL: _.noop,
+
+    OPEN_TERMS_MODAL: openTermsModal,
+    CLOSE_TERMS_MODAL: closeTermsModal,
+
     SELECT_TERM: _.identity,
     SIGN_DOCU: _.identity,
     CHECK_STATUS_INIT: _.noop,

src/shared/containers/ReviewOpportunityDetails.jsx

@@ -194,7 +194,7 @@ function mapDispatchToProps(dispatch) {
     },
     onPhaseExpand: () => dispatch(page.togglePhasesExpand()),
     openTermsModal: () => {
-      dispatch(terms.openTermsModal());
+      dispatch(terms.openTermsModal('ANY'));
     },
     selectTab: tab => dispatch(page.selectTab(tab)),
     setRoles: roles => dispatch(page.setRoles(roles)),

src/shared/containers/Terms.jsx

@@ -11,6 +11,8 @@ import _ from 'lodash';
 import Terms from 'components/Terms';
 import termsActions from 'actions/terms';
 
+let isAnyTermModalOpen = false;
+
 class TermsPageContainer extends React.Component {
   componentDidMount() {
     const { loadTerms, authTokens, entity, termsForEntity } = this.props;
@@ -31,37 +33,56 @@ class TermsPageContainer extends React.Component {
     }
   }
 
+  componentWillUnmount() {
+    if (this.forceOpen) isAnyTermModalOpen = false;
+  }
+
   render() {
+    const {
+      closeTermsModal,
+      instanceId,
+      openTermsModalUuid,
+    } = this.props;
+
+    if (openTermsModalUuid === 'ANY' && !isAnyTermModalOpen) {
+      isAnyTermModalOpen = true;
+      this.forceOpen = true;
+    }
+    const open = (openTermsModalUuid && openTermsModalUuid === instanceId)
+    || (openTermsModalUuid === 'ANY' && this.forceOpen);
+
     return (
       <div>
-        {this.props.showTermsModal &&
-          <Terms
-            agreeingTerm={this.props.agreeingTerm}
-            agreeTerm={termId => this.props.agreeTerm(this.props.authTokens, termId)}
-            canRegister={this.props.canRegister}
-            checkingStatus={this.props.checkingStatus}
-            checkStatus={() => this.props.checkStatus(this.props.authTokens, this.props.entity)}
-            defaultTitle={this.props.defaultTitle}
-            description={this.props.description}
-            details={this.props.termDetails}
-            docuSignUrl={this.props.docuSignUrl}
-            getDocuSignUrl={(templateId) => {
-              const base = window ? window.location.href.match('.*://[^/]*')[0] : '';
-              return this.props.getDocuSignUrl(this.props.authTokens,
-                templateId, `${base}/community-app-assets/iframe-break`);
-            }}
-            isLoadingTerms={this.props.isLoadingTerms}
-            loadDetails={termId => this.props.loadTermDetails(this.props.authTokens, termId)}
-            loadingDocuSignUrl={this.props.loadingDocuSignUrl}
-            loadingTermId={this.props.loadingTermId}
-            onCancel={this.props.closeTermsModal}
-            register={this.props.register}
-            selectedTerm={this.props.selectedTerm}
-            selectTerm={this.props.selectTerm}
-            signDocu={this.props.signDocu}
-            terms={this.props.terms}
-            viewOnly={this.props.viewOnly}
-          />
+        {
+          open ? (
+            <Terms
+              agreeingTerm={this.props.agreeingTerm}
+              agreeTerm={termId => this.props.agreeTerm(this.props.authTokens, termId)}
+              canRegister={this.props.canRegister}
+              checkingStatus={this.props.checkingStatus}
+              checkStatus={() => this.props.checkStatus(this.props.authTokens, this.props.entity)}
+              defaultTitle={this.props.defaultTitle}
+              description={this.props.description}
+              details={this.props.termDetails}
+              docuSignUrl={this.props.docuSignUrl}
+              getDocuSignUrl={(templateId) => {
+                const base = window ? window.location.href.match('.*://[^/]*')[0] : '';
+                return this.props.getDocuSignUrl(this.props.authTokens,
+                  templateId, `${base}/community-app-assets/iframe-break`);
+              }}
+              isLoadingTerms={this.props.isLoadingTerms}
+              loadDetails={termId => this.props.loadTermDetails(this.props.authTokens, termId)}
+              loadingDocuSignUrl={this.props.loadingDocuSignUrl}
+              loadingTermId={this.props.loadingTermId}
+              onCancel={() => closeTermsModal(instanceId)}
+              register={this.props.register}
+              selectedTerm={this.props.selectedTerm}
+              selectTerm={this.props.selectTerm}
+              signDocu={this.props.signDocu}
+              terms={this.props.terms}
+              viewOnly={this.props.viewOnly}
+            />
+          ) : null
         }
       </div>
     );
@@ -107,14 +128,23 @@ TermsPageContainer.propTypes = {
   entity: enitytType.isRequired,
   getDocuSignUrl: PT.func.isRequired,
   isLoadingTerms: PT.bool,
+
+  /* WARNING: This is very important prop! It is not safe to open multiple terms
+   * modal simultaneously: DocuSign terms will fail to load, if the same terms
+   * is shown in multiple modals. To prevent this, parent component should pass
+   * into terms container an UUID that will be used then in actions to open
+   * this exact modal. */
+  instanceId: PT.string.isRequired,
+
   loadingDocuSignUrl: PT.string,
   loadingTermId: PT.string,
   loadTermDetails: PT.func.isRequired,
   loadTerms: PT.func.isRequired,
+  openTermsModalUuid: PT.string.isRequired,
   register: PT.func.isRequired,
   selectedTerm: PT.shape(),
   selectTerm: PT.func.isRequired,
-  showTermsModal: PT.bool,
+
   signDocu: PT.func.isRequired,
   termDetails: PT.shape(),
   terms: PT.arrayOf(PT.shape()),
@@ -131,8 +161,8 @@ const mapStateToProps = (state, props) => ({
   isLoadingTerms: _.isEqual(state.terms.loadingTermsForEntity, props.entity),
   loadingDocuSignUrl: state.terms.loadingDocuSignUrl,
   loadingTermId: state.terms.loadingDetailsForTermId,
+  openTermsModalUuid: state.terms.openTermsModalUuid,
   selectedTerm: state.terms.selectedTerm,
-  showTermsModal: state.terms.showTermsModal,
   termDetails: state.terms.details,
   terms: state.terms.terms,
   termsForEntity: state.terms.entity,
@@ -142,8 +172,8 @@ const mapStateToProps = (state, props) => ({
 const mapDispatchToProps = (dispatch) => {
   const t = termsActions.terms;
   return {
-    closeTermsModal: () => {
-      dispatch(t.closeTermsModal());
+    closeTermsModal: (uuid) => {
+      dispatch(t.closeTermsModal(uuid));
     },
     selectTerm: (term) => {
       dispatch(t.selectTerm(term));

src/shared/containers/challenge-detail/index.jsx

@@ -500,7 +500,7 @@ const mapDispatchToProps = (dispatch) => {
       dispatch(cl.getChallengeSubtracksDone());
     },
     openTermsModal: (term) => {
-      dispatch(t.openTermsModal(term));
+      dispatch(t.openTermsModal('ANY', term));
     },
     updateChallenge: (challenge, tokenV3) => {
       const uuid = shortId();

src/shared/containers/tc-communities/JoinCommunity.jsx

@@ -8,31 +8,42 @@ import React from 'react';
 import PT from 'prop-types';
 import _ from 'lodash';
 import actions from 'actions/tc-communities';
+import shortId from 'shortid';
 import Terms from 'containers/Terms';
 import termsActions from 'actions/terms';
+
 import JoinCommunity, {
   STATE as JOIN_COMMUNITY,
 } from 'components/tc-communities/JoinCommunity';
 import { connect } from 'react-redux';
 
-const JoinCommunityContainer = (props) => {
-  const { token, groupIds, userId, terms, openTermsModal,
-    communityId, join, joinCommunityWrapper } = props;
+class JoinCommunityContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.instanceId = shortId();
+  }
 
-  const hasNotAgreedTerms = terms && terms.length && !_.every(terms, 'agreed');
-  const onJoinClick = hasNotAgreedTerms ? openTermsModal : join;
+  render() {
+    const { token, groupIds, userId, terms, openTermsModal,
+      communityId, join, joinCommunityWrapper } = this.props;
 
-  return (
-    <div className={joinCommunityWrapper}>
-      <Terms
-        entity={{ type: 'community', id: communityId }}
-        description="You are seeing these Terms & Conditions because you are going to join a community and you have to respect the terms below in order to be able to be a member."
-        register={() => join(token, groupIds[0], userId)}
-      />
-      <JoinCommunity {...props} join={onJoinClick} />
-    </div>
-  );
-};
+    const hasNotAgreedTerms = terms && terms.length && !_.every(terms, 'agreed');
+    const onJoinClick = hasNotAgreedTerms ?
+      () => openTermsModal(this.instanceId) : join;
+
+    return (
+      <div className={joinCommunityWrapper}>
+        <Terms
+          entity={{ type: 'community', id: communityId }}
+          description="You are seeing these Terms & Conditions because you are going to join a community and you have to respect the terms below in order to be able to be a member."
+          instanceId={this.instanceId}
+          register={() => join(token, groupIds[0], userId)}
+        />
+        <JoinCommunity {...this.props} join={onJoinClick} />
+      </div>
+    );
+  }
+}
 
 JoinCommunityContainer.defaultProps = {
   token: '',
@@ -93,9 +104,9 @@ function mapDispatchToProps(dispatch) {
     },
     resetJoinButton: () => dispatch(a.resetJoinButton()),
     showJoinConfirmModal: () => dispatch(a.showJoinConfirmModal()),
-    openTermsModal: () => {
+    openTermsModal: (uuid) => {
       dispatch(a.resetJoinButton());
-      dispatch(t.openTermsModal());
+      dispatch(t.openTermsModal(uuid));
     },
   };
 }

src/shared/reducers/terms.js

@@ -174,29 +174,41 @@ function onAgreeTermDone(state, action) {
 }
 
 /**
- * Handles TERMS/OPEN_TERMS_MODAL action.
+ * Opens the specified instance of terms modal + selects the terms to show in
+ * there, although the exact functioning of that functionality was not
+ * documented, thus has to be tracked.
  * @param {Object} state
  * @param {Object} action
  * @return {Object} New state.
  */
 function onOpenTermsModal(state, action) {
-  if (action.payload) {
-    return {
-      ...state,
-      showTermsModal: true,
-      selectedTerm: action.payload,
-      viewOnly: true,
-    };
+  const { modalInstanceUuid } = action.payload;
+
+  let { selectedTerm } = action.payload;
+  if (!selectedTerm) {
+    selectedTerm = _.find(state.terms, t => !t.agreed) || state.terms[0];
   }
-  const selectedTerm = _.find(state.terms, t => !t.agreed) || state.terms[0];
+
   return {
     ...state,
-    showTermsModal: true,
+    openTermsModalUuid: modalInstanceUuid,
     selectedTerm,
-    viewOnly: false,
+    viewOnly: Boolean(action.payload.selectedTerm),
   };
 }
 
+/**
+ * Closes the specified terms modal, if necessary.
+ * @param {Object} state
+ * @param {Object} action
+ * @return {Object} New state.
+ */
+function onCloseTermsModal(state, { payload }) {
+  if (payload !== state.openTermsModalUuid
+  && state.openTermsModalUuid !== 'ANY') return state;
+  return { ...state, openTermsModalUuid: '' };
+}
+
 /**
  * Handles TERMS/SIGN_DOCU action.
  * @param {Object} state
@@ -275,8 +287,10 @@ function create(initialState) {
       agreeingTerm: payload,
     }),
     [actions.terms.agreeTermDone]: onAgreeTermDone,
+
     [actions.terms.openTermsModal]: onOpenTermsModal,
-    [actions.terms.closeTermsModal]: state => ({ ...state, showTermsModal: false }),
+    [actions.terms.closeTermsModal]: onCloseTermsModal,
+
     [actions.terms.selectTerm]: (state, { payload }) => ({ ...state, selectedTerm: payload }),
     [actions.terms.signDocu]: onSignDocu,
     [actions.terms.checkStatusInit]: state => ({
@@ -287,7 +301,7 @@ function create(initialState) {
   }, initialState || {
     getTermsFailure: false,
     terms: [],
-    showTermsModal: false,
+    openTermsModalUuid: '',
     selectedTerm: null,
     viewOnly: false,
     checkingStatus: false,
@@ -335,7 +349,7 @@ export function factory(req) {
         // if we try to join community automatically, but not all terms are agreed,
         // then we show terms modal (also we make sure is logged in before open)
         if (tokens.tokenV3 && req.query.join && !_.every(termsDoneAction.payload.terms, 'agreed')) {
-          state = onOpenTermsModal(state, actions.terms.openTermsModal());
+          state = onOpenTermsModal(state, actions.terms.openTermsModal('ANY'));
         }
 
         return create(state);