@redneckz/wildless-cms-uni-blocks 0.14.697 → 0.14.698

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

@@ -0,0 +1,30 @@
+import '../../setup-fixture';
+import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
+import { CreditForm } from './CreditForm';
+
+const MOCK_TOKEN = 'mock-key';
+const MOCK_TASK_ID = '111111';
+
+const refreshToken = globalThis.sessionStorage?.getItem('refreshToken');
+const accessToken = globalThis.sessionStorage?.getItem('accessToken');
+const taskId = globalThis.localStorage.getItem('taskId');
+
+!refreshToken && globalThis.sessionStorage?.setItem('refreshToken', MOCK_TOKEN);
+!accessToken && globalThis.sessionStorage?.setItem('accessToken', MOCK_TOKEN);
+!taskId && globalThis.localStorage.setItem('taskId', MOCK_TASK_ID);
+
+export default {
+  default: (
+    <div>
+      <CreditForm
+        className="col-span-12"
+        programsSource={{
+          $ref: '/wcms-resources/products-credit-calc-data.json',
+        }}
+      />
+      <PopupManager />
+      <DialogManager />
+    </div>
+  ),
+};

package/src/components/CreditForm/CreditForm.tsx

@@ -4,7 +4,6 @@ import { type JSONRefObject } from '../../data/JSONRefObject';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
-import { style } from '../../utils/style';
 import { type CreditFormContent } from './CreditFormContent';
 import { CreditFormProgress } from './CreditFormProgress';
 import { CreditFormStep } from './CreditFormStep';
@@ -54,7 +53,7 @@ export const CreditForm = UniBlock<CreditFormProps>(({ className, programsSource
   const [isFormFinished, setIsFormFinished] = useState(false);
 
   return (
-    <BlockWrapper className={style('bg-transparent', className)} defaultPadding="p-0" {...rest}>
+    <BlockWrapper className={className} {...rest}>
       <div ref={formContainerRef} className="container grid grid-cols-12">
         {isStartStep || isFormFinished ? null : (
           <CreditFormProgress stepsTitles={STEP_TITLES} step={step} totalSteps={STEPS} />

package/src/hooks/useLocalStorage.ts

@@ -1,11 +1,12 @@
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { safeJsonParse } from '../utils/safeJsonParse';
 
 export function useLocalStorage<T>(
   key: string,
 ): [T | null, (value: T | null | ((oldValue: T | null) => T | null)) => void] {
   const initialValue = globalThis.localStorage?.getItem(key);
   const [storedValue, setStoredValue] = useState<T | null>(
-    initialValue ? (JSON.parse(initialValue) as T | null) : null,
+    initialValue ? safeJsonParse(initialValue) : null,
   );
 
   const setValue = useCallback(

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

@@ -51,7 +51,7 @@ export const ConsentBkiDialog = JSX<ConsentBkiDialogProps>(
 
     return (
       <Dialog
-        className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg py-0 px-5xl"
+        className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg px-5xl"
         onClose={onClose}
       >
         <div className="flex flex-col gap-xl items-center">

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

@@ -37,7 +37,7 @@ export const EsiaLoginDialog = JSX<EsiaLoginDialogProps>(({ onClose }) => {
   return (
     <Dialog className="my-6xl max-w-lg w-full min-h-fit mx-auto rounded-lg" onClose={handleClose}>
       <div className="flex flex-col gap-lg items-center rounded-md">
-        <div className="flex items-center justify-around w-full">
+        <div className="flex items-center justify-around w-full px-m">
           <ul className="list-disc">
             <li>Вероятность одобрения выше</li>
             <li>Без справок о доходах и трудоустройстве</li>
@@ -45,7 +45,7 @@ export const EsiaLoginDialog = JSX<EsiaLoginDialogProps>(({ onClose }) => {
           </ul>
           <Img image={{ icon: 'GosUslugiIcon', iconVersion: 'normal' }} height="70" />
         </div>
-        <div className="flex items-center justify-between w-full m-0">
+        <div className="flex flex-wrap gap-lg w-full">
           <Button type="button" onClick={handleAuth}>
             Заполнить через Госуслуги
           </Button>

package/src/ui-kit/FormField/Fields/CreditCalcField.tsx

@@ -15,6 +15,7 @@ export const CreditCalcField = JSX<CustomFieldProps>(({ field, params }) => {
   return (
     <CalculatorCredit
       {...params?.calcData}
+      padding="p-0"
       defaultParams={defaultValueAdapter(
         field(FIELD_NAME).value as CreditCalculatorUserInputParams,
       )}

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { style } from '../../utils/style';
+import { getValidStyle } from './getValidStyle';
 import { type InputProps } from './InputProps';
-import { inputValidStyle } from './inputValidStyle';
 import { renderLabel } from './renderLabel';
 
 export const Input = JSX<InputProps>(
@@ -86,6 +86,4 @@ export const Input = JSX<InputProps>(
   },
 );
 
-const getValidStyle = (valid: boolean) => (valid ? inputValidStyle : 'border-error');
-
 const defaultStyle = 'w-full border rounded-md text-primary-text outline-none p-m';

package/src/ui-kit/Input/getValidStyle.tsx

@@ -0,0 +1,3 @@
+import { inputValidStyle } from './inputValidStyle';
+
+export const getValidStyle = (valid: boolean) => (valid ? inputValidStyle : 'border-error');

package/src/ui-kit/VerifyPhoneDialog/InputCode.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { getValidStyle } from '../Input/getValidStyle';
 import { type PreventableEvent } from '../PreventableEvent';
 
 type InputCodeProps = {
@@ -82,7 +83,7 @@ export const InputCode = JSX<InputCodeProps>(({ values, setValues, hasError, err
 const getInputStyle = (index: number, values: string[], hasError = false) => {
   const isInputEmpty = !values[index];
 
-  return `w-20 h-24 text-5xl text-center p-lg m-2 border ${
-    hasError && isInputEmpty ? 'border-error' : 'border-gray'
-  } rounded-md caret-transparent outline-none`;
+  return `w-16 sm:w-20 h-24 text-5xl text-center p-md m-2 border ${getValidStyle(
+    !hasError || !isInputEmpty,
+  )} rounded-md caret-transparent outline-none`;
 };

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

@@ -75,7 +75,7 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
 
     return (
       <Dialog
-        className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-xl px-5xl py-0"
+        className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-xl p-m"
         onClose={onClose}
       >
         <div className="flex flex-col gap-xl items-center rounded-md">

package/src/utils/safeJsonParse.ts

@@ -0,0 +1,7 @@
+export const safeJsonParse = <T>(data?: string): T | null => {
+  try {
+    return JSON.parse(String(data));
+  } catch (ex) {
+    return null;
+  }
+};