From f8d6d3c7882675cc1b410d3823ff68437103d219 Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Mon, 27 Nov 2023 20:07:25 +0400 Subject: [PATCH] feat: add use-custom-element hook, extend form context, edit interfaces --- packages/payment-widget/src/hooks/index.ts | 1 + .../src/hooks/use-custom-elements.hook.ts | 77 +++++++++++++++++ .../src/hooks/use-fields-render.hook.tsx | 52 +++++++----- .../src/hooks/use-fields-state.hook.ts | 13 +-- .../interfaces/custom-elements.iterfaces.ts | 13 +++ .../src/interfaces/fields.interfaces.ts | 7 +- .../src/interfaces/form.interfaces.ts | 16 +++- .../payment-widget/src/interfaces/index.ts | 2 +- .../src/interfaces/theme.interfaces.ts | 1 - .../src/interfaces/widget.interfaces.ts | 2 +- .../src/interfaces/wrappers.interfaces.ts | 12 +-- .../src/ui/fields.component.tsx | 45 +++++----- .../src/ui/form/form.component.tsx | 17 ++-- .../src/ui/form/form.provider.tsx | 67 +++++++++++++-- .../src/ui/theme/src/theme.provider.tsx | 9 +- .../src/ui/widget.component.tsx | 84 +++++++++---------- .../ui/wrapper/button-wrapper.component.tsx | 12 +-- .../ui/wrapper/input-wrapper.component.tsx | 6 +- .../src/utils/add-receipt-fields.util.ts | 4 +- 19 files changed, 282 insertions(+), 158 deletions(-) create mode 100644 packages/payment-widget/src/hooks/use-custom-elements.hook.ts create mode 100644 packages/payment-widget/src/interfaces/custom-elements.iterfaces.ts diff --git a/packages/payment-widget/src/hooks/index.ts b/packages/payment-widget/src/hooks/index.ts index 8ef3085..dae3d4f 100644 --- a/packages/payment-widget/src/hooks/index.ts +++ b/packages/payment-widget/src/hooks/index.ts @@ -2,3 +2,4 @@ export * from './use-init.hook' export { useValidate } from './use-validate.hook' export { useFieldsState } from './use-fields-state.hook' export { useFieldsRenderer } from './use-fields-render.hook' +export { useCustomElements } from './use-custom-elements.hook' diff --git a/packages/payment-widget/src/hooks/use-custom-elements.hook.ts b/packages/payment-widget/src/hooks/use-custom-elements.hook.ts new file mode 100644 index 0000000..fcf07ed --- /dev/null +++ b/packages/payment-widget/src/hooks/use-custom-elements.hook.ts @@ -0,0 +1,77 @@ +import { Children } from 'react' +import { ReactNode } from 'react' +import { JSXElementConstructor } from 'react' +import { isValidElement } from 'react' + +import { AdditionalFieldsType } from '../enums' +import { RequiredFieldsType } from '../enums' +import { CustomElements } from '../interfaces' +import { Field } from '../interfaces' + +export const useCustomElements = ( + existAmount: boolean, + existReceipt: boolean, + existAdditionalFields: boolean, + nodes: ReactNode +): CustomElements => { + const nodeArray = Children.toArray(nodes) + + const isCastomElement = (nameNode: string, node: ReactNode): boolean => + isValidElement(node) + ? (node.type as JSXElementConstructor).name === nameNode && + typeof node.props.children === 'function' + : false + const isAdditionalField = (node: ReactNode): boolean => + isValidElement(node) ? Object.values(AdditionalFieldsType).includes(node.props.name) : false + const isRequiredField = (node: ReactNode): boolean => + isValidElement(node) ? node.props.name === RequiredFieldsType.Amount && !existAmount : false + + const customFields = nodeArray.filter( + (node) => + isCastomElement('InputWrapper', node) && (isAdditionalField(node) || isRequiredField(node)) + ) + const nameFields = customFields.reduce((acc, field) => { + if (isValidElement(field)) + acc.push({ + name: AdditionalFieldsType[field.props.name] || RequiredFieldsType[field.props.name], + }) + return acc + }, []) + + const customButton = nodeArray.find((node) => isCastomElement('ButtonWrapper', node)) + + const isGenerateReceiptField = existReceipt && !customFields.length + + const isGenerateRequiredField = !existAmount && existAdditionalFields + + const existCustomAmountField = customFields.some( + (field) => isValidElement(field) && field.props.name === RequiredFieldsType.Amount + ) + const existCustomReceiptField = customFields.some( + (field) => + isValidElement(field) && + (field.props.name === AdditionalFieldsType.Email || + field.props.name === AdditionalFieldsType.Phone) + ) + + if (existAdditionalFields && customFields.length) + throw new Error('Don`t use additionalFields property with InputWrapper component') + + if (customFields.length && !existAmount && !existCustomAmountField) + throw new Error( + 'If you use InputWrapper component and don`t set amount property, you mast use InputWrapper componnet with property name equal RequiredFieldsType.Amount' + ) + + if (customFields.length && existReceipt && !existCustomReceiptField) + throw new Error( + 'If you set receipt property whith InputWrapper component, you mast use InputWrapper componnet with property name equal AdditionalFieldsType.Phone or AdditionalFieldsType.Email' + ) + + return { + customFields, + customButton, + isGenerateReceiptField, + isGenerateRequiredField, + nameFields, + } +} diff --git a/packages/payment-widget/src/hooks/use-fields-render.hook.tsx b/packages/payment-widget/src/hooks/use-fields-render.hook.tsx index 2412f07..4516c92 100644 --- a/packages/payment-widget/src/hooks/use-fields-render.hook.tsx +++ b/packages/payment-widget/src/hooks/use-fields-render.hook.tsx @@ -5,15 +5,17 @@ import React from 'react' import { useIntl } from 'react-intl' import { Field } from '../interfaces' +import { NameField } from '../interfaces' import { HandleBlurField } from '../interfaces' import { FieldState } from '../interfaces' import { HandleChangeField } from '../interfaces' import { FieldsErrors } from '../interfaces' import { MemoizedInput } from '../ui' +import { ThemeProvider } from '../ui/theme/src' import { translate } from '../utils/translate.util' export const useFieldsRenderer = ( - fields: Field[], + fields: Field[] | NameField[], errors: FieldsErrors, fieldsState: FieldState, handleChange: HandleChangeField, @@ -22,27 +24,31 @@ export const useFieldsRenderer = ( ) => { const intl = useIntl() - return fields.map((field, index, currentFields) => { - const translatePlaceholder = translate(intl, field.placeholder, field.placeholder) - const translateError = translate(intl, errors[field.name], errors[field.name]) - const isNotLastField = index !== currentFields.length - 1 + return ( + + {fields.map((field, index, currentFields) => { + const translatePlaceholder = translate(intl, field.placeholder, field.placeholder) + const translateError = translate(intl, errors[field.name], errors[field.name]) + const isNotLastField = index !== currentFields.length - 1 - return ( - - - - - - - ) - }) + return ( + + + + + + + ) + })} + + ) } diff --git a/packages/payment-widget/src/hooks/use-fields-state.hook.ts b/packages/payment-widget/src/hooks/use-fields-state.hook.ts index 16ee872..2e84b36 100644 --- a/packages/payment-widget/src/hooks/use-fields-state.hook.ts +++ b/packages/payment-widget/src/hooks/use-fields-state.hook.ts @@ -10,20 +10,15 @@ import { HandleChangeField } from '../interfaces' import { FieldsNames } from '../interfaces' import { ValidateField } from '../interfaces' -export const useFieldsState = (validateField: ValidateField, fields?: Field[]): FieldsState => { - const initialState = fields - ? fields.reduce((acc, field) => ({ ...acc, [field.name]: '' }), {}) - : '' - const [fieldsState, setFieldsState] = useState( - initialState as FieldState | string - ) +export const useFieldsState = (validateField: ValidateField, fields: Field[]): FieldsState => { + const initialState = fields.reduce((acc, field) => ({ ...acc, [field.name]: '' }), {}) + const [fieldsState, setFieldsState] = useState(initialState as FieldState) const handleChange: HandleChangeField = useCallback( (e: FormEvent) => { const name = e.currentTarget.name as FieldsNames const { value } = e.currentTarget - setFieldsState((prevFields) => - typeof prevFields === 'object' ? { ...prevFields, [name]: value } : value) + setFieldsState((prevFields) => ({ ...prevFields, [name]: value })) }, [setFieldsState] ) diff --git a/packages/payment-widget/src/interfaces/custom-elements.iterfaces.ts b/packages/payment-widget/src/interfaces/custom-elements.iterfaces.ts new file mode 100644 index 0000000..2430dd6 --- /dev/null +++ b/packages/payment-widget/src/interfaces/custom-elements.iterfaces.ts @@ -0,0 +1,13 @@ +import { ReactNode } from 'react' + +import { Field } from './fields.interfaces' + +export type NameField = Pick + +export interface CustomElements { + customFields: ReactNode[] + customButton: ReactNode + isGenerateReceiptField: boolean + isGenerateRequiredField: boolean + nameFields: Field[] +} diff --git a/packages/payment-widget/src/interfaces/fields.interfaces.ts b/packages/payment-widget/src/interfaces/fields.interfaces.ts index 532ea6e..e00a08d 100644 --- a/packages/payment-widget/src/interfaces/fields.interfaces.ts +++ b/packages/payment-widget/src/interfaces/fields.interfaces.ts @@ -13,7 +13,7 @@ export type HandleBlurField = (e: FormEvent) => void export interface Field { name: FieldsNames - placeholder: string + placeholder?: string required?: boolean type?: HTMLInputTypeAttribute } @@ -34,8 +34,7 @@ export interface FieldsProps { amount?: number direction?: DirectionFields inputGaps?: number - isGenerateReceipt?: boolean - additionalFields?: AdditionalField[] + useCustomFields: boolean } export interface FieldsValidator { @@ -45,7 +44,7 @@ export interface FieldsValidator { } export interface FieldsState { - fieldsState: FieldState | string + fieldsState: FieldState handleChange: HandleChangeField handleBlur: HandleBlurField } diff --git a/packages/payment-widget/src/interfaces/form.interfaces.ts b/packages/payment-widget/src/interfaces/form.interfaces.ts index 6ee4546..811794f 100644 --- a/packages/payment-widget/src/interfaces/form.interfaces.ts +++ b/packages/payment-widget/src/interfaces/form.interfaces.ts @@ -1,19 +1,27 @@ import { ReactNode } from 'react' +import { NameField } from './custom-elements.iterfaces' +import { Field } from './fields.interfaces' +import { FieldsState } from './fields.interfaces' import { FieldsValidator } from './fields.interfaces' import { WidgetProps } from './widget.interfaces' export interface FormProps extends WidgetProps { + useCustomFields: boolean useCustomButton: boolean - isGenerateReceipt: boolean - children: ReactNode | ReactNode[] } export interface FormProviderProps { + additionalFields?: Field[] + nameFields: Field[] + isGenerateReceipt: boolean + isGenerateRequiredField: boolean disabled: boolean - children: ReactNode | ReactNode[] + children: ReactNode } -export interface FormContext extends FieldsValidator { +export interface FormContext extends FieldsValidator, FieldsState { + fields: Field[] | NameField[] disabled: boolean + isLoaded: boolean } diff --git a/packages/payment-widget/src/interfaces/index.ts b/packages/payment-widget/src/interfaces/index.ts index 01e66e7..36138b5 100644 --- a/packages/payment-widget/src/interfaces/index.ts +++ b/packages/payment-widget/src/interfaces/index.ts @@ -4,6 +4,6 @@ export * from './settings.interfaces' export * from './receipt.interfaces' export * from './styles.interfaces' export * from './theme.interfaces' -export * from './theme.interfaces' export * from './form.interfaces' export * from './wrappers.interfaces' +export * from './custom-elements.iterfaces' diff --git a/packages/payment-widget/src/interfaces/theme.interfaces.ts b/packages/payment-widget/src/interfaces/theme.interfaces.ts index 6f8c03d..057e8b2 100644 --- a/packages/payment-widget/src/interfaces/theme.interfaces.ts +++ b/packages/payment-widget/src/interfaces/theme.interfaces.ts @@ -1,6 +1,5 @@ import { ReactNode } from 'react' export interface ThemeProps { - useCustomTheme: boolean children: ReactNode } diff --git a/packages/payment-widget/src/interfaces/widget.interfaces.ts b/packages/payment-widget/src/interfaces/widget.interfaces.ts index a437234..a077abe 100644 --- a/packages/payment-widget/src/interfaces/widget.interfaces.ts +++ b/packages/payment-widget/src/interfaces/widget.interfaces.ts @@ -12,5 +12,5 @@ export interface WidgetProps { styles?: Styles additionalFields?: AdditionalField[] disabled?: boolean - children: ReactNode + children?: ReactNode } diff --git a/packages/payment-widget/src/interfaces/wrappers.interfaces.ts b/packages/payment-widget/src/interfaces/wrappers.interfaces.ts index 199d34e..4f73550 100644 --- a/packages/payment-widget/src/interfaces/wrappers.interfaces.ts +++ b/packages/payment-widget/src/interfaces/wrappers.interfaces.ts @@ -1,8 +1,10 @@ -import { ReactElement } from 'react' +import { ReactElement } from 'react' -import { ButtonType } from '../enums' -import { HandleBlurField } from './fields.interfaces' -import { HandleChangeField } from './fields.interfaces' +import { AdditionalFieldsType } from '../enums' +import { ButtonType } from '../enums' +import { RequiredFieldsType } from '../enums' +import { HandleBlurField } from './fields.interfaces' +import { HandleChangeField } from './fields.interfaces' interface ChildrenInputProps { name: string @@ -18,7 +20,7 @@ interface ChildrenButtonProps { } export interface InputWrapperProps { - name: string + name: AdditionalFieldsType | RequiredFieldsType children: (props: ChildrenInputProps) => ReactElement } diff --git a/packages/payment-widget/src/ui/fields.component.tsx b/packages/payment-widget/src/ui/fields.component.tsx index f222762..db2d20f 100644 --- a/packages/payment-widget/src/ui/fields.component.tsx +++ b/packages/payment-widget/src/ui/fields.component.tsx @@ -1,39 +1,32 @@ -import { Condition } from '@atls-ui-parts/condition' -import { HiddenInput } from '@atls-ui-parts/hidden-input' -import { Box } from '@atls-ui-parts/layout' -import { Column } from '@atls-ui-parts/layout' -import { Layout } from '@atls-ui-parts/layout' -import { Row } from '@atls-ui-parts/layout' +import { Condition } from '@atls-ui-parts/condition' +import { HiddenInput } from '@atls-ui-parts/hidden-input' +import { Box } from '@atls-ui-parts/layout' +import { Column } from '@atls-ui-parts/layout' +import { Layout } from '@atls-ui-parts/layout' +import { Row } from '@atls-ui-parts/layout' -import React from 'react' +import React from 'react' -import { RequiredFieldsType } from '../enums' -import { FieldState } from '../interfaces' -import { FieldsProps } from '../interfaces' -import { DirectionFields } from '../interfaces' -import { requiredFields } from '../data' -import { useFieldsState } from '../hooks' -import { useFieldsRenderer } from '../hooks' -import { addReceiptFieldsUtil } from '../utils' -import { useForm } from './form' +import { RequiredFieldsType } from '../enums' +import { FieldsProps } from '../interfaces' +import { DirectionFields } from '../interfaces' +import { useFieldsRenderer } from '../hooks' +import { useForm } from './form' export const Fields = ({ amount, - additionalFields = [], - isGenerateReceipt = false, direction = DirectionFields.Column, inputGaps = 16, + useCustomFields, }: FieldsProps) => { - const { errors, validateField } = useForm() - const processedFields = isGenerateReceipt - ? addReceiptFieldsUtil(additionalFields) - : additionalFields - const fields = !amount ? [...requiredFields, ...processedFields] : [...processedFields] - const { fieldsState, handleChange, handleBlur } = useFieldsState(validateField, fields) + const { fields, fieldsState, handleChange, handleBlur, errors } = useForm() + + const fieldsForRender = useCustomFields ? [] : fields + const renderedFields = useFieldsRenderer( - fields, + fieldsForRender, errors, - fieldsState as FieldState, + fieldsState, handleChange, handleBlur, inputGaps diff --git a/packages/payment-widget/src/ui/form/form.component.tsx b/packages/payment-widget/src/ui/form/form.component.tsx index f562a07..e8d25e8 100644 --- a/packages/payment-widget/src/ui/form/form.component.tsx +++ b/packages/payment-widget/src/ui/form/form.component.tsx @@ -1,5 +1,4 @@ import React from 'react' -import { FC } from 'react' import { FormEventHandler } from 'react' import { FormattedMessage } from 'react-intl' @@ -7,23 +6,20 @@ import { FormProps } from '../../interfaces' import { Button } from '../button/button.component' import { Fields } from '../fields.component' import { Settings } from '../settings.component' -import { useInit } from '../../hooks' import { makePayment } from '../../utils' import { makePaymentWithCheck } from '../../utils' import { useForm } from './use-form.hook' -export const Form: FC = ({ +export const Form = ({ settings, amount, receipt, styles, - additionalFields, useCustomButton, - isGenerateReceipt, + useCustomFields, children, -}) => { - const isLoaded = useInit() - const { isValidate, disabled } = useForm() +}: FormProps) => { + const { isValidate, disabled, isLoaded } = useForm() const payHandler: FormEventHandler = (event) => { event.preventDefault() if (!isValidate) return @@ -37,13 +33,12 @@ export const Form: FC = ({ return (
- + {children} {!useCustomButton && ( diff --git a/packages/payment-widget/src/ui/form/form.provider.tsx b/packages/payment-widget/src/ui/form/form.provider.tsx index 7ec66c0..baa9aef 100644 --- a/packages/payment-widget/src/ui/form/form.provider.tsx +++ b/packages/payment-widget/src/ui/form/form.provider.tsx @@ -1,16 +1,65 @@ -import React from 'react' -import { FC } from 'react' -import { useMemo } from 'react' +import React from 'react' +import { FC } from 'react' +import { useMemo } from 'react' -import { FormProviderProps } from '../../interfaces' -import { Provider } from './form.context' -import { useValidate } from '../../hooks' +import { AdditionalField } from '../../interfaces' +import { FormProviderProps } from '../../interfaces' +import { Provider } from './form.context' +import { requiredFields } from '../../data' +import { useFieldsState } from '../../hooks' +import { useInit } from '../../hooks' +import { useValidate } from '../../hooks' +import { addReceiptFieldsUtil } from '../../utils' -export const FormProvider: FC = ({ disabled, children }) => { +export const FormProvider: FC = ({ + additionalFields, + nameFields, + isGenerateReceipt, + isGenerateRequiredField, + disabled, + children, +}) => { const { errors, validateField, isValidate } = useValidate() + + const processedFields = + additionalFields && isGenerateReceipt + ? addReceiptFieldsUtil(additionalFields as AdditionalField[]) + : nameFields + const fields = useMemo( + () => + additionalFields && isGenerateRequiredField + ? [...requiredFields, ...processedFields] + : [...processedFields], + [additionalFields, isGenerateRequiredField, processedFields] + ) + + const { fieldsState, handleChange, handleBlur } = useFieldsState(validateField, fields) + + const isLoaded = useInit() + const value = useMemo( - () => ({ errors, validateField, isValidate, disabled }), - [errors, validateField, isValidate, disabled] + () => ({ + fields, + fieldsState, + handleChange, + handleBlur, + errors, + validateField, + isValidate, + disabled, + isLoaded, + }), + [ + fields, + fieldsState, + handleChange, + handleBlur, + errors, + validateField, + isValidate, + disabled, + isLoaded, + ] ) return {children} diff --git a/packages/payment-widget/src/ui/theme/src/theme.provider.tsx b/packages/payment-widget/src/ui/theme/src/theme.provider.tsx index 5196fd7..8d7e06b 100644 --- a/packages/payment-widget/src/ui/theme/src/theme.provider.tsx +++ b/packages/payment-widget/src/ui/theme/src/theme.provider.tsx @@ -7,9 +7,6 @@ import { FC } from 'react' import { ThemeProps } from '../../../interfaces' -export const ThemeProvider: FC = ({ useCustomTheme, children }) => - useCustomTheme ? ( - <>{children} // eslint-disable-line - ) : ( - {children} - ) +export const ThemeProvider: FC = ({ children }) => ( + {children} +) diff --git a/packages/payment-widget/src/ui/widget.component.tsx b/packages/payment-widget/src/ui/widget.component.tsx index 40bf6b6..f77333a 100644 --- a/packages/payment-widget/src/ui/widget.component.tsx +++ b/packages/payment-widget/src/ui/widget.component.tsx @@ -1,24 +1,21 @@ -import * as messagesRu from '../locales/ru.json' -import * as messagesEn from '../locales/en.json' +import * as messagesRu from '../locales/ru.json' +import * as messagesEn from '../locales/en.json' -import React from 'react' -import { Children } from 'react' -import { FC } from 'react' -import { IntlProvider } from 'react-intl' -import { isValidElement } from 'react' +import React from 'react' +import { IntlProvider } from 'react-intl' -import { LanguagesType } from '../enums' -import { WidgetProps } from '../interfaces' -import { Form } from './form' -import { FormProvider } from './form/form.provider' -import { ThemeProvider } from './theme/src' +import { LanguagesType } from '../enums' +import { WidgetProps } from '../interfaces' +import { Form } from './form' +import { FormProvider } from './form/form.provider' +import { useCustomElements } from '../hooks' const messages = { [LanguagesType.RUSSIAN]: messagesRu, [LanguagesType.ENGLISH]: messagesEn, } -export const Widget: FC = ({ +export const Widget = ({ amount, settings, receipt, @@ -26,42 +23,37 @@ export const Widget: FC = ({ styles, disabled, children, -}) => { +}: WidgetProps) => { const locale = settings.language ?? LanguagesType.RUSSIAN - const childrenArray = Children.toArray(children) - const customFields = childrenArray.filter((child) => - isValidElement(child) // @ts-ignore - ? child.type.name === 'InputWrapper' && typeof child.props.children === 'function' - : false) - const customButton = childrenArray.find((child) => - isValidElement(child) // @ts-ignore - ? child.type.name === 'ButtonWrapper' && typeof child.props.children === 'function' - : false) - // @ts-ignore - const isGenerateReceipt = !!receipt && !customFields.find((field) => field.props.name === 'email') + const { + customFields, + customButton, + isGenerateReceiptField, + isGenerateRequiredField, + nameFields, + } = useCustomElements(!!amount, !!receipt, !!additionalFields?.length, children) return ( - - + - - - {customFields} - {customButton} - - - - +
+ {customFields} + {customButton} +
+ + ) } diff --git a/packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx b/packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx index 361b7f1..b803c6a 100644 --- a/packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx +++ b/packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx @@ -1,13 +1,15 @@ -import { FC } from 'react' - import { ButtonType } from '../../enums' import { ButtonWrapperProps } from '../../interfaces' import { useForm } from '../form' -export const ButtonWrapper: FC = ({ children }) => { - const { disabled } = useForm() +export const ButtonWrapper = ({ children }: ButtonWrapperProps) => { + const { disabled, isLoaded } = useForm() + if (typeof children === 'function') { - return children({ type: ButtonType.Submit, disabled }) + return children({ + type: ButtonType.Submit, + disabled: disabled || !isLoaded, + }) } return null diff --git a/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx b/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx index 83e0532..4c42fd5 100644 --- a/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx +++ b/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx @@ -2,20 +2,18 @@ import { FC } from 'react' import { useIntl } from 'react-intl' import { InputWrapperProps } from '../../interfaces' -import { useFieldsState } from '../../hooks' import { translate } from '../../utils/translate.util' import { useForm } from '../form' export const InputWrapper: FC = ({ name, children }) => { - const { errors, validateField } = useForm() - const { fieldsState, handleChange, handleBlur } = useFieldsState(validateField) + const { fieldsState, handleChange, handleBlur, errors } = useForm() const intl = useIntl() const translateError = translate(intl, errors[name], errors[name]) if (typeof children === 'function') { return children({ name, - value: fieldsState as string, + value: fieldsState[name], onChangeNative: handleChange, onBlur: handleBlur, errorText: translateError, diff --git a/packages/payment-widget/src/utils/add-receipt-fields.util.ts b/packages/payment-widget/src/utils/add-receipt-fields.util.ts index 8862826..dec2d61 100644 --- a/packages/payment-widget/src/utils/add-receipt-fields.util.ts +++ b/packages/payment-widget/src/utils/add-receipt-fields.util.ts @@ -8,7 +8,5 @@ export const addReceiptFieldsUtil = (additionalFields: AdditionalField[]) => { field.name === AdditionalFieldsType.Email || field.name === AdditionalFieldsType.Phone ) - if (missingReceiptFields) return [...receiptFields, ...additionalFields] - - return additionalFields + return missingReceiptFields ? [...receiptFields, ...additionalFields] : additionalFields }