@redneckz/wildless-cms-uni-blocks 0.14.211 → 0.14.213

package/mobile/src/components/ApplicationFormCustom/RegionPremiumField.tsx

@@ -0,0 +1,29 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { usePremiumBranchesByRegions } from '../../hooks/usePremiumBranchesByRegions';
+import { type Option } from '../../ui-kit/Select/Option';
+import { SelectControl } from '../../ui-kit/Select/SelectControl';
+import { type CustomFieldProps } from './CustomFieldProps';
+import { getValidation } from './getField';
+import { validatorObj } from './getObjectValidator';
+
+export const RegionPremiumField = JSX<CustomFieldProps>(({ field, input }) => {
+  const branchByRegions = usePremiumBranchesByRegions();
+  const regions = useMemo(
+    () =>
+      branchByRegions.map(({ region }) => ({
+        key: region,
+        text: region,
+      })),
+    [],
+  );
+
+  return (
+    <SelectControl
+      label="Регион"
+      placeholder="Выберите регион"
+      options={regions as Option[]}
+      {...getValidation(field('region'), validatorObj.region, input?.required)}
+    />
+  );
+});

package/mobile/src/components/ApplicationFormCustom/TermField.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { type CustomFieldProps } from './CustomFieldProps';
+
+const MIN_CREDIT_TERM = 1;
+const MAX_CREDIT_TERM = 180;
+const ITEMS_CREDIT_TERM = ['От 1 мес', 'До 15 лет'];
+
+export const TermField = JSX<CustomFieldProps>(({ field }) => (
+  <InputRange
+    title="Срок, месяцев"
+    items={ITEMS_CREDIT_TERM}
+    min={MIN_CREDIT_TERM}
+    max={MAX_CREDIT_TERM}
+    {...field('term')}
+  />
+));

package/mobile/src/components/ApplicationFormCustom/UltraPremiumField.tsx

@@ -0,0 +1,19 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type Option } from '../../ui-kit/Select/Option';
+import { SelectControl } from '../../ui-kit/Select/SelectControl';
+import { withValidator } from '../../validation/withValidator';
+import { defaultValidator } from '../ApplicationForm/validators';
+import { type CustomFieldProps } from './CustomFieldProps';
+
+export const SERVICE_TYPES: Option[] = [
+  { key: 'ULTRASERVICE', text: 'Ультра' },
+  { key: 'PREMIUMSERVICE', text: 'Премиум' },
+];
+
+export const UltraPremiumField = JSX<CustomFieldProps>(({ field }) => (
+  <SelectControl
+    label="Тип обслуживания"
+    options={SERVICE_TYPES}
+    {...withValidator(field('serviceType'), defaultValidator)}
+  />
+));

package/mobile/src/components/ApplicationFormCustom/getField.tsx

@@ -2,80 +2,108 @@ import { type FieldProps, type FormFieldRegisterer } from '../../hooks/useForm';
 import { CheckboxWithError } from '../../ui-kit/Checkbox/CheckboxWithError';
 import { DatePickerControl } from '../../ui-kit/DatePicker/DatePickerControl';
 import { InputControl } from '../../ui-kit/Input/InputControl';
+import { InputPhoneControl } from '../../ui-kit/Input/InputPhoneControl';
 import { type Validator } from '../../validation/validator';
 import { withValidator } from '../../validation/withValidator';
-import { PhoneInputControl } from '../ApplicationForm/PhoneInputControl';
-import { RegionField } from '../ApplicationForm/RegionField';
+import { AcquiringField } from './AcquiringField';
+import { AddressBranchField } from './AddressBranchField';
+import { AmountField } from './AmountField';
 import { type FieldDef } from './ApplicationFormCustomContent';
+import { CommentField } from './CommentField';
 import { validatorObj } from './getObjectValidator';
+import { OnlineCheckoutField } from './OnlineCheckoutField';
+import { PosTerminalField } from './PosTerminalField';
+import { RegionField } from './RegionField';
+import { RegionPremiumField } from './RegionPremiumField';
+import { TermField } from './TermField';
+import { UltraPremiumField } from './UltraPremiumField';
 
-export const getField = (field: FormFieldRegisterer<any>) => (input: FieldDef, index: number) => {
-  const { required, ...rest } = input;
-  const InputsMap = {
-    surname: (
-      <InputControl
-        label="Фамилия"
-        {...getValidation(field('surname'), validatorObj.surname, required)}
-      />
-    ),
-    name: (
-      <InputControl
-        label="Имя"
-        {...getValidation(field('name'), validatorObj.name, required)}
-        {...rest}
-      />
-    ),
-    middleName: (
-      <InputControl label="Отчество (Обязательно, при наличии)" {...field('middleName')} />
-    ),
-    phone: (
-      <PhoneInputControl
-        label="Телефон"
-        {...getValidation(field('phone'), validatorObj.phone, required)}
-      />
-    ),
-    email: (
-      <InputControl
-        label="Электронная почта"
-        {...getValidation(field('email'), validatorObj.email, required)}
-      />
-    ),
-    fullName: (
-      <InputControl
-        label="ФИО"
-        {...getValidation(field('fullName'), validatorObj.fullName, required)}
-        {...rest}
-      />
-    ),
-    inn: <InputControl label="ИНН" {...getValidation(field('inn'), validatorObj.inn, required)} />,
-    comment: (
-      <InputControl
-        className="col-span-2"
-        {...getValidation(field('comment'), validatorObj.comment, required)}
-        placeholder="Ваше сообщение"
-        isTextarea={true}
-      />
-    ),
-    region: <RegionField field={field} input={input} />,
-    birthday: (
-      <DatePickerControl
-        label="Дата рождения"
-        {...getValidation(field('birthday'), validatorObj.birthday, required)}
-      />
-    ),
-    isClient: (
-      <CheckboxWithError {...field('isClient')} text='Являюсь клиентом банка АО "Россельхозбанк"' />
-    ),
-    partnerComments: (
-      <InputControl
-        label="Количество объектов инкассации"
-        {...getValidation(field('partnerComments'), validatorObj.partnerComments, required)}
-      />
-    ),
-  };
+export const getField =
+  // eslint-disable-next-line max-lines-per-function
+  (field: FormFieldRegisterer<any>, typeForm: string) => (input: FieldDef, index: number) => {
+    const { required, ...rest } = input;
+    const isPremium = typeForm === 'ULTRASERVICE' || typeForm === 'PREMIUMSERVICE';
+
+    const InputsMap = {
+      surname: (
+        <InputControl
+          label="Фамилия"
+          {...getValidation(field('surname'), validatorObj.surname, required)}
+        />
+      ),
+      name: (
+        <InputControl
+          label="Имя"
+          {...getValidation(field('name'), validatorObj.name, required)}
+          {...rest}
+        />
+      ),
+      middleName: (
+        <InputControl label="Отчество (Обязательно, при наличии)" {...field('middleName')} />
+      ),
+      phone: (
+        <InputPhoneControl
+          label="Телефон"
+          {...getValidation(field('phone'), validatorObj.phone, required)}
+        />
+      ),
+      email: (
+        <InputControl
+          label="Электронная почта"
+          {...getValidation(field('email'), validatorObj.email, required)}
+        />
+      ),
+      fullName: (
+        <InputControl
+          label="ФИО"
+          {...getValidation(field('fullName'), validatorObj.fullName, required)}
+          {...rest}
+        />
+      ),
+      inn: (
+        <InputControl label="ИНН" {...getValidation(field('inn'), validatorObj.inn, required)} />
+      ),
+      comment: <CommentField field={field} input={input} />,
+      region: isPremium ? (
+        <RegionPremiumField field={field} />
+      ) : (
+        <RegionField field={field} input={input} />
+      ),
+      addressBranch: <AddressBranchField field={field} input={input} isPremium={isPremium} />,
+      birthday: (
+        <DatePickerControl
+          label="Дата рождения"
+          {...getValidation(field('birthday'), validatorObj.birthday, required)}
+        />
+      ),
+      isClient: (
+        <CheckboxWithError
+          {...field('isClient')}
+          text='Являюсь клиентом банка АО "Россельхозбанк"'
+        />
+      ),
+      partnerComments: (
+        <InputControl
+          label="Количество объектов инкассации"
+          {...getValidation(field('partnerComments'), validatorObj.partnerComments, required)}
+        />
+      ),
+      acquiringType: <AcquiringField field={field} input={input} />,
+      onlineCheckout: <OnlineCheckoutField field={field} />,
+      posTerminal: <PosTerminalField field={field} />,
+      serviceType: <UltraPremiumField field={field} />,
+      term: <TermField field={field} />,
+      amount: <AmountField field={field} />,
+      annualRevenue: (
+        <InputControl
+          label="Годовая выручка, ₽"
+          {...getValidation(field('annualRevenue'), validatorObj.annualRevenue, required)}
+        />
+      ),
+    };
 
-  return <div key={String(index)}>{InputsMap[input.name]}</div>;
-};
+    return <div key={String(index)}>{InputsMap[input.name]}</div>;
+  };
 
-const getValidation = (field: FieldProps<any>, validator: Validator, required = false) =>
+export const getValidation = (field: FieldProps<any>, validator: Validator, required = false) =>
   required ? withValidator(field, validator) : field;

package/mobile/src/components/ApplicationFormCustom/getFormatData.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+import { getPartnerComments } from './getPartnerComments';
+
+export const getFormatData = (data: Record<string, any>) => {
+  const {
+    acquiringType,
+    onlineCheckout,
+    posTerminal,
+    amount,
+    term,
+    annualRevenue,
+    serviceType,
+    ...usedData
+  } = data;
+  const partnerComments = acquiringType || annualRevenue ? getPartnerComments(data) : null;
+  const formatData = { ...usedData, ...(partnerComments ? { partnerComments } : {}) };
+
+  return Object.fromEntries(
+    Object.entries(formatData as Record<string, any>).map(([k, v]) => [
+      k,
+      (k === 'region' ? v?.text : v?.key) || v,
+    ]),
+  );
+};

package/mobile/src/components/ApplicationFormCustom/getInitialFormState.tsx

@@ -1,6 +1,8 @@
 import { type Option } from '../../ui-kit/Select/Option';
+import { ACQUIRING_TYPES } from './AcquiringField';
 import { type FieldDef } from './ApplicationFormCustomContent';
 import { getNamesFromInput } from './getNamesFromInput';
+import { SERVICE_TYPES } from './UltraPremiumField';
 
 export interface FormState {
   typeForm?: Option | string;
@@ -10,27 +12,46 @@ export interface FormState {
   birthday?: Date;
   phone?: string;
   email?: string;
+  acquiringType?: Option;
+  onlineCheckout?: boolean;
+  posTerminal?: boolean;
+  term?: number;
+  amount?: number;
+  annualRevenue?: string;
   consentDataProcessing?: boolean;
 }
 
 const initialFormState = {
-  typeForm: { key: '', text: '' },
+  typeForm: '',
   region: { key: '', text: '' },
+  addressBranch: { key: '', text: '' },
   surname: '',
   name: '',
   middleName: '',
   phone: '',
   email: '',
-  birthday: undefined,
   comment: '',
-  consentDataProcessing: false,
   product: '',
+  partnerComments: '',
+  annualRevenue: '',
+  term: 12,
+  amount: 1000,
+  acquiringType: ACQUIRING_TYPES[0],
+  serviceType: SERVICE_TYPES[0],
+  birthday: undefined,
+  isClient: false,
+  onlineCheckout: false,
+  posTerminal: false,
+  consentDataProcessing: false,
 };
 
 export const getInitialFormState = (inputs: FieldDef[], typeForm = ''): FormState => {
   const formState = Object.fromEntries(
     getNamesFromInput(inputs).map((_) => [_, initialFormState[_]]),
   );
+  if (formState?.serviceType && typeForm === 'PREMIUMSERVICE') {
+    formState.serviceType = SERVICE_TYPES[1];
+  }
 
   return { ...formState, typeForm: { key: '' || typeForm, text: '' } };
 };

package/mobile/src/components/ApplicationFormCustom/getObjectValidator.tsx

@@ -15,6 +15,7 @@ export const validatorObj: Record<string, Validator> = {
   surname: nameValidator,
   name: nameValidator,
   region: defaultSelectValidator,
+  addressBranch: defaultSelectValidator,
   phone: phoneValidator,
   birthday: defaultValidator,
   email: defaultValidator,
@@ -22,7 +23,10 @@ export const validatorObj: Record<string, Validator> = {
   inn: innValidator,
   partnerComments: defaultValidator,
   comment: defaultValidator,
+  acquiringType: defaultSelectValidator,
+  serviceType: defaultSelectValidator,
   consentDataProcessing: checkboxValidator,
+  annualRevenue: defaultValidator,
 };
 
 export const getObjectValidator = (inputs: FieldDef[]): Record<string, Validator> => {

package/mobile/src/components/ApplicationFormCustom/getPartnerComments.tsx

@@ -0,0 +1,22 @@
+import { isAcquiringTrade } from './AcquiringField';
+import { type FormState } from './getInitialFormState';
+
+export const getPartnerComments = (data: FormState): string => {
+  const {
+    acquiringType,
+    onlineCheckout = false,
+    posTerminal = false,
+    term,
+    amount,
+    annualRevenue,
+  } = data;
+  if (acquiringType) {
+    return `Вид эквайринга=${acquiringType?.text || ''}${
+      isAcquiringTrade(acquiringType?.key)
+        ? `/Онлайн касса=${onlineCheckout}/POS-терминал=${posTerminal}`
+        : '/Онлайн касса=false/POS-терминал=false'
+    }`;
+  } else {
+    return `Сумма=${amount}/Срок=${term}/Выручка=${annualRevenue}`;
+  }
+};

package/mobile/src/{components/ApplicationForm/PhoneInputControl.tsx → ui-kit/Input/InputPhoneControl.tsx}

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type InputProps } from '../../ui-kit/Input/InputProps';
-import { renderErrorText } from '../../ui-kit/Input/renderErrorText';
-import { PhoneInput } from '../../ui-kit/PhoneInput/PhoneInput';
 import { style } from '../../utils/style';
+import { PhoneInput } from '../PhoneInput/PhoneInput';
+import { type InputProps } from './InputProps';
+import { renderErrorText } from './renderErrorText';
 
-export const PhoneInputControl = JSX<InputProps>(
+export const InputPhoneControl = JSX<InputProps>(
   ({ className, label, value, error, onChange, onBlur, ...rest }) => (
     <div className={style('shrink-0 w-full', className)}>
       <PhoneInput

package/mobile/src/ui-kit/Pagination/PaginationContainer.tsx

@@ -33,7 +33,7 @@ export const PaginationContainer = ({
   }, [currentPage]);
 
   const handleNextPage = useCallback(() => {
-    if (currentPage < totalPages - 1) {
+    if (currentPage < totalPages) {
       onPageChange(currentPage + 1);
     }
   }, [currentPage, totalPages]);
@@ -51,15 +51,15 @@ export const PaginationContainer = ({
           {...ICON_SIZE}
         />
       </div>
-      <div className="flex gap-xs">
+      <div className="flex gap-2xs">
         {currentPage > 1 ? (
           <div onClick={handleFirstPage} className={paginationBlockStyle} aria-label="Страница 1">
             1
           </div>
         ) : null}
-        {currentPage > 4 ? <div className="py-m px-s">...</div> : null}
+        {currentPage > 3 ? <div className="py-m px-s">...</div> : null}
         {pages.map(renderPages)}
-        {currentPage < totalPages - 3 ? <div className="py-m px-s">...</div> : null}
+        {currentPage < totalPages - 2 ? <div className="py-m px-s">...</div> : null}
         {currentPage < totalPages ? (
           <div
             onClick={handleLastPage}

package/mobile/src/ui-kit/Pagination/shouldRenderPage.ts

@@ -1,8 +1,8 @@
 const checkPageRange = (page: number, currentPage: number, totalPages: number) =>
-  (currentPage <= 3 && page <= currentPage + 3) ||
-  (currentPage >= totalPages - 1 && page >= totalPages - 4);
+  (currentPage <= 2 && page <= currentPage + 2) ||
+  (currentPage >= totalPages - 1 && page >= totalPages - 3);
 
 export const shouldRenderPage = (page: number, currentPage: number, totalPages: number) =>
-  (page < currentPage && page >= currentPage - 2) ||
-  (page <= currentPage + 2 && page > currentPage) ||
+  (page < currentPage && page >= currentPage - 1) ||
+  (page <= currentPage + 1 && page > currentPage) ||
   checkPageRange(page, currentPage, totalPages);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.211",
+  "version": "0.14.213",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

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

@@ -17,19 +17,7 @@ const formBlockProps: ApplicationFormBlockDef = {
     text: 'Согласен с условиями передачи данных',
     href: '#',
   },
-  formType: 'ApplicationFormCredit',
-};
-
-const ApplicationFormCredit: ApplicationFormContent = {
-  formBlock: { ...formBlockProps, formType: 'ApplicationFormCredit' },
-};
-
-const ApplicationFormAcquiring: ApplicationFormContent = {
-  formBlock: { ...formBlockProps, formType: 'ApplicationFormAcquiring' },
-};
-
-const ApplicationFormDeposit: ApplicationFormContent = {
-  formBlock: { ...formBlockProps, formType: 'ApplicationFormDeposit' },
+  formType: 'ApplicationFormGrantSupport',
 };
 
 const ApplicationFormWed: ApplicationFormContent = {
@@ -46,45 +34,11 @@ const ApplicationFormGrantSupport: ApplicationFormContent = {
   },
 };
 
-const ApplicationFormIndividuals: ApplicationFormContent = {
-  formBlock: {
-    ...formBlockProps,
-    formType: 'ApplicationFormIndividuals',
-    product: 'product',
-  },
-};
-
 const ApplicationFormFeedback: ApplicationFormContent = {
   formBlock: { ...formBlockProps, formType: 'ApplicationFormFeedback' },
 };
 
-const ApplicationFormUltraPremium: ApplicationFormContent = {
-  formBlock: {
-    ...formBlockProps,
-    formType: 'ApplicationFormUltraPremium',
-    title: 'Стать клиентом',
-  },
-};
-
 export default {
-  credit: (
-    <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormCredit} />
-      <PopupManager />
-    </div>
-  ),
-  acquiring: (
-    <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormAcquiring} />
-      <PopupManager />
-    </div>
-  ),
-  deposit: (
-    <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormDeposit} />
-      <PopupManager />
-    </div>
-  ),
   wed: (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormWed} />
@@ -97,22 +51,10 @@ export default {
       <PopupManager />
     </div>
   ),
-  individuals: (
-    <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormIndividuals} />
-      <PopupManager />
-    </div>
-  ),
   feedback: (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormFeedback} />
       <PopupManager />
     </div>
   ),
-  'ultra-premium': (
-    <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormUltraPremium} />
-      <PopupManager />
-    </div>
-  ),
 };

package/src/components/ApplicationForm/ApplicationForm.fixture.tsx

@@ -17,19 +17,7 @@ const formBlockProps: ApplicationFormBlockDef = {
     text: 'Согласен с условиями передачи данных',
     href: '#',
   },
-  formType: 'ApplicationFormCredit',
-};
-
-const ApplicationFormCredit: ApplicationFormContent = {
-  formBlock: { ...formBlockProps, formType: 'ApplicationFormCredit' },
-};
-
-const ApplicationFormAcquiring: ApplicationFormContent = {
-  formBlock: { ...formBlockProps, formType: 'ApplicationFormAcquiring' },
-};
-
-const ApplicationFormDeposit: ApplicationFormContent = {
-  formBlock: { ...formBlockProps, formType: 'ApplicationFormDeposit' },
+  formType: 'ApplicationFormGrantSupport',
 };
 
 const ApplicationFormWed: ApplicationFormContent = {
@@ -41,63 +29,22 @@ const ApplicationFormGrantSupport: ApplicationFormContent = {
     ...formBlockProps,
     formType: 'ApplicationFormGrantSupport',
     regionSource: {
-      $ref: '/wcms-resources/portal-data.json',
+      $ref: '/wcms-resources/regions-grant-support.json',
     },
   },
 };
 
-const ApplicationFormIndividuals: ApplicationFormContent = {
-  formBlock: {
-    ...formBlockProps,
-    formType: 'ApplicationFormIndividuals',
-    product: 'product',
-  },
-};
-
 const ApplicationFormFeedback: ApplicationFormContent = {
   formBlock: { ...formBlockProps, formType: 'ApplicationFormFeedback', title: 'Обратная связь' },
 };
 
-const ApplicationFormUltraPremium: ApplicationFormContent = {
-  formBlock: {
-    ...formBlockProps,
-    formType: 'ApplicationFormUltraPremium',
-    title: 'Стать клиентом',
-    defaultType: 'ULTRASERVICE',
-  },
-};
-
 export default {
-  acquiring: (
-    <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormAcquiring} />
-      <PopupManager />
-    </div>
-  ),
-  credit: (
-    <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormCredit} />
-      <PopupManager />
-    </div>
-  ),
-  deposit: (
-    <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormDeposit} />
-      <PopupManager />
-    </div>
-  ),
   'grant-support': (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormGrantSupport} />
       <PopupManager />
     </div>
   ),
-  individuals: (
-    <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormIndividuals} />
-      <PopupManager />
-    </div>
-  ),
   feedback: (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormFeedback} />
@@ -110,10 +57,4 @@ export default {
       <PopupManager />
     </div>
   ),
-  'ultra-premium': (
-    <div className="container grid grid-cols-12">
-      <ApplicationForm className="col-span-12" {...ApplicationFormUltraPremium} />
-      <PopupManager />
-    </div>
-  ),
 };

package/src/components/ApplicationForm/ApplicationForm.ui.json

@@ -3,12 +3,6 @@
     "formBlock": {
       "formType": {
         "ui:widget": "hidden"
-      },
-      "product": {
-        "ui:widget": "sourceBookDataDropdown",
-        "ui:options": {
-          "sourceBookPath": "wcms-resources/products"
-        }
       }
     }
   }