[DEV] Interview Scheduler using Nylas

README.md

@@ -136,10 +136,13 @@ Some config files are using domain `local.topcoder-dev.com`. You can change it t
    nvm use # or make sure to use Node 10
    npm i   # to install dependencies
 
-    # set environment variables:
+   # set environment variables:
 
    export STRIPE_PUBLIC_KEY=""
 
+   # get the below client id from Nylas app settings in Nylas account
+   export NYLAS_CLIENT_ID=""
+
    npm run dev
 
    # this host TaaS App as http://localhost:8501/taas-app/topcoder-micro-frontends-teams.js

config/dev.js

@@ -10,7 +10,7 @@ module.exports = {
   CONNECT_WEBSITE_URL: "https://connect.topcoder-dev.com",
 
   API: {
-    V5: "https://api.topcoder-dev.com/v5", //"http://localhost:3030/api/v5"
+    V5: "https://api.topcoder-dev.com/v5", //"http://localhost:3000/api/v5"
     V3: "https://api.topcoder-dev.com/v3",
   },
 };

package.json

@@ -70,10 +70,12 @@
     "final-form": "^4.20.1",
     "final-form-arrays": "^3.0.2",
     "immutability-helper": "^3.1.1",
+    "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.33",
     "prop-types": "^15.7.2",
+    "query-string": "^7.0.1",
     "react": "^16.12.0",
     "react-avatar": "^3.9.7",
     "react-datepicker": "^3.8.0",

src/components/BaseModal/index.jsx

@@ -10,24 +10,30 @@
 
 import React from "react";
 import PT from "prop-types";
+import cn from "classnames";
 import { Modal } from "react-responsive-modal";
 import Button from "../Button";
 import IconCross from "../../assets/images/icon-cross-light.svg";
 import "./styles.module.scss";
 
 const modalStyle = {
   borderRadius: "8px",
-  padding: "32px 32px 22px 32px",
+  padding: "20px 24px",
   maxWidth: "640px",
   width: "100%",
   margin: 0,
-  "overflow-x": "hidden",
+  overflowX: "hidden",
 };
 
 const containerStyle = {
   padding: "10px",
 };
 
+const closeButton = {
+  right: "24px",
+  top: "24px",
+};
+
 function BaseModal({
   open,
   onClose,
@@ -37,31 +43,47 @@ function BaseModal({
   closeButtonText,
   disabled,
   extraModalStyle,
+  alignTitleCenter = false,
+  showButton = true,
+  closeIcon: CloseIcon,
 }) {
   return (
     <Modal
       open={open}
       onClose={onClose}
-      closeIcon={<IconCross width="15px" height="15px" />}
+      closeIcon={
+        CloseIcon ? CloseIcon : <IconCross width="15px" height="15px" />
+      }
       styles={{
         modal: { ...modalStyle, ...extraModalStyle },
         modalContainer: containerStyle,
+        closeButton,
       }}
       center={true}
     >
-      {title && <h2 styleName="title">{title}</h2>}
-      <div styleName="content">{children}</div>
-      <div styleName="button-group">
-        {button && button}
-        <Button
-          type="secondary"
-          size="medium"
-          onClick={onClose}
-          disabled={disabled}
+      {title && (
+        <h2
+          styleName={cn("title", {
+            "center-title": alignTitleCenter,
+          })}
         >
-          {closeButtonText ? closeButtonText : "Cancel"}
-        </Button>
-      </div>
+          {title}
+        </h2>
+      )}
+      <div styleName="content">{children}</div>
+      {showButton && (
+        <div styleName="button-group">
+          {button && button}
+          <Button
+            type="secondary"
+            size="medium"
+            onClick={onClose}
+            disabled={disabled}
+          >
+            {closeButtonText ? closeButtonText : "Cancel"}
+          </Button>
+        </div>
+      )}
     </Modal>
   );
 }
@@ -75,6 +97,9 @@ BaseModal.propTypes = {
   closeButtonText: PT.string,
   disabled: PT.bool,
   extraModalStyle: PT.object,
+  showButton: PT.bool,
+  alignTitleCenter: PT.bool,
+  closeIcon: PT.node,
 };
 
 export default BaseModal;