@redneckz/wildless-cms-uni-blocks 0.14.609 → 0.14.617

package/mobile/lib/ui-kit/InputNumber/InputNumber.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { Input } from '../Input/Input.js';
+export const InputNumber = JSX(({ children, onChange, inputLength, ...inputProps }) => {
+    const handleChange = useCallback((v) => onChange && inputLength && v.length <= inputLength && onChange(normalizeInput(v)), [onChange]);
+    return (_jsx(Input, { ...inputProps, onChange: handleChange, onFocus: (ev) => handleChange(ev?.target?.value || ''), children: children }));
+});
+const normalizeInput = (value) => value.replace(/\D/g, '');
+//# sourceMappingURL=InputNumber.js.map

package/mobile/lib/ui-kit/InputNumber/InputNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputNumber.js","sourceRoot":"","sources":["../../../src/ui-kit/InputNumber/InputNumber.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,UAAU,EAAE,EAAE,EAAE;IAChG,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAS,EAAE,EAAE,CACZ,QAAQ,IAAI,WAAW,IAAI,CAAC,CAAC,MAAM,IAAI,WAAW,IAAI,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EACnF,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,KAAC,KAAK,OACA,UAAU,EACd,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,YAAY,CAAE,EAAE,EAAE,MAA2B,EAAE,KAAK,IAAI,EAAE,CAAC,YAE3E,QAAQ,GACH,CACT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC"}

package/mobile/lib/ui-kit/SnilsInput/SnilsInput.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { normalizeWithMask } from '../../utils/normalizeWithMask.js';
 import { Input } from '../Input/Input.js';
-import { normalizeSnils } from './normalizeSnils.js';
 export const SnilsInput = JSX(({ children, onChange, ...inputProps }) => {
-    const handleChange = useCallback((v) => onChange && onChange(normalizeSnils(v)), [onChange]);
+    const handleChange = useCallback((v) => onChange && onChange(normalizeWithMask(v, '___-___-___ __')), [onChange]);
     const handleBlur = useCallback((v) => {
         if (v === '___-___-___ __') {
             onChange && onChange('');

package/mobile/lib/ui-kit/SnilsInput/SnilsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SnilsInput.js","sourceRoot":"","sources":["../../../src/ui-kit/SnilsInput/SnilsInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAAE,EAAE;IAClF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAS,EAAE,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EACtD,CAAC,QAAQ,CAAC,CACX,CAAC;IACF,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAS,EAAE,EAAE;QAC3C,IAAI,CAAC,KAAK,gBAAgB,EAAE;YAC1B,QAAQ,IAAI,QAAQ,CAAC,EAAE,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,KAAK,OACA,UAAU,EACd,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,YAAY,CAAE,EAAE,EAAE,MAA2B,EAAE,KAAK,IAAI,EAAE,CAAC,EAC5E,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,UAAU,CAAE,EAAE,EAAE,MAA2B,EAAE,KAAK,IAAI,EAAE,CAAC,YAExE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"SnilsInput.js","sourceRoot":"","sources":["../../../src/ui-kit/SnilsInput/SnilsInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAAE,EAAE;IAClF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAS,EAAE,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,iBAAiB,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,EAC3E,CAAC,QAAQ,CAAC,CACX,CAAC;IACF,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAS,EAAE,EAAE;QAC3C,IAAI,CAAC,KAAK,gBAAgB,EAAE;YAC1B,QAAQ,IAAI,QAAQ,CAAC,EAAE,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,KAAK,OACA,UAAU,EACd,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,YAAY,CAAE,EAAE,EAAE,MAA2B,EAAE,KAAK,IAAI,EAAE,CAAC,EAC5E,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,UAAU,CAAE,EAAE,EAAE,MAA2B,EAAE,KAAK,IAAI,EAAE,CAAC,YAExE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/mobile/lib/ui-kit/TimerCircle/TimerCircle.js

@@ -2,13 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { Headline } from '../../components/Headline/Headline.js';
+import { style } from '../../utils/style.js';
 import { RichText } from '../RichText/RichText.js';
 import { Timer } from './Timer.js';
 export const TimerCircle = JSX(({ interval = 0, title, __html }) => {
     const [time, setTime] = useState(interval);
     const gradientPercentage = 100 - ((interval - time) / interval) * 100;
-    return (_jsxs("div", { children: [_jsx(Headline, { title: title, headlineVersion: "S" }), _jsxs("div", { className: "flex justify-center items-center flex-col", children: [_jsxs("div", { className: "relative flex items-center justify-center w-60 h-60 rounded-full bg-gray text-transparent mb-5", children: [_jsx("div", { className: "absolute inset-0 rounded-full", style: {
+    return (_jsxs("div", { children: [title ? _jsx(Headline, { title: title, headlineVersion: "S" }) : null, _jsxs("div", { className: "flex justify-center items-center flex-col", children: [_jsxs("div", { className: style(`relative flex items-center justify-center w-24 h-24 rounded-full bg-gray text-transparent mb-5`), children: [_jsx("div", { className: "absolute inset-0 rounded-full", style: {
                                     background: `conic-gradient(rgb(66, 171, 68) ${gradientPercentage}%, rgb(125, 126, 127) 0deg)`,
-                                } }), _jsx("div", { className: "z-10 flex items-center justify-center px-4 py-2 rounded-full w-56 h-56 bg-white text-3xl text-primary-text", children: _jsx(Timer, { interval: interval, time: time, setTime: setTime }) })] }), _jsx(RichText, { __html: __html })] })] }));
+                                } }), _jsx("div", { className: "z-10 flex items-center justify-center px-4 py-2 rounded-full w-20 h-20 bg-white text-primary-text text-m", children: _jsx(Timer, { interval: interval, time: time, setTime: setTime }) })] }), __html ? _jsx(RichText, { __html: __html }) : null] })] }));
 });
 //# sourceMappingURL=TimerCircle.js.map

package/mobile/lib/ui-kit/TimerCircle/TimerCircle.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimerCircle.js","sourceRoot":"","sources":["../../../src/ui-kit/TimerCircle/TimerCircle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAQhC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAmB,CAAC,EAAE,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IACnF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAE3C,MAAM,kBAAkB,GAAG,GAAG,GAAG,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;IAEtE,OAAO,CACL,0BACE,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,eAAe,EAAC,GAAG,GAAG,EAC9C,eAAK,SAAS,EAAC,2CAA2C,aACxD,eAAK,SAAS,EAAC,gGAAgG,aAC7G,cACE,SAAS,EAAC,+BAA+B,EACzC,KAAK,EAAE;oCACL,UAAU,EAAE,mCAAmC,kBAAkB,6BAA6B;iCAC/F,GACD,EACF,cAAK,SAAS,EAAC,4GAA4G,YACzH,KAAC,KAAK,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,GACvD,IACF,EACN,KAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,GAAI,IACxB,IACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"TimerCircle.js","sourceRoot":"","sources":["../../../src/ui-kit/TimerCircle/TimerCircle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAQhC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAmB,CAAC,EAAE,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IACnF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAE3C,MAAM,kBAAkB,GAAG,GAAG,GAAG,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;IAEtE,OAAO,CACL,0BACG,KAAK,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,eAAe,EAAC,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,EAC9D,eAAK,SAAS,EAAC,2CAA2C,aACxD,eACE,SAAS,EAAE,KAAK,CACd,gGAAgG,CACjG,aAED,cACE,SAAS,EAAC,+BAA+B,EACzC,KAAK,EAAE;oCACL,UAAU,EAAE,mCAAmC,kBAAkB,6BAA6B;iCAC/F,GACD,EACF,cAAK,SAAS,EAAC,0GAA0G,YACvH,KAAC,KAAK,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,GACvD,IACF,EACL,MAAM,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAC,CAAC,IAAI,IACzC,IACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/mobile/lib/utils/normalizeWithMask.d.ts

@@ -0,0 +1 @@
+export declare function normalizeWithMask(value: string, pattern: string): string;

package/mobile/lib/utils/normalizeWithMask.js

@@ -0,0 +1,17 @@
+export function normalizeWithMask(value, pattern) {
+    const valueNumbers = value.replace(/\D/g, '');
+    if (valueNumbers === '' || value?.length === pattern.length) {
+        return value;
+    }
+    const patternInArr = [...pattern];
+    const firstPlaceholderIndex = patternInArr.findIndex(isPlaceholder);
+    const valueWildcardIndicies = patternInArr.map((_, i) => isWildcard(_) ? patternInArr.slice(0, i).filter(isWildcard).length : -1);
+    const applyPlaceholder = (_, i) => isDigit(_) ? _ : valueNumbers.charAt(valueWildcardIndicies[i]) || _;
+    const resultInArr = patternInArr.map(applyPlaceholder);
+    const resultLength = valueWildcardIndicies.indexOf(valueNumbers.length - 1) + 1;
+    return resultInArr.slice(0, Math.max(firstPlaceholderIndex, resultLength)).join('');
+}
+const isPlaceholder = (_) => _ === '_';
+const isDigit = (_) => /\d/.test(_);
+const isWildcard = (_) => isPlaceholder(_) || isDigit(_);
+//# sourceMappingURL=normalizeWithMask.js.map

package/mobile/lib/utils/normalizeWithMask.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeWithMask.js","sourceRoot":"","sources":["../../src/utils/normalizeWithMask.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,iBAAiB,CAAC,KAAa,EAAE,OAAe;IAC9D,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAC9C,IAAI,YAAY,KAAK,EAAE,IAAI,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE;QAC3D,OAAO,KAAK,CAAC;KACd;IAED,MAAM,YAAY,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC;IAClC,MAAM,qBAAqB,GAAG,YAAY,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IACpE,MAAM,qBAAqB,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACtD,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CACxE,CAAC;IACF,MAAM,gBAAgB,GAAG,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE,CAChD,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAEtE,MAAM,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvD,MAAM,YAAY,GAAG,qBAAqB,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAEhF,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,qBAAqB,EAAE,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtF,CAAC;AAED,MAAM,aAAa,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC;AAC/C,MAAM,OAAO,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAC5C,MAAM,UAAU,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC"}

package/mobile/src/api/RetailAPI/utils/getUpdateUserTask.ts

@@ -1,10 +1,13 @@
+import { type FormState } from '../../../components/ApplicationLeadForm/getInitialFormState';
+import { formatDate } from '../../../utils/formatDate';
+import { formatPhone } from '../../../utils/formatPhone';
 import { type UpdateUserTaskBody } from '../updateUserTask';
 
 type getUpdateUserTaskDataType = {
   participantId: number;
   taskId: number;
   profileId: number;
-  formData?: Record<string, any>;
+  formData: FormState;
 };
 
 export const getUpdateUserTaskData = ({
@@ -12,41 +15,52 @@ export const getUpdateUserTaskData = ({
   taskId,
   profileId,
   formData,
-}: getUpdateUserTaskDataType): UpdateUserTaskBody => ({
-  sendToBank: true,
-  taskKind: 'SHORT',
-  task: {
-    taskSource: globalThis.location.origin,
-    id: taskId,
-    participants: [
-      {
-        birthDate: formData?.birthDate,
-        id: participantId,
-        midname: formData?.midname,
-        name: formData?.name,
-        surname: formData?.surname,
-        profile: {
-          id: profileId,
-        },
-        participantContacts: [
-          {
-            contactTypeCd: {
-              key: 'EMAIL',
-            },
-            value: formData?.email,
+}: getUpdateUserTaskDataType): UpdateUserTaskBody => {
+  const {
+    name = '',
+    surname = '',
+    middleName = '',
+    birthday = '',
+    phone = '',
+    email = '',
+  } = formData;
+
+  return {
+    sendToBank: true,
+    taskKind: 'SHORT',
+    task: {
+      taskSource: globalThis.location.origin,
+      id: taskId,
+      participants: [
+        {
+          birthDate: formatDate(birthday, true),
+          id: participantId,
+          midname: middleName,
+          name: name,
+          surname: surname,
+          profile: {
+            id: profileId,
           },
-          {
-            contactTypeCd: {
-              key: 'MAIN_PHONE',
+          participantContacts: [
+            {
+              contactTypeCd: {
+                key: 'EMAIL',
+              },
+              value: email,
             },
-            value: formData?.phone,
+            {
+              contactTypeCd: {
+                key: 'MAIN_PHONE',
+              },
+              value: formatPhone(phone),
+            },
+          ],
+          roleCd: {
+            key: 'BORROWER',
+            value: 'Заемщик',
           },
-        ],
-        roleCd: {
-          key: 'BORROWER',
-          value: 'Заемщик',
         },
-      },
-    ],
-  },
-});
+      ],
+    },
+  };
+};

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

@@ -10,7 +10,7 @@ import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { renderInputs } from '../ApplicationForm/renderInputs';
 import { type ApplicationLeadFormContent, type FieldDef } from './ApplicationLeadFormContent';
-import { getInitialFormState } from './getInitialFormState';
+import { getInitialFormState, type FormState } from './getInitialFormState';
 import { renderSubmitButton } from './renderSubmitButton';
 import { useApplicationLeadApi } from './useApplicationLeadApi';
 import { useInitApplicationLead } from './useInitApplicationLead';
@@ -22,7 +22,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
     const inputs = (sections?.flatMap((_) => _?.inputs) || []) as FieldDef[];
     const [responseType, setResponseType] = useState<'OK' | 'Fail' | ''>('');
     useInitApplicationLead();
-    const [leadForm, setLeadForm] = useLocalStorage<string>('leadForm');
+    const [leadForm, setLeadForm] = useLocalStorage<FormState>('leadForm');
     const initialFormState = getInitialFormState(inputs, leadForm, typeForm);
     const { handleSubmit, responseStatus } = useApplicationLeadApi({
       inputs,
@@ -57,7 +57,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
               className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}
             >
               {renderTitle(_.title)}
-              {renderInputs({ field, typeForm, inputs: _?.inputs })}
+              {renderInputs({ field, inputs: _?.inputs })}
             </div>
           ))}
           {renderSubmitButton(button)}

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

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import {
   FEEDBACK_METHOD,
   SERVICE_DIRECTIONS,
@@ -98,6 +99,7 @@ export interface FormState extends FormConsents {
   shareholderFlg?: boolean;
   legalEntityName?: string;
   bankEmployeeCode?: number;
+  partInBusiness?: number;
 }
 
 const initialFormState = {
@@ -135,11 +137,11 @@ const initialFormState = {
 
 export const getInitialFormState = (
   inputs: FieldDef[],
-  savedForm: string | null,
+  savedForm: FormState | null,
   typeForm = '',
 ): FormState => {
   if (savedForm) {
-    const formState = JSON.parse(savedForm) as FormState;
+    const formState = { ...savedForm };
     formState.birthday = new Date(formState?.birthday || 0);
 
     return formState;

package/mobile/src/components/ApplicationLeadForm/useApplicationLeadApi.ts

@@ -19,7 +19,7 @@ import { type FormState } from './getInitialFormState';
 type ApplicationLeadApiProps = {
   inputs: FieldDef[];
   programId: string;
-  saveForm: (value: string) => void;
+  saveForm: (value: FormState) => void;
 };
 
 export const useApplicationLeadApi = ({ inputs, programId, saveForm }: ApplicationLeadApiProps) => {
@@ -69,7 +69,7 @@ export const useApplicationLeadApi = ({ inputs, programId, saveForm }: Applicati
               }),
             );
             saveUserData(participantId, taskId, profileId);
-            saveForm(JSON.stringify(formData));
+            saveForm(formData);
           } catch {
             setResponseStatus('Fail');
           }

package/mobile/src/components/ApplicationStatus/ApplicationStatus.example.json

@@ -0,0 +1,6 @@
+{
+  "content": {
+    "version": "primary",
+    "padding": ""
+  }
+}

package/mobile/src/components/ApplicationStatus/ApplicationStatus.tsx

@@ -0,0 +1,108 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMobileMode } from '../../hooks/useMobileMode';
+import { type DescriptionProps, type LabelProps } from '../../model/HeadlineType';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Button } from '../../ui-kit/Button/Button';
+import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
+import { InfoCard } from '../../ui-kit/InfoCard/InfoCard';
+import { Text } from '../../ui-kit/Text/Text';
+import { TimerCircle } from '../../ui-kit/TimerCircle/TimerCircle';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
+import { type ApplicationStatusContent } from './ApplicationStatusContent';
+
+type ApplicationStatusProps = ApplicationStatusContent & UniBlockProps;
+
+export const ApplicationStatus = JSX<ApplicationStatusProps>(
+  ({
+    title,
+    description: dsc,
+    infoCard,
+    sectionInfoTitle,
+    sectionInfo,
+    sectionAdditionalTitle,
+    sectionInfoAdditional,
+    buttonText,
+    interval,
+    ...props
+  }) => (
+    <BlockWrapper {...props}>
+      <div className="flex flex-col md:flex-row items-center">
+        <Headline
+          headlineVersion="M"
+          title={title}
+          description={dsc}
+          align="text-left"
+          padding="p-xl"
+          className="w-full"
+        />
+        {interval ? <TimerCircle interval={interval} /> : null}
+      </div>
+      <SectionInfo title={sectionInfoTitle} items={sectionInfo} />
+      <SectionInfo title={sectionAdditionalTitle} items={sectionInfoAdditional} countColumns />
+      {infoCard?.__html ? (
+        <InfoCard
+          __html={infoCard?.__html}
+          icon={infoCard?.icon}
+          link={{
+            text: infoCard?.link?.text,
+          }}
+        />
+      ) : null}
+      {buttonText ? <Button className="w-full mt-lg">{buttonText}</Button> : null}
+    </BlockWrapper>
+  ),
+);
+
+const SectionInfo = ({
+  title,
+  items,
+  countColumns = false,
+}: {
+  title?: string;
+  items?: (LabelProps & DescriptionProps)[];
+  countColumns?: boolean;
+}) => {
+  const isMobile = useMobileMode();
+
+  if (!items) {
+    return null;
+  }
+
+  return (
+    <div>
+      <hr className="w-full h-px bg-main-gray border-0" />
+      <div className="p-xl">
+        {title ? (
+          <Text color="text-primary-text" size="text-h5">
+            <div className={style({ 'mb-m': Boolean(title) })}>{title}</div>
+          </Text>
+        ) : null}
+        {items ? (
+          <div
+            className={style(
+              'grid grid-cols-1 gap-m',
+              inputColumnStyles(countColumns || isMobile ? 1 : 2),
+            )}
+          >
+            {items.map((item, index) => (
+              <div key={index}>{renderItem(item)}</div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+const renderItem = ({ label, description }: LabelProps & DescriptionProps) => (
+  <div className="flex flex-col">
+    <Text color="text-secondary-text" size="text-l">
+      {label}
+    </Text>
+    <Text color="text-primary-text" size="text-xl">
+      {description}
+    </Text>
+  </div>
+);

package/mobile/src/components/ApplicationStatus/ApplicationStatus.ui.json

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

package/mobile/src/components/ApplicationStatus/ApplicationStatusContent.ts

@@ -0,0 +1,19 @@
+import { type DescriptionProps, type LabelProps } from '../../model/HeadlineType';
+import { type InfoCardProps } from '../../ui-kit/InfoCard/InfoCard';
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+
+/**
+ * @title Статус заявки
+ */
+export type ApplicationStatusContent = UniBlockContent & {
+  title?: string;
+  description?: string;
+  interval?: number;
+  sectionInfoTitle?: string;
+  sectionInfo?: (LabelProps & DescriptionProps)[];
+  sectionAdditionalTitle?: string;
+  sectionInfoAdditional?: (LabelProps & DescriptionProps)[];
+  buttonText?: string;
+  /** @hidden */
+  infoCard?: InfoCardProps;
+};

package/mobile/src/components/CreditForm/CreditForm.tsx

@@ -1,21 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { useCallback, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
-import { renderTitle } from '../../ui-kit/FormField/renderTitle';
-import { InfoCard } from '../../ui-kit/InfoCard/InfoCard';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { type SectionsProps } from '../ApplicationForm/ApplicationFormContent';
-import { type FormState } from '../ApplicationForm/getInitialFormState';
-import { renderInputs } from '../ApplicationForm/renderInputs';
 import { type FieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
-import { getInitialFormState } from '../ApplicationLeadForm/getInitialFormState';
 import { type CreditFormContent } from './CreditFormContent';
 import { CreditFormProgress } from './CreditFormProgress';
+import { CreditFormStep } from './CreditFormStep';
 import { stepsSectionsMap } from './creditFormStepsData';
-import { StepsNavigationButtons } from './StepsNavigationButtons';
 
 const STEPS_COUNT = 5;
 const STEPS_TITLES = [
@@ -26,51 +19,38 @@ const STEPS_TITLES = [
   'Отделение Банка',
 ];
 
-export interface StepProps {
-  typeForm: string;
-  sections: SectionsProps[];
-  field: FormFieldRegisterer<FormState>;
-}
-
-export interface CreditFormProps extends CreditFormContent, UniBlockProps {}
-
-export const CreditForm = JSX<CreditFormProps>(
-  ({ className, typeForm = '', sections = [], ...rest }) => {
-    const [step, setStep] = useState(1);
-    const inputs = (sections?.flatMap((_) => _?.inputs) || []) as FieldDef[];
-    const initialFormState = getInitialFormState(inputs, typeForm);
-    const handleSubmit = () => false;
-
-    const [, { field, onSubmit }] = useForm(initialFormState, { onSubmit: handleSubmit });
-
-    return (
-      <BlockWrapper className={style('bg-transparent', className)} defaultPadding="p-6xl" {...rest}>
-        <div className="container grid grid-cols-12">
-          <CreditFormProgress stepsTitles={STEPS_TITLES} step={step} totalSteps={STEPS_COUNT} />
-          <div className="py-lg px-5xl mt-2xs bg-white col-span-12">
-            <form onSubmit={onSubmit} className="space-y-m">
-              {renderStep({ sections: stepsSectionsMap[step], typeForm, field })}
-              <StepsNavigationButtons step={step} setStep={setStep} totalSteps={STEPS_COUNT} />
-            </form>
-          </div>
+interface CreditFormProps extends CreditFormContent, UniBlockProps {}
+
+export const CreditForm = JSX<CreditFormProps>(({ className, ...rest }) => {
+  const [step, setStep] = useState(1);
+  const sections = useMemo(() => stepsSectionsMap[step], [step]);
+  const inputs = (sections?.flatMap((_: SectionsProps) => _?.inputs) || []) as FieldDef[];
+
+  const handleNextStep = useCallback(() => {
+    setStep((_) => Math.min(_ + 1, STEPS_COUNT));
+  }, []);
+
+  const handlePrevStep = useCallback(() => {
+    //TODO search hook - 1,
+    setStep((_) => Math.max(_ - 1, 0));
+  }, []);
+
+  return (
+    <BlockWrapper className={style('bg-transparent', className)} defaultPadding="p-6xl" {...rest}>
+      <div className="container grid grid-cols-12">
+        <CreditFormProgress stepsTitles={STEPS_TITLES} step={step} totalSteps={STEPS_COUNT} />
+        <div className="py-lg px-5xl mt-2xs bg-white col-span-12">
+          <CreditFormStep
+            inputs={inputs}
+            key={String(step)}
+            totalSteps={STEPS_COUNT}
+            step={step}
+            sections={sections}
+            onNextStep={handleNextStep}
+            onPrevStep={handlePrevStep}
+          />
         </div>
-      </BlockWrapper>
-    );
-  },
-);
-
-const renderStep = ({ sections, field, typeForm }: StepProps) => {
-  return sections.map((_, i) => (
-    <div key={`section-${i}`} className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}>
-      {renderInfo(_?.inputs)}
-      {renderTitle(_?.title)}
-      {renderInputs({ field, typeForm, inputs: _?.inputs })}
-    </div>
-  ));
-};
-
-const renderInfo = (inputs: FieldDef[] = []) => {
-  const infoInputs = inputs.filter((_) => _.fieldType === 'info');
-
-  return infoInputs.length ? infoInputs.map(({ text }) => <InfoCard __html={text} />) : null;
-};
+      </div>
+    </BlockWrapper>
+  );
+});

package/mobile/src/components/CreditForm/CreditFormContent.ts

@@ -1,3 +1,4 @@
+import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { type TextProps, type TitleProps } from '../../model/HeadlineType';
 import { type Target } from '../../model/LinkProps';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
@@ -6,7 +7,11 @@ import {
   type SectionsProps,
   type SubmitButtonProps,
 } from '../ApplicationForm/ApplicationFormContent';
-import { type TypeFormFieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
+import {
+  type FieldDef,
+  type TypeFormFieldDef,
+} from '../ApplicationLeadForm/ApplicationLeadFormContent';
+import { type FormStateMap } from './getInitialFormState';
 
 /**
  * @title Форма заявки на потребительский кредит настраиваемая
@@ -32,3 +37,10 @@ export type CreditFormContent = UniBlockContent &
     sections?: SectionsProps[];
     endpoint?: EndpointType;
   };
+
+/** @hidden */
+export interface RenderInputsProps {
+  inputs?: FieldDef[];
+  typeForm?: TypeFormFieldDef | string;
+  field: FormFieldRegisterer<FormStateMap[keyof FormStateMap]>;
+}

package/mobile/src/components/CreditForm/CreditFormStep.tsx

@@ -0,0 +1,65 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
+import { renderTitle } from '../../ui-kit/FormField/renderTitle';
+import { InfoCard } from '../../ui-kit/InfoCard/InfoCard';
+import { style } from '../../utils/style';
+import { type SectionsProps } from '../ApplicationForm/ApplicationFormContent';
+import { type FieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
+import { getInitialFormState, type FormStateMap } from './getInitialFormState';
+import { renderInputs } from './renderInputs';
+import { StepsNavigationButtons } from './StepsNavigationButtons';
+import { useCreditFormApi } from './useCreditFormApi';
+
+export interface StepProps {
+  sections: SectionsProps[];
+  field: FormFieldRegisterer<FormStateMap[keyof FormStateMap]>;
+}
+
+export interface CreditFormStepProps {
+  totalSteps: number;
+  step: number;
+  sections: SectionsProps[];
+  inputs: FieldDef[];
+  onNextStep: () => void;
+  onPrevStep: () => void;
+}
+
+export const CreditFormStep = JSX<CreditFormStepProps>(
+  ({ totalSteps, step, sections, onPrevStep, onNextStep, inputs }) => {
+    const [localStorageData, saveStep] = useLocalStorage<Record<string, any>>('leadForm');
+    const initialState = getInitialFormState(step as keyof FormStateMap, localStorageData);
+
+    const { handleSubmit } = useCreditFormApi({
+      inputs,
+      onNextStep: onNextStep,
+      saveStep,
+    });
+
+    const [, { field, onSubmit }] = useForm(initialState, { onSubmit: handleSubmit });
+
+    return (
+      <form onSubmit={onSubmit} className="space-y-m">
+        {renderStep({ sections, field })}
+        <StepsNavigationButtons step={step} totalSteps={totalSteps} onPrevStep={onPrevStep} />
+      </form>
+    );
+  },
+);
+
+const renderStep = ({ sections, field }: StepProps) => {
+  return sections.map((_, i) => (
+    <div key={`section-${i}`} className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}>
+      {renderInfo(_?.inputs)}
+      {renderTitle(_?.title)}
+      {renderInputs({ field, inputs: _?.inputs })}
+    </div>
+  ));
+};
+
+const renderInfo = (inputs: FieldDef[] = []) => {
+  const infoInputs = inputs.filter((_) => _.fieldType === 'info');
+
+  return infoInputs.length ? infoInputs.map(({ text }) => <InfoCard __html={text} />) : null;
+};