feat: Add handleCallback prop to VariantSelector

commercelayer · Nov 24, 2021 · 8824427 · 8824427
1 parent 2ae74a7
commit 8824427
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 16 deletions.
diff --git a/src/components/AddToCartButton.tsx b/src/components/AddToCartButton.tsx
@@ -14,7 +14,7 @@ import { FunctionChildren } from '#typings/index'
 import { AddToCartReturn } from '#reducers/OrderReducer'
 import SkuListsContext from '#context/SkuListsContext'
 import ExternalFunctionContext from '#context/ExternalFunctionContext'
-import { VariantOptions } from '#components/VariantSelector'
+import { VariantOption } from '#components/VariantSelector'
 import isFunction from 'lodash/isFunction'
 
 const propTypes = components.AddToCartButton.propTypes
@@ -36,7 +36,7 @@ type AddToCartButtonProps = {
   bundleCode?: string
   disabled?: boolean
   skuListId?: string
-  lineItem?: VariantOptions['lineItem']
+  lineItem?: VariantOption['lineItem']
 } & PropsWithoutRef<JSX.IntrinsicElements['button']>
 
 const AddToCartButton: FunctionComponent<AddToCartButtonProps> = (props) => {

diff --git a/src/components/VariantSelector.tsx b/src/components/VariantSelector.tsx
@@ -6,7 +6,7 @@ import React, {
   ReactElement,
   ReactNode,
 } from 'react'
-import VariantTemplate from './utils/VariantTemplate'
+import VariantTemplate, { VariantHandleCallback } from './utils/VariantTemplate'
 import Parent from './utils/Parent'
 import VariantsContext from '#context/VariantsContext'
 import components from '#config/components'
@@ -18,7 +18,7 @@ const propTypes = components.VariantSelector.propTypes
 const defaultProps = components.VariantSelector.defaultProps
 const displayName = components.VariantSelector.displayName
 
-export interface VariantOptions {
+export interface VariantOption {
   label: string
   code: string
   lineItem?: {
@@ -37,11 +37,12 @@ type VariantSelectorChildrenProps = FunctionChildren<
 
 type VariantSelectorProps = {
   children?: VariantSelectorChildrenProps
-  options: VariantOptions[]
+  options: VariantOption[]
   type?: BaseSelectorType
   loader?: ReactNode
   placeholder?: string
   skuCode?: string
+  handleCallback?: VariantHandleCallback
 } & JSX.IntrinsicElements['input'] &
   JSX.IntrinsicElements['select']
 

diff --git a/src/components/utils/VariantTemplate.tsx b/src/components/utils/VariantTemplate.tsx
@@ -4,7 +4,7 @@ import { keys } from 'lodash'
 import PropTypes from 'prop-types'
 import { BaseSelectorType } from '#typings'
 import { VariantsObject, SetSkuCode } from '#reducers/VariantReducer'
-import { VariantOptions } from '#components/VariantSelector'
+import { VariantOption } from '#components/VariantSelector'
 
 export const propTypes = {
   variants: PropTypes.any.isRequired,
@@ -27,14 +27,17 @@ export const propTypes = {
   skuCode: PropTypes.string,
 }
 
+export type VariantHandleCallback = (variant: VariantOption) => void
+
 export type VariantTemplateProps = {
   variants: VariantsObject | Record<string, any>
   handleChange?: SetSkuCode
-  options: VariantOptions[]
+  options: VariantOption[]
   type?: BaseSelectorType
   loader?: ReactNode
   placeholder?: string
   skuCode?: string
+  handleCallback?: VariantHandleCallback
 } & JSX.IntrinsicElements['input'] &
   JSX.IntrinsicElements['select']
 
@@ -47,17 +50,20 @@ const VariantTemplate: FunctionComponent<VariantTemplateProps> = (props) => {
     options,
     skuCode,
     handleChange,
+    handleCallback,
     ...prs
   } = props
   const vars = keys(variants).map((v, k) => {
     const checked = skuCode === v
+    const label = options.length > 0 ? options[k].label : variants[v].name
     return type === 'select' ? (
       <option
         key={variants[v].id}
         data-sku-id={variants[v].id}
+        data-label={label}
         value={variants[v].code}
       >
-        {options.length > 0 ? options[k].label : variants[v].name}
+        {label}
       </option>
     ) : (
       <Fragment key={variants[v].id}>
@@ -66,24 +72,29 @@ const VariantTemplate: FunctionComponent<VariantTemplateProps> = (props) => {
           defaultChecked={checked}
           type="radio"
           value={variants[v].code}
-          onChange={(e): void =>
-            handleChange && handleChange(e.target.value, variants[v].id)
-          }
+          onChange={(e): void => {
+            const code = e.target.value
+            handleChange && handleChange(code, variants[v].id)
+            handleCallback && handleCallback({ code, label })
+          }}
           {...prs}
         />
-        {options.length > 0 ? options[k].label : variants[v].name}
+        {label}
       </Fragment>
     )
   })
   if (type === 'select') {
     return (
       <select
         id={id}
+        title="Variant selector"
         onChange={(e): void => {
           const v = e.target.value
           const i = e.target.selectedIndex
           const id = e.target[i].dataset.skuId as string
+          const label = e.target[i].dataset.label as string
           handleChange && handleChange(v, id)
+          handleCallback && handleCallback({ code: v, label })
         }}
         value={skuCode || ''}
         {...prs}

diff --git a/src/reducers/VariantReducer.ts b/src/reducers/VariantReducer.ts
@@ -1,5 +1,5 @@
 import { Sku } from '@commercelayer/sdk'
-import { VariantOptions } from '#components/VariantSelector'
+import { VariantOption } from '#components/VariantSelector'
 import { Dispatch } from 'react'
 import baseReducer from '#utils/baseReducer'
 import getSkus from '#utils/getSkus'
@@ -23,7 +23,7 @@ export interface SetSkuCodeVariant {
 }
 
 type SetVariantSkuCodesParams = {
-  skuCodes: VariantOptions[]
+  skuCodes: VariantOption[]
   dispatch: Dispatch<VariantAction>
   setCustomLineItems?: SetCustomLineItems
 }
@@ -53,7 +53,7 @@ export interface VariantPayload {
   currentQuantity?: number
   currentPrices?: Sku[]
   setSkuCode?: SetSkuCode
-  setSkuCodes?: (skuCodes: VariantOptions[]) => void
+  setSkuCodes?: (skuCodes: VariantOption[]) => void
 }
 
 export interface VariantState extends VariantPayload {
@@ -139,7 +139,7 @@ export const getVariants: GetVariants = (params) => {
       },
     })
     .then((skus) => {
-      const skusObj = getSkus(skus)
+      const skusObj = getSkus(skus, state.skuCodes)
       if (skuCode) {
         setSkuCode({
           code: skusObj[skuCode].code,