@redneckz/wildless-cms-uni-blocks 0.9.15 → 0.10.0

package/mobile/src/components/ApplicationForm/ApplicationFormDeposit.tsx

@@ -1,42 +1,44 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Input } from '../../ui-kit/Input/Input';
 import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
 import { Footnote } from './Footnote';
-import type { HandleFormStateChange } from './models';
+import { InputControl } from './InputControl';
+import type { DataOrganization } from './models';
 import { renderSubmitButton } from './renderSubmitButton';
-import { useFormHandlers } from './useFormHandlers';
+import { useForm } from './useForm';
+import { validate } from './validate';
 
 export interface DepositFormState {
   name: string;
   phone: string;
 }
 
+const initialFormState = {
+  name: '',
+  phone: '',
+};
+
 export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
   const { button, link, handleSubmit } = props;
 
-  const [formState, setFormState] = useState<DepositFormState>({
-    name: '',
-    phone: '',
-  });
+  const { formState, errors, handleChange, handleChangeErrors, sendForm } =
+    useForm<DepositFormState>({
+      initialFormState,
+      errorsInitialState: initialFormState,
+      handleSubmit,
+    });
 
   const { name, phone } = formState;
 
-  const { handleChange } = useFormHandlers<DepositFormState>({
-    setFormState,
-  });
-
-  const onSubmit = async (e: PreventableEvent) => {
+  const onSubmit = (e: PreventableEvent) => {
     e.preventDefault();
 
-    handleSubmit &&
-      (await handleSubmit({
-        typeForm: 'dpst',
-        name,
-        phone,
-      }));
+    sendForm({
+      typeForm: 'dpst',
+      name,
+      phone,
+    });
   };
 
   return (
@@ -46,7 +48,13 @@ export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
         title="Оставьте заявку и мы ответим на любые вопросы по депозитам"
         className="text-center mb-4"
       />
-      {renderDataOrganization({ name: formState.name, phone: formState.phone, handleChange })}
+      {renderDataOrganization({
+        name,
+        phone,
+        handleChange,
+        errors,
+        handleChangeErrors,
+      })}
       <div className="flex justify-between items-center max-w-[560px] m-auto">
         <div className="flex-1">
           <Footnote link={link} />
@@ -57,29 +65,34 @@ export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
   );
 });
 
-interface RenderDataOrganizationProps {
+interface RenderDataOrganizationProps extends DataOrganization<DepositFormState> {
   name: string;
   phone: string;
-  handleChange: HandleFormStateChange<DepositFormState>;
 }
 
-const renderDataOrganization = ({ name, phone, handleChange }: RenderDataOrganizationProps) => (
+const renderDataOrganization = ({
+  name,
+  phone,
+  handleChange,
+  errors,
+  handleChangeErrors,
+}: RenderDataOrganizationProps) => (
   <div className="max-w-[560px] m-auto">
-    <Input
-      className="shrink-0 text-l w-full mb-5"
-      type="text"
-      aria-label="Имя"
+    <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) })}
     />
-    <Input
-      className="shrink-0 text-l w-full mb-5"
-      type="text"
-      aria-label="Телефон"
+    <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,15 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Input } from '../../ui-kit/Input/Input';
 import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
 import { Footnote } from './Footnote';
-import type { HandleFormStateChange } from './models';
 import { renderContacts } from './renderContacts';
 import { renderQuestionsInterested } from './renderQuestionsInterested';
 import { renderSubmitButton } from './renderSubmitButton';
-import { useFormHandlers } from './useFormHandlers';
+import { renderWedDataOrganization } from './renderWedDataOrganization';
+import { useForm } from './useForm';
 
 export interface WedFormState {
   fullName: string;
@@ -22,18 +20,32 @@ export interface WedFormState {
   text: string;
 }
 
+const initialFormState = {
+  fullName: '',
+  name: '',
+  phone: '',
+  mail: '',
+  currencyControl: false,
+  documentaryOperations: false,
+  conversionOperations: false,
+  text: '',
+};
+
+const errorsInitialState = {
+  fullName: '',
+  name: '',
+  phone: '',
+  mail: '',
+  text: '',
+};
+
 export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
   const { button, link, handleSubmit } = props;
 
-  const [formState, setFormState] = useState<WedFormState>({
-    fullName: '',
-    name: '',
-    phone: '',
-    mail: '',
-    currencyControl: false,
-    documentaryOperations: false,
-    conversionOperations: false,
-    text: '',
+  const { formState, errors, handleChange, handleChangeErrors, sendForm } = useForm<WedFormState>({
+    initialFormState,
+    errorsInitialState,
+    handleSubmit,
   });
 
   const {
@@ -47,30 +59,31 @@ export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
     text,
   } = formState;
 
-  const { handleChange } = useFormHandlers<WedFormState>({
-    setFormState,
-  });
-
-  const onSubmit = async (e: PreventableEvent) => {
+  const onSubmit = (e: PreventableEvent) => {
     e.preventDefault();
 
-    const partnerComments = `Валютный контроль=${currencyControl}/Документарные операции=${documentaryOperations}/Конверсионные операции=${conversionOperations}/Доп инф=${text}`;
-
-    handleSubmit &&
-      (await handleSubmit({
-        typeForm: 'kved',
-        fullName,
-        name,
-        phone,
-        mail,
-        partnerComments,
-      }));
+    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" />
-      {renderDataOrganization({ fullName, name, phone, mail, handleChange })}
+      {renderWedDataOrganization({
+        fullName,
+        name,
+        phone,
+        mail,
+        handleChange,
+        errors,
+        handleChangeErrors,
+      })}
       <Heading headingType="h6" title="Интересующий вопрос" className="text-center mb-4" />
       {renderQuestionsInterested({
         currencyControl,
@@ -92,66 +105,3 @@ export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
     </form>
   );
 });
-
-interface RenderDataOrganizationProps {
-  fullName: string;
-  name: string;
-  phone: string;
-  mail: string;
-  handleChange: HandleFormStateChange<WedFormState>;
-}
-
-const renderDataOrganization = ({
-  fullName,
-  name,
-  phone,
-  mail,
-  handleChange,
-}: RenderDataOrganizationProps) => (
-  <div>
-    <div className="flex justify-between gap-5 mb-5">
-      <div className="w-1/2">
-        <Input
-          className="shrink-0 text-l w-full"
-          type="text"
-          aria-label="Наименование организации"
-          label="Наименование организации"
-          value={fullName}
-          onChange={(value) => handleChange({ fullName: value })}
-        />
-      </div>
-      <div className="w-1/2">
-        <Input
-          className="shrink-0 text-l w-full"
-          type="text"
-          aria-label="ФИО"
-          label="ФИО"
-          value={name}
-          onChange={(value) => handleChange({ name: value })}
-        />
-      </div>
-    </div>
-    <div className="flex justify-between gap-5 mb-7">
-      <div className="w-1/2">
-        <Input
-          className="shrink-0 text-l w-full"
-          type="text"
-          aria-label="Телефон"
-          label="Телефон"
-          value={phone}
-          onChange={(value) => handleChange({ phone: value })}
-        />
-      </div>
-      <div className="w-1/2">
-        <Input
-          className="shrink-0 text-l w-full"
-          type="text"
-          aria-label="Электронная почта"
-          label="Электронная почта"
-          value={mail}
-          onChange={(value) => handleChange({ mail: value })}
-        />
-      </div>
-    </div>
-  </div>
-);

package/mobile/src/components/ApplicationForm/InputControl.tsx

@@ -0,0 +1,35 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Input } from '../../ui-kit/Input/Input';
+import { Text } from '../../ui-kit/Text/Text';
+
+interface InputControlProps {
+  className: string;
+  label: string;
+  value: string;
+  error?: string;
+  onChange: (value: string) => void;
+  onBlur?: (value: string) => 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">
+          <Text size="text-xs-light" color="text-error">
+            {error ? error : null}
+          </Text>
+        </div>
+      </div>
+    );
+  },
+);

package/mobile/src/components/ApplicationForm/SelectControl.tsx

@@ -0,0 +1,54 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { OptionProps, Select } 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;
+  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>
+    );
+  },
+);

package/mobile/src/components/ApplicationForm/models.ts

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

package/mobile/src/components/ApplicationForm/normalizeSelected.ts

@@ -0,0 +1,4 @@
+import type { Select } from './models';
+
+export const normalizeSelected = (field: string, selected: string, options: Select[]): string =>
+  !selected && options?.length && options[0]?.[field] ? options[0][field] : selected;

package/mobile/src/components/ApplicationForm/renderAcquiringDataOrganization.tsx

@@ -0,0 +1,60 @@
+import { AcquiringFormState } from './ApplicationFormAcquiring';
+import { InputControl } from './InputControl';
+import type { DataOrganization } from './models';
+import { validate } from './validate';
+
+interface RenderAcquiringDataOrganizationProps extends DataOrganization<AcquiringFormState> {
+  fullName: string;
+  inn: string;
+  name: string;
+  phone: string;
+}
+
+export const renderAcquiringDataOrganization = ({
+  fullName,
+  inn,
+  name,
+  phone,
+  handleChange,
+  errors,
+  handleChangeErrors,
+}: RenderAcquiringDataOrganizationProps) => (
+  <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) })}
+      />
+      <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) })}
+      />
+    </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) })}
+      />
+      <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>
+  </div>
+);

package/{src/components/ApplicationForm/renderSelects.tsx → mobile/src/components/ApplicationForm/renderAcquiringRegion.tsx}

@@ -1,35 +1,51 @@
-import type { AcquiringFormState } from './ApplicationFormAcquiring';
-import { WrapperSelect } from './WrapperSelect';
 import { ACQUIRING_TYPES } from './acquiringTypes';
+import type { AcquiringFormState } from './ApplicationFormAcquiring';
 import type { HandleFormStateChange, Select } from './models';
+import { SelectControl } from './SelectControl';
+import { validate } from './validate';
 
-interface SelectsProps {
+interface RenderAcquiringRegionProps {
   acquiringType: string;
   regions: Select[];
   region: string;
   handleChange: HandleFormStateChange<AcquiringFormState>;
+  errors: Record<string, string>;
+  handleChangeErrors: (state: any) => void;
 }
 
-export const renderSelects = ({ acquiringType, regions, region, handleChange }: SelectsProps) => (
+export const renderAcquiringRegion = ({
+  acquiringType,
+  regions,
+  region,
+  handleChange,
+  errors,
+  handleChangeErrors,
+}: RenderAcquiringRegionProps) => (
   <div className="flex justify-between gap-5 mb-7">
     <div className="w-1/2">
-      <WrapperSelect
+      <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="Выберите эквайринг"
       />
     </div>
     <div className="w-1/2">
-      <WrapperSelect
+      <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="Выберите адрес"
       />

package/mobile/src/components/ApplicationForm/renderBusinessCardDataOrganization.tsx

@@ -0,0 +1,60 @@
+import type { BusinessCardFormState } from './ApplicationFormBusinessCard';
+import { InputControl } from './InputControl';
+import type { DataOrganization } from './models';
+import { validate } from './validate';
+
+interface RenderBusinessCardDataOrganizationProps extends DataOrganization<BusinessCardFormState> {
+  name: string;
+  phone: string;
+  mail: string;
+  inn: string;
+}
+
+export const renderBusinessCardDataOrganization = ({
+  name,
+  phone,
+  mail,
+  inn,
+  handleChange,
+  errors,
+  handleChangeErrors,
+}: RenderBusinessCardDataOrganizationProps) => (
+  <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) })}
+      />
+      <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) })}
+      />
+    </div>
+    <div className="w-1/2">
+      <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) })}
+      />
+      <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) })}
+      />
+    </div>
+  </div>
+);

package/mobile/src/components/ApplicationForm/renderCreditDataOrganization.tsx

@@ -0,0 +1,76 @@
+import type { CreditFormState } from './ApplicationFormCredit';
+import { InputControl } from './InputControl';
+import type { DataOrganization } from './models';
+import { validate } from './validate';
+
+interface RenderCreditDataOrganizationProps extends DataOrganization<CreditFormState> {
+  fullName: string;
+  inn: string;
+  name: string;
+  phone: string;
+  mail: string;
+  annualRevenue: string;
+}
+
+export const renderCreditDataOrganization = ({
+  fullName,
+  inn,
+  name,
+  phone,
+  mail,
+  annualRevenue,
+  handleChange,
+  errors,
+  handleChangeErrors,
+}: RenderCreditDataOrganizationProps) => (
+  <div className="flex justify-between gap-5 mb-7">
+    <div className="w-1/2">
+      <InputControl
+        className="shrink-0 text-l w-full mb-3"
+        label="Наименование организации"
+        value={fullName}
+        onChange={(value) => handleChange({ fullName: value })}
+      />
+      <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) })}
+      />
+      <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>
+    <div className="w-1/2">
+      <InputControl
+        className="shrink-0 text-l w-full mb-3"
+        label="Годовая выручка, ₽"
+        error={errors['annualRevenue']}
+        value={annualRevenue}
+        onChange={(value) => handleChange({ annualRevenue: value })}
+        onBlur={(value) => handleChangeErrors({ annualRevenue: validate('annualRevenue', value) })}
+      />
+      <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="Электронная почта"
+        value={mail}
+        onChange={(value) => handleChange({ mail: value })}
+      />
+    </div>
+  </div>
+);