@redneckz/wildless-cms-uni-blocks 0.10.4 → 0.10.6

package/mobile/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/mobile/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>
-);

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/components/ApplicationForm/DepositFormState.ts

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

package/mobile/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/mobile/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/mobile/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>