@redneckz/wildless-cms-uni-blocks 0.14.574 → 0.14.576

package/mobile/src/ui-kit/Input/InputProps.ts

@@ -18,4 +18,5 @@ export interface InputProps<V = string> extends ControlProps<V>, LabelProps {
   isTextarea?: boolean;
   error?: string;
   errors?: string[];
+  dadata?: boolean;
 }

package/mobile/src/ui-kit/Input/useInputPopup.tsx

@@ -0,0 +1,85 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { getDaDataHints } from '../../api/dadataHints/dadataHints';
+import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
+import { hintsListsOptions } from '../../api/dadataHints/hintsListsOptions';
+import { debounce } from '../../utils/debounce';
+import { usePopupManager } from '../PopupManager/usePopupManager';
+import { InputPopup } from './InputPopup';
+
+interface InputPopupOptions {
+  isOpen?: boolean;
+  name: string;
+  value?: string;
+  onChange: (e: string) => void;
+}
+
+export function useInputPopup({ isOpen, value, name, onChange }: InputPopupOptions) {
+  const prevInputValue = useRef(value);
+  const currentInputValue = useRef(value);
+  const [hintsList, setHintsList] = useState<Array<DaDataSuggestion>>([]);
+  const popup = usePopupManager();
+
+  const defaultHintsListOptions = hintsListsOptions[name];
+
+  const close = useCallback(() => {
+    currentInputValue.current = value;
+    popup.close();
+  }, [value]);
+
+  const handleChange = useCallback(
+    (option: string) => {
+      close();
+      currentInputValue.current = option;
+      onChange && onChange(option);
+    },
+    [close, onChange],
+  );
+
+  const inputRef = useRef<HTMLDivElement | null>(null);
+
+  const getHintsList = useMemo(
+    () => async (searchValue: string) => {
+      if (!defaultHintsListOptions) {
+        return;
+      }
+      const result = await getDaDataHints({
+        url: defaultHintsListOptions.url,
+        requestData: {
+          ...defaultHintsListOptions?.requestData,
+        },
+        query: searchValue,
+      });
+      if (result?.length) {
+        setHintsList(result);
+      }
+    },
+    [],
+  );
+
+  const debouncedGetHintsList = useMemo(() => debounce(getHintsList, 300), [getHintsList]);
+
+  useEffect(() => {
+    if (!isOpen || !inputRef.current || currentInputValue.current === value) {
+      close();
+
+      return;
+    }
+
+    const inputElement = inputRef.current;
+    const { top, left, width, height } = inputElement.getBoundingClientRect();
+
+    if (value && prevInputValue.current !== value) {
+      debouncedGetHintsList(value);
+
+      prevInputValue.current = value;
+    }
+
+    popup.update(<InputPopup options={hintsList} value={value} onChange={handleChange} />, {
+      top: top + globalThis.scrollY + height,
+      left,
+      width,
+    });
+  }, [isOpen, hintsList, value, handleChange]);
+
+  return inputRef;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.574",
+  "version": "0.14.576",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -210,7 +210,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "69 kB",
+      "limit": "70 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/api/LeadServiceAPI.ts

@@ -2,20 +2,6 @@ import { type JSONRecord, type JSONScalar } from '@redneckz/json-op';
 import { formatDate } from '../utils/formatDate';
 import { formatPhone } from '../utils/formatPhone';
 
-interface DaDataSuggestion<T> {
-  value?: string;
-  unrestricted_value?: string;
-  data?: T;
-}
-
-interface DaDataAddress {
-  city?: string | null;
-}
-
-export interface DaDataResult {
-  suggestions?: DaDataSuggestion<DaDataAddress>[];
-}
-
 export type LeadRequest = Record<string, JSONRecord | JSONScalar | null> & {
   typeForm?: string;
   addressBranch?: string;

package/src/api/dadataHints/dadataHints.ts

@@ -0,0 +1,33 @@
+import { type DaDataSuggestion, type ListRequestOption } from './dadataHintsType';
+
+const DEFAULT_HINTS_COUNT = 10;
+
+const getResponseHandler = (response: { suggestions: Array<DaDataSuggestion> }) => {
+  const responseData: Array<DaDataSuggestion> = response?.suggestions || [];
+
+  return responseData.map((item) => ({
+    ...item,
+    processedValue: item?.value,
+  }));
+};
+
+export const getDaDataHints = (options: ListRequestOption): Promise<Array<DaDataSuggestion>> => {
+  const { url, query, requestData = {} } = options;
+
+  const result = fetch(`/api/v1/suggestions/${url}`, {
+    method: 'POST',
+    mode: 'cors',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      count: DEFAULT_HINTS_COUNT,
+      ...requestData,
+      query,
+    }),
+  })
+    .then((response) => response.json())
+    .then(getResponseHandler);
+
+  return result;
+};

package/src/api/dadataHints/dadataHintsType.ts

@@ -0,0 +1,33 @@
+import { type Nullable } from '../../utils/Nullable';
+import { type HintOption } from './hintsListsOptions';
+
+export interface DaDataSuggestion {
+  value: string;
+  unrestricted_value: string;
+  data: DaDataResponseItem;
+  processedValue: string;
+}
+
+export type DaDataGender = 'MALE' | 'FEMALE' | 'UNKNOWN';
+
+export interface DaDataFio {
+  surname: Nullable<string>;
+  name: Nullable<string>;
+  patronymic: Nullable<string>;
+  gender: DaDataGender;
+  qc: '0' | '1';
+  source: null;
+}
+
+export interface DaDataEmail {
+  domain: Nullable<string>;
+  local: string;
+}
+
+export type DaDataResponseItem = DaDataFio | DaDataEmail;
+
+export interface ListRequestOption {
+  url: string;
+  query?: string;
+  requestData?: HintOption['requestData'];
+}

package/src/api/dadataHints/hintsListsOptions.ts

@@ -0,0 +1,44 @@
+export const NAME_HINTS_LIST_OPTIONS = {
+  url: 'suggest/fio',
+  requestData: {
+    parts: ['NAME'],
+    gender: 'UNKNOWN',
+  },
+};
+
+export const SURNAME_HINTS_LIST_OPTIONS = {
+  url: 'suggest/fio',
+  requestData: {
+    parts: ['SURNAME'],
+    gender: 'UNKNOWN',
+  },
+};
+
+export const PATRONYMIC_HINTS_LIST_OPTIONS = {
+  url: 'suggest/fio',
+  requestData: {
+    parts: ['PATRONYMIC'],
+    gender: 'UNKNOWN',
+  },
+};
+
+export const EMAIL_HINTS_LIST_OPTIONS = {
+  url: 'suggest/email',
+};
+
+export type HintsListOptions = Record<string, HintOption>;
+
+export const hintsListsOptions: HintsListOptions = {
+  name: NAME_HINTS_LIST_OPTIONS,
+  surname: SURNAME_HINTS_LIST_OPTIONS,
+  middleName: PATRONYMIC_HINTS_LIST_OPTIONS,
+  email: EMAIL_HINTS_LIST_OPTIONS,
+};
+
+export type HintOption = {
+  url: string;
+  requestData?: {
+    parts?: string[];
+    gender?: string;
+  };
+};

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -54,7 +54,13 @@ export type NameFieldDef =
   | 'localities'
   | 'partnerComments'
   | 'consentDataProcessing'
-  | 'consentToAllDocs';
+  | 'consentInformFlg'
+  | 'consentCollectionFlg'
+  | 'consentAssignmentClaimsFlg'
+  | 'consentPhotoFlg'
+  | 'consentPfrFlg'
+  | 'consentProviderFlg'
+  | 'processPersonalDataLeadFlg';
 
 export type ConditionFieldProps = {
   /** @title Условия отображения полей формы */
@@ -69,6 +75,7 @@ export type FieldDefaultDef = Required &
   LabelProps &
   ConditionFieldProps & {
     name: NameFieldDef;
+    dadata?: boolean;
   };
 
 /**

package/src/components/ApplicationLeadForm/ApplicationLeadForm.example.json

@@ -47,7 +47,36 @@
             "inputs": [
               {
                 "fieldType": "common",
-                "name": "consentToAllDocs",
+                "name": "processPersonalDataLeadFlg",
+                "required": true
+              },
+              {
+                "fieldType": "common",
+                "name": "consentProviderFlg",
+                "required": true
+              },
+              {
+                "fieldType": "common",
+                "name": "consentPfrFlg"
+              },
+              {
+                "fieldType": "common",
+                "name": "consentPhotoFlg",
+                "required": true
+              },
+              {
+                "fieldType": "common",
+                "name": "consentAssignmentClaimsFlg",
+                "required": true
+              },
+              {
+                "fieldType": "common",
+                "name": "consentCollectionFlg",
+                "required": true
+              },
+              {
+                "fieldType": "common",
+                "name": "consentInformFlg",
                 "required": true
               }
             ]

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

@@ -29,7 +29,17 @@ export default {
               { fieldType: 'common', name: 'email', required: true },
             ],
           },
-          { inputs: [{ fieldType: 'common', name: 'consentToAllDocs', required: true }] },
+          {
+            inputs: [
+              { fieldType: 'common', name: 'processPersonalDataLeadFlg', required: true },
+              { fieldType: 'common', name: 'consentProviderFlg', required: true },
+              { fieldType: 'common', name: 'consentPfrFlg' },
+              { fieldType: 'common', name: 'consentPhotoFlg', required: true },
+              { fieldType: 'common', name: 'consentAssignmentClaimsFlg', required: true },
+              { fieldType: 'common', name: 'consentCollectionFlg', required: true },
+              { fieldType: 'common', name: 'consentInformFlg', required: true },
+            ],
+          },
         ]}
         button={button}
       />

package/src/components/ApplicationLeadForm/ApplicationLeadForm.fixture.tsx

@@ -22,15 +22,25 @@ export default {
           {
             columns: 2,
             inputs: [
-              { fieldType: 'common', name: 'surname', required: true },
-              { fieldType: 'common', name: 'name', required: true },
-              { fieldType: 'common', name: 'middleName' },
+              { fieldType: 'common', name: 'surname', required: true, dadata: true },
+              { fieldType: 'common', name: 'name', required: true, dadata: true },
+              { fieldType: 'common', name: 'middleName', dadata: true },
               { fieldType: 'common', name: 'birthday', required: true },
               { fieldType: 'common', name: 'phone', required: true },
-              { fieldType: 'common', name: 'email', required: true },
+              { fieldType: 'common', name: 'email', required: true, dadata: true },
+            ],
+          },
+          {
+            inputs: [
+              { fieldType: 'common', name: 'processPersonalDataLeadFlg', required: true },
+              { fieldType: 'common', name: 'consentProviderFlg', required: true },
+              { fieldType: 'common', name: 'consentPfrFlg' },
+              { fieldType: 'common', name: 'consentPhotoFlg', required: true },
+              { fieldType: 'common', name: 'consentAssignmentClaimsFlg', required: true },
+              { fieldType: 'common', name: 'consentCollectionFlg', required: true },
+              { fieldType: 'common', name: 'consentInformFlg', required: true },
             ],
           },
-          { inputs: [{ fieldType: 'common', name: 'consentToAllDocs', required: true }] },
         ]}
         button={button}
       />

package/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -12,9 +12,15 @@ import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { objectValidator } from '../../validation/objectValidator';
 import { isValidationSuccess } from '../../validation/validator';
-import { type ApplicationLeadFormContent, type FieldDef } from './ApplicationLeadFormContent';
+import {
+  type ApplicationLeadFormContent,
+  type FieldDef,
+  type GroupedConsentsProps,
+} from './ApplicationLeadFormContent';
+import { CONSENTS } from './consents';
 import { getFormatData } from './getFormatData';
 import { getInitialFormState, type FormState } from './getInitialFormState';
+import { GroupedConsents } from './GroupedConsents';
 import { renderSubmitButton } from './renderSubmitButton';
 
 interface ApplicationLeadFormProps extends ApplicationLeadFormContent, UniBlockProps {}
@@ -66,7 +72,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
               className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}
             >
               {renderTitle(_.title)}
-              {(_?.inputs || [])?.map(getField(field, typeForm))}
+              {renderInputs({ field, typeForm, inputs: _?.inputs })}
             </div>
           ))}
           {renderSubmitButton(button)}
@@ -75,3 +81,21 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
     );
   },
 );
+
+const renderInputs = ({ field, typeForm = '', inputs }: GroupedConsentsProps) => {
+  const { consentInputs, restInputs } = splitInputs(inputs || []);
+
+  return consentInputs.length > 2 ? (
+    <div>
+      {restInputs.map(getField(field, typeForm))}
+      <GroupedConsents inputs={consentInputs} field={field} />
+    </div>
+  ) : (
+    (inputs || [])?.map(getField(field, typeForm))
+  );
+};
+
+const splitInputs = (inputs?: FieldDef[]) => ({
+  consentInputs: inputs?.filter((_) => CONSENTS.includes(_.name)) || [],
+  restInputs: inputs?.filter((_) => !CONSENTS.includes(_.name)) || [],
+});

package/src/components/ApplicationLeadForm/ApplicationLeadFormContent.ts

@@ -1,9 +1,11 @@
 /* eslint-disable max-len */
 
+import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { type LabelProps, type TextProps, type TitleProps } from '../../model/HeadlineType';
 import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { type Target } from '../../model/LinkProps';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+import { type FormState } from './getInitialFormState';
 
 interface Required {
   /** @title Обязательно для заполнения */
@@ -53,7 +55,13 @@ export type NameFieldDef =
   | 'localities'
   | 'partnerComments'
   | 'consentDataProcessing'
-  | 'consentToAllDocs';
+  | 'consentInformFlg'
+  | 'consentCollectionFlg'
+  | 'consentAssignmentClaimsFlg'
+  | 'consentPhotoFlg'
+  | 'consentPfrFlg'
+  | 'consentProviderFlg'
+  | 'processPersonalDataLeadFlg';
 
 export type ConditionFieldProps = {
   /** @title Условия отображения полей формы */
@@ -77,6 +85,7 @@ export type FieldDefaultDef = Required &
 export type FieldCommonDef = FieldDefaultDef & {
   /** @default "common" */
   fieldType: 'common';
+  dadata?: boolean;
 };
 
 /**
@@ -160,3 +169,10 @@ export type ApplicationLeadFormContent = UniBlockContent &
     sections?: SectionsProps[];
     endpoint?: EndpointType;
   };
+
+/** @hidden */
+export interface GroupedConsentsProps {
+  inputs?: FieldDef[];
+  typeForm?: TypeFormFieldDef | string;
+  field: FormFieldRegisterer<FormState>;
+}

package/src/components/ApplicationLeadForm/GroupedConsents.tsx

@@ -0,0 +1,79 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { type VNode } from '../../model/VNode';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { type FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { getField } from '../../ui-kit/FormField/getField';
+import { validatorObj } from '../../ui-kit/FormField/getObjectValidator';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { renderErrorText } from '../../ui-kit/Input/renderErrorText';
+import { withValidator } from '../../validation/withValidator';
+import { type GroupedConsentsProps } from './ApplicationLeadFormContent';
+import { type FormState } from './getInitialFormState';
+
+const CONSENT_ALL_DOCS_TEXT = 'Согласие на все документы';
+const CONSENT_REQUIRED = 'Отметьте все обязательные соглашения';
+
+export const GroupedConsents = JSX<GroupedConsentsProps>(
+  ({ inputs = [], typeForm = '', field, key }) => {
+    const isChecked = inputs.every((_) => Boolean(field(_.name).value));
+
+    const handleGeneralToggle = (value: boolean) => {
+      for (const item of inputs) {
+        const itemField = field(item.name as keyof FormState);
+        itemField?.onChange && itemField.onChange(value);
+      }
+    };
+
+    const hasValidationErrors = useMemo(
+      () =>
+        inputs
+          ?.filter((_) => _.required)
+          ?.some((_) => Boolean(withValidator(field(_?.name), validatorObj[_?.name]).error)),
+      [inputs],
+    );
+
+    return (
+      <div className="w-fit">
+        <Foldable
+          isFoldButtonOnTop
+          renderFoldableSection={({ isUnfolded }) => (
+            <FoldableSection isUnfolded={isUnfolded} className="flex flex-col pl-2xl">
+              {inputs.map(getField(field, typeForm))}
+            </FoldableSection>
+          )}
+          renderFoldButton={renderGeneralCheckbox(
+            <div>
+              <Checkbox
+                value={isChecked}
+                onChange={handleGeneralToggle}
+                text={CONSENT_ALL_DOCS_TEXT}
+                key={key}
+              />
+              {renderErrorText(hasValidationErrors ? CONSENT_REQUIRED : '')}
+            </div>,
+          )}
+        />
+      </div>
+    );
+  },
+);
+
+const renderGeneralCheckbox =
+  (generalCheckBox: VNode) =>
+  (foldableData: FoldablePartProps): VNode =>
+    (
+      <div className="flex items-start">
+        {generalCheckBox}
+        <button onClick={foldableData.onToggle} className="px-m py-2xs">
+          <Icon
+            className="text-primary-text"
+            name={foldableData.isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+            width="16"
+            height="16"
+          />
+        </button>
+      </div>
+    );

package/src/components/ApplicationLeadForm/consents.ts

@@ -0,0 +1,10 @@
+export const CONSENTS = [
+  'processPersonalDataLeadFlg',
+  'consentProviderFlg',
+  'consentPfrFlg',
+  'consentPhotoFlg',
+  'consentAssignmentClaimsFlg',
+  'consentCollectionFlg',
+  'consentInformFlg',
+  'consentToReceiveMaterials',
+];

package/src/components/ApplicationLeadForm/getInitialFormState.tsx

@@ -14,6 +14,7 @@ export interface FormState {
   surname?: string;
   name?: string;
   middleName?: string;
+  fullName?: string;
   birthday?: Date;
   phone?: string;
   secondaryPhone?: string;
@@ -28,7 +29,28 @@ export interface FormState {
   term?: number;
   amount?: number;
   annualRevenue?: string;
+  serviceDirection?: string;
+  desiredMeetingDate?: string;
+  inn?: number;
+  addressBranch?: string;
+  bankEmpolee?: string;
+  applicationDate?: string;
+  comment?: string;
+  isClient?: boolean;
+  feedbackMethod?: string;
+  collectionCount?: number;
+  product?: string;
+  localities?: string[];
+  partnerComments?: string;
   consentDataProcessing?: boolean;
+  processPersonalDataLeadFlg?: boolean;
+  consentProviderFlg?: boolean;
+  consentPfrFlg?: boolean;
+  consentPhotoFlg?: boolean;
+  consentAssignmentClaimsFlg?: boolean;
+  consentCollectionFlg?: boolean;
+  consentInformFlg?: boolean;
+  consentToReceiveMaterials?: boolean;
 }
 
 const initialFormState = {
@@ -57,6 +79,12 @@ const initialFormState = {
   posTerminal: false,
   consentToReceiveMaterials: false,
   consentDataProcessing: false,
+  processPersonalDataLeadFlg: false,
+  consentProviderFlg: false,
+  consentPhotoFlg: false,
+  consentAssignmentClaimsFlg: false,
+  consentCollectionFlg: false,
+  consentInformFlg: false,
 };
 
 export const getInitialFormState = (inputs: FieldDef[], typeForm = ''): FormState => {

package/src/index.ts

@@ -1,6 +1,5 @@
 export { setupHooks } from '@redneckz/uni-jsx/lib/hooks';
 export { setup } from '@redneckz/uni-jsx/lib/setup';
-export { DaDataAPI } from './api/DaDataAPI';
 export { Blocks } from './components/Blocks';
 export { ContentPage } from './components/ContentPage/ContentPage';
 export { handlerDecorator } from './hooks/handlerDecorator';

package/src/ui-kit/Checkbox/CheckboxProps.ts

@@ -7,9 +7,3 @@ export interface CheckboxProps {
   onChange?: (value: boolean) => void;
   error?: string;
 }
-
-export interface CheckboxGroupProps {
-  className?: string;
-  items?: CheckboxProps[];
-  text?: string;
-}

package/src/ui-kit/Checkbox/CheckboxWithError.tsx

@@ -6,7 +6,7 @@ import { type CheckboxProps } from './CheckboxProps';
 
 export const CheckboxWithError = JSX<CheckboxProps>(
   ({ className, text, value, key, disabled, error, onChange }) => (
-    <div className={style('shrink-0 w-full', className)}>
+    <div className={style('shrink-0', className)}>
       <Checkbox key={key} text={text} value={value} disabled={disabled} onChange={onChange} />
       {renderErrorText(error)}
     </div>

package/src/ui-kit/FormField/Fields/ConsentAssignmentField.tsx

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { withValidator } from '../../../validation/withValidator';
+import { CheckboxWithError } from '../../Checkbox/CheckboxWithError';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+
+export const ConsentAssignmentField = JSX<CustomFieldProps>(({ field }) => (
+  <CheckboxWithError
+    text="Прочие согласия (согласие на уступку прав требований)"
+    {...withValidator(field('consentAssignmentClaimsFlg'), validatorObj.consentAssignmentClaimsFlg)}
+  />
+));

package/src/ui-kit/FormField/Fields/ConsentCollectionField.tsx

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { withValidator } from '../../../validation/withValidator';
+import { CheckboxWithError } from '../../Checkbox/CheckboxWithError';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+
+export const ConsentCollectionField = JSX<CustomFieldProps>(({ field }) => (
+  <CheckboxWithError
+    text="Прочие согласия (согласие на взыскание по исполнительной надписи нотариуса)"
+    {...withValidator(field('consentCollectionFlg'), validatorObj.consentCollectionFlg)}
+  />
+));

package/src/ui-kit/FormField/Fields/ConsentInformField.tsx

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { withValidator } from '../../../validation/withValidator';
+import { CheckboxWithError } from '../../Checkbox/CheckboxWithError';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+
+export const ConsentInformField = JSX<CustomFieldProps>(({ field }) => (
+  <CheckboxWithError
+    text="Согласие на информирование о продуктах и услугах Банка"
+    {...withValidator(field('consentInformFlg'), validatorObj.consentInformFlg)}
+  />
+));