Added error handling for checkout page

Author: ujjavaldesai07

client/src/ErrorBoundary.js

@@ -1,5 +1,5 @@
 import React, {Component} from "react";
-import {Grid} from "@material-ui/core";
+import {GenericErrorMsg} from "./components/ui/error/GenericErrorMsg";
 
 class ErrorBoundary extends Component {
 
@@ -26,9 +26,7 @@ class ErrorBoundary extends Component {
     render() {
         if (this.state.hasError) {
             return (
-                <Grid container justify="center" style={{paddingTop: "2rem", fontSize: "3rem"}}>
-                    <p>Oops! Something went wrong....</p>
-                </Grid>
+                <GenericErrorMsg/>
             )
         }
         return this.props.children

client/src/actions/index.js

@@ -8,7 +8,10 @@ import {
     SAVE_QUERY_STATUS,
     SHIPPING_ADDRESS_CONFIRMED,
     PAYMENT_INFO_CONFIRMED,
-    PAYMENT_RESPONSE, CART_TOTAL, RESET_SIGN_UP, HANDLE_GOOGLE_AUTH_SIGN_IN, HANDLE_GOOGLE_AUTH_SIGN_OUT,
+    PAYMENT_RESPONSE,
+    HANDLE_GOOGLE_AUTH_SIGN_IN,
+    HANDLE_GOOGLE_AUTH_SIGN_OUT,
+    PAYMENT_RESPONSE_ERROR,
 } from './types';
 import {INTERNAL_SERVER_ERROR_CODE, BAD_REQUEST_ERROR_CODE} from '../constants/http_error_codes'
 import {SHOPPERS_PRODUCT_INFO_COOKIE, CART_TOTAL_COOKIE, AUTH_DETAILS_COOKIE} from '../constants/cookies'
@@ -191,16 +194,31 @@ export const signUp = formValues => async dispatch => {
 
 export const sendPaymentToken = (token) => async dispatch => {
     log.info(`Token = ${JSON.stringify(token)}`)
+    if(!token || (token && !token.hasOwnProperty("id"))) {
+        dispatch({
+            type: PAYMENT_RESPONSE_ERROR,
+            payload: {errorMsg: "Unable to fetch token. Try again later"}
+        })
+    }
+
+    let url
+    if(process.env.REACT_APP_PAYMENT_SERVICE_URL) {
+        url = `${process.env.REACT_APP_PAYMENT_SERVICE_URL}/payment`
+    } else {
+        url = `http://localhost:${process.env.REACT_APP_PAYMENT_SERVICE_PORT}/payment`
+    }
+
     let config = {
         method: 'post',
-        url: `${process.env.REACT_APP_PAYMENT_SERVICE_URL}/payment`
-            || `http://localhost:${process.env.REACT_APP_PAYMENT_SERVICE_PORT}/payment`,
+        url: url,
         headers: {
             'Content-Type': 'application/json',
         },
         data: JSON.stringify(token)
     };
 
+    log.info(`URL = ${config.url}`)
+
     axios(config)
         .then(function (response) {
             console.log(JSON.stringify(response.data));
@@ -220,17 +238,16 @@ export const sendPaymentToken = (token) => async dispatch => {
 
             dispatch({
                 type: PAYMENT_RESPONSE,
-                payload: paymentResponse
+                payload: {...paymentResponse, error: false, errorMsg: null}
             })
 
         })
         .catch(function (error) {
             log.error(`[sendPaymentToken]: Error = ${error} `)
             dispatch({
-                type: PAYMENT_RESPONSE,
-                payload: {error: true}
+                type: PAYMENT_RESPONSE_ERROR,
+                payload: {errorMsg: "Something Went Wrong"}
             })
-            return false
         });
 }
 

client/src/actions/types.js

@@ -15,22 +15,32 @@ export const LOAD_HOME_PAGE = "LOAD_HOME_PAGE";
 export const LOAD_FILTER_PRODUCTS = "LOAD_FILTER_PRODUCTS";
 export const LOAD_FILTER_ATTRIBUTES = "LOAD_FILTER_ATTRIBUTES";
 export const LOAD_SHOPPING_BAG_PRODUCTS = "LOAD_SHOPPING_BAG_PRODUCTS";
+export const RESET_SHOPPING_BAG_PRODUCTS = "RESET_SHOPPING_BAG_PRODUCTS";
 export const LOAD_TABS_DATA = "LOAD_TABS_DATA";
 
 export const REMOVE_FILTER_ATTRIBUTES = "REMOVE_FILTER_ATTRIBUTES";
 export const SELECT_SORT_CATEGORY = "SELECT_SORT_CATEGORY";
 export const SELECT_PRODUCT_PAGE = "SELECT_PRODUCT_PAGE";
 export const SELECT_PRODUCT_DETAIL = "SELECT_PRODUCT_DETAIL";
 export const ADD_TO_CART = "ADD_TO_CART";
+export const RESET_ADD_TO_CART = "RESET_ADD_TO_CART";
 export const CART_TOTAL = "CART_TOTAL";
+export const RESET_CART_TOTAL = "RESET_CART_TOTAL";
 export const DELIVERY_CHARGES = "DELIVERY_CHARGES";
+export const RESET_DELIVERY_CHARGES = "RESET_DELIVERY_CHARGES";
 
 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";
+export const RESET_SHIPPING_ADDRESS = "RESET_SHIPPING_ADDRESS";
 export const SHIPPING_OPTION_CONFIRMED = "SHIPPING_OPTION_CONFIRMED";
+export const RESET_SHIPPING_OPTION = "RESET_SHIPPING_OPTION";
 export const PAYMENT_INFO_CONFIRMED = "PAYMENT_INFO_CONFIRMED";
 export const PAYMENT_RESPONSE = "PAYMENT_RESPONSE";
+export const PAYMENT_RESPONSE_ERROR = "PAYMENT_RESPONSE_ERROR";
+export const RESET_PAYMENT_RESPONSE = "RESET_PAYMENT_RESPONSE";
+export const RESET_PAYMENT_RESPONSE_ERROR = "RESET_PAYMENT_RESPONSE_ERROR";
+
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import log from 'loglevel';
 import {Paper, Grid, Hidden} from "@material-ui/core";
 import PriceDetails from "../priceDetails";
@@ -8,13 +8,15 @@ import {makeStyles, 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 {connect, useSelector} from "react-redux";
+import {connect, useDispatch, useSelector} from "react-redux";
 // import {loadStripe} from "@stripe/stripe-js/pure";
 import PaymentButton from "./paymentButton";
 import {useAddProductsToShoppingBag} from "../../../hooks/useAddProductsToShoppingBag";
 import {getDataViaAPI} from "../../../actions";
 import {useCartTotal} from "../../../hooks/useCartTotal";
 import {DocumentTitle} from "../../ui/documentTitle";
+import {RESET_PAYMENT_RESPONSE_ERROR} from "../../../actions/types";
+import BackgroundDisabledSpinner from "../../ui/BackgroundDisabledSpinner";
 // import {Elements, ElementsConsumer} from "@stripe/react-stripe-js";
 // import Payment from "./payment"
 
@@ -80,7 +82,33 @@ const shippingOptionPanel = 'shipOptPanel'
 function Checkout(props) {
     const shippingAddress = useSelector(state => state.shippingAddressReducer)
     const shippingOption = useSelector(state => state.shippingOptionReducer)
+    const {timestamp} = useSelector(state => state.paymentResponseReducer)
     const classes = useGridStyles();
+    const dispatch = useDispatch()
+    const [isLoading, setIsLoading] = useState(false);
+
+    const setIsLoadingState = () => {
+        setIsLoading(true);
+    }
+
+    useEffect(() => {
+        log.info(`[Checkout]: Component did mount...`)
+        setIsLoading(false)
+
+        // eslint-disable-next-line
+    }, [timestamp])
+
+    useEffect(() => {
+
+        return () => {
+            log.info(`[Checkout] Component will unmount...`)
+            dispatch({
+                type: RESET_PAYMENT_RESPONSE_ERROR
+            })
+        }
+
+        // eslint-disable-next-line
+    }, [])
 
     useCartTotal()
     useAddProductsToShoppingBag(props.getDataViaAPI)
@@ -97,10 +125,11 @@ function Checkout(props) {
         )
     }
 
-    log.info("[Checkout] Rendering Checkout Component.")
+    log.info(`[Checkout] Rendering Checkout Component. isLoading = ${isLoading}`)
 
     return (
         <Grid container justify={"center"} classes={{root: classes.root}}>
+            {isLoading ? <BackgroundDisabledSpinner/> : null}
 
             <Grid item xs={12} sm={11} md={5}>
 
@@ -152,6 +181,7 @@ function Checkout(props) {
                 <Grid item sm={11} md={4} style={{height: 300, marginTop: "1rem"}}>
                     <Paper square style={{width: "inherit"}}>
                         <PriceDetails buttonName="PLACE ORDER"/>
+                        <PaymentButton disabled={!shippingOption.submitted} loadingHandler={setIsLoadingState}/>
                     </Paper>
                 </Grid>
             </Hidden>
@@ -161,7 +191,7 @@ function Checkout(props) {
                       style={{height: "fit-content", marginTop: "1rem", position: "sticky", top: 80}}>
                     <Paper square style={{width: "inherit"}}>
                         <PriceDetails buttonName="PLACE ORDER"/>
-                        <PaymentButton disabled={!shippingOption.submitted}/>
+                        <PaymentButton disabled={!shippingOption.submitted} loadingHandler={setIsLoadingState}/>
                     </Paper>
                 </Grid>
             </Hidden>

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

@@ -26,7 +26,7 @@ function ContinueButton(props) {
 
     const renderContinueMobileBtn = () => {
         return (
-            <Grid item container justify="center" style={{paddingTop: 30, margin: 0}}>
+            <Grid item container justify="center" style={{padding: "30px 0", margin: 0}}>
                 <Button variant="contained" size="large" style={{
                     ...continueButtonStyle, width: "85%"
                 }} type={props.type} disabled={props.action} onClick={props.buttonHandler}>

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

@@ -4,46 +4,29 @@ import {Button, Grid} from "@material-ui/core";
 import {connect} from "react-redux";
 import {sendPaymentToken} from "../../../actions"
 import log from 'loglevel';
+import AlertModal from "../../ui/alertModal";
 
 class PaymentButton extends Component {
 
     _GrandTotal = 0
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            paymentBtnClicked: false
-        }
-    }
-
-    componentDidMount() {
-        log.info(`[PaymentButton] Component Did Mount...paymentResponse = ${JSON.stringify(this.props.paymentResponse)}`)
-        if(this.props.paymentResponse && this.props.paymentResponse.hasOwnProperty("error")) {
-            this.setState({paymentBtnClicked: true})
-        }
-    }
-
     getGrandTotal = () => {
         this._GrandTotal = (this.props.cartTotal + this.props.deliveryCharges) * 100
         return this._GrandTotal
     }
 
     onToken = (token) => {
+        log.info("[PaymentButton] onToken setting loadingHandler to true")
+        this.props.loadingHandler(true)
 
-        this.setState({paymentBtnClicked: true})
-
-        let value = this.props.sendPaymentToken({
+        this.props.sendPaymentToken({
             ...token,
             amount: this._GrandTotal,
             currency: "USD",
             address: this.props.shippingAddressForm.values,
             addToCart: this.props.addToCart,
             shippingOption: this.props.shippingOption
         })
-
-        if(value) {
-            this.setState({paymentBtnClicked: false})
-        }
     }
 
     renderButton = () => {
@@ -52,7 +35,7 @@ class PaymentButton extends Component {
             <Grid container justify="center" style={{padding: "2rem 0 2rem 0"}}>
                 <Grid item lg={9}>
                     <Button variant="contained" size="medium"
-                            disabled={this.state.paymentBtnClicked || this.props.disabled}
+                            disabled={this.props.disabled}
                             style={{
                                 width: '100%', height: 50, color: 'white',
                                 fontWeight: "bold", backgroundColor: "#e01a2b",
@@ -66,11 +49,17 @@ class PaymentButton extends Component {
     }
 
     render() {
-        console.log(`[PaymentButton] Rendering PaymentButton Component...`)
+        log.info(`[PaymentButton] Rendering PaymentButton Component...error = ${this.props.paymentResponse.error}`)
 
         return (
             <>
-                {this.state.paymentBtnClicked || this.props.disabled ?
+                <AlertModal title="Payment Error"
+                            question="Something went wrong. Please try again later."
+                            enable={this.props.paymentResponse.error}
+                            timestamp={this.props.paymentResponse.timestamp}
+                />
+
+                {this.props.disabled ?
                     this.renderButton():
                     <StripeCheckout
                         token={this.onToken}
@@ -97,10 +86,4 @@ const mapStateToProps = (state) => {
     })
 }
 
-function paymentButtonPropsAreEqual(prevProps, nextProps) {
-    return prevProps.disabled === nextProps.disabled;
-}
-
-const wrapperMemo = React.memo(PaymentButton, paymentButtonPropsAreEqual);
-
-export default connect(mapStateToProps, {sendPaymentToken})(wrapperMemo)
+export default connect(mapStateToProps, {sendPaymentToken})(PaymentButton)

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

@@ -99,7 +99,7 @@ class ShippingAddressForm extends Component {
         const renderShippingForm = () => {
             return (
                 <Grid item style={{width: "100%", height: "fit-content"}}>
-                    <Grid item xs={12} sm={12}>
+                    <Grid item xs={12}>
                         <form onSubmit={this.handleSubmit} className={classes.root}
                               style={{width: "inherit"}}>
 

client/src/components/routes/signup/signUp.js

@@ -5,7 +5,7 @@ import log from "loglevel";
 import {useDispatch, useSelector} from "react-redux";
 import {Dimmer, Loader} from "semantic-ui-react";
 import {DocumentTitle} from "../../ui/documentTitle";
-import {RESET_SIGN_IN_ERROR, RESET_SIGN_UP} from "../../../actions/types";
+import {RESET_SIGN_UP} from "../../../actions/types";
 
 const SignUp = () => {
     const [isLoading, setIsLoading] = useState(false);