Add redux form to shipping address form

Author: ujjavaldesai07

client/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@material-ui/core": "latest",
     "@material-ui/icons": "latest",
-    "@material-ui/lab": "^4.0.0-alpha.55",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "axios": "^0.19.2",
     "fontsource-roboto": "^2.1.3",
     "js-base64": "^2.5.2",
@@ -23,6 +23,7 @@
     "react-scripts": "latest",
     "redux": "^4.0.5",
     "redux-form": "^8.3.6",
+    "redux-form-material-ui": "^5.0.0-beta.3",
     "redux-thunk": "^2.3.0",
     "semantic-ui-css": "^2.4.1",
     "styled-components": "^5.1.1",

client/src/actions/index.js

@@ -8,7 +8,7 @@ import {
     LOAD_FILTER_PRODUCTS,
     LOAD_FILTER_ATTRIBUTES,
     INTERNAL_SERVER_ERROR_CODE,
-    BAD_REQUEST_ERROR_CODE, SAVE_QUERY_STATE, SAVE_QUERY_STATUS,
+    BAD_REQUEST_ERROR_CODE, SAVE_QUERY_STATE, SAVE_QUERY_STATUS, SHIPPING_ADDRESS_CONFIRMED,
 } from './types';
 import authApi from "../api/authServiceApi";
 import history from "../history";
@@ -25,6 +25,14 @@ export const setTokenFromCookie = tokenId => {
     }
 }
 
+export const setShippingAddress = payload => {
+    log.info(`[ACTION]: setShippingAddress payload = ${JSON.stringify(payload)}`)
+    return {
+        type: SHIPPING_ADDRESS_CONFIRMED,
+        payload: payload
+    }
+}
+
 export const signIn = formValues => async (dispatch) => {
     log.info(`[ACTION]: signIn API is invoked formValues = ${formValues}`)
 

client/src/actions/types.js

@@ -24,6 +24,7 @@ export const SAVE_QUERY_STATUS = "SAVE_QUERY_STATUS";
 export const ADD_SELECTED_CATEGORY = "ADD_SELECTED_CATEGORY";
 export const REMOVE_SELECTED_CATEGORY = "REMOVE_SELECTED_CATEGORY";
 export const SAVE_SORT_LIST = "SAVE_SORT_LIST";
+export const SHIPPING_ADDRESS_CONFIRMED = "SHIPPING_ADDRESS_CONFIRMED";
 
 // js cookie IDs
 export const HANDLE_TOKEN_ID = "HANDLE_TOKEN_ID";

client/src/components/routes/checkout/checkout.js

@@ -8,6 +8,7 @@ import {withStyles} from '@material-ui/core/styles';
 import MuiAccordion from '@material-ui/core/Accordion';
 import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
 import MuiAccordionDetails from '@material-ui/core/AccordionDetails';
+import {useSelector} from "react-redux";
 
 const checkoutBgColor = "#80808033"
 
@@ -53,9 +54,12 @@ const AccordionDetails = withStyles((theme) => ({
     },
 }))(MuiAccordionDetails);
 
+const shippingAddressPanel = 'shipAddrPanel'
+const shippingOptionPanel = 'shipOptPanel'
 
 function Checkout() {
-    const [expanded, setExpanded] = React.useState('panel1');
+    const shippingAddress = useSelector(state => state.shippingAddressReducer)
+    const [expanded, setExpanded] = React.useState(shippingAddressPanel);
 
     const handleChange = (panel) => (event, newExpanded) => {
         setExpanded(newExpanded ? panel : false);
@@ -81,16 +85,19 @@ function Checkout() {
 
             <Grid item xs={12} sm={11} md={7}>
 
-                <Accordion square expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
-                    <AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
+                <Accordion square expanded={expanded === shippingAddressPanel}
+                           onChange={handleChange(shippingAddressPanel)}>
+                    <AccordionSummary aria-controls={`${shippingAddressPanel}-content`}
+                                      id={`${shippingAddressPanel}-header`}>
                         {renderTitle("Shipping Address")}
                     </AccordionSummary>
                     <AccordionDetails>
                         <ShippingAddress/>
                     </AccordionDetails>
                 </Accordion>
 
-                <Accordion square expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
+                <Accordion square expanded={expanded === shippingOptionPanel}
+                           onChange={handleChange(shippingOptionPanel)}>
                     <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
                         {renderTitle("Shipping Options")}
                     </AccordionSummary>

client/src/components/routes/checkout/continueButton.js

@@ -2,15 +2,15 @@ import React from 'react';
 import log from 'loglevel';
 import {Button, Grid, Hidden} from "@material-ui/core";
 
-function ContinueButton() {
+function ContinueButton(props) {
 
     const renderContinueDesktopBtn = () => {
         return (
             <Grid item container justify="flex-end" style={{padding: "30px 40px 0 0"}}>
                 <Button variant="contained" size="large" style={{
                     backgroundColor: "#e01a2b",
                     width: "27%", height: 50, fontSize: "1rem", fontWeight: "bolder", color: "White"
-                }}>
+                }} type={props.type} disabled={props.action}>
                     CONTINUE
                 </Button>
             </Grid>
@@ -23,7 +23,7 @@ function ContinueButton() {
                 <Button variant="contained" size="large" style={{
                     backgroundColor: "#e01a2b",
                     width: "87%", height: 50, fontSize: "1rem", fontWeight: "bolder", color: "White"
-                }}>
+                }} type={props.type} disabled={props.action}>
                     CONTINUE
                 </Button>
             </Grid>