Validate company application page

.env

@@ -4,7 +4,7 @@ HOST_PORT=443
 REACT_APP_API_HOSTNAME="https://localhost:8087"
 
 # Uncomment to disable devtools
-# REACT_APP_ALLOW_DEV_TOOLS=false
+#REACT_APP_ALLOW_DEV_TOOLS=false
 
 # Google Analytics' Universal ID
 ANALYTICS_ID=

src/AppRouter.js

@@ -38,6 +38,7 @@ import EditOfferPage from "./pages/EditOfferPage";
 import PrivacyPolicyPage from "./pages/PrivacyPolicyPage";
 import TermsAndConditionsPage from "./pages/TermsAndConditionsPage";
 import ChangeLogPage from "./pages/ChangeLogPage";
+import ValidationPage from "./pages/ValidationPage";
 
 /**
  *
@@ -135,6 +136,15 @@ const AppRouter = () => (
                     <RulesPage />
                 </PageLayout>
             </Route>
+            <Route exact path="/apply/:token/validate" key="/apply/:token/validate">
+                <PageLayout
+                    key="/apply/:token/validate"
+                    pageTitle="Validate Company Application"
+                    layout={LayoutType.DESKTOP}
+                >
+                    <ValidationPage />
+                </PageLayout>
+            </Route>
             <ProtectedRoute
                 exact
                 key="/review/applications"

src/components/Apply/Company/ApplicationConfirmation.js

@@ -5,7 +5,7 @@ import Constants from "../../../utils/Constants";
 
 const useStyles = makeStyles((theme) => ({
     content: {
-        textAlgin: "justify",
+        textAlign: "justify",
     },
     actions: {
         margin: theme.spacing(1),
@@ -22,14 +22,15 @@ const ApplicationConfirmation = () => {
             <CardHeader title="Application Submitted" />
             <CardContent className={classes.content}>
                 <Typography variant="body2">
-                    Application Submitted, you should receive a confirmation email shortly. If not, please contact us:
+                    Application Submitted: You should receive an email containing a confirmation link for your application.
+                    Please confirm it within 10 minutes; otherwise, the link will expire. If you have not received an email, please contact us at
                     {" "}
                     <Link color="secondary" href={`mailto:${Constants.CONTACT_US_EMAIL}`}>
                         {Constants.CONTACT_US_EMAIL}
                     </Link>
                 </Typography>
                 <Typography variant="body2" className={classes.secondText}>
-                    {"Once you're approved, you will receive an email, and then you can log into NIJobs! "}
+                    {"Once your application is approved, you will receive an email. Then, you can log into NIJobs.  "}
                     Do not forget your password, you will need it on the first login.
                 </Typography>
             </CardContent>

src/components/Apply/Company/CompanyApplicationUtils.js

@@ -1,7 +1,5 @@
 import { validationRulesGenerator, generalHumanError } from "../../../utils";
 import { AuthConstants } from "../../Navbar/Auth/AuthUtils";
-
-
 export const CompanyApplicationConstants = {
     password: AuthConstants.password,
     motivation: {
@@ -19,6 +17,34 @@ export const generateValidationRule = validationRulesGenerator(CompanyApplicatio
 const HumanReadableErrors = Object.freeze({
     "email-already-exists": "The provided email is already associated to our platform.",
     "company-application-duplicate-email": "There is already an application associated with that email.",
+    "company-application-recently-created": "There is an application created less than 10 minutes ago associated with this email.",
 });
 
+const ValidationErrors = Object.freeze({
+    "invalid-token": {
+        title: "Error! Application does not exist!",
+        text: "An error has occurred while validating your application! The application you are trying to validate does not exist.",
+    },
+    "expired-token": {
+        title: "Error! Link has expired!",
+        text: "An error has occurred while validating your application. The link that was sent to you has expired." +
+            " You will need to create a new application.",
+    },
+    "application-already-validated": {
+        title: "Application is already validated!",
+        text: "This application is already validated. ",
+    },
+});
+
+export const getValidationError = (error) => {
+    const errorMsg = { title: "Unexpected Error!", text: "An unexpected error has occurred while validating your application. " };
+    if (!error) {
+        return errorMsg;
+    }
+    if (typeof ValidationErrors[error] === "object") {
+        return ValidationErrors[error];
+    }
+    return errorMsg;
+};
+
 export const getHumanError = (error) => generalHumanError(error, HumanReadableErrors);

src/components/Offers/Form/form-components/OfferForm.js

@@ -7,9 +7,9 @@ import {
     FormControl,
     Typography,
     Collapse,
-    Button,
+    Button, makeStyles,
 } from "@material-ui/core";
-import React, { useState, useCallback, useContext } from "react";
+import React, {useState, useCallback, useContext, useEffect} from "react";
 import { Redirect } from "react-router-dom";
 import PropTypes from "prop-types";
 import MultiOptionTextField from "../../../utils/form/MultiOptionTextField";
@@ -36,13 +36,18 @@ import { Controller } from "react-hook-form";
 import { useMobile } from "../../../../utils/media-queries";
 import "../editor.css";
 import ApplyURLComponent from "./ApplyURLComponent";
+import { Alert } from "../../../utils/Alert";
+import { fetchCompanyApplicationState } from "../../../../services/companyService";
+import useSession from "../../../../hooks/useSession.js";
+import { addSnackbar } from "../../../../actions/notificationActions";
 
 export const PAID_OPTIONS = [
     { value: "none", label: "Unspecified" },
     { value: true, label: "Paid" },
     { value: false, label: "Unpaid" },
 ];
 
+
 const OfferForm = ({ context, title }) => {
     const {
         submit,
@@ -92,6 +97,27 @@ const OfferForm = ({ context, title }) => {
     const Content = isMobile ? DialogContent : CardContent;
     const classes = useOfferFormStyles(isMobile)();
 
+    const [state, setState] = useState( "APPROVED");
+    const session = useSession();
+
+    useEffect(() => {
+        if(!session.isValidating && session.isLoggedIn) {
+            const request = fetchCompanyApplicationState(session.data?.company?._id)
+                .then((state) => {
+                    setState(state);
+                })
+                .catch(() => {
+                    addSnackbar({
+                        message: "An unexpected error occurred, please try refreshing the browser window.",
+                        key: `${Date.now()}-fetchCompanyApplicationsError`,
+                    });
+                });
+            return () => {
+                request.cancel();
+            };
+        }
+    }, [addSnackbar, session.isValidating, session.isLoggedIn]);
+
     const showOwnerComponent = isAdmin && showCompanyField;
 
     const SelectStylingProps = {
@@ -107,7 +133,9 @@ const OfferForm = ({ context, title }) => {
             ? <Redirect to={`/offer/${offerId}`} push />
             :
             <div className={classes.formCard}>
-                <CardHeader title={!isMobile && title } />
+                {(state !== "APPROVED") && session.isLoggedIn && <Alert type={"warning"}
+                                                  fontSize={1.2}>{"This offer will stay hidden from the public until your account is approved!"}</Alert>}
+                <CardHeader title={!isMobile && title}/>
                 <Content className={classes.formContent}>
                     <ConnectedLoginAlert
                         isLoggedIn={isLoggedIn}
@@ -164,7 +192,7 @@ const OfferForm = ({ context, title }) => {
                                         <Controller
                                             name="fields"
                                             render={(
-                                                { field: {  onBlur, name } },
+                                                { field: { onBlur, name } },
                                             ) => (
                                                 <MultiOptionAutocomplete
                                                     name={name}

src/components/Offers/Form/form-components/offerStyles.js

@@ -73,4 +73,13 @@ export default (isMobile) => makeStyles((theme) => ({
         paddingTop: theme.spacing(2),
         marginTop: theme.spacing(2),
     },
+    warning:{
+        fontSize:"1.2em",
+        "& .MuiAlert-icon": {
+            fontSize: "1.5em"
+        },
+        marginBottom:"1em"
+
+
+    },
 }));

src/components/Offers/New/CreateOfferForm.js

@@ -1,4 +1,3 @@
-
 import React, { useCallback } from "react";
 import { parseRequestErrors } from "../Form/OfferUtils";
 import { newOffer } from "../../../services/offerService";

src/components/Review/Applications/ApplicationsReviewTableSchema.js

@@ -6,7 +6,9 @@ export const columns = {
 };
 
 export const ApplicationStateLabel = Object.freeze({
+    UNVERIFIED: "Unverified",
     APPROVED: "Approved",
     PENDING: "Pending",
     REJECTED: "Rejected",
+
 });

src/components/utils/Alert.js

@@ -0,0 +1,33 @@
+import {Alert as MUI_Alert, AlertTitle} from "@material-ui/lab";
+import {makeStyles} from "@material-ui/core";
+import PropTypes from "prop-types";
+import { Warning as WarningIcon } from "@material-ui/icons";
+import React from 'react';
+
+const useStyles = (props) => makeStyles((theme) => ({
+
+    content:{
+        fontSize: props.fontSize+"em",
+        "& .MuiAlert-icon": {
+            fontSize: (props.fontSize+0.3)+"em"
+        },
+        margin:"0.5em 0em"
+    },
+}));
+
+export const Alert = ({type, title, fontSize = 1, children}) => {
+    const classes = useStyles({fontSize: fontSize})();
+    return (
+        <MUI_Alert severity={type} className={classes.content} icon={<WarningIcon />}>
+            {title ? <AlertTitle>{title}</AlertTitle> : null}
+            {children}
+        </MUI_Alert>
+    )
+}
+
+Alert.propTypes = {
+    type: PropTypes.oneOf(["error", "warning", "info", "success"]),
+    title: PropTypes.string,
+    children: PropTypes.string,
+    fontSize: PropTypes.number,
+}

src/pages/CompanyOffersManagementPage.js

@@ -1,21 +1,53 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import CompanyOffersManagementWidget from "../components/Company/Offers/Manage/CompanyOffersManagementWidget";
 import { CardContent, makeStyles } from "@material-ui/core";
 import { useMobile } from "../utils/media-queries";
+import { Alert } from "../components/utils/Alert";
+import { fetchCompanyApplicationState } from "../services/companyService";
+import useSession from "../hooks/useSession";
+import { addSnackbar } from "../actions/notificationActions";
 
 const useStyles = (isMobile) => makeStyles((theme) => ({
     content: {
         padding: isMobile ? theme.spacing(2, 2) : theme.spacing(3, 9),
     },
+
 }));
 
 const CompanyOffersManagementPage = () => {
     const isMobile = useMobile();
     const classes = useStyles(isMobile)();
+    const [state, setState_] = useState( "APPROVED");
+    const session = useSession();
+
+    useEffect(() => {
+        if(!session.isValidating && session.isLoggedIn) {
+            const request = fetchCompanyApplicationState(session.data?.company?._id)
+                .then((state_) => {
+                    console.log(state_);
+                    console.log("Tipo");
+                    console.log(typeof state_);
+                    setState_(state_);
+                    console.log(state);
+
+                })
+                .catch(() => {
+                    addSnackbar({
+                        message: "An unexpected error occurred, please try refreshing the browser window.",
+                        key: `${Date.now()}-fetchCompanyApplicationsError`,
+                    });
+                });
+            return () => {
+                request.cancel();
+            };
+        }
+    }, [addSnackbar, session.isLoggedIn, session.isValidating]);
 
     return (
         <CardContent className={classes.content}>
-            <CompanyOffersManagementWidget isMobile={isMobile} />
+            {(state !== "APPROVED") && session.isLoggedIn && <Alert type={"warning"}
+                                              fontSize={1.2}>{"Your offers will stay hidden from the public until your account is approved!"}</Alert>}
+            <CompanyOffersManagementWidget isMobile={isMobile}/>
         </CardContent>
     );
 };

src/pages/CreateOfferPage.js

@@ -1,5 +1,6 @@
 import React from "react";
 import CreateOfferForm from "../components/Offers/New/CreateOfferForm";
+import {Alert} from "@material-ui/lab";
 
 const CreateOfferPage = () => (
     <>