@redneckz/wildless-cms-uni-blocks 0.14.134 → 0.14.136

package/mobile/src/components/ApplicationForm/handleSubmit.tsx

@@ -0,0 +1,87 @@
+import { objectValidator } from '../../validation/objectValidator';
+import { isValidationSuccess } from '../../validation/validator';
+import { type FeedbackFormState } from './ApplicationFormFeedback';
+import { type ApplicationFormsProps } from './ApplicationFormsProps';
+import {
+  consentDataProcessingValidator,
+  defaultValidator,
+  innValidator,
+  nameValidator,
+  phoneValidator,
+} from './validators';
+
+export const feedbackValidatorDefaultObject = {
+  typeForm: defaultValidator,
+  region: defaultValidator,
+  surname: defaultValidator,
+  name: nameValidator,
+  feedbackMethod: defaultValidator,
+  phone: phoneValidator,
+  email: defaultValidator,
+  comment: defaultValidator,
+  consentDataProcessing: consentDataProcessingValidator,
+};
+
+export const handleSubmitIndividual = (
+  formState: FeedbackFormState,
+  onSubmit: ApplicationFormsProps['onSubmit'],
+) => {
+  const feedbackValidator = objectValidator({
+    ...feedbackValidatorDefaultObject,
+    addressBranch: defaultValidator,
+  });
+  const { region, phone, secondaryPhone } = formState;
+
+  const submitData = {
+    ...formState,
+    typeForm: formState.typeForm.key,
+    addressBranch: formState.addressBranch?.text || '',
+    feedbackMethod: formState.feedbackMethod.text,
+    regionBranch: region?.text,
+    phoneNumber: phone.replace(/[^+\d]/g, ''),
+    secondaryPhoneNumber: secondaryPhone,
+  };
+  isValidationSuccess(feedbackValidator(formState)) && onSubmit(submitData);
+};
+
+export const handleSubmitLegal = (
+  formState: FeedbackFormState,
+  onSubmit: ApplicationFormsProps['onSubmit'],
+) => {
+  const feedbackValidator = objectValidator({
+    ...feedbackValidatorDefaultObject,
+    addressBranch: defaultValidator,
+    inn: innValidator,
+  });
+  const { secondaryPhone, email } = formState;
+  const submitData = {
+    ...formState,
+    typeForm: formState.typeForm.key,
+    region: formState.region?.text,
+    addressBranch: formState.addressBranch?.text || '',
+    feedbackMethod: formState.feedbackMethod.text,
+    phone: formState.phone.replace(/[^+\d]/g, ''),
+    secondaryPhoneNumber: secondaryPhone,
+    mail: email,
+  };
+  isValidationSuccess(feedbackValidator(formState)) && onSubmit(submitData, true);
+};
+
+export const handleSubmitQuestion = (
+  formState: FeedbackFormState,
+  onSubmit: ApplicationFormsProps['onSubmit'],
+) => {
+  const feedbackValidator = objectValidator({
+    ...feedbackValidatorDefaultObject,
+    birthday: defaultValidator,
+  });
+  const { region, phone } = formState;
+  const submitData = {
+    ...formState,
+    typeForm: formState.typeForm.key,
+    feedbackMethod: formState.feedbackMethod.text,
+    regionBranch: region?.text,
+    phoneNumber: phone.replace(/[^+\d]/g, ''),
+  };
+  isValidationSuccess(feedbackValidator(formState)) && onSubmit(submitData);
+};

package/mobile/src/components/ApplicationForm/renderAgreementWithSubmit.tsx

@@ -13,7 +13,7 @@ export const renderAgreementWithSubmit = (
   link?: LinkProps,
   button?: SubmitButtonProps,
 ) => (
-  <div className="flex w-full justify-between items-baseline">
+  <div className="flex flex-col lg:flex-row w-full justify-between items-baseline">
     <div>
       <div className="flex gap-3">
         <Checkbox {...consentDataProcessing} />

package/mobile/src/components/ApplicationForm/renderIndividualsFields.tsx

@@ -21,11 +21,11 @@ export const renderIndividualsFields = (field: FormFieldRegisterer<IndividualsFo
         <InputControl label="Имя" {...withValidator(field('name'), nameValidator)} />
         <DatePickerControl
           label="Дата рождения*"
-          {...withValidator(field('date'), defaultValidator)}
+          {...withValidator(field('birthday'), defaultValidator)}
         />
         <InputControl
           label="Электронная почта"
-          {...withValidator(field('mail'), defaultValidator)}
+          {...withValidator(field('email'), defaultValidator)}
         />
       </div>
     }

package/mobile/src/components/ApplicationForm/renderTextarea.tsx

@@ -1,30 +1,42 @@
 import { type FieldProps } from '../../hooks/useForm';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
+import { renderErrorText } from './renderErrorText';
+
+interface TextFieldProps {
+  textField: FieldProps<string>;
+  text?: string;
+  placeholder?: string;
+  value?: string;
+  error?: string;
+}
 
 const activeTextareaStyles =
   'hover:border-primary-hover active:focus:border-primary-text focus:border-primary-text';
-export const renderTextarea = (textField: FieldProps<string>, text?: string, placeholder = '') => (
-  <label className="space-y-xs" htmlFor="textarea">
-    {text ? (
-      <div>
-        <Text size="text-m" font="font-light">
-          {text}
-        </Text>
-      </div>
-    ) : null}
-    <textarea
-      id="textarea"
-      placeholder={placeholder}
-      className={style(
-        'block w-full resize-y min-h-24 p-m outline-none border rounded-md border-gray',
-        activeTextareaStyles,
-      )}
-      value={textField.value}
-      onInput={
-        ((e: { target?: { value?: string } }) =>
-          textField.onChange && textField.onChange(e.target?.value || '')) as any
-      }
-    />
-  </label>
+export const renderTextarea = ({ textField, text, placeholder = '', error }: TextFieldProps) => (
+  <div>
+    <label className="space-y-xs" htmlFor="textarea">
+      {text ? (
+        <div>
+          <Text size="text-m" font="font-light">
+            {text}
+          </Text>
+        </div>
+      ) : null}
+      <textarea
+        id="textarea"
+        placeholder={placeholder}
+        className={style(
+          'block w-full resize-y min-h-24 p-m outline-none border rounded-md border-gray',
+          activeTextareaStyles,
+        )}
+        value={textField.value}
+        onInput={
+          ((e: { target?: { value?: string } }) =>
+            textField.onChange && textField.onChange(e.target?.value || '')) as any
+        }
+      />
+    </label>
+    {renderErrorText(error)}
+  </div>
 );

package/mobile/src/components/ApplicationForm/renderUserData.tsx

@@ -1,18 +1,28 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { withValidator } from '../../validation/withValidator';
+import { type AntiFraudFormState } from './ApplicationFormAntiFraud';
 import { type FeedbackFormState } from './ApplicationFormFeedback';
 import { DatePickerControl } from './DatePickerControl';
 import { InputControl } from './InputControl';
 import { defaultValidator, nameValidator } from './validators';
 
-export const renderUserData = (field: FormFieldRegisterer<FeedbackFormState>) => (
+export interface UserDataState {
+  surname: string;
+  name: string;
+  middleName?: string;
+  birthday: Date | undefined;
+}
+
+export const renderUserData = <T extends AntiFraudFormState | FeedbackFormState>(
+  field: FormFieldRegisterer<T>,
+) => (
   <div>
     <InputControl label="Фамилия*" {...withValidator(field('surname'), nameValidator)} />
     <InputControl label="Имя*" {...withValidator(field('name'), nameValidator)} />
-    <InputControl
-      label="Отчество (Обязательно, при наличии)"
-      {...withValidator(field('middleName'), nameValidator)}
+    <InputControl label="Отчество (Обязательно, при наличии)" {...field('middleName')} />
+    <DatePickerControl
+      label="Дата рождения*"
+      {...withValidator(field('birthday'), defaultValidator)}
     />
-    <DatePickerControl label="Дата рождения*" {...withValidator(field('date'), defaultValidator)} />
   </div>
 );

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

@@ -8,7 +8,6 @@ export const Input = JSX<InputProps>(
   ({
     key,
     className = '',
-    inputClassName = '',
     id,
     name,
     type = 'text',
@@ -22,6 +21,7 @@ export const Input = JSX<InputProps>(
     onBlur,
     pattern,
     autoFocus = false,
+    isTextarea = false,
   }) => {
     const inputRef = useRef<HTMLInputElement | null>(null);
     const handleChange = useCallback(
@@ -36,44 +36,58 @@ export const Input = JSX<InputProps>(
         inputRef.current?.focus();
       }
     }, [autoFocus, inputRef]);
-
+    const defaultStyle = 'w-full border rounded-md text-primary-text outline-none p-m';
     const paddingStyle = children ? 'pr-3xl' : '';
-    const validStyle = valid
-      ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
-      : 'border-error';
+    const validStyle = getValidStyle(valid);
 
     return (
       <div className={style('relative', className)}>
         <label>
-          {label ? (
-            <div className="mb-xs">
-              <Text size="text-m" font="font-light">
-                {label}
-              </Text>
-            </div>
-          ) : null}
-          <input
-            ref={inputRef}
-            key={key}
-            className={style(
-              'w-full h-14 border rounded-md text-primary-text outline-none p-m',
-              paddingStyle,
-              validStyle,
-              inputClassName,
-            )}
-            id={id}
-            name={name || id}
-            placeholder={placeholder}
-            type={type}
-            value={value}
-            onInput={handleChange as any}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            pattern={pattern}
-          />
+          {label ? renderLabel(label) : null}
+          {isTextarea ? (
+            <textarea
+              className={style('block resize-y min-h-24', defaultStyle, validStyle)}
+              key={key}
+              id={style('textarea', id)}
+              name={name || id}
+              placeholder={placeholder}
+              value={value}
+              onInput={handleChange as any}
+              onFocus={onFocus}
+              onBlur={onBlur}
+            />
+          ) : (
+            <input
+              type={type}
+              className={style('h-14', defaultStyle, paddingStyle, validStyle)}
+              ref={inputRef}
+              key={key}
+              id={id}
+              name={name || id}
+              placeholder={placeholder}
+              value={value}
+              onInput={handleChange as any}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              pattern={pattern}
+            />
+          )}
         </label>
         {children}
       </div>
     );
   },
 );
+
+const renderLabel = (label: string) => (
+  <div className="mb-xs">
+    <Text size="text-m" font="font-light">
+      {label}
+    </Text>
+  </div>
+);
+
+const getValidStyle = (valid: boolean) =>
+  valid
+    ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
+    : 'border-error';

package/mobile/src/ui-kit/Input/InputProps.ts

@@ -4,7 +4,6 @@ import { type ControlProps } from '../ControlProps';
 
 export interface InputProps<V = string> extends ControlProps<V>, LabelProps {
   className?: string;
-  inputClassName?: string;
   id?: string;
   name?: string;
   type?: InputTypes;
@@ -15,4 +14,6 @@ export interface InputProps<V = string> extends ControlProps<V>, LabelProps {
   valid?: boolean;
   disabled?: boolean;
   autoFocus?: boolean;
+  isTextarea?: boolean;
+  error?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.134",
+  "version": "0.14.136",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -206,7 +206,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "62 kB",
+      "limit": "63 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/components/ApplicationForm/ApplicationForm.fixture.tsx

@@ -60,6 +60,14 @@ const ApplicationFormFeedback: ApplicationFormContent = {
   formBlock: { ...formBlockProps, formType: 'ApplicationFormFeedback', title: 'Обратная связь' },
 };
 
+const ApplicationFormAntiFraud: ApplicationFormContent = {
+  formBlock: {
+    ...formBlockProps,
+    formType: 'ApplicationFormAntiFraud',
+    title: 'Предупреждение о мошенничестве',
+  },
+};
+
 export default {
   credit: (
     <div className="container grid grid-cols-12">
@@ -109,4 +117,10 @@ export default {
       <PopupManager />
     </div>
   ),
+  'anti-fraud': (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormAntiFraud} />
+      <PopupManager />
+    </div>
+  ),
 };

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -20,15 +20,12 @@ export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
 
   const [responseType, setResponseType] = useState<'OK' | 'Fail' | ''>('');
 
-  const handleSubmit = useCallback(
-    async (data: Record<string, any>, isIndividualType?: boolean) => {
-      const status = (await API.send(data, isIndividualType)) ? 'OK' : 'Fail';
-      setResponseType(status);
-
-      return status;
-    },
-    [],
-  );
+  const handleSubmit = useCallback(async (data: Record<string, any>, isIndividualType = false) => {
+    const status = (await API.send(data, isIndividualType)) ? 'OK' : 'Fail';
+    setResponseType(status);
+
+    return status;
+  }, []);
 
   return (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>

package/src/components/ApplicationForm/ApplicationFormAntiFraud.tsx

@@ -0,0 +1,86 @@
+/* eslint-disable max-lines-per-function,max-lines */
+
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm';
+import { type Option } from '../../ui-kit/Select/Option';
+import { objectValidator } from '../../validation/objectValidator';
+import { isValidationSuccess } from '../../validation/validator';
+import { withValidator } from '../../validation/withValidator';
+import { ApplicationFieldsetLayout } from './ApplicationFieldsetLayout';
+import { type ApplicationFormsProps } from './ApplicationFormsProps';
+import { formStyle } from './formStyle';
+import { PhoneInputControl } from './PhoneInputControl';
+import { renderAgreementWithSubmit } from './renderAgreementWithSubmit';
+import { renderUserData, type UserDataState } from './renderUserData';
+import {
+  consentDataProcessingValidator,
+  defaultValidator,
+  nameValidator,
+  phoneValidator,
+} from './validators';
+
+export type AntiFraudFormState = UserDataState & {
+  typeForm: Option;
+  phone: string;
+  birthday: Date | undefined;
+  isClient: boolean;
+  comment?: string;
+  consentDataProcessing: boolean;
+};
+
+const initialFormState: AntiFraudFormState = {
+  typeForm: { key: 'ANTIFRAUD', text: 'Предупреждение о мошенничестве' },
+  surname: '',
+  name: '',
+  middleName: '',
+  phone: '',
+  birthday: undefined,
+  isClient: false,
+  comment: '',
+  consentDataProcessing: false,
+};
+
+const feedbackValidator = objectValidator({
+  typeForm: defaultValidator,
+  surname: defaultValidator,
+  name: nameValidator,
+  birthday: defaultValidator,
+  phone: phoneValidator,
+  consentDataProcessing: consentDataProcessingValidator,
+});
+
+export const ApplicationFormAntiFraud = JSX<ApplicationFormsProps>(({ button, link, onSubmit }) => {
+  const handleSubmit = useCallback(
+    (formState: AntiFraudFormState) => {
+      const { typeForm, phone, ...usedFields } = formState;
+
+      const submitData = {
+        ...usedFields,
+        typeForm: typeForm.key,
+        phone: phone.replace(/[^+\d]/g, ''),
+      };
+      isValidationSuccess(feedbackValidator(formState)) && onSubmit(submitData);
+    },
+    [onSubmit],
+  );
+
+  const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
+
+  return (
+    <form className={formStyle} onSubmit={formProps.onSubmit}>
+      <ApplicationFieldsetLayout
+        firstChildren={
+          <div className="w-full max-w-xl space-y-s m-auto">
+            {renderUserData<AntiFraudFormState>(field)}
+            <PhoneInputControl
+              label="Телефон*"
+              {...withValidator(field('phone'), phoneValidator)}
+            />
+            {renderAgreementWithSubmit(field('consentDataProcessing'), link, button)}
+          </div>
+        }
+      />
+    </form>
+  );
+});

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -94,6 +94,15 @@ export type FeedbackFormParamsDef = TitleProps &
     formType: 'ApplicationFormFeedback';
   };
 
+/**
+ * @title Сообщить о мошенничестве
+ */
+export type AntiFraudFormParamsDef = TitleProps &
+  CommonApplicationFormProps & {
+    /** @default ApplicationFormAntiFraud */
+    formType: 'ApplicationFormAntiFraud';
+  };
+
 /**
  * @title Настройки формы
  */
@@ -105,7 +114,8 @@ export type ApplicationFormBlockDef =
   | AcquiringFormParamsDef
   | GrantSupportFormParamsDef
   | IndividualsFormParamsDef
-  | FeedbackFormParamsDef;
+  | FeedbackFormParamsDef
+  | AntiFraudFormParamsDef;
 
 /**
  * @title Форма заявки