@redneckz/wildless-cms-uni-blocks 0.14.932 → 0.14.934

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

@@ -8,33 +8,38 @@ import { Img } from '../Img/Img';
 export interface ResponseNotificationProps extends OnCloseProps {
   ok?: boolean;
   typeForm?: string;
+  errorMessage?: string;
 }
 
-export const ResponseTypeDialog = JSX<ResponseNotificationProps>(({ ok, typeForm, onClose }) => {
-  const statusIcon = ok ? 'ResponseOKIcon' : 'ResponseFailIcon';
+export const ResponseTypeDialog = JSX<ResponseNotificationProps>(
+  ({ ok, typeForm, onClose, errorMessage }) => {
+    const statusIcon = ok ? 'ResponseOKIcon' : 'ResponseFailIcon';
 
-  const responseOKDescription =
-    typeForm === 'ANTIFRAUD'
-      ? `Сообщение отправлено. Для уточнения информации с Вами могут связаться работники Банка либо Вы
+    const responseOKDescription =
+      typeForm === 'ANTIFRAUD'
+        ? `Сообщение отправлено. Для уточнения информации с Вами могут связаться работники Банка либо Вы
   можете самостоятельно позвонить по номеру контакт-центра +78001000100. Будьте внимательны, работники Банка
    не звонят с использованием мессенджеров.`
-      : 'Совсем скоро мы с вами свяжемся';
+        : 'Совсем скоро мы с вами свяжемся';
 
-  return (
-    <Dialog maxWidth="lg" 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={ok ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку'}
-          description={ok ? responseOKDescription : 'Пожалуйста, повторите позднее'}
-          headlineVersion="XS"
-          isEmbedded={true}
-        />
-        <Button type="button" onClick={onClose}>
-          Хорошо
-        </Button>
-      </div>
-    </Dialog>
-  );
-});
+    const responseFailDescription = errorMessage || 'Пожалуйста, повторите позднее';
+
+    return (
+      <Dialog maxWidth="lg" 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={ok ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку'}
+            description={ok ? responseOKDescription : responseFailDescription}
+            headlineVersion="XS"
+            isEmbedded={true}
+          />
+          <Button type="button" onClick={onClose}>
+            Хорошо
+          </Button>
+        </div>
+      </Dialog>
+    );
+  },
+);

package/mobile/src/ui-kit/Select/renderSelectContainer.tsx

@@ -1,6 +1,7 @@
 import type { ControlProps } from '../../model/ControlProps';
 import { type IconVersion } from '../../model/IconVersion';
 import { type OnCloseProps } from '../../model/OnCloseProps';
+import { noop } from '../../utils/noop';
 import { style } from '../../utils/style';
 import { type Option } from './Option';
 import { renderIcon } from './renderIcon';
@@ -21,7 +22,7 @@ export const renderSelectContainer = ({
   valid = true,
   isDisabled = false,
   isOpen = false,
-  onOpen,
+  onOpen = noop,
   onClose,
   isManualInput = false,
   query = '',

package/mobile/src/utils/getTimezone.ts

@@ -0,0 +1,9 @@
+export const getUserTimezoneOffset = (): string => {
+  const offset = new Date().getTimezoneOffset();
+  const absOffset = Math.abs(offset);
+  const hours = Math.floor(absOffset / 60);
+  const minutes = absOffset % 60;
+  const sign = offset < 0 ? '+' : '-';
+
+  return `GMT${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.932",
+  "version": "0.14.934",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -204,7 +204,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "100 kB",
+      "limit": "105 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/ProjectSettings.ts

@@ -8,6 +8,7 @@ export interface ProjectSettings {
   BASE_PATH?: string; // Should ends with "/"
   YANDEX_MAP_API_KEY?: string;
   YANDEX_METRIKA_ID?: string;
+  QUICK_ACTIONS?: string[];
 }
 
 const URI_KEYS: Array<keyof ProjectSettings> = ['CDN', 'BASE_PATH'];

package/src/api/LeadServiceAPI.ts

@@ -1,5 +1,6 @@
 import { type JSONRecord, type JSONScalar } from '@redneckz/json-op';
 import { type Router } from '../external/useRouter';
+import { getUserTimezoneOffset } from '../utils/getTimezone';
 import { API_BASE_URI } from './apiBaseUrl';
 import { getPhoneBody, getSubmitBody } from './getSubmitBody';
 
@@ -14,6 +15,8 @@ export type LeadRequest = Record<string, JSONRecord | JSONScalar | null> & {
   secondaryPhoneNumber?: string;
   partnerSymbolCode?: string;
   partnerName?: string;
+  consentDataProcessing?: string;
+  russianPhone?: string;
 };
 
 export type CheckCodeProps = {
@@ -88,7 +91,6 @@ export function LeadServiceAPI() {
       confimationCode: code,
       leadRequest: getSubmitBody(body, false),
     };
-
     try {
       const response = await LeadServiceFetch(`${API_BASE_URI}/confirmCorporateLead`, submitBody);
 
@@ -98,10 +100,30 @@ export function LeadServiceAPI() {
     }
   }
 
+  async function sendPhoneCallRequest(body: LeadRequest, isNaturalPerson = false) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const submitBody = getSubmitBody(body, isNaturalPerson);
+
+    const formatSubmitBody = getFormatCallbackSubmitBody(submitBody);
+
+    try {
+      const response = await LeadServiceFetch(`${API_BASE_URI}/callback`, formatSubmitBody);
+
+      if (!response?.ok) {
+        return null;
+      }
+
+      return await response.json();
+    } catch (e) {
+      return null;
+    }
+  }
+
   return {
     send,
     sendCode,
     checkCode,
+    sendPhoneCallRequest,
   };
 }
 
@@ -112,3 +134,14 @@ const LeadServiceFetch = (url: string, submitBody: SubmitBody) =>
     mode: 'cors',
     body: JSON.stringify(submitBody),
   });
+
+const getFormatCallbackSubmitBody = (submitBody: Partial<LeadRequest>): SubmitBody => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { typeForm, consentDataProcessing, phone, ...rest } = submitBody;
+
+  return {
+    ...rest,
+    phone: phone?.startsWith('+') ? phone.slice(1) : phone,
+    clientTimezone: getUserTimezoneOffset(),
+  };
+};

package/src/api/getSubmitBody.ts

@@ -24,6 +24,7 @@ export const getSubmitBody = (body: LeadRequest, isNaturalPerson: boolean, route
     bankEmpolee,
     applicationDate,
     partnerName,
+    russianPhone,
     ...staticBody
   } = body;
 
@@ -32,6 +33,7 @@ export const getSubmitBody = (body: LeadRequest, isNaturalPerson: boolean, route
     ...getRegion(region, isNaturalPerson),
     ...getEmail(email, isNaturalPerson),
     ...getPhone(phone),
+    ...getPhone(russianPhone),
     ...getFormatDate(desiredMeetingDate as string, 'desiredMeetingDate'),
     ...(isNaturalPerson ? getFormatDate(birthday as string) : { inn }),
     ...(typeForm === 'FEEDBACK'

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -1,45 +1,43 @@
 import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
-import { LeadServiceAPI } from '../../api/LeadServiceAPI';
 import { useRouter } from '../../external/useRouter';
-import { handleAspects } from '../../hooks/useAspects/handleAspects';
 import { useAspects } from '../../hooks/useAspects/useAspects';
-import { useForm, type FormFieldRegisterer } from '../../hooks/useForm/useForm';
-import { type FormTypeFieldDef } from '../../model/FormTypeFieldDef';
-import { type SectionsProps } from '../../model/InputSectionsType';
+import { useForm } from '../../hooks/useForm/useForm';
 import { ApplicationFormLayout } from '../../ui-kit/ApplicationFormLayout/ApplicationFormLayout';
 import { useDialog } from '../../ui-kit/DialogManager/useDialog';
 import { getConsentDataProcessing } from '../../ui-kit/FormField/getConsentDataProcessing';
-import { getField } from '../../ui-kit/FormField/getField';
 import { getFormValidator } from '../../ui-kit/FormField/getObjectValidator';
-import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
-import { renderTitle } from '../../ui-kit/FormField/renderTitle';
 import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 import { ResponseTypeDialog } from '../../ui-kit/ResponseTypeDialog/ResponseTypeDialog';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
-import {
-  type additionalParamsType,
-  type ApplicationFormContent,
-  type FieldDef,
-} from './ApplicationFormContent';
+import { type ApplicationFormContent, type FieldDef } from './ApplicationFormContent';
 import { getFormatData } from './getFormatData';
 import { getInitialFormState, type FormState } from './getInitialFormState';
+import {
+  handleCallback,
+  handleDefault,
+  handleInitCorporateLead,
+  type HandlerProps,
+} from './handlers';
 import { renderAgreementSubmit } from './renderAgreementSubmit';
 import { renderContacts } from './renderContacts';
+import { renderSections } from './renderSections';
 import { VerifyPhoneDialog } from './VerifyPhoneDialog';
 
-export interface ApplicationFormProps extends ApplicationFormContent, UniBlockProps {}
+export interface ApplicationFormProps extends ApplicationFormContent, UniBlockProps {
+  onSuccess?: () => void;
+}
 
-type renderSectionsType = {
-  typeForm: FormTypeFieldDef;
-  additionalParams?: additionalParamsType;
-};
+type Handler = (context: HandlerProps) => Promise<void>;
 
-const API = LeadServiceAPI();
+const handlerMap: Record<string, Handler> = {
+  initcorporatelead: handleInitCorporateLead,
+  callback: handleCallback,
+  default: handleDefault,
+};
 
 export const ApplicationForm = UniBlock<ApplicationFormProps>(
-  // eslint-disable-next-line max-lines-per-function
   ({
     className,
     title,
@@ -51,6 +49,7 @@ export const ApplicationForm = UniBlock<ApplicationFormProps>(
     additionalParams,
     isContacts,
     data,
+    onSuccess,
     ...rest
   }) => {
     const inputs = useMemo(
@@ -71,35 +70,17 @@ export const ApplicationForm = UniBlock<ApplicationFormProps>(
       async (formData: FormState, ev: PreventableEventWithTarget) => {
         const formatData = getFormatData({ ...formData, ...additionalParams });
 
-        if (endpoint === 'initcorporatelead') {
-          const { phone } = formatData;
-
-          const response = await API.sendCode({ phone: String(phone) });
-
-          if (!response) {
-            responseTypeDialog.open({ ok: Boolean(response), typeForm });
-
-            return;
-          }
-
-          verifyPhoneDialog.open({
-            phone,
-            formatData,
-            reqId: String(response),
-            onSuccess: () => {
-              verifyPhoneDialog.close();
-              responseTypeDialog.open({ ok: true, typeForm });
-              handleAspects({ aspectsAttributes: data, aspects, ev });
-            },
-          });
-        } else {
-          const ok = Boolean(await API.send(formatData, router, endpoint === 'lead'));
-
-          responseTypeDialog.open({ ok, typeForm });
-          if (ok) {
-            handleAspects({ aspectsAttributes: data, aspects, ev });
-          }
-        }
+        await executeHandler(endpoint ?? 'default', {
+          formatData,
+          ev,
+          typeForm,
+          data,
+          aspects,
+          router,
+          responseTypeDialog,
+          verifyPhoneDialog,
+          onSuccess,
+        });
       },
       [typeForm],
     );
@@ -133,14 +114,7 @@ export const ApplicationForm = UniBlock<ApplicationFormProps>(
   },
 );
 
-const renderSections = (
-  sections: SectionsProps[],
-  field: FormFieldRegisterer<Record<string, any>>,
-  { typeForm, additionalParams }: renderSectionsType,
-) =>
-  sections.map((_, i) => (
-    <div key={`section-${i}`} className={style(inputColumnStyles(_.columns), 'grid')}>
-      {renderTitle(_.title)}
-      {(_?.inputs || [])?.map(getField<FieldDef>(field, { typeForm, ...additionalParams }))}
-    </div>
-  ));
+const executeHandler = async (endpoint: string, context: HandlerProps): Promise<void> => {
+  const handler = handlerMap[endpoint] || handlerMap.default;
+  await handler(context);
+};

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -43,7 +43,7 @@ export type FieldDef = Required &
   };
 
 /** @hidden */
-export type EndpointType = 'lead' | 'initcorporatelead' | 'sendcorporatelead';
+export type EndpointType = 'lead' | 'initcorporatelead' | 'sendcorporatelead' | 'callback';
 
 /**
  * @title Секция полей ввода

package/src/components/ApplicationForm/handlers.ts

@@ -0,0 +1,97 @@
+import { LeadServiceAPI, type LeadRequest } from '../../api/LeadServiceAPI';
+import { type Router } from '../../external/useRouter';
+import { handleAspects } from '../../hooks/useAspects/handleAspects';
+import { type Aspects } from '../../hooks/useAspects/useAspects';
+import { type AspectsDef } from '../../model/AspectsProps';
+import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
+import { noop } from '../../utils/noop';
+
+export type HandlerProps = {
+  formatData: LeadRequest;
+  data?: AspectsDef[];
+  aspects?: Aspects;
+  ev: PreventableEventWithTarget;
+  typeForm?: string;
+  router: Router;
+  verifyPhoneDialog?: any;
+  responseTypeDialog?: any;
+  onSuccess?: () => void;
+};
+
+const API = LeadServiceAPI();
+
+export const handleInitCorporateLead = async ({
+  formatData = {},
+  typeForm,
+  responseTypeDialog,
+  verifyPhoneDialog,
+  data = [],
+  aspects = {},
+  ev,
+}: HandlerProps) => {
+  const { phone } = formatData;
+
+  const response = await API.sendCode({ phone: String(phone) });
+
+  if (!response) {
+    responseTypeDialog.open({ ok: Boolean(response), typeForm });
+
+    return;
+  }
+
+  verifyPhoneDialog.open({
+    phone,
+    formatData,
+    reqId: String(response),
+    onSuccess: () => {
+      verifyPhoneDialog.close();
+      responseTypeDialog.open({ ok: true, typeForm });
+      handleAspects({ aspectsAttributes: data, aspects, ev });
+    },
+  });
+};
+
+export const handleCallback = async ({
+  formatData,
+  data,
+  aspects = {},
+  ev,
+  typeForm,
+  responseTypeDialog,
+  onSuccess = noop,
+}: HandlerProps) => {
+  const response = await API.sendPhoneCallRequest(formatData);
+
+  onSuccess();
+
+  if (response?.status === 'success') {
+    responseTypeDialog.open({ ok: true, typeForm });
+    handleAspects({ aspectsAttributes: data, aspects, ev });
+  } else if (response?.status === 'error') {
+    responseTypeDialog.open({
+      ok: false,
+      errorMessage: 'Ваша заявка уже в работе. Дождитесь звонка от сотрудника Банка',
+    });
+  } else {
+    responseTypeDialog.open({ ok: Boolean(response) });
+    if (response) {
+      handleAspects({ aspectsAttributes: data, aspects, ev });
+    }
+  }
+};
+
+export const handleDefault = async ({
+  formatData,
+  data,
+  aspects = {},
+  ev,
+  router,
+  responseTypeDialog,
+}: HandlerProps) => {
+  const ok = Boolean(await API.send(formatData, router, false)); // или проверять endpoint === 'lead'
+
+  responseTypeDialog.open({ ok });
+  if (ok) {
+    handleAspects({ aspectsAttributes: data, aspects, ev });
+  }
+};

package/src/components/ApplicationForm/renderSections.tsx

@@ -0,0 +1,25 @@
+import type { FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import type { FormTypeFieldDef } from '../../model/FormTypeFieldDef';
+import type { SectionsProps } from '../../model/InputSectionsType';
+import { getField } from '../../ui-kit/FormField/getField';
+import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
+import { renderTitle } from '../../ui-kit/FormField/renderTitle';
+import { style } from '../../utils/style';
+import type { additionalParamsType, FieldDef } from './ApplicationFormContent';
+
+type renderSectionsType = {
+  typeForm: FormTypeFieldDef;
+  additionalParams?: additionalParamsType;
+};
+
+export const renderSections = (
+  sections: SectionsProps[],
+  field: FormFieldRegisterer<Record<string, any>>,
+  { typeForm, additionalParams }: renderSectionsType,
+) =>
+  sections.map((_, i) => (
+    <div key={`section-${i}`} className={style(inputColumnStyles(_.columns), 'grid')}>
+      {renderTitle(_.title)}
+      {(_?.inputs || [])?.map(getField<FieldDef>(field, { typeForm, ...additionalParams }))}
+    </div>
+  ));

package/src/components/Header/DropdownMenu.tsx

@@ -1,31 +1,55 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
+import { useMobileMode } from '../../hooks/useMobileMode';
 import { type ComponentType } from '../../model/ComponentType';
 import { type LinkProps } from '../../model/LinkProps';
+import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 import { getAspectsAttributes } from '../../utils/dataAttributes';
 import { style } from '../../utils/style';
 
-interface DropdownMenuProps extends ComponentType {
+export interface DropdownMenuProps extends ComponentType {
   dropdownRef?: { current: HTMLDivElement | null };
   items?: LinkProps[];
   activeItem?: LinkProps;
   ariaLabel?: string;
+  renderDropdownItem?: ({ item, i, activeItem, handlers }: renderDropdownItemProps) => void;
+  handlers?: Record<string, (ev?: PreventableEventWithTarget) => void>;
+  onItemClick?: () => void;
 }
 
+export type renderDropdownItemProps = {
+  item?: LinkProps;
+  i?: number;
+  activeItem?: LinkProps;
+  handlers?: Record<string, (ev?: PreventableEventWithTarget) => void>;
+  closeDropdown?: () => void;
+};
+
 export const DropdownMenu = ({
   dropdownRef,
   items = [],
   activeItem,
   ariaLabel,
-}: DropdownMenuProps) => (
-  <div
-    ref={dropdownRef}
-    className="absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40"
-    aria-label={ariaLabel}
-  >
-    {renderDropdownItems(items, activeItem)}
-  </div>
-);
+  renderDropdownItem = renderDefaultDropdownItem,
+  handlers,
+  onItemClick,
+}: DropdownMenuProps) => {
+  const isMobileMode = useMobileMode();
+
+  return (
+    <div
+      ref={dropdownRef}
+      className={style('absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40', {
+        'max-w-max': isMobileMode,
+      })}
+      aria-label={ariaLabel}
+    >
+      {items?.map((item, i) =>
+        renderDropdownItem({ item, i, activeItem, handlers, closeDropdown: onItemClick }),
+      )}
+    </div>
+  );
+};
 
 export const DropdownMenuItem = JSX<LinkProps & { isActive?: boolean }>(({ isActive, ...rest }) => {
   const link = useLink();
@@ -48,7 +72,6 @@ export const DropdownMenuItem = JSX<LinkProps & { isActive?: boolean }>(({ isAct
   );
 });
 
-const renderDropdownItems = (items: LinkProps[], activeItem?: LinkProps) =>
-  items?.map((item, i) => (
-    <DropdownMenuItem key={item?.text ?? String(i)} isActive={item === activeItem} {...item} />
-  ));
+const renderDefaultDropdownItem = ({ item, i, activeItem }: renderDropdownItemProps) => (
+  <DropdownMenuItem key={item?.text ?? String(i)} isActive={item === activeItem} {...item} />
+);

package/src/components/Header/Header.fixture.mobile.tsx

@@ -2,6 +2,7 @@ import '../../setup-fixture';
 
 import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { Header } from './Header';
 import { type HeaderProps } from './HeaderProps';
 
@@ -22,6 +23,7 @@ export default {
     <div>
       <Header options={options} {...props} />
       <DialogManager />
+      <PopupManager />
     </div>
   ),
   transparent: (