feat(webapp): add status message (#387)

edenia · Feb 8, 2022 · 02e978b · 02e978b
1 parent 049e7d7
commit 02e978b
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 9 deletions.
diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json
@@ -40,6 +40,7 @@
     "title2": "Referral Program",
     "infoPage": "Join as an affiliate and earn rewards for every friend you invite that registers and completes KYC on Proton.",
     "buttonLabel": "Apply Now",
+    "buttonLabelWaiting": "Awaiting approval",
     "tableTitle": "Latest Referral Payments",
     "username": "account",
     "status": "status",

diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json
@@ -33,7 +33,8 @@
     "telegram": "Grupo en Telegram"
   },
   "homeRoute": {
-    "welcomeMessage": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac viverra nunc, vitae rhoncus metus. Donec placerat ipsum nec ligula lacinia ornare. Cras et felis sit amet libero fermentum faucibus ut id justo. Maecenas vel nibh sed nibh faucibus rutrum. Pellentesque vel nibh molestie, eleifend magna in, eleifend nibh. Praesent elementum libero non ligula viverra feugiat. Morbi blandit massa nec posuere pellentesque. Quisque ac imperdiet tellus. Donec sed lorem sit amet nisl posuere dignissim at a sapien. In tristique et sapien et hendrerit. Nam aliquet quis turpis eu porttitor. Aenean odio augue, lacinia id ipsum at, dignissim sagittis libero. Pellentesque ex justo, tempus et rhoncus vitae, mattis vel justo. Suspendisse pellentesque nisi porttitor est posuere consectetur. Proin ornare orci eleifend, vestibulum massa et, bibendum nulla. Integer rutrum id quam et rhoncus. Nullam pretium pharetra magna in mattis. Nulla et sapien sit amet nibh dictum consectetur a quis dui. Morbi ac vestibulum eros. Ut commodo, dolor in sollicitudin euismod, libero lacus bibendum justo, non lobortis magna tellus vehicula turpis. Maecenas dignissim eget tellus eu molestie. Morbi pellentesque viverra ornare. Vivamus id feugiat nisi. Proin lobortis rhoncus finibus. Proin eu tellus dolor. Suspendisse ac tincidunt neque. In tincidunt ullamcorper lorem. Nulla facilisi."
+    "welcomeMessage": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac viverra nunc, vitae rhoncus metus. Donec placerat ipsum nec ligula lacinia ornare. Cras et felis sit amet libero fermentum faucibus ut id justo. Maecenas vel nibh sed nibh faucibus rutrum. Pellentesque vel nibh molestie, eleifend magna in, eleifend nibh. Praesent elementum libero non ligula viverra feugiat. Morbi blandit massa nec posuere pellentesque. Quisque ac imperdiet tellus. Donec sed lorem sit amet nisl posuere dignissim at a sapien. In tristique et sapien et hendrerit. Nam aliquet quis turpis eu porttitor. Aenean odio augue, lacinia id ipsum at, dignissim sagittis libero. Pellentesque ex justo, tempus et rhoncus vitae, mattis vel justo. Suspendisse pellentesque nisi porttitor est posuere consectetur. Proin ornare orci eleifend, vestibulum massa et, bibendum nulla. Integer rutrum id quam et rhoncus. Nullam pretium pharetra magna in mattis. Nulla et sapien sit amet nibh dictum consectetur a quis dui. Morbi ac vestibulum eros. Ut commodo, dolor in sollicitudin euismod, libero lacus bibendum justo, non lobortis magna tellus vehicula turpis. Maecenas dignissim eget tellus eu molestie. Morbi pellentesque viverra ornare. Vivamus id feugiat nisi. Proin lobortis rhoncus finibus. Proin eu tellus dolor. Suspendisse ac tincidunt neque. In tincidunt ullamcorper lorem. Nulla facilisi.",
+    "buttonLabelWaiting": "Esperando aprobación"
   },
   "aboutRoute": {
     "title": "Este proyecto",

diff --git a/webapp/src/routes/Home/index.js b/webapp/src/routes/Home/index.js
@@ -12,6 +12,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel'
 import Switch from '@material-ui/core/Switch'
 import DoneIcon from '@material-ui/icons/Done'
 import CircularProgress from '@material-ui/core/CircularProgress'
+import AccessTimeIcon from '@material-ui/icons/AccessTime'
 
 import { affiliateUtil, useImperativeQuery } from '../../utils'
 import {
@@ -65,6 +66,9 @@ const Home = () => {
   const [account, setAccount] = useState('')
   const [email, setEmail] = useState('')
   const [invitee, setInvitee] = useState('')
+  const [accountStatus, setAccountStatus] = useState(
+    affiliateUtil.JOIN_REQUEST_STATUS_IDS.NONE
+  )
   const [isValidAccount, setIsValidAccount] = useState(INIT_VALIDATION_VALUES)
   const [isValidEmail, setIsValidEmail] = useState(INIT_VALIDATION_VALUES)
   const [referralRows, setReferralRows] = useState([])
@@ -218,6 +222,10 @@ const Home = () => {
         isValid,
         message: t(errorMessageTag)
       })
+
+      joinRequest.length
+        ? setAccountStatus(joinRequest[0].status)
+        : setAccountStatus(affiliateUtil.JOIN_REQUEST_STATUS_IDS.NONE)
     }
 
     if (account) {
@@ -249,14 +257,29 @@ const Home = () => {
             style={{ height: 193, width: 352 }}
           />
           <Typography className={classes.info}>{t('infoPage')}</Typography>
-          <Button
-            className={classes.joinBtn}
-            variant="contained"
-            color="primary"
-            onClick={handleOpenApplyModal}
-          >
-            {t('buttonLabel')}
-          </Button>
+          {accountStatus === affiliateUtil.JOIN_REQUEST_STATUS_IDS.NONE ? (
+            <Button
+              className={classes.joinBtn}
+              variant="contained"
+              color="primary"
+              onClick={handleOpenApplyModal}
+            >
+              {t('buttonLabel')}
+            </Button>
+          ) : (
+            <Button
+              className={classes.joinBtn}
+              variant="contained"
+              color="primary"
+              disabled
+              startIcon={<AccessTimeIcon />}
+            >
+              {accountStatus ===
+              affiliateUtil.JOIN_REQUEST_STATUS_IDS.PENDING_APPROVAL
+                ? t('buttonLabelWaiting')
+                : t('PENDING_KYC_VERIFICATION')}
+            </Button>
+          )}
         </Box>
         <img
           src={HomeSvg}

diff --git a/webapp/src/utils/affiliate.js b/webapp/src/utils/affiliate.js
@@ -2,11 +2,13 @@ import { eosApi } from './eosapi'
 import { mainConfig } from '../config'
 
 const JOIN_REQUEST_STATUS = {
+  0: 'NONE',
   1: 'PENDING_KYC',
   2: 'PENDING_APPROVAL',
   3: 'APPROVED'
 }
 const JOIN_REQUEST_STATUS_IDS = {
+  NONE: 0,
   PENDING_KYC: 1,
   PENDING_APPROVAL: 2,
   APPROVED: 3