@redneckz/wildless-cms-uni-blocks 0.14.823 → 0.14.824

package/mobile/src/components/ApplicationLeadForm/useInitApplicationLead.ts

@@ -1,11 +1,9 @@
 import { useCallback, useEffect, useMemo } from '@redneckz/uni-jsx/lib/hooks';
-import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
-import { locationNavigator } from '../../external/locationNavigator';
 import { useSetter } from '../../hooks/useSetter';
-import { updateProfileEsia } from '../../retail/api/updateProfileEsia';
+import { esiaRequestProfile } from '../../retail/api/esiaRequestProfile';
 import { type LeadFormState } from '../../retail/model/LeadFormState';
 import { type FieldRetailDef } from '../../retail/model/RetailFormContent';
-import { safeJsonParse } from '../../utils/safeJsonParse';
+import { EsiaStatuses } from './ApplicationLeadForm';
 import { type ProductType } from './ApplicationLeadFormContent';
 import { getInitialFormState } from './getInitialFormState';
 import { parseEsiaProfile } from './parseEsiaProfile';
@@ -15,76 +13,62 @@ type InitApplicationLeadProps = {
   inputs: FieldRetailDef[];
   nextStepLink: string;
   productType: ProductType;
-  setEsiaError: () => void;
+  setEsiaStatus: (status: EsiaStatuses) => void;
+  esiaAuthSuccess: boolean;
 };
 
 export const useInitApplicationLead = ({
   inputs,
-  nextStepLink,
   productType,
-  setEsiaError,
-}: InitApplicationLeadProps): [LeadFormState, { isLoading: boolean }] => {
-  const navigator = locationNavigator();
-  const [isLoading, { setTrue: startLoading, setFalse: endLoading }] = useBool(false);
-
+  setEsiaStatus,
+  esiaAuthSuccess,
+}: InitApplicationLeadProps): LeadFormState => {
   const leadFormStore = useLeadFormStore();
   const saveForm = useSetter(leadFormStore, 'leadForm');
 
   const initialFormState = useMemo(
-    () => getInitialFormState(inputs, leadFormStore.leadForm),
+    () => getInitialFormState(inputs, leadFormStore.leadForm, esiaAuthSuccess),
     [inputs, leadFormStore.leadForm],
   );
 
-  const updateEsiaProfile = useCallback(
-    async (profileId: string, code: string, state: string) => {
-      startLoading();
-      try {
-        const data = await updateProfileEsia({
-          profileId,
-          code,
-          state,
-          redirectUri: globalThis.location?.href,
-        });
-
-        if (data && leadFormStore?.taskId) {
-          const parsedData = await parseEsiaProfile(
-            data,
-            leadFormStore.taskId.toString(),
-            productType === 'debitCard',
-          );
+  const requestEsiaProfile = useCallback(async (code: string, state: string) => {
+    setEsiaStatus(EsiaStatuses.Pending);
+    try {
+      const data = await esiaRequestProfile({
+        code,
+        state,
+        redirectUri: globalThis.location?.href,
+        authorize: true,
+      });
 
-          saveForm((_) => ({
-            ..._,
-            ...parsedData,
-          }));
-        }
+      if (data) {
+        const parsedData = await parseEsiaProfile(data, productType === 'debitCard');
 
-        navigator.assign(nextStepLink);
-      } catch {
-        setEsiaError();
-      } finally {
-        endLoading();
+        saveForm((_) => ({
+          ..._,
+          ...parsedData,
+        }));
+        setEsiaStatus(EsiaStatuses.Success);
       }
-    },
-    [nextStepLink],
-  );
+    } catch {
+      setEsiaStatus(EsiaStatuses.Error);
+    }
+  }, []);
 
   useEffect(() => {
     leadFormStore.productType = productType;
-    const profileId: string = <string>(
-      safeJsonParse(globalThis.localStorage?.getItem('profileId') ?? '')
-    );
+
     const params = new URLSearchParams(decodeURIComponent(globalThis.location?.search));
     const code = params.get('code');
     const state = params.get('state');
 
-    if (profileId && code && state) {
-      updateEsiaProfile(profileId, code, state);
+    if (code && state) {
+      requestEsiaProfile(code, state);
     } else {
       sessionStorage.removeItem('accessToken');
       sessionStorage.removeItem('refreshToken');
     }
   }, []);
 
-  return [initialFormState, { isLoading }];
+  return initialFormState;
 };

package/mobile/src/retail/api/checkCode.ts

@@ -16,7 +16,7 @@ export type CheckCodeResponse = {
 export const checkCode = async (body: CheckCodeBody) =>
   fetchRetailJSON<CheckCodeResponse>('/sms/checkCode', 'POST', body).then(saveToken);
 
-const saveToken = (data: CheckCodeResponse | null) => {
+export const saveToken = (data: CheckCodeResponse | null) => {
   if (data) {
     globalThis.sessionStorage.setItem('accessToken', data.access_token);
     globalThis.sessionStorage.setItem('refreshToken', data.refresh_token);

package/mobile/src/retail/api/{updateProfileEsia.ts → esiaRequestProfile.ts}

@@ -1,13 +1,14 @@
+import { saveToken, type CheckCodeResponse } from './checkCode';
 import { fetchRetailJSON } from './doRequest';
 
-export type UpdateProfileEsiaBody = {
+export type EsiaRequestProfileBody = {
   code: string;
-  profileId: string;
+  authorize: boolean;
   state: string;
   redirectUri: string;
 };
 
-export type UpdateProfileEsiaResponse = {
+export type EsiaRequestProfileResponse = CheckCodeResponse & {
   profile: {
     id: number;
     esiaId: string;
@@ -75,8 +76,18 @@ export type UpdateProfileEsiaResponse = {
     workLengthLastJob: number;
     pdfFileWorkbook: string;
     pdfFilePayout: string;
+    pdfFileSigPayout: string;
+    pdfFileSigWorkbook: string;
+    xmlFilePayout: string;
+    xmlFileSigPayout: string;
+    xmlFileSigWorkbook: string;
+    xmlFileWorkbook: string;
   };
 };
 
-export const updateProfileEsia = (body: UpdateProfileEsiaBody) =>
-  fetchRetailJSON<UpdateProfileEsiaResponse>('/esia/updateProfileEsia', 'POST', body);
+export const esiaRequestProfile = (body: EsiaRequestProfileBody) =>
+  fetchRetailJSON<EsiaRequestProfileResponse>('/esia/requestProfile', 'POST', body).then((res) => {
+    saveToken(res);
+
+    return res;
+  });

package/mobile/src/retail/api/updateUserTask.ts

@@ -52,6 +52,7 @@ export type Participant = {
   surname?: string;
   profile?: {
     id: number;
+    esiaAccountTypeCd?: Option;
   };
   armyIdFlg?: boolean;
   birthPlace?: string;

package/mobile/src/retail/api/uploadFile.ts

@@ -5,13 +5,12 @@ export type DocumentCategory = 'CONFIRMING_EMPLOYMENT_DOC' | 'CONFIRMING_INCOME_
 
 export const uploadFile = async (
   file: Blob,
-  taskId: string,
   documentCategory: DocumentCategory,
+  isPDF = false,
 ): Promise<File> => {
   const fd = new FormData();
-  fd.append('taskId', taskId);
   fd.append('documentCategory', documentCategory);
-  fd.append('file', file, 'file.pdf');
+  fd.append('file', file, `file.${isPDF ? 'pdf' : 'xml'}`);
 
   const res = await globalThis
     ?.fetch?.(`/light-api-cash/v1/file`, {

package/mobile/src/retail/components/DraftDialog/parseDraftTask.ts

@@ -68,6 +68,7 @@ export const parseDraftTask = (task: Task): LeadFormState => {
     payrollCardRshbFlg: isInsurance,
     consentInsuranceFlg: isSalaryClient,
     incomeCertificateCd,
+    profile,
   } = participant;
 
   return {
@@ -121,6 +122,7 @@ export const parseDraftTask = (task: Task): LeadFormState => {
       monthsValue,
       isAnnuity: paymentTypeCd?.key === 'ANNUITY',
     },
+    esiaAccountTypeCd: profile?.esiaAccountTypeCd,
     ...getParticipantIncomes(participantIncomes),
     ...getParticipantAddresses(participantAddresses),
     ...getParticipantContacts(participantContacts),

package/mobile/src/retail/components/Fields/BeginDateField.tsx

@@ -1,11 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { DatePickerControl } from '../../../ui-kit/DatePicker/DatePickerControl';
 import { type CustomFieldProps } from '../../../ui-kit/FormField/CustomFieldProps';
+import { isEsiaAuthorize } from '../../utils/isEsiaAuthorize';
 
 export const BeginDateField = JSX<CustomFieldProps>(({ field, input }) => (
   <DatePickerControl
     label="Дата начала работы на текущем месте"
     {...field(input?.name ?? '')}
     {...input}
+    disabled={input?.filledByEsia && isEsiaAuthorize(field, input?.name ?? '')}
   />
 ));

package/mobile/src/retail/components/Fields/ConfirmationIncomeField.tsx

@@ -1,18 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type CustomFieldProps } from '../../../ui-kit/FormField/CustomFieldProps';
+import { InfoCard } from '../../../ui-kit/InfoCard/InfoCard';
 import { useLeadFormData } from '../../hooks/useLeadFormData';
+import { isEsiaAuthorize } from '../../utils/isEsiaAuthorize';
 import { SelectField } from './SelectField';
 
 export const ConfirmationIncomeField = JSX<CustomFieldProps>(({ field, input }) => {
   const { data: confirmationIncome } = useLeadFormData('INCOME_CERT_UNITED');
+  const filledByEsia = input?.filledByEsia && isEsiaAuthorize(field, input?.name ?? '');
 
   return (
-    <SelectField
-      field={field}
-      source={confirmationIncome}
-      label="Способ подтверждения дохода"
-      fieldName="confirmationIncome"
-      input={input}
-    />
+    <div>
+      {filledByEsia ? (
+        <div className="mb-6">
+          <InfoCard __html="Для выбора иного способа подтверждения дохода, оформите новую заявку на кредит без авторизации на портале Госуслуги" />
+        </div>
+      ) : null}
+      <SelectField
+        field={field}
+        source={confirmationIncome}
+        label="Способ подтверждения дохода"
+        fieldName="confirmationIncome"
+        input={input}
+        disabled={filledByEsia}
+      />
+    </div>
   );
 });

package/mobile/src/retail/components/Fields/DaDataInnField.tsx

@@ -4,6 +4,7 @@ import { type CustomFieldProps } from '../../../ui-kit/FormField/CustomFieldProp
 import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
 import { getOrganizationFromInn } from '../../api/getOrganizationFromInn';
 import { useRetailFormStore } from '../../hooks/useRetailFormStore';
+import { isEsiaAuthorize } from '../../utils/isEsiaAuthorize';
 import { updateOrganizationFields } from '../../utils/updateOrganizationFields';
 import { DaDataInputControl } from '../DaDataInputControl/DaDataInputControl';
 
@@ -41,6 +42,7 @@ export const DaDataInnField = JSX<CustomFieldProps>(({ field, input }) => {
       {...input}
       {...field(input?.name ?? '')}
       onDaDataChange={onDaDataChange}
+      disabled={input?.filledByEsia && isEsiaAuthorize(field, input?.name ?? '')}
     />
   );
 });

package/mobile/src/retail/components/Fields/Experience5YearsField.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type CustomFieldProps } from '../../../ui-kit/FormField/CustomFieldProps';
 import { clamp } from '../../../utils/clamp';
+import { isEsiaAuthorize } from '../../utils/isEsiaAuthorize';
 import { DaDataInputControl } from '../DaDataInputControl/DaDataInputControl';
 
 const MAX_YEARS = 5;
@@ -22,6 +23,7 @@ export const Experience5YearsField = JSX<CustomFieldProps>(({ field, input }) =>
       {...field(input?.name ?? '')}
       {...input}
       onChange={onChange}
+      disabled={input?.filledByEsia && isEsiaAuthorize(field, input?.name ?? '')}
     />
   );
 });

package/mobile/src/retail/components/Fields/GeneralSeniorityField.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type CustomFieldProps } from '../../../ui-kit/FormField/CustomFieldProps';
+import { isEsiaAuthorize } from '../../utils/isEsiaAuthorize';
 import { DaDataInputControl } from '../DaDataInputControl/DaDataInputControl';
 
 export const GeneralSeniorityField = JSX<CustomFieldProps>(({ field, input }) => (
@@ -10,5 +11,6 @@ export const GeneralSeniorityField = JSX<CustomFieldProps>(({ field, input }) =>
     placeholder="Количество лет"
     {...field(input?.name ?? '')}
     {...input}
+    disabled={input?.filledByEsia && isEsiaAuthorize(field, input?.name ?? '')}
   />
 ));

package/mobile/src/retail/components/Fields/JobsNumberField.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type CustomFieldProps } from '../../../ui-kit/FormField/CustomFieldProps';
+import { isEsiaAuthorize } from '../../utils/isEsiaAuthorize';
 import { DaDataInputControl } from '../DaDataInputControl/DaDataInputControl';
 
 export const JobsNumberField = JSX<CustomFieldProps>(({ field, input }) => (
@@ -10,5 +11,6 @@ export const JobsNumberField = JSX<CustomFieldProps>(({ field, input }) => (
     maxLength={2}
     {...field(input?.name ?? '')}
     {...input}
+    disabled={input?.filledByEsia && isEsiaAuthorize(field, input?.name ?? '')}
   />
 ));

package/mobile/src/retail/components/Fields/LastJobExperienceField.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type CustomFieldProps } from '../../../ui-kit/FormField/CustomFieldProps';
+import { isEsiaAuthorize } from '../../utils/isEsiaAuthorize';
 import { DaDataInputControl } from '../DaDataInputControl/DaDataInputControl';
 
 export const LastJobExperienceField = JSX<CustomFieldProps>(({ field, input }) => (
@@ -10,5 +11,6 @@ export const LastJobExperienceField = JSX<CustomFieldProps>(({ field, input }) =
     maxLength={2}
     {...field(input?.name ?? '')}
     {...input}
+    disabled={input?.filledByEsia && isEsiaAuthorize(field, input?.name ?? '')}
   />
 ));

package/mobile/src/retail/components/Fields/OrganizationNameField.tsx

@@ -3,6 +3,7 @@ import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type CustomFieldProps } from '../../../ui-kit/FormField/CustomFieldProps';
 import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
 import { useRetailFormStore } from '../../hooks/useRetailFormStore';
+import { isEsiaAuthorize } from '../../utils/isEsiaAuthorize';
 import { updateOrganizationFields } from '../../utils/updateOrganizationFields';
 import { DaDataInputControl } from '../DaDataInputControl/DaDataInputControl';
 
@@ -19,6 +20,7 @@ export const OrganizationNameField = JSX<CustomFieldProps>(({ field, input }) =>
       label="Наименование организации"
       {...input}
       {...field(input?.name ?? '')}
+      disabled={input?.filledByEsia && isEsiaAuthorize(field, input?.name ?? '')}
       onDaDataChange={onDaDataChange}
     />
   );

package/mobile/src/retail/components/Fields/WagesField.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type CustomFieldProps } from '../../../ui-kit/FormField/CustomFieldProps';
+import { isEsiaAuthorize } from '../../utils/isEsiaAuthorize';
 import { DaDataInputControl } from '../DaDataInputControl/DaDataInputControl';
 
 export const WagesField = JSX<CustomFieldProps>(({ field, input }) => (
@@ -9,5 +10,6 @@ export const WagesField = JSX<CustomFieldProps>(({ field, input }) => (
     isInteger={true}
     {...field(input?.name ?? '')}
     {...input}
+    disabled={input?.filledByEsia && isEsiaAuthorize(field, input?.name ?? '')}
   />
 ));

package/mobile/src/retail/content.tsx

@@ -139,7 +139,7 @@ const EMPLOYMENT_CONTENT: CreditCardSectionsProps[] = [
         label: 'Телефон работодателя',
         required: true,
       },
-      { name: 'beginDate', required: true },
+      { name: 'beginDate', required: true, filledByEsia: true },
     ],
   },
   {
@@ -181,16 +181,22 @@ const FAMILY_STATUS_AND_INCOME_CONTENT: CreditCardSectionsProps[] = [
     title: 'Совокупный доход',
   },
   {
+    columns: 1,
     inputs: [
       {
-        name: 'infoCard',
-        label: 'Сумма основного и дополнительных доходов после вычета налога',
+        name: 'confirmationIncome',
+        required: true,
+        filledByEsia: true,
       },
     ],
   },
   {
-    columns: 1,
-    inputs: [{ name: 'confirmationIncome', required: true }],
+    inputs: [
+      {
+        name: 'infoCard',
+        label: 'Сумма основного и дополнительных доходов после вычета налога',
+      },
+    ],
   },
   {
     columns: 1,

package/mobile/src/retail/model/NameFieldDef.ts

@@ -86,6 +86,7 @@ type NameFieldRetailDef =
   | 'calculator'
   | 'infoCard'
   | 'deliveryTime'
+  | 'esiaAccountTypeCd'
   | 'comment';
 
 export type NameFieldDef =

package/mobile/src/retail/utils/mainFormStateMap.ts

@@ -56,6 +56,7 @@ export const mainFormStateMap: Partial<LeadFormState>[] = [
     mandatoryPayments: undefined,
     snils: '',
     armyIdFlg: false,
+    esiaAccountTypeCd: { key: '', text: '' },
   },
   {
     bankruptcyFlg: false,

package/mobile/src/ui-kit/FormField/Fields/PhoneField.tsx

@@ -1,9 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { isEsiaAuthorize } from '../../../retail/utils/isEsiaAuthorize';
 import { InputPhoneControl } from '../../Input/InputPhoneControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 
 export const PhoneField = JSX<CustomFieldProps>(({ field, input }) => {
   const fieldName = input?.name || 'phone';
 
-  return <InputPhoneControl label="Телефон" {...field(fieldName)} {...input} />;
+  return (
+    <InputPhoneControl
+      label="Телефон"
+      disabled={input?.filledByEsia && isEsiaAuthorize(field, input.name ?? '')}
+      {...field(fieldName)}
+      {...input}
+    />
+  );
 });

package/mobile/src/ui-kit/FormField/shouldRenderField.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
 import { type BaseFieldDef } from './BaseFieldDef';
 
@@ -11,5 +12,5 @@ export function shouldRenderField<F extends BaseFieldDef>({
   const { condition } = input;
   const { value } = field(condition?.name || '');
 
-  return !condition || condition?.values?.find((_) => _ === (value?.key ?? value));
+  return !condition || condition?.values?.includes(value?.key ?? value);
 }

package/package.json

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

package/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -1,6 +1,6 @@
+/* eslint-disable max-lines-per-function */
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useMemo } from '@redneckz/uni-jsx/lib/hooks';
-import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm/useForm';
 import { type SectionsRetailProps } from '../../retail/model/InputSectionsType';
 import { type FieldRetailDef } from '../../retail/model/RetailFormContent';
@@ -18,6 +18,7 @@ import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { getApplicationFormData } from './applicationFormData';
 import { type ApplicationLeadFormContent, type ProductType } from './ApplicationLeadFormContent';
+import { EsiaLoginBanner } from './EsiaLoginBanner';
 import { renderInputs } from './renderInputs';
 import { renderSubmitButton } from './renderSubmitButton';
 import { useApplicationLeadApi } from './useApplicationLeadApi';
@@ -25,6 +26,12 @@ import { useInitApplicationLead } from './useInitApplicationLead';
 
 interface ApplicationLeadFormProps extends ApplicationLeadFormContent, UniBlockProps {}
 
+export enum EsiaStatuses {
+  Success = 'SUCCESS',
+  Error = 'ERROR',
+  Pending = 'PENDING',
+}
+
 export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
   ({
     className,
@@ -36,7 +43,8 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
     data,
     ...rest
   }) => {
-    const [esiaError, { setTrue: setEsiaError }] = useBool(false);
+    const [esiaStatus, setEsiaStatus] = useState<EsiaStatuses>();
+    const leadForm = useRef<HTMLFormElement | null>(null);
     const applicationFormData = useMemo(() => getApplicationFormData(productType), [productType]);
     const inputs = useMemo(() => getInputs(applicationFormData), [applicationFormData]);
 
@@ -46,21 +54,21 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
       [inputs, extendedValidatorObj],
     );
 
-    const [initialFormState, { isLoading }] = useInitApplicationLead({
+    const initialFormState = useInitApplicationLead({
       inputs,
       nextStepLink,
       productType,
-      setEsiaError,
+      setEsiaStatus,
+      esiaAuthSuccess: esiaStatus === EsiaStatuses.Success,
     });
     const { isSending, ok, handleSubmit } = useApplicationLeadApi({
       programId,
       nextStepLink,
       productType,
-      esiaError,
       data,
     });
 
-    const [, { field, onSubmit }] = useForm(initialFormState, {
+    const [, { field, onSubmit, reset }] = useForm(initialFormState, {
       formValidator,
       onSubmit: handleSubmit,
     });
@@ -72,14 +80,27 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
       }
     }, [ok]);
 
+    useEffect(() => {
+      if (esiaStatus && leadForm?.current) {
+        leadForm.current.scrollIntoView({
+          block: 'start',
+        });
+      }
+
+      if (esiaStatus === EsiaStatuses.Success) {
+        reset();
+      }
+    }, [leadForm?.current, esiaStatus]);
+
     return (
       <ApplicationFormLayout
         className={style('container space-y-m', className)}
         title={title}
         {...rest}
       >
-        <form onSubmit={onSubmit} className="space-y-m relative">
-          {isLoading ? <Loader blur={false} /> : null}
+        {!esiaStatus ? <EsiaLoginBanner /> : null}
+        <form onSubmit={onSubmit} className="space-y-m relative" ref={leadForm}>
+          {esiaStatus === EsiaStatuses.Pending ? <Loader blur={false} /> : null}
           {applicationFormData.map((_, i) => (
             <div
               key={`section-${i}`}
@@ -90,7 +111,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
             </div>
           ))}
           {renderSubmitButton(button, isSending)}
-          {esiaError ? (
+          {esiaStatus === EsiaStatuses.Error ? (
             <Text size="text-m" font="font-medium" color="text-error">
               Использовать Госуслуги для оформления заявки невозможно, необходимо заполнить поля
               вручную.

package/src/components/ApplicationLeadForm/EsiaLoginBanner.tsx

@@ -0,0 +1,51 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { locationNavigator } from '../../external/locationNavigator';
+import { getLink } from '../../retail/api/getLink';
+import { Button } from '../../ui-kit/Button/Button';
+import { Img } from '../../ui-kit/Img/Img';
+
+export interface EsiaLoginBannerProps {
+  onClose?: () => void;
+}
+
+export const EsiaLoginBanner = JSX<EsiaLoginBannerProps>(() => {
+  const navigator = locationNavigator();
+
+  const handleAuth = useCallback(async () => {
+    const resp = await getLink({
+      redirectUri: globalThis.location.origin + globalThis.location.pathname,
+    });
+
+    if (resp?.link) {
+      navigator.assign(resp.link);
+    }
+  }, []);
+
+  return (
+    <div className="flex gap-lg items-center rounded-md bg-main-gray px-4 py-6 @md:p-9">
+      <div className="flex flex-col justify-around w-full">
+        <p className="mb-4 text-xl @md:text-2xl @md:mb-6">Заполните данные через Госуслуги</p>
+        <ul className="list-disc list-inside mb-9">
+          <li>Вероятность одобрения выше</li>
+          <li>Без справок о доходах и трудоустройстве</li>
+          <li>С защитой Ваших данных</li>
+        </ul>
+        <Img
+          className="block mb-6 self-center @md:hidden"
+          image={{ icon: 'GosUslugiIcon', iconVersion: 'normal' }}
+          height="80"
+          width="80"
+        />
+        <Button type="button" onClick={handleAuth} className="w-full @md:w-fit">
+          Заполнить
+        </Button>
+      </div>
+      <Img
+        className="hidden @md:block"
+        image={{ icon: 'GosUslugiIcon', iconVersion: 'normal' }}
+        height="164"
+      />
+    </div>
+  );
+});