perf: Add autoSelectSingleShippingMethod prop to Shipment component

commercelayer · May 25, 2022 · d24b6f7 · d24b6f7
1 parent 9be2795
commit d24b6f7
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 22 deletions.
diff --git a/src/components/Shipment.tsx b/src/components/Shipment.tsx
@@ -1,10 +1,4 @@
-import React, {
-  Fragment,
-  useContext,
-  ReactNode,
-  useState,
-  useEffect,
-} from 'react'
+import { useContext, ReactNode, useState, useEffect } from 'react'
 import ShipmentContext from '#context/ShipmentContext'
 import ShipmentChildrenContext from '#context/ShipmentChildrenContext'
 import components from '#config/components'
@@ -18,16 +12,28 @@ const displayName = components.Shipment.displayName
 type ShipmentProps = {
   children: ReactNode
   loader?: LoaderType
+  autoSelectSingleShippingMethod?: boolean
 }
 
-const Shipment: React.FunctionComponent<ShipmentProps> = ({
+export default function Shipment({
   children,
   loader = 'Loading...',
-}) => {
+  autoSelectSingleShippingMethod = false,
+}: ShipmentProps) {
   const [loading, setLoading] = useState(true)
-  const { shipments, deliveryLeadTimes } = useContext(ShipmentContext)
+  const { shipments, deliveryLeadTimes, setShippingMethod } =
+    useContext(ShipmentContext)
   useEffect(() => {
     if (shipments) setLoading(false)
+    if (autoSelectSingleShippingMethod && shipments) {
+      shipments.forEach((shipment) => {
+        const isSingle = shipment?.available_shipping_methods?.length === 1
+        if (!shipment?.shipping_method && isSingle) {
+          const [shippingMethod] = shipment?.available_shipping_methods || []
+          setShippingMethod(shipment?.id, shippingMethod?.id)
+        }
+      })
+    }
     return () => {
       setLoading(true)
     }
@@ -43,7 +49,12 @@ const Shipment: React.FunctionComponent<ShipmentProps> = ({
         return l
       })
       const shippingMethods = shipment.available_shipping_methods
-      const currentShippingMethodId = shipment.shipping_method?.id
+      const currentShippingMethodId =
+        autoSelectSingleShippingMethod &&
+        shippingMethods &&
+        shippingMethods.length === 1
+          ? shippingMethods[0].id
+          : shipment.shipping_method?.id
       const stockTransfers = shipment.stock_transfers
       const times = deliveryLeadTimes?.filter(
         (time) => time.stock_location?.id === shipment.stock_location?.id
@@ -63,14 +74,8 @@ const Shipment: React.FunctionComponent<ShipmentProps> = ({
         </ShipmentChildrenContext.Provider>
       )
     })
-  return !loading ? (
-    <Fragment>{components}</Fragment>
-  ) : (
-    getLoaderComponent(loader)
-  )
+  return !loading ? <>{components}</> : getLoaderComponent(loader)
 }
 
 Shipment.propTypes = propTypes
 Shipment.displayName = displayName
-
-export default Shipment
diff --git a/src/components/ShippingMethod.tsx b/src/components/ShippingMethod.tsx
@@ -1,4 +1,4 @@
-import React, {
+import {
   FunctionComponent,
   Fragment,
   useContext,
@@ -10,7 +10,7 @@ import ShippingMethodChildrenContext from '#context/ShippingMethodChildrenContex
 import components from '#config/components'
 import ShipmentChildrenContext from '#context/ShipmentChildrenContext'
 import isEmpty from 'lodash/isEmpty'
-import { DeliveryLeadTime } from '@commercelayer/sdk'
+import type { DeliveryLeadTime } from '@commercelayer/sdk'
 
 const propTypes = components.ShippingMethod.propTypes
 const displayName = components.ShippingMethod.displayName

diff --git a/src/components/ShippingMethodRadioButton.tsx b/src/components/ShippingMethodRadioButton.tsx
@@ -1,9 +1,9 @@
-import React, { useContext, FunctionComponent, ReactNode } from 'react'
+import { useContext, FunctionComponent, ReactNode, useEffect } from 'react'
 import ShippingMethodChildrenContext from '#context/ShippingMethodChildrenContext'
 import Parent from './utils/Parent'
 import components from '#config/components'
 import ShipmentContext from '#context/ShipmentContext'
-import { ShippingMethod } from '@commercelayer/sdk'
+import type { ShippingMethod } from '@commercelayer/sdk'
 
 const propTypes = components.ShippingMethodRadioButton.propTypes
 const displayName = components.ShippingMethodRadioButton.displayName