@redneckz/wildless-cms-uni-blocks 0.16.1 → 0.16.3-isr

package/src/ui-kit/Loader/Loader.tsx

@@ -6,10 +6,11 @@ interface LoaderProps {
   color?: TextColor;
   position?: 'static' | 'absolute';
   blur?: boolean;
+  size?: 'small' | 'big';
 }
 
 export const Loader = JSX<LoaderProps>(
-  ({ color = 'text-primary-main', position = 'absolute', blur = true }) => (
+  ({ color = 'text-primary-main', position = 'absolute', blur = true, size = 'big' }) => (
     <div
       className={style('flex justify-center items-center h-full w-full z-50', position, {
         'backdrop-blur': blur,
@@ -17,10 +18,11 @@ export const Loader = JSX<LoaderProps>(
     >
       <div
         className={style(
-          'inline-block h-28 w-28',
+          'inline-block',
           'animate-spin rounded-full',
-          'border-8 border-solid border-current',
+          'border-solid border-current',
           'border-r-transparent',
+          size === 'small' ? 'border-4 h-8 w-8' : 'border-8 h-28 w-28',
           color,
         )}
         role="status"

package/src/ui-kit/LocationDialog/LocationDialog.tsx

@@ -1,47 +1,48 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { type BranchesHeader, type ForeignOfficeProps } from '../../data/HeaderData';
-import { useLink } from '../../hooks/useLink';
-import { useLocation } from '../../hooks/useLocation';
+import { useDefaultLocation } from '../../hooks/useLocation';
 import { useRegions, type Region } from '../../hooks/useRegions';
 import { groupBy } from '../../utils/groupBy';
 import { jaroWinklerDistance } from '../../utils/jaroWinklerDistance';
 import { Dialog } from '../DialogManager/Dialog';
-import { useDialogManager } from '../DialogManager/useDialogManager';
-import { LinkWrapper } from '../LinkWrapper/LinkWrapper';
-import { Paragraph } from '../Paragraph/Paragraph';
 import { Text } from '../Text/Text';
 import { renderForeignOffices } from './renderForeignOffices';
 import { renderRegion } from './renderRegion';
 import { renderRegionGroup } from './renderRegionGroup';
 import { SearchBar } from './SearchBar';
+import { SelectedLocation } from './SelectedLocation';
 
 const SEARCH_TERM_MIN_LENGTH = 3;
 
 export interface LocationDialogProps {
   foreignOffices?: ForeignOfficeProps[];
   branches?: BranchesHeader;
+  onClose?: () => void;
 }
 
-export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branches }) => {
-  const [currentLocation, selectCurrentLocation] = useLocation(branches?.default);
-
-  const link = useLink();
-  const { href } = link({ href: `/branches/${currentLocation.slug}` });
+export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branches, onClose }) => {
+  const locationStore = useDefaultLocation(branches?.default);
 
   const [query, setQuery] = useState('');
 
-  const regions: Region[] = cleanUpRegions(useRegions()).sort((a, b) =>
-    a.name.localeCompare(b.name),
+  const rawRegions = useRegions();
+  const regions = useMemo(
+    (): Region[] => cleanUpRegions(rawRegions).sort((a, b) => a.name.localeCompare(b.name)),
+    [rawRegions],
+  );
+  const regionsGroupByLetter = useMemo(
+    (): Map<string, Region[]> => groupBy(regions, regionFirstLetter),
+    [regions],
   );
-  const regionsGroupByLetter: Map<string, Region[]> = groupBy(regions, regionFirstLetter);
-
-  const { close } = useDialogManager();
 
-  const handleChangeLocation = useCallback((region: Region) => {
-    selectCurrentLocation(region);
-    close();
-  }, []);
+  const handleChangeLocation = useCallback(
+    (_: Region) => {
+      locationStore.location = _;
+      onClose?.();
+    },
+    [locationStore, onClose],
+  );
 
   return (
     <Dialog
@@ -51,19 +52,11 @@ export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branch
           <Text size="text-h4" color="text-primary-text">
             Выберите филиал
           </Text>
-          {currentLocation ? (
-            <div className="mb-s">
-              <Paragraph size="text-l" color="text-primary-text">
-                Сейчас выбран:
-                <LinkWrapper href={href} className="inline mx-2xs text-primary-main">
-                  {currentLocation.name}
-                </LinkWrapper>
-              </Paragraph>
-            </div>
-          ) : null}
+          <SelectedLocation defaultLocation={branches?.default} />
           <SearchBar onSearch={setQuery} searchTerm={query} />
         </div>
       }
+      onClose={onClose}
     >
       {query && query.length >= SEARCH_TERM_MIN_LENGTH ? (
         <div>
@@ -86,10 +79,10 @@ export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branch
   );
 });
 
-const regionFirstLetter = (region: Region) => region.name?.charAt(0) || '';
+const regionFirstLetter = (region: Region) => region.name?.charAt(0) ?? '';
 
 const cleanUpRegions = (regions: Region[]) =>
   regions.map((region) => ({
     ...region,
-    name: region.name?.replace(/республика|область|край'/gi, '').trim() || '',
+    name: region.name?.replace(/республика|область|край'/gi, '').trim() ?? '',
   }));

package/src/ui-kit/LocationDialog/SearchBar.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
 import { inputValidStyle } from '../Input/inputValidStyle';
+import { type PreventableEvent } from '../PreventableEvent';
 
 export interface SearchBarInnerProps {
   className?: string;
@@ -25,7 +26,9 @@ export const SearchBar = JSX<SearchBarInnerProps>(({ className, searchTerm, onSe
           `h-12 pl-m w-full peer text-l text-black rounded-md box-border`,
         )}
         value={searchTerm}
-        onChange={(e) => onSearch(e.target.value.toLowerCase())}
+        onChange={(e: PreventableEvent & { target: { value: string } }) =>
+          onSearch(e.target.value.toLowerCase())
+        }
         type="text"
         name="location-search-bar-input"
       />

package/src/ui-kit/LocationDialog/SelectedLocation.tsx

@@ -0,0 +1,27 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import { useLocation } from '../../hooks/useLocation';
+import { LinkWrapper } from '../LinkWrapper/LinkWrapper';
+import { Paragraph } from '../Paragraph/Paragraph';
+
+interface SelectedLocationProps {
+  defaultLocation?: string;
+}
+
+export const SelectedLocation = JSX<SelectedLocationProps>(({ defaultLocation }) => {
+  const currentLocation = useLocation(defaultLocation);
+
+  const link = useLink();
+  const { href } = link({ href: `/branches/${currentLocation.slug}` });
+
+  return currentLocation ? (
+    <div className="mb-s">
+      <Paragraph size="text-l" color="text-primary-text">
+        Сейчас выбран:
+        <LinkWrapper href={href} className="inline mx-2xs text-primary-main">
+          {currentLocation.name}
+        </LinkWrapper>
+      </Paragraph>
+    </div>
+  ) : null;
+});

package/src/ui-kit/PhoneInput/PhoneInput.tsx

@@ -10,7 +10,9 @@ export const PhoneInput = JSX<InputProps>(({ children, onChange, ...inputProps }
     [onChange],
   );
   const handleBlur = useCallback((v: string) => {
-    v === '+7 (' ? onChange && onChange('') : null;
+    if (v === '+7 (') {
+      onChange && onChange('');
+    }
   }, []);
 
   return (

package/src/ui-kit/PopupManager/PopupAction.ts

@@ -1,20 +1,15 @@
-import { type VNode } from '../../model/VNode';
-
-export type PopupAction = PopupOpenAction | PopupCloseAction;
+import type { ActionsMap } from '@redneckz/uni-jsx/lib/EventBus/Action';
+import type { VNode } from '../../model/VNode';
 
 export interface PopupOptions {
+  popup: VNode;
   top: number;
   left: number;
   width?: number;
   fixed?: boolean;
 }
 
-export interface PopupOpenAction extends PopupOptions {
-  type: 'open' | 'update';
-  popup: VNode;
-  fixed?: boolean;
-}
-
-export interface PopupCloseAction {
-  type: 'close';
-}
+export type PopupAction = ActionsMap<{
+  open(options: PopupOptions): void;
+  close(): void;
+}>;

package/src/ui-kit/PopupManager/PopupManager.tsx

@@ -1,46 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useEventListener } from '@redneckz/uni-jsx/lib/hooks/useEventListener';
+import { useObservableWithActions } from '@redneckz/uni-jsx/lib/EventBus/useObservableWithActions';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
-import { assertUnreachable } from '../../utils/assertUnreachable';
+import { useOnEscape } from '../../hooks/useOnEscape';
 import { style } from '../../utils/style';
-import { type PopupOpenAction } from './PopupAction';
+import { type PopupOptions } from './PopupAction';
 
 export const PopupManager = JSX(() => {
-  const [popup, setPopup] = useState<PopupOpenAction | null>(null);
+  const [popup, setPopup] = useState<PopupOptions | null>(null);
 
   const close = useCallback(() => {
     setPopup(null);
   }, []);
 
-  useEffect(
-    () =>
-      defaultEventBus.subscribe('popup', (action) => {
-        switch (action.type) {
-          case 'open':
-          case 'update':
-            setPopup(action);
-            break;
-          case 'close':
-            close();
-            break;
-          default:
-            assertUnreachable(action);
-        }
-      }),
-    [],
-  );
+  useObservableWithActions(defaultEventBus.observable, 'popup', {
+    open: setPopup,
+    close,
+  });
 
-  const escapeHandler = useCallback(
-    ({ key }: { key: string }) => {
-      if (key === 'Escape') {
-        close();
-      }
-    },
-    [close],
-  );
-
-  useEventListener(globalThis.document, 'keydown', escapeHandler);
+  useOnEscape(close);
 
   return popup ? (
     <div
@@ -51,6 +29,7 @@ export const PopupManager = JSX(() => {
         ...(popup.width ? { width: `${popup.width}px` } : {}),
       }}
       role="dialog"
+      title="Всплывающее окно"
     >
       {popup.popup}
     </div>

package/src/ui-kit/PopupManager/usePopupManager.tsx

@@ -1,11 +1,4 @@
+import { useEmitterWithActions } from '@redneckz/uni-jsx/lib/EventBus/useEmitterWithActions';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
-import { type VNode } from '../../model/VNode';
-import { type PopupOptions } from './PopupAction';
 
-export const usePopupManager = () => ({
-  open: (popup: VNode, options: PopupOptions) =>
-    defaultEventBus.fire('popup', { type: 'open', popup, ...options }),
-  update: (popup: VNode, options: PopupOptions) =>
-    defaultEventBus.fire('popup', { type: 'update', popup, ...options }),
-  close: () => defaultEventBus.fire('popup', { type: 'close' }),
-});
+export const usePopupManager = () => useEmitterWithActions(defaultEventBus.emitter, 'popup');

package/src/ui-kit/ProgressBar/ProgressBar.tsx

@@ -1,24 +1,22 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
 
 interface ProgressBarProps {
   step?: number;
   description?: string;
+  showPercentage?: boolean;
 }
 
-export const ProgressBar = JSX<ProgressBarProps>(({ step = 10, description }) => {
-  const [progressPercent, setProgressPercent] = useState(0);
-
-  return (
+export const ProgressBar = JSX<ProgressBarProps>(
+  ({ step = 10, description, showPercentage = true }) => (
     <div>
       <div className="h-4 w-full bg-gray relative">
-        <div className="h-4 bg-green" style={{ width: `${progressPercent}%` }} />
+        <div className="h-4 bg-green" style={{ width: `${step}%` }} />
       </div>
       <div className="relative">
-        <div className="absolute left-2/4 text-green">{progressPercent}%</div>
+        {showPercentage ? <div className="absolute left-2/4 text-green">{step}%</div> : null}
         {description ? <div className="text-right mr-4 text-gray">{description}</div> : null}
       </div>
     </div>
-  );
-});
+  ),
+);

package/src/ui-kit/Radio/Radio.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
 import { defaultCheckStyle } from '../Checkbox/checkboxStyle';
 import { inputValidStyle } from '../Input/inputValidStyle';
+import { type PreventableEvent } from '../PreventableEvent';
 import { Text } from '../Text/Text';
 import { type RadioProps } from './RadioProps';
 
@@ -19,7 +20,9 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
         value={value}
         name={name}
         checked={checked}
-        onChange={(_) => onChange?.(_.target.value)}
+        onChange={(_: PreventableEvent & { target: { value: string } }) =>
+          onChange?.(_.target.value)
+        }
         role="radio"
       />
       {text ? <Text color="text-primary-text">{text}</Text> : null}

package/src/ui-kit/RadioButtonGroup/RadioButtonGroup.fixture.tsx

@@ -23,7 +23,7 @@ export default {
         </Text>
         <RadioButtonGroup
           items={items}
-          checkedItem={'Аннуитетный'}
+          value="Аннуитетный"
           onChange={(text) => console.log('Выбран пункт меню: ', text)}
         />
       </div>
@@ -34,7 +34,7 @@ export default {
         <RadioButtonGroup
           items={items}
           orientation="vertical"
-          checkedItem={'Аннуитетный'}
+          value="Аннуитетный"
           onChange={(text) => console.log('Выбран пункт меню: ', text)}
         />
       </div>

package/src/ui-kit/RadioButtonGroup/RadioButtonGroup.tsx

@@ -1,51 +1,62 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type DefaultControlType } from '../../model/DefaultControlType';
 import { type TextProps } from '../../model/HeadlineType';
 import { type ListOrientation } from '../../model/ListOrientation';
 import { style } from '../../utils/style';
 import { Checkbox } from '../Checkbox/Checkbox';
+import { type ControlProps } from '../ControlProps';
+import { Text } from '../Text/Text';
 
 export type RadioButtonItem = TextProps & {
   id: string;
 };
 
-interface RadioButtonGroupProps {
+export interface RadioButtonGroupProps extends DefaultControlType, ControlProps<string> {
   items?: RadioButtonItem[];
-  checkedItem?: string;
-  className?: string;
   onChange?: (id: string) => void;
   disabled?: boolean;
   orientation?: ListOrientation;
 }
 
 const orientationStyleMap: Record<ListOrientation, string> = {
-  horizontal: 'gap-5xl',
-  vertical: 'flex-col gap-s',
+  horizontal: '@lg:flex-row',
+  vertical: '',
 };
 
 export const RadioButtonGroup = JSX<RadioButtonGroupProps>(
   ({
+    label,
     items,
-    checkedItem,
+    value,
     className,
-    onChange: onChangeCheckedItem,
     disabled = false,
     orientation = 'horizontal',
+    onChange: onChangeCheckedItem,
   }) => (
-    <div
-      className={style(`flex ${orientationStyleMap[orientation]}`, className)}
-      role="radiogroup"
-      aria-label="Группа кнопок"
-    >
-      {items?.map(({ id, text }) => (
-        <Checkbox
-          key={String(id)}
-          isRadio
-          text={text}
-          value={checkedItem === id}
-          onChange={() => onChangeCheckedItem && onChangeCheckedItem(id)}
-          disabled={disabled}
-        />
-      ))}
+    <div className="grid gap-xs whitespace-nowrap">
+      {label ? (
+        <div role="radiogroup" aria-label={label}>
+          <Text color="text-secondary-text" font="font-light">
+            {label}
+          </Text>
+        </div>
+      ) : null}
+      <div
+        className={style('flex flex-col gap-s', orientationStyleMap[orientation], className)}
+        role="radiogroup"
+        aria-label="Группа кнопок"
+      >
+        {items?.map(({ id, text }) => (
+          <Checkbox
+            key={String(id)}
+            isRadio
+            text={text}
+            value={value === id}
+            onChange={() => onChangeCheckedItem?.(id)}
+            disabled={disabled}
+          />
+        ))}
+      </div>
     </div>
   ),
 );

package/src/ui-kit/RadioButtonGroup/RadioButtonGroupControl.tsx

@@ -0,0 +1,14 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { getRequiredLabel } from '../../utils/getRequiredLabel';
+import { style } from '../../utils/style';
+import { renderErrorText } from '../Input/renderErrorText';
+import { RadioButtonGroup, type RadioButtonGroupProps } from './RadioButtonGroup';
+
+export const RadioButtonGroupControl = JSX<RadioButtonGroupProps>(
+  ({ className, label, error, ...rest }) => (
+    <div className={style('shrink-0 w-full', className)}>
+      <RadioButtonGroup label={getRequiredLabel({ label, errors: rest?.errors })} {...rest} />
+      {renderErrorText(error)}
+    </div>
+  ),
+);

package/src/ui-kit/Rating/Rating.fixture.tsx

@@ -0,0 +1,7 @@
+import '../../setup-fixture';
+
+import { Rating } from './Rating';
+
+export default {
+  default: <Rating />,
+};

package/src/ui-kit/Rating/Rating.tsx

@@ -0,0 +1,39 @@
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { Icon } from '../Icon/Icon';
+
+export const Rating = () => {
+  const [rating, setRating] = useState(0);
+  const [hoverRating, setHoverRating] = useState(0);
+
+  const handleClick = (event: { currentTarget: { id: string } }) => {
+    setRating(parseInt(event.currentTarget.id));
+  };
+
+  const handleMouseEnter = (event: { currentTarget: { id: string } }) => {
+    setHoverRating(parseInt(event.currentTarget.id));
+  };
+
+  const handleMouseLeave = () => {
+    setHoverRating(0);
+  };
+
+  return (
+    <div className="flex justify-center">
+      {[...Array(5)].map((_, i) => (
+        <span
+          key={i}
+          onClick={handleClick}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          id={`${i + 1}`}
+        >
+          <Icon
+            name="StarIcon"
+            iconVersion={rating >= i + 1 || hoverRating >= i + 1 ? 'color' : 'gray'}
+            className="cursor-pointer w-14 h-14"
+          />
+        </span>
+      ))}
+    </div>
+  );
+};

package/src/ui-kit/ReportDialog/ReportDialog.tsx

@@ -1,44 +1,37 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type LinkDoc } from '../../components/LinkDocs/LinkDocsContent';
-import { useRouter } from '../../hooks/useRouter';
-import { adjustHref } from '../../utils/adjustHref';
+import { type Picture } from '../../model/Picture';
 import { Button } from '../Button/Button';
 import { Dialog } from '../DialogManager/Dialog';
-import { useDialogManager } from '../DialogManager/useDialogManager';
-import { LinkButton } from '../LinkButton/LinkButton';
+import { Link } from '../Link/Link';
 import { RichText } from '../RichText/RichText';
+
 export interface ReportDialogProps extends LinkDoc {
   __html?: string;
+  icon?: Picture;
+  onClose?: () => void;
 }
 
-export const ReportDialog = JSX<ReportDialogProps>(({ href, __html, target }) => {
-  const { close } = useDialogManager();
-  const router = useRouter();
-  const adjustedHref = adjustHref(router)(href);
-  const handleClose = useCallback(() => {
-    close();
-  }, []);
-
-  return (
-    <Dialog className="my-6xl min-h-fit w-fit mx-auto">
-      {__html ? <RichText __html={__html} /> : null}
-      <div className="flex flex-row mx-auto w-fit gap-lg py-lg">
-        <LinkButton
-          text="Я согласен"
-          version="primary"
-          target={target}
-          href={adjustedHref}
-          onClick={handleClose}
-        />
-        <Button type="button" version="secondary" onClick={handleClose}>
-          Я не согласен
-        </Button>
-      </div>
-      <div>
-        Нажимая кнопку «Я СОГЛАСЕН» ниже Вы принимаете данные условия. Распространение или раскрытие
-        любой части данного Заключения или любой информации, или рекомендации в нем запрещено.»
-      </div>
-    </Dialog>
-  );
-});
+export const ReportDialog = JSX<ReportDialogProps>(({ href, __html, target, onClose }) => (
+  <Dialog className="my-6xl min-h-fit w-fit mx-auto" onClose={onClose}>
+    {__html ? <RichText __html={__html} /> : null}
+    <div className="flex flex-row mx-auto w-fit gap-lg py-lg">
+      <Link
+        href={href}
+        target={target}
+        version="primary"
+        ariaLabel="Ссылка на согласие"
+        onClick={onClose}
+      >
+        Я согласен
+      </Link>
+      <Button type="button" version="secondary" onClick={onClose}>
+        Я не согласен
+      </Button>
+    </div>
+    <div>
+      Нажимая кнопку «Я СОГЛАСЕН» ниже Вы принимаете данные условия. Распространение или раскрытие
+      любой части данного Заключения или любой информации, или рекомендации в нем запрещено.»
+    </div>
+  </Dialog>
+));

package/src/ui-kit/ResponseTypeDialog/ResponseTypeDialog.tsx

@@ -1,25 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { Headline } from '../../components/Headline/Headline';
 import { Button } from '../Button/Button';
 import { Dialog } from '../DialogManager/Dialog';
-import { useDialogManager } from '../DialogManager/useDialogManager';
 import { Img } from '../Img/Img';
+
 export interface ResponseNotificationProps {
-  responseType?: 'OK' | 'Fail';
+  ok?: boolean;
   typeForm?: string;
+  onClose?: () => void;
 }
 
-export const ResponseTypeDialog = JSX<ResponseNotificationProps>(function ({
-  responseType,
-  typeForm,
-}) {
-  const responseOK = responseType === 'OK';
-  const statusIcon = responseOK ? 'ResponseOKIcon' : 'ResponseFailIcon';
-  const { close } = useDialogManager();
-  const handleClose = useCallback(() => {
-    close();
-  }, []);
+export const ResponseTypeDialog = JSX<ResponseNotificationProps>(({ ok, typeForm, onClose }) => {
+  const statusIcon = ok ? 'ResponseOKIcon' : 'ResponseFailIcon';
+
   const responseOKDescription =
     typeForm === 'ANTIFRAUD'
       ? `Сообщение отправлено. Для уточнения информации с Вами могут связаться работники Банка либо Вы
@@ -28,17 +21,17 @@ export const ResponseTypeDialog = JSX<ResponseNotificationProps>(function ({
       : 'Совсем скоро мы с вами свяжемся';
 
   return (
-    <Dialog className="my-6xl max-w-lg w-full min-h-fit mx-auto ">
+    <Dialog className="my-6xl max-w-lg w-full min-h-fit mx-auto" onClose={onClose}>
       <div className="flex flex-col gap-lg items-center rounded-md space-x-m">
         <Img image={{ icon: statusIcon, iconVersion: 'normal' }} width="136" height="136" />
         <Headline
           className="w-full"
-          title={responseOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку'}
-          description={responseOK ? responseOKDescription : 'Пожалуйста, повторите позднее'}
+          title={ok ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку'}
+          description={ok ? responseOKDescription : 'Пожалуйста, повторите позднее'}
           headlineVersion="XS"
           isEmbedded={true}
         />
-        <Button type="button" onClick={handleClose}>
+        <Button type="button" onClick={onClose}>
           Хорошо
         </Button>
       </div>