Merge pull request #88 from JincorTech/develop

1.3.0
secret-tech · Nov 30, 2017 · 4274630 · 4274630
2 parents ccb40b8 + e9678a5
commit 4274630
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 89 deletions.
diff --git a/src/components/auth/SignUpForm/index.js b/src/components/auth/SignUpForm/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { reduxForm, Field } from 'redux-form';
 import { Link } from 'react-router';
 import s from './styles.css';
@@ -16,99 +16,115 @@ import RenderPassword from '../../forms/RenderPassword';
 import RenderCheckbox from '../../forms/RenderCheckbox';
 import Button from '../../common/Button';
 
-const SignUpForm = (props) => {
-  const {
-    spinner,
-    handleSubmit,
-    invalid,
-    error,
-    referralCode
-  } = props;
-
-  const renderReferralField = (code) => {
-    if (code) {
-      props.change('referral', code);
-      return (
-        <Field
-          component={RenderInput}
-          name="referral"
-          type="hidden"
-          disabled/>
-      );
-    }
-
-    return (
-      <div className={s.field}>
-        <Field
-          component={RenderInput}
-          name="referral"
-          type="text"
-          placeholder="Referral code (optional)"/>
-      </div>
-    );
-  };
+class SignUpForm extends Component {
+  componentDidMount() {
+    const { change } = this.props;
 
-  return (
-    <div>
-      <div className={s.title}>Sign Up</div>
+    const utmSource = window.localStorage.getItem('utm_source');
+    const utmMedium = window.localStorage.getItem('utm_medium');
+    const utmCampaign = window.localStorage.getItem('utm_campaign');
+    const gtm = window.localStorage.getItem('gtm');
 
-      {error && <div className={s.error}>{error}</div>}
+    change('source.utm_source', utmSource);
+    change('source.utm_medium', utmMedium);
+    change('source.utm_campaign', utmCampaign);
+    change('source.gtm', gtm);
+  }
 
-      <form id="mk_lk_signup" onSubmit={handleSubmit}>
-        <div className={s.field}>
+  render() {
+    const {
+      spinner,
+      handleSubmit,
+      invalid,
+      error,
+      referralCode
+    } = this.props;
+
+    const renderReferralField = (code) => {
+      if (code) {
+        this.props.change('referral', code);
+        return (
           <Field
             component={RenderInput}
-            name="name"
-            type="text"
-            placeholder="Full name"
-            validate={fullNameValidate}/>
-        </div>
+            name="referral"
+            type="hidden"
+            disabled/>
+        );
+      }
 
+      return (
         <div className={s.field}>
           <Field
             component={RenderInput}
-            name="email"
+            name="referral"
             type="text"
-            placeholder="E-mail"
-            validate={emailValidate}/>
-        </div>
-
-        <div className={s.field}>
-          <Field
-            component={RenderPassword}
-            name="password"
-            type="password"
-            placeholder="Password"
-            validate={passwordValidate}/>
-        </div>
-
-        {renderReferralField(referralCode)}
-
-        <div className={s.description}>
-          Password must contain uppercase characters and only latin symbols and numbers.
-        </div>
-
-        <div className={s.checkbox}>
-          <Field
-            component={RenderCheckbox}
-            label={<span>
-              I agree with <a href="https://jincor.com/en/agreement" target="_blank">Terms of Services</a>
-            </span>}
-            name="agreeTos"
-            validate={required}/>
+            placeholder="Referral code (optional)"/>
         </div>
+      );
+    };
 
-        <div className={s.button}>
-          <Button type="submit" spinner={spinner} disabled={invalid}>Submit</Button>
+    return (
+      <div>
+        <div className={s.title}>Sign Up</div>
+
+        {error && <div className={s.error}>{error}</div>}
+
+        <form id="mk_lk_signup" onSubmit={handleSubmit}>
+          <div className={s.field}>
+            <Field
+              component={RenderInput}
+              name="name"
+              type="text"
+              placeholder="Full name"
+              validate={fullNameValidate}/>
+          </div>
+
+          <div className={s.field}>
+            <Field
+              component={RenderInput}
+              name="email"
+              type="text"
+              placeholder="E-mail"
+              validate={emailValidate}/>
+          </div>
+
+          <div className={s.field}>
+            <Field
+              component={RenderPassword}
+              name="password"
+              type="password"
+              placeholder="Password"
+              validate={passwordValidate}/>
+          </div>
+
+          {renderReferralField(referralCode)}
+
+          <div className={s.description}>
+            Password must contain uppercase characters and only latin symbols and numbers.
+          </div>
+
+          <div className={s.checkbox}>
+            <Field
+              component={RenderCheckbox}
+              label={<span>
+                I agree with <a href="https://jincor.com/en/agreement" target="_blank">Terms of Services</a>
+              </span>}
+              name="agreeTos"
+              validate={required}/>
+          </div>
+
+          <div className={s.button}>
+            <Button type="submit" spinner={spinner} disabled={invalid}>Submit</Button>
+          </div>
+        </form>
+
+        <div className={s.footer}>
+          <Link to={namedRoutes.signIn}>Sign In</Link> if you have an account
         </div>
-      </form>
-
-      <div className={s.footer}>
-        <Link to={namedRoutes.signIn}>Sign In</Link> if you have an account
       </div>
-    </div>
-  );
-};
+    );
+  }
+}
 
 const FormComponent = reduxForm({
   form: 'signUp',
@@ -117,7 +133,13 @@ const FormComponent = reduxForm({
     email: '',
     password: '',
     referral: '',
-    agreeTos: false
+    agreeTos: false,
+    source: {
+      utm_source: '',
+      utm_medium: '',
+      utm_campaign: '',
+      gtm: ''
+    }
   }
 })(SignUpForm);
 

diff --git a/src/containers/auth/SignUp/index.js b/src/containers/auth/SignUp/index.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { getCookie, parseGTM } from '../../../utils/cookies';
 
 import {
   signUp,
@@ -23,6 +24,20 @@ class SignUp extends Component {
       setActivationData
     } = this.props;
 
+    /* marketing tags */
+    const gtm = parseGTM(getCookie('_ga'));
+
+    if (query.utm_source && query.utm_medium && query.utm_campaign) {
+      window.localStorage.setItem('utm_source', query.utm_source);
+      window.localStorage.setItem('utm_medium', query.utm_medium);
+      window.localStorage.setItem('utm_campaign', query.utm_campaign);
+    }
+
+    if (gtm) {
+      window.localStorage.setItem('gtm', gtm);
+    }
+    /* marketing tags */
+
     if (query.type === 'activate') {
       setActivationData({
         email: query.email,

diff --git a/src/containers/dashboard/BuyTokensForm/index.js b/src/containers/dashboard/BuyTokensForm/index.js
@@ -3,7 +3,7 @@ import { reduxForm, Field } from 'redux-form';
 import { connect } from 'react-redux';
 import s from './styles.css';
 
-import { number } from '../../../utils/validators';
+import { ethInvest, jcrInvest } from '../../../utils/validators';
 
 import { changeEth, changeJcr, openMnemonicPopup } from '../../../redux/modules/dashboard/buyTokens';
 import { openKycAlertPopup } from '../../../redux/modules/app/kycAlertPopup';
@@ -21,7 +21,8 @@ class BuyTokensForm extends Component {
       changeJcr,
       openMnemonicPopup,
       kycStatus,
-      openKycAlertPopup
+      openKycAlertPopup,
+      rate
     } = this.props;
 
     const renderButton = () => {
@@ -53,7 +54,7 @@ class BuyTokensForm extends Component {
               size="large"
               name="eth"
               placeholder="0 ETH"
-              validate={number}/>
+              validate={ethInvest}/>
           </div>
 
           <div className={s.field}>
@@ -64,7 +65,7 @@ class BuyTokensForm extends Component {
               size="large"
               name="jcr"
               placeholder="0 JCR"
-              validate={number}/>
+              validate={jcrInvest(rate)}/>
           </div>
 
           <div className={s.button}>
@@ -101,7 +102,8 @@ const FormComponent = reduxForm({
 export default connect(
   (state) => ({
     spinner: state.dashboard.buyTokens.spinner,
-    kycStatus: state.app.app.user.kycStatus
+    kycStatus: state.app.app.user.kycStatus,
+    rate: state.dashboard.dashboard.jcrTokenPrice.ETH
   }),
   {
     changeJcr,

diff --git a/src/helpers/common/emailsInput.js b/src/helpers/common/emailsInput.js
@@ -1,8 +1,8 @@
-const emailRegExp = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g;
-const emailsRegExp = /^(\s*[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)\s(\s*[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)*$/;
+const emailRegExp = /[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/g;
+const emailsRegExp = /^(\s*[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?)\s(\s*[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?)*$/;
 
 export function isEmail(value) {
-  return /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/.test(value);
+  return /[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/.test(value);
 }
 
 export function canGetEmails(value) {

diff --git a/src/index.html b/src/index.html
@@ -40,6 +40,11 @@
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
 
+    <!-- Start of jincor Zendesk Widget script -->
+    <script>/*<![CDATA[*/window.zEmbed||function(e,t){var n,o,d,i,s,a=[],r=document.createElement("iframe");window.zEmbed=function(){a.push(arguments)},window.zE=window.zE||window.zEmbed,r.src="javascript:false",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="display: none",d=document.getElementsByTagName("script"),d=d[d.length-1],d.parentNode.insertBefore(r,d),i=r.contentWindow,s=i.document;try{o=s}catch(e){n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}o.open()._l=function(){var e=this.createElement("script");n&&(this.domain=n),e.id="js-iframe-async",e.src="https://assets.zendesk.com/embeddable_framework/main.js",this.t=+new Date,this.zendeskHost="jincor.zendesk.com",this.zEQueue=a,this.body.appendChild(e)},o.write('<body onload="document._l();">'),o.close()}();
+    /*]]>*/</script>
+    <!-- End of jincor Zendesk Widget script -->
+
     <div id="app"></div>
   </body>
 </html>
diff --git a/src/utils/cookies/index.js b/src/utils/cookies/index.js
@@ -0,0 +1,15 @@
+/* eslint-disable */
+
+export function getCookie(name) {
+    const matches = document.cookie.match(new RegExp(
+      "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
+    ));
+    return matches ? decodeURIComponent(matches[1]) : undefined
+}
+
+/* eslint-enable */
+
+export const parseGTM = (gtm) => {
+  const arr = gtm.split('.');
+  return `${arr[2]}.${arr[3]}`;
+};
diff --git a/src/utils/validators/index.js b/src/utils/validators/index.js
@@ -14,6 +14,9 @@ export const maxLength = (limit, msg) =>
   (value) =>
     (limit && value && value.length <= limit ? '' : msg || `maxLength ${limit}`);
 
+export const minNumber = (limit, msg) =>
+  (value) => (limit && value && Number(value) >= limit ? '' : msg || `Min ${limit}`);
+
 export const length = (prop, msg) =>
   (value) =>
     (value && prop && value.length === prop ? '' : msg || `length ${prop}`);
@@ -59,3 +62,15 @@ export const number = [
   requiredValidator('Must be filled'),
   numberValidator('Only numbers')
 ];
+
+export const ethInvest = [
+  requiredValidator('Must be filled'),
+  numberValidator('Only numbers'),
+  minNumber(0.1, 'Min 0.1 ETH')
+];
+
+export const jcrInvest = (rate) => [
+  requiredValidator('Must be filled'),
+  numberValidator('Only numbers'),
+  minNumber(0.1 / rate, `Min ${0.1 / rate} JCR`)
+];