Updating Components to set Context and Adding Redirection Logics

Author: del15881

packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/useCreateAccount.js

@@ -9,6 +9,7 @@ import { useGoogleReCaptcha } from '../../../hooks/useGoogleReCaptcha';
 
 import DEFAULT_OPERATIONS from './createAccount.gql';
 import { useEventingContext } from '../../../context/eventing';
+import { useHistory } from 'react-router-dom';
 
 /**
  * Returns props necessary to render CreateAccount component. In particular this
@@ -95,6 +96,7 @@ export const useCreateAccount = props => {
         formAction: 'createAccount'
     });
 
+    const history = useHistory();
     const handleSubmit = useCallback(
         async formValues => {
             setIsSubmitting(true);
@@ -158,6 +160,8 @@ export const useCreateAccount = props => {
                 if (onSubmit) {
                     onSubmit();
                 }
+
+                history.push('/account-information');
             } catch (error) {
                 if (process.env.NODE_ENV !== 'production') {
                     console.error(error);

packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/useOrderConfirmationPage.js

@@ -1,9 +1,11 @@
 import { useEffect } from 'react';
 import { useUserContext } from '../../../context/user';
+import { setUserOnOrderSuccess } from '../../../store/actions/user/asyncActions';
 import { useLazyQuery } from '@apollo/client';
 
 import mergeOperations from '../../../util/shallowMerge';
 import DEFAULT_OPERATIONS from './orderConfirmationPage.gql';
+import { useDispatch } from 'react-redux';
 
 export const flattenGuestCartData = data => {
     if (!data) {
@@ -34,8 +36,26 @@ export const flattenCustomerOrderData = data => {
     if (!data) {
         return;
     }
+
     const { customer } = data;
-    const order = customer.orders.items[0];
+    const order = customer?.orders?.items?.[0];
+    if (!order || !order.shipping_address) {
+        // Return an empty response if no valid order or shipping address exists
+        return;
+
+        //Below code can be uncommented in case of wanting to show the order success page with blank shipping address.
+        // return {
+        //     city: '',
+        //     country: '',
+        //     email: customer.email,
+        //     firstname: '',
+        //     lastname: '',
+        //     postcode: '',
+        //     region: '',
+        //     street: ['',''],
+        //     shippingMethod: ''
+        // };
+    }
     const { shipping_address: address } = order;
 
     return {
@@ -65,6 +85,8 @@ export const useOrderConfirmationPage = props => {
     const flatData =
         flattenGuestCartData(props.data) || flattenCustomerOrderData(queryData);
 
+    const dispatch = useDispatch();
+
     useEffect(() => {
         if (props.orderNumber && !props.data) {
             const orderNumber = props.orderNumber;
@@ -74,6 +96,13 @@ export const useOrderConfirmationPage = props => {
                 }
             });
         }
+
+        dispatch(setUserOnOrderSuccess(true));
+
+        return () => {
+            // Reset the flag when leaving the page
+            dispatch(setUserOnOrderSuccess(false));
+        };
     }, [props.orderNumber, props.data, fetchOrderConfirmationDetails]);
 
     return {

packages/peregrine/lib/talons/CreateAccount/useCreateAccount.js

@@ -10,6 +10,12 @@ import { useGoogleReCaptcha } from '../../hooks/useGoogleReCaptcha';
 
 import DEFAULT_OPERATIONS from './createAccount.gql';
 import { useEventingContext } from '../../context/eventing';
+import { useHistory, useLocation } from 'react-router-dom';
+
+/**
+ * Routes to redirect from if used to create an account.
+ */
+const REDIRECT_FOR_ROUTES = ['/checkout', '/order-confirmation'];
 
 /**
  * Returns props necessary to render CreateAccount component. In particular this
@@ -47,7 +53,7 @@ export const useCreateAccount = props => {
         { createCart, removeCart, getCartDetails }
     ] = useCartContext();
     const [
-        { isGettingDetails },
+        { isGettingDetails, userOnOrderSuccess },
         { getUserDetails, setToken }
     ] = useUserContext();
 
@@ -112,6 +118,9 @@ export const useCreateAccount = props => {
         };
     }, [handleCancel]);
 
+    const history = useHistory();
+    const location = useLocation();
+
     const handleSubmit = useCallback(
         async formValues => {
             setIsSubmitting(true);
@@ -188,6 +197,13 @@ export const useCreateAccount = props => {
                 if (onSubmit) {
                     onSubmit();
                 }
+
+                if (
+                    userOnOrderSuccess &&
+                    REDIRECT_FOR_ROUTES.includes(location.pathname)
+                ) {
+                    history.push('/account-information');
+                }
             } catch (error) {
                 if (process.env.NODE_ENV !== 'production') {
                     console.error(error);

packages/peregrine/lib/talons/SignIn/useSignIn.js

@@ -10,6 +10,12 @@ import { retrieveCartId } from '../../store/actions/cart';
 
 import DEFAULT_OPERATIONS from './signIn.gql';
 import { useEventingContext } from '../../context/eventing';
+import { useHistory, useLocation } from 'react-router-dom';
+
+/**
+ * Routes to redirect from if used to create an account.
+ */
+const REDIRECT_FOR_ROUTES = ['/checkout', '/order-confirmation'];
 
 export const useSignIn = props => {
     const {
@@ -40,7 +46,7 @@ export const useSignIn = props => {
 
     const userContext = useUserContext();
     const [
-        { isGettingDetails, getDetailsError },
+        { isGettingDetails, getDetailsError, userOnOrderSuccess },
         { getUserDetails, setToken }
     ] = userContext;
 
@@ -83,6 +89,9 @@ export const useSignIn = props => {
     const formApiRef = useRef(null);
     const setFormApi = useCallback(api => (formApiRef.current = api), []);
 
+    const history = useHistory();
+    const location = useLocation();
+
     const handleSubmit = useCallback(
         async ({ email, password }) => {
             setIsSigningIn(true);
@@ -144,6 +153,13 @@ export const useSignIn = props => {
                 });
 
                 getCartDetails({ fetchCartId, fetchCartDetails });
+
+                if (
+                    userOnOrderSuccess &&
+                    REDIRECT_FOR_ROUTES.includes(location.pathname)
+                ) {
+                    history.push('/order-history');
+                }
             } catch (error) {
                 if (process.env.NODE_ENV !== 'production') {
                     console.error(error);