Design Updates

components/ContactModal/index.js

@@ -0,0 +1,207 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Container,
+  Typography,
+  Button,
+  Grid,
+  makeStyles,
+  Dialog,
+} from '@material-ui/core';
+import MailIcon from '@material-ui/icons/Mail';
+
+import { Formik, Form, Field } from 'formik';
+import { TextField } from 'formik-material-ui';
+
+import SnackAlert from '../shared/SnackAlert';
+import emailValidator from '../../utils/emailValidator';
+import api from '../../utils/api';
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+    borderRadius: '10px',
+  },
+  mailIcon: {
+    color: theme.palette.secondary.main,
+    fontSize: '4rem',
+    justifyContent: 'center',
+  },
+  aside: {
+    backgroundColor: theme.palette.primary.main,
+    height: '100%',
+  },
+  title: {
+    marginBottom: theme.spacing(2),
+  },
+}));
+
+export default function Contact({ open, setOpen }) {
+  const classes = useStyles();
+  const [successOpen, setSuccessOpen] = useState(false);
+  const [errorOpen, setErrorOpen] = useState(false);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const initialValues = {
+    full_name: '',
+    email: '',
+    message: '',
+  };
+
+  const handleValidate = (values) => {
+    const errors = {};
+    if (!values.full_name) {
+      errors.full_name = 'Required';
+    }
+
+    if (!values.email) {
+      errors.email = 'Required';
+    } else if (emailValidator(values.email)) {
+      errors.email = 'Invalid Email Address';
+    }
+
+    if (!values.message) {
+      errors.message = 'Required';
+    }
+    return errors;
+  };
+
+  const handleSubmit = async (values) => {
+    api.post('/contact', values)
+      .then(() => setSuccessOpen(true))
+      .catch(() => setErrorOpen(true));
+  };
+
+  const handleSnackClose = (_, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setSuccessOpen(false);
+    setErrorOpen(false);
+  };
+
+  return (
+    <div>
+      <SnackAlert
+        open={successOpen}
+        onClose={handleSnackClose}
+        severity="success"
+        message="Success! We'll be in contact with you shortly"
+        id="success-message"
+      />
+      <SnackAlert
+        open={errorOpen}
+        onClose={handleSnackClose}
+        severity="error"
+        message="Some error has occurred. Please try again."
+        id="error-message"
+      />
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="simple-modal-title"
+        aria-describedby="simple-modal-description"
+      >
+        <div className={classes.paper}>
+          <Grid
+            container
+            spacing={0}
+            className={classes.modal}
+          >
+            <Grid
+              item
+              sm={4}
+              style={{ textAlign: 'center', paddingTop: '3rem' }}
+            >
+              <MailIcon className={classes.mailIcon} />
+
+              <Typography variant="body1">
+                If you’re having any issues with our service feel
+                free to contact us and we’ll get back to you as soon as possible
+              </Typography>
+            </Grid>
+
+            <Grid container item sm={8}>
+              <Container component="main" maxWidth="md">
+                <Grid container justify="center" item>
+                  <Typography variant="h4" className={classes.title}>
+                    Contact Us
+                  </Typography>
+                </Grid>
+                <Formik
+                  initialValues={initialValues}
+                  validate={(values) => handleValidate(values)}
+                  onSubmit={(values, { setSubmitting }) => handleSubmit(values, setSubmitting)}
+                >
+                  {({
+                    submitForm, isSubmitting, values,
+                  }) => (
+                    <Form style={{ textAlign: 'center' }}>
+                      <Grid container spacing={2}>
+                        <Grid item xs={12}>
+                          <Field
+                            component={TextField}
+                            variant="outlined"
+                            name="full_name"
+                            label="Full Name"
+                            value={values.full_name}
+                            style={{ marginBottom: '10px', width: '100%' }}
+                            required
+                          />
+                          <Field
+                            component={TextField}
+                            variant="outlined"
+                            type="email"
+                            label="Email"
+                            name="email"
+                            value={values.email}
+                            style={{ marginBottom: '10px', width: '100%' }}
+                            required
+                          />
+                          <Field
+                            component={TextField}
+                            variant="outlined"
+                            label="Message"
+                            name="message"
+                            multiline
+                            InputProps={{ classes: { root: classes.message } }}
+                            style={{ marginBottom: '10px', width: '100%' }}
+                            value={values.message}
+                            required
+                          />
+                        </Grid>
+                      </Grid>
+
+                      <Button
+                        variant="contained"
+                        color="secondary"
+                        className={classes.submit}
+                        onClick={submitForm}
+                        disabled={isSubmitting}
+                      >
+                        Send
+                      </Button>
+                    </Form>
+                  )}
+                </Formik>
+
+              </Container>
+
+            </Grid>
+          </Grid>
+        </div>
+      </Dialog>
+    </div>
+  );
+}
+
+Contact.propTypes = {
+  open: PropTypes.bool.isRequired,
+  setOpen: PropTypes.func.isRequired,
+};

components/Dashboard/Card.js

@@ -5,8 +5,9 @@ import {
   makeStyles,
   Divider,
   Typography,
-  Link,
+  // Link,
 } from '@material-ui/core';
+import Link from 'next/link';
 
 const useStyles = makeStyles((theme) => ({
   title: {
@@ -37,17 +38,18 @@ function Card({ bridge, index }) {
   return (
     <Grid item xs={12} sm={6} md={4} key={`main-grid-${bridge.title}`}>
       <Paper className={classes.paper} id={`card-${index}`}>
-        <Link href={`/bridge/${bridge.id}`}>
-          <Typography
-            variant="h5"
-            color="primary"
-            className={classes.title}
-            style={{ fontWeight: 600 }}
-            id={`card-title-${index}`}
-          >
+        <Typography
+          variant="h5"
+          color="primary"
+          className={classes.title}
+          style={{ fontWeight: 600 }}
+          id={`card-title-${index}`}
+        >
+          <Link href={`/bridge/${bridge.slug}`}>
             {bridge.title}
-          </Typography>
-        </Link>
+          </Link>
+        </Typography>
+
         <Divider light className={classes.paddedDivider} />
 
         <Grid container spacing={2}>
@@ -92,13 +94,18 @@ function Card({ bridge, index }) {
           <Grid item xs container spacing={2}>
             <Grid item xs>
               {bridge.eventId ? (
-                <Link href={`/events/${bridge.eventId}`}>
-                  <Typography variant="subtitle1" color="secondary">
+
+                <Typography
+                  variant="subtitle1"
+                  color="secondary"
+                  id={`card-events-${index}`}
+                >
+                  <Link href={`/events/${bridge.eventId}`}>
                     View Events
-                  </Typography>
-                </Link>
+                  </Link>
+                </Typography>
               ) : (
-                <Typography variant="subtitle1">
+                <Typography variant="subtitle1" id={`card-events-${index}`}>
                   View Events
                 </Typography>
               )}
@@ -115,7 +122,7 @@ export default Card;
 
 Card.propTypes = {
   bridge: PropTypes.shape({
-    id: PropTypes.number.isRequired,
+    slug: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
     updatedAt: PropTypes.string.isRequired,
     eventCount: PropTypes.number.isRequired,

components/Editor/ActionsDialog/index.js

@@ -26,7 +26,7 @@ const useStyles = makeStyles({
 });
 
 function ActionsDialog({
-  active, open, onClose, bridgeId,
+  active, open, onClose, bridgeSlug,
 }) {
   const [errorOpen, setErrorOpen] = useState(false);
   const [successOpen, setSuccessOpen] = useState(false);
@@ -35,7 +35,7 @@ function ActionsDialog({
 
   const handleAbort = () => {
     api.patch('/events/abort', {
-      bridge_id: bridgeId,
+      bridge_slug: bridgeSlug,
     })
       .then((res) => {
         if (res.status === 200) {
@@ -51,8 +51,8 @@ function ActionsDialog({
   };
 
   const handleActivate = async () => {
-    await api.patch(`/bridges/${bridgeId}/${active ? 'deactivate' : 'activate'}`).then(() => {
-      router.push(`/bridge/${bridgeId}`);
+    await api.patch(`/bridges/${bridgeSlug}/${active ? 'deactivate' : 'activate'}`).then(() => {
+      router.push(`/bridge/${bridgeSlug}`);
       setSuccessOpen(true);
       setTimeout(() => {
         setSuccessOpen(false);
@@ -66,7 +66,7 @@ function ActionsDialog({
   };
 
   const handleDelete = () => {
-    api.delete(`/bridges/${bridgeId}`).then(() => {
+    api.delete(`/bridges/${bridgeSlug}`).then(() => {
       router.push('/dashboard');
     }).catch(() => {
       setErrorOpen(true);
@@ -136,7 +136,7 @@ ActionsDialog.propTypes = {
   active: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   open: PropTypes.bool.isRequired,
-  bridgeId: PropTypes.number.isRequired,
+  bridgeSlug: PropTypes.string.isRequired,
 };
 
 export default ActionsDialog;

components/Editor/index.js

@@ -49,7 +49,7 @@ function Editor({ bridge, isEditView }) {
 
   const {
     active,
-    id,
+    slug,
     outboundUrl,
     httpMethod,
     headers,
@@ -140,9 +140,9 @@ function Editor({ bridge, isEditView }) {
   const handleSubmit = async (values, setSubmitting) => {
     if (validatePayloads(values.payloadCode, values.testPayloadCode)) {
       // POST if new bridge, otherwise PATCH
-      if (id) {
+      if (slug) {
         await api
-          .patch(`/bridges/${id}`, generatePayload(values))
+          .patch(`/bridges/${slug}`, generatePayload(values))
           .then(() => setOpen(true))
           .catch(() => setErrorOpen(true));
       } else {
@@ -153,7 +153,7 @@ function Editor({ bridge, isEditView }) {
             // TODO: Should timeout so user gets a chance to read the snack
             // but is 200ms the time we want?
             setTimeout(() => {
-              router.push(`/bridge/${res.data.id}`);
+              router.push(`/bridge/${res.data.slug}`);
             }, 200);
           })
           .catch(() => setErrorOpen(true));
@@ -175,7 +175,7 @@ function Editor({ bridge, isEditView }) {
   return (
     <>
       <Navbar />
-      <Sidebar events={bridge.events} bridgeId={bridge.id} title={title} />
+      <Sidebar events={bridge.events} bridgeSlug={bridge.slug} title={title} />
 
       <Grid container item spacing={5} className={classes.root} sm={9} md={10}>
         <Grid item container wrap="nowrap">
@@ -209,7 +209,7 @@ function Editor({ bridge, isEditView }) {
                         active={active}
                         open={actionsDialogOpen}
                         onClose={() => setActionsDialogOpen(false)}
-                        bridgeId={id}
+                        bridgeSlug={slug}
                       />
                       <Button
                         onClick={() => setActionsDialogOpen(true)}
@@ -275,7 +275,7 @@ Editor.propTypes = {
   isEditView: PropTypes.bool,
   bridge: PropTypes.shape({
     active: PropTypes.bool,
-    id: PropTypes.number,
+    slug: PropTypes.string,
     title: PropTypes.string,
     outboundUrl: PropTypes.string,
     httpMethod: PropTypes.string,