@redneckz/wildless-cms-uni-blocks 0.14.135 → 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/renderUserData.tsx

@@ -1,11 +1,21 @@
 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)} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.135",
+  "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 Форма заявки

package/src/components/ApplicationForm/ApplicationFormFeedback.tsx

@@ -5,47 +5,36 @@ import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useBranches } from '../../hooks/useBranches';
 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 { useGetRegions } from '../SafeDepositRental/useGetRegions';
 import { ApplicationFieldsetLayout } from './ApplicationFieldsetLayout';
 import { type ApplicationFormsProps } from './ApplicationFormsProps';
 import { FEEDBACK_METHOD, FEEDBACK_TYPES, SERVICE_DIRECTIONS } from './feedbackTypes';
 import { formStyle } from './formStyle';
+import { handleSubmitIndividual, handleSubmitLegal, handleSubmitQuestion } from './handleSubmit';
 import { InputControl } from './InputControl';
 import { PhoneInputControl } from './PhoneInputControl';
 import { renderAgreementWithSubmit } from './renderAgreementWithSubmit';
-import { renderUserData } from './renderUserData';
+import { renderUserData, type UserDataState } from './renderUserData';
 import { SelectControl } from './SelectControl';
-import {
-  consentDataProcessingValidator,
-  defaultValidator,
-  innValidator,
-  nameValidator,
-  phoneValidator,
-} from './validators';
+import { defaultValidator, innValidator, phoneValidator } from './validators';
 
-export interface FeedbackFormState {
+export type FeedbackFormState = UserDataState & {
   typeForm: Option;
   region?: Option;
-  serviceDirection: Option;
-  department?: Option;
-  surname: string;
-  name: string;
-  middleName;
+  serviceDirection?: Option;
+  addressBranch?: Option;
+  inn?: string;
   fullName?: string;
-  birthday: Date | undefined;
   feedbackMethod: Option;
   phone: string;
-  secondaryPhoneNumber?: string;
-  email: string;
+  secondaryPhone?: string;
+  email?: string;
   bankEmpolee?: string;
   applicationDate?: string;
-  comment?: string;
+  comment: string;
   consentDataProcessing: boolean;
-  inn?: string;
-}
+};
 
 const initialFormState: FeedbackFormState = {
   typeForm: { key: 'FEEDBACK', text: 'Задать вопрос по продуктам и услугам' },
@@ -61,45 +50,21 @@ const initialFormState: FeedbackFormState = {
   consentDataProcessing: false,
 };
 
-const feedbackValidator = objectValidator({
-  typeForm: defaultValidator,
-  region: defaultValidator,
-  department: defaultValidator,
-  name: nameValidator,
-  birthday: defaultValidator,
-  feedbackMethod: defaultValidator,
-  phone: phoneValidator,
-  email: defaultValidator,
-  consentDataProcessing: consentDataProcessingValidator,
-  inn: innValidator,
-});
-
 export const ApplicationFormFeedback = JSX<ApplicationFormsProps>(({ button, link, onSubmit }) => {
   const handleSubmit = useCallback(
-    (formState: FeedbackFormState) => {
-      const {
-        typeForm,
-        region,
-        department,
-        phone,
-        email,
-        inn,
-        fullName,
-        feedbackMethod,
-        ...usedFields
-      } = formState;
+    (feedbackFormState: FeedbackFormState) => {
+      const isLegal = getLegalEntity(
+        feedbackFormState.typeForm.key,
+        feedbackFormState.serviceDirection?.key,
+      );
 
-      const submitData = {
-        ...usedFields,
-        typeForm: typeForm.key,
-        department: department?.text || '',
-        feedbackMethod: feedbackMethod.text,
-        [isLegalEntity ? 'region' : 'regionBranch']: region?.text,
-        [isLegalEntity ? 'phone' : 'phoneNumber']: phone.replace(/[^+\d]/g, ''),
-        [isLegalEntity ? 'mail' : 'email']: email,
-        ...(isLegalEntity ? { inn, fullName } : {}),
-      };
-      isValidationSuccess(feedbackValidator(formState)) && onSubmit(submitData, isLegalEntity);
+      if (isLegal) {
+        handleSubmitLegal(feedbackFormState, onSubmit);
+      } else if (feedbackFormState.typeForm.key === 'FEEDBACK') {
+        handleSubmitQuestion(feedbackFormState, onSubmit);
+      } else {
+        handleSubmitIndividual(feedbackFormState, onSubmit);
+      }
     },
     [onSubmit],
   );
@@ -147,10 +112,10 @@ export const ApplicationFormFeedback = JSX<ApplicationFormsProps>(({ button, lin
                   key: branchCode,
                   text: address,
                 }))}
-                {...withValidator(field('department'), defaultValidator)}
+                {...withValidator(field('addressBranch'), defaultValidator)}
               />
             ) : null}
-            {renderUserData(field)}
+            {renderUserData<FeedbackFormState>(field)}
             {isLegalEntity ? (
               <div>
                 <InputControl label="ИНН*" {...withValidator(field('inn'), innValidator)} />
@@ -168,7 +133,7 @@ export const ApplicationFormFeedback = JSX<ApplicationFormsProps>(({ button, lin
             />
             {isQualityService ? (
               <div>
-                <InputControl label="Дополнительный телефон" {...field('secondaryPhoneNumber')} />
+                <InputControl label="Дополнительный телефон" {...field('secondaryPhone')} />
                 <InputControl
                   label="Электронная почта*"
                   {...withValidator(field('email'), defaultValidator)}

package/src/components/ApplicationForm/EmbeddableForms.tsx

@@ -1,4 +1,5 @@
 import { ApplicationFormAcquiring } from './ApplicationFormAcquiring';
+import { ApplicationFormAntiFraud } from './ApplicationFormAntiFraud';
 import { ApplicationFormBusinessCard } from './ApplicationFormBusinessCard';
 import { ApplicationFormCredit } from './ApplicationFormCredit';
 import { ApplicationFormDeposit } from './ApplicationFormDeposit';
@@ -16,4 +17,5 @@ export const EmbeddableForms = {
   ApplicationFormGrantSupport,
   ApplicationFormIndividuals,
   ApplicationFormFeedback,
+  ApplicationFormAntiFraud,
 };

package/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/src/components/ApplicationForm/renderUserData.tsx

@@ -1,11 +1,21 @@
 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)} />