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

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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 z-[101]" 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/mobile/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/mobile/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>
+  ),
+);

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

@@ -0,0 +1,80 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { locationNavigator } from '../../../external/locationNavigator';
+import { Dialog } from '../../../ui-kit/DialogManager/Dialog';
+import { Heading } from '../../../ui-kit/Heading/Heading';
+import { formatDate } from '../../../utils/formatDate';
+import { noop } from '../../../utils/noop';
+import { type Task } from '../../api/draftTasksKZO';
+import { useRetailFormStore } from '../../hooks/useRetailFormStore';
+import { DraftActionButton } from './DraftActionButton';
+import { parseDraftTask } from './parseDraftTask';
+import { creditCodesToProgrammIdMap, creditProgramCodeToProductIdMap } from './utils';
+
+export interface DraftDialogProps {
+  task: Task;
+  isFromLead?: boolean;
+  sendAspects?: (profileId: number, taskId: number) => void;
+  onClose?: () => void;
+}
+
+export const DraftDialog = JSX<DraftDialogProps>(function ({
+  task,
+  isFromLead = false,
+  sendAspects = noop,
+  onClose = noop,
+}) {
+  const retailFormStore = useRetailFormStore();
+  const navigator = locationNavigator();
+
+  const { participants, creditProgram, createdDate = '', id: taskId } = task;
+
+  const programmId: string = creditProgramCodeToProductIdMap[creditProgram.code];
+  const isCredit = Boolean(creditCodesToProgrammIdMap[creditProgram.code]);
+  const nextStepLink = isCredit ? '/credit-lead' : '/credit-card-lead';
+
+  const { id: participantId, profile } = participants[0];
+
+  const handleGoToDraft = useCallback(() => {
+    const taskFromDraft = parseDraftTask(task);
+    retailFormStore.participantId = participantId ?? null;
+    retailFormStore.taskId = taskId;
+    retailFormStore.profileId = profile?.id ?? null;
+    retailFormStore.programId = programmId;
+    retailFormStore.leadForm = taskFromDraft;
+    if (profile?.id) {
+      sendAspects(profile.id, taskId);
+    }
+    navigator.assign(nextStepLink);
+  }, []);
+
+  const handleGoToNewTask = useCallback(() => {
+    navigator.assign(isCredit ? '/natural/loans/all-goals' : '/natural/creditcards/svoya');
+  }, []);
+
+  return (
+    <Dialog className="my-6xl max-w-4xl w-full min-h-fit mx-auto rounded-xl py-0" onClose={onClose}>
+      <div className="flex flex-col gap-lg items-center mt-xs md:mt-0 mx-6xl">
+        <Heading
+          className="whitespace-pre-wrap text-center"
+          title="Нашли черновик вашей заявки"
+          headingType="h5"
+        />
+        <div className="flex flex-col gap-m max-w-lg">
+          <DraftActionButton
+            title="Продолжить заполнение черновика"
+            icon="BankColorIcon"
+            description={createdDate ? `Черновик от ${formatDate(new Date(createdDate))}` : ''}
+            onClick={handleGoToDraft}
+          />
+          <DraftActionButton
+            title={isFromLead ? 'Продолжить заполнение текущей заявки' : 'Создать новую заявку'}
+            icon="NewLoanIcon"
+            description="На получение кредита"
+            onClick={isFromLead ? onClose : handleGoToNewTask}
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+});

package/mobile/src/retail/components/DraftDialog/EmptyDraftDialog.tsx

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { locationNavigator } from '../../../external/locationNavigator';
+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 { noop } from '../../../utils/noop';
+
+export interface EmptyDraftDialogProps {
+  onClose?: () => void;
+}
+
+export const EmptyDraftDialog = JSX<EmptyDraftDialogProps>(function ({ onClose = noop }) {
+  const navigator = locationNavigator();
+
+  const handleGoNewTask = useCallback(() => {
+    navigator.assign('/natural/loans/all-goals');
+  }, []);
+
+  const handleGoMainPage = useCallback(() => {
+    navigator.assign('/');
+  }, []);
+
+  return (
+    <Dialog
+      className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg py-0 px-5xl"
+      onClose={onClose}
+    >
+      <div className="flex flex-col gap-lg">
+        <Heading className="text-center" title="Заявки не найдены" headingType="h3" />
+        <Paragraph size="text-l" align="text-center">
+          По данному номеру не найдено незавершенных заявок. Вы можете заполнить новую заявку или
+          вернуться на главную страницу
+        </Paragraph>
+
+        <Button type="button" className="w-full" onClick={handleGoNewTask}>
+          Заполнить новую заявку
+        </Button>
+
+        <Button type="button" version="secondary" className="w-full" onClick={handleGoMainPage}>
+          Вернуться на главную
+        </Button>
+      </div>
+    </Dialog>
+  );
+});