@redneckz/wildless-cms-uni-blocks 0.14.871 → 0.14.873

package/mobile/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -2,6 +2,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm/useForm';
+import { NoConsentDialog } from '../../retail/components/NoConsentDialog/NoConsentDialog';
 import { type SectionsRetailProps } from '../../retail/model/InputSectionsType';
 import { type FieldRetailDef } from '../../retail/model/RetailFormContent';
 import { getLimitedBirthdayValidation } from '../../retail/validator/getLimitedBirthdayValidation';
@@ -12,6 +13,7 @@ import { getFormValidator } from '../../ui-kit/FormField/getObjectValidator';
 import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
 import { renderTitle } from '../../ui-kit/FormField/renderTitle';
 import { Loader } from '../../ui-kit/Loader/Loader';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { ResponseTypeDialog } from '../../ui-kit/ResponseTypeDialog/ResponseTypeDialog';
 import { Text } from '../../ui-kit/Text/Text';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
@@ -42,9 +44,11 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
     ...rest
   }) => {
     const [esiaStatus, setEsiaStatus] = useState<EsiaStatuses>();
+    const [attemptsWithoutConsents, setAttemptsWithoutConsents] = useState(0);
     const leadForm = useRef<HTMLFormElement | null>(null);
     const applicationFormData = useMemo(() => getApplicationFormData(productType), [productType]);
     const inputs = useMemo(() => getInputs(applicationFormData), [applicationFormData]);
+    const noConsentDialog = useDialog(NoConsentDialog);
 
     const extendedValidatorObj = useMemo(() => getExtendedValidatorObj(productType), [productType]);
     const formValidator = useMemo(
@@ -71,6 +75,17 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
       onSubmit: handleSubmit,
     });
 
+    const onSubmitWithPrecondition = (ev: PreventableEvent) => {
+      if (!field('processPersonalDataFlg')?.value) {
+        setAttemptsWithoutConsents((prev) => prev + 1);
+        attemptsWithoutConsents > 0 &&
+          noConsentDialog.open({
+            attempts: attemptsWithoutConsents,
+          });
+      }
+      onSubmit?.(ev);
+    };
+
     const responseTypeDialog = useDialog(ResponseTypeDialog);
     useEffect(() => {
       if (ok !== undefined) {
@@ -97,7 +112,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
         {...rest}
       >
         {!esiaStatus ? <EsiaLoginBanner onChangeEsiaStatus={setEsiaStatus} /> : null}
-        <form onSubmit={onSubmit} className="space-y-m relative" ref={leadForm}>
+        <form onSubmit={onSubmitWithPrecondition} className="space-y-m relative" ref={leadForm}>
           {esiaStatus === EsiaStatuses.Pending ? <Loader blur={false} /> : null}
           {applicationFormData.map((_, i) => (
             <div

package/mobile/src/components/TariffsTable/TariffsTable.tsx

@@ -54,7 +54,9 @@ export const TariffsTable = UniBlock<TariffsTableProps>(
             <Foldable>
               <TariffsTableWrapper>
                 {visibleRows}
-                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+                <FoldableSection isUnfolded={isUnfolded} isOverflowVisible={true}>
+                  {hiddenRows}
+                </FoldableSection>
               </TariffsTableWrapper>
               <DefaultFoldButton className="text-h4" isUnfolded={isUnfolded} onClick={toggle} />
             </Foldable>

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

@@ -0,0 +1,55 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { OnCloseProps } from '../../../model/OnCloseProps';
+
+import { locationNavigator } from '../../../external/locationNavigator';
+import { Button } from '../../../ui-kit/Button/Button';
+import { Dialog } from '../../../ui-kit/DialogManager/Dialog';
+import { Paragraph } from '../../../ui-kit/Paragraph/Paragraph';
+import { noop } from '../../../utils/noop';
+
+export interface NoConsentDialogProps extends OnCloseProps {
+  attempts: number;
+  onSubmit?: (confirmStatus: string) => void;
+}
+
+export const NoConsentDialog = JSX<NoConsentDialogProps>(({ attempts, onClose = noop }) => {
+  const navigator = locationNavigator();
+  const isMaxAttempts = attempts > 1;
+
+  const returnToMainPage = useCallback(() => {
+    navigator.assign('/natural');
+  }, []);
+
+  const handleClose = useCallback(() => {
+    if (isMaxAttempts) {
+      returnToMainPage();
+    } else {
+      onClose();
+    }
+  }, [isMaxAttempts]);
+
+  return (
+    <Dialog
+      className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg px-5xl"
+      onClose={handleClose}
+    >
+      <div className="flex flex-col gap-xl items-center">
+        <Paragraph align="text-center">Уважаемый клиент!</Paragraph>
+        <Paragraph align="text-center">
+          Для получения кредита Вам необходимо обратиться в офис Банка
+        </Paragraph>
+        <div className="flex flex-col sm:flex-row gap-xl items-center">
+          <Button type="button" version="secondary" onClick={returnToMainPage}>
+            Завершить
+          </Button>
+          {isMaxAttempts ? null : (
+            <Button type="button" onClick={onClose}>
+              Продолжить
+            </Button>
+          )}
+        </div>
+      </div>
+    </Dialog>
+  );
+});

package/mobile/src/ui-kit/Foldable/FoldableSection.tsx

@@ -6,33 +6,40 @@ import { style } from '../../utils/style';
 
 export interface FoldableSectionProps extends ComponentType {
   isUnfolded?: boolean;
+  isOverflowVisible?: boolean;
 }
 
-export const FoldableSection = JSX<FoldableSectionProps>(({ className, isUnfolded, children }) => {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const childrenWrapperRef = useResizeObserver(
-    (childrenWrapperEl) => {
-      if (containerRef.current) {
-        containerRef.current.style.maxHeight = isUnfolded
-          ? `${childrenWrapperEl.scrollHeight}px`
-          : '';
-      }
-    },
-    [isUnfolded],
-  );
+export const FoldableSection = JSX<FoldableSectionProps>(
+  ({ className, isUnfolded, isOverflowVisible = false, children }) => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const childrenWrapperRef = useResizeObserver(
+      (childrenWrapperEl) => {
+        if (containerRef.current) {
+          containerRef.current.style.maxHeight = isUnfolded
+            ? `${childrenWrapperEl.scrollHeight}px`
+            : '';
+        }
+      },
+      [isUnfolded],
+    );
 
-  return (
-    <div
-      ref={containerRef}
-      className={style('transition-max-h duration-300 overflow-hidden', {
-        'max-h-0': Boolean(containerRef.current || !isUnfolded),
-      })}
-      role="tabpanel"
-      aria-label="Сворачивающаяся секция"
-    >
-      <div className={className} ref={childrenWrapperRef}>
-        {children}
+    return (
+      <div
+        ref={containerRef}
+        className={style(
+          'transition-max-h duration-300',
+          isOverflowVisible && isUnfolded ? 'overflow-clip' : 'overflow-hidden',
+          {
+            'max-h-0': Boolean(containerRef.current || !isUnfolded),
+          },
+        )}
+        role="tabpanel"
+        aria-label="Сворачивающаяся секция"
+      >
+        <div className={className} ref={childrenWrapperRef}>
+          {children}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.871",
+  "version": "0.14.873",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -2,6 +2,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm/useForm';
+import { NoConsentDialog } from '../../retail/components/NoConsentDialog/NoConsentDialog';
 import { type SectionsRetailProps } from '../../retail/model/InputSectionsType';
 import { type FieldRetailDef } from '../../retail/model/RetailFormContent';
 import { getLimitedBirthdayValidation } from '../../retail/validator/getLimitedBirthdayValidation';
@@ -12,6 +13,7 @@ import { getFormValidator } from '../../ui-kit/FormField/getObjectValidator';
 import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
 import { renderTitle } from '../../ui-kit/FormField/renderTitle';
 import { Loader } from '../../ui-kit/Loader/Loader';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { ResponseTypeDialog } from '../../ui-kit/ResponseTypeDialog/ResponseTypeDialog';
 import { Text } from '../../ui-kit/Text/Text';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
@@ -42,9 +44,11 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
     ...rest
   }) => {
     const [esiaStatus, setEsiaStatus] = useState<EsiaStatuses>();
+    const [attemptsWithoutConsents, setAttemptsWithoutConsents] = useState(0);
     const leadForm = useRef<HTMLFormElement | null>(null);
     const applicationFormData = useMemo(() => getApplicationFormData(productType), [productType]);
     const inputs = useMemo(() => getInputs(applicationFormData), [applicationFormData]);
+    const noConsentDialog = useDialog(NoConsentDialog);
 
     const extendedValidatorObj = useMemo(() => getExtendedValidatorObj(productType), [productType]);
     const formValidator = useMemo(
@@ -71,6 +75,17 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
       onSubmit: handleSubmit,
     });
 
+    const onSubmitWithPrecondition = (ev: PreventableEvent) => {
+      if (!field('processPersonalDataFlg')?.value) {
+        setAttemptsWithoutConsents((prev) => prev + 1);
+        attemptsWithoutConsents > 0 &&
+          noConsentDialog.open({
+            attempts: attemptsWithoutConsents,
+          });
+      }
+      onSubmit?.(ev);
+    };
+
     const responseTypeDialog = useDialog(ResponseTypeDialog);
     useEffect(() => {
       if (ok !== undefined) {
@@ -97,7 +112,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
         {...rest}
       >
         {!esiaStatus ? <EsiaLoginBanner onChangeEsiaStatus={setEsiaStatus} /> : null}
-        <form onSubmit={onSubmit} className="space-y-m relative" ref={leadForm}>
+        <form onSubmit={onSubmitWithPrecondition} className="space-y-m relative" ref={leadForm}>
           {esiaStatus === EsiaStatuses.Pending ? <Loader blur={false} /> : null}
           {applicationFormData.map((_, i) => (
             <div

package/src/components/TariffsTable/TariffsTable.tsx

@@ -54,7 +54,9 @@ export const TariffsTable = UniBlock<TariffsTableProps>(
             <Foldable>
               <TariffsTableWrapper>
                 {visibleRows}
-                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+                <FoldableSection isUnfolded={isUnfolded} isOverflowVisible={true}>
+                  {hiddenRows}
+                </FoldableSection>
               </TariffsTableWrapper>
               <DefaultFoldButton className="text-h4" isUnfolded={isUnfolded} onClick={toggle} />
             </Foldable>

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

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

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

@@ -0,0 +1,55 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { OnCloseProps } from '../../../model/OnCloseProps';
+
+import { locationNavigator } from '../../../external/locationNavigator';
+import { Button } from '../../../ui-kit/Button/Button';
+import { Dialog } from '../../../ui-kit/DialogManager/Dialog';
+import { Paragraph } from '../../../ui-kit/Paragraph/Paragraph';
+import { noop } from '../../../utils/noop';
+
+export interface NoConsentDialogProps extends OnCloseProps {
+  attempts: number;
+  onSubmit?: (confirmStatus: string) => void;
+}
+
+export const NoConsentDialog = JSX<NoConsentDialogProps>(({ attempts, onClose = noop }) => {
+  const navigator = locationNavigator();
+  const isMaxAttempts = attempts > 1;
+
+  const returnToMainPage = useCallback(() => {
+    navigator.assign('/natural');
+  }, []);
+
+  const handleClose = useCallback(() => {
+    if (isMaxAttempts) {
+      returnToMainPage();
+    } else {
+      onClose();
+    }
+  }, [isMaxAttempts]);
+
+  return (
+    <Dialog
+      className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg px-5xl"
+      onClose={handleClose}
+    >
+      <div className="flex flex-col gap-xl items-center">
+        <Paragraph align="text-center">Уважаемый клиент!</Paragraph>
+        <Paragraph align="text-center">
+          Для получения кредита Вам необходимо обратиться в офис Банка
+        </Paragraph>
+        <div className="flex flex-col sm:flex-row gap-xl items-center">
+          <Button type="button" version="secondary" onClick={returnToMainPage}>
+            Завершить
+          </Button>
+          {isMaxAttempts ? null : (
+            <Button type="button" onClick={onClose}>
+              Продолжить
+            </Button>
+          )}
+        </div>
+      </div>
+    </Dialog>
+  );
+});

package/src/ui-kit/Foldable/FoldableSection.tsx

@@ -6,33 +6,40 @@ import { style } from '../../utils/style';
 
 export interface FoldableSectionProps extends ComponentType {
   isUnfolded?: boolean;
+  isOverflowVisible?: boolean;
 }
 
-export const FoldableSection = JSX<FoldableSectionProps>(({ className, isUnfolded, children }) => {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const childrenWrapperRef = useResizeObserver(
-    (childrenWrapperEl) => {
-      if (containerRef.current) {
-        containerRef.current.style.maxHeight = isUnfolded
-          ? `${childrenWrapperEl.scrollHeight}px`
-          : '';
-      }
-    },
-    [isUnfolded],
-  );
+export const FoldableSection = JSX<FoldableSectionProps>(
+  ({ className, isUnfolded, isOverflowVisible = false, children }) => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const childrenWrapperRef = useResizeObserver(
+      (childrenWrapperEl) => {
+        if (containerRef.current) {
+          containerRef.current.style.maxHeight = isUnfolded
+            ? `${childrenWrapperEl.scrollHeight}px`
+            : '';
+        }
+      },
+      [isUnfolded],
+    );
 
-  return (
-    <div
-      ref={containerRef}
-      className={style('transition-max-h duration-300 overflow-hidden', {
-        'max-h-0': Boolean(containerRef.current || !isUnfolded),
-      })}
-      role="tabpanel"
-      aria-label="Сворачивающаяся секция"
-    >
-      <div className={className} ref={childrenWrapperRef}>
-        {children}
+    return (
+      <div
+        ref={containerRef}
+        className={style(
+          'transition-max-h duration-300',
+          isOverflowVisible && isUnfolded ? 'overflow-clip' : 'overflow-hidden',
+          {
+            'max-h-0': Boolean(containerRef.current || !isUnfolded),
+          },
+        )}
+        role="tabpanel"
+        aria-label="Сворачивающаяся секция"
+      >
+        <div className={className} ref={childrenWrapperRef}>
+          {children}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);