@redneckz/wildless-cms-uni-blocks 0.14.813 → 0.14.815

package/mobile/src/components/GalleryLayout/GalleryLayout.tsx

@@ -0,0 +1,140 @@
+import { type JSONSchema7Definition } from 'json-schema';
+import { renderBlock } from '../../BlockRenderer/renderBlock';
+import { type ChildRenderProps } from '../../BlockRenderer/renderBlockList';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
+import { type BlockDecorator } from '../../model/BlockDecorator';
+import { type BlockDef } from '../../model/ContentPageDef';
+import { type LinkProps } from '../../model/LinkProps';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
+import { UniBlock } from '../../UniBlock/UniBlock';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { getBorderStyle } from '../../utils/getBorderStyle';
+import { getInnerPadding } from '../../utils/getInnerPadding';
+import { style } from '../../utils/style';
+import { gapStyles } from '../HorizontalLayout/gapStyles';
+import { type ProductBlockContent } from '../ProductBlock/ProductBlockContent';
+import { type GalleryLayoutContent } from './GalleryLayoutContent';
+
+const MIN_LENGTH_CHILD = 5;
+const SHORT_TILE_INDEXES = [1, 2, 3, 4];
+const LINK_SCHEMA: Record<string, JSONSchema7Definition> = {
+  link: {
+    allOf: [
+      { $ref: `#/definitions/LinkCommonProps` },
+      {
+        type: 'object',
+        properties: {
+          data: {
+            type: 'array',
+            items: { $ref: '#/definitions/AspectsDef' },
+            title: 'Дополнительные атрибуты',
+          },
+        },
+      },
+    ],
+    title: 'Ссылка',
+    required: ['href'],
+  },
+};
+
+export interface GalleryLayoutProps extends GalleryLayoutContent, UniBlockProps {}
+
+export const GalleryLayout = UniBlock<GalleryLayoutProps>(
+  ({
+    className = '',
+    padding = 'p-0',
+    gap = '',
+    isInnerPadding = true,
+    version = 'transparent',
+    isTheme = false,
+    isCardBorder = false,
+    ...rest
+  }) => (
+    <BlockWrapper
+      className={style(
+        'grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-4 lg:auto-rows-fr',
+        gapStyles[gap],
+        className,
+      )}
+      padding={padding}
+      version={version}
+      isTheme={isTheme}
+      {...rest}
+    >
+      {renderChildren({
+        ...rest,
+        renderProps: getRenderProps({ isInnerPadding, isCardBorder }),
+      })}
+    </BlockWrapper>
+  ),
+  {
+    childrenTypes: ['ProductBlock'],
+    childSchema: () => LINK_SCHEMA,
+    allowRemoveChild: (slot) => (slot?.blocks ?? []).length > MIN_LENGTH_CHILD,
+  },
+);
+
+const getRenderProps =
+  ({
+    isInnerPadding,
+    isCardBorder,
+  }: {
+    isInnerPadding: boolean;
+    isCardBorder: boolean;
+  }): ChildRenderProps =>
+  (childBlock, childOptions, i) =>
+    renderBlock(
+      childBlock,
+      {
+        ...childOptions,
+        blockDecorator: blockDecoratorWrapper(childOptions.blockDecorator, i),
+      },
+      {
+        className: style('w-full', getBorderStyle(isCardBorder)),
+        ...getInnerPadding(isInnerPadding),
+      },
+    );
+
+const blockDecoratorWrapper =
+  (blockDecorator?: BlockDecorator, idx = 0): BlockDecorator =>
+  (props, i) =>
+    blockDecorator?.(
+      {
+        ...props,
+        render: (renderProps) => productBlockDecorator(idx)({ ...props, ...renderProps }, i),
+      },
+      `wrap_${i}`,
+    ) ?? productBlockDecorator(idx)(props, i);
+
+const productBlockDecorator =
+  (idx: number): BlockDecorator =>
+  ({ blockClassName, block, render }, i) =>
+    (
+      <LinkWrapper key={i} {...block.content?.link} className={getChildStyle(idx)}>
+        {render({
+          blockClassName: style(blockClassName, 'h-full'),
+          block: modifyBlock(block, idx),
+        })}
+      </LinkWrapper>
+    );
+
+const getChildStyle = (index: number) =>
+  SHORT_TILE_INDEXES.includes(index)
+    ? 'lg:col-span-1 lg:row-span-1'
+    : 'lg:col-span-2 lg:row-span-2';
+
+const modifyBlock = (block: BlockDef, i: number) => {
+  const content: ProductBlockContent & { link?: LinkProps } = { ...block.content };
+
+  if (SHORT_TILE_INDEXES.includes(i)) {
+    delete content.description;
+    delete content.benefits;
+  }
+
+  if (content.link?.href) {
+    delete content.buttons;
+  }
+
+  return { ...block, content };
+};

package/mobile/src/components/GalleryLayout/GalleryLayout.ui.json

@@ -0,0 +1 @@
+{}

package/mobile/src/components/GalleryLayout/GalleryLayoutContent.ts

@@ -0,0 +1,16 @@
+import { type ImageContent } from '../../ui-kit/Img/ImgProps';
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+import { type GapVersion } from '../HorizontalLayout/HorizontalLayoutContent';
+
+export type LayoutCommitProps = {
+  gap?: GapVersion;
+  /** @title контур на дочерних элементах */
+  isCardBorder?: boolean;
+  /** @title Отступы вложенных компонентов */
+  isInnerPadding?: boolean;
+};
+
+/**
+ * @title Компоновщик галереи
+ */
+export type GalleryLayoutContent = UniBlockContent & LayoutCommitProps & ImageContent;

package/mobile/src/retail/adaptors/getFamilyStatusAndIncomeData.ts

@@ -19,12 +19,13 @@ export const getFamilyStatusAndIncomeData = (formData: LeadFormState): Partial<P
     snils,
     armyIdFlg,
     conscription,
+    esiaAccountTypeCd,
   } = formData;
 
   return {
     maritalStatusCd: familyStatus,
     totalDependents: familyMembers,
-    incomeCertificateCd: confirmationIncome,
+    incomeCertificateCd: esiaAccountTypeCd?.key ? { key: 'SFR_CERTIFICATE' } : confirmationIncome,
     otherDependents: dependents,
     childrenDependents: children,
     militaryStatusCd: conscription,

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/content.tsx

@@ -190,7 +190,16 @@ const FAMILY_STATUS_AND_INCOME_CONTENT: CreditCardSectionsProps[] = [
   },
   {
     columns: 1,
-    inputs: [{ name: 'confirmationIncome', required: true }],
+    inputs: [
+      {
+        name: 'confirmationIncome',
+        required: true,
+        condition: {
+          name: 'esiaAccountTypeCd',
+          values: [''],
+        },
+      },
+    ],
   },
   {
     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/BaseProductTile/BaseProductTile.tsx

@@ -1,17 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Headline } from '../../components/Headline/Headline';
+import { type Align } from '../../model/Align';
 import { type HeadlineVersion } from '../../model/HeadlineType';
+import { type IconVersion } from '../../model/IconVersion';
 import { type VNode } from '../../model/VNode';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { BaseTile } from '../BaseTile/BaseTile';
+import { type BenefitItemContent } from '../BenefitItem/BenefitItemContent';
 import { BenefitsList } from '../BenefitsList/BenefitsList';
 import { Img } from '../Img/Img';
 import { renderButtonsSection } from '../LinkButton/renderButtonsSection';
 import { PriceList } from '../PriceList/PriceList';
 import { RichText } from '../RichText/RichText';
-import { type RichTextItemSize } from '../RichText/RichTextProps';
+import { type RichTextItemSize, type RichVersion } from '../RichText/RichTextProps';
 import { Tags } from '../Tags/Tags';
-import { type BaseProductTileContent } from './BaseProductTileContent';
+import { type BaseProductTileContent, type PriceItem } from './BaseProductTileContent';
 
 const RICHTEXT_SIZE: Record<HeadlineVersion, RichTextItemSize> = {
   XXL: 'list-l',
@@ -47,7 +50,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     buttons,
     image,
     imageOptions: {
-      imageAlign = 'center',
+      imageAlign = 'center' as Align,
       directionRight = true,
       isImageAlwaysOnRight,
       isImageSecondary = false,
@@ -84,31 +87,65 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
         backwardButton={backwardButton}
         {...rest}
       >
-        <div className="flex flex-col sm:gap-xl gap-4xl">
-          {filteredBenefits?.length ? (
-            <BenefitsList
-              benefitsVersion={benefitsVersion}
-              isTabularBenefits={isTabularBenefits}
-              benefits={filteredBenefits}
-            />
-          ) : null}
-          {__html ? (
-            <RichText
-              richVersion={richVersion}
-              __html={__html}
-              isDotted={isDotted}
-              itemSize={RICHTEXT_SIZE[headlineVersion]}
-            />
-          ) : null}
-          {children}
-          {priceList?.length ? <PriceList priceList={priceList} /> : null}
-          {renderTags(tags)}
-        </div>
+        {renderChildList(
+          renderBenefits(filteredBenefits, { benefitsVersion, isTabularBenefits }),
+          renderRichText(__html, { richVersion, isDotted, headlineVersion }),
+          children,
+          renderPriceList(priceList),
+          renderTags(tags),
+        )}
       </BaseTile>
     );
   },
 );
 
+const renderBenefits = (
+  benefits?: BenefitItemContent[],
+  {
+    benefitsVersion,
+    isTabularBenefits,
+  }: { benefitsVersion?: IconVersion; isTabularBenefits?: boolean } = {},
+) =>
+  benefits?.length ? (
+    <BenefitsList
+      benefitsVersion={benefitsVersion}
+      isTabularBenefits={isTabularBenefits}
+      benefits={benefits}
+    />
+  ) : null;
+
+const renderRichText = (
+  __html?: string,
+  {
+    richVersion,
+    isDotted,
+    headlineVersion,
+  }: { richVersion?: RichVersion; isDotted?: boolean; headlineVersion?: HeadlineVersion } = {},
+) =>
+  __html ? (
+    <RichText
+      __html={__html}
+      richVersion={richVersion}
+      isDotted={isDotted}
+      itemSize={RICHTEXT_SIZE[headlineVersion ?? 'L']}
+    />
+  ) : null;
+
+const renderPriceList = (priceList?: PriceItem[]) =>
+  priceList?.length ? <PriceList priceList={priceList} /> : null;
+
+const renderChildList = (...elements: VNode[]) => {
+  const cleanElements = elements.filter(Boolean);
+
+  return cleanElements.length ? (
+    <div className="flex flex-col sm:gap-xl gap-4xl">
+      {cleanElements.map((_, i) => (
+        <div key={String(i)}>{_}</div>
+      ))}
+    </div>
+  ) : null;
+};
+
 export const leftOrRightImage = (img: VNode, directionRight: boolean) =>
   directionRight ? { rightImage: img } : { leftImage: img };
 

package/mobile/src/ui-kit/BaseTile/BaseTile.tsx

@@ -55,7 +55,7 @@ export const BaseTile = JSX<BaseTileProps>(
         )}
       >
         {isBackBtn && renderBackwardButton({ version, handleClick, text: backwardButtonText })}
-        {title ? <div className="relative h-full">{title}</div> : null}
+        {title ? <div className="relative">{title}</div> : null}
         <div
           className={style('grow relative flex flex-col @xl:flex-row gap-3xl w-full', {
             'self-start @xl:w-auto': leftImage,
@@ -69,14 +69,10 @@ export const BaseTile = JSX<BaseTileProps>(
                 '@xl:grid-cols-2 auto-cols-fr': rightImage,
                 grow: !leftImage,
               },
-              'h-full', //? fix issue https://github.com/redneckz/temp_wcms/issues/1254
-              'auto-rows-[max-content_1fr]', //? fix issue https://github.com/redneckz/temp_wcms/issues/1324
+              'h-auto',
             )}
           >
-            <div className="grow space-y-lg min-w-fit">
-              {insetTitle}
-              {children}
-            </div>
+            {renderMiddleContent(insetTitle, children)}
             {renderUnitContainer(
               renderChildren({ ...rest, extraProps: { className: '@container-normal' } }),
             )}
@@ -96,6 +92,14 @@ export const BaseTile = JSX<BaseTileProps>(
   },
 );
 
+const renderMiddleContent = (insetTitle: VNode, children: VNode) =>
+  insetTitle || children ? (
+    <div className="grow space-y-lg min-w-fit">
+      {insetTitle}
+      {children}
+    </div>
+  ) : null;
+
 const imageAlwaysOnRightContainerStyle = (isImage: boolean) =>
   style(isImage ? 'row-span-2' : '@xl:row-span-2');
 

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.813",
+  "version": "0.14.815",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -214,7 +214,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "101 kB",
+      "limit": "102 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/BlockRenderer/renderBlock.tsx

@@ -42,11 +42,11 @@ export function renderBlock(
         return BlockComponent ? (
           <BlockComponent
             key={key}
-            className={adjustedBlockClassName}
-            block={block}
-            options={options}
             {...content}
             {...extraProps}
+            className={style(adjustedBlockClassName, content?.className as string)}
+            block={block}
+            options={options}
           />
         ) : null;
       },

package/src/UniBlock/UniBlock.tsx

@@ -3,7 +3,7 @@ import { JSX, type UNIComponent } from '@redneckz/uni-jsx';
 import { type JSONSchema7Definition } from 'json-schema';
 import { useJSONRef } from '../hooks/useJSONRef/useJSONRef';
 import { type SlotName } from '../model/BlockDecorator';
-import { type BlockDef } from '../model/ContentPageDef';
+import { type BlockDef, type Slot } from '../model/ContentPageDef';
 import { type VNode } from '../model/VNode';
 import { extractContent } from './extractContent';
 import { type UniBlockProps } from './UniBlockProps';
@@ -12,6 +12,8 @@ export interface UniBlockMeta<Props extends UniBlockProps = UniBlockProps> {
   displayName?: string;
   childrenTypes?: string[] | { include?: string[]; exclude?: string[] };
   childSchema?: (content: BlockDef['content']) => Record<string, JSONSchema7Definition>;
+  allowAddChild?: (slot?: Slot) => boolean;
+  allowRemoveChild?: (slot?: Slot) => boolean;
   slots?: (props: Props) => SlotName[];
 }
 

package/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -1,3 +1,4 @@
+/* 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';
@@ -16,6 +17,7 @@ import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { getApplicationFormData } from './applicationFormData';
 import { type ApplicationLeadFormContent } from './ApplicationLeadFormContent';
+import { EsiaLoginBanner } from './EsiaLoginBanner';
 import { renderInputs } from './renderInputs';
 import { renderSubmitButton } from './renderSubmitButton';
 import { useApplicationLeadApi } from './useApplicationLeadApi';
@@ -35,6 +37,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
     ...rest
   }) => {
     const [esiaError, { setTrue: setEsiaError }] = useBool(false);
+    const [esiaAuthSuccess, { setTrue: setEsiaAuthSuccess }] = useBool(false);
     const applicationFormData = useMemo(() => getApplicationFormData(productType), [productType]);
     const inputs = useMemo(
       () => (applicationFormData?.flatMap((_) => _?.inputs) || []) as FieldRetailDef[],
@@ -48,16 +51,18 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
       nextStepLink,
       productType,
       setEsiaError,
+      setEsiaAuthSuccess,
+      esiaAuthSuccess,
     });
     const { isSending, ok, handleSubmit } = useApplicationLeadApi({
       programId,
       nextStepLink,
       productType,
-      esiaError,
+      esiaAuthSuccess,
       data,
     });
 
-    const [, { field, onSubmit }] = useForm(initialFormState, {
+    const [, { field, onSubmit, reset }] = useForm(initialFormState, {
       formValidator,
       onSubmit: handleSubmit,
     });
@@ -69,12 +74,19 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
       }
     }, [ok]);
 
+    useEffect(() => {
+      if (initialFormState?.esiaAccountTypeCd) {
+        reset();
+      }
+    }, [initialFormState]);
+
     return (
       <ApplicationFormLayout
         className={style('container space-y-m', className)}
         title={title}
         {...rest}
       >
+        {!esiaAuthSuccess && !esiaError ? <EsiaLoginBanner /> : null}
         <form onSubmit={onSubmit} className="space-y-m relative">
           {isLoading ? <Loader blur={false} /> : null}
           {applicationFormData.map((_, i) => (

package/src/components/ApplicationLeadForm/EsiaLoginBanner.tsx

@@ -0,0 +1,52 @@
+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);
+      globalThis.location.href = 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>
+  );
+});