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

package/src/components/ApplicationForm/ApplicationFormAcquiring.tsx

@@ -1,101 +1,73 @@
 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 { useGetRegions } from '../SafeDepositRental/useGetRegions';
+import { AcquiringFormState } from './AcquiringFormState';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
 import { Footnote } from './Footnote';
 import { renderAcquiringDataOrganization } from './renderAcquiringDataOrganization';
 import { renderAcquiringRegion } from './renderAcquiringRegion';
 import { renderSlideCheckboxes } from './renderSlideCheckboxes';
 import { renderSubmitButton } from './renderSubmitButton';
-import { useForm } from './useForm';
+import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
-export interface AcquiringFormState {
-  acquiringType: string;
-  region: string;
-  fullName: string;
-  inn: string;
-  name: string;
-  phone: string;
-  onlineСheckout: boolean;
-  posTerminal: boolean;
-}
-
-const initialFormState = {
-  acquiringType: 'Торговый эквайринг',
-  region: '',
+const initialFormState: AcquiringFormState = {
+  acquiringType: { key: 'Торговый эквайринг' },
   fullName: '',
   inn: '',
   name: '',
   phone: '',
-  onlineСheckout: false,
+  onlineCheckout: false,
   posTerminal: false,
 };
 
-const errorsInitialState = {
-  acquiringType: '',
-  region: '',
-  fullName: '',
-  inn: '',
-  name: '',
-  phone: '',
-};
+const acquiringValidator = objectValidator({
+  acquiringType: defaultValidator,
+  region: defaultValidator,
+  fullName: defaultValidator,
+  inn: innValidator,
+  name: nameValidator,
+  phone: phoneValidator,
+});
 
 export const ApplicationFormAcquiring = JSX<ApplicationFormsProps>((props) => {
-  const { button, link, handleSubmit } = props;
-
-  const { formState, errors, handleChange, handleChangeErrors, sendForm } =
-    useForm<AcquiringFormState>({
-      initialFormState,
-      errorsInitialState,
-      handleSubmit,
-    });
+  const { button, link, onSubmit } = props;
 
-  const { acquiringType, region, fullName, inn, name, phone, onlineСheckout, posTerminal } =
-    formState;
+  const handleSubmit = useCallback(
+    (formState: AcquiringFormState) => {
+      const { acquiringType, region, fullName, inn, name, phone, onlineCheckout, posTerminal } =
+        formState;
 
-  const regions = useGetRegions();
+      isValidationSuccess(acquiringValidator(formState)) &&
+        onSubmit({
+          typeForm: 'acqr',
+          region: region?.text || '',
+          partnerComments: `Вид эквайринга=${
+            acquiringType?.key || ''
+          }/Онлайн касса=${onlineCheckout}/POS-терминал=${posTerminal}`,
+          fullName,
+          inn,
+          name,
+          phone,
+        });
+    },
+    [onSubmit],
+  );
 
-  const onSubmit = (e: PreventableEvent) => {
-    e.preventDefault();
+  const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
 
-    sendForm({
-      typeForm: 'acqr',
-      region: regions.find((_) => _.code === region)?.name || '',
-      partnerComments: `Вид эквайринга=${acquiringType}/Онлайн касса=${onlineСheckout}/POS-терминал=${posTerminal}`,
-      fullName,
-      inn,
-      name,
-      phone,
-    });
-  };
+  const regions = useGetRegions();
 
   return (
-    <form onSubmit={onSubmit} className="container">
+    <form className="container" onSubmit={formProps.onSubmit}>
       <Heading headingType="h6" title="Вид эквайринга и регион" className="text-center mb-4" />
-      {renderAcquiringRegion({
-        acquiringType,
-        regions,
-        region,
-        handleChange,
-        errors,
-        handleChangeErrors,
-      })}
+      {renderAcquiringRegion({ regions, field })}
       <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
-      {renderAcquiringDataOrganization({
-        fullName,
-        inn,
-        name,
-        phone,
-        handleChange,
-        errors,
-        handleChangeErrors,
-      })}
-      {renderSlideCheckboxes({
-        onlineСheckout,
-        posTerminal,
-        handleChange,
-      })}
+      {renderAcquiringDataOrganization(field)}
+      {renderSlideCheckboxes(field)}
       {renderSubmitButton(button, 'mb-4')}
       <Footnote link={link} />
     </form>

package/src/components/ApplicationForm/ApplicationFormBusinessCard.tsx

@@ -1,74 +1,60 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm';
+import { objectValidator } from '../../validation/objectValidator';
+import { isValidationSuccess } from '../../validation/validator';
 import { useGetRegions } from '../SafeDepositRental/useGetRegions';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
+import { BusinessCardFormState } from './BusinessCardFormState';
 import { Footnote } from './Footnote';
 import { renderBusinessCardDataOrganization } from './renderBusinessCardDataOrganization';
 import { renderRegion } from './renderRegion';
 import { renderSubmitButton } from './renderSubmitButton';
-import { useForm } from './useForm';
+import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
-export interface BusinessCardFormState {
-  region: string;
-  name: string;
-  phone: string;
-  inn: string;
-  mail: string;
-}
-
-const initialFormState = {
-  region: '',
+const initialFormState: BusinessCardFormState = {
   name: '',
   phone: '',
   inn: '',
   mail: '',
 };
 
-export const ApplicationFormBusinessCard = JSX<ApplicationFormsProps>((props) => {
-  const { button, link, handleSubmit } = props;
+const businessCardValidator = objectValidator({
+  region: defaultValidator,
+  name: nameValidator,
+  phone: phoneValidator,
+  inn: innValidator,
+  mail: defaultValidator,
+});
 
-  const { formState, errors, handleChange, handleChangeErrors, sendForm } =
-    useForm<BusinessCardFormState>({
-      initialFormState,
-      errorsInitialState: initialFormState,
-      handleSubmit,
-    });
+export const ApplicationFormBusinessCard = JSX<ApplicationFormsProps>((props) => {
+  const { button, link, onSubmit } = props;
+
+  const handleSubmit = useCallback(
+    (formState: BusinessCardFormState) => {
+      const { region, name, phone, inn, mail } = formState;
+
+      isValidationSuccess(businessCardValidator(formState)) &&
+        onSubmit({
+          typeForm: 'bcrd',
+          region: region?.text || '',
+          name,
+          phone,
+          inn,
+          mail,
+        });
+    },
+    [onSubmit],
+  );
 
-  const { region, name, phone, inn, mail } = formState;
+  const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
 
   const regions = useGetRegions();
 
-  const onSubmit = (e: PreventableEvent) => {
-    e.preventDefault();
-
-    sendForm({
-      typeForm: 'bcrd',
-      region: regions.find((_) => _.code === region)?.name || '',
-      name,
-      phone,
-      inn,
-      mail,
-    });
-  };
-
   return (
-    <form onSubmit={onSubmit} className="container">
-      {renderRegion({
-        regions,
-        region,
-        handleChange,
-        errors,
-        handleChangeErrors,
-      })}
-      {renderBusinessCardDataOrganization({
-        name,
-        phone,
-        inn,
-        mail,
-        handleChange,
-        errors,
-        handleChangeErrors,
-      })}
+    <form className="container" onSubmit={formProps.onSubmit}>
+      {renderRegion({ regions, field })}
+      {renderBusinessCardDataOrganization(field)}
       {renderSubmitButton(button, 'mb-4')}
       <Footnote link={link} />
     </form>

package/src/components/ApplicationForm/ApplicationFormCredit.tsx

@@ -1,31 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useBranches } from '../../hooks/useBranches';
+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 { useGetRegions } from '../SafeDepositRental/useGetRegions';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
+import type { CreditFormState } from './CreditFormState';
 import { MIN_CREDIT_AMOUNT } from './CreditParameters';
 import { Footnote } from './Footnote';
 import { renderCreditDataOrganization } from './renderCreditDataOrganization';
 import { renderCreditParameters } from './renderCreditParameters';
 import { renderRegionDepartment } from './renderRegionDepartment';
 import { renderSubmitButton } from './renderSubmitButton';
-import { useForm } from './useForm';
+import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
-export interface CreditFormState {
-  amount: number;
-  term: number;
-  fullName: string;
-  inn: string;
-  name: string;
-  phone: string;
-  mail: string;
-  region: string;
-  department: string;
-  annualRevenue: string;
-}
-
-const initialFormState = {
+const initialFormState: CreditFormState = {
   amount: MIN_CREDIT_AMOUNT,
   term: 12,
   fullName: '',
@@ -33,81 +24,55 @@ const initialFormState = {
   name: '',
   phone: '',
   mail: '',
-  region: '',
-  department: '',
-  annualRevenue: '',
-};
-
-const errorsInitialState = {
   annualRevenue: '',
-  inn: '',
-  name: '',
-  phone: '',
-  region: '',
-  department: '',
 };
 
-export const ApplicationFormCredit = JSX<ApplicationFormsProps>(
-  ({ button, link, handleSubmit }) => {
-    const regions = useGetRegions();
+const creditValidator = objectValidator({
+  annualRevenue: defaultValidator,
+  inn: innValidator,
+  name: nameValidator,
+  phone: phoneValidator,
+  region: defaultValidator,
+  department: defaultValidator,
+});
 
-    const { formState, errors, handleChange, handleChangeErrors, sendForm } =
-      useForm<CreditFormState>({
-        initialFormState,
-        errorsInitialState,
-        handleSubmit,
-      });
+export const ApplicationFormCredit = JSX<ApplicationFormsProps>(({ button, link, onSubmit }) => {
+  const handleSubmit = useCallback(
+    (formState: CreditFormState) => {
+      const { amount, term, fullName, inn, name, phone, mail, region, department, annualRevenue } =
+        formState;
 
-    const { amount, term, fullName, inn, name, phone, mail, region, department, annualRevenue } =
-      formState;
-
-    const branches = useBranches(region).filter((branch) => branch.address);
-
-    const onSubmit = (e: PreventableEvent) => {
-      e.preventDefault();
-
-      sendForm({
-        typeForm: 'cred',
-        fullName,
-        inn,
-        name,
-        phone,
-        mail,
-        region: regions.find((_) => _.code === region)?.name || '',
-        department: branches.find((_) => _.branchCode === department)?.address || '',
-        partnerComments: `Сумма=${amount}/Срок=${term}/Выручка=${annualRevenue}`,
-      });
-    };
-
-    return (
-      <form onSubmit={onSubmit} className="container">
-        <Heading headingType="h6" title="Параметры кредита" className="text-center mb-4" />
-        {renderCreditParameters({ amount, term, handleChange })}
-        <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
-        {renderCreditDataOrganization({
+      isValidationSuccess(creditValidator(formState)) &&
+        onSubmit({
+          typeForm: 'cred',
           fullName,
           inn,
           name,
           phone,
           mail,
-          annualRevenue,
-          handleChange,
-          errors,
-          handleChangeErrors,
-        })}
-        <Heading headingType="h6" title="Офис банка" className="text-center mb-4" />
-        {renderRegionDepartment({
-          regions,
-          region,
-          branches,
-          department,
-          handleChange,
-          errors,
-          handleChangeErrors,
-        })}
-        {renderSubmitButton(button, 'mb-4')}
-        <Footnote link={link} />
-      </form>
-    );
-  },
-);
+          region: region?.text || '',
+          department: department?.text || '',
+          partnerComments: `Сумма=${amount}/Срок=${term}/Выручка=${annualRevenue}`,
+        });
+    },
+    [onSubmit],
+  );
+
+  const [formState, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
+
+  const regions = useGetRegions();
+  const branches = useBranches(formState.region?.key).filter((branch) => branch?.address);
+
+  return (
+    <form className="container" onSubmit={formProps.onSubmit}>
+      <Heading headingType="h6" title="Параметры кредита" className="text-center mb-4" />
+      {renderCreditParameters(field)}
+      <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
+      {renderCreditDataOrganization(field)}
+      <Heading headingType="h6" title="Офис банка" className="text-center mb-4" />
+      {renderRegionDepartment({ regions, branches, field })}
+      {renderSubmitButton(button, 'mb-4')}
+      <Footnote link={link} />
+    </form>
+  );
+});

package/src/components/ApplicationForm/ApplicationFormDeposit.tsx

@@ -1,60 +1,66 @@
 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 { withValidator } from '../../validation/withValidator';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
+import type { DepositFormState } from './DepositFormState';
 import { Footnote } from './Footnote';
 import { InputControl } from './InputControl';
-import type { DataOrganization } from './models';
+import { PhoneInputControl } from './PhoneInputControl';
 import { renderSubmitButton } from './renderSubmitButton';
-import { useForm } from './useForm';
-import { validate } from './validate';
+import { nameValidator, phoneValidator } from './validators';
 
-export interface DepositFormState {
-  name: string;
-  phone: string;
-}
-
-const initialFormState = {
+const initialFormState: DepositFormState = {
   name: '',
   phone: '',
 };
 
-export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
-  const { button, link, handleSubmit } = props;
+const depositValidator = objectValidator({
+  name: nameValidator,
+  phone: phoneValidator,
+});
 
-  const { formState, errors, handleChange, handleChangeErrors, sendForm } =
-    useForm<DepositFormState>({
-      initialFormState,
-      errorsInitialState: initialFormState,
-      handleSubmit,
-    });
+export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
+  const { button, link, onSubmit } = props;
 
-  const { name, phone } = formState;
+  const handleSubmit = useCallback(
+    (formState: DepositFormState) => {
+      const { name, phone } = formState;
 
-  const onSubmit = (e: PreventableEvent) => {
-    e.preventDefault();
+      isValidationSuccess(depositValidator(formState)) &&
+        onSubmit({
+          typeForm: 'dpst',
+          name,
+          phone,
+        });
+    },
+    [onSubmit],
+  );
 
-    sendForm({
-      typeForm: 'dpst',
-      name,
-      phone,
-    });
-  };
+  const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
 
   return (
-    <form onSubmit={onSubmit} className="container">
+    <form className="container" onSubmit={formProps.onSubmit}>
       <Heading
         headingType="h6"
         title="Оставьте заявку и мы ответим на любые вопросы по депозитам"
         className="text-center mb-4"
       />
-      {renderDataOrganization({
-        name,
-        phone,
-        handleChange,
-        errors,
-        handleChangeErrors,
-      })}
+      <div className="max-w-[560px] m-auto">
+        <InputControl
+          className="shrink-0 text-l w-full mb-3"
+          label="Имя"
+          {...withValidator(field('name'), nameValidator)}
+        />
+        <PhoneInputControl
+          className="shrink-0 text-l w-full mb-3"
+          label="Телефон"
+          {...withValidator(field('phone'), phoneValidator)}
+        />
+      </div>
       <div className="flex justify-between items-center max-w-[560px] m-auto">
         <div className="flex-1">
           <Footnote link={link} />
@@ -64,35 +70,3 @@ export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
     </form>
   );
 });
-
-interface RenderDataOrganizationProps extends DataOrganization<DepositFormState> {
-  name: string;
-  phone: string;
-}
-
-const renderDataOrganization = ({
-  name,
-  phone,
-  handleChange,
-  errors,
-  handleChangeErrors,
-}: RenderDataOrganizationProps) => (
-  <div className="max-w-[560px] m-auto">
-    <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) })}
-    />
-    <InputControl
-      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) })}
-    />
-  </div>
-);