@redneckz/wildless-cms-uni-blocks 0.10.5 → 0.10.7

package/src/components/ApplicationForm/ApplicationFormWed.tsx

@@ -1,26 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
+import { objectValidator } from '../../validation/objectValidator';
+import { isValidationSuccess } from '../../validation/validator';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
 import { Footnote } from './Footnote';
 import { renderContacts } from './renderContacts';
 import { renderQuestionsInterested } from './renderQuestionsInterested';
 import { renderSubmitButton } from './renderSubmitButton';
 import { renderWedDataOrganization } from './renderWedDataOrganization';
-import { useForm } from './useForm';
+import { defaultValidator, nameValidator, phoneValidator } from './validators';
+import type { WedFormState } from './WedFormState';
 
-export interface WedFormState {
-  fullName: string;
-  name: string;
-  phone: string;
-  mail: string;
-  currencyControl: boolean;
-  documentaryOperations: boolean;
-  conversionOperations: boolean;
-  text: string;
-}
-
-const initialFormState = {
+const initialFormState: WedFormState = {
   fullName: '',
   name: '',
   phone: '',
@@ -31,67 +24,50 @@ const initialFormState = {
   text: '',
 };
 
-const errorsInitialState = {
-  fullName: '',
-  name: '',
-  phone: '',
-  mail: '',
-  text: '',
-};
+const webValidator = objectValidator({
+  fullName: defaultValidator,
+  name: nameValidator,
+  phone: phoneValidator,
+  mail: defaultValidator,
+});
 
 export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
-  const { button, link, handleSubmit } = props;
-
-  const { formState, errors, handleChange, handleChangeErrors, sendForm } = useForm<WedFormState>({
-    initialFormState,
-    errorsInitialState,
-    handleSubmit,
-  });
-
-  const {
-    fullName,
-    name,
-    phone,
-    mail,
-    currencyControl,
-    documentaryOperations,
-    conversionOperations,
-    text,
-  } = formState;
-
-  const onSubmit = (e: PreventableEvent) => {
-    e.preventDefault();
+  const { button, link, onSubmit } = props;
 
-    sendForm({
-      typeForm: 'kved',
-      fullName,
-      name,
-      phone,
-      mail,
-      partnerComments: `Валютный контроль=${currencyControl}/Документарные операции=${documentaryOperations}/Конверсионные операции=${conversionOperations}/Доп инф=${text}`,
-    });
-  };
-
-  return (
-    <form onSubmit={onSubmit} className="container">
-      <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
-      {renderWedDataOrganization({
+  const handleSubmit = useCallback(
+    (formState: WedFormState) => {
+      const {
         fullName,
         name,
         phone,
         mail,
-        handleChange,
-        errors,
-        handleChangeErrors,
-      })}
-      <Heading headingType="h6" title="Интересующий вопрос" className="text-center mb-4" />
-      {renderQuestionsInterested({
         currencyControl,
         documentaryOperations,
         conversionOperations,
         text,
-        handleChange,
-      })}
+      } = formState;
+
+      isValidationSuccess(webValidator(formState)) &&
+        onSubmit({
+          typeForm: 'kved',
+          fullName,
+          name,
+          phone,
+          mail,
+          partnerComments: `Валютный контроль=${currencyControl}/Документарные операции=${documentaryOperations}/Конверсионные операции=${conversionOperations}/Доп инф=${text}`,
+        });
+    },
+    [onSubmit],
+  );
+
+  const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
+
+  return (
+    <form className="container" onSubmit={formProps.onSubmit}>
+      <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
+      {renderWedDataOrganization(field)}
+      <Heading headingType="h6" title="Интересующий вопрос" className="text-center mb-4" />
+      {renderQuestionsInterested(field)}
       <div className="flex items-center pb-9 mb-9 border-b border-main-divider">
         {renderSubmitButton(button, 'mr-5')}
         <Footnote link={link} />

package/src/components/ApplicationForm/ApplicationFormsProps.ts

@@ -1,8 +1,8 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { SubmitButtonProps } from './ApplicationFormContent';
 
-export interface ApplicationFormsProps {
+export interface ApplicationFormsProps<S extends Record<string, any> = Record<string, any>> {
   button?: SubmitButtonProps;
   link?: LinkProps;
-  handleSubmit: (data: Record<string, string>) => Promise<string>;
+  onSubmit: (data: S) => void;
 }

package/src/components/ApplicationForm/BusinessCardFormState.ts

@@ -0,0 +1,9 @@
+import type { Option } from '../../ui-kit/Select/Select';
+
+export interface BusinessCardFormState {
+  region?: Option;
+  name: string;
+  phone: string;
+  inn: string;
+  mail: string;
+}

package/src/components/ApplicationForm/CreditFormState.ts

@@ -0,0 +1,14 @@
+import type { Option } from '../../ui-kit/Select/Select';
+
+export interface CreditFormState {
+  amount: number;
+  term: number;
+  fullName: string;
+  inn: string;
+  name: string;
+  phone: string;
+  mail: string;
+  region?: Option;
+  department?: Option;
+  annualRevenue: string;
+}

package/src/components/ApplicationForm/CreditParameters.ts

@@ -1,7 +1,7 @@
-export const MIN_CREDIT_AMOUNT = 50000;
-export const MAX_CREDIT_AMOUNT = 3000000;
-export const ITEMS_CREDIT_AMOUNT = ['От 50 000 ₽', 'До 3 000 000 ₽'];
+export const MIN_CREDIT_AMOUNT = 1000;
+export const MAX_CREDIT_AMOUNT = 1000000000;
+export const ITEMS_CREDIT_AMOUNT = ['От 1 000 ₽', 'До 1 000 000 000 ₽'];
 
 export const MIN_CREDIT_TERM = 1;
-export const MAX_CREDIT_TERM = 60;
-export const ITEMS_CREDIT_TERM = ['От 1 года', 'До 5 лет'];
+export const MAX_CREDIT_TERM = 180;
+export const ITEMS_CREDIT_TERM = ['От 1 мес', 'До 15 лет'];

package/src/components/ApplicationForm/DepositFormState.ts

@@ -0,0 +1,4 @@
+export interface DepositFormState {
+  name: string;
+  phone: string;
+}

package/src/components/ApplicationForm/InputControl.tsx

@@ -2,34 +2,34 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Input } from '../../ui-kit/Input/Input';
 import { Text } from '../../ui-kit/Text/Text';
 
-interface InputControlProps {
+export interface InputControlProps {
   className: string;
   label: string;
-  value: string;
+  value?: string;
   error?: string;
-  onChange: (value: string) => void;
-  onBlur?: (value: string) => void;
+  onChange?: (value: string) => void;
+  onBlur?: () => void;
 }
 
 export const InputControl = JSX<InputControlProps>(
-  ({ className, label, value, error, onChange, onBlur }) => {
-    return (
-      <div className={className}>
-        <Input
-          type="text"
-          aria-label={label}
-          label={label}
-          valid={Boolean(!error)}
-          value={value}
-          onChange={onChange}
-          onBlur={onBlur}
-        />
-        <div className="h-2">
+  ({ className, label, value = '', error, onChange, onBlur }) => (
+    <div className={className}>
+      <Input
+        type="text"
+        aria-label={label}
+        label={label}
+        valid={Boolean(!error)}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+      />
+      <div className="h-2">
+        {error ? (
           <Text size="text-xs-light" color="text-error">
-            {error ? error : null}
+            {error}
           </Text>
-        </div>
+        ) : null}
       </div>
-    );
-  },
+    </div>
+  ),
 );

package/src/components/ApplicationForm/PhoneInputControl.tsx

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { PhoneInput } from '../../ui-kit/PhoneInput/PhoneInput';
+import { Text } from '../../ui-kit/Text/Text';
+import type { InputControlProps } from './InputControl';
+
+export const PhoneInputControl = JSX<InputControlProps>(
+  ({ className, label, value, error, onChange, onBlur }) => (
+    <div className={className}>
+      <PhoneInput
+        aria-label={label}
+        label={label}
+        valid={Boolean(!error)}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+      />
+      <div className="h-2">
+        {error ? (
+          <Text size="text-xs-light" color="text-error">
+            {error}
+          </Text>
+        ) : null}
+      </div>
+    </div>
+  ),
+);

package/src/components/ApplicationForm/ResponseNotification.tsx

@@ -4,16 +4,16 @@ import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
 
 interface ResponseNotificationProps {
-  responceType?: 'OK' | 'Fail';
+  responseType?: 'OK' | 'Fail';
 }
 
-export const ResponseNotification = JSX<ResponseNotificationProps>(({ responceType }) => {
-  const responceOK = responceType === 'OK';
-  const backgroundColor = responceOK ? 'bg-responce-ok' : 'bg-responce-fail';
+export const ResponseNotification = JSX<ResponseNotificationProps>(({ responseType }) => {
+  const responseOK = responseType === 'OK';
+  const backgroundColor = responseOK ? 'bg-responce-ok' : 'bg-responce-fail';
 
   return (
     <div className={`flex items-center mt-5 p-5 rounded-md ${backgroundColor}`}>
-      {responceOK ? (
+      {responseOK ? (
         <Img image={{ icon: 'ResponceOKIcon' }} width="42" height="42" className="mr-4" />
       ) : (
         <Img image={{ icon: 'ResponceFailIcon' }} width="37" height="34" className="mr-4" />
@@ -21,11 +21,11 @@ export const ResponseNotification = JSX<ResponseNotificationProps>(({ responceTy
       <div>
         <Heading
           headingType="h6"
-          title={responceOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку'}
+          title={responseOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку'}
           className="mb-1"
         />
         <Text size="text-l-light" color="text-secondary-text">
-          {responceOK ? 'Совсем скоро мы с вами свяжемся' : 'Пожалуйста, повторите позднее'}
+          {responseOK ? 'Совсем скоро мы с вами свяжемся' : 'Пожалуйста, повторите позднее'}
         </Text>
       </div>
     </div>

package/src/components/ApplicationForm/SelectControl.tsx

@@ -1,54 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { OptionProps, Select } from '../../ui-kit/Select/Select';
+import { Select, SelectProps } from '../../ui-kit/Select/Select';
 import { Text } from '../../ui-kit/Text/Text';
-import type { Currency } from '../ExchangeRateTile/CurrencyProps';
 
-interface SelectControlProps {
-  data: Record<string, any>[];
-  fieldLabel: string;
-  fieldValue?: string;
-  selected: string;
-  setSelected: (value: string) => void;
-  label: string;
-  placeholder?: string;
+interface SelectControlProps extends SelectProps {
   error?: string;
-  onValidate?: (value: string) => void;
 }
 
-export const SelectControl = JSX<SelectControlProps>(
-  ({
-    data,
-    fieldLabel,
-    fieldValue,
-    selected,
-    placeholder = '',
-    setSelected,
-    label,
-    error,
-    onValidate,
-  }) => {
-    const dataFormat: OptionProps[] = data
-      .filter(Boolean)
-      .map((_) => ({ key: _?.[fieldValue || fieldLabel], text: _?.[fieldLabel] }));
-    const selectedObj = dataFormat.find((_) => _.key === selected);
-
-    return (
-      <div>
-        <Select
-          options={dataFormat}
-          label={label}
-          valid={Boolean(!error)}
-          placeholder={placeholder || selected}
-          onChange={(_) => setSelected(_.key as Currency)}
-          value={selectedObj}
-          onValidate={onValidate}
-        />
-        <div className="h-2">
-          <Text size="text-xs-light" color="text-error">
-            {error ? error : null}
-          </Text>
-        </div>
-      </div>
-    );
-  },
-);
+export const SelectControl = JSX<SelectControlProps>((props) => (
+  <div>
+    <Select {...props} valid={!props.error} />
+    <div className="h-2">
+      {props.error ? (
+        <Text size="text-xs-light" color="text-error">
+          {props.error}
+        </Text>
+      ) : null}
+    </div>
+  </div>
+));

package/src/components/ApplicationForm/WedFormState.ts

@@ -0,0 +1,10 @@
+export interface WedFormState {
+  fullName: string;
+  name: string;
+  phone: string;
+  mail: string;
+  currencyControl: boolean;
+  documentaryOperations: boolean;
+  conversionOperations: boolean;
+  text: string;
+}

package/src/components/ApplicationForm/models.ts

@@ -3,11 +3,3 @@ export interface Select {
   code?: string;
   name?: string;
 }
-
-export type HandleFormStateChange<T> = (state: Partial<T>) => void;
-
-export interface DataOrganization<T> {
-  handleChange: HandleFormStateChange<T>;
-  errors: Record<string, string>;
-  handleChangeErrors: (state: any) => void;
-}

package/src/components/ApplicationForm/renderAcquiringDataOrganization.tsx

@@ -1,59 +1,34 @@
-import { AcquiringFormState } from './ApplicationFormAcquiring';
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
+import { AcquiringFormState } from './AcquiringFormState';
 import { InputControl } from './InputControl';
-import type { DataOrganization } from './models';
-import { validate } from './validate';
+import { PhoneInputControl } from './PhoneInputControl';
+import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
-interface RenderAcquiringDataOrganizationProps extends DataOrganization<AcquiringFormState> {
-  fullName: string;
-  inn: string;
-  name: string;
-  phone: string;
-}
-
-export const renderAcquiringDataOrganization = ({
-  fullName,
-  inn,
-  name,
-  phone,
-  handleChange,
-  errors,
-  handleChangeErrors,
-}: RenderAcquiringDataOrganizationProps) => (
+export const renderAcquiringDataOrganization = (field: FormFieldRegisterer<AcquiringFormState>) => (
   <div className="flex justify-between gap-5 mb-5">
     <div className="w-1/2">
       <InputControl
         className="shrink-0 text-l w-full mb-3"
         label="Наименование организации"
-        error={errors['fullName']}
-        value={fullName}
-        onChange={(value) => handleChange({ fullName: value })}
-        onBlur={(value) => handleChangeErrors({ fullName: validate('fullName', value) })}
+        {...withValidator(field('fullName'), defaultValidator)}
       />
       <InputControl
         className="shrink-0 text-l w-full mb-3"
         label="Контактное лицо"
-        error={errors['name']}
-        value={name}
-        onChange={(value) => handleChange({ name: value })}
-        onBlur={(value) => handleChangeErrors({ name: validate('name', value) })}
+        {...withValidator(field('name'), nameValidator)}
       />
     </div>
     <div className="w-1/2">
       <InputControl
         className="shrink-0 text-l w-full mb-3"
         label="ИНН"
-        error={errors['inn']}
-        value={inn}
-        onChange={(value) => handleChange({ inn: value })}
-        onBlur={(value) => handleChangeErrors({ inn: validate('inn', value) })}
+        {...withValidator(field('inn'), innValidator)}
       />
-      <InputControl
+      <PhoneInputControl
         className="shrink-0 text-l w-full mb-3"
         label="Телефон"
-        error={errors['phone']}
-        value={phone}
-        onChange={(value) => handleChange({ phone: value })}
-        onBlur={(value) => handleChangeErrors({ phone: validate('phone', value) })}
+        {...withValidator(field('phone'), phoneValidator)}
       />
     </div>
   </div>

package/src/components/ApplicationForm/renderAcquiringRegion.tsx

@@ -1,53 +1,32 @@
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
+import type { AcquiringFormState } from './AcquiringFormState';
 import { ACQUIRING_TYPES } from './acquiringTypes';
-import type { AcquiringFormState } from './ApplicationFormAcquiring';
-import type { HandleFormStateChange, Select } from './models';
+import type { Select } from './models';
 import { SelectControl } from './SelectControl';
-import { validate } from './validate';
+import { defaultValidator } from './validators';
 
-interface RenderAcquiringRegionProps {
-  acquiringType: string;
+interface AcquiringRegionProps {
   regions: Select[];
-  region: string;
-  handleChange: HandleFormStateChange<AcquiringFormState>;
-  errors: Record<string, string>;
-  handleChangeErrors: (state: any) => void;
+  field: FormFieldRegisterer<AcquiringFormState>;
 }
 
-export const renderAcquiringRegion = ({
-  acquiringType,
-  regions,
-  region,
-  handleChange,
-  errors,
-  handleChangeErrors,
-}: RenderAcquiringRegionProps) => (
+export const renderAcquiringRegion = ({ regions, field }: AcquiringRegionProps) => (
   <div className="flex justify-between gap-5 mb-7">
     <div className="w-1/2">
       <SelectControl
-        data={ACQUIRING_TYPES}
-        fieldValue="name"
-        fieldLabel="name"
-        error={errors['acquiringType']}
-        selected={acquiringType}
-        setSelected={(value) => handleChange({ acquiringType: value })}
-        onValidate={(value) =>
-          handleChangeErrors({ acquiringType: validate('acquiringType', value) })
-        }
         label="Вид эквайринга"
         placeholder="Выберите эквайринг"
+        options={ACQUIRING_TYPES.map(({ name: key = '' }) => ({ key, text: key }))}
+        {...withValidator(field('acquiringType'), defaultValidator)}
       />
     </div>
     <div className="w-1/2">
       <SelectControl
-        data={regions}
-        fieldValue="code"
-        fieldLabel="name"
-        error={errors['region']}
-        selected={region}
-        setSelected={(value) => handleChange({ region: value })}
-        onValidate={(value) => handleChangeErrors({ region: validate('region', value) })}
         label="Адрес"
         placeholder="Выберите адрес"
+        options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
+        {...withValidator(field('region'), defaultValidator)}
       />
     </div>
   </div>

package/src/components/ApplicationForm/renderBusinessCardDataOrganization.tsx

@@ -1,59 +1,36 @@
-import type { BusinessCardFormState } from './ApplicationFormBusinessCard';
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
+import type { BusinessCardFormState } from './BusinessCardFormState';
 import { InputControl } from './InputControl';
-import type { DataOrganization } from './models';
-import { validate } from './validate';
+import { PhoneInputControl } from './PhoneInputControl';
+import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
-interface RenderBusinessCardDataOrganizationProps extends DataOrganization<BusinessCardFormState> {
-  name: string;
-  phone: string;
-  mail: string;
-  inn: string;
-}
-
-export const renderBusinessCardDataOrganization = ({
-  name,
-  phone,
-  mail,
-  inn,
-  handleChange,
-  errors,
-  handleChangeErrors,
-}: RenderBusinessCardDataOrganizationProps) => (
+export const renderBusinessCardDataOrganization = (
+  field: FormFieldRegisterer<BusinessCardFormState>,
+) => (
   <div className="flex justify-between gap-5">
     <div className="w-1/2">
       <InputControl
         className="shrink-0 text-l w-full mb-3"
         label="Контактное лицо"
-        error={errors['name']}
-        value={name}
-        onChange={(value) => handleChange({ name: value })}
-        onBlur={(value) => handleChangeErrors({ name: validate('name', value) })}
+        {...withValidator(field('name'), nameValidator)}
       />
       <InputControl
         className="shrink-0 text-l w-full mb-3"
         label="ИНН"
-        error={errors['inn']}
-        value={inn}
-        onChange={(value) => handleChange({ inn: value })}
-        onBlur={(value) => handleChangeErrors({ inn: validate('inn', value) })}
+        {...withValidator(field('inn'), innValidator)}
       />
     </div>
     <div className="w-1/2">
-      <InputControl
+      <PhoneInputControl
         className="shrink-0 text-l w-full mb-3"
         label="Телефон"
-        error={errors['phone']}
-        value={phone}
-        onChange={(value) => handleChange({ phone: value })}
-        onBlur={(value) => handleChangeErrors({ phone: validate('phone', value) })}
+        {...withValidator(field('phone'), phoneValidator)}
       />
       <InputControl
         className="shrink-0 text-l w-full mb-3"
         label="Электронная почта"
-        error={errors['mail']}
-        value={mail}
-        onChange={(value) => handleChange({ mail: value })}
-        onBlur={(value) => handleChangeErrors({ mail: validate('mail', value) })}
+        {...withValidator(field('mail'), defaultValidator)}
       />
     </div>
   </div>