Fix the issue of persistent state values in payment page by removing it while component will unmount

Author: ujjavaldesai07

client/src/actions/index.js

@@ -3,21 +3,21 @@ import {
     HANDLE_SIGN_UP,
     HANDLE_SIGN_UP_ERROR,
     HANDLE_SIGN_OUT,
-    HANDLE_TOKEN_ID,
     HANDLE_SIGN_IN_ERROR,
     LOAD_FILTER_PRODUCTS,
     LOAD_FILTER_ATTRIBUTES,
-    INTERNAL_SERVER_ERROR_CODE,
-    BAD_REQUEST_ERROR_CODE,
     SAVE_QUERY_STATUS,
     SHIPPING_ADDRESS_CONFIRMED,
-    PAYMENT_INFO_CONFIRMED, PAYMENT_RESPONSE,
+    PAYMENT_INFO_CONFIRMED,
+    PAYMENT_RESPONSE, CART_TOTAL, LOAD_SHOPPING_BAG_PRODUCTS
 } from './types';
+import {INTERNAL_SERVER_ERROR_CODE, BAD_REQUEST_ERROR_CODE} from '../constants/http_error_codes'
+import {SHOPPERS_PRODUCT_INFO_COOKIE, CART_TOTAL_COOKIE, TOKEN_ID_COOKIE} from '../constants/cookies'
 import history from "../history";
 import {Base64} from 'js-base64';
 import Cookies from 'js-cookie';
 import log from "loglevel";
-import {commonServiceAPI, authServiceAPI, paymentServiceAPI} from "../api/service_api";
+import {commonServiceAPI, authServiceAPI} from "../api/service_api";
 import axios from 'axios';
 
 export const setTokenFromCookie = tokenId => {
@@ -59,7 +59,7 @@ export const signIn = formValues => async (dispatch) => {
         if (response.data.jwt) {
             log.info(`[ACTION]: dispatch HANDLE_SIGN_IN response.data.jwt = ${response.data.jwt}`)
             dispatch({type: HANDLE_SIGN_IN, payload: response.data.jwt});
-            Cookies.set(HANDLE_TOKEN_ID, response.data.jwt, {expires: 7});
+            Cookies.set(TOKEN_ID_COOKIE, response.data.jwt, {expires: 7});
             history.push('/');
         } else {
             log.info(`[ACTION]: dispatch HANDLE_SIGN_IN_ERROR response.data.error = ${response.data.error}`)
@@ -70,7 +70,7 @@ export const signIn = formValues => async (dispatch) => {
 
 export const signOut = () => {
     log.info(`[ACTION]: signOut Cookie is removed...`)
-    Cookies.remove(HANDLE_TOKEN_ID)
+    Cookies.remove(TOKEN_ID_COOKIE)
     return {
         type: HANDLE_SIGN_OUT
     }
@@ -111,26 +111,41 @@ export const sendPaymentToken = (token) => async dispatch => {
         headers: {
             'Content-Type': 'application/json'
         },
-        data : JSON.stringify(token)
+        data: JSON.stringify(token)
     };
 
     axios(config)
         .then(function (response) {
             console.log(JSON.stringify(response.data));
-            dispatch({
-                type: PAYMENT_RESPONSE,
-                payload: JSON.stringify(response.data)
-            })
+            let paymentResponse = {...response.data,
+                last4: token.card.last4, exp_year: token.card.exp_year,
+                exp_month: token.card.exp_month, brand: token.card.brand}
 
-            if(response.data.paymentFailed) {
+            if (paymentResponse.payment_failed) {
                 history.push(`/checkout/cancel-payment/${response.data.charge_id}`)
             } else {
                 history.push(`/checkout/success-payment/${response.data.charge_id}`)
+                Cookies.remove(CART_TOTAL_COOKIE)
+                Cookies.remove(SHOPPERS_PRODUCT_INFO_COOKIE)
+
+                dispatch({
+                    type: CART_TOTAL,
+                    payload: 0
+                })
             }
 
+            dispatch({
+                type: PAYMENT_RESPONSE,
+                payload: paymentResponse
+            })
+
         })
         .catch(function (error) {
             console.log(error);
+            dispatch({
+                type: PAYMENT_RESPONSE,
+                payload: {error: true}
+            })
         });
 }
 
@@ -160,7 +175,7 @@ export const getDataViaAPI = (type, uri) => async dispatch => {
                     {isLoading: false, data: JSON.parse(JSON.stringify(response.data))}
             });
             if (LOAD_FILTER_PRODUCTS.localeCompare(type) === 0) {
-                if(window.location.search.localeCompare(uri.split("/products")[1]) !== 0) {
+                if (window.location.search.localeCompare(uri.split("/products")[1]) !== 0) {
                     history.push(uri)
                 }
             }
@@ -185,8 +200,10 @@ export const loadFilterAttributes = filterQuery => async dispatch => {
             dispatch({
                 type: LOAD_FILTER_ATTRIBUTES,
                 payload: JSON.parse(JSON.stringify(
-                    {...response.data,
-                    "query": removedSpacesFromFilterQuery.slice(3)}))
+                    {
+                        ...response.data,
+                        "query": removedSpacesFromFilterQuery.slice(3)
+                    }))
             });
 
             dispatch({

client/src/actions/types.js

@@ -30,21 +30,3 @@ export const SHIPPING_OPTION_CONFIRMED = "SHIPPING_OPTION_CONFIRMED";
 export const PAYMENT_INFO_CONFIRMED = "PAYMENT_INFO_CONFIRMED";
 export const PAYMENT_RESPONSE = "PAYMENT_RESPONSE";
 
-
-// js cookie IDs
-export const HANDLE_TOKEN_ID = "HANDLE_TOKEN_ID";
-export const SHOPPERS_PRODUCT_ID = 'SHOPPERS_PRODUCT_ID';
-
-// http error codes
-export const INTERNAL_SERVER_ERROR_CODE = 500;
-export const BAD_REQUEST_ERROR_CODE = 400;
-
-// API URL
-export const HOME_PAGE_DATA_API = "/home";
-export const TABS_DATA_API = "/tabs";
-export const PRODUCT_BY_ID_DATA_API = "/products?product_id=";
-export const PRODUCT_BY_CATEGORY_DATA_API = "/products?q=";
-
-// attributes length
-export const HOME_PAGE_API_OBJECT_LEN = 3;
-export const TABS_API_OBJECT_LEN = 6;

client/src/components/routes/cancelPayment.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import log from 'loglevel'
 import {Grid} from "@material-ui/core";
+import {Link} from "react-router-dom";
+import {CHECKOUT_ROUTE, HOME_ROUTE} from "../../constants/react_routes";
 
 export const CancelPayment = () => {
 
@@ -17,9 +19,8 @@ export const CancelPayment = () => {
             </Grid>
 
             <Grid item xs={12} style={{marginTop: "2rem", fontWeight: "bold"}}>
-                Go back to Checkout.
+                Go back to <Link to={CHECKOUT_ROUTE}>Checkout</Link>.
             </Grid>
-
         </Grid>
     )
 }

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

@@ -52,7 +52,7 @@ function ContinueButton(props) {
 }
 
 function continueButtonPropsAreEqual(prevProps, nextProps) {
-    return prevProps.action === nextProps.action;
+    return prevProps.action === nextProps.action && !prevProps.buttonHandler;
 }
 
 const continueButtonMemoWrapper = React.memo(ContinueButton, continueButtonPropsAreEqual);

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

@@ -16,6 +16,12 @@ class PaymentButton extends Component {
         }
     }
 
+    componentDidMount() {
+        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
@@ -81,7 +87,8 @@ const mapStateToProps = (state) => {
             state.form.shippingAddressForm : null,
         shippingOption: state.shippingOptionReducer,
         addToCart: state.addToCartReducer,
-        deliveryCharges: state.deliveryChargesReducer
+        deliveryCharges: state.deliveryChargesReducer,
+        paymentResponse: state.paymentResponseReducer
     })
 }
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import log from 'loglevel';
 import {Divider, Grid} from "@material-ui/core";
 import {makeStyles} from "@material-ui/core/styles";
@@ -9,7 +9,10 @@ import FormControl from '@material-ui/core/FormControl';
 import ContinueButton from "./continueButton";
 import {useDispatch, useSelector} from "react-redux";
 import CircularProgress from '@material-ui/core/CircularProgress';
-import {DELIVERY_CHARGES, SHIPPING_OPTION_CONFIRMED} from "../../../actions/types";
+import {
+    DELIVERY_CHARGES,
+    SHIPPING_OPTION_CONFIRMED
+} from "../../../actions/types";
 import {MONTHS} from "../../../constants/constants";
 import Button from "@material-ui/core/Button";
 
@@ -55,10 +58,11 @@ export function ShippingOptions() {
     const classes = useStyles();
     const shoppingBagProducts = useSelector(state => state.shoppingBagProductReducer)
     const dispatch = useDispatch()
-    const [shippingOptionState, setShippingOptionState] = React.useState({value: 'free', submitted: false});
+    const [shippingOptionState, setShippingOptionState] = React.useState( {value: 'free', submitted: false})
 
     const handleRadioBtnChange = (event) => {
-        setShippingOptionState({value: event.target.value, submitted: false});
+        log.info(`event.target.value = ${event.target.value}`)
+        setShippingOptionState({value: event.target.value, submitted: false})
 
         let deliveryPrice = null
 
@@ -81,18 +85,18 @@ export function ShippingOptions() {
             type: DELIVERY_CHARGES,
             payload: deliveryPrice
         })
-
     };
 
     const submitHandler = () => {
-        setShippingOptionState({value: shippingOptionState.value, submitted: true});
+        let selectedOption = shippingOptionState.value
+        setShippingOptionState({value: selectedOption, submitted: true})
 
         dispatch({
             type: SHIPPING_OPTION_CONFIRMED,
             payload: {
-                estimatedDate: getEstimatedDeliveryDate(shippingOptionsData[shippingOptionState.value].estimatedDays),
-                price: shippingOptionsData[shippingOptionState.value].price,
-                deliveryType: shippingOptionsData[shippingOptionState.value].label,
+                estimatedDate: getEstimatedDeliveryDate(shippingOptionsData[selectedOption].estimatedDays),
+                price: shippingOptionsData[selectedOption].price,
+                deliveryType: shippingOptionsData[selectedOption].label,
                 submitted: true
             }
         })
@@ -212,6 +216,7 @@ export function ShippingOptions() {
     }
 
     log.info("[ShippingOptions] Rendering ShippingOptions Component.")
+    log.info(`shippingOptionState-3 = ${JSON.stringify(shippingOptionState)}`)
 
     return (
         <Grid item style={{width: "100%", height: "fit-content"}}>
@@ -228,7 +233,8 @@ export function ShippingOptions() {
                 <Divider style={{height: 1, width: "inherit"}}/>
             </Grid>
 
-            {shippingOptionState.submitted ? renderEditButton() : <ContinueButton buttonHandler={submitHandler}/>}
+            {shippingOptionState.submitted ? renderEditButton() : <ContinueButton
+                buttonHandler={submitHandler}/>}
         </Grid>
     )
 }

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

@@ -8,10 +8,11 @@ import IconButton from '@material-ui/core/IconButton';
 export const SummaryCard = (props) => {
 
     const renderCardContent = () => {
-
+        let id = 0
         return props.contentList.map((formValue) => {
+            ++id
             return (
-                <Grid item key={formValue} style={{marginBottom: "0.5rem"}}>
+                <Grid item key={`sc-${id}`} style={{marginBottom: "0.5rem"}}>
                     {formValue}
                 </Grid>
             )

client/src/components/routes/detail/productDetails.js

@@ -1,8 +1,7 @@
 import React, {useEffect, useState} from 'react';
-import {Button, Grid, Box, Hidden} from "@material-ui/core";
+import {Button, Grid, Box} from "@material-ui/core";
 import log from 'loglevel';
 import BreadcrumbsSection from "../../ui/breadcrumbs";
-import {HOME_ROUTE} from "../../../constants/constants";
 import history from "../../../history";
 import {SearchMatchesNotFound} from "../../ui/error/searchMatchesNotFound";
 import {useDispatch, useSelector} from "react-redux";
@@ -11,14 +10,17 @@ import {getDataViaAPI} from '../../../actions'
 import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
 import LocalMallIcon from '@material-ui/icons/LocalMall';
 import Cookies from 'js-cookie';
-import {ADD_TO_CART, PRODUCT_BY_ID_DATA_API, SELECT_PRODUCT_DETAIL, SHOPPERS_PRODUCT_ID} from "../../../actions/types";
+import {ADD_TO_CART, SELECT_PRODUCT_DETAIL} from "../../../actions/types";
 import RemoveIcon from '@material-ui/icons/Remove';
 import AddIcon from '@material-ui/icons/Add';
 import {makeStyles} from "@material-ui/core/styles";
 import Spinner from "../../ui/spinner";
 import {InternalServerError} from "../../ui/error/internalServerError";
 import {BadRequest} from "../../ui/error/badRequest";
 import _ from "lodash";
+import {PRODUCT_BY_ID_DATA_API} from "../../../constants/api_routes";
+import {SHOPPERS_PRODUCT_INFO_COOKIE} from "../../../constants/cookies";
+import {HOME_ROUTE} from "../../../constants/react_routes";
 
 export const useButtonStyles = makeStyles(() => ({
     buttonStartIcon: {
@@ -103,7 +105,7 @@ function ProductDetails(props) {
     }
 
     const dispatchAddToCart = newAddToCart => {
-        Cookies.set(SHOPPERS_PRODUCT_ID, newAddToCart, {expires: 7});
+        Cookies.set(SHOPPERS_PRODUCT_INFO_COOKIE, newAddToCart, {expires: 7});
         log.info(`[Product Detail] dispatchAddToCart productQty = ${JSON.stringify(newAddToCart)}`)
         dispatch({
             type: ADD_TO_CART,

client/src/components/routes/home/home.js

@@ -12,8 +12,10 @@ import HomeMenuIcons from "./homeMenuIcons";
 import Hidden from "@material-ui/core/Hidden";
 import Spinner from "../../ui/spinner";
 import {HTTPError} from "../../ui/error/httpError";
-import {LOAD_HOME_PAGE, HOME_PAGE_DATA_API, HOME_PAGE_API_OBJECT_LEN} from "../../../actions/types";
+import {LOAD_HOME_PAGE} from "../../../actions/types";
 import {BadRequest} from "../../ui/error/badRequest";
+import {HOME_PAGE_DATA_API} from "../../../constants/api_routes";
+import {HOME_PAGE_API_OBJECT_LEN} from "../../../constants/constants"
 
 const Home = props => {
     const {hover} = useSelector(state => state.tabHoverEventReducer)

client/src/components/routes/navbar/accordionSection.js

@@ -7,8 +7,9 @@ import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import {Link} from "react-router-dom";
 import {useSelector} from "react-redux";
-import {PRODUCTS_ROUTE, TAB_CONFIG} from "../../../constants/constants";
+import {TAB_CONFIG} from "../../../constants/constants";
 import log from "loglevel";
+import {PRODUCTS_ROUTE} from "../../../constants/react_routes";
 
 const height = 48