Merge pull request #1 from dev-geddy/feat/expandable-provider-custome…

…r-section

feat: toggle customer/provider forms visibility

src/components/App/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import CssBaseline from "@mui/material/CssBaseline"
 import {createTheme, ThemeProvider} from "@mui/material/styles"
 import './App.css'
@@ -15,7 +15,7 @@ const theme = createTheme({
   },
 })
 
-class App extends Component {
+class App extends PureComponent {
   render() {
     return (
       <ThemeProvider theme={theme}>

src/components/InvoiceForm/index.js

@@ -20,6 +20,11 @@ import SaveIcon from '@mui/icons-material/Save';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import LockIcon from '@mui/icons-material/Lock';
 import LockResetIcon from '@mui/icons-material/LockReset';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import {labels} from "../Invoice/en-UK";
 
 @connectWithRedux((state) => ({
   isLoading: invoiceSelector.isLoading(state),
@@ -29,6 +34,7 @@ import LockResetIcon from '@mui/icons-material/LockReset';
   provider: invoiceSelector.provider(state),
   customer: invoiceSelector.customer(state),
   invoiceEntries: invoiceSelector.invoiceEntries(state),
+  displaySection: invoiceSelector.displaySection(state),
 }), {
   addInvoiceEntry: invoiceActions.addInvoiceEntry,
   removeInvoiceEntry: invoiceActions.removeInvoiceEntry,
@@ -37,6 +43,7 @@ import LockResetIcon from '@mui/icons-material/LockReset';
   storeNewInvoice: invoiceActions.storeNewInvoice,
   lockInvoice: invoiceActions.lockInvoice,
   deleteInvoice: invoiceActions.deleteInvoice,
+  displaySectionSwitch: invoiceActions.displaySectionSwitch,
 })
 
 class StoredInvoicesList extends PureComponent {
@@ -106,9 +113,13 @@ class StoredInvoicesList extends PureComponent {
     this.props.deleteInvoice(uuid)
   }
 
+  handleSectionVisibility = (section) => () => {
+    this.props.displaySectionSwitch(section)
+  }
+
   render = () => {
     const {isLoading} = this.props
-    const {provider, customer, invoiceMeta, invoiceEntries, uuid} = this.props
+    const {provider, customer, invoiceMeta, invoiceEntries, uuid, displaySection} = this.props
     const locked = invoiceMeta?.locked
 
     return (
@@ -129,22 +140,60 @@ class StoredInvoicesList extends PureComponent {
           <Grid item xs={12}>
             <Grid container justifyContent="center" spacing={1} sx={{p: 1}}>
               <Grid item sx={{width: '50%', p: 1}}>
-                <InvoiceParty
-                  locked={locked || isLoading}
-                  subject={provider}
-                  subjectType={'provider'}
-                  editMode={true}
-                  onUpdate={this.handleInvoiceUpdate('provider')}
-                />
+                <Grid container justifyContent="left" alignItems="center">
+                  <Grid item sx={{flexGrow: 1}}>
+                    <Typography variant="body2" style={{textTransform: 'uppercase', fontSize: '12px'}}>
+                      {labels.provider}
+                    </Typography>
+                  </Grid>
+                  <Grid item>
+                    <Button
+                      size="small"
+                      color="secondary"
+                      endIcon={displaySection.provider ? <VisibilityOffIcon />:<VisibilityIcon />}
+                      onClick={this.handleSectionVisibility('provider')}
+                    >
+                      {displaySection.provider ? 'Hide' : 'Show'} Form
+                    </Button>
+                  </Grid>
+                </Grid>
+
+                {displaySection.provider &&
+                  <InvoiceParty
+                    locked={locked || isLoading}
+                    subject={provider}
+                    editMode={true}
+                    onUpdate={this.handleInvoiceUpdate('provider')}
+                  />
+                }
               </Grid>
               <Grid item sx={{width: '50%', p: 1}}>
-                <InvoiceParty
-                  locked={locked || isLoading}
-                  subject={customer}
-                  subjectType={'customer'}
-                  editMode={true}
-                  onUpdate={this.handleInvoiceUpdate('customer')}
-                />
+                <Grid container justifyContent="left" alignItems="center">
+                  <Grid item sx={{flexGrow: 1}}>
+                    <Typography variant="body2" style={{textTransform: 'uppercase', fontSize: '12px'}}>
+                      {labels.customer}
+                    </Typography>
+                  </Grid>
+                  <Grid item>
+                    <Button
+                      size="small"
+                      color="secondary"
+                      endIcon={displaySection.customer ? <VisibilityOffIcon />:<VisibilityIcon />}
+                      onClick={this.handleSectionVisibility('customer')}
+                    >
+                      {displaySection.customer ? 'Hide' : 'Show'} Form
+                    </Button>
+                  </Grid>
+                </Grid>
+
+                {displaySection.customer &&
+                  <InvoiceParty
+                    locked={locked || isLoading}
+                    subject={customer}
+                    editMode={true}
+                    onUpdate={this.handleInvoiceUpdate('customer')}
+                  />
+                }
               </Grid>
             </Grid>
             <Divider />

src/components/InvoiceMeta/index.js

@@ -39,8 +39,6 @@ export class InvoiceParty extends PureComponent {
   render() {
     const {meta, provider, locked} = this.props
 
-    console.log('meta.invoiceDate', meta.invoiceDate)
-
     return (
       <Fragment>
         <Typography variang="subtitle2" {...subtitleStyle}>{labels.invoiceMeta}</Typography>

src/components/InvoiceParty/index.js

@@ -1,20 +1,13 @@
 import React, {PureComponent, Fragment} from 'react'
 import PropTypes from 'prop-types'
 import {
-  FormControl,
   TextField,
   Typography,
 } from '@mui/material'
 import {labels} from '../Invoice/en-UK'
 import {inputStyle, subtitleStyle} from '../../shared-styles'
 
 export class InvoiceParty extends PureComponent {
-
-  subjectTypes = {
-    provider: labels.provider,
-    customer: labels.customer
-  }
-
   handleChange = (event) => {
     const {name, value} = event.target
     this.props.onUpdate(name, value)
@@ -23,16 +16,11 @@ export class InvoiceParty extends PureComponent {
   render() {
     const {
       subject,
-      subjectType,
       locked,
     } = this.props
 
-    const subjectTypeName = this.subjectTypes[subjectType] || ''
-
     return (
       <Fragment>
-        <Typography variant="body2" style={{textTransform: 'uppercase', fontSize: '12px', fontWeight: 200}}>{subjectTypeName}</Typography>
-
         <Typography variang="subtitle2" {...subtitleStyle}>Company details</Typography>
         <TextField disabled={locked} label={labels.companyName} name="companyName" value={subject.companyName} onChange={this.handleChange} fullWidth size="small" margin="dense" {...inputStyle} />
         <TextField disabled={locked} label={labels.companyRegNo} name="companyRegNo" value={subject.companyRegNo} onChange={this.handleChange} fullWidth size="small" margin="dense" {...inputStyle} />
@@ -60,7 +48,6 @@ export class InvoiceParty extends PureComponent {
 
 InvoiceParty.propTypes = {
   subject: PropTypes.object,
-  subjectType: PropTypes.string,
   editMode: PropTypes.bool,
   onUpdate: PropTypes.func
 }

src/redux/invoice/actions.js

@@ -16,9 +16,11 @@ export const types = actionTypes('invoice')({
   SET_ERROR: 'SET_ERROR',
   LOCK_INVOICE: 'LOCK_INVOICE',
   DELETE_INVOICE: 'DELETE_INVOICE',
+  DISPLAY_SECTION_SWITCH: 'DISPLAY_SECTION_SWITCH',
 })
 
 export const invoiceActions = {
+  displaySectionSwitch: (section, display) => ({type: types.DISPLAY_SECTION_SWITCH, payload: {section, display}}),
   updateInvoiceSection: (section, sectionData) => ({type: types.UPDATE_INVOICE_SECTION, payload: {section, sectionData}}),
   updateInvoiceEntry: (entryIndex, entryData) => ({type: types.UPDATE_INVOICE_ENTRY, payload: {entryIndex, entryData}}),
   removeInvoiceEntry: (entryIndex) => ({type: types.REMOVE_INVOICE_ENTRY, payload: {entryIndex}}),

src/redux/invoice/reducer.js

@@ -61,6 +61,10 @@ const defaultState = {
   invoice: {},
   invoices: [],
   isLoading: false,
+  displaySection: {
+    provider: true,
+    customer: true,
+  },
   ...defaultInvoiceState
 }
 
@@ -69,6 +73,7 @@ export const selectors = {
   isLoading: (state) => selectors.state(state).isLoading,
   error: (state) => selectors.state(state).error,
   invoiceEntries: (state) => selectors.state(state).invoiceEntries,
+  displaySection: (state) => selectors.state(state).displaySection,
   invoiceMeta: (state) => selectors.state(state).invoiceMeta,
   provider: (state) => selectors.state(state).provider,
   customer: (state) => selectors.state(state).customer,
@@ -93,6 +98,14 @@ const setLoading = (state, {isLoading}) => ({
   isLoading
 })
 
+const displaySectionSwitch = (state, {section, display}) => ({
+  ...state,
+  displaySection: {
+    ...state.displaySection,
+    [section]: display !== undefined ? display : !state.displaySection[section]
+  }
+})
+
 const setInvoices = (state, {invoices}) => ({
   ...state,
   invoices
@@ -164,6 +177,7 @@ export default (state = defaultState, {type, payload}) => {
     case types.ADD_INVOICE_ENTRY: return addInvoiceEntry(state, payload)
     case types.LOCK_INVOICE: return lockInvoice(state, payload)
     case types.START_NEW_INVOICE: return startNewInvoice(state, payload)
+    case types.DISPLAY_SECTION_SWITCH: return displaySectionSwitch(state, payload)
     default: return state
   }
 }