@redneckz/wildless-cms-uni-blocks 0.14.1001 → 0.14.1002

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

@@ -70,12 +70,14 @@ export const DraftDialog = JSX<DraftDialogProps>(function ({
             icon="BankColorIcon"
             description={createdDate ? `Черновик от ${formatDate(new Date(createdDate))}` : ''}
             onClick={handleGoToDraft}
+            name="go-to-draft-button"
           />
           <DraftActionButton
             title={isFromLead ? 'Продолжить заполнение текущей заявки' : 'Создать новую заявку'}
             icon="NewLoanIcon"
             description={productData.description}
             onClick={isFromLead ? onClose : handleGoToNewTask}
+            name="go-to-current-task-button"
           />
         </div>
       </div>

package/mobile/src/retail/components/Fields/ConsentField.tsx

@@ -13,6 +13,7 @@ export const ConsentField = JSX<CustomFieldProps>(({ field, input }) => {
       text={consents?.[input.name]?.text}
       docId={consents?.[input.name]?.docId}
       {...field(input.name)}
+      {...input}
     />
   ) : null;
 });

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

@@ -72,6 +72,7 @@ export const InputCode = JSX<InputCodeProps>(({ values, setValues, hasError, err
             onFocus={(event) => event.target.select()}
             onKeyDown={handleKeyDown(index)}
             className={getInputStyle(index, values, hasError)}
+            data-test-id={`sms-code-${index}`}
           />
         ))}
       </div>

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

@@ -8,7 +8,7 @@ import { Text } from '../../../ui-kit/Text/Text';
 interface SubmitButtonProps extends DisabledProps, TextProps, OnClickProps {}
 
 export const SubmitButton = JSX<SubmitButtonProps>(({ disabled = false, onClick, text }) => (
-  <Button type="button" onClick={onClick} disabled={disabled}>
+  <Button type="button" onClick={onClick} disabled={disabled} testId="sms-code-submit-button">
     <Text font="font-normal">{text}</Text>
   </Button>
 ));

package/mobile/src/ui-kit/Button/Button.tsx

@@ -48,6 +48,7 @@ export interface ButtonProps
   data?: AspectsDef[];
   dataTheme?: ColorPalette;
   wcmsIgnore?: boolean;
+  testId?: string;
 }
 
 export const Button = JSX<ButtonProps>(
@@ -65,6 +66,7 @@ export const Button = JSX<ButtonProps>(
     children,
     wcmsIgnore,
     onClick = noop,
+    testId,
   }) => {
     const handleClick = useCallback(role !== 'tab' ? handlerDecorator(onClick) : onClick, [
       role,
@@ -101,6 +103,7 @@ export const Button = JSX<ButtonProps>(
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...aspectsAttrs}
         onClick={handleClick}
+        data-test-id={testId}
       >
         {children}
       </button>

package/mobile/src/ui-kit/Checkbox/Checkbox.tsx

@@ -17,7 +17,7 @@ const CHECK_PATHS = [
 ];
 
 export const Checkbox = JSX<CheckboxProps>(
-  ({ className, value, text, disabled, isRadio, onChange }) => {
+  ({ className, value, text, disabled, isRadio, onChange, name }) => {
     const handleChange = useCallback(
       (e: PreventableEvent) => {
         if (disabled) {
@@ -47,6 +47,7 @@ export const Checkbox = JSX<CheckboxProps>(
       <div className={className}>
         <label
           className={style('flex items-center relative group/box', getCursorStyle(disabled))}
+          data-test-id={name}
           onClick={handleChange}
         >
           <div

package/mobile/src/ui-kit/Checkbox/CheckboxProps.ts

@@ -2,4 +2,5 @@ import { type CommonInputProps } from '../../model/CommonInputProps';
 
 export interface CheckboxProps extends CommonInputProps<boolean> {
   isRadio?: boolean;
+  name?: string;
 }

package/mobile/src/ui-kit/DatePicker/DatePicker.tsx

@@ -35,6 +35,7 @@ interface DatePickerProps extends ControlProps<Date>, ComponentType, LabelProps,
   maxDate?: Date;
   valid?: boolean;
   weekends?: number[];
+  name?: string;
 }
 
 export const DatePicker = JSX<DatePickerProps>(
@@ -49,6 +50,7 @@ export const DatePicker = JSX<DatePickerProps>(
     disabled,
     weekends,
     onChange,
+    name,
   }) => {
     const [isCalendarVisible, { setValue, setFalse: hideCalendar }] = useBool(false);
     const [selectedMonth, setSelectedMonth] = useState(value?.getMonth() || new Date().getMonth());
@@ -98,6 +100,7 @@ export const DatePicker = JSX<DatePickerProps>(
             disabled,
             setSelectedMonth,
             setSelectedYear,
+            name,
           })}
           {isCalendarVisible && !disabled ? (
             <div

package/mobile/src/ui-kit/DatePicker/DatePickerInput.tsx

@@ -22,6 +22,7 @@ interface DatePickerInputProps extends ComponentType, DisabledProps, OnClickProp
   setSelectedYear: (selectedYear: number) => void;
   value?: string;
   onChange?: (value: Date) => void;
+  name?: string;
 }
 
 interface UpdateSelectedDateProps {
@@ -32,7 +33,7 @@ interface UpdateSelectedDateProps {
 }
 
 export const DatePickerInput = JSX<DatePickerInputProps>(
-  ({ setSelectedMonth, setSelectedYear, className, value, disabled, onChange, onClick }) => {
+  ({ setSelectedMonth, setSelectedYear, className, value, disabled, onChange, onClick, name }) => {
     const ref = useRef<HTMLInputElement | null>(null);
     const [inputValue, setInputValue] = useState<string>(value || '');
 
@@ -76,6 +77,7 @@ export const DatePickerInput = JSX<DatePickerInputProps>(
           onChange={handleChange}
           onBlur={onBlur}
           disabled={disabled}
+          data-test-id={name}
         />
         {disabled ? null : <Icon className="mr-s" {...ICON_PROPS} />}
       </div>

package/mobile/src/ui-kit/DatePicker/renderDatePickerForm.tsx

@@ -16,12 +16,14 @@ export const renderDatePickerForm = ({
   setSelectedMonth,
   setSelectedYear,
   disabled = false,
+  name,
 }: DisabledProps &
   ControlProps<Date> & {
     handleChangeVisibleCalendar: () => void;
     valid: boolean;
     setSelectedMonth: (selectedMonth: number) => void;
     setSelectedYear: (selectedYear: number) => void;
+    name?: string;
   }) => (
   <DatePickerInput
     onChange={onChange}
@@ -31,5 +33,6 @@ export const renderDatePickerForm = ({
     setSelectedMonth={setSelectedMonth}
     setSelectedYear={setSelectedYear}
     className={style(formStyle, valid ? 'border-gray' : 'border-error')}
+    name={name}
   ></DatePickerInput>
 );

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

@@ -81,6 +81,7 @@ export const Input = JSX<InputProps>(
               onChange={handleChange}
               onFocus={onFocus}
               onBlur={onBlur}
+              data-test-id={name}
             />
           )}
         </label>

package/mobile/src/ui-kit/RadioButtonGroup/RadioButtonGroup.tsx

@@ -53,6 +53,7 @@ export const RadioButtonGroup = JSX<RadioButtonGroupProps>(
             value={value === id}
             onChange={() => onChangeCheckedItem?.(id)}
             disabled={disabled}
+            name={id}
           />
         ))}
       </div>

package/mobile/src/ui-kit/VerifyPhoneDialogLayout/VerfiyPhoneDialogLayout.tsx

@@ -74,7 +74,7 @@ const renderText = (timeNextReq: number, handleSendCode: () => void) =>
       <Timer seconds={timeNextReq} />
     </div>
   ) : (
-    <Button embedded onClick={handleSendCode}>
+    <Button embedded onClick={handleSendCode} testId="send-new-code-button">
       <ButtonTitle>Получить новый код</ButtonTitle>
     </Button>
   );

package/package.json

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

package/src/components/ApplicationLeadForm/GroupedConsents.tsx

@@ -58,6 +58,7 @@ export const GroupedConsents = JSX<GroupedConsentsProps>(({ inputs = [], field,
               text={CONSENT_ALL_DOCS_TEXT}
               value={isChecked}
               onChange={handleGeneralToggle}
+              name="all-consents"
             />
             {renderErrorText(hasValidationErrors ? CONSENT_REQUIRED : '')}
           </div>

package/src/components/ApplicationLeadForm/renderSubmitButton.tsx

@@ -2,7 +2,7 @@ import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
 import { type SubmitButtonProps } from './ApplicationLeadFormContent';
 
 export const renderSubmitButton = (button?: SubmitButtonProps, isSending = false) => (
-  <SubmitButton className="w-full @xl:w-auto" isLoading={isSending}>
+  <SubmitButton className="w-full @xl:w-auto" isLoading={isSending} testId="LeadSubmitButton">
     {button?.text ? button.text : 'Отправить заявку'}
   </SubmitButton>
 );

package/src/components/CreditForm/StepsNavigationButtons.tsx

@@ -15,10 +15,15 @@ export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
 
     return (
       <div className={'flex justify-between gap-m'}>
-        <Button version="secondary" disabled={isFirstStep} onClick={onPrevStep}>
+        <Button
+          version="secondary"
+          disabled={isFirstStep}
+          onClick={onPrevStep}
+          testId="back-button"
+        >
           Назад
         </Button>
-        <SubmitButton isLoading={isSending}>
+        <SubmitButton isLoading={isSending} testId="next-button">
           {isFinalStep ? 'Отправить заявку' : 'Далее'}
         </SubmitButton>
       </div>

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

@@ -66,7 +66,12 @@ export const ConsentBkiDialog = JSX<ConsentBkiDialogProps>(
             value={confirmStatus}
             onChange={handleConfirmChange}
           />
-          <Button disabled={!confirmStatus} type="button" onClick={handleSubmit}>
+          <Button
+            disabled={!confirmStatus}
+            type="button"
+            onClick={handleSubmit}
+            testId="bki-button"
+          >
             Далее
           </Button>
         </div>

package/src/retail/components/DaDataInputControl/DaDataInputControl.tsx

@@ -55,6 +55,7 @@ export const DaDataInputControl = JSX<DaDataInputProps>(
         isOpen={isOpen}
         onOpen={open}
         onClose={close}
+        name={name}
         {...rest}
       />
     );

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

@@ -10,14 +10,16 @@ export type DraftActionButtonProps = TitleProps &
   DescriptionProps &
   OnClickProps & {
     icon: IconName;
+    name?: string;
   };
 
 export const DraftActionButton = JSX<DraftActionButtonProps>(
-  ({ title, icon, description, onClick = noop }) => (
+  ({ title, icon, description, name, onClick = noop }) => (
     <button
       className="flex gap-lg items-center border border-gray/30 rounded-xl cursor-pointer p-4 hover:border-green"
       type="button"
       onClick={onClick}
+      data-test-id={name}
     >
       <Img image={{ icon, iconVersion: 'normal' }} width="78" height="78" />
       <div className="flex flex-col items-start gap-xs md:w-72 md:mr-lg">

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

@@ -70,12 +70,14 @@ export const DraftDialog = JSX<DraftDialogProps>(function ({
             icon="BankColorIcon"
             description={createdDate ? `Черновик от ${formatDate(new Date(createdDate))}` : ''}
             onClick={handleGoToDraft}
+            name="go-to-draft-button"
           />
           <DraftActionButton
             title={isFromLead ? 'Продолжить заполнение текущей заявки' : 'Создать новую заявку'}
             icon="NewLoanIcon"
             description={productData.description}
             onClick={isFromLead ? onClose : handleGoToNewTask}
+            name="go-to-current-task-button"
           />
         </div>
       </div>

package/src/retail/components/Fields/ConsentField.tsx

@@ -13,6 +13,7 @@ export const ConsentField = JSX<CustomFieldProps>(({ field, input }) => {
       text={consents?.[input.name]?.text}
       docId={consents?.[input.name]?.docId}
       {...field(input.name)}
+      {...input}
     />
   ) : null;
 });

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

@@ -72,6 +72,7 @@ export const InputCode = JSX<InputCodeProps>(({ values, setValues, hasError, err
             onFocus={(event) => event.target.select()}
             onKeyDown={handleKeyDown(index)}
             className={getInputStyle(index, values, hasError)}
+            data-test-id={`sms-code-${index}`}
           />
         ))}
       </div>

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

@@ -8,7 +8,7 @@ import { Text } from '../../../ui-kit/Text/Text';
 interface SubmitButtonProps extends DisabledProps, TextProps, OnClickProps {}
 
 export const SubmitButton = JSX<SubmitButtonProps>(({ disabled = false, onClick, text }) => (
-  <Button type="button" onClick={onClick} disabled={disabled}>
+  <Button type="button" onClick={onClick} disabled={disabled} testId="sms-code-submit-button">
     <Text font="font-normal">{text}</Text>
   </Button>
 ));

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

@@ -48,6 +48,7 @@ export interface ButtonProps
   data?: AspectsDef[];
   dataTheme?: ColorPalette;
   wcmsIgnore?: boolean;
+  testId?: string;
 }
 
 export const Button = JSX<ButtonProps>(
@@ -65,6 +66,7 @@ export const Button = JSX<ButtonProps>(
     children,
     wcmsIgnore,
     onClick = noop,
+    testId,
   }) => {
     const handleClick = useCallback(role !== 'tab' ? handlerDecorator(onClick) : onClick, [
       role,
@@ -101,6 +103,7 @@ export const Button = JSX<ButtonProps>(
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...aspectsAttrs}
         onClick={handleClick}
+        data-test-id={testId}
       >
         {children}
       </button>

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

@@ -17,7 +17,7 @@ const CHECK_PATHS = [
 ];
 
 export const Checkbox = JSX<CheckboxProps>(
-  ({ className, value, text, disabled, isRadio, onChange }) => {
+  ({ className, value, text, disabled, isRadio, onChange, name }) => {
     const handleChange = useCallback(
       (e: PreventableEvent) => {
         if (disabled) {
@@ -47,6 +47,7 @@ export const Checkbox = JSX<CheckboxProps>(
       <div className={className}>
         <label
           className={style('flex items-center relative group/box', getCursorStyle(disabled))}
+          data-test-id={name}
           onClick={handleChange}
         >
           <div

package/src/ui-kit/Checkbox/CheckboxProps.ts

@@ -2,4 +2,5 @@ import { type CommonInputProps } from '../../model/CommonInputProps';
 
 export interface CheckboxProps extends CommonInputProps<boolean> {
   isRadio?: boolean;
+  name?: string;
 }

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

@@ -35,6 +35,7 @@ interface DatePickerProps extends ControlProps<Date>, ComponentType, LabelProps,
   maxDate?: Date;
   valid?: boolean;
   weekends?: number[];
+  name?: string;
 }
 
 export const DatePicker = JSX<DatePickerProps>(
@@ -49,6 +50,7 @@ export const DatePicker = JSX<DatePickerProps>(
     disabled,
     weekends,
     onChange,
+    name,
   }) => {
     const [isCalendarVisible, { setValue, setFalse: hideCalendar }] = useBool(false);
     const [selectedMonth, setSelectedMonth] = useState(value?.getMonth() || new Date().getMonth());
@@ -98,6 +100,7 @@ export const DatePicker = JSX<DatePickerProps>(
             disabled,
             setSelectedMonth,
             setSelectedYear,
+            name,
           })}
           {isCalendarVisible && !disabled ? (
             <div

package/src/ui-kit/DatePicker/DatePickerInput.tsx

@@ -22,6 +22,7 @@ interface DatePickerInputProps extends ComponentType, DisabledProps, OnClickProp
   setSelectedYear: (selectedYear: number) => void;
   value?: string;
   onChange?: (value: Date) => void;
+  name?: string;
 }
 
 interface UpdateSelectedDateProps {
@@ -32,7 +33,7 @@ interface UpdateSelectedDateProps {
 }
 
 export const DatePickerInput = JSX<DatePickerInputProps>(
-  ({ setSelectedMonth, setSelectedYear, className, value, disabled, onChange, onClick }) => {
+  ({ setSelectedMonth, setSelectedYear, className, value, disabled, onChange, onClick, name }) => {
     const ref = useRef<HTMLInputElement | null>(null);
     const [inputValue, setInputValue] = useState<string>(value || '');
 
@@ -76,6 +77,7 @@ export const DatePickerInput = JSX<DatePickerInputProps>(
           onChange={handleChange}
           onBlur={onBlur}
           disabled={disabled}
+          data-test-id={name}
         />
         {disabled ? null : <Icon className="mr-s" {...ICON_PROPS} />}
       </div>

package/src/ui-kit/DatePicker/renderDatePickerForm.tsx

@@ -16,12 +16,14 @@ export const renderDatePickerForm = ({
   setSelectedMonth,
   setSelectedYear,
   disabled = false,
+  name,
 }: DisabledProps &
   ControlProps<Date> & {
     handleChangeVisibleCalendar: () => void;
     valid: boolean;
     setSelectedMonth: (selectedMonth: number) => void;
     setSelectedYear: (selectedYear: number) => void;
+    name?: string;
   }) => (
   <DatePickerInput
     onChange={onChange}
@@ -31,5 +33,6 @@ export const renderDatePickerForm = ({
     setSelectedMonth={setSelectedMonth}
     setSelectedYear={setSelectedYear}
     className={style(formStyle, valid ? 'border-gray' : 'border-error')}
+    name={name}
   ></DatePickerInput>
 );

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

@@ -81,6 +81,7 @@ export const Input = JSX<InputProps>(
               onChange={handleChange}
               onFocus={onFocus}
               onBlur={onBlur}
+              data-test-id={name}
             />
           )}
         </label>

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

@@ -53,6 +53,7 @@ export const RadioButtonGroup = JSX<RadioButtonGroupProps>(
             value={value === id}
             onChange={() => onChangeCheckedItem?.(id)}
             disabled={disabled}
+            name={id}
           />
         ))}
       </div>

package/src/ui-kit/VerifyPhoneDialogLayout/VerfiyPhoneDialogLayout.tsx

@@ -74,7 +74,7 @@ const renderText = (timeNextReq: number, handleSendCode: () => void) =>
       <Timer seconds={timeNextReq} />
     </div>
   ) : (
-    <Button embedded onClick={handleSendCode}>
+    <Button embedded onClick={handleSendCode} testId="send-new-code-button">
       <ButtonTitle>Получить новый код</ButtonTitle>
     </Button>
   );