@redneckz/wildless-cms-uni-blocks 0.14.895 → 0.14.897

package/src/hooks/useForm/useForm.ts

@@ -4,7 +4,7 @@ import { type ControlProps } from '../../model/ControlProps';
 import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { type ValidationInfo } from '../../validation/validator';
 import { type FieldOptions } from './FieldOptions';
-import { type FormOptions } from './FormOptions';
+import { type FieldValidatorsMap, type FormOptions } from './FormOptions';
 import { useFormValidator } from './useFormValidator';
 import { useNormalizedFormState } from './useNormalizedFormState';
 
@@ -12,6 +12,8 @@ export interface FieldProps<V> extends ControlProps<V> {
   isDirty?: boolean;
   errors?: ValidationInfo;
   error?: ValidationInfo[0];
+  setFieldRef?: (_: HTMLDivElement) => void;
+  fieldRef?: HTMLDivElement | null;
 }
 
 export type FormFieldRegisterer<FormState> = <N extends keyof FormState, V = FormState[N]>(
@@ -37,9 +39,9 @@ export function useForm<FormState extends Record<string, any>>(
     onChange,
   );
 
+  const fieldRefs = useRef(getRefsObject<FormState>(initialState));
   const [isDirtyForm, { setTrue: markAsDirty, setFalse: markAsClean }] = useBool(false);
   const dirtyFieldsMap = useRef<Record<string, boolean>>({});
-
   const [fieldValidatorsMap, { isValid, errors }] = useFormValidator(formState, formValidator);
 
   const field: FormFieldRegisterer<FormState> = useCallback(
@@ -51,6 +53,12 @@ export function useForm<FormState extends Record<string, any>>(
       const fieldErrors: ValidationInfo = isDirty && fieldValidator ? fieldValidator(value) : [];
 
       return {
+        setFieldRef: (_: HTMLDivElement) => {
+          if (fieldRefs.current) {
+            fieldRefs.current[fieldName] = _;
+          }
+        },
+        fieldRef: fieldRefs.current?.[fieldName],
         value: format ? (format(value) as FormState[any]) : value,
         isDirty,
         errors: fieldValidator && fieldErrors, // TODO Костыль
@@ -88,7 +96,9 @@ export function useForm<FormState extends Record<string, any>>(
         resetOnSubmit && reset();
         onSubmit?.(formState, ev);
       } else {
+        const errorFieldName = getErrorFieldName(formState, fieldValidatorsMap);
         markAsDirty();
+        field(errorFieldName).fieldRef?.scrollIntoView({ behavior: 'smooth' });
       }
     },
     [resetOnSubmit, formState, isValid, reset, onSubmit],
@@ -96,3 +106,22 @@ export function useForm<FormState extends Record<string, any>>(
 
   return [formState, { errors, field, update, reset, onSubmit: handleSubmit }];
 }
+
+const getRefsObject = <FormState extends Record<string, any>>(initialState: FormState) =>
+  Object.keys(initialState).reduce(
+    (acc, key) => ({ ...acc, [key]: null }),
+    {} as Record<keyof FormState, HTMLDivElement | null>,
+  );
+
+const getErrorFieldName = <FormState extends Record<string, any>>(
+  formState: FormState,
+  fieldValidatorsMap: FieldValidatorsMap<FormState> = {},
+) => {
+  const [errorFieldName = ''] =
+    Object.entries(formState).find(([fieldName, value]) => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      return fieldValidatorsMap[fieldName]?.(value)?.length;
+    }) ?? [];
+
+  return errorFieldName;
+};

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

@@ -46,11 +46,7 @@ export const CaptchaDialog = JSX<CaptchaDialogProps>(({ phoneNumber, sendCode, o
   useEffect(handleCreateCaptcha, []);
 
   return (
-    <Dialog
-      className="my-6xl max-w-lg w-full min-h-fit mx-auto rounded-lg"
-      head={<Logo />}
-      onClose={closeAll}
-    >
+    <Dialog head={<Logo />} onClose={onClose}>
       <div className="flex flex-col gap-lg items-center">
         <div className="flex">
           <img className="grow" src={captcha}></img>

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

@@ -49,10 +49,7 @@ export const ConsentBkiDialog = JSX<ConsentBkiDialogProps>(
     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}
-      >
+      <Dialog onClose={onClose}>
         <div className="flex flex-col gap-xl items-center">
           <div role="button" onClick={openDocument}>
             <Heading

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

@@ -13,7 +13,7 @@ export const DocumentDialog = JSX<DocumentDialogProps>(({ src, onClose, onDocume
   const isMobileMode = useMobileMode();
 
   return (
-    <Dialog className="mt-xl max-w-4xl mx-auto px-0 min-h-0 pb-0" onClose={onClose}>
+    <Dialog onClose={onClose}>
       {isMobileMode ? (
         <img src={src} />
       ) : (

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

@@ -57,7 +57,7 @@ export const DraftDialog = JSX<DraftDialogProps>(function ({
   }, []);
 
   return (
-    <Dialog className="my-6xl max-w-4xl w-full min-h-fit mx-auto rounded-xl py-0" onClose={onClose}>
+    <Dialog onClose={onClose}>
       <div className="flex flex-col gap-lg items-center mt-xs mx-6xl">
         <Heading
           className="whitespace-pre-wrap text-center"

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

@@ -26,10 +26,7 @@ export const EmptyDraftDialog = JSX<EmptyDraftDialogProps>(function ({ isDebit,
   }, []);
 
   return (
-    <Dialog
-      className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg py-0 px-5xl"
-      onClose={onClose}
-    >
+    <Dialog onClose={onClose}>
       <div className="flex flex-col gap-lg">
         <Heading className="text-center" title="Заявки не найдены" headingType="h3" />
         <Paragraph size="text-l" align="text-center">

package/src/retail/components/NoConsentDialog/NoConsentDialog.tsx

@@ -30,10 +30,7 @@ export const NoConsentDialog = JSX<NoConsentDialogProps>(({ attempts, onClose =
   }, [isMaxAttempts]);
 
   return (
-    <Dialog
-      className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg px-5xl"
-      onClose={handleClose}
-    >
+    <Dialog onClose={handleClose}>
       <div className="flex flex-col gap-xl items-center">
         <Paragraph align="text-center">Уважаемый клиент!</Paragraph>
         <Paragraph align="text-center">

package/src/retail/components/VerifyPhoneDialog/VerifyPhoneDialog.tsx

@@ -108,10 +108,7 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
     }, []);
 
     return (
-      <Dialog
-        className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-xl p-m"
-        onClose={onClose}
-      >
+      <Dialog maxWidth="lg" onClose={onClose}>
         <div className="flex flex-col gap-xl items-center rounded-md">
           <Headline
             className="w-full"

package/src/ui-kit/DialogManager/Dialog.tsx

@@ -1,26 +1,35 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type ComponentType } from '../../model/ComponentType';
 import { type OnClickPreventableProps } from '../../model/OnClickProps';
 import type { OnCloseProps } from '../../model/OnCloseProps';
 import { type VNode } from '../../model/VNode';
 import { style } from '../../utils/style';
 import { CloseButton } from './CloseButton';
 
-export interface DialogProps extends ComponentType, OnCloseProps, OnClickPreventableProps {
+export interface DialogProps extends OnCloseProps, OnClickPreventableProps {
   head?: VNode;
+  maxWidth?: 'sm' | '4xl' | 'lg';
 }
 
-export const Dialog = JSX<DialogProps>(({ className, head, children, onClose, onClick }) => (
+const MAX_WIDTH_STYLE = {
+  sm: 'max-w-sm top-1/3',
+  lg: 'max-w-lg',
+  '4xl': 'max-w-4xl',
+};
+
+export const Dialog = JSX<DialogProps>(({ head, maxWidth = '4xl', children, onClose, onClick }) => (
   <div
-    className={style('relative bg-white pt-0 p-lg', className)}
+    className={style(
+      'relative bg-white p-lg pb-6xl my-6xl mx-auto rounded-lg w-full',
+      MAX_WIDTH_STYLE[maxWidth],
+    )}
     role="dialog"
     title="Диалог"
     onClick={onClick}
   >
     <div className="sticky py-xl top-0 bg-white z-10">
-      <CloseButton className="absolute top-0 right-0" onClose={onClose} />
+      <CloseButton className="absolute top-0 right-0 z-10" onClose={onClose} />
       <div className="container">{head}</div>
     </div>
-    <div className="container pb-m mb-[74px] lg:mb-0">{children}</div>
+    <div className="container">{children}</div>
   </div>
 ));

package/src/ui-kit/FormField/RefWrapper.tsx

@@ -0,0 +1,20 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import type { VNode } from '../../model/VNode';
+import { noop } from '../../utils/noop';
+
+type RefWrapperProps = {
+  onFieldRef?: (_: HTMLDivElement) => void;
+  children?: VNode;
+};
+
+export const RefWrapper = JSX<RefWrapperProps>(({ onFieldRef = noop, children }) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (ref.current) {
+      onFieldRef(ref.current);
+    }
+  }, []);
+
+  return <div ref={ref}>{children}</div>;
+});

package/src/ui-kit/FormField/getField.tsx

@@ -44,6 +44,7 @@ import { UltraPremiumField } from './Fields/UltraPremiumField';
 import { VedField } from './Fields/VedField';
 import { ConsentToReceiveMaterialsField } from './Fields/СonsentToReceiveMaterialsField';
 import { getPremium } from './getPremium';
+import { RefWrapper } from './RefWrapper';
 import { shouldRenderField } from './shouldRenderField';
 
 const PRODUCT_REF = {
@@ -119,8 +120,8 @@ export const getField =
     const Component = fieldsRegister[String(input.name)];
 
     return shouldRenderField({ input, field }) && Component ? (
-      <div key={i}>
+      <RefWrapper onFieldRef={field(input.name ?? '').setFieldRef} key={String(i)}>
         <Component field={field} input={input} params={params} />
-      </div>
+      </RefWrapper>
     ) : null;
   };

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

@@ -45,19 +45,7 @@ export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branch
   );
 
   return (
-    <Dialog
-      className="pb-20"
-      head={
-        <div>
-          <Text size="text-h4" color="text-primary-text">
-            Выберите филиал
-          </Text>
-          <SelectedLocation defaultLocation={branches?.default} />
-          <SearchBar onSearch={setQuery} searchTerm={query} />
-        </div>
-      }
-      onClose={onClose}
-    >
+    <Dialog head={renderHead(query, setQuery, branches)} onClose={onClose}>
       {query && query.length >= SEARCH_TERM_MIN_LENGTH ? (
         <div>
           {regions
@@ -79,6 +67,16 @@ export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branch
   );
 });
 
+const renderHead = (query: string, setQuery: (_: string) => void, branches?: BranchesHeader) => (
+  <div>
+    <Text size="text-h4" color="text-primary-text">
+      Выберите филиал
+    </Text>
+    <SelectedLocation defaultLocation={branches?.default} />
+    <SearchBar onSearch={setQuery} searchTerm={query} />
+  </div>
+);
+
 const regionFirstLetter = (region: Region) => region.name?.charAt(0) ?? '';
 
 const cleanUpRegions = (regions: Region[]) =>

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

@@ -13,7 +13,7 @@ export interface ReportDialogProps extends LinkDoc, OnCloseProps {
 }
 
 export const ReportDialog = JSX<ReportDialogProps>(({ href, __html, target, onClose }) => (
-  <Dialog className="my-6xl min-h-fit w-fit mx-auto" onClose={onClose}>
+  <Dialog maxWidth="lg" onClose={onClose}>
     {__html ? <RichText __html={__html} /> : null}
     <div className="flex flex-row mx-auto w-fit gap-lg py-lg">
       <Link

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

@@ -21,7 +21,7 @@ export const ResponseTypeDialog = JSX<ResponseNotificationProps>(({ ok, typeForm
       : 'Совсем скоро мы с вами свяжемся';
 
   return (
-    <Dialog className="my-6xl max-w-lg w-full min-h-fit mx-auto" onClose={onClose}>
+    <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

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

@@ -28,7 +28,10 @@ export const SearchDialog = JSX<SearchDialogProps>(({ initialQuery, navigationIt
   );
 
   return (
-    <Dialog head={<SearchInput autoFocus={true} {...searchInputProps} />} onClose={onClose}>
+    <Dialog
+      head={<SearchInput className="mt-s" autoFocus={true} {...searchInputProps} />}
+      onClose={onClose}
+    >
       <Sitemap navigationItems={searchItems} />
     </Dialog>
   );

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

@@ -0,0 +1,32 @@
+import '../../setup-fixture';
+import { noop } from '../../utils/noop';
+
+import { SnowplowPopupDialog, type SnowplowPopupDialogProps } from './SnowplowPopupDialog';
+
+const PROPS: SnowplowPopupDialogProps = {
+  aspects: {},
+  onClose: () => noop(),
+  handleAspects: () => noop(),
+  title: 'Заголовок',
+  description:
+    'Описание, но не короткое, а длинное описание, так что бы много слов и в несколько строк',
+  align: 'text-center',
+  img: {
+    src: 'chair.png',
+    size: {
+      width: 180,
+      height: 80,
+    },
+  },
+  buttons: [
+    {
+      version: 'primary',
+      text: 'Подробнее',
+    },
+  ],
+  __html: '<ul><li>Список 1</li></ul>',
+};
+
+export default {
+  default: <SnowplowPopupDialog {...PROPS} />,
+};

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

@@ -0,0 +1,83 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { Headline } from '../../components/Headline/Headline';
+import { type HandleAspectsProps } from '../../hooks/useAspects/handleAspects';
+import { type Aspects } from '../../hooks/useAspects/useAspects';
+import { type AspectsDef } from '../../model/AspectsProps';
+import { type HeadlineCommonProps } from '../../model/HeadlineType';
+import { type Picture } from '../../model/Picture';
+import { Dialog } from '../DialogManager/Dialog';
+import { Img } from '../Img/Img';
+import { type LinkButtonContent } from '../LinkButton/LinkButtonContent';
+import { renderButtonsSection } from '../LinkButton/renderButtonsSection';
+import { type PreventableEventWithTarget } from '../PreventableEvent';
+import { RichText } from '../RichText/RichText';
+import { type RichTextProps } from '../RichText/RichTextProps';
+export interface SnowplowPopupDialogContent extends HeadlineCommonProps, RichTextProps {
+  img?: Picture;
+  buttons?: LinkButtonContent[];
+  dataShow?: AspectsDef[];
+  dataClose?: AspectsDef[];
+  delay?: number;
+}
+
+export interface SnowplowPopupDialogProps extends SnowplowPopupDialogContent {
+  onClose?: () => void;
+  aspects: Aspects;
+  handleAspects: (props: HandleAspectsProps) => void;
+}
+
+export const SnowplowPopupDialog = JSX<SnowplowPopupDialogProps>(
+  ({
+    title,
+    description,
+    buttons,
+    img,
+    dataClose,
+    onClose,
+    align,
+    isDotted,
+    __html,
+    itemSize,
+    richVersion,
+    aspects,
+    handleAspects,
+  }) => {
+    const handleClose = useCallback(() => {
+      if (dataClose) {
+        handleAspects({
+          aspectsAttributes: dataClose,
+          aspects,
+          ev: {} as PreventableEventWithTarget,
+        });
+      }
+
+      onClose?.();
+    }, [aspects, dataClose, onClose, handleAspects]);
+
+    return (
+      <Dialog maxWidth="sm" onClose={handleClose}>
+        <div className="flex flex-col gap-lg items-center rounded-md">
+          <Img image={img} />
+          {title || description ? (
+            <Headline
+              align={align}
+              className="w-full"
+              title={title}
+              description={description}
+              headlineVersion="XS"
+              isEmbedded={true}
+            />
+          ) : null}
+          <RichText
+            __html={__html}
+            isDotted={isDotted}
+            itemSize={itemSize}
+            richVersion={richVersion}
+          />
+          {renderButtonsSection(buttons, { isVertical: true })}
+        </div>
+      </Dialog>
+    );
+  },
+);