feat: Expose types and add shipmentId to ShippingMethodRadioButton on…

…Change prop
commercelayer · Dec 7, 2021 · 8d9ca25 · 8d9ca25
1 parent 3633657
commit 8d9ca25
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 37 deletions.
diff --git a/src/components/ShippingMethodRadioButton.tsx b/src/components/ShippingMethodRadioButton.tsx
@@ -8,51 +8,61 @@ import { ShippingMethod } from '@commercelayer/sdk'
 const propTypes = components.ShippingMethodRadioButton.propTypes
 const displayName = components.ShippingMethodRadioButton.displayName
 
-type ShippingMethodRadioButtonChildrenProps = Omit<
+export type ShippingMethodRadioButtonTemplate = Omit<
   ShippingMethodRadioButtonProps,
   'children'
->
+> & { shippingMethod: ShippingMethod; shipmentId: string }
+
+export type ShippingMethodRadioButtonOnChange = (
+  shippingMethod: ShippingMethod,
+  shipmentId: string
+) => void
 
 type ShippingMethodRadioButtonProps = {
-  children?: (props: ShippingMethodRadioButtonChildrenProps) => ReactNode
-  onChange?: (shippingMethod: ShippingMethod) => void
-} & JSX.IntrinsicElements['input']
+  children?: (props: ShippingMethodRadioButtonTemplate) => ReactNode
+  onChange?: ShippingMethodRadioButtonOnChange
+} & Omit<JSX.IntrinsicElements['input'], 'onChange'>
 
-const ShippingMethodRadioButton: FunctionComponent<ShippingMethodRadioButtonProps> =
-  (props) => {
-    const { onChange, ...p } = props
-    const { shippingMethod, currentShippingMethodId, shipmentId } = useContext(
-      ShippingMethodChildrenContext
-    )
-    const { setShippingMethod } = useContext(ShipmentContext)
-    const shippingMethodId = shippingMethod?.id
-    const name = `shipment-${shipmentId}`
-    const id = `${name}-${shippingMethodId}`
-    const checked = shippingMethodId === currentShippingMethodId
-    const handleOnChange = async () => {
-      if (shipmentId && shippingMethodId)
+const ShippingMethodRadioButton: FunctionComponent<
+  ShippingMethodRadioButtonProps
+> = (props) => {
+  const { onChange, ...p } = props
+  const { shippingMethod, currentShippingMethodId, shipmentId } = useContext(
+    ShippingMethodChildrenContext
+  )
+  const { setShippingMethod } = useContext(ShipmentContext)
+  const shippingMethodId = shippingMethod?.id
+  const name = `shipment-${shipmentId}`
+  const id = `${name}-${shippingMethodId}`
+  const checked = shippingMethodId === currentShippingMethodId
+  const handleOnChange = async () => {
+    if (shipmentId) {
+      if (shippingMethodId)
         await setShippingMethod(shipmentId, shippingMethodId)
-      if (shippingMethod && onChange) onChange(shippingMethod)
-    }
-    const parentProps = {
-      handleOnChange,
-      name,
-      id,
-      ...props,
+      if (shippingMethod && onChange) onChange(shippingMethod, shipmentId)
     }
-    return props.children ? (
-      <Parent {...parentProps}>{props.children}</Parent>
-    ) : (
-      <input
-        type="radio"
-        name={name}
-        id={id}
-        onChange={handleOnChange}
-        defaultChecked={checked}
-        {...p}
-      />
-    )
   }
+  const parentProps = {
+    shippingMethod,
+    shipmentId,
+    handleOnChange,
+    name,
+    id,
+    ...props,
+  }
+  return props.children ? (
+    <Parent {...parentProps}>{props.children}</Parent>
+  ) : (
+    <input
+      type="radio"
+      name={name}
+      id={id}
+      onChange={handleOnChange}
+      defaultChecked={checked}
+      {...p}
+    />
+  )
+}
 
 ShippingMethodRadioButton.propTypes = propTypes
 ShippingMethodRadioButton.displayName = displayName

diff --git a/src/index.ts b/src/index.ts
@@ -88,3 +88,7 @@ export { default as VariantsContainer } from '#components/VariantsContainer'
 export type { CustomerCardsTemplate } from '#components/utils/PaymentCardsTemplate'
 export type { AddressCardsTemplate } from '#components/utils/AddressCardsTemplate'
 export type { AddToCartButtonTemplate } from '#components/AddToCartButton'
+export type {
+  ShippingMethodRadioButtonTemplate,
+  ShippingMethodRadioButtonOnChange,
+} from '#components/ShippingMethodRadioButton'