Getting a this error <html>TS2345: Argument of type '({ createReturnPackage, handleSubmit, onComplete, isOwnShippingMethod }: Props) => JSX.Element' is not assignable to parameter of type 'ComponentType<InjectedFormProps<{}, {}, string>>'.<br/>Type '({ createReturnPackage, handleSubmit, onComplete, isOwnShippingMethod }: Props) => JSX.Element' is not assignable to type 'FunctionComponent<InjectedFormProps<{}, {}, string>>'.<br/>Types of parameters '__0' and 'props' are incompatible.<br/>Type 'InjectedFormProps<{}, {}, string> & { children?: ReactNode; }' is missing the following properties from type 'Props': createReturnPackage, onComplete, isOwnShippingMethod
here is my following code, its a functional stateless typescript react component that uses redux-forms, and im getting an assignment error, it still runs and works as intended but would pass my buildci. Any help with understanding the error to help the code pass my continuous integration would be appreciated. I removed imports that showed unnecessary info:
// @flow
import React, { useEffect, useMemo } from 'react'
import { useDispatch, useSelector, connect } from 'react-redux'
import { reduxForm, Field, formValueSelector } from 'redux-form'
export const RETURN_SHIPPING_FORM = 'return-shipping-form'
type CurrentAddressProps = {
currentAddress: ReturnAddress
showReturnAddress: () => void
}
function CurrentAddressSection({ currentAddress, showReturnAddress }: CurrentAddressProps) {
return (
<>
<Subtitle className={styles.addressHeading}>{__('AGENCY RETURN ADDRESS')}</Subtitle>
{currentAddress && (
<>
<Body2>{`${currentAddress.firstName} ${currentAddress.lastName}`}</Body2>
<Body2>{currentAddress.phone}</Body2>
<Body2>{currentAddress.street1}</Body2>
<Body2>{currentAddress.street2}</Body2>
<Body2>{`${currentAddress.city}, ${currentAddress.state} ${currentAddress.zip}`}</Body2>
</>
)}
<div className={styles.input}>
<LinkButton onClick={() => showReturnAddress()} data-testid="changeAddress">
{__('Change Address')}
</LinkButton>
</div>
</>
)
}
function WarningMessage() {
return (
<Body2 className={styles.warningMessage}>
{__(
'Before we can process your RMA ticket please provide a valid return address. Click "Add Address" above to get started.'
)}
</Body2>
)
}
function OwnShippingMethod({ shippingProvider }: { shippingProvider: string }) {
return (
<>
<Subtitle className={styles.addressHeading}>{__('ALTERNATIVE SHIPPING METHODS')}</Subtitle>
<Body2 className={styles.descriptionText}>
{__(
'Axon uses $[shippingProvider] for return shipping services. If you want to use your own shipping method, select the option below. You will still be able to print packing slips to place inside the return shipping boxes.',
{ shippingProvider: shippingProvider }
)}
</Body2>
<div className={styles.input}>
<Field
component={CheckboxForm}
type="checkbox"
label={__('I will use my own shipping method')}
name="ownShippingMethod"
/>
</div>
</>
)
}
type Props = {
createReturnPackage: () => void
handleSubmit: (createReturnPackage: () => void) => void
onComplete: () => void
isOwnShippingMethod: boolean
}
const Shipping = ({ createReturnPackage, handleSubmit, onComplete, isOwnShippingMethod }: Props) => {
const dispatch = useDispatch()
const returnItems = useSelector<AppState, Array<ReturnItem>>(getReturnItems)
const returnTypeSelectedValue = useSelector<AppState, string>(getReturnTypeSelectedValue)
const currentAddress = useSelector<AppState, ReturnAddress>(getCurrentAddress)
const showShippingMethod = useSelector<AppState, boolean>(getCountryShippingMethodConfig)
const isSubmitSuccessSelector = useSelector<AppState, boolean>(isSubmitSuccess)
const isSubmittingSelector = useSelector<AppState, boolean>(isSubmitting)
const addressList = useSelector<AppState, Array<object>>(getAddressList)
const dimensionMeasureUnit = useSelector<AppState, string>(getDimensionMeasureUnitConfig)
const weightMeasureUnit = useSelector<AppState, string>(getWeightMeasureUnitConfig)
const shippingProvider = useSelector<AppState, string>(getShippingProviderConfig)
const hasTaser10 = useSelector<AppState, Function>(isFeatureEnabled)(FeatureFlagName.Taser10)
useEffect(() => {
dispatch(listAddresses())
}, [dispatch])
const getErrorStatus = useMemo(() => {
const errorCount = {}
returnItems.forEach(item => {
const errorStatus = item.deviceMeta.errorStatus
errorCount[getErrorStatusText(errorStatus)] = (errorCount[getErrorStatusText(errorStatus)] || 0) + 1
})
const errorCountDisplay: Array<Array<string>> = Object.entries(errorCount)
return (
<>
{errorCountDisplay.map(error => (
<Stack key={error[0]} direction="row" justifyContent="space-between">
<Body2>{error[0]}</Body2>
<Body2>{error[1]}</Body2>
</Stack>
))}
</>
)
}, [returnItems])
const getModel = useMemo(() => {
const deviceListGroupByName = getDeviceNumberGroupByName(returnItems)
return (
<>
{map(deviceListGroupByName, item => (
<Stack direction="row" justifyContent="space-between">
<Body2>{getModelInfo(item[0].deviceModel).title}</Body2>
<Body2>{item.length}</Body2>
</Stack>
))}
</>
)
}, [returnItems, returnTypeSelectedValue])
const hasCurrentAddress = currentAddress === null
return (
<DocumentTitle title={__('Shipping')}>
<div>
<Headline className={styles.title}>{__('Shipping')}</Headline>
<Body2 className={styles.descriptionText}>
{__('Your return is almost ready to go.')}
<br />
{showShippingMethod
? __(
'Confirm your return address and enter your package dimensions to print out pre-paid $[shippingProvider] shipping labels on your local printer. ',
{ shippingProvider: shippingProvider }
)
: __('Please confirm your return address. ')}
</Body2>
<Grid columnGap={'none'}>
{hasTaser10 && (
<Grid.Item columnSpan={3} columnStart={1} rowStart={1}>
<Card width={1}>
<Card.Header title={__('Devices Added')} />
<Card.Body>
<Stack space="m">
<Label>{__('MODEL')}</Label>
{getModel}
</Stack>
</Card.Body>
<Divider variant={Divider.variants.subtle} />
<Card.Body>
<Stack space="m">
<Label>{__('ERROR STATUS')}</Label>
{getErrorStatus}
</Stack>
</Card.Body>
</Card>
</Grid.Item>
)}
<Grid.Item columnSpan={9} columnStart={hasTaser10 ? 5 : 1} rowStart={1}>
<div>
{addressList.length > 0 ? (
<CurrentAddressSection
currentAddress={currentAddress}
showReturnAddress={() => dispatch(showReturnAddress())}
/>
) : (
<div className={styles.input}>
<LinkButton onClick={dispatch(createReturnAddress)} data-testid="addAddress">
{__('Add Address')}
</LinkButton>
</div>
)}
<hr className={styles.divider} />
<form>
{showShippingMethod && (
<>
{!isOwnShippingMethod && (
<>
<ShippingDimensionBoxes
dimensionMeasureUnit={dimensionMeasureUnit}
weightMeasureUnit={weightMeasureUnit}
/>
<hr className={styles.divider} />
</>
)}
<OwnShippingMethod shippingProvider={shippingProvider} />
</>
)}
<BottomControlBar
renderComponent={addressList.length == 0 ? <WarningMessage /> : null}
labelButton={__('Submit Return')}
disabled={hasCurrentAddress || isSubmittingSelector}
onClick={handleSubmit(createReturnPackage)}
/>
</form>
{isSubmitSuccessSelector && onComplete()}
</div>
</Grid.Item>
</Grid>
</div>
</DocumentTitle>
)
}
const mapStateToProps = state => {
const showShippingMethod = getCountryShippingMethodConfig(state)
return {
isOwnShippingMethod: formValueSelector(RETURN_SHIPPING_FORM)(state, 'ownShippingMethod'),
initialValues: {
dimensionBoxes: [{}],
ownShippingMethod: !showShippingMethod,
},
}
}
export default connect(mapStateToProps, { createReturnPackage })(
reduxForm({
form: RETURN_SHIPPING_FORM,
})(Shipping)
)
