@redneckz/wildless-cms-uni-blocks 0.14.154 → 0.14.155

package/src/components/ApplicationForm/ApplicationFormFeedback.tsx

@@ -2,10 +2,10 @@
 
 import { JSX } from '@redneckz/uni-jsx';
 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 { withValidator } from '../../validation/withValidator';
+import { AddressBranchField } from './AddressBranchField';
 import { ApplicationFieldsetLayout } from './ApplicationFieldsetLayout';
 import { type ApplicationFormsProps } from './ApplicationFormsProps';
 import { FEEDBACK_METHOD, FEEDBACK_TYPES, SERVICE_DIRECTIONS } from './feedbackTypes';
@@ -29,7 +29,7 @@ export type FeedbackFormState = UserDataState & {
   feedbackMethod: Option;
   phone: string;
   secondaryPhone?: string;
-  email?: string;
+  email: string;
   bankEmpolee?: string;
   applicationDate?: string;
   comment: string;
@@ -67,28 +67,29 @@ export const ApplicationFormFeedback = JSX<ApplicationFormsProps>(({ button, lin
     [onSubmit],
   );
 
-  const [formState, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
+  const [formState, { field, ...formProps }] = useForm(initialFormState, {
+    onSubmit: handleSubmit,
+  });
 
   const isQualityService = field('typeForm').value?.key === 'FEEDBACK_QS';
   const isLegalEntity = getLegalEntity(
     field('typeForm').value?.key,
     field('serviceDirection').value?.key,
   );
-  const addressByBranch = useBranches(formState?.region?.key).filter((branch) => branch?.address);
 
   return (
     <form className={formStyle} onSubmit={formProps.onSubmit}>
       <ApplicationFieldsetLayout>
         <div className={oneColumnFormStyle}>
           <SelectControl
-            label="Тема*"
+            label="Тема"
             placeholder="Выберите тему"
             options={FEEDBACK_TYPES}
             {...withValidator(field('typeForm'), defaultValidator)}
           />
           {isQualityService ? (
             <SelectControl
-              label="Направление обслуживания*"
+              label="Направление обслуживания"
               placeholder="Выберите направление"
               options={SERVICE_DIRECTIONS}
               {...withValidator(field('serviceDirection'), defaultValidator)}
@@ -96,34 +97,31 @@ export const ApplicationFormFeedback = JSX<ApplicationFormsProps>(({ button, lin
           ) : null}
           <RegionField field={field} />
           {isQualityService ? (
-            <SelectControl
-              label="Адрес*"
-              placeholder="Выберите адрес"
-              options={addressByBranch.map(({ branchCode = '', address = '' }) => ({
-                key: branchCode,
-                text: address,
-              }))}
-              {...withValidator(field('addressBranch'), defaultValidator)}
-            />
+            <AddressBranchField field={field} regionKey={formState?.region?.key} />
           ) : null}
           {renderUserData<FeedbackFormState>(field, true)}
           {isLegalEntity ? (
             <div>
-              <InputControl label="ИНН*" {...withValidator(field('inn'), innValidator)} />
+              <InputControl label="ИНН" {...withValidator(field('inn'), innValidator)} />
               <InputControl label="Наименование организации" {...field('fullName')} />
             </div>
           ) : null}
           <SelectControl
-            label="Способ получения ответа*"
+            label="Способ получения ответа"
             options={FEEDBACK_METHOD}
             {...withValidator(field('feedbackMethod'), defaultValidator)}
           />
-          <PhoneInputControl label="Телефон*" {...withValidator(field('phone'), phoneValidator)} />
+          <PhoneInputControl label="Телефон" {...withValidator(field('phone'), phoneValidator)} />
           {isQualityService ? (
             <div>
-              <PhoneInputControl label="Дополнительный телефон" {...field('secondaryPhone')} />
+              <PhoneInputControl
+                label="Дополнительный телефон"
+                {...(!field('secondaryPhone').value || field('secondaryPhone').value === '+7 ('
+                  ? field('secondaryPhone')
+                  : withValidator(field('secondaryPhone'), phoneValidator))}
+              />
               <InputControl
-                label="Электронная почта*"
+                label="Электронная почта"
                 {...withValidator(field('email'), defaultValidator)}
               />
               <InputControl
@@ -134,13 +132,13 @@ export const ApplicationFormFeedback = JSX<ApplicationFormsProps>(({ button, lin
             </div>
           ) : (
             <InputControl
-              label="Электронная почта*"
+              label="Электронная почта"
               {...withValidator(field('email'), defaultValidator)}
             />
           )}
           <InputControl
             {...withValidator(field('comment'), defaultValidator)}
-            placeholder="Ваше сообщение*"
+            placeholder="Ваше сообщение"
             isTextarea={true}
           />
           {renderAgreementWithSubmit(field('consentDataProcessing'), link, button)}

package/src/components/ApplicationForm/ApplicationFormIndividuals.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
-import { formatPhone } from '../../utils/formatPhone';
 import { objectValidator } from '../../validation/objectValidator';
 import { isValidationSuccess } from '../../validation/validator';
 import { withValidator } from '../../validation/withValidator';
@@ -13,7 +12,7 @@ import { InputControl } from './InputControl';
 import { PhoneInputControl } from './PhoneInputControl';
 import { renderAgreementWithSubmit } from './renderAgreementWithSubmit';
 import { initialUserFormState, type UserDataState } from './renderUserData';
-import { defaultValidator, nameValidator, phoneValidator } from './validators';
+import { checkboxValidator, defaultValidator, nameValidator, phoneValidator } from './validators';
 
 export type IndividualsFormState = UserDataState & {
   phone: string;
@@ -35,28 +34,19 @@ const individualsValidator = objectValidator({
   phone: phoneValidator,
   email: defaultValidator,
   birthday: defaultValidator,
+  consentDataProcessing: checkboxValidator,
 });
 
 export const ApplicationFormIndividuals = JSX<ApplicationFormsProps>((props) => {
-  const { button, link, product, onSubmit } = props;
+  const { button, link, product = '', onSubmit } = props;
 
   const handleSubmit = useCallback(
     (formState: IndividualsFormState) => {
-      const { surname, name, middleName, phone, email, birthday, consentDataProcessing } =
-        formState;
-
       isValidationSuccess(individualsValidator(formState)) &&
         onSubmit(
           {
-            typeForm: 'dpst',
-            surname,
-            name,
-            middleName,
-            email,
-            consentDataProcessing,
-            phoneNumber: formatPhone(phone),
-            birthday: birthday?.toISOString().slice(0, 10) || '',
-            product: product || '',
+            ...formState,
+            product,
           },
           true,
         );
@@ -64,7 +54,7 @@ export const ApplicationFormIndividuals = JSX<ApplicationFormsProps>((props) =>
     [onSubmit],
   );
 
-  const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
+  const [, { field, ...formProps }] = useForm(initialFormState, { onSubmit: handleSubmit });
 
   return (
     <form className={formStyle} onSubmit={formProps.onSubmit}>
@@ -78,7 +68,7 @@ export const ApplicationFormIndividuals = JSX<ApplicationFormsProps>((props) =>
         <div className={formChildrenStyle}>
           <InputControl label="Имя" {...withValidator(field('name'), nameValidator)} />
           <DatePickerControl
-            label="Дата рождения*"
+            label="Дата рождения"
             {...withValidator(field('birthday'), defaultValidator)}
           />
           <InputControl

package/src/components/ApplicationForm/ApplicationFormSelfCollection.tsx

@@ -2,33 +2,31 @@ 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 { formatPhone } from '../../utils/formatPhone';
 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 { Footnote } from './Footnote';
 import { formStyle, oneColumnFormStyle } from './formStyle';
 import { InputControl } from './InputControl';
 import { PhoneInputControl } from './PhoneInputControl';
 import { RegionField } from './RegionField';
-import { renderSubmitButton } from './renderSubmitButton';
-import { initialUserFormState, type UserDataState } from './renderUserData';
+import { renderAgreementWithSubmit } from './renderAgreementWithSubmit';
 import { defaultValidator, phoneValidator } from './validators';
 
-export type SelfCollectionFormState = UserDataState & {
+export type SelfCollectionFormState = {
   typeForm: Option;
   fullName: string;
   region?: Option;
   phone: string;
+  consentDataProcessing: boolean;
 };
 
 const initialFormState: SelfCollectionFormState = {
-  ...initialUserFormState,
   typeForm: { key: 'SELFCOLLECTION', text: 'Самоинкассация' }, // Уточнить key
   fullName: '',
   phone: '',
+  consentDataProcessing: false,
 };
 
 const feedbackValidator = objectValidator({
@@ -42,33 +40,21 @@ export const ApplicationFormSelfCollection = JSX<ApplicationFormsProps>(
   ({ button, link, onSubmit }) => {
     const handleSubmit = useCallback(
       (formState: SelfCollectionFormState) => {
-        const { typeForm, region, fullName, phone } = formState;
-
-        const submitData = {
-          typeForm: typeForm.key,
-          region: region?.text,
-          name: fullName,
-          phone: formatPhone(phone),
-        };
-        isValidationSuccess(feedbackValidator(formState)) && onSubmit(submitData, true);
+        isValidationSuccess(feedbackValidator(formState)) && onSubmit(formState, false);
       },
       [onSubmit],
     );
 
-    const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
+    const [, { field, ...formProps }] = useForm(initialFormState, { onSubmit: handleSubmit });
 
     return (
       <form className={formStyle} onSubmit={formProps.onSubmit}>
         <ApplicationFieldsetLayout>
           <div className={oneColumnFormStyle}>
-            <InputControl label="ФИО*" {...withValidator(field('fullName'), defaultValidator)} />
+            <InputControl label="ФИО" {...withValidator(field('fullName'), defaultValidator)} />
             <RegionField field={field} />
-            <PhoneInputControl
-              label="Телефон*"
-              {...withValidator(field('phone'), phoneValidator)}
-            />
-            {renderSubmitButton(button)}
-            <Footnote link={link} />
+            <PhoneInputControl label="Телефон" {...withValidator(field('phone'), phoneValidator)} />
+            {renderAgreementWithSubmit(field('consentDataProcessing'), link, button)}
           </div>
         </ApplicationFieldsetLayout>
       </form>

package/src/components/ApplicationForm/ApplicationFormUltraPremium.tsx

@@ -3,17 +3,17 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
-import { usePremiumBranchesByRegions } from '../../hooks/usePremiumBranchesByRegions';
 import { type Option } from '../../ui-kit/Select/Option';
-import { formatPhone } from '../../utils/formatPhone';
 import { objectValidator } from '../../validation/objectValidator';
 import { isValidationSuccess } from '../../validation/validator';
 import { withValidator } from '../../validation/withValidator';
+import { AddressBranchField } from './AddressBranchField';
 import { ApplicationFieldsetLayout, formChildrenStyle } from './ApplicationFieldsetLayout';
 import { type ApplicationFormsProps } from './ApplicationFormsProps';
 import { formStyle } from './formStyle';
 import { InputControl } from './InputControl';
 import { PhoneInputControl } from './PhoneInputControl';
+import { RegionPremiumField } from './RegionPremiumField';
 import { renderAgreementWithSubmit } from './renderAgreementWithSubmit';
 import { initialUserFormState, type UserDataState } from './renderUserData';
 import { SelectControl } from './SelectControl';
@@ -57,58 +57,35 @@ export const ApplicationFormUltraPremium = JSX<ApplicationFormsProps>(
   ({ button, link, onSubmit, defaultType = 'PREMIUMSERVICE' }) => {
     const handleSubmit = useCallback(
       (formState: UltraPremiumFormState) => {
-        const { surname, name, middleName, email, comment, consentDataProcessing } = formState;
-
-        const submitData = {
-          typeForm: formState.typeForm.key,
-          surname,
-          name,
-          middleName,
-          phoneNumber: formatPhone(formState.phone),
-          email,
-          addressBranch: formState.addressBranch?.key,
-          comment,
-          consentDataProcessing,
-        };
-        console.log(submitData);
-
-        isValidationSuccess(creditValidator(formState)) && onSubmit(submitData, true);
+        const isValid = isValidationSuccess(creditValidator(formState));
+        isValid && onSubmit(formState, true);
       },
       [onSubmit],
     );
 
     const [formState, { field, ...formProps }] = useForm(
       { ...initialFormState, typeForm: getDefaultFormType(defaultType) as Option },
-      handleSubmit,
+      { onSubmit: handleSubmit },
     );
-    const branchByRegions = usePremiumBranchesByRegions();
-    const regions = branchByRegions.map(({ region }) => ({
-      key: region,
-      text: region,
-    }));
     const regionKey = formState?.region?.key;
-    const addressBranches = branchByRegions.find((_) => _?.region === regionKey)?.branches;
 
     return (
       <form className={formStyle} onSubmit={formProps.onSubmit}>
         <ApplicationFieldsetLayout title="Ваши данные">
           <div className={formChildrenStyle}>
-            <InputControl label="Фамилия*" {...withValidator(field('surname'), nameValidator)} />
+            <InputControl label="Фамилия" {...withValidator(field('surname'), nameValidator)} />
             <InputControl label="Отчество (Обязательно, при наличии)" {...field('middleName')} />
             <InputControl
-              label="Электронная почта*"
+              label="Электронная почта"
               {...withValidator(field('email'), defaultValidator)}
             />
           </div>
 
           <div className={formChildrenStyle}>
-            <InputControl label="Имя*" {...withValidator(field('name'), nameValidator)} />
-            <PhoneInputControl
-              label="Телефон*"
-              {...withValidator(field('phone'), phoneValidator)}
-            />
+            <InputControl label="Имя" {...withValidator(field('name'), nameValidator)} />
+            <PhoneInputControl label="Телефон" {...withValidator(field('phone'), phoneValidator)} />
             <SelectControl
-              label="Тип обслуживания*"
+              label="Тип обслуживания"
               options={SERVICE_TYPES}
               {...withValidator(field('typeForm'), defaultValidator)}
             />
@@ -116,24 +93,10 @@ export const ApplicationFormUltraPremium = JSX<ApplicationFormsProps>(
         </ApplicationFieldsetLayout>
         <ApplicationFieldsetLayout title="Офис банка">
           <div className={formChildrenStyle}>
-            <SelectControl
-              label="Регион*"
-              placeholder="Выберите регион"
-              options={regions as Option[]}
-              {...withValidator(field('region'), defaultValidator)}
-            />
+            <RegionPremiumField field={field} />
           </div>
           <div className={formChildrenStyle}>
-            <SelectControl
-              className="w-full"
-              label="Адрес*"
-              placeholder="Выберите отделение"
-              options={(addressBranches || []).map(({ address = '' }) => ({
-                key: address,
-                text: address,
-              }))}
-              {...withValidator(field('addressBranch'), defaultValidator)}
-            />
+            <AddressBranchField field={field} regionKey={regionKey} isPremium={true} />
           </div>
         </ApplicationFieldsetLayout>
         <InputControl

package/src/components/ApplicationForm/ApplicationFormWed.tsx

@@ -1,39 +1,40 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
-import { useRegions } from '../../hooks/useRegions';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { type Option } from '../../ui-kit/Select/Option';
-import { formatPhone } from '../../utils/formatPhone';
 import { objectValidator } from '../../validation/objectValidator';
 import { isValidationSuccess } from '../../validation/validator';
 import { type ApplicationFormsProps } from './ApplicationFormsProps';
 import { Footnote } from './Footnote';
+import { InputControl } from './InputControl';
 import { renderContacts } from './renderContacts';
 import { renderQuestionsInterested } from './renderQuestionsInterested';
 import { renderSubmitButton } from './renderSubmitButton';
-import { renderTextarea } from './renderTextarea';
 import { renderWedDataOrganization } from './renderWedDataOrganization';
 import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
 export interface WedFormState {
-  fullName: string;
-  name: string;
-  phone: string;
+  typeForm: Option;
   vedTypes: string;
-  text: string;
   region?: Option;
-  mail?: string;
+  name: string;
+  fullName: string;
+  phone: string;
   inn?: string;
+  email: string;
+  partnerComments: string;
 }
 
 const initialFormState: WedFormState = {
+  typeForm: { key: 'KVED', text: 'Заявка на консультацию ВЭД' },
+  vedTypes: 'currencyControl',
   fullName: '',
   name: '',
   phone: '',
   inn: '',
-  vedTypes: 'currencyControl',
-  text: '',
+  email: '',
+  partnerComments: '',
 };
 
 const defaultValidators = {
@@ -44,7 +45,6 @@ const defaultValidators = {
 
 const wedValidator = objectValidator({
   ...defaultValidators,
-  mail: defaultValidator,
 });
 
 const wedValidatorCurrencyControl = objectValidator({
@@ -70,17 +70,17 @@ export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
 
   const handleSubmit = useCallback(
     (formState: WedFormState) => {
-      const { fullName, name, phone, mail, inn, region, vedTypes, text } = formState;
+      const { typeForm, fullName, name, phone, email, inn, region, vedTypes, partnerComments } =
+        formState;
 
       const data = {
-        typeForm: 'KVED',
+        typeForm,
         fullName,
         name,
-        phone: formatPhone(phone),
-        text,
+        phone,
         vedTypes: getVedTypes(vedTypes),
-        PartnerComments: text,
-        ...(!isCurrencyControl(vedTypes) ? { mail } : { inn, region: region?.text || '' }),
+        partnerComments,
+        ...(!isCurrencyControl(vedTypes) ? { email } : { inn, region }),
       };
 
       isValidationSuccess(getValidator(vedTypes)(formState)) && onSubmit(data);
@@ -88,21 +88,19 @@ export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
     [onSubmit],
   );
 
-  const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
-  const regions = useRegions();
-  const textField = field('text');
+  const [, { field, ...formProps }] = useForm(initialFormState, { onSubmit: handleSubmit });
 
   return (
     <form className="container space-y-lg" onSubmit={formProps.onSubmit}>
       {renderQuestionsInterested(field)}
       <Heading headingType="h6" title="Данные организации" className="@xl:text-center" />
-      {renderWedDataOrganization({ field, regions })}
-      {renderTextarea({
-        textField,
-        text: 'Обращение',
-        placeholder:
-          'Укажите интересующий вас вопрос, место ведения бизнеса и удобное время для телефонного звонка',
-      })}
+      {renderWedDataOrganization({ field })}
+      <InputControl
+        label="Обращение"
+        placeholder="Укажите интересующий вас вопрос, место ведения бизнеса и удобное время для телефонного звонка"
+        {...field('partnerComments')}
+        isTextarea={true}
+      />
       {renderSubmitButton(button)}
       <Footnote link={link} />
       <Heading

package/src/components/ApplicationForm/DatePickerControl.tsx

@@ -9,16 +9,17 @@ export interface DatePickerControlProps {
   label: string;
   value?: Date;
   error?: string;
+  errors?: string[];
   onChange?: (value: Date) => void;
 }
 
 export const DatePickerControl = JSX<DatePickerControlProps>(
-  ({ className, label, value = undefined, error, onChange }) => (
+  ({ className, label, value = undefined, error, onChange, ...rest }) => (
     <div className={style('shrink-0 w-full', className)}>
       {label ? (
         <div className="mb-xs">
           <Text size="text-m" font="font-light">
-            {label}
+            {rest?.errors ? `${label}*` : label}
           </Text>
         </div>
       ) : null}

package/src/components/ApplicationForm/InputControl.tsx

@@ -5,18 +5,18 @@ import { style } from '../../utils/style';
 import { renderErrorText } from './renderErrorText';
 
 export const InputControl = JSX<InputProps>(
-  ({ className, label, value = '', placeholder, error, onChange, onBlur, isTextarea }) => (
+  ({ className, label, value = '', placeholder, error, onChange, onBlur, isTextarea, ...rest }) => (
     <div className={style('shrink-0 w-full', className)}>
       <Input
         type="text"
         aria-label={label}
-        label={label}
+        label={label && rest?.errors ? `${label}*` : label}
         valid={Boolean(!error)}
         value={value}
         onChange={onChange}
         onBlur={onBlur}
         isTextarea={isTextarea}
-        placeholder={placeholder}
+        placeholder={rest?.errors && !label ? `${placeholder}*` : placeholder}
       />
       {renderErrorText(error)}
     </div>

package/src/components/ApplicationForm/PhoneInputControl.tsx

@@ -5,11 +5,11 @@ import { style } from '../../utils/style';
 import { renderErrorText } from './renderErrorText';
 
 export const PhoneInputControl = JSX<InputProps>(
-  ({ className, label, value, error, onChange, onBlur }) => (
+  ({ className, label, value, error, onChange, onBlur, ...rest }) => (
     <div className={style('shrink-0 w-full', className)}>
       <PhoneInput
         aria-label={label}
-        label={label}
+        label={rest?.errors ? `${label}*` : label}
         valid={Boolean(!error)}
         value={value}
         onChange={onChange}

package/src/components/ApplicationForm/RegionPremiumField.tsx

@@ -0,0 +1,28 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type FormFieldRegisterer } from '../../hooks/useForm';
+import { usePremiumBranchesByRegions } from '../../hooks/usePremiumBranchesByRegions';
+import { type Option } from '../../ui-kit/Select/Option';
+import { withValidator } from '../../validation/withValidator';
+import { SelectControl } from './SelectControl';
+import { defaultValidator } from './validators';
+
+interface RegionFieldProps {
+  field: FormFieldRegisterer<any>;
+}
+
+export const RegionPremiumField = JSX<RegionFieldProps>(({ field }) => {
+  const branchByRegions = usePremiumBranchesByRegions();
+  const regions = branchByRegions.map(({ region }) => ({
+    key: region,
+    text: region,
+  }));
+
+  return (
+    <SelectControl
+      label="Регион"
+      placeholder="Выберите регион"
+      options={regions as Option[]}
+      {...withValidator(field('region'), defaultValidator)}
+    />
+  );
+});

package/src/components/ApplicationForm/SelectControl.tsx

@@ -3,13 +3,17 @@ import { Select, type SelectProps } from '../../ui-kit/Select/Select';
 import { renderErrorText } from './renderErrorText';
 
 interface SelectControlProps extends SelectProps {
+  label?: string;
   error?: string;
+  errors?: string[];
   className?: string;
 }
 
-export const SelectControl = JSX<SelectControlProps>(({ className = '', error, ...rest }) => (
-  <div className={className}>
-    <Select {...rest} valid={!error} />
-    {renderErrorText(error)}
-  </div>
-));
+export const SelectControl = JSX<SelectControlProps>(
+  ({ className = '', label, error, ...rest }) => (
+    <div className={className}>
+      <Select {...rest} valid={!error} label={rest?.errors ? `${label}*` : label} />
+      {renderErrorText(error)}
+    </div>
+  ),
+);