@redneckz/wildless-cms-uni-blocks 0.14.592 → 0.14.594

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

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { RadioButtonGroup, type RadioButtonItem } from '../../RadioButtonGroup/RadioButtonGroup';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export const SEX_TYPES: RadioButtonItem[] = [
+  { id: 'male', text: 'Мужской' },
+  { id: 'female', text: 'Женский' },
+];
+
+export const SexField = JSX<CustomFieldProps>(({ field }) => {
+  const { value, onChange } = field('sex');
+
+  return (
+    <RadioButtonGroup
+      title="Пол"
+      orientation="horizontal"
+      items={SEX_TYPES}
+      checkedItem={value}
+      onChange={(_) => onChange && onChange(_)}
+    />
+  );
+});

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

@@ -1,13 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
-import { Radio } from '../../Radio/Radio';
+import { RadioButtonGroup, type RadioButtonItem } from '../../RadioButtonGroup/RadioButtonGroup';
 import { type CustomFieldProps } from '../CustomFieldProps';
 
-export const VED_TYPES: string[] = [
-  'currencyControl',
-  'documentOperations',
-  'conversionTransactions',
-  'otherIssues',
+export const VED_TYPES: RadioButtonItem[] = [
+  { id: 'currencyControl', text: 'Валютный контроль' },
+  { id: 'documentOperations', text: 'Документарные операции' },
+  { id: 'conversionTransactions', text: 'Конверсионные операции' },
+  { id: 'otherIssues', text: 'Иные вопросы ВЭД' },
 ];
 
 export const VedField = JSX<CustomFieldProps>(({ field }) => {
@@ -21,33 +21,12 @@ export const VedField = JSX<CustomFieldProps>(({ field }) => {
 
   return (
     <div className="py-m gap-m grid @xl:flex @xl:items-center">
-      <Radio
-        name="vedTypes"
-        text="Валютный контроль"
-        value="currencyControl"
-        checked={value === 'currencyControl'}
-        onChange={onChange}
-      />
-      <Radio
-        name="vedTypes"
-        text="Документарные операции"
-        value="documentOperations"
-        checked={value === 'documentOperations'}
-        onChange={onChange}
-      />
-      <Radio
-        name="vedTypes"
-        text="Конверсионные операции"
-        value="conversionTransactions"
-        checked={value === 'conversionTransactions'}
-        onChange={onChange}
-      />
-      <Radio
-        name="vedTypes"
-        text="Иные вопросы ВЭД"
-        value="otherIssues"
-        checked={value === 'otherIssues'}
-        onChange={onChange}
+      <RadioButtonGroup
+        className="whitespace-normal"
+        orientation="horizontal"
+        items={VED_TYPES}
+        checkedItem={value}
+        onChange={(_) => onChange && onChange(_)}
       />
     </div>
   );

package/src/ui-kit/FormField/NameFieldDef.ts

@@ -0,0 +1,76 @@
+export type NameFieldDef =
+  | 'surname'
+  | 'name'
+  | 'middleName'
+  | 'education'
+  | 'housing'
+  | 'employment'
+  | 'organization'
+  | 'amountWorkers'
+  | 'employerActivities'
+  | 'employerOrganization'
+  | 'positionOrganization'
+  | 'dulSerie'
+  | 'dulNumber'
+  | 'dulIssueDateField'
+  | 'dulSubdivisionCode'
+  | 'dulIssuedBy'
+  | 'email'
+  | 'phone'
+  | 'fullName'
+  | 'inn'
+  | 'comment'
+  | 'region'
+  | 'addressBranch'
+  | 'typeForm'
+  | 'registrationDate'
+  | 'birthday'
+  | 'birthPlace'
+  | 'sex'
+  | 'isClient'
+  | 'consentToReceiveMaterials'
+  | 'acquiringType'
+  | 'onlineCheckout'
+  | 'posTerminal'
+  | 'serviceDirection'
+  | 'serviceType'
+  | 'feedbackMethod'
+  | 'bankEmpolee'
+  | 'applicationDate'
+  | 'secondaryPhone'
+  | 'vedTypes'
+  | 'term'
+  | 'amount'
+  | 'annualRevenue'
+  | 'collectionCount'
+  | 'desiredMeetingDate'
+  | 'product'
+  | 'localities'
+  | 'partnerComments'
+  | 'consentDataProcessing'
+  | 'consentInformFlg'
+  | 'consentCollectionFlg'
+  | 'consentAssignmentClaimsFlg'
+  | 'consentPhotoFlg'
+  | 'consentPfrFlg'
+  | 'consentProviderFlg'
+  | 'processPersonalDataLeadFlg'
+  | 'legalForm'
+  | 'organizationName'
+  | 'generalSeniority'
+  | 'lastJobExperience'
+  | 'experience5Years'
+  | 'jobsNumber'
+  | 'beginDate'
+  | 'fullAddress'
+  | 'familyStatus'
+  | 'children'
+  | 'familyMembers'
+  | 'dependents'
+  | 'totalIncome'
+  | 'expenses'
+  | 'snils'
+  | 'conscription'
+  | 'armyIdFlg'
+  | 'participantAddress'
+  | 'participantDateRegistration';

package/src/ui-kit/FormField/getField.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines */
 import { type FieldDef } from '../../components/ApplicationForm/ApplicationFormContent';
 import { getRegionUrl } from '../../components/ApplicationForm/getRegionUrl';
 import { type FormFieldRegisterer } from '../../hooks/useForm';
@@ -13,6 +12,7 @@ import { ArmyIdFlgField } from './Fields/ArmyIdFlgField';
 import { BankEmpoleeField } from './Fields/BankEmpoleeField';
 import { BeginDateField } from './Fields/BeginDateField';
 import { BirthdayField } from './Fields/BirthdayField';
+import { BirthPlaceField } from './Fields/BirthPlaceField';
 import { ChildrenField } from './Fields/ChildrenField';
 import { CollectionCountField } from './Fields/CollectionCountField';
 import { CommentField } from './Fields/CommentField';
@@ -55,6 +55,8 @@ import { NameField } from './Fields/NameField';
 import { OnlineCheckoutField } from './Fields/OnlineCheckoutField';
 import { OrganizationField } from './Fields/OrganizationField';
 import { OrganizationNameField } from './Fields/OrganizationNameField';
+import { ParticipantAddressField } from './Fields/ParticipantAddressField';
+import { ParticipantDateRegistrationField } from './Fields/ParticipantDateRegistrationField';
 import { PartnerCommentsField } from './Fields/PartnerCommentsField';
 import { PhoneField } from './Fields/PhoneField';
 import { PositionOrganizationField } from './Fields/PositionOrganizationField';
@@ -65,6 +67,7 @@ import { RegionField } from './Fields/RegionField';
 import { RegionPremiumField } from './Fields/RegionPremiumField';
 import { SecondaryPhoneField } from './Fields/SecondaryPhoneField';
 import { ServiceDirectionField } from './Fields/ServiceDirectionField';
+import { SexField } from './Fields/SexField';
 import { SnilsField } from './Fields/SnilsField';
 import { SurnameField } from './Fields/SurnameField';
 import { TermField } from './Fields/TermField';
@@ -100,7 +103,9 @@ export const getField =
       fullAddress: <FullAddressField field={field} input={input} />,
       comment: <CommentField field={field} input={input} />,
       addressBranch: <AddressBranchField field={field} input={input} isPremium={isPremium} />,
+      sex: <SexField field={field} input={input} />,
       birthday: <BirthdayField field={field} input={input} />,
+      birthPlace: <BirthPlaceField field={field} input={input} />,
       desiredMeetingDate: <DesiredMeetingDateField field={field} input={input} />,
       product: <ProductField field={field} source={PRODUCT_REF} />,
       localities: <LocalitiesField field={field} input={input} />,
@@ -147,6 +152,7 @@ export const getField =
       positionOrganization: <PositionOrganizationField field={field} input={input} />,
       familyStatus: <FamilyStatusField field={field} input={input} />,
       children: <ChildrenField field={field} input={input} />,
+      // eslint-disable-next-line max-lines
       familyMembers: <FamilyMembersField field={field} input={input} />,
       dependents: <DependentsField field={field} input={input} />,
       totalIncome: <TotalIncomeField field={field} input={input} />,
@@ -159,6 +165,8 @@ export const getField =
       dulIssueDateField: <DulIssueDateField field={field} input={input} />,
       dulSubdivisionCode: <DulSubdivisionCode field={field} input={input} />,
       dulIssuedBy: <DulIssuedBy field={field} input={input} />,
+      participantAddress: <ParticipantAddressField field={field} input={input} />,
+      participantDateRegistration: <ParticipantDateRegistrationField field={field} input={input} />,
     };
 
     return isRenderField({ input, field }) ? (

package/src/ui-kit/FormField/getObjectValidator.tsx

@@ -25,6 +25,7 @@ export const validatorObj: Record<string, Validator> = {
   phone: phoneValidator('Укажите номер телефона'),
   secondaryPhone: phoneValidator('Укажите номер телефона'),
   birthday: defaultValidator('Укажите дату рождения'),
+  birthPlace: defaultValidator('Укажите место рождения'),
   education: defaultValidator('Выберите ваше образование'),
   housing: defaultValidator('Выберите тип жилья'),
   employment: defaultValidator('Выберите информацию о трудоустройстве'),
@@ -78,6 +79,9 @@ export const validatorObj: Record<string, Validator> = {
   snils: snilsValidator('Некорректный номер СНИЛС'),
   conscription: defaultValidator(),
   armyIdFlg: agreementValidator,
+  sex: defaultValidator('Укажите свой пол'),
+  participantAddress: defaultValidator('Необходимо выбрать адрес'),
+  participantDateRegistration: defaultValidator('Укажите дату регистрации'),
 };
 
 export const getObjectValidator = (inputs: FieldDef[]): Record<string, Validator> => {

package/src/ui-kit/InfoCard/InfoCard.fixture.tsx

@@ -0,0 +1,9 @@
+import '../../setup-fixture';
+
+import { InfoCard } from './InfoCard';
+
+const __html = `<p>Клиент на момент оформления заявки на кредит должен быть: 
+  официально трудоустроен более 6 месяцев, если Клиент получает з/п на счет РСХБ, 
+  то трудоустроен более 3 месяцев, не должен находиться в декретном отпуске</p>`;
+
+export default <InfoCard __html={__html} icon="InfoCircleIcon" />;

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

@@ -0,0 +1,20 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type IconVersion } from '../../model/IconVersion';
+import { Icon } from '../Icon/Icon';
+import { type IconName } from '../Icon/IconProps';
+import { RichText } from '../RichText/RichText';
+
+interface InfoCardProps {
+  __html?: string;
+  icon?: IconName;
+  iconVersion?: IconVersion;
+}
+
+export const InfoCard = JSX<InfoCardProps>(({ __html, icon, iconVersion = 'black' }) => (
+  <div className="flex flex-row items-center w-full min-h-14 bg-main-gray rounded-lg gap-m justify-evenly p-m">
+    <div className="rounded-full bg-white p-xs">
+      <Icon name={icon} width="24" height="24" iconVersion={iconVersion} />
+    </div>
+    <RichText __html={__html} />
+  </div>
+));

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

@@ -6,6 +6,7 @@ import { inputValidStyle } from './inputValidStyle';
 import { renderLabel } from './renderLabel';
 
 export const Input = JSX<InputProps>(
+  // eslint-disable-next-line max-lines-per-function
   ({
     key,
     className = '',
@@ -23,6 +24,7 @@ export const Input = JSX<InputProps>(
     pattern,
     autoFocus = false,
     isTextarea = false,
+    disabled = false,
   }) => {
     const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -58,6 +60,7 @@ export const Input = JSX<InputProps>(
               onChange={handleChange}
               onFocus={onFocus}
               onBlur={onBlur}
+              disabled={disabled}
             />
           ) : (
             <input
@@ -73,6 +76,7 @@ export const Input = JSX<InputProps>(
               onFocus={onFocus}
               onBlur={onBlur}
               pattern={pattern}
+              disabled={disabled}
             />
           )}
         </label>

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

@@ -4,19 +4,15 @@ import { PhoneInput } from '../PhoneInput/PhoneInput';
 import { type InputProps } from './InputProps';
 import { renderErrorText } from './renderErrorText';
 
-export const InputPhoneControl = JSX<InputProps>(
-  ({ className, label, value, error, onChange, onBlur, ...rest }) => (
-    <div className={style('shrink-0 w-full', className)}>
-      <PhoneInput
-        aria-label={label}
-        label={rest?.errors ? `${label}*` : label}
-        valid={Boolean(!error)}
-        value={value}
-        onChange={onChange}
-        onBlur={onBlur}
-        placeholder="+7 (___) ___-__-__"
-      />
-      {renderErrorText(error)}
-    </div>
-  ),
-);
+export const InputPhoneControl = JSX<InputProps>(({ className, label, error, ...rest }) => (
+  <div className={style('shrink-0 w-full', className)}>
+    <PhoneInput
+      aria-label={label}
+      label={rest?.errors ? `${label}*` : label}
+      valid={Boolean(!error)}
+      placeholder="+7 (___) ___-__-__"
+      {...rest}
+    />
+    {renderErrorText(error)}
+  </div>
+));

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

@@ -3,12 +3,14 @@ import { type TextProps } from '../../model/HeadlineType';
 import { type ListOrientation } from '../../model/ListOrientation';
 import { style } from '../../utils/style';
 import { Checkbox } from '../Checkbox/Checkbox';
+import { Text } from '../Text/Text';
 
 export type RadioButtonItem = TextProps & {
   id: string;
 };
 
 interface RadioButtonGroupProps {
+  title?: string;
   items?: RadioButtonItem[];
   checkedItem?: string;
   className?: string;
@@ -18,12 +20,13 @@ interface RadioButtonGroupProps {
 }
 
 const orientationStyleMap: Record<ListOrientation, string> = {
-  horizontal: 'gap-5xl',
-  vertical: 'flex-col gap-s',
+  horizontal: '@lg:flex-row',
+  vertical: '',
 };
 
 export const RadioButtonGroup = JSX<RadioButtonGroupProps>(
   ({
+    title,
     items,
     checkedItem,
     className,
@@ -31,21 +34,30 @@ export const RadioButtonGroup = JSX<RadioButtonGroupProps>(
     disabled = false,
     orientation = 'horizontal',
   }) => (
-    <div
-      className={style(`flex ${orientationStyleMap[orientation]}`, className)}
-      role="radiogroup"
-      aria-label="Группа кнопок"
-    >
-      {items?.map(({ id, text }) => (
-        <Checkbox
-          key={String(id)}
-          isRadio
-          text={text}
-          value={checkedItem === id}
-          onChange={() => onChangeCheckedItem && onChangeCheckedItem(id)}
-          disabled={disabled}
-        />
-      ))}
+    <div className="grid gap-xs whitespace-nowrap">
+      {title ? (
+        <div role="radiogroup" aria-label={title}>
+          <Text color="text-secondary-text" font="font-light">
+            {title}
+          </Text>
+        </div>
+      ) : null}
+      <div
+        className={style('flex flex-col gap-s', orientationStyleMap[orientation], className)}
+        role="radiogroup"
+        aria-label="Группа кнопок"
+      >
+        {items?.map(({ id, text }) => (
+          <Checkbox
+            key={String(id)}
+            isRadio
+            text={text}
+            value={checkedItem === id}
+            onChange={() => onChangeCheckedItem && onChangeCheckedItem(id)}
+            disabled={disabled}
+          />
+        ))}
+      </div>
     </div>
   ),
 );