Wise Account

AuthRoutes.jsx

<Route
  path={ROUTES.wiseAccountDetails}
  component={WiseAccountDetails}
/>
<Route
  path={ROUTES.wiseAcctSuccess}
  component={WiseAcctSuccess}
/>

index.jsx

import React, { Fragment } from "react";
import { connect } from "react-redux";

import ProfileSetUpComponent from "./profileSetUp";
import ProfileUpgradeComponent from "./profileUpgrade";
import ProfileUpgradeProgressBar from "./ProfileUpgradeProgress";
import AccountCard from "./AccountCard";
import QuickLinksBar from "./QuickLinksBar";
import AdvertSection from "./AdvertSection";

import "./style.css";
import { request } from "../../services/apiservice";
import { routes } from "../../services/apiroutes";
import {
  getToken,
  getAuthModel,
  getProfileFromToken,
} from "../../services/auth";
import { REDUX_CONSTANTS } from "../../constants/reduxConstants";
import Modals from "../../components/Modals/generalModal";
import { profileModel } from "../../models/profileModel";
import ProcessingModalComponent from "../../components/Modals/processingModal";
import FundAccount from "./FundAccount";
import { actionDispatcher } from "../../store/actions/onboarding";
import { ActivitySection } from "./ActivityCardSection";
import { WiseAccountSection } from "./ActivityCardSection/wiseAccount";
import AddAccountModal from "./AddAccount/addAccountModal";
import { UserTypes } from "../../constants";
import Permissioncomp from "../../components/Permission";
import PendingActivity from "./PendingActivity";
import { businessInfoModel } from "models/corperateModel";
import PermissionGuard from "components/PermissionGuard";
import permissions from "constants/permissions";
import SetUpPin from "views/onboarding/corporate/verifyidentity/setUpPin";
import { useHistory, useLocation, withRouter } from "react-router";
import { ROUTES } from "constants/routepaths";
import { getValueKeyFromStore } from "../../store/cacheStorage";
import { saveToStore } from "../../store/cacheStorage";

const TransactionPinSet = () => {
  const { hash } = useLocation();
  const history = useHistory();

  if (hash !== "#secure-your-transactions") return null;

  return (
    <div className="position-fixed inset">
      <div
        className="bg-black position-absolute inset"
        onClick={() => history.push(ROUTES.dashboard)}
        style={{
          backgroundColor: "rgba(0,0,0,20%)",
        }}
      ></div>
      <div className="w-75 mt-5 mx-auto">
        <div className="row justify-content-center">
          <SetUpPin />
        </div>
      </div>
    </div>
  );
};

export class Dashboard extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isProfileSetup: null,
      isProfileUpgrade: null,
      isProfileComplete: null,
      profileEmail: null,
      isFundAccount: false,
      showModal: false,
      accountToFund: "",
      isProfileUpgradeModal: false,
      showModalWise: false,
      isReferee: false,
      tire3Modal: true,
      hasApprovedAdmin: null,
      isPinCreated: null,
      adminHasBeenNominated: null,
      LogginUserProfile: "",
      isFirstLogin:
        !Boolean(sessionStorage.getItem("visited_setpin")) &&
        this.props.isFirstLogin,
      isCorporate: getProfileFromToken().userType === UserTypes.Corporate,
      isAccountExist: false,
    };
  }

  handleShowScreen = () => {
    const { LogginUserProfile } = this.state;
    console.log(LogginUserProfile);
    console.log(LogginUserProfile.email, "gsod");
    saveToStore("showWiseAcctSupport", LogginUserProfile.email);
    this.props.history.push(ROUTES.dashboard);
  };

  launchProfileUpgrade = () => {
    this.setState({
      isProfileUpgrade: null,
      isProfileSetup: null,
      isProfileUpgradeModal: true,
    });
  };
  launchProfileUpgrade2 = () => {
    const { isProfileComplete } = this.state;
    if (isProfileComplete === true) {
      this.props.history.push(ROUTES.wiseAccountDetails);
    } else {
      this.setState({
        showModalWise: !this.state.showModalWise,
        tire3Modal: !this.state.tire3Modal,
        isProfileUpgrade: null,
        isProfileSetup: null,
        isProfileUpgradeModal: true,
      });
    }
  };

  componentDidMount() {
    this.setState({});
    const user = getProfileFromToken();

    this.setState({
      showModalWise: true,
      LogginUserProfile: user,
    });

    let token = getToken();
    this.getUserProfile(token);
    this.state.isCorporate && this.getBusinessInfo(token);
    this.props.setDebitableAccounts([]);

    if (this.state.isCorporate && this.state.isFirstLogin) {
      sessionStorage.setItem("visited_setpin", "1");
      this.setState({ isFirstLogin: false });
      this.props.history.push("#secure-your-transactions");
    }
  }
  getIndexOfvalue = (haystack, needle, key) => {
    const index = haystack.findIndex((item) => item[key] === needle);
    return index;
  };
  showProfileUpgradeAndreferee = () => {
    this.setState(
      { isReferee: !this.state.isReferee, showModal: !this.state.showModal },
      () => {
        this.launchProfileUpgrade();
      }
    );
  };

  getUserProfile = (token) => {
    request(routes.GetCustomerProfile(), "get", null, token)
      .then((res) => {
        // console.log(res, "tomzy get res");
        let profileInfo = profileModel(res);
        this.props.SetUser(profileInfo);
        this.setState({ profileInfo: profileInfo }, () => {
          //profileInfo.pinCreated profileInfo.percentageComplete === 100? tru
          this.setState({
            isProfileSetup: profileInfo.pinCreated,
            profileEmail: profileInfo.email,
            isProfileUpgrade:
              profileInfo.percentageComplete === 100 ? true : false,
            isProfileComplete:
              profileInfo.percentageComplete === 100 ? true : false,
          });
        });
      })
      .catch((err) => {
        //this.props.SetUser("fail");
      });
  };

  getBusinessInfo = (token) => {
    this.setState({ isBusy: false }, () => {
      request(routes.GetBusinessInfo(), "get", {}, token)
        .then((res) => {
          const response = businessInfoModel(res);
          const { hasApprovedAdmin, isPinCreated, adminHasBeenNominated } =
            response;
          this.setState({
            hasApprovedAdmin,
            isPinCreated,
            adminHasBeenNominated,
          });
          this.props.setBusinessInfo(response);
        })
        .catch((err) => {
          this.setState({ isBusy: false });
        });
    });
  };

  launchFundAccount = (account) => {
    this.setState({ accountToFund: account }, () => {
      this.setState({ isFundAccount: !this.state.isFundAccount });
    });
  };
  closeTire3ModalModals = () => {
    this.setState({
      tire3Modal: !this.state.tire3Modal,
      showModalWise: !this.state.showModalWise,
      isProfileUpgrade: true,
      isProfileSetup: true,
      isProfileUpgradeModal: false,
    });
  };

  closeUpgradeModals = () => {
    this.setState({
      isProfileUpgrade: true,
      isProfileSetup: true,
      isProfileUpgradeModal: false,
    });
  };
  openModalnew = () => {
    // alert("clicked");
    this.setState({
      isProfileUpgrade: false,
      isProfileSetup: false,
      isProfileUpgradeModal: true,
    });
  };

  openModal = () => {
    const { showModal } = this.state;
    this.setState({ showModal: !showModal });
  };

  hideButton = () => {
    const { showButton } = this.state;
    this.setState({ showButton: !showButton });
  };
  //
  render() {
    const {
      isProfileSetup,
      isProfileUpgrade,
      isProfileComplete,
      profileEmail,
      isFundAccount,
      accountToFund,
      isProfileUpgradeModal,
      showModal,
      hasApprovedAdmin,
      isPinCreated,
      adminHasBeenNominated,
      showModalWise,
      // tire3Modal,
      // isAccountExist,
    } = this.state;
    // alert(UserTypes.Individual);

    let _userDIsableWIseAcct = getValueKeyFromStore("showWiseAcctSupport");
    // console.log(_userDIsableWIseAcct.value, " // ", profileEmail, "undo");
    // let _Userchoice = "";
    // {
    //   _userDIsableWIseAcct === null
    //     ? (_Userchoice = "")
    //     : (_Userchoice = _userDIsableWIseAcct.value);
    // }
    // console.log(
    //   this.props.accounts.data && this.props.accounts.data[0]["accountType"],
    //   "yung looking at this"
    // );
    // const wiseAccount = this.props.accounts.data && this.props.accounts.data[0]["accountType"];
    return (
      <Fragment>
        {/* console.log(isProfileUpgrade)} */}
        {/* {this.props.user.data && this.props.user.data.openProfileModal && <ProfileComponent /> } */}
        {showModal && (
          <div className="add-account-ctn">
            <AddAccountModal
              openModal={this.openModal}
              addReferee={this.showProfileUpgradeAndreferee}
            />
          </div>
        )}

        {isFundAccount && (
          <FundAccount
            account={accountToFund}
            closeModal={this.launchFundAccount}
          />
        )}
        {!isFundAccount && !this.props.user?.data?.openProfileModal && (
          <Fragment>
            <div
              className={
                isProfileUpgrade !== false &&
                isProfileSetup !== false &&
                isProfileUpgradeModal !== true
                  ? "dash-body"
                  : "dash-body hide-body"
              }
            >
              {this.props.accounts &&
                !this.props.accounts.type &&
                getAuthModel() &&
                getAuthModel().isFirstLogin && (
                  <Fragment>
                    <ProcessingModalComponent
                      showModal={true}
                      text={"one moment, fetching account details..."}
                      className="generating-account-modal"
                    />
                    <div className="generating-account-modal-ctn"></div>
                  </Fragment>
                )}
              {this.props.user.data &&
                this.props.user.data.percentageComplete !== 100 && (
                  <ProfileUpgradeProgressBar
                    percentage={`${this.props.user.data.percentageComplete}%`}
                  />
                )}
              <AccountCard
                launchFundAccount={this.launchFundAccount}
                launchAddAccountModal={this.openModal}
                {...this.props}
              />
              <Permissioncomp userType={UserTypes.Corporate}>
                <PermissionGuard
                  permissions={[
                    permissions.VendingBills,
                    permissions.VendingAirtime,
                    permissions.VendingData,
                  ]}
                >
                  <QuickLinksBar corporate />
                </PermissionGuard>
              </Permissioncomp>

              {/* {wiseAccount === "STFPRE" ? ( */}
              {this.getIndexOfvalue(
                this.props.accounts.data || [],
                "WISACC",
                "accountType"
              ) !== -1 ? (
                <Fragment />
              ) : (
                <Permissioncomp userType={UserTypes.Individual}>
                  <WiseAccountSection
                    openModalss={this.openModalnew}
                    isProfileSetupComplete={isProfileComplete}
                  />
                </Permissioncomp>
              )}

              <Permissioncomp userType={UserTypes.Individual}>
                <QuickLinksBar />
              </Permissioncomp>

              <Permissioncomp userType={UserTypes.Individual}>
                <ActivitySection />
              </Permissioncomp>
              {(adminHasBeenNominated && !hasApprovedAdmin) || !isPinCreated ? (
                <Permissioncomp userType={UserTypes.Corporate}>
                  <PendingActivity
                    hasApprovedAdmin={hasApprovedAdmin}
                    isPinCreated={isPinCreated}
                    adminHasBeenNominated={adminHasBeenNominated}
                  />
                </Permissioncomp>
              ) : null}
              <AdvertSection />
            </div>

            {(isProfileSetup === false || isProfileUpgrade === false) &&
              isProfileUpgradeModal !== true && (
                <Fragment>
                  {
                    _userDIsableWIseAcct !== null &&
                    _userDIsableWIseAcct.value === profileEmail ? (
                      <ProfileSetUpComponent
                        accounts={this.props.accounts}
                        profileInfo={
                          this.state.profileInfo ? this.state.profileInfo : {}
                        }
                        closeModal={this.closeUpgradeModals}
                        launchUpgradeProfile={this.launchProfileUpgrade}
                      />
                    ) : (
                      ""
                    )
                    // : (
                    //   <div className="modalWrapper">
                    //     <Modals
                    //       handleContinue={() => this.launchProfileUpgrade()}
                    //       handleCloseModal={this.closeUpgradeModals}
                    //       showModal={showModalWise}
                    //       handleSkip={this.closeUpgradeModals}
                    //       handleCheckboxChange={this.handleShowScreen}
                    //     />
                    //   </div>
                    // )
                  }
                </Fragment>
              )}
            {_userDIsableWIseAcct !== null &&
            _userDIsableWIseAcct.value === profileEmail ? (
              ""
            ) : (
              <>
                {showModalWise === true &&
                  this.getIndexOfvalue(
                    this.props.accounts.data || [],
                    "WISACC",
                    "accountType"
                  ) === -1 &&
                  this.props.accounts.data && (
                    <div className="modalWrapper">
                      <Modals
                        handleContinue={() => this.launchProfileUpgrade2()}
                        handleCloseModal={this.closeUpgradeModals}
                        showModal={showModalWise}
                        handleSkip={this.closeTire3ModalModals}
                        handleCheckboxChange={this.handleShowScreen}
                      />
                    </div>
                  )}
              </>
            )}

            {isProfileUpgradeModal === true && (
              <ProfileUpgradeComponent
                isReferee={this.state.isReferee}
                closeModal={this.closeUpgradeModals}
              />
            )}

            <TransactionPinSet />
          </Fragment>
        )}
      </Fragment>
    );
  }
}

const mapDispatchToProps = (dispatch) => ({
  SetUser: (userData) =>
    dispatch({ data: userData, type: REDUX_CONSTANTS.USER_PROFILE }),
  setDebitableAccounts: (data) =>
    dispatch(actionDispatcher(data, REDUX_CONSTANTS.GET_DEBITABLE_ACCOUNTS)),
  setBusinessInfo: (data) =>
    dispatch(actionDispatcher(data, REDUX_CONSTANTS.SET_BUSINESS_INFO)),
});

const mapStateToProps = (state) => {
  return {
    accounts: state.accounts,
    user: state.user,
    isFirstLogin: Boolean(state.auth?.data?.isFirstLogin),
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(Dashboard));

routes.js

const routes = {
  wiseAccountDetails: "/wiseAcctDetail",
  wiseAcctSuccess: "/wiseAcctSuccess",
};

style.css

.txt1 {
  font-family: Open Sans;
  font-size: 14px;
  color: #000000;
  text-decoration: none solid rgb(0, 0, 0);
  line-height: 40px;
}
.txt2 {
  font-family: Open Sans;
  font-size: 12px;
  color: #121212;
  text-decoration: none solid rgb(18, 18, 18);
  line-height: 20px;
  letter-spacing: 1px;
  text-align: center;
}

.signup-ctn:after {
  content: " ";
  display: block;
  position: fixed;
  left: -50%;
  top: 0px;
  z-index: -1;
  background-image: url("../../assets/img/meteor.png");
  background-position: top right;
  background-repeat: no-repeat;
  -webkit-background-size: 90px;
  -moz-background-size: 90px;
  -o-background-size: 90px;
  background-size: 90px;
  animation-name: meteor1;
  animation-duration: 4s;
  animation-iteration-count: 3;
  animation-fill-mode: forwards;
  width: 100%;
  height: 100%;
}

:root {
  --position: 50%;
}

.section-first {
  background-image: url("../../assets/img/meteor.png");
  background-position: 100% 30%;
  background-repeat: no-repeat;
  -webkit-background-size: 90px;
  -moz-background-size: 90px;
  -o-background-size: 90px;
  background-size: 90px;
  animation-name: meteor2;
  animation-duration: 2s;
  animation-delay: 1;
  animation-iteration-count: 3;
  animation-fill-mode: both;
}
.detailStrip1 {
  background: #e3cdf3;
  padding: 20px 10px;
}
.detailStrip2 {
  background: #fedeff;
  padding: 20px 10px;
}
.btnNew {
  max-width: 200px;
  min-width: 190px;
  background: #ffc153;
  border: 0px !important;
  height: 44px;
  color: #1a1a1a;
}
.btnNew:hover {
  background: #ffc053c4;
}
.btnNew2 {
  max-width: 200px;
  min-width: 190px;
  background: #61297f;
  border: 0px !important;
  height: 44px;
}
.btnNew2:hover {
  background: #61297f;
}
.bodyGraps {
  width: 735px;
  /* height: 800px; */
  border-radius: 5px;
  fill: #ffffff;
  /* box-shadow: 5px 5px 5px rgba(97, 41, 127, 0.5); */
  stroke-width: 1;
  box-shadow: 5px 5px 5px rgb(97 41 127 / 50%);
  border: solid thin #bac1d4;
  padding: 7% 1%;
}
.bodyGraps2 {
  width: 735px;
  /* height: 508px; */
  border-radius: 5px;
  fill: #ffffff;
  box-shadow: 5px 5px 5px rgb(97 41 127 / 50%);
  border: solid thin #bac1d4;
  padding: 7% 1%;
}

@keyframes meteor1 {
  0% {
    background-position: 0, -50;
  }
  100% {
    background-position: 50% 50%;
  }
}

@keyframes meteor2 {
  /* 0%   {background-position: 0, -50;} */
  100% {
    background-position: 0% 80%;
  }
}

.slider-c {
  position: relative;
  top: -68%;
  left: 37%;
  max-width: 55%;
  height: 2em;
  /* background-color: blanchedalmond; */
}

.btn-img {
  width: 8em;
}

.slider-child > p {
  color: #000000;
  text-decoration: none solid rgba(0, 0, 0, 0.6);
}

.slider-child > img {
  margin-top: 4em;
  margin-bottom: 3em;
}

.slider-child > * {
  display: block;
  text-align: center;
  text-align-last: center;
  font-size: 12px;
}

.slider-child > h1 {
  font-size: 16px;
  margin-bottom: 2em;
}

.forgot-password-section {
  text-align: center;
  margin-top: 50px;
}

.login-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.login-alert p {
  margin-bottom: 0px;
  font-size: 12px;
}

.welcome-text {
  font-size: 28px;
}
.full {
  width: 100%;
}

.login-header {
  height: 200px;
  min-height: 150px;
  background-image: url("../../assets/img/black-star.png");
  background-repeat: no-repeat;
  background-position: right;
}

.login-section {
  min-height: 547px;
  max-width: 60%;
}

.section-left {
  max-width: 40%;
  display: flex;
  justify-content: space-between;
}

.slider-div {
  margin-top: 100px;
  margin-bottom: -100px;
}

.slider-2-img {
  padding-left: 12px;
}

.app-dwnd {
  padding-right: 20px;
  padding-left: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.app-dwnd-2 {
  display: none;
}

.login-header > img {
  margin-left: 70px;
}

.login-body > form > * {
  margin-bottom: 15px;
}

.login-body > form > a {
  display: block;
  color: #1a1a1a;
  font-size: 16px;
}

.login-body > form > .btn {
  font-family: "Roboto", sans-serif;
}

.signup-btn {
  background-color: #dfa226 !important;
  color: #61297f !important;
  border-color: transparent !important;

  /* opacity: 0.7; */
  background-size: cover;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14),
    0px 2px 1px -1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.2);
}

.signup-btn:hover {
  color: #fff !important;
}

.loan-btn {
  background-color: white !important;
  color: #61297f !important;
  /* opacity: 0.7; */
  border: 1px solid #666666;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14),
    0px 2px 1px -1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.2);
}

.base-div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
  font-family: "Roboto", sans-serif;
}

.next,
.previous {
  display: none;
}
.current {
  animation: grow ease 5s;
  -webkit-animation: grow ease 5s;
  -moz-animation: grow ease 5s;
}
.modalWrapper {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 42%);
}
.modalWrapper > .modal-container {
  width: 23vw;
}

@keyframes shrink {
  0% {
    display: block;
    opacity: 1;
  }
  1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

@keyframes grow {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    /* transform: scale(0); */
  }
  100% {
    opacity: 1;
    /* transform: scale(1); */
  }
}

@media only screen and (max-width: 450px) {
  .login-section {
    max-width: 100%;
    min-height: unset;
  }
}

@media only screen and (max-width: 980px) {
  .login-section {
    max-width: 100%;
  }
}

@media only screen and (max-width: 500px) {
  .section-left,
  .slider-div,
  .slider-img {
    width: 100%;
    max-width: 100%;
  }

  .slider-div {
    margin-top: 50px;
    margin-bottom: 0px;
    overflow: hidden;
  }

  .app-dwnd {
    display: none;
  }

  .app-dwnd-2 {
    display: flex;
    justify-content: center;
    /* margin-top: -250px; */
  }

  .slider-c {
    position: relative;
    top: -75%;
    left: 37%;
    max-width: 55%;
    height: 2em;
    /* background-color: blanchedalmond; */
  }

  @keyframes meteor1 {
    /* 0%   {background-position: 0, 0;}
      100% {background-position: 20% 20%; } */
  }

  @keyframes meteor2 {
    /* 0%   {background-position: 0, 0;}
  100% {background-position: 0 8; } */
  }
}

@media only screen and (max-with: 1024px) and (min-width: 500px) {
  .login-container {
    justify-content: space-around;
  }
}

WiseAccountDetail.jsx

import React from "react";
import { connect } from "react-redux";
// import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import Button from "../../components/button";
import CheckBox from "../../components/checkbox";
import img1 from "../../assets/img/payment2.png";
import { routes } from "../../services/apiroutes";
import { request } from "../../services/apiservice";
import { getToken, getProfileFromToken } from "../../services/auth";
import { ErrorHandler } from "../../factories/errorHandler";
// import { saveToStore } from "../../store/cacheStorage";
import "./style.css";
import { ROUTES } from "../../constants/routepaths";
import { REDUX_CONSTANTS } from "../../constants/reduxConstants";
import { actionDispatcher } from "../../store/actions/onboarding";
import Alert from "../../components/Alerts";
import { Modal } from "react-bootstrap";
import { cmsModel } from "models/contactusModel";
import ProcessingModalComponent from "../../components/Modals/processingModal";

export class WiseAccountDetails extends React.Component {
  // handleContinue = () => {
  //   this.props.history.push(ROUTES.wiseAcctSuccess);
  // };
  state = {
    LogginUserProfile: {},
    errMessage: "",
    enableBtn: false,
    showTermsModal: false,
  };

  async componentDidMount() {
    // await this.props.getProducts();
    let user = getProfileFromToken();
    // let user = getUserProfile();
    this.getTerms();
    this.setState({
      LogginUserProfile: user,
    });
  }

  handleContinue = () => {
    this.verifyReference();
  };
  handleShowScreen = () => {
    this.setState({
      enableBtn: !this.state.enableBtn,
    });
  };
  handleToggleModal = () => {
    this.setState((state) => ({ showTermsModal: !state.showTermsModal }));
  };

  // verifyReference = () => {
  //   // const { selectedBank, accountName, accountNumber ,remark, years, customerAddress, signatureImage} = this.state;
  //   // let obj ={
  //   //   "accountName": accountName,
  //   //   "accountNumber": accountNumber,
  //   //   "bankName": selectedBank.label,
  //   //   "bankCode": selectedBank.value,
  //   //   "address": customerAddress,
  //   //   "signature": signatureImage,
  //   //   "refereeId": this.props.refereeId,
  //   //   remark: remark.value,
  //   //   period: years.value
  //   // }

  //   this.setState({ isBusy: true }, () => {
  //     request(routes.CreateWiseAccount(2), "get", null, getToken())
  //       .then((res) => {
  //         console.log(res, "CreateWiseAccount");
  //         this.props.history.push(ROUTES.wiseAcctSuccess);
  //         // if (res.data.response === 0 || res.data.response === "00") {
  //         //   if (!res.data.result) {
  //         //     this.setState({ refereeSubmitted: true, isBusy: false });
  //         //   }
  //         // } else {
  //         //   this.setState({ errMessage: res.data.message, isBusy: false });
  //         // }
  //       })
  //       .catch((err) => {
  //         console.log(err, "CreateWiseAccount");
  //         this.setState({ errMessage: ErrorHandler(err), isBusy: false });
  //       });
  //   });
  // };
  verifyReference = () => {
    // const { selectedBank, accountName, accountNumber ,remark, years, customerAddress, signatureImage} = this.state;
    // let obj ={
    //   "accountName": accountName,
    //   "accountNumber": accountNumber,
    //   "bankName": selectedBank.label,
    //   "bankCode": selectedBank.value,
    //   "address": customerAddress,
    //   "signature": signatureImage,
    //   "refereeId": this.props.refereeId,
    //   remark: remark.value,
    //   period: years.value
    // }

    this.setState({ isBusy: true }, () => {
      request(routes.CreateWiseAccount(2), "get", null, getToken())
        .then((res) => {
          console.log(res, "CreateWiseAccount");
          this.props.history.push(ROUTES.wiseAcctSuccess);
          // if (res.data.response === 0 || res.data.response === "00") {
          //   if (!res.data.result) {
          //     this.setState({ refereeSubmitted: true, isBusy: false });
          //   }
          // } else {
          //   this.setState({ errMessage: res.data.message, isBusy: false });
          // }
        })
        .catch((err) => {
          console.log(err, "error");
          this.setState({ errMessage: ErrorHandler(err), isBusy: false });
        });
    });
  };

  getTerms = () => {
    request(
      routes.GetContent(),
      "post",
      { CollectionName: "PolarisWiseWebTC", channel: "web-retail-content" },
      getToken()
    ).then((res) => {
      let responseModel = cmsModel(res);
      let contents = responseModel.contents;
      this.setState({ termsAndCondition: contents[0].content });
    });
  };

  render() {
    const { errMessage, enableBtn, showTermsModal } = this.state;
    // console.log(REDUX_CONSTANTS, "tomzy Kilode");
    return (
      <div className="signup-ctn">
        {errMessage && (
          <div className="login-alert">
            <Alert text={errMessage} type="danger" />
          </div>
        )}
        {showTermsModal && (
          <Modal
            show={showTermsModal}
            scrollable
            onHide={() => this.setState({ showTermsModal: false })}
          >
            <Modal.Header closeButton>
              <Modal.Title>TERMS AND CONDITIONS</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              {this.state.termsAndCondition ? (
                <div
                  className="term-ctn"
                  dangerouslySetInnerHTML={{
                    __html: this.state.termsAndCondition,
                  }}
                ></div>
              ) : (
                <div className="wiseAcctWrap" style={{ minHeight: 370 }}>
                  <ProcessingModalComponent
                    showModal={true}
                    className="loan-processsing-modal"
                  />
                </div>
              )}
            </Modal.Body>
            <Modal.Footer>
              <button
                type="button"
                className="btn polaris-primary"
                data-dismiss="modal"
                onClick={() =>
                  this.setState({
                    enableBtn: true,
                    showTermsModal: false,
                  })
                }
              >
                ACCEPT
              </button>
              <button
                type="button"
                className="btn btn-secondary"
                data-dismiss="modal"
                onClick={() =>
                  this.setState({
                    enableBtn: false,
                    showTermsModal: false,
                  })
                }
              >
                DECLINE
              </button>
            </Modal.Footer>
          </Modal>
        )}
        <div className="container">
          <div className="row">
            <div className="col-sm-12">
              <div className="d-flex flex-column justify-content-center align-items-center">
                <div className="d-flex flex-column align-items-center bodyGraps">
                  <img
                    src={img1}
                    style={{ width: 100, height: 98 }}
                    alt="phone slider"
                  />
                  <p className="txt1 text-center">
                    You are about to open a Wise Account with the following
                    details:
                  </p>
                  <div
                    className="d-flex flex-column w-100 mb-3"
                    style={{ maxWidth: 430 }}
                  >
                    <div className="w-100 d-flex detailStrip1">
                      <div className="d-flex text-center flex-fill justify-content-center txt2 font-weight-bold">
                        Band(average monthly Balance)
                      </div>
                      <div className="d-flex  text-center flex-fill justify-content-center txt2 font-weight-bold">
                        Interest Rate
                      </div>
                    </div>

                    <div className="w-100 d-flex detailStrip2">
                      <div className="d-flex text-center flex-fill justify-content-center txt2">
                        ₦100k - ₦999.99k
                      </div>
                      <div className="d-flex  text-center flex-fill justify-content-center txt2">
                        1.5%
                      </div>
                    </div>
                    <div className="w-100 d-flex detailStrip1">
                      <div className="d-flex text-center flex-fill justify-content-center txt2">
                        ₦1M - ₦49.99M
                      </div>
                      <div className="d-flex  text-center flex-fill justify-content-center txt2">
                        3.5%
                      </div>
                    </div>

                    <div className="w-100 d-flex detailStrip2">
                      <div className="d-flex text-center flex-fill justify-content-center txt2">
                        ₦50M - ₦199.99M
                      </div>
                      <div className="d-flex  text-center flex-fill justify-content-center txt2">
                        5.0%
                      </div>
                    </div>

                    <div className="w-100 d-flex detailStrip1">
                      <div className="d-flex text-center flex-fill justify-content-center txt2">
                        ₦200M & Above
                      </div>
                      <div className="d-flex  text-center flex-fill justify-content-center txt2">
                        6.0%
                      </div>
                    </div>
                  </div>
                  <p className="txt2">
                    Your minimum available balance must be ₦100,000 else you
                    forfeit your interest.
                  </p>
                  <p className="txt2">
                    Withdrawals above 3 times monthly causes you to forfeit your
                    interest.
                  </p>
                  <div
                    className="d-flex justify-content-center align-center-center mt-4 mb-4"
                    style={{ fontSize: 12 }}
                  >
                    <CheckBox
                      value={enableBtn}
                      handleCheckboxChange={() => this.handleShowScreen()}
                    />
                    <span>
                      I agree to{" "}
                      <span
                        style={{
                          textDecoration: "underline",
                          cursor: "pointer",
                        }}
                        onClick={this.handleToggleModal}
                      >
                         Terms and Conditions
                      </span>
                    </span>
                  </div>
                  <div className="d-flex align-items-center justify-content-around w-100">
                    <Button
                      type="submit"
                      text="BACK"
                      className="btn btn-secondary full mt-4 btnNew"
                      handleButtonClick={() =>
                        this.props.history.push(ROUTES.dashboard)
                      }
                      // disabled={disableButton}
                    />
                    <Button
                      disabled={!enableBtn}
                      type="submit"
                      text="CONTINUE"
                      className="btn btn-secondary btnNew2 full mt-4 "
                      handleButtonClick={() => this.handleContinue()}
                      // disabled={disableButton}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* <div className="modalWrapper"><Modals showModal={true} /></div> */}
      </div>
    );
  }
}

WiseAccountDetails.propTypes = {
  password: PropTypes.string,
  username: PropTypes.string,
};

const mapDispatchToProps = (dispatch) => {
  return {
    saveAuth: (authData) =>
      dispatch(
        actionDispatcher(authData, REDUX_CONSTANTS.CLIENT_TOKEN_SUCCESS)
      ),
    TrackPage: (PageObject) =>
      dispatch(
        actionDispatcher(PageObject, REDUX_CONSTANTS.NEW_ONBOARDING_PAGE)
      ),
    setWalletInfo: (walletInfo) =>
      dispatch(
        actionDispatcher(walletInfo, REDUX_CONSTANTS.WALLET_INFO_SUCCESS)
      ),
  };
};

export default connect(null, mapDispatchToProps)(WiseAccountDetails);

wiseAcctSuccess.jsx

import React from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";

import Button from "../../components/button";

import img1 from "../../assets/img/pilar2.png";

import "./style.css";
import { ROUTES } from "../../constants/routepaths";
import { REDUX_CONSTANTS } from "../../constants/reduxConstants";
import { actionDispatcher } from "../../store/actions/onboarding";

export class WiseAcctSuccess extends React.Component {
  render() {
    return (
      <div className="signup-ctn">
        <div className="container">
          <div className="row">
            <div className="col-sm-12">
              <div
                className="d-flex flex-column justify-content-center align-items-center"
                style={{ minHeight: "80vh" }}
              >
                <div className="d-flex flex-column align-items-center justify-content-center bodyGraps2">
                  <img
                    src={img1}
                    style={{ width: 100, height: 98 }}
                    alt="phone slider"
                  />
                  <p className="txt1 text-center">Nicely Done</p>

                  <p className="txt2" style={{ width: "70%" }}>
                    Your account is now being created, you will be notified once
                    this is done.
                  </p>

                  <div className="d-flex align-items-center justify-content-around w-100">
                    <Button
                      type="submit"
                      text="DONE"
                      className="btn btn-secondary btnNew2 full mt-4 "
                      handleButtonClick={() =>
                        this.props.history.push(ROUTES.dashboard)
                      }
                      // disabled={disableButton}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* <div className="modalWrapper"><Modals showModal={true} /></div> */}
      </div>
    );
  }
}

WiseAcctSuccess.propTypes = {
  password: PropTypes.string,
  username: PropTypes.string,
};

const mapDispatchToProps = (dispatch) => {
  return {
    saveAuth: (authData) =>
      dispatch(
        actionDispatcher(authData, REDUX_CONSTANTS.CLIENT_TOKEN_SUCCESS)
      ),
    TrackPage: (PageObject) =>
      dispatch(
        actionDispatcher(PageObject, REDUX_CONSTANTS.NEW_ONBOARDING_PAGE)
      ),
    setWalletInfo: (walletInfo) =>
      dispatch(
        actionDispatcher(walletInfo, REDUX_CONSTANTS.WALLET_INFO_SUCCESS)
      ),
  };
};

export default connect(null, mapDispatchToProps)(WiseAcctSuccess);