fix: Lose order data when reload the thank you page

src/components/OrderContainer.tsx

@@ -27,6 +27,7 @@ import OrderStorageContext from '#context/OrderStorageContext'
 import { OrderCreate, Order } from '@commercelayer/sdk'
 import { BaseError } from '#typings/errors'
 import compareObjAttribute from '#utils/compareObjAttribute'
+import checkIncludeResources from '#utils/checkIncludeResource'
 
 const propTypes = components.OrderContainer.propTypes
 const defaultProps = components.OrderContainer.defaultProps
@@ -58,29 +59,45 @@ const OrderContainer: React.FunctionComponent<OrderContainerProps> = (
     )
     if (config.accessToken) {
       const localOrder = persistKey ? getLocalOrder(persistKey) : orderId
-      if (localOrder) {
-        dispatch({
-          type: 'setOrderId',
-          payload: {
-            orderId: localOrder,
-          },
+      if (
+        localOrder &&
+        !state.order &&
+        startRequest.length === state.include?.length
+      ) {
+        const removeOrderPlaced = !!(persistKey && clearWhenPlaced)
+        getApiOrder({
+          id: localOrder,
+          dispatch,
+          config,
+          persistKey,
+          clearWhenPlaced: removeOrderPlaced,
+          deleteLocalOrder,
+          state,
+        })
+      } else if (state?.order && state?.include) {
+        const allIncluded = checkIncludeResources({
+          order: state.order,
+          resourceInclude: state.include,
         })
-        if (!state.order && startRequest.length === state.include?.length) {
-          const removeOrderPlaced = !!(persistKey && clearWhenPlaced)
+        if (!allIncluded) {
           getApiOrder({
-            id: localOrder,
+            id: state.orderId,
             dispatch,
             config,
             persistKey,
-            clearWhenPlaced: removeOrderPlaced,
             deleteLocalOrder,
             state,
           })
         }
       }
     }
-    return (): void => unsetOrderState(dispatch)
-  }, [config.accessToken, orderId, state.includeLoaded, state.include])
+  }, [
+    config.accessToken,
+    state.includeLoaded,
+    state.include,
+    orderId,
+    state.order,
+  ])
   useEffect(() => {
     if (state.orderId && attributes && state.order) {
       const updateAttributes = compareObjAttribute({

src/components/utils/BaseOrderPrice.tsx

@@ -1,15 +1,10 @@
 import OrderContext from '#context/OrderContext'
 import getAmount from '#utils/getAmount'
 import Parent from './Parent'
-import React, {
-  FunctionComponent,
-  useState,
-  useEffect,
-  useContext,
-} from 'react'
+import { FunctionComponent, useState, useEffect, useContext } from 'react'
 import { PropsType } from '#utils/PropsType'
 import { baseOrderPricePropTypes } from '#typings'
-import { isEmpty } from 'lodash'
+import isEmpty from 'lodash/isEmpty'
 
 export type BaseOrderPriceProps = PropsType<typeof baseOrderPricePropTypes> &
   JSX.IntrinsicElements['span']

src/reducers/OrderReducer.ts

@@ -251,7 +251,7 @@ export const getApiOrder: GetOrder = async (params) => {
         })
     }
     return order
-  } catch (error: any) {
+  } catch (error: unknown) {
     const errors = getErrors(error, 'orders')
     console.error('Retrieve order', errors)
     if (dispatch)

src/utils/checkIncludeResource.ts

@@ -0,0 +1,26 @@
+import { ResourceIncluded } from '#reducers/OrderReducer'
+import type { Order } from '@commercelayer/sdk'
+
+type Params = {
+  order: Order
+  resourceInclude: ResourceIncluded[]
+}
+
+export default function checkIncludeResources({
+  order,
+  resourceInclude,
+}: Params) {
+  const checkKeys: boolean[] = []
+  resourceInclude.forEach((v) => {
+    const isMultiKey = v.includes('.')
+    if (isMultiKey) {
+      const [first] = v.split('.')
+      const resource = order?.[first as keyof Order]
+      if (resource === undefined) checkKeys.push(false)
+    } else {
+      const resource = order?.[v as keyof Order]
+      if (resource === undefined) checkKeys.push(false)
+    }
+  })
+  return checkKeys.length === 0
+}