commit 2/11/2021

components/card/index.js

@@ -50,7 +50,7 @@ export const Card = ({ extraAction, isAutoExpand, children, className }) => {
 Card.Header = ({ children }) => {
   const { setIsExpand, isExpand } = useContext(CardContext);
   return (
-    <div className="d-flex justify-content-between app-simple-section__title">
+    <div className="px-0 d-flex flex-row justify-content-between app-simple-section__title">
       <div className="flex-fill">{children}</div>
       <div style={{ cursor: "pointer" }} onClick={() => setIsExpand(!isExpand)}>
         {!isExpand && (

components/date-picker/index.js

@@ -0,0 +1,28 @@
+import React from "react";
+import DateFnsUtils from "@date-io/date-fns";
+import {
+  KeyboardDatePicker,
+  MuiPickersUtilsProvider,
+} from "@material-ui/pickers";
+import "./style.scss";
+
+export default function BasicDatePicker({ value, onChange }) {
+  return (
+    <div className="basic-calendar">
+      <MuiPickersUtilsProvider utils={DateFnsUtils}>
+        <KeyboardDatePicker
+          disableToolbar
+          variant="inline"
+          format="MM/dd/yyyy"
+          margin="normal"
+          label=""
+          value={value || null}
+          onChange={onChange}
+          KeyboardButtonProps={{
+            "aria-label": "change date",
+          }}
+        />
+      </MuiPickersUtilsProvider>
+    </div>
+  );
+}

components/date-picker/style.scss

@@ -0,0 +1,35 @@
+.basic-calendar {
+  .MuiInputBase-root {
+    background: #1F063E;
+    border: 1px solid #270A4B;
+    border-radius: 10px;
+  }
+  .MuiIconButton-label {
+    color: white;
+  }
+}
+.app.theme-light {
+  .basic-calendar {
+    .MuiInputBase-root {
+      background: white !important;
+      border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    }
+    .MuiInput-input {
+      border: 0 !important;
+    }
+    .MuiIconButton-label {
+      color: black;
+    }
+  }
+}
+.app.theme-metal {
+  .basic-calendar {
+    .MuiInputBase-root {
+      background: transparent !important;
+      border: 1px solid #666 !important;
+    }
+    .MuiInputBase-input {
+      border: 0 !important;
+    }
+  }
+}

components/index.js

@@ -9,6 +9,7 @@ import PageHeaderComponent from "./page-header/PageHeader";
 import SwitchButton from "./switch-button/SwitchButton";
 import Checkbox from "./check-box/Checkbox";
 import CheckboxX from "./check-box-x/CheckboxX";
+import BasicDatePicker from "./date-picker";
 import { Card, CardHeader, CardBody, CardContext, CardPreview } from "./card";
 
 export {
@@ -26,6 +27,7 @@ export {
   Card,
   CardHeader,
   CardContext,
+  BasicDatePicker,
   CardPreview,
   CardBody,
 };

layouts/Global.js

@@ -18,8 +18,14 @@ import {
   StartHellosignModal,
   HelpModal,
   MilestoneVoteModal,
+  KycErrorModal,
+  KycGrantModal,
   StartCheckSystemModal,
+  ConfirmKYCLinkModal,
+  StartKYCModal,
+  ResendKycModal,
   ViewPaymentFormModal,
+  MultipleMilestoneSubmitModal,
   ResetKYCModal,
   AdminToolsModal,
   ShuftiRefChangeModal,
@@ -33,6 +39,7 @@ import {
   DraftProposalsModal,
   ShowSurveyVoterAnswerModal,
   ListVoterSurveyModal,
+  ShowDeniedComplianceModal,
 } from "../modals";
 
 const mapStateToProps = (state) => {
@@ -64,25 +71,21 @@ class Global extends Component {
   }
 
   checkHelloSign() {
-    // eslint-disable-next-line no-undef
-    // if (process.env.NEXT_PUBLIC_NODE_ENV === "production") {
     const { authUser } = this.props;
     const { profile } = authUser;
     if (
       !authUser.is_admin &&
       authUser.can_access &&
       authUser.email_verified &&
       profile &&
-      profile.id &&
-      !profile.step_review
+      profile.id
     ) {
+      if (!profile.step_review) {
+        this.props.dispatch(setActiveModal("start-checksystem"));
+      }
       // Needs to do Hello Sign
       // this.props.dispatch(setActiveModal("start-hellosign"));
-
-      // Check system
-      this.props.dispatch(setActiveModal("start-checksystem"));
     }
-    // }
   }
 
   hideAlert = () => {
@@ -133,6 +136,8 @@ class Global extends Component {
               <ViewPaymentFormModal />
             ) : activeModal == "review-kyc" ? (
               <ReviewKYCModal />
+            ) : activeModal == "show-denied-compliance" ? (
+              <ShowDeniedComplianceModal data={this.props.modalData} />
             ) : activeModal == "reset-kyc" ? (
               <ResetKYCModal />
             ) : activeModal == "pre-register-action" ? (
@@ -141,6 +146,16 @@ class Global extends Component {
               <StartHellosignModal />
             ) : activeModal == "start-checksystem" ? (
               <StartCheckSystemModal />
+            ) : activeModal == "start-kyc" ? (
+              <StartKYCModal />
+            ) : activeModal == "resend-kyc" ? (
+              <ResendKycModal />
+            ) : activeModal == "kyc-error" ? (
+              <KycErrorModal />
+            ) : activeModal == "kyc-grant" ? (
+              <KycGrantModal />
+            ) : activeModal == "multiple-milestone-submit" ? (
+              <MultipleMilestoneSubmitModal data={this.props.modalData} />
             ) : activeModal == "admin-tools" ? (
               <AdminToolsModal data={this.props.modalData} />
             ) : activeModal == "shufti-ref-change" ? (
@@ -153,6 +168,8 @@ class Global extends Component {
               <ListVoterSurveyModal data={this.props.modalData} />
             ) : activeModal == "cancel-active-survey" ? (
               <CancelActiveSurveyModal data={this.props.modalData} />
+            ) : activeModal == "confirm-kyc-link" ? (
+              <ConfirmKYCLinkModal data={this.props.modalData} />
             ) : activeModal == "draft-proposals" ? (
               <DraftProposalsModal />
             ) : activeModal == "add-admin-box" ? (
@@ -168,7 +185,7 @@ class Global extends Component {
             ) : activeModal == "help" ? (
               <HelpModal />
             ) : activeModal == "milestone-vote" ? (
-              <MilestoneVoteModal />
+              <MilestoneVoteModal data={this.props.modalData} />
             ) : null}
           </div>
         ) : null}

layouts/authapp/AuthApp.js

@@ -4,7 +4,7 @@ import * as Icon from "react-feather";
 import { withRouter, Redirect } from "react-router-dom";
 import { Fade } from "react-reveal";
 import SidebarLayout from "../sidebar/Sidebar";
-import { showSidebar, hideSidebar } from "../../redux/actions";
+import { showSidebar, hideSidebar, setActiveModal } from "../../redux/actions";
 import { AuthAppRoutes } from "../../routes";
 import { BRAND } from "../../utils/Constant";
 
@@ -45,6 +45,52 @@ class AuthApp extends Component {
     return "";
   }
 
+  startKYC = () => {
+    this.props.dispatch(setActiveModal("start-kyc"));
+  };
+
+  kycError = () => {
+    this.props.dispatch(setActiveModal("kyc-error"));
+  };
+
+  renderKycStatus() {
+    const { auth: authUser } = this.props;
+    if (!authUser.shuftipro) {
+      return (
+        // <a onClick={this.startKYC} style={{ cursor: "pointer" }}>
+        <span className="text-underline">Not submitted</span>
+        // </a>
+      );
+    }
+    if (authUser.shuftipro?.status === "pending") {
+      return <span>Pending</span>;
+    }
+    if (
+      authUser.shuftipro?.status === "approved" &&
+      authUser.shuftipro?.manual_approved_at
+    ) {
+      return <span>Manual Review</span>;
+    }
+    if (authUser.shuftipro?.status === "approved") {
+      return <span>Accepted</span>;
+    }
+    if (authUser.shuftipro?.status === "error") {
+      return (
+        <span>
+          Error{" "}
+          <a
+            className="text-underline"
+            onClick={this.kycError}
+            style={{ cursor: "pointer" }}
+          >
+            (more info)
+          </a>
+        </span>
+      );
+    }
+    return <span>Submitted</span>;
+  }
+
   render() {
     const { auth: authUser } = this.props;
     if (!authUser || !authUser.id) return null;
@@ -86,9 +132,14 @@ class AuthApp extends Component {
                   <p>Welcome, {authUser.first_name}</p>
                 </Fade>
                 <Fade distance={"20px"} bottom duration={500} delay={500}>
-                  <label>
-                    User Type: <span>{this.renderRole()}</span>
-                  </label>
+                  <>
+                    <label>
+                      User Type: <span>{this.renderRole()}</span>
+                    </label>
+                    {!authUser?.is_super_admin && !authUser?.is_admin && (
+                      <label>KYC status: {this.renderKycStatus()}</label>
+                    )}
+                  </>
                 </Fade>
               </div>
             </div>

layouts/authapp/authapp.scss

@@ -52,7 +52,7 @@
           label {
             display: block;
             font-size: 10px;
-            span {
+            span, a {
               color: #9B64E6;
             }
           }

modals/confirm-kyc-link/ConfirmKYCLink.js

@@ -0,0 +1,44 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { removeActiveModal } from "../../redux/actions";
+import "./style.scss";
+
+const mapStateToProps = (state) => {
+  return {
+    authUser: state.global.authUser,
+  };
+};
+
+class ConfirmKYCLink extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Hide Modal
+  hideModal = (e) => {
+    if (e) e.preventDefault();
+    this.props.dispatch(removeActiveModal());
+  };
+
+  // Render Content
+  render() {
+    const user = this.props.authUser;
+    const email = this.props.data?.email || user.email;
+    return (
+      <div id="start-kyc-modal">
+        <h2 className="pb-2">A KYC link has been sent to {email}!</h2>
+        <p className="mt-2 mb-3">
+          {`Check your inbox to begin the KYC/AML process. If you do not see the link in a minute check your spam folder.`}
+        </p>
+        <div id="start-kyc-modal__buttons" className="pt-2">
+          <button className="btn btn-primary" onClick={this.hideModal}>
+            Close
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default connect(mapStateToProps)(ConfirmKYCLink);

modals/confirm-kyc-link/style.scss

@@ -0,0 +1,53 @@
+#start-kyc-modal {
+  width: 762px;
+  max-width: 100%;
+  background-color: #ffffff;
+  border-radius: 12px;
+  position: relative;
+  padding: 50px;
+  margin: 160px auto;
+  button {
+    &:disabled {
+      background: #c7c7c7;
+      color: white;
+      border: 2px solid #c7c7c7;
+      cursor: not-allowed;
+    }
+  }
+  #start-kyc-modal__buttons {
+    margin-left: -5px;
+    margin-right: -5px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+
+    button {
+      flex: 0 0 calc(50% - 10px) !important;
+      width: calc(50% - 10px) !important;
+      margin: 0 5px !important;
+    }
+  }
+
+  @media all and (max-width: 767px) {
+    margin: 100px auto;
+    padding: 30px 15px;
+
+    h2 {
+      margin-top: 50px;
+    }
+
+    #start-checksystem-modal__buttons {
+      display: block;
+      margin-left: 0;
+      margin-right: 0;
+
+      button {
+        flex: auto;
+        width: 100% !important;
+        display: block !important;
+        margin: 0 0 20px 0 !important;
+      }
+    }
+  }
+}