Skip to content

Commit

Permalink
fix: interfaces
Browse files Browse the repository at this point in the history
  • Loading branch information
absolemDev committed Nov 22, 2023
1 parent c9b1626 commit bf5c3ac
Show file tree
Hide file tree
Showing 8 changed files with 83 additions and 116 deletions.
26 changes: 11 additions & 15 deletions packages/payment-widget/src/hooks/use-fields-render.hook.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,11 @@ import { Layout } from '@atls-ui-parts/layout'
import React from 'react'
import { useIntl } from 'react-intl'

import { CustomInputProps } from '../interfaces'
import { Field } from '../interfaces'
import { HandleBlurField } from '../interfaces'
import { FieldState } from '../interfaces'
import { HandleChangeField } from '../interfaces'
import { FieldsErrors } from '../interfaces'
import { CustomInput } from '../interfaces'
import { MemoizedInput } from '../ui'
import { translate } from '../utils/translate.util'

Expand All @@ -20,29 +18,27 @@ export const useFieldsRenderer = (
fieldsState: FieldState,
handleChange: HandleChangeField,
handleBlur: HandleBlurField,
inputGaps: number,
customInput?: CustomInput
inputGaps: number
) => {
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
const inputProps: CustomInputProps = {
type: field.type ?? 'text',
name: field.name,
placeholder: translatePlaceholder,
required: field.required ?? false,
value: fieldsState[field.name],
errorText: translateError,
onChangeNative: handleChange,
onBlur: handleBlur,
}

return (
<React.Fragment key={field.name}>
{customInput ? customInput(inputProps) : <MemoizedInput {...inputProps} />}
<MemoizedInput
type={field.type ?? 'text'}
name={field.name}
placeholder={translatePlaceholder}
required={field.required ?? false}
value={fieldsState[field.name]}
errorText={translateError}
onChangeNative={handleChange}
onBlur={handleBlur}
/>
<Condition match={isNotLastField}>
<Layout flexBasis={inputGaps} flexShrink={0} />
</Condition>
Expand Down

This file was deleted.

2 changes: 0 additions & 2 deletions packages/payment-widget/src/interfaces/fields.interfaces.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { HTMLInputTypeAttribute } from 'react'

import { AdditionalFieldsType } from '../enums'
import { RequiredFieldsType } from '../enums'
import { CustomInput } from './custom-elements.interfaces'
import { DirectionFields } from './styles.interfaces'

export type FieldsNames = RequiredFieldsType | AdditionalFieldsType
Expand Down Expand Up @@ -39,5 +38,4 @@ export interface FieldsProps {
inputGaps?: number
isGenerateReceipt?: boolean
additionalFields?: AdditionalField[]
customInput?: CustomInput
}
22 changes: 11 additions & 11 deletions packages/payment-widget/src/interfaces/index.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
export * from "./widget.interfaces";
export * from "./fields.interfaces";
export * from "./settings.interfaces";
export * from "./receipt.interfaces";
export * from "./styles.interfaces";
export * from "./theme.interfaces";
export * from "./button.interfaces";
export * from "./input.interfaces";
export * from "./theme.interfaces";
export * from "./form.interfaces";
export * from "./wrappers.interfaces";
export * from './widget.interfaces'
export * from './fields.interfaces'
export * from './settings.interfaces'
export * from './receipt.interfaces'
export * from './styles.interfaces'
export * from './theme.interfaces'
export * from './button.interfaces'
export * from './input.interfaces'
export * from './theme.interfaces'
export * from './form.interfaces'
export * from './wrappers.interfaces'
22 changes: 11 additions & 11 deletions packages/payment-widget/src/interfaces/widget.interfaces.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React from "react";
import React from 'react'

import { AdditionalField } from "./fields.interfaces";
import { ReceiptSettings } from "./receipt.interfaces";
import { Settings } from "./settings.interfaces";
import { Styles } from "./styles.interfaces";
import { AdditionalField } from './fields.interfaces'
import { ReceiptSettings } from './receipt.interfaces'
import { Settings } from './settings.interfaces'
import { Styles } from './styles.interfaces'

export interface WidgetProps {
settings: Settings;
amount?: number;
receipt?: ReceiptSettings;
styles?: Styles;
additionalFields?: AdditionalField[];
children: React.ReactNode;
settings: Settings
amount?: number
receipt?: ReceiptSettings
styles?: Styles
additionalFields?: AdditionalField[]
children: React.ReactNode
}
4 changes: 1 addition & 3 deletions packages/payment-widget/src/ui/fields.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ export const Fields = ({
isGenerateReceipt = false,
direction = DirectionFields.Column,
inputGaps = 16,
customInput,
}: FieldsProps) => {
const processedFields = isGenerateReceipt
? addReceiptFieldsUtil(additionalFields)
Expand All @@ -37,8 +36,7 @@ export const Fields = ({
fieldsState as FieldState,
handleChange,
handleBlur,
inputGaps,
customInput
inputGaps
)
const Direction = direction === DirectionFields.Column ? Column : Row

Expand Down
64 changes: 28 additions & 36 deletions packages/payment-widget/src/ui/form.component.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import React from "react";
import { FC } from "react";
import { FormEventHandler } from "react";
import { FormattedMessage } from "react-intl";
import { useMemo } from "react";
import { createContext } from "react";
import React from 'react'
import { FC } from 'react'
import { FormEventHandler } from 'react'
import { FormattedMessage } from 'react-intl'
import { useMemo } from 'react'
import { createContext } from 'react'

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 { useValidate } from "../hooks";
import { makePayment } from "../utils";
import { makePaymentWithCheck } from "../utils";
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 { useValidate } from '../hooks'
import { makePayment } from '../utils'
import { makePaymentWithCheck } from '../utils'

export const FormContext = createContext<any>(null);
export const FormContext = createContext<any>(null)

export const Form: FC<FormProps> = ({
settings,
Expand All @@ -26,25 +26,21 @@ export const Form: FC<FormProps> = ({
isGenerateReceipt,
children,
}) => {
const isLoaded = useInit();
const { errors, validateField, isValidate } = useValidate();
const isLoaded = useInit()
const { errors, validateField, isValidate } = useValidate()
const payHandler: FormEventHandler<HTMLFormElement> = (event) => {
event.preventDefault();
if (!isValidate) return;
event.preventDefault()
if (!isValidate) return

if (receipt) {
makePaymentWithCheck(event, receipt);
makePaymentWithCheck(event, receipt)
} else {
makePayment(event);
makePayment(event)
}
};
const buttonProps: CustomButtonProps = {
type: "submit",
disabled: !isLoaded || !!disabled,
};
}

return (
<form name="payform-tinkoff" onSubmit={payHandler}>
<form name='payform-tinkoff' onSubmit={payHandler}>
<Settings {...settings} isGenerateReceipt={isGenerateReceipt} />
<Fields
errors={errors}
Expand All @@ -54,21 +50,17 @@ export const Form: FC<FormProps> = ({
additionalFields={additionalFields}
direction={styles?.direction}
inputGaps={styles?.inputGaps}
customInput={customElements?.input}
/>
<FormContext.Provider
value={useMemo(
() => ({ errors, validateField }),
[errors, validateField]
)}
value={useMemo(() => ({ errors, validateField }), [errors, validateField])}
>
{children}
</FormContext.Provider>
{!useCustomButton && (
<Button type="submit" disabled={!isLoaded} {...styles?.button}>
<FormattedMessage id="payment_widget.pay" defaultMessage="Оплатить" />
<Button type='submit' disabled={!isLoaded} {...styles?.button}>
<FormattedMessage id='payment_widget.pay' defaultMessage='Оплатить' />
</Button>
)}
</form>
);
};
)
}
47 changes: 21 additions & 26 deletions packages/payment-widget/src/ui/widget.component.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +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 { Children } from 'react'
import { FC } from 'react'
import { IntlProvider } from 'react-intl'
import { isValidElement } from 'react'

import { LanguagesType } from "../enums";
import { WidgetProps } from "../interfaces";
import { Form } from "./form.component";
import { ThemeProvider } from "./theme/src";
import { LanguagesType } from '../enums'
import { WidgetProps } from '../interfaces'
import { Form } from './form.component'
import { ThemeProvider } from './theme/src'

const messages = {
[LanguagesType.RUSSIAN]: messagesRu,
[LanguagesType.ENGLISH]: messagesEn,
};
}

export const Widget: FC<WidgetProps> = ({
amount,
Expand All @@ -25,23 +25,18 @@ export const Widget: FC<WidgetProps> = ({
styles,
children,
}) => {
const locale = settings.language ?? LanguagesType.RUSSIAN;
const childrenArray = Children.toArray(children);
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
);
? 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
);
? child.type.name === 'ButtonWrapper' && typeof child.props.children === 'function'
: false)
// @ts-ignore
const isGenerateReceipt =
!!receipt && !customFields.find((field) => field.props.name === "email");
const isGenerateReceipt = !!receipt && !customFields.find((field) => field.props.name === 'email')

return (
<ThemeProvider useCustomTheme={!!customFields.length}>
Expand All @@ -64,5 +59,5 @@ export const Widget: FC<WidgetProps> = ({
</Form>
</IntlProvider>
</ThemeProvider>
);
};
)
}

0 comments on commit bf5c3ac

Please sign in to comment.