@redneckz/wildless-cms-uni-blocks 0.14.201 → 0.14.203

package/src/components/ApplicationFormCustom/ApplicationFormCustom.example.json

@@ -1,42 +1,45 @@
 [
   [
-    "Коррупция",
+    "Мошенничество",
     {
       "content": {
-        "title": "Сообщить о коррупции",
-        "typeForm": "CORRUPTION",
+        "title": "Сообщить о возможных мошеннических действиях",
+        "typeForm": "ANTIFRAUD",
         "endpoint": "lead",
-        "formColumns": 1,
-        "inputs": [
-          {
-            "name": "surname",
-            "required": true
-          },
-          {
-            "name": "name",
-            "required": true
-          },
-          {
-            "name": "middleName"
-          },
-          {
-            "name": "phone",
-            "required": true
-          },
-          {
-            "name": "region",
-            "required": true
-          },
-          {
-            "name": "email"
-          },
-          {
-            "name": "comment",
-            "required": true
-          },
+        "sections": [
           {
-            "name": "consentDataProcessing",
-            "required": true
+            "inputs": [
+              {
+                "name": "surname",
+                "required": true
+              },
+              {
+                "name": "name",
+                "required": true
+              },
+              {
+                "name": "middleName"
+              },
+              {
+                "name": "phone",
+                "required": true
+              },
+              {
+                "name": "birthday",
+                "required": true
+              },
+              {
+                "name": "isClient"
+              },
+              {
+                "name": "comment",
+                "required": true
+              },
+              {
+                "name": "consentDataProcessing",
+                "required": true
+              }
+            ]
           }
         ],
         "button": {
@@ -52,47 +55,220 @@
     }
   ],
   [
-    "Мошенничество",
+    "Брокерское обслуживание",
     {
       "content": {
-        "title": "Сообщить о возможных мошеннических действиях",
-        "typeForm": "ANTIFRAUD",
+        "title": "Заполните онлайн-заявку на открытие брокерского счёта",
+        "typeForm": "BROKACCOUNT",
         "endpoint": "lead",
-        "inputs": [
+        "sections": [
           {
-            "name": "surname",
-            "required": true
-          },
-          {
-            "name": "name",
-            "required": true
-          },
-          {
-            "name": "middleName"
-          },
+            "inputs": [
+              {
+                "name": "name",
+                "required": true
+              },
+              {
+                "name": "phone",
+                "required": true
+              },
+              {
+                "name": "isClient"
+              },
+              {
+                "name": "consentDataProcessing",
+                "required": true
+              }
+            ]
+          }
+        ],
+        "button": {
+          "text": "Отправить заявку",
+          "version": "primary"
+        },
+        "link": {
+          "text": "Согласен на обработку персональных данных",
+          "href": "/privacy-policy",
+          "target": "_blank"
+        }
+      }
+    }
+  ],
+  [
+    "Бизнес-карта",
+    {
+      "content": {
+        "title": "Заявка на выпуск бизнес-карты",
+        "typeForm": "BCRD",
+        "endpoint": "sendcorporatelead",
+        "sections": [
+          { "inputs": [{ "name": "region", "required": true }] },
           {
-            "name": "phone",
-            "required": true
-          },
+            "columns": 2,
+            "inputs": [
+              {
+                "name": "name",
+                "required": true
+              },
+              {
+                "name": "phone",
+                "required": true
+              },
+              {
+                "name": "inn",
+                "required": true
+              },
+              {
+                "name": "email",
+                "required": true
+              }
+            ]
+          }
+        ],
+        "button": {
+          "text": "Отправить заявку",
+          "version": "primary"
+        },
+        "link": {
+          "text": "условиями передачи данных",
+          "href": "/privacy-policy",
+          "target": "_blank"
+        }
+      }
+    }
+  ],
+  [
+    "Инкассация",
+    {
+      "content": {
+        "title": "Заполните заявку на консультацию",
+        "typeForm": "COLLECTION",
+        "endpoint": "sendcorporatelead",
+        "sections": [
           {
-            "name": "birthday",
-            "required": true
+            "inputs": [
+              { "name": "fullName", "required": true, "label": "Наименование организации" }
+            ]
           },
           {
-            "name": "client"
-          },
+            "columns": 2,
+            "inputs": [
+              {
+                "name": "region",
+                "required": true
+              },
+              {
+                "name": "partnerComments",
+                "required": true
+              },
+              {
+                "name": "phone",
+                "required": true
+              },
+              {
+                "name": "email"
+              }
+            ]
+          }
+        ],
+        "button": {
+          "text": "Отправить заявку",
+          "version": "primary"
+        },
+        "link": {
+          "text": "условиями передачи данных",
+          "href": "/privacy-policy",
+          "target": "_blank"
+        }
+      }
+    }
+  ],
+  [
+    "Коррупция",
+    {
+      "content": {
+        "title": "Сообщить о коррупции",
+        "typeForm": "CORRUPTION",
+        "endpoint": "lead",
+        "sections": [
           {
-            "name": "comment",
-            "required": true
-          },
+            "inputs": [
+              {
+                "name": "surname",
+                "required": true
+              },
+              {
+                "name": "name",
+                "required": true
+              },
+              {
+                "name": "middleName"
+              },
+              {
+                "name": "phone",
+                "required": true
+              },
+              {
+                "name": "region",
+                "required": true
+              },
+              {
+                "name": "email"
+              },
+              {
+                "name": "comment",
+                "required": true
+              },
+              {
+                "name": "consentDataProcessing",
+                "required": true
+              }
+            ]
+          }
+        ],
+        "button": {
+          "text": "Отправить заявку",
+          "version": "primary"
+        },
+        "link": {
+          "text": "Согласен на обработку персональных данных",
+          "href": "/privacy-policy",
+          "target": "_blank"
+        }
+      }
+    }
+  ],
+  [
+    "Самоинкассация",
+    {
+      "content": {
+        "title": "Заполните заявку на консультацию",
+        "typeForm": "SELFCOLLECTION",
+        "endpoint": "sendcorporatelead",
+        "sections": [
           {
-            "name": "consentDataProcessing",
-            "required": true
+            "inputs": [
+              {
+                "name": "fullName",
+                "required": true
+              },
+              {
+                "name": "region",
+                "required": true
+              },
+              {
+                "name": "phone",
+                "required": true
+              },
+              {
+                "name": "consentDataProcessing",
+                "required": true
+              }
+            ]
           }
         ],
-        "formColumns": 1,
         "button": {
-          "text": "Отправить",
+          "text": "Отправить заявку",
           "version": "primary"
         },
         "link": {
@@ -103,4 +279,4 @@
       }
     }
   ]
-]
+]

package/src/components/ApplicationFormCustom/ApplicationFormCustom.fixture.tsx

@@ -1,7 +1,20 @@
 import '../../setup-fixture';
 
+import { type LinkProps } from '../../model/LinkProps';
 import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { ApplicationFormCustom } from './ApplicationFormCustom';
+import { type SubmitButtonProps } from './ApplicationFormCustomContent';
+
+const button: SubmitButtonProps = {
+  text: 'Отправить заявку',
+  version: 'primary',
+};
+
+const link: LinkProps = {
+  text: 'Согласен на обработку персональных данных',
+  href: '/privacy-policy',
+  target: '_blank',
+};
 
 export default {
   default: (
@@ -9,100 +22,128 @@ export default {
       <ApplicationFormCustom
         className="col-span-12"
         title="Заголовок"
-        typeForm={'CORRUPTION'}
-        inputs={[
-          { name: 'name', required: true },
-          { name: 'middleName' },
-          { name: 'consentDataProcessing', required: true },
+        typeForm="CORRUPTION"
+        endpoint="lead"
+        sections={[
+          {
+            inputs: [
+              { name: 'name', required: true },
+              { name: 'middleName' },
+              { name: 'consentDataProcessing', required: true },
+            ],
+          },
         ]}
-        button={{
-          text: 'Отправить заявку',
-          version: 'primary',
-        }}
-        link={{
-          text: 'Согласен на обработку персональных данных',
-          href: '/privacy-policy',
-          target: '_blank',
-        }}
+        button={button}
+        link={link}
+      />
+      <PopupManager />
+    </div>
+  ),
+  antiFraud: (
+    <div className="container grid grid-cols-12">
+      <ApplicationFormCustom
+        className="col-span-12"
+        title="Сообщить о возможных мошеннических действиях"
+        typeForm="ANTIFRAUD"
         endpoint="lead"
+        sections={[
+          {
+            inputs: [
+              { name: 'surname', required: true },
+              { name: 'name', required: true },
+              { name: 'middleName' },
+              { name: 'phone', required: true },
+              { name: 'birthday', required: true },
+              { name: 'isClient' },
+              { name: 'comment', required: true },
+              { name: 'consentDataProcessing', required: true },
+            ],
+          },
+        ]}
+        button={button}
+        link={link}
       />
       <PopupManager />
     </div>
   ),
-  withoutAgreement: (
+  brokAccount: (
     <div className="container grid grid-cols-12">
       <ApplicationFormCustom
         className="col-span-12"
-        title="Заголовок"
-        typeForm={'CORRUPTION'}
-        inputs={[{ name: 'name', required: true }, { name: 'middleName' }]}
-        button={{
-          text: 'Отправить заявку',
-          version: 'primary',
-        }}
-        link={{
-          text: 'обработкой персональных данных',
-          href: '/privacy-policy',
-          target: '_blank',
-        }}
+        title="Заполните онлайн-заявку на открытие брокерского счёта"
+        typeForm="BROKACCOUNT"
         endpoint="lead"
+        sections={[
+          {
+            inputs: [
+              { name: 'name', required: true, label: 'ФИО' },
+              { name: 'phone', required: true },
+              { name: 'isClient' },
+              { name: 'consentDataProcessing', required: true },
+            ],
+          },
+        ]}
+        button={button}
+        link={link}
       />
       <PopupManager />
     </div>
   ),
-  corruption: (
+  businessCard: (
     <div className="container grid grid-cols-12">
       <ApplicationFormCustom
         className="col-span-12"
-        title="Сообщить о коррупции"
-        typeForm={'CORRUPTION'}
-        inputs={[
-          { name: 'surname', required: true },
-          { name: 'name', required: true },
-          { name: 'middleName' },
-          { name: 'phone', required: true },
-          { name: 'region', required: true },
-          { name: 'email' },
-          { name: 'comment', required: true },
-          { name: 'consentDataProcessing', required: true },
+        title="Заявка на выпуск бизнес-карты"
+        typeForm="BCRD"
+        endpoint="sendcorporatelead"
+        sections={[
+          {
+            inputs: [{ name: 'region', required: true }],
+          },
+          {
+            inputs: [
+              { name: 'name', required: true },
+              { name: 'phone', required: true },
+              { name: 'inn', required: true },
+              { name: 'email', required: true },
+            ],
+            columns: 2,
+          },
         ]}
-        button={{
-          text: 'Отправить заявку',
-          version: 'primary',
-        }}
+        button={button}
         link={{
-          text: 'Согласен на обработку персональных данных',
+          text: 'условиями передачи данных',
           href: '/privacy-policy',
           target: '_blank',
         }}
-        formColumns={1}
       />
       <PopupManager />
     </div>
   ),
-  antiFraud: (
+  collection: (
     <div className="container grid grid-cols-12">
       <ApplicationFormCustom
         className="col-span-12"
-        title="Сообщить о возможных мошеннических действиях"
-        typeForm={'ANTIFRAUD'}
-        inputs={[
-          { name: 'surname', required: true },
-          { name: 'name', required: true },
-          { name: 'middleName' },
-          { name: 'phone', required: true },
-          { name: 'birthday', required: true },
-          { name: 'client' },
-          { name: 'comment', required: true },
-          { name: 'consentDataProcessing', required: true },
+        title="Заполните заявку на консультацию"
+        typeForm="COLLECTION"
+        endpoint="sendcorporatelead"
+        sections={[
+          {
+            inputs: [{ name: 'fullName', required: true, label: 'Наименование организации' }],
+          },
+          {
+            columns: 2,
+            inputs: [
+              { name: 'region', required: true },
+              { name: 'partnerComments', required: true },
+              { name: 'phone', required: true },
+              { name: 'email' },
+            ],
+          },
         ]}
-        formColumns={1}
-        button={{
-          text: 'Отправить заявку',
-          version: 'primary',
-        }}
+        button={button}
         link={{
-          text: 'Согласен на обработку персональных данных',
+          text: 'условиями передачи данных',
           href: '/privacy-policy',
           target: '_blank',
         }}
@@ -110,4 +151,54 @@ export default {
       <PopupManager />
     </div>
   ),
+  corruption: (
+    <div className="container grid grid-cols-12">
+      <ApplicationFormCustom
+        className="col-span-12"
+        title="Сообщить о коррупции"
+        typeForm="CORRUPTION"
+        endpoint="lead"
+        sections={[
+          {
+            inputs: [
+              { name: 'surname', required: true },
+              { name: 'name', required: true },
+              { name: 'middleName' },
+              { name: 'phone', required: true },
+              { name: 'region', required: true },
+              { name: 'email' },
+              { name: 'comment', required: true },
+              { name: 'consentDataProcessing', required: true },
+            ],
+          },
+        ]}
+        button={button}
+        link={link}
+      />
+      <PopupManager />
+    </div>
+  ),
+  selfCollection: (
+    <div className="container grid grid-cols-12">
+      <ApplicationFormCustom
+        className="col-span-12"
+        title="Самоинкассация (ЮЛ)"
+        typeForm="SELFCOLLECTION"
+        endpoint="sendcorporatelead"
+        sections={[
+          {
+            inputs: [
+              { name: 'fullName', required: true },
+              { name: 'region', required: true },
+              { name: 'phone', required: true },
+              { name: 'consentDataProcessing', required: true },
+            ],
+          },
+        ]}
+        button={button}
+        link={link}
+      />
+      <PopupManager />
+    </div>
+  ),
 };

package/src/components/ApplicationFormCustom/ApplicationFormCustom.tsx

@@ -10,8 +10,11 @@ import { isValidationSuccess } from '../../validation/validator';
 import { formStyle } from '../ApplicationForm/formStyle';
 import { getFormatData } from '../ApplicationForm/getFormatData';
 import { renderAgreementSubmit } from '../ApplicationForm/renderAgreementSubmit';
-import { type ApplicationFormCustomContent, type FieldDef } from './ApplicationFormCustomContent';
-import { columnStyle } from './columnStyle';
+import {
+  type ApplicationFormCustomContent,
+  type FieldDef,
+  type FormColumnsCount,
+} from './ApplicationFormCustomContent';
 import { getField } from './getField';
 import { getInitialFormState } from './getInitialFormState';
 import { getObjectValidator } from './getObjectValidator';
@@ -20,11 +23,10 @@ interface ApplicationFormCustomProps extends ApplicationFormCustomContent, UniBl
 const API = LeadServiceAPI();
 
 export const ApplicationFormCustom = JSX<ApplicationFormCustomProps>(
-  ({ className, title, typeForm = '', inputs = [], button, link, formColumns = 2, endpoint }) => {
+  ({ className, title, typeForm = '', sections = [], button, link, endpoint }) => {
+    const inputs = (sections?.flatMap((_) => _?.inputs) || []) as FieldDef[];
     const initialFormState = getInitialFormState(inputs, typeForm);
-
     const [responseType, setResponseType] = useState<'OK' | 'Fail' | ''>('');
-
     const feedbackValidator = objectValidator(getObjectValidator(inputs));
 
     const handleSubmit = useCallback(async (data: Record<string, any>) => {
@@ -47,9 +49,15 @@ export const ApplicationFormCustom = JSX<ApplicationFormCustomProps>(
         title={title}
         responseType={responseType}
       >
-        <form className={columnStyle[formColumns]} onSubmit={onSubmit}>
-          {inputs.map((_, index) => (
-            <div key={String(index)}>{getField(_, field)}</div>
+        <form className="" onSubmit={onSubmit}>
+          {sections.map((_, i) => (
+            <div
+              key={`section-${i}`}
+              className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}
+            >
+              {_?.title ? <div className="@xl:text-center @xl:col-span-2">{_.title}</div> : null}
+              {_?.inputs?.map(getField(field))}
+            </div>
           ))}
           {renderAgreementSubmit(
             fieldName ? field('consentDataProcessing') : undefined,
@@ -62,5 +70,8 @@ export const ApplicationFormCustom = JSX<ApplicationFormCustomProps>(
   },
 );
 
+const inputColumnStyles = (column: FormColumnsCount | undefined) =>
+  column === 2 ? '@xl:grid-cols-2' : '';
+
 const getConsentDataProcessing = (inputs: FieldDef[]) =>
   inputs.find((_) => _?.name === 'consentDataProcessing');

package/src/components/ApplicationFormCustom/ApplicationFormCustom.ui.json

@@ -0,0 +1 @@
+{}