customer onboarding first row

frontend/package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@date-io/date-fns": "^2.13.1",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@material-ui/core": "^4.12.3",
@@ -13,9 +12,11 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "dotenv": "^16.0.0",
     "ethers": "^5.6.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "material-ui-phone-number": "^3.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
     "react-webcam": "^7.0.1",

frontend/src/Routes.js

@@ -3,11 +3,11 @@ import { BrowserRouter, Switch, Route } from "react-router-dom";
 import Borrow from "./borrow/Borrow";
 import Home from "./home/Home";
 import Token from "./home/Token";
-import Mobile from "./sakti/mobile/Mobile";
-import VerifyNumber from "./sakti/verifyNumber/VerifyNumber";
-import ChooseLanguage from "./sakti/language/ChooseLanguage";
-import LoadingScreen from "./sakti/loadingScreen/LoadingScreen";
-import LocationPermission from "./sakti/locationPermission/LocationPermission";
+import Mobile from "./customer/onboarding/Mobile";
+import VerifyNumber from "./customer/onboarding/VerifyNumber";
+import ChooseLanguage from "./customer/onboarding/ChooseLanguage";
+import LoadingScreen from "./customer/onboarding/LoadingScreen";
+import LocationPermission from "./customer/onboarding/LocationPermission";
 import Overview from "./tinlake/components/overview/Overview";
 import Test from "./tinlake/Test";
 import SignIn from "./user/SignIn";
@@ -16,13 +16,14 @@ import Logout from "./user/Logout";
 import DashboardRepayment from "./user/DashboardRepayment";
 import LoanStatement from "./user/LoanStatement";
 import DashboardReview from "./user/DashboardReview";
-import Welcome from "./sakti/welcome/Welcome";
 import LandingPage from "./investor/LandingPage";
 import CompanyInfo from "./investor/CompanyInfo";
 import KYC from "./investor/KYC";
 import Wallet from "./investor/Wallet";
 import Dashboard from "./investor/Dashboard";
 import Disbursement from "./investor/Disbursement";
+import Welcome from "./customer/onboarding/Welcome";
+import Docs from "./customer/onboarding/Docs";
 
 const Routes = () => {
   return (
@@ -34,13 +35,14 @@ const Routes = () => {
         <Route exact path="/token" component={Token} />
         <Route exact path="/test" component={Test} />
         <Route exact path="/overview" component={Overview} />
-        <Route exact path="/sale" component={Welcome} />
         <Route exact path="/sign" component={DashboardMain} />
         <Route exact path="/landing" component={LandingPage} />
         <Route exact path="/info" component={CompanyInfo} />
         <Route exact path="/kyc" component={KYC} />
         <Route exact path="/wallet" component={Wallet} />
+        <Route exact path="/dashboard" component={Dashboard} />
         <Route exact path="/disbursement" component={Disbursement} />
+        <Route exact path="/sale" component={Docs} />
       </Switch>
     </BrowserRouter>
   );

frontend/src/customer/onboarding/ChooseLanguage.js

@@ -0,0 +1,110 @@
+import React from "react";
+import { Box, Stack, Container, Button, Typography, Grid } from "@mui/material";
+
+const Item = ({ path, name }) => {
+  return (
+    <Box
+      sx={{
+        border: "1px solid #000000",
+        borderRadius: "12px",
+        width: "90px",
+        height: "90px",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <img src={path} alt="" />
+      <Typography>{name}</Typography>
+    </Box>
+  );
+};
+
+const ChooseLanguage = () => {
+  return (
+    <>
+      <Box
+        sx={{
+          backgroundColor: "#7165E3",
+          height: "140px",
+          textAlign: "center",
+          pt: "35px",
+          color: "#ffffff",
+          borderEndStartRadius: "12px",
+          borderEndEndRadius: "12px",
+        }}
+      >
+        <Stack
+          sx={{
+            textAlign: "center",
+          }}
+        >
+          <Typography variant="h4">Choose Language</Typography>
+        </Stack>
+        <Typography
+          variant="body2"
+          sx={{
+            mx: "auto",
+          }}
+        >
+          Please choose a language below
+        </Typography>
+        <Typography
+          variant="body2"
+          sx={{
+            mx: "auto",
+          }}
+        >
+          You can always change language from profile settings later
+        </Typography>
+      </Box>
+      <Container
+        maxWidth="sm"
+        sx={{
+          mt: "50px",
+          textAlign: "center",
+        }}
+      >
+        <Grid container spacing={6}>
+          <Grid item xs={4}>
+            <Item path="./assets/hindiLetter.png" name="Hindi"></Item>
+          </Grid>
+          <Grid item xs={4}>
+            <Item path="./assets/englishLetter.png" name="English"></Item>
+          </Grid>
+          <Grid item xs={4}>
+            <Item path="./assets/odiaLetter.png" name="Odia"></Item>
+          </Grid>
+          <Grid item xs={4}>
+            <Item path="./assets/kannadaLetter.png" name="Kannada"></Item>
+          </Grid>
+          <Grid item xs={4}>
+            <Item path="./assets/tamilLetter.png" name="Tamil"></Item>
+          </Grid>
+          <Grid item xs={4}>
+            <Item path="./assets/bengaliLetter.png" name="Bengali"></Item>
+          </Grid>
+        </Grid>
+      </Container>
+      <Container
+        maxWidth="sm"
+        sx={{
+          mt: "56px",
+        }}
+      >
+        <Button
+          variant="contained"
+          sx={{
+            background: "#7165E3",
+            float: "right",
+          }}
+        >
+          Continue
+        </Button>
+      </Container>
+    </>
+  );
+};
+
+export default ChooseLanguage;

frontend/src/customer/onboarding/Docs.js

@@ -0,0 +1,123 @@
+import React from "react";
+import { Box, Stack, Container, Button, Typography, Grid } from "@mui/material";
+
+const Item = ({ path, name }) => {
+  return (
+    <Box
+      sx={{
+        border: "1px solid #000000",
+        borderRadius: "12px",
+        width: "180px",
+        height: "200px",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <img
+        src={path}
+        alt=""
+        style={{
+          width: "110px",
+          height: "94px",
+          objectFit: "contain",
+        }}
+      />
+      <Typography
+        sx={{
+          maxWidth: "150px",
+        }}
+      >
+        {name}
+      </Typography>
+    </Box>
+  );
+};
+
+const Docs = () => {
+  return (
+    <>
+      <Box
+        sx={{
+          backgroundColor: "#7165E3",
+          height: "140px",
+          textAlign: "center",
+          pt: "45px",
+          color: "#ffffff",
+          borderEndStartRadius: "12px",
+          borderEndEndRadius: "12px",
+        }}
+      >
+        <Stack
+          sx={{
+            textAlign: "center",
+          }}
+        >
+          <Typography variant="h4">Please Keep these Handy</Typography>
+        </Stack>
+      </Box>
+      <Container
+        maxWidth="md"
+        sx={{
+          mt: "50px",
+          textAlign: "center",
+        }}
+      >
+        <Grid container spacing={4}>
+          <Grid item xs={4}>
+            <Item
+              path="./assets/pan.png"
+              name="1. PAN Card or MGNREGA card "
+            ></Item>
+          </Grid>
+          <Grid item xs={4}>
+            <Item path="./assets/aadhar.png" name="2. AADHAR"></Item>
+          </Grid>
+          <Grid item xs={4}>
+            <Item
+              path="./assets/udyogAadharCertificate.png"
+              name="3. UDYAM / Shop Establishment / FSSAI / GST / Other Business Proof"
+            ></Item>
+          </Grid>
+          <Grid item xs={4}>
+            <Item
+              path="./assets/houseUtilityBills.png"
+              name="4. Utility Bills of Residence and Shop "
+            ></Item>
+          </Grid>
+          <Grid item xs={4}>
+            <Item
+              path="./assets/passbook.png"
+              name="5. Bank Account Details"
+            ></Item>
+          </Grid>
+          <Grid item xs={4}>
+            <Item
+              path="./assets/smiling.png"
+              name="6. SMILE ON YOUR FACE "
+            ></Item>
+          </Grid>
+        </Grid>
+      </Container>
+      <Container
+        maxWidth="sm"
+        sx={{
+          py: "60px",
+        }}
+      >
+        <Button
+          variant="contained"
+          sx={{
+            background: "#7165E3",
+            float: "right",
+          }}
+        >
+          I am Ready, Let’ Go !!
+        </Button>
+      </Container>
+    </>
+  );
+};
+
+export default Docs;

frontend/src/customer/onboarding/LoadingScreen.js

@@ -0,0 +1,58 @@
+import React from "react";
+import { Container, Stack, Typography } from "@mui/material";
+
+const LoadingScreen = () => {
+  return (
+    <>
+      <style>{"body { background-color: #7165E3; }"}</style>
+      <Container maxWidth="sm">
+        <Stack
+          sx={{
+            mt: "200px",
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "center",
+          }}
+        >
+          <img
+            style={{
+              objectFit: "contain",
+              width: "276px",
+              height: "93px",
+              backgroundColor: "#ffffff",
+              borderRadius: "22px",
+            }}
+            src="./logo.png"
+            alt="logo"
+          />
+        </Stack>
+        <Stack
+          sx={{
+            color: "#ffffff",
+            mt: "250px",
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: "0px 5px",
+          }}
+        >
+          <Typography variant="body1">Powered By </Typography>
+          <img
+            style={{
+              objectFit: "contain",
+              width: "86px",
+              height: "29px",
+              backgroundColor: "#ffffff",
+              borderRadius: "12px",
+            }}
+            src="./logo.png"
+            alt="logo"
+          />
+        </Stack>
+      </Container>
+    </>
+  );
+};
+
+export default LoadingScreen;