fix: Manage resources to include

src/components/BillingAddressForm.tsx

@@ -41,13 +41,17 @@ const BillingAddressForm: FunctionComponent<BillingAddressFormProps> = (
     order,
     include,
     addResourceToInclude,
+    includeLoaded,
   } = useContext(OrderContext)
   const ref = useRef<HTMLFormElement>(null)
   useEffect(() => {
     if (!include?.includes('billing_address')) {
       addResourceToInclude({
         newResource: 'billing_address',
-        resourcesIncluded: include,
+      })
+    } else if (!includeLoaded?.['billing_address']) {
+      addResourceToInclude({
+        newResourceLoaded: { billing_address: true },
       })
     }
     if (!isEmpty(errors)) {
@@ -106,7 +110,7 @@ const BillingAddressForm: FunctionComponent<BillingAddressFormProps> = (
         setAddress({ values: {} as Address, resource: 'billing_address' })
       }
     }
-  }, [errors, values, reset, include])
+  }, [errors, values, reset, include, includeLoaded])
   const setValue = (
     name: AddressField | AddressInputName | AddressCountrySelectName,
     value: any

src/components/CustomerContainer.tsx

@@ -29,7 +29,7 @@ export type CustomerContainer = {
 const CustomerContainer: FunctionComponent<CustomerContainer> = (props) => {
   const { children, isGuest = false } = props
   const [state, dispatch] = useReducer(customerReducer, customerInitialState)
-  const { order, addResourceToInclude, include, updateOrder } =
+  const { order, addResourceToInclude, include, updateOrder, includeLoaded } =
     useContext(OrderContext)
   const config = useContext(CommerceLayerContext)
   useEffect(() => {
@@ -39,23 +39,27 @@ const CustomerContainer: FunctionComponent<CustomerContainer> = (props) => {
     ) {
       addResourceToInclude({
         newResource: 'available_customer_payment_sources.payment_source',
-        resourcesIncluded: include,
+      })
+    } else if (
+      !includeLoaded?.['available_customer_payment_sources.payment_source'] &&
+      !isGuest
+    ) {
+      addResourceToInclude({
+        newResourceLoaded: {
+          'available_customer_payment_sources.payment_source': true,
+        },
       })
     }
     if (config.accessToken && isEmpty(state.addresses) && !isGuest) {
       getCustomerAddresses({ config, dispatch })
     }
-    if (
-      order &&
-      include?.includes('available_customer_payment_sources.payment_source') &&
-      !isGuest
-    ) {
+    if (order?.available_customer_payment_sources && !isGuest) {
       getCustomerPaymentSources({ dispatch, order })
     }
     return () => {
       dispatch({ type: 'setCustomerEmail', payload: {} })
     }
-  }, [config.accessToken, order, isGuest, include])
+  }, [config.accessToken, order, isGuest, include, includeLoaded])
   const contextValue = {
     isGuest,
     ...state,

src/components/LineItemsContainer.tsx

@@ -29,15 +29,24 @@ type LineItemsContainer = {
 
 const LineItemsContainer: FunctionComponent<LineItemsContainer> = (props) => {
   const { children, loader = 'Loading...' } = props
-  const { order, addResourceToInclude, include, orderId, getOrder } =
-    useContext(OrderContext)
+  const {
+    order,
+    addResourceToInclude,
+    include,
+    orderId,
+    getOrder,
+    includeLoaded,
+  } = useContext(OrderContext)
   const config = useContext(CommerceLayerContext)
   const [state, dispatch] = useReducer(lineItemReducer, lineItemInitialState)
   useEffect(() => {
     if (!include?.includes('line_items.line_item_options.sku_option')) {
       addResourceToInclude({
         newResource: 'line_items.line_item_options.sku_option',
-        resourcesIncluded: include,
+      })
+    } else if (!includeLoaded?.['line_items.line_item_options.sku_option']) {
+      addResourceToInclude({
+        newResourceLoaded: { 'line_items.line_item_options.sku_option': true },
       })
     }
     if (!isEmpty(order) && order?.line_items) {
@@ -54,7 +63,7 @@ const LineItemsContainer: FunctionComponent<LineItemsContainer> = (props) => {
         })
       }
     }
-  }, [order, include])
+  }, [order, include, includeLoaded])
   const lineItemValue = {
     ...state,
     loader,

src/components/OrderContainer.tsx

@@ -20,7 +20,7 @@ import orderReducer, {
 } from '#reducers/OrderReducer'
 import CommerceLayerContext from '#context/CommerceLayerContext'
 import OrderContext, { defaultOrderContext } from '#context/OrderContext'
-import { unsetOrderState } from '#reducers/OrderReducer'
+import { unsetOrderState, ResourceIncluded } from '#reducers/OrderReducer'
 import components from '#config/components'
 import { BaseMetadataObject } from '#typings'
 import OrderStorageContext from '#context/OrderStorageContext'
@@ -49,6 +49,9 @@ const OrderContainer: FunctionComponent<OrderContainerProps> = (props) => {
     deleteLocalOrder,
   } = useContext(OrderStorageContext)
   useEffect(() => {
+    const startRequest = Object.keys(state?.includeLoaded || {}).filter(
+      (key) => state?.includeLoaded?.[key as ResourceIncluded] === true
+    )
     if (config.accessToken) {
       const localOrder = persistKey ? getLocalOrder(persistKey) : orderId
       if (localOrder) {
@@ -58,7 +61,7 @@ const OrderContainer: FunctionComponent<OrderContainerProps> = (props) => {
             orderId: localOrder,
           },
         })
-        if (!state.order) {
+        if (!state.order && startRequest.length === state.include?.length) {
           getApiOrder({
             id: localOrder,
             dispatch,
@@ -72,7 +75,7 @@ const OrderContainer: FunctionComponent<OrderContainerProps> = (props) => {
       }
     }
     return (): void => unsetOrderState(dispatch)
-  }, [config.accessToken, orderId])
+  }, [config.accessToken, orderId, state.includeLoaded])
   const orderValue = useMemo(() => {
     return {
       ...state,
@@ -127,6 +130,7 @@ const OrderContainer: FunctionComponent<OrderContainerProps> = (props) => {
           ...args,
           dispatch,
           resourcesIncluded: state.include,
+          resourceIncludedLoaded: state.includeLoaded,
         }),
       updateOrder: async (args: UpdateOrderArgs) =>
         await defaultOrderContext['updateOrder']({

src/components/PaymentMethodsContainer.tsx

@@ -30,97 +30,103 @@ type PaymentMethodsContainerProps = {
   children: ReactNode
   config?: PaymentMethodConfig
 }
-const PaymentMethodsContainer: FunctionComponent<PaymentMethodsContainerProps> =
-  (props) => {
-    const { children, config } = props
-    const [state, dispatch] = useReducer(
-      paymentMethodReducer,
-      paymentMethodInitialState
-    )
-    const {
-      order,
-      getOrder,
-      setOrderErrors,
-      include,
-      addResourceToInclude,
-      updateOrder,
-    } = useContext(OrderContext)
-    const credentials = useContext(CommerceLayerContext)
-    useEffect(() => {
-      if (!include?.includes('available_payment_methods')) {
-        addResourceToInclude({
-          newResource: [
-            'available_payment_methods',
-            'payment_source',
-            'payment_method',
-          ],
-          resourcesIncluded: include,
-        })
-      }
+const PaymentMethodsContainer: FunctionComponent<
+  PaymentMethodsContainerProps
+> = (props) => {
+  const { children, config } = props
+  const [state, dispatch] = useReducer(
+    paymentMethodReducer,
+    paymentMethodInitialState
+  )
+  const {
+    order,
+    getOrder,
+    setOrderErrors,
+    include,
+    addResourceToInclude,
+    updateOrder,
+    includeLoaded,
+  } = useContext(OrderContext)
+  const credentials = useContext(CommerceLayerContext)
+  useEffect(() => {
+    if (!include?.includes('available_payment_methods')) {
+      addResourceToInclude({
+        newResource: [
+          'available_payment_methods',
+          'payment_source',
+          'payment_method',
+        ],
+      })
+    } else if (!includeLoaded?.['available_payment_methods']) {
+      addResourceToInclude({
+        newResourceLoaded: {
+          available_payment_methods: true,
+          payment_source: true,
+          payment_method: true,
+        },
+      })
+    }
 
-      if (config && isEmpty(state.config))
-        setPaymentMethodConfig(config, dispatch)
-      if (credentials && order && !state.paymentMethods) {
-        getPaymentMethods({ order, dispatch })
-      }
-      if (credentials && order?.payment_source) {
-        dispatch({
-          type: 'setPaymentSource',
-          payload: { paymentSource: order?.payment_source },
-        })
-      }
-    }, [order, credentials, include])
-    const contextValue = useMemo(() => {
-      return {
-        ...state,
-        setLoading: ({ loading }: { loading: boolean }) =>
-          defaultPaymentMethodContext['setLoading']({ loading, dispatch }),
-        setPaymentRef: ({ ref }: { ref: PaymentRef }) =>
-          setPaymentRef({ ref, dispatch }),
-        setPaymentMethodErrors: (errors: BaseError[]) =>
-          defaultPaymentMethodContext['setPaymentMethodErrors'](
-            errors,
-            dispatch
-          ),
-        setPaymentMethod: async (args: any) =>
-          await defaultPaymentMethodContext['setPaymentMethod']({
-            ...args,
-            config: credentials,
-            updateOrder,
-            order,
-            dispatch,
-            setOrderErrors,
-          }),
-        setPaymentSource: async (args: any) =>
-          defaultPaymentMethodContext['setPaymentSource']({
-            ...state,
-            ...args,
-            config: credentials,
-            dispatch,
-            getOrder,
-            updateOrder,
-            order,
-          }),
-        updatePaymentSource: async (args: any) =>
-          defaultPaymentMethodContext['updatePaymentSource']({
-            ...args,
-            config: credentials,
-            dispatch,
-          }),
-        destroyPaymentSource: async (args: any) =>
-          defaultPaymentMethodContext['destroyPaymentSource']({
-            ...args,
-            dispatch,
-            config: credentials,
-          }),
-      }
-    }, [state])
-    return (
-      <PaymentMethodContext.Provider value={contextValue}>
-        {children}
-      </PaymentMethodContext.Provider>
-    )
-  }
+    if (config && isEmpty(state.config))
+      setPaymentMethodConfig(config, dispatch)
+    if (credentials && order && !state.paymentMethods) {
+      getPaymentMethods({ order, dispatch })
+    }
+    if (credentials && order?.payment_source) {
+      dispatch({
+        type: 'setPaymentSource',
+        payload: { paymentSource: order?.payment_source },
+      })
+    }
+  }, [order, credentials, include, includeLoaded])
+  const contextValue = useMemo(() => {
+    return {
+      ...state,
+      setLoading: ({ loading }: { loading: boolean }) =>
+        defaultPaymentMethodContext['setLoading']({ loading, dispatch }),
+      setPaymentRef: ({ ref }: { ref: PaymentRef }) =>
+        setPaymentRef({ ref, dispatch }),
+      setPaymentMethodErrors: (errors: BaseError[]) =>
+        defaultPaymentMethodContext['setPaymentMethodErrors'](errors, dispatch),
+      setPaymentMethod: async (args: any) =>
+        await defaultPaymentMethodContext['setPaymentMethod']({
+          ...args,
+          config: credentials,
+          updateOrder,
+          order,
+          dispatch,
+          setOrderErrors,
+        }),
+      setPaymentSource: async (args: any) =>
+        defaultPaymentMethodContext['setPaymentSource']({
+          ...state,
+          ...args,
+          config: credentials,
+          dispatch,
+          getOrder,
+          updateOrder,
+          order,
+        }),
+      updatePaymentSource: async (args: any) =>
+        defaultPaymentMethodContext['updatePaymentSource']({
+          ...args,
+          config: credentials,
+          dispatch,
+        }),
+      destroyPaymentSource: async (args: any) =>
+        defaultPaymentMethodContext['destroyPaymentSource']({
+          ...args,
+          dispatch,
+          config: credentials,
+        }),
+    }
+  }, [state])
+  return (
+    <PaymentMethodContext.Provider value={contextValue}>
+      {children}
+    </PaymentMethodContext.Provider>
+  )
+}
 
 PaymentMethodsContainer.propTypes = propTypes
 PaymentMethodsContainer.displayName = displayName