add and autofill payment info/notes

panshak · Feb 6, 2022 · e61927c · e61927c
1 parent de3836b
commit e61927c
Show file tree

Hide file tree

Showing 14 changed files with 128 additions and 40 deletions.
diff --git a/client/src/actions/auth.js b/client/src/actions/auth.js
@@ -2,25 +2,26 @@ import * as api from '../api/index'
 import { AUTH, CREATE_PROFILE } from './constants'
 
 
-export const signin =(formData, openSnackbar) => async(dispatch) => {
+export const signin =(formData, openSnackbar, setLoading) => async(dispatch) => {
 
     try {
         //login the user
         const { data } = await api.signIn(formData)
 
         dispatch({ type: AUTH, data})
-
+        // setLoading(false)
         openSnackbar("Signin successfull")
         // history.push('/dashboard')
         window.location.href="/dashboard"
 
     } catch (error) {
         // console.log(error?.response?.data?.message)
         openSnackbar(error?.response?.data?.message)
+        setLoading(false)
     }
 }
 
-export const signup =(formData, openSnackbar) => async(dispatch) => {
+export const signup =(formData, openSnackbar, setLoading) => async(dispatch) => {
 
     try {
         //Sign up the user
@@ -35,6 +36,7 @@ export const signup =(formData, openSnackbar) => async(dispatch) => {
     } catch (error) {
         console.log(error)
         openSnackbar(error?.response?.data?.message)
+        setLoading(false)
     }
 }
 

diff --git a/client/src/components/Invoice/Invoice.js b/client/src/components/Invoice/Invoice.js
@@ -37,6 +37,7 @@ import AddClient from './AddClient';
 import InvoiceType from './InvoiceType';
 import axios from 'axios'
 import { useLocation } from 'react-router-dom'
+import { getProfilesByUser } from '../../actions/profile'
 // import SelectType from './SelectType'
 
 const useStyles = makeStyles((theme) => ({
@@ -82,13 +83,18 @@ const Invoice = () => {
     const dispatch = useDispatch()
     const history = useHistory()
     const user = JSON.parse(localStorage.getItem('profile'))
+    const { profiles } = useSelector((state) => state.profiles)
+
 
 
     useEffect(() => {
         getTotalCount()
+        dispatch(getProfilesByUser({ search: user?.result?._id || user?.result.googleId}))
+            // setInvoiceData({...invoiceData, notes: profiles?.paymentDetails})
          // eslint-disable-next-line
     },[location])
 
+console.log(profiles.paymentDetails)
 
     const getTotalCount = async() => {
         try {
@@ -155,7 +161,7 @@ const Invoice = () => {
     setInvoiceData((prevState) => ({...prevState, tax: e.target.value}))
   }
 
-    // console.log(invoiceData)
+    console.log(invoiceData)
     // Change handler for dynamically added input field
     const handleChange =(index, e) => {
         const values = [...invoiceData.items]
@@ -472,11 +478,12 @@ const Invoice = () => {
             </Container>
         </div>
             <div className={styles.note}>
-                <h4>Notes/Terms</h4>
+                <h4>Note/Payment Details</h4>
                 <textarea 
+                style={{border: 'solid 1px #d6d6d6', padding: '10px'}}
                     placeholder="Provide additional details or terms of service"
                     onChange={(e) => setInvoiceData({...invoiceData, notes: e.target.value})}
-                    value={invoiceData.notes}
+                    defaultValue={invoice? invoice.notes: profiles?.paymentDetails}
                 />
             </div>
 

diff --git a/client/src/components/InvoiceDetails/InvoiceDetails.js b/client/src/components/InvoiceDetails/InvoiceDetails.js
@@ -362,8 +362,8 @@ if(!invoice) {
                 </div>
 
                 <div className={styles.note}>
-                    <h4>Notes/Terms</h4>
-                    <Typography>{invoiceData.notes}</Typography>
+                    <h4>Note/Payment Details</h4>
+                    <p>{invoiceData.notes}</p>
                 </div>
 
             {/* <button className={styles.submitButton} type="submit">Save and continue</button> */}

diff --git a/client/src/components/InvoiceDetails/InvoiceDetails.module.css b/client/src/components/InvoiceDetails/InvoiceDetails.module.css
@@ -311,13 +311,12 @@ input::-webkit-inner-spin-button {
   text-align: left;
 }
 .note {
-  margin-top: 20px;
-}
-
-.note h4 {
+  margin: 50px 20px;
   text-align: left;
+  border-top: solid 1px #b7b7b7;
 }
 
+
 .toolBar {
   display: flex;
 }

diff --git a/client/src/components/Login/Google.js b/client/src/components/Login/Google.js
@@ -2,7 +2,7 @@ import React from "react";
 
 function Google() {
   return (
-    <svg style={{ width: '20px', height: '20px', marginTop: '10px' }} viewBox="0 0 24 24">
+    <svg style={{ width: '18px', height: '18px', paddingTop: '1px'}} viewBox="0 0 22 22">
     <path
       fill="currentColor"
       d="M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.2,4.73C15.29,4.73 17.1,6.7 17.1,6.7L19,4.72C19,4.72 16.56,2 12.1,2C6.42,2 2.03,6.8 2.03,12C2.03,17.05 6.16,22 12.25,22C17.6,22 21.5,18.33 21.5,12.91C21.5,11.76 21.35,11.1 21.35,11.1V11.1Z"

diff --git a/client/src/components/Login/Login.js b/client/src/components/Login/Login.js
@@ -9,9 +9,9 @@ import { signup, signin } from '../../actions/auth'
 import { Avatar, Button, Paper, Grid, Typography, Container } from '@material-ui/core'
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
 import { createProfile } from '../../actions/profile'
-// import Google from './Google'
+import Google from './Google'
 import { useSnackbar } from 'react-simple-snackbar'
-import ProgressButton from 'react-progress-button'
+import CircularProgress from '@material-ui/core/CircularProgress';
 
 
 
@@ -28,6 +28,7 @@ const Login = () => {
      // eslint-disable-next-line 
     const [openSnackbar, closeSnackbar] = useSnackbar()
     const user = JSON.parse(localStorage.getItem('profile'))
+    const [loading, setLoading] = useState(false)
 
     const handleShowPassword = () => setShowPassword(!showPassword);
     const handleChange =(e)=> {
@@ -37,10 +38,11 @@ const Login = () => {
     const handleSubmit =(e) => {
         e.preventDefault()
         if(isSignup) {
-            dispatch(signup(formData, openSnackbar))
+            dispatch(signup(formData, openSnackbar, setLoading))
         } else {
-            dispatch(signin(formData, openSnackbar))
+            dispatch(signin(formData, openSnackbar, setLoading))
         }
+        setLoading(true)
     }
 
 
@@ -95,13 +97,18 @@ const Login = () => {
           <div className={styles.buttons}>
                <div>
                     {/* <button className={styles.submitBtn}> { isSignup ? 'Sign Up' : 'Sign In' }</button> */}
-                    <ProgressButton>{ isSignup ? 'Sign Up' : 'Sign In' }</ProgressButton>
+                    {/* <ProgressButton>{ isSignup ? 'Sign Up' : 'Sign In' }</ProgressButton> */}
+                    {loading ? <CircularProgress /> 
+                    : 
+                    <button className={styles.loginBtn} >{ isSignup ? 'Sign Up' : 'Sign In' }</button>
+                    }
+
                 </div>
                 <div> 
                     <GoogleLogin
                     clientId = {process.env.REACT_APP_GOOGLE_CLIENT_ID}
                     render={(renderProps) => (
-                        <button className={styles.googleBtn} onClick={renderProps.onClick} disabled={renderProps.disabled} >Google</button>
+                        <button className={styles.googleBtn} onClick={renderProps.onClick} disabled={renderProps.disabled} ><Google /> Google</button>
                     )}
                     onSuccess={googleSuccess}
                     onFailure={googleError}

diff --git a/client/src/components/Login/Login.module.css b/client/src/components/Login/Login.module.css
@@ -81,6 +81,25 @@
     color: white;
   }
 
+  .loginBtn {
+    border: 1px solid #0070f3;
+    padding: 15px 30px;
+    border-radius: 50px;
+    background-color: white;
+    color: rgb(24, 24, 24);
+    cursor: pointer;
+    font-size: 15px;
+    outline: none;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  }
+
+  .loginBtn:hover {
+    background-color:  #0070f3;
+    color: white;
+  }
+
+
+
   .switchBtn {
     border-radius: 4px;
     padding: 10px;

diff --git a/client/src/components/Settings/Form/Form.js b/client/src/components/Settings/Form/Form.js
@@ -9,6 +9,8 @@ import Uploader from './Uploader';
 import { getProfilesByUser, updateProfile } from '../../../actions/profile';
 import useStyles from './styles';
 import Input from './Input';
+import ProfileDetail from './Profile';
+
 
 
 
@@ -21,7 +23,8 @@ const Settings = () => {
   phoneNumber: '',
   businessName: '',
   contactAddress: '', 
-  logo: ''
+  logo: '',
+  paymentDetails: ''
 };
 
   const [form, setForm] = useState(initialState);
@@ -45,9 +48,9 @@ const Settings = () => {
     dispatch(getProfilesByUser({ search: user?.result?._id || user?.result.googleId}))
   },[location, switchEdit])
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async(e) => {
     e.preventDefault();
-      dispatch(updateProfile(profiles?._id, form, openSnackbar));
+      await dispatch(updateProfile(profiles?._id, form, openSnackbar));
       setSwitchEdit(0)
 
   };
@@ -56,19 +59,15 @@ const Settings = () => {
 
   return (
     <div>
-     {switchEdit === 0 && (
-       <Container component="main" maxWidth="sm">
-       <Paper className={classes.paper} elevation={2} >
-       <Avatar style={{width: '100px', height: '100px', margin: '30px'}} src={profiles?.logo} alt="" className={classes.avatar}>
-         </Avatar>
-         <p>{profiles?.businessName}</p>
-         <p>{profiles?.contactAddress}</p>
-         <p>{profiles?.phoneNumber}</p>
-         <p>{profiles?.email}</p>
-         <Button variant="outlined" style={{margin: '30px', padding: '15px 30px'}} onClick={() => setSwitchEdit(1)}>Edit Profile</Button>
+
+      {switchEdit === 0 && (
+        <Container component="main" maxWidth="sm">
+        <Paper className={classes.paper} elevation={0} >
+        <ProfileDetail  profiles={profiles} />
+        <Button variant="outlined" style={{margin: '30px', padding: '15px 30px'}} onClick={() => setSwitchEdit(1)}>Edit Profile</Button>
        </Paper>
        </Container>
-     )}
+      )}
 
     {switchEdit === 1 && (
       <Container component="main" maxWidth="sm">
@@ -82,6 +81,7 @@ const Settings = () => {
             <Input name="phoneNumber" label="Phone Number" handleChange={handleChange} type="text" half value={form?.phoneNumber}/>
             <Input name="businessName" label="Business Name" handleChange={handleChange} type="text" value={form?.businessName}/>
             <Input name="contactAddress" label="Contact Address" handleChange={handleChange} type="text" value={form?.contactAddress} />
+            <Input name="paymentDetails" label="Payment Details/Notes" handleChange={handleChange} type="text" multiline rows="4" value={form?.paymentDetails} />
           </Grid>
           <Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit}>
            Update Settings

diff --git a/client/src/components/Settings/Form/Input.js b/client/src/components/Settings/Form/Input.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextField, Grid } from '@material-ui/core';
 
-const Input = ({ name, handleChange, label, half, autoFocus, type, value }) => (
+const Input = ({ name, handleChange, label, half, autoFocus, type, value, multiline, rows }) => (
   <Grid item xs={12} sm={half ? 6 : 12}>
     <TextField
       value={value}
@@ -13,6 +13,8 @@ const Input = ({ name, handleChange, label, half, autoFocus, type, value }) => (
       label={label}
       autoFocus={autoFocus}
       type={type}
+      multiline={multiline}
+      rows={rows}
     />
   </Grid>
 );

diff --git a/client/src/components/Settings/Form/Profile.js b/client/src/components/Settings/Form/Profile.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
+import PhoneInTalkIcon from '@material-ui/icons/PhoneInTalk';
+import AlternateEmailIcon from '@material-ui/icons/AlternateEmail';
+import AccountBalanceWalletRoundedIcon from '@material-ui/icons/AccountBalanceWalletRounded';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+    maxWidth: 450,
+    // backgroundColor: "#EEEEEE",
+  },
+}));
+
+export default function ProfileDetail({ profiles }) {
+  const classes = useStyles();
+
+  return (
+    <List className={classes.root}>
+      <ListItem >
+            <BusinessCenterIcon style={{marginRight: '20px', color: 'gray'}} />
+        <ListItemText primary={profiles?.businessName} secondary="" />
+      </ListItem>
+
+      <ListItem >
+        <LocationOnIcon style={{marginRight: '20px', color: 'gray'}} />
+        <ListItemText primary={profiles?.contactAddress} secondary="" />
+      </ListItem>
+
+      <ListItem >
+        <PhoneInTalkIcon style={{marginRight: '20px', color: 'gray'}} />
+        <ListItemText primary={profiles?.phoneNumber} secondary="" />
+      </ListItem>
+
+      <ListItem >
+        <AlternateEmailIcon style={{marginRight: '20px', color: 'gray'}} />
+        <ListItemText primary={profiles?.email} secondary="" />
+      </ListItem>
+
+      <ListItem >
+        <AccountBalanceWalletRoundedIcon style={{marginRight: '20px', color: 'gray'}} />
+        <ListItemText primary={profiles?.paymentDetails} secondary="" />
+      </ListItem>
+
+    </List>
+  );
+}
diff --git a/client/src/components/Settings/Form/styles.js b/client/src/components/Settings/Form/styles.js
@@ -5,8 +5,10 @@ export default makeStyles((theme) => ({
     marginTop: theme.spacing(0),
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'center',
+    alignItems: 'left',
     padding: theme.spacing(2),
+    border: 'solid 1px #bcbcbc'
+    // backgroundColor: '#EEEEEE'
   },
   root: {
     '& .MuiTextField-root': {

diff --git a/client/src/components/Settings/Settings.module.css b/client/src/components/Settings/Settings.module.css
@@ -1,8 +1,6 @@
 .pageContainer {
-  /* padding-left: 150px; */
   background-color: #EEEEEE;
   padding-bottom: 96px;
-
   min-height: 70%;
   min-height: -webkit-calc(100% - 186px);
   min-height: -moz-calc(100% - 186px);
@@ -12,7 +10,7 @@
 .hero {
   width: 50%;
   margin: 0px auto;
-  padding: 50px;
+  padding: 30px 50px;
   line-height: 60px;
 }
 

diff --git a/server/index.js b/server/index.js
@@ -6,7 +6,6 @@ import cors from 'cors'
 import mongoose from 'mongoose'
 import dotenv from 'dotenv'
 import nodemailer from 'nodemailer'
-
 import pdf from 'html-pdf'
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';

diff --git a/server/models/ProfileModel.js b/server/models/ProfileModel.js
@@ -5,7 +5,8 @@ const profileSchema = mongoose.Schema({
     email: {type: String, required: true, unique: true},
     phoneNumber: String,
     businessName: String,
-    contactAddress: String, 
+    contactAddress: String,
+    paymentDetails: String, 
     logo: String,
     website: String,
     userId: [String],