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

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>

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

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

@@ -1,75 +1,44 @@
-import type { CreditFormState } from './ApplicationFormCredit';
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
+import type { CreditFormState } from './CreditFormState';
 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 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) => (
+export const renderCreditDataOrganization = (field: FormFieldRegisterer<CreditFormState>) => (
   <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 })}
+        {...field('fullName')}
       />
       <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 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) })}
+        {...withValidator(field('annualRevenue'), 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)}
       />
       <InputControl
         className="shrink-0 text-l w-full mb-3"
         label="Электронная почта"
-        value={mail}
-        onChange={(value) => handleChange({ mail: value })}
+        {...field('mail')}
       />
     </div>
   </div>

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

@@ -1,4 +1,7 @@
-import type { CreditFormState } from './ApplicationFormCredit';
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { Text } from '../../ui-kit/Text/Text';
+import type { CreditFormState } from './CreditFormState';
 import {
   ITEMS_CREDIT_AMOUNT,
   ITEMS_CREDIT_TERM,
@@ -7,36 +10,30 @@ import {
   MIN_CREDIT_AMOUNT,
   MIN_CREDIT_TERM,
 } from './CreditParameters';
-import type { HandleFormStateChange } from './models';
-import { renderInputRange } from './renderInputRange';
 
-interface RenderCreditParametersProps {
-  amount: number;
-  term: number;
-  handleChange: HandleFormStateChange<CreditFormState>;
-}
-
-export const renderCreditParameters = ({
-  amount,
-  term,
-  handleChange,
-}: RenderCreditParametersProps) => (
+export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormState>) => (
   <div className="flex justify-between gap-5 mb-7">
-    {renderInputRange({
-      label: 'Сумма кредита, ₽',
-      value: amount,
-      onChange: (value) => handleChange({ amount: value }),
-      min: MIN_CREDIT_AMOUNT,
-      max: MAX_CREDIT_AMOUNT,
-      items: ITEMS_CREDIT_AMOUNT,
-    })}
-    {renderInputRange({
-      label: 'Срок кредита, месяцев',
-      value: term,
-      onChange: (value) => handleChange({ term: value }),
-      min: MIN_CREDIT_TERM,
-      max: MAX_CREDIT_TERM,
-      items: ITEMS_CREDIT_TERM,
-    })}
+    <div className="w-1/2">
+      <label>
+        <Text size="text-m-light">Сумма кредита, ₽</Text>
+      </label>
+      <InputRange
+        items={ITEMS_CREDIT_AMOUNT}
+        min={MIN_CREDIT_AMOUNT}
+        max={MAX_CREDIT_AMOUNT}
+        {...field('amount')}
+      />
+    </div>
+    <div className="w-1/2">
+      <label>
+        <Text size="text-m-light">Срок кредита, месяцев</Text>
+      </label>
+      <InputRange
+        items={ITEMS_CREDIT_TERM}
+        min={MIN_CREDIT_TERM}
+        max={MAX_CREDIT_TERM}
+        {...field('term')}
+      />
+    </div>
   </div>
 );

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

@@ -1,45 +1,26 @@
+import { FormFieldRegisterer } from '../../hooks/useForm';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
-import type { WedFormState } from './ApplicationFormWed';
-import type { HandleFormStateChange } from './models';
+import type { WedFormState } from './WedFormState';
 
-interface RenderQuestionsInterestedProps {
-  currencyControl: boolean;
-  documentaryOperations: boolean;
-  conversionOperations: boolean;
-  text: string;
-  handleChange: HandleFormStateChange<WedFormState>;
-}
+export const renderQuestionsInterested = (field: FormFieldRegisterer<WedFormState>) => {
+  const textField = field('text');
 
-export const renderQuestionsInterested = ({
-  currencyControl,
-  documentaryOperations,
-  conversionOperations,
-  text,
-  handleChange,
-}: RenderQuestionsInterestedProps) => (
-  <div className="mb-6">
-    <div className="flex items-center mb-4 gap-6">
-      <Checkbox
-        text="Валютный контроль"
-        checked={currencyControl}
-        onChange={(value) => handleChange({ currencyControl: value })}
-      />
-      <Checkbox
-        text="Документарные операции"
-        checked={documentaryOperations}
-        onChange={(value) => handleChange({ documentaryOperations: value })}
-      />
-      <Checkbox
-        text="Конверсионные операции"
-        checked={conversionOperations}
-        onChange={(value) => handleChange({ conversionOperations: value })}
+  return (
+    <div className="mb-6">
+      <div className="flex items-center mb-4 gap-6">
+        <Checkbox text="Валютный контроль" {...field('currencyControl')} />
+        <Checkbox text="Документарные операции" {...field('documentaryOperations')} />
+        <Checkbox text="Конверсионные операции" {...field('conversionOperations')} />
+      </div>
+      <textarea
+        placeholder="Укажите интересующий вас вопрос, место ведения бизнеса и удобное время для телефонного звонка"
+        className="block w-full resize-y min-h-24 p-4 outline-none border rounded-md border-main-stroke hover:border-primary-hover active:focus:border-primary-text"
+        value={textField.value}
+        onInput={
+          ((e: { target?: { value?: string } }) =>
+            textField.onChange && textField.onChange(e.target?.value || '')) as any
+        }
       />
     </div>
-    <textarea
-      placeholder="Укажите интересующий вас вопрос, место ведения бизнеса и удобное время для телефонного звонка"
-      className="block w-full resize-y min-h-24 p-4 outline-none border rounded-md border-main-stroke hover:border-primary-hover active:focus:border-primary-text"
-      value={text}
-      onChange={(e) => handleChange({ text: e.target.value })}
-    />
-  </div>
-);
+  );
+};

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

@@ -1,35 +1,23 @@
-import { BusinessCardFormState } from './ApplicationFormBusinessCard';
-import { HandleFormStateChange, Select } from './models';
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
+import { BusinessCardFormState } from './BusinessCardFormState';
+import { Select } from './models';
 import { SelectControl } from './SelectControl';
-import { validate } from './validate';
+import { defaultValidator } from './validators';
 
-interface RenderRegionProps {
+interface RegionProps {
   regions: Select[];
-  region: string;
-  handleChange: HandleFormStateChange<BusinessCardFormState>;
-  errors: Record<string, string>;
-  handleChangeErrors: (state: any) => void;
+  field: FormFieldRegisterer<BusinessCardFormState>;
 }
 
-export const renderRegion = ({
-  regions,
-  region,
-  handleChange,
-  errors,
-  handleChangeErrors,
-}: RenderRegionProps) => (
+export const renderRegion = ({ regions, field }: RegionProps) => (
   <div className="flex justify-between gap-5 mb-5">
     <div className="w-full">
       <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>