perf: Set attribute field to errors handler

src/components/Errors.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useContext, Fragment, useMemo } from 'react'
+import React, { useContext, Fragment, useMemo } from 'react'
 import Parent from './utils/Parent'
 import GiftCardContext from '#context/GiftCardContext'
 import OrderContext from '#context/OrderContext'
@@ -11,20 +11,22 @@ import components from '#config/components'
 import CustomerContext from '#context/CustomerContext'
 import PaymentMethodContext from '#context/PaymentMethodContext'
 import PaymentMethodChildrenContext from '#context/PaymentMethodChildrenContext'
+import ShipmentContext from '#context/ShipmentContext'
 
 const propTypes = components.Errors.propTypes
 const displayName = components.Errors.displayName
 
 export type ErrorsProps = ErrorComponentProps & JSX.IntrinsicElements['span']
 
-const Errors: FunctionComponent<ErrorsProps> = (props) => {
+const Errors: React.FunctionComponent<ErrorsProps> = (props) => {
   const { children, messages = [], resource, field, ...p } = props
   const { payment } = useContext(PaymentMethodChildrenContext)
   const { errors: orderErrors } = useContext(OrderContext)
   const { errors: giftCardErrors } = useContext(GiftCardContext)
   const { errors: lineItemErrors } = useContext(LineItemContext)
   const { errors: addressErrors } = useContext(AddressContext)
   const { errors: customerErrors } = useContext(CustomerContext)
+  const { errors: shipmentErrors } = useContext(ShipmentContext)
   const {
     errors: paymentMethodErrors,
     currentPaymentMethodType,
@@ -38,6 +40,7 @@ const Errors: FunctionComponent<ErrorsProps> = (props) => {
       ...(lineItemErrors || []),
       ...(addressErrors || []),
       ...(customerErrors || []),
+      ...(shipmentErrors || []),
       ...(paymentMethodErrors?.filter(
         (v) =>
           v.field === currentPaymentMethodType &&
@@ -50,6 +53,7 @@ const Errors: FunctionComponent<ErrorsProps> = (props) => {
       lineItemErrors,
       addressErrors,
       customerErrors,
+      shipmentErrors,
       paymentMethodErrors,
     ]
   )

src/components/PaymentSource.tsx

@@ -14,6 +14,7 @@ import { PaymentResource } from '#reducers/PaymentMethodReducer'
 import { LoaderType } from '#typings/index'
 import { CustomerCardsTemplateChildren } from './utils/PaymentCardsTemplate'
 import getCardDetails from '../utils/getCardDetails'
+import OrderContext from '#context/OrderContext'
 
 const propTypes = components.PaymentSource.propTypes
 const displayName = components.PaymentSource.displayName
@@ -38,6 +39,7 @@ export type PaymentSourceProps = {
 const PaymentSource: FunctionComponent<PaymentSourceProps> = (props) => {
   const { readonly } = props
   const { payment } = useContext(PaymentMethodChildrenContext)
+  const { order } = useContext(OrderContext)
   const { payments } = useContext(CustomerContext)
   const { currentPaymentMethodId, paymentSource, destroyPaymentSource } =
     useContext(PaymentMethodContext)
@@ -52,15 +54,24 @@ const PaymentSource: FunctionComponent<PaymentSourceProps> = (props) => {
       setShow(true)
       const card = getCardDetails({
         paymentType: payment?.payment_source_type as PaymentResource,
-        customerPayment: { payment_source: paymentSource },
+        customerPayment: {
+          payment_source: order?.payment_source || paymentSource,
+        },
       })
       if (card.brand) setShowCard(true)
     } else setShow(false)
     return () => {
       setShow(false)
       setShowCard(false)
     }
-  }, [currentPaymentMethodId, paymentSource, payments, payment, readonly])
+  }, [
+    currentPaymentMethodId,
+    paymentSource,
+    payments,
+    payment,
+    readonly,
+    order,
+  ])
   const handleEditClick = async (e: MouseEvent) => {
     e.stopPropagation()
     paymentSource &&

src/components/PlaceOrderContainer.tsx

@@ -34,6 +34,7 @@ const PlaceOrderContainer: FunctionComponent<PlaceOrderContainerProps> = (
   )
   const {
     order,
+    setOrder,
     setOrderErrors,
     include,
     addResourceToInclude,
@@ -95,7 +96,15 @@ const PlaceOrderContainer: FunctionComponent<PlaceOrderContainerProps> = (
   const contextValue = {
     ...state,
     setPlaceOrder: ({ paymentSource }: { paymentSource?: PaymentSourceType }) =>
-      setPlaceOrder({ config, order, state, setOrderErrors, paymentSource }),
+      setPlaceOrder({
+        config,
+        order,
+        state,
+        setOrderErrors,
+        paymentSource,
+        include,
+        setOrder,
+      }),
     placeOrderPermitted: () =>
       placeOrderPermitted({
         config,

src/components/Shipment.tsx

@@ -1,5 +1,4 @@
 import React, {
-  FunctionComponent,
   Fragment,
   useContext,
   ReactNode,
@@ -21,7 +20,7 @@ type ShipmentProps = {
   loader?: LoaderType
 }
 
-const Shipment: FunctionComponent<ShipmentProps> = ({
+const Shipment: React.FunctionComponent<ShipmentProps> = ({
   children,
   loader = 'Loading...',
 }) => {

src/components/ShipmentsContainer.tsx

@@ -1,15 +1,10 @@
 import ShipmentContext, {
   defaultShipmentContext,
 } from '#context/ShipmentContext'
-import React, {
-  FunctionComponent,
-  ReactNode,
-  useContext,
-  useEffect,
-  useReducer,
-} from 'react'
+import React, { ReactNode, useContext, useEffect, useReducer } from 'react'
 import shipmentReducer, {
   shipmentInitialState,
+  setShipmentErrors,
   getShipments,
   setShippingMethod,
 } from '#reducers/ShipmentReducer'
@@ -18,30 +13,21 @@ import CommerceLayerContext from '#context/CommerceLayerContext'
 import components from '#config/components'
 import { BaseError } from '#typings/errors'
 import { isEmpty } from 'lodash'
-import Parent from './utils/Parent'
-import { FunctionChildren } from '#typings'
 
 const propTypes = components.ShipmentsContainer.propTypes
 const displayName = components.ShipmentsContainer.displayName
 
-type ShipmentsContainerChildrenProps = FunctionChildren<
-  Omit<ShipmentsContainerProps, 'children'> & {
-    errors: BaseError[]
-  }
->
-
 type ShipmentsContainerProps = {
-  children: ShipmentsContainerChildrenProps
+  children: ReactNode
 }
-const ShipmentsContainer: FunctionComponent<ShipmentsContainerProps> = (
+const ShipmentsContainer: React.FunctionComponent<ShipmentsContainerProps> = (
   props
 ) => {
   const { children, ...p } = props
   const [state, dispatch] = useReducer(shipmentReducer, shipmentInitialState)
   const { order, getOrder, include, addResourceToInclude, includeLoaded } =
     useContext(OrderContext)
   const config = useContext(CommerceLayerContext)
-  const errors: BaseError[] = []
   useEffect(() => {
     if (!include?.includes('shipments.available_shipping_methods')) {
       addResourceToInclude({
@@ -75,49 +61,62 @@ const ShipmentsContainer: FunctionComponent<ShipmentsContainerProps> = (
         },
       })
     }
-
-    if (order && order.shipments && order.shipments.length > 0) {
-      const hasShippingMethods = order.shipments.map((shipment) => {
-        return (
-          shipment.available_shipping_methods &&
-          shipment.available_shipping_methods.length > 0
-        )
-      })
-      if (hasShippingMethods.includes(false)) {
-        errors.push({
-          code: 'NO_SHIPPING_METHODS',
-          message: 'No shipping methods',
-          resource: 'shipments',
+    if (order && !isEmpty(config) && order.shipments) {
+      getShipments({ order, dispatch, config })
+    }
+  }, [order, include, includeLoaded])
+  useEffect(() => {
+    if (order) {
+      if (order.shipments && order.shipments.length > 0) {
+        const hasShippingMethods = order.shipments.map((shipment) => {
+          return (
+            shipment.available_shipping_methods &&
+            shipment.available_shipping_methods.length > 0
+          )
         })
+        if (hasShippingMethods.includes(false)) {
+          setShipmentErrors(
+            [
+              ...(state.errors || []),
+              {
+                code: 'NO_SHIPPING_METHODS',
+                message: 'No shipping methods',
+                resource: 'shipments',
+              },
+            ],
+            dispatch
+          )
+        }
       }
-    }
-    if (order && order.line_items && order.line_items.length > 0) {
-      const hasStocks = order.line_items.map((line_item) => {
-        return (
+      if (order.line_items && order.line_items.length > 0) {
+        const hasStocks = order.line_items.map((line_item) => {
           // @ts-ignore
-          line_item.item?.do_not_ship || line_item.item?.inventory?.available
-        )
-      })
-      if (hasStocks.includes(false)) {
-        errors.push({
-          code: 'OUT_OF_STOCK',
-          message: 'No stock available',
-          resource: 'line_items',
+          return !(line_item.item?.inventory?.quantity >= line_item?.quantity)
+            ? false
+            : // @ts-ignore
+              line_item.item?.do_not_ship ||
+                // @ts-ignore
+                line_item.item?.inventory?.available
         })
+        if (hasStocks.includes(false)) {
+          setShipmentErrors(
+            [
+              ...(state.errors || []),
+              {
+                code: 'OUT_OF_STOCK',
+                message: 'No stock available',
+                resource: 'line_items',
+              },
+            ],
+            dispatch
+          )
+        }
       }
     }
-    if (errors.length > 0) {
-      dispatch({
-        type: 'setErrors',
-        payload: {
-          errors,
-        },
-      })
-    }
-    if (order && !isEmpty(config) && order.shipments) {
-      getShipments({ order, dispatch, config })
+    return () => {
+      setShipmentErrors([], dispatch)
     }
-  }, [order, include, includeLoaded])
+  }, [order])
   const contextValue = {
     ...state,
     setShipmentErrors: (errors: BaseError[]) =>
@@ -132,14 +131,14 @@ const ShipmentsContainer: FunctionComponent<ShipmentsContainerProps> = (
       }),
   }
 
-  const parentProps = { ...p, errors: state.errors }
   return (
     <ShipmentContext.Provider value={contextValue}>
-      <Parent {...parentProps}>{children}</Parent>
+      {children}
     </ShipmentContext.Provider>
   )
 }
 
+ShipmentsContainer.propTypes = propTypes
 ShipmentsContainer.displayName = displayName
 
 export default ShipmentsContainer

src/components/utils/PriceTemplate.tsx

@@ -25,6 +25,7 @@ const PriceTemplate: React.FunctionComponent<PTemplateProps> = (props) => {
     formattedAmount,
     ...p
   } = props
+  delete p.skuCode
   return (
     <>
       <span className={className} {...p}>

src/config/components.ts

@@ -823,7 +823,7 @@ const components = {
   },
   ShipmentsContainer: {
     displayName: 'ShipmentsContainer',
-    permittedChildren: ['Shipment', 'ReactNode'],
+    permittedChildren: ['Shipment', 'ReactNode', 'Errors'],
     propTypes: {
       children: childrenTypes.isRequired,
     },

src/context/OrderContext.ts

@@ -1,4 +1,5 @@
 import { createContext } from 'react'
+import { Order } from '@commercelayer/sdk'
 import {
   addToCart,
   AddToCart,
@@ -26,6 +27,7 @@ type DefaultContext = {
   addResourceToInclude: typeof addResourceToInclude
   getOrder: getOrderContext
   updateOrder: typeof updateOrder
+  setOrder: (order: Order) => void
 } & OrderState
 
 export const defaultOrderContext = {
@@ -34,6 +36,9 @@ export const defaultOrderContext = {
   setOrderErrors: () => {
     return
   },
+  setOrder: () => {
+    return
+  },
   setGiftCardOrCouponCode,
   removeGiftCardOrCouponCode,
   saveAddressToCustomerAddressBook,

src/reducers/OrderReducer.ts

@@ -505,7 +505,7 @@ export const setGiftCardOrCouponCode: SetGiftCardOrCouponCode = async ({
     }
     return { success: false }
   } catch (error: any) {
-    const errors = getErrors(error, 'gift_card_or_coupon_code')
+    const errors = getErrors(error, 'orders', codeType)
     dispatch && setOrderErrors({ errors, dispatch })
     return { success: false }
   }
@@ -548,7 +548,7 @@ export const removeGiftCardOrCouponCode: RemoveGiftCardOrCouponCode = async ({
     }
     return { success: false }
   } catch (error: any) {
-    const errors = getErrors(error, 'gift_card_or_coupon_code')
+    const errors = getErrors(error, 'orders', codeType)
     console.error('Remove gift card o coupon code', errors)
     dispatch && setOrderErrors({ errors, dispatch })
     return { success: false }

src/reducers/PaymentMethodReducer.ts

@@ -240,7 +240,7 @@ export const setPaymentMethod: SetPaymentMethod = async ({
       setOrderErrors && setOrderErrors([])
     }
   } catch (error) {
-    const errors = getErrors(error, 'orders')
+    const errors = getErrors(error, 'orders', paymentResource)
     console.error('Set payment method', errors)
   }
 }
@@ -316,7 +316,7 @@ export const setPaymentSource: SetPaymentSource = async ({
       }
     }
   } catch (error: any) {
-    const errors = getErrors(error, 'payment_methods')
+    const errors = getErrors(error, 'payment_methods', paymentResource)
     console.error('Set payment source:', errors)
     if (dispatch)
       setErrors({

src/utils/getErrors.ts

@@ -4,10 +4,11 @@ import { Dispatch } from 'react'
 
 export default function getErrors(
   error: any,
-  resource: ResourceErrorType
+  resource: ResourceErrorType,
+  field?: string
 ): BaseError[] {
   return error?.errors?.map((e: any) => {
-    return { ...e, resource }
+    return { ...e, resource, ...(field && { field }) }
   })
 }