@redneckz/wildless-cms-uni-blocks 0.14.775 → 0.14.777

package/src/retail/api/updateUserTaskDebit.ts

@@ -0,0 +1,35 @@
+import { type Option } from '../../ui-kit/Select/Option';
+import { doRequest } from './doRequest';
+import { type MarketingInfo, type Participant } from './updateUserTask';
+
+export type UpdateUserTaskDebitBody = {
+  task: {
+    taskSource: string;
+    id: number;
+    office?: {
+      id: string;
+    };
+    cardServiceRegionCd?: Option;
+    courierDeliveryFlg?: boolean;
+    creditProgram?: {
+      code: string;
+    };
+    deliveryComment?: string;
+    deliveryDate?: string;
+    deliveryTimeCd?: {
+      key: string;
+    };
+    participants: Participant[];
+    esiaAccountTypeCd?: {
+      key: 'VERIFIED' | 'STANDARD' | 'SIMPLIFIED';
+    };
+    currencyCode?: { key: string };
+    paymentSystemTypeCd?: Option;
+    classCard?: Option;
+    codeWord?: string;
+    marketingInfo?: MarketingInfo;
+  };
+};
+
+export const updateUserTaskDebit = (body: UpdateUserTaskDebitBody) =>
+  doRequest('/user-data/updateUserTaskDebit', 'PUT', body);

package/src/retail/blocks/Blocks.mobile.ts

@@ -0,0 +1,10 @@
+import { ApplicationLeadForm } from '../../components/ApplicationLeadForm/ApplicationLeadForm';
+import { CreditCardForm } from '../../components/CreditCardForm/CreditCardForm';
+import { CreditForm } from '../../components/CreditForm/CreditForm';
+import { type BlocksRegistry } from '../../model/BlocksRegistry';
+
+export const Blocks: BlocksRegistry = {
+  ApplicationLeadForm,
+  CreditCardForm,
+  CreditForm,
+};

package/src/retail/blocks/Blocks.ts

@@ -0,0 +1,10 @@
+import { ApplicationLeadForm } from '../../components/ApplicationLeadForm/ApplicationLeadForm';
+import { CreditCardForm } from '../../components/CreditCardForm/CreditCardForm';
+import { CreditForm } from '../../components/CreditForm/CreditForm';
+import { type BlocksRegistry } from '../../model/BlocksRegistry';
+
+export const Blocks: BlocksRegistry = {
+  ApplicationLeadForm,
+  CreditCardForm,
+  CreditForm,
+};

package/src/retail/components/CaptchaDialog/CaptchaDialog.fixture.tsx

@@ -0,0 +1,10 @@
+import '../../../setup-fixture';
+import { CaptchaDialog } from './CaptchaDialog';
+
+export default {
+  default: (
+    <div>
+      <CaptchaDialog phoneNumber="+79999999999" />
+    </div>
+  ),
+};

package/src/retail/components/CaptchaDialog/CaptchaDialog.tsx

@@ -0,0 +1,78 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+
+import { Button } from '../../../ui-kit/Button/Button';
+import { SubmitButton } from '../../../ui-kit/Button/SubmitButton';
+import { Dialog } from '../../../ui-kit/DialogManager/Dialog';
+import { Icon } from '../../../ui-kit/Icon/Icon';
+import { Input } from '../../../ui-kit/Input/Input';
+import { Loader } from '../../../ui-kit/Loader/Loader';
+import { Logo } from '../../../ui-kit/Logo/Logo';
+import { checkCaptcha } from '../../api/checkCaptcha';
+import { createCaptcha } from '../../api/createCaptcha';
+
+export interface CaptchaDialogProps {
+  phoneNumber: string;
+  sendCode?: () => void;
+  onClose?: () => void;
+}
+
+export const CaptchaDialog = JSX<CaptchaDialogProps>(({ phoneNumber, sendCode, onClose }) => {
+  const [captcha, setCaptcha] = useState('');
+  const [code, setCode] = useState('');
+  const [hasError, setHasError] = useState(false);
+  const [isLoading, { setTrue: startLoading, setFalse: endLoading }] = useBool(false);
+
+  const handleCheckCaptcha = useCallback(async () => {
+    startLoading();
+    const isValidCode = await checkCaptcha({ captchaText: code });
+
+    if (isValidCode) {
+      onClose?.();
+      sendCode?.();
+    } else {
+      setHasError(true);
+    }
+    endLoading();
+  }, [code, sendCode]);
+
+  const handleCreateCaptcha = useCallback(() => {
+    (async () => setCaptcha(URL.createObjectURL(await createCaptcha(phoneNumber))))();
+  }, []);
+
+  useEffect(handleCreateCaptcha, []);
+
+  return (
+    <Dialog
+      className="my-6xl max-w-lg w-full min-h-fit mx-auto rounded-lg"
+      head={<Logo />}
+      onClose={onClose}
+    >
+      <div className="flex flex-col gap-lg items-center rounded-md">
+        <div className="flex h-36 w-72">
+          <img className="grow" src={captcha}></img>
+          <Button className="w-8" embedded onClick={handleCreateCaptcha}>
+            <Icon iconVersion="normal" name="RefreshIcon" />
+          </Button>
+        </div>
+        <Input
+          className="w-[300px]"
+          onChange={setCode}
+          value={code}
+          placeholder="Введите код с картинки"
+        />
+        {hasError ? <div className="text-error">Неверный код</div> : null}
+        <div className="flex w-[310px] justify-between">
+          <Button version="secondary" onClick={close}>
+            Вернуться
+          </Button>
+          <SubmitButton version="secondary" disabled={!code} onClick={handleCheckCaptcha}>
+            Отправить
+          </SubmitButton>
+        </div>
+        {isLoading ? <Loader blur={false} /> : null}
+      </div>
+    </Dialog>
+  );
+});

package/src/retail/components/CheckboxWithDoc/CheckboxWithDoc.tsx

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+import { Button } from '../../../ui-kit/Button/Button';
+import { ButtonTitle } from '../../../ui-kit/Button/ButtonTitle';
+import { Checkbox } from '../../../ui-kit/Checkbox/Checkbox';
+import { type CheckboxProps } from '../../../ui-kit/Checkbox/CheckboxProps';
+import { renderErrorText } from '../../../ui-kit/Input/renderErrorText';
+import { useDocumentDialog } from '../DocumentDialog/useDocumentDialog';
+
+interface CheckboxWithDocProps extends CheckboxProps {
+  docId?: number;
+}
+
+export const CheckboxWithDoc = JSX<CheckboxWithDocProps>(
+  ({ className, error, docId, ...props }) => {
+    const openDocument = useDocumentDialog(docId, () => props.onChange?.(true));
+
+    return (
+      <div className={className}>
+        <div className="flex flex-wrap gap-x-m">
+          <Checkbox {...props} />
+          {docId ? (
+            <Button embedded onClick={openDocument}>
+              <ButtonTitle>Ознакомиться</ButtonTitle>
+            </Button>
+          ) : null}
+        </div>
+        {renderErrorText(error)}
+      </div>
+    );
+  },
+);

package/src/retail/components/ConsentBkiDialog/ConsentBkiDialog.fixture.tsx

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

package/src/retail/components/ConsentBkiDialog/ConsentBkiDialog.tsx

@@ -0,0 +1,79 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+import { Button } from '../../../ui-kit/Button/Button';
+import { Dialog } from '../../../ui-kit/DialogManager/Dialog';
+import { Heading } from '../../../ui-kit/Heading/Heading';
+import { Paragraph } from '../../../ui-kit/Paragraph/Paragraph';
+import { RadioButtonGroup } from '../../../ui-kit/RadioButtonGroup/RadioButtonGroup';
+import { noop } from '../../../utils/noop';
+import { useDocumentDialog } from '../DocumentDialog/useDocumentDialog';
+
+export interface ConsentBkiDialogProps {
+  onSubmit?: (confirmStatus: string) => void;
+  onClose?: () => void;
+}
+
+const defaultConsentText = {
+  title: 'Подпишите согласие на запрос в БКИ',
+  description: 'Согласие на запрос в Бюро кредитных историй (БКИ) ускорит решение по кредиту',
+};
+
+const refuseConsentText = {
+  title: 'Вы уверены, что хотите отказаться от запроса в БКИ',
+  description: 'Согласие на запрос в Бюро кредитных историй (БКИ) повысит вероятность одобрения',
+};
+
+const ITEMS = [
+  { id: 'SIGNED', text: 'Подписать' },
+  { id: 'REFUSE', text: 'Отказаться' },
+];
+
+const CONSENT_BKI_ID = 2;
+
+export const ConsentBkiDialog = JSX<ConsentBkiDialogProps>(
+  ({ onSubmit = noop, onClose = noop }) => {
+    const [confirmStatus, setConfirmStatus] = useState('');
+    const [showRefuseContent, setShowRefuseContent] = useState(false);
+
+    const openDocument = useDocumentDialog(CONSENT_BKI_ID);
+
+    const handleSubmit = useCallback(() => {
+      onSubmit(confirmStatus);
+    }, [onSubmit, confirmStatus]);
+
+    const handleConfirmChange = useCallback((value: string) => {
+      setConfirmStatus(value);
+      setShowRefuseContent(value === 'REFUSE');
+    }, []);
+    const consentText = showRefuseContent ? refuseConsentText : defaultConsentText;
+
+    return (
+      <Dialog
+        className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg px-5xl"
+        onClose={onClose}
+      >
+        <div className="flex flex-col gap-xl items-center">
+          <div role="button" onClick={openDocument}>
+            <Heading
+              className="text-center text-balance"
+              headingType="h2"
+              title={consentText.title}
+            />
+          </div>
+          <Paragraph align="text-center">{consentText.description}</Paragraph>
+          <RadioButtonGroup
+            className="whitespace-normal"
+            orientation="horizontal"
+            items={ITEMS}
+            value={confirmStatus}
+            onChange={handleConfirmChange}
+          />
+          <Button disabled={!confirmStatus} type="button" onClick={handleSubmit}>
+            Далее
+          </Button>
+        </div>
+      </Dialog>
+    );
+  },
+);

package/src/retail/components/ConsentBkiDialog/useConsentBkiDialog.tsx

@@ -0,0 +1,45 @@
+import { useDialog } from '../../../ui-kit/DialogManager/useDialog';
+import { updateUserProfile } from '../../api/updateUserProfile';
+import { VerifyPhoneDialog } from '../VerifyPhoneDialog/VerifyPhoneDialog';
+import { ConsentBkiDialog } from './ConsentBkiDialog';
+
+export const useConsentBkiDialog = (onClose: () => void) => {
+  const { open } = useDialog(ConsentBkiDialog);
+  const verifyPhoneDialog = useDialog(VerifyPhoneDialog);
+
+  const handleSuccessVerify = (profileId?: number) => async (smsCode?: string) => {
+    try {
+      if (profileId) {
+        await updateUserProfile({
+          profile: {
+            id: profileId,
+            consentBkiFlg: true,
+            smsConsentBki: smsCode,
+          },
+        });
+      }
+
+      onClose();
+    } catch (ex) {
+      console.log(ex);
+    }
+  };
+
+  const handleSubmitBkiConstent =
+    (phone?: string, profileId?: number) => async (confirmStatus: string) => {
+      if (confirmStatus === 'SIGNED' && phone) {
+        verifyPhoneDialog.open({
+          phone,
+          consents: ['согласие на запрос информации в БКИ'],
+          onSuccess: handleSuccessVerify(profileId),
+        });
+      } else {
+        onClose();
+      }
+    };
+
+  return {
+    open: (phone?: string, profileId?: number) =>
+      open({ onSubmit: handleSubmitBkiConstent(phone, profileId), onClose }),
+  };
+};

package/src/retail/components/DaDataInputControl/DaDataInputControl.tsx

@@ -0,0 +1,94 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
+import { Input } from '../../../ui-kit/Input/Input';
+import { type InputProps } from '../../../ui-kit/Input/InputProps';
+import { renderErrorText } from '../../../ui-kit/Input/renderErrorText';
+import { getRequiredLabel } from '../../../utils/getRequiredLabel';
+import { noop } from '../../../utils/noop';
+import { style } from '../../../utils/style';
+import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
+import { useInputPopup } from './useInputPopup';
+
+export type DaDataInputProps = InputProps & {
+  onDaDataChange?: (ev: DaDataSuggestion) => void;
+  daDataQueryPrefix?: string;
+  dadata?: boolean;
+};
+
+export const DaDataInputControl = JSX<DaDataInputProps>(
+  ({
+    className,
+    label,
+    value = '',
+    placeholder,
+    error,
+    errors,
+    onChange = noop,
+    onDaDataChange,
+    onBlur,
+    isTextarea,
+    type,
+    name = '',
+    daDataQueryPrefix,
+    isInteger = false,
+    maxLength,
+    dadata = false,
+    disabled = false,
+  }) => {
+    const [isOpen, { setFalse: close, setTrue: open }] = useBool();
+    const popupRef = useOutsideClick<HTMLDivElement>(close);
+
+    const handleChange = useCallback(
+      (v: string) => {
+        dadata && !isOpen && open();
+        maxLength ? v.length <= maxLength && onChange(v) : onChange(v);
+      },
+      [isOpen, onChange],
+    );
+
+    useEffect(() => {
+      isInteger && value && onChange(normalizeInteger(value));
+    }, [value]);
+
+    const inputRef = useInputPopup({
+      isOpen: isOpen && dadata,
+      name,
+      value,
+      daDataQueryPrefix,
+      onChange,
+      onDaDataChange,
+    });
+
+    return (
+      <div
+        className={style('shrink-0 w-full', className)}
+        ref={popupRef}
+        onBlur={close}
+        onFocus={open}
+      >
+        <div ref={inputRef}>
+          <Input
+            disabled={disabled}
+            type={type || 'text'}
+            aria-label={label}
+            label={getRequiredLabel({ label, errors })}
+            valid={Boolean(!error)}
+            value={value}
+            onChange={handleChange}
+            onBlur={onBlur}
+            isTextarea={isTextarea}
+            placeholder={getPlaceholder(placeholder, errors, label)}
+          />
+        </div>
+        {renderErrorText(error)}
+      </div>
+    );
+  },
+);
+
+const normalizeInteger = (val = '') => val.replace(/[^\d]+/g, '');
+
+const getPlaceholder = (placeholder?: string, errors?: string[], label?: string) =>
+  errors && !label ? `${placeholder}*` : placeholder;

package/src/retail/components/DaDataInputControl/InputPopup.tsx

@@ -0,0 +1,61 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+import { type PreventableEventWithTarget } from '../../../ui-kit/PreventableEvent';
+import { style } from '../../../utils/style';
+import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
+
+export interface InputPopupProps {
+  options: Array<DaDataSuggestion>;
+  container: HTMLDivElement;
+  onChange: (e: DaDataSuggestion) => void;
+  value?: string;
+}
+
+const ARROW_DOWN_KEYBOARD_KEY_CODE = 'ArrowDown';
+const ARROW_UP_KEYBOARD_KEY_CODE = 'ArrowUp';
+const ENTER_KEYBOARD_KEY_CODE = 'Enter';
+const INITIAL_LIST_ITEM_ACTIVE = -1;
+
+export const InputPopup = JSX<InputPopupProps>(({ options, container, onChange }) => {
+  const [listItemActive, setListItemActive] = useState<number>(INITIAL_LIST_ITEM_ACTIVE);
+
+  const onKeyDownHandler = (ev: PreventableEventWithTarget & { key: string }): void => {
+    const hintsListMaxIndex = options.length - 1;
+
+    if (ev.key === ARROW_DOWN_KEYBOARD_KEY_CODE) {
+      setListItemActive(listItemActive < hintsListMaxIndex ? listItemActive + 1 : 0);
+    } else if (ev.key === ARROW_UP_KEYBOARD_KEY_CODE) {
+      setListItemActive(listItemActive > 0 ? listItemActive - 1 : hintsListMaxIndex);
+    } else if (ev.key === ENTER_KEYBOARD_KEY_CODE && options[listItemActive]) {
+      ev.preventDefault();
+      onChange(options[listItemActive]);
+    }
+  };
+
+  useEffect(() => {
+    container.addEventListener('keydown', onKeyDownHandler);
+
+    return () => container.removeEventListener('keydown', onKeyDownHandler);
+  }, [listItemActive]);
+
+  return (
+    <div
+      className="bg-white text-l overflow-y-auto overflow-x-hidden rounded-md shadow-2xl"
+      role="list"
+    >
+      {options?.map((item, key) => (
+        <div
+          key={key.toString()}
+          className={style('flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative', {
+            'bg-main-divider': listItemActive === key,
+          })}
+          role="listitem"
+          onMouseDown={() => onChange(item)}
+        >
+          <span className="min-h-6">{item.processedValue}</span>
+        </div>
+      ))}
+    </div>
+  );
+});

package/src/retail/components/DaDataInputControl/useInputPopup.tsx

@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+import { usePopupManager } from '../../../ui-kit/PopupManager/usePopupManager';
+import { debounce } from '../../../utils/debounce';
+import { getDaDataHints } from '../../api/dadataHints/dadataHints';
+import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
+import { hintsListsOptions } from '../../api/dadataHints/hintsListsOptions';
+import { InputPopup } from './InputPopup';
+
+interface InputPopupOptions {
+  isOpen?: boolean;
+  name: string;
+  value?: string;
+  daDataQueryPrefix?: string;
+  onChange: (e: string) => void;
+  onDaDataChange?: (e: DaDataSuggestion) => void;
+}
+
+// eslint-disable-next-line max-lines-per-function
+export function useInputPopup({
+  isOpen,
+  value,
+  name,
+  onChange,
+  onDaDataChange,
+  daDataQueryPrefix,
+}: 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: DaDataSuggestion) => {
+      close();
+      currentInputValue.current = option.processedValue;
+      onChange?.(option.processedValue);
+      onDaDataChange?.(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,
+        responseItemHandler: defaultHintsListOptions.responseItemHandler,
+        requestData: {
+          ...defaultHintsListOptions?.requestData,
+        },
+        query: searchValue,
+        queryPrefix: daDataQueryPrefix,
+      });
+      if (result?.length) {
+        setHintsList(result);
+      }
+    },
+    [daDataQueryPrefix],
+  );
+
+  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.open({
+      popup: (
+        <InputPopup
+          options={hintsList}
+          container={inputElement}
+          value={value}
+          onChange={handleChange}
+        />
+      ),
+      top: top + globalThis.scrollY + height,
+      left,
+      width,
+    });
+  }, [isOpen, hintsList, value, handleChange]);
+
+  return inputRef;
+}

package/src/retail/components/DocumentDialog/DocumentDialog.tsx

@@ -0,0 +1,34 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMobileMode } from '../../../hooks/useMobileMode';
+import { Button } from '../../../ui-kit/Button/Button';
+import { Dialog } from '../../../ui-kit/DialogManager/Dialog';
+
+export interface DocumentDialogProps {
+  src: string;
+  onClose?: () => void;
+  onDocumentRead?: () => void;
+}
+
+export const DocumentDialog = JSX<DocumentDialogProps>(({ src, onClose, onDocumentRead }) => {
+  const isMobileMode = useMobileMode();
+
+  return (
+    <Dialog className="my-6xl max-w-4xl mx-auto px-0 min-h-0 pb-0" onClose={onClose}>
+      {isMobileMode ? (
+        <img src={src} />
+      ) : (
+        <iframe src={`${src}#toolbar=0`} className="w-full h-[80vh]" id="iframe-dialog" />
+      )}
+      <Button
+        className="mx-auto mt-m"
+        type="button"
+        onClick={() => {
+          onDocumentRead?.();
+          onClose?.();
+        }}
+      >
+        Ознакомиться
+      </Button>
+    </Dialog>
+  );
+});

package/src/retail/components/DocumentDialog/useDocumentDialog.ts

@@ -0,0 +1,18 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { type Nullable } from '@redneckz/uni-jsx/lib/utils/ts/Nullable';
+import { useMobileMode } from '../../../hooks/useMobileMode';
+import { useDialog } from '../../../ui-kit/DialogManager/useDialog';
+import { feedbackById } from '../../api/feedbackById';
+import { DocumentDialog } from './DocumentDialog';
+
+export const useDocumentDialog = (docId: Nullable<number>, onDocumentRead?: () => void) => {
+  const { open } = useDialog(DocumentDialog);
+  const isMobileMode = useMobileMode();
+
+  return useCallback(async () => {
+    if (docId) {
+      const src = URL.createObjectURL(await feedbackById(docId, isMobileMode));
+      open({ src, onDocumentRead });
+    }
+  }, [open, docId, isMobileMode]);
+};

package/src/retail/components/DraftDialog/DraftActionButton.tsx

@@ -0,0 +1,34 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type IconName } from '../../../icons/IconName';
+import { Img } from '../../../ui-kit/Img/Img';
+import { Text } from '../../../ui-kit/Text/Text';
+import { noop } from '../../../utils/noop';
+
+export interface DraftActionButtonProps {
+  title: string;
+  icon: IconName;
+  description?: string;
+  onClick?: () => void;
+}
+
+export const DraftActionButton = JSX<DraftActionButtonProps>(
+  ({ title, icon, description, onClick = noop }) => (
+    <button
+      className="flex gap-lg items-center border border-gray/30 rounded-xl cursor-pointer p-4 hover:border-green"
+      type="button"
+      onClick={onClick}
+    >
+      <Img image={{ icon, iconVersion: 'normal' }} width="78" height="78" />
+      <div className="flex flex-col items-start gap-xs md:w-72 md:mr-lg">
+        <Text font="font-medium" size="text-s">
+          {title}
+        </Text>
+        {description ? (
+          <Text color="text-secondary-text" size="text-xs">
+            {description}
+          </Text>
+        ) : null}
+      </div>
+    </button>
+  ),
+);