@redneckz/wildless-cms-uni-blocks 0.9.16 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.9.16",
+  "version": "0.10.1",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -189,7 +189,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "53 kB",
+      "limit": "55 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/common.css

@@ -17,6 +17,7 @@ html {
 /* Private clients | Green */
 [data-theme='pc'] {
   --color-primary-main: var(--color-green-dark);
+  --color-primary-divider: 235, 237, 240;
   --color-primary-hover: 36, 131, 65;
   --color-primary-active: 36, 95, 52;
   --color-secondary-hover: 36, 131, 65;
@@ -242,29 +243,47 @@ html {
 
   .md-container a {
     @apply text-primary-main;
+    font-weight: 400;
   }
 
   .md-container strong {
     @apply font-bold;
   }
 
-  .striped .md-container table {
+  .striped.md-container table {
     width: 100%;
     table-layout: fixed;
     text-align: left;
   }
-  .striped .md-container table thead {
+  .striped.md-container table thead,
+  .horizontal-separator.md-container table thead {
     color: rgb(var(--color-secondary-text));
   }
 
-  .striped .md-container table td,
-  .striped .md-container table th {
+  .striped.md-container table td,
+  .striped.md-container table th {
     padding: 8px 14px 5px;
   }
 
-  .striped .md-container table tbody tr:nth-child(2n-1) {
+  .striped.md-container table tbody tr:nth-child(2n-1) {
     background-color: rgb(var(--color-secondary-light));
   }
+
+  .horizontal-separator.md-container table {
+    width: 100%;
+    text-align: left;
+  }
+
+  .horizontal-separator.md-container table td,
+  .horizontal-separator.md-container table th {
+    padding: 12px 8px 12px 0;
+    font-size: 18px;
+    min-width: 116px;
+  }
+
+  .horizontal-separator.md-container table tr {
+    border-bottom: 1px solid rgb(var(--color-primary-divider));
+  }
 }
 
 /*

package/src/components/ApplicationForm/ApplicationForm.example.json

@@ -3,6 +3,7 @@
     "button": {
       "text": "Отправить заявку"
     },
-    "typeForm": "credit"
+    "typeForm": "credit",
+    "version": "primary"
   }
 }

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -31,10 +31,10 @@ export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
   const [responceType, setResponseType] = useState<'OK' | 'Fail' | ''>('');
 
   const handleSubmit = useCallback(async (data: Record<string, string>) => {
-    const status = await API.send(data);
-    setResponseType(status ? 'OK' : 'Fail');
+    const status = (await API.send(data)) ? 'OK' : 'Fail';
+    setResponseType(status);
 
-    return 'OK';
+    return status;
   }, []);
 
   return (

package/src/components/ApplicationForm/ApplicationFormAcquiring.tsx

@@ -1,18 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Input } from '../../ui-kit/Input/Input';
 import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { useGetRegions } from '../SafeDepositRental/useGetRegions';
-import { ACQUIRING_TYPES } from './acquiringTypes';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
 import { Footnote } from './Footnote';
-import type { HandleFormStateChange } from './models';
-import { normalizeSelectedRegion } from './normalizeSelectedRegion';
-import { renderSelects } from './renderSelects';
+import { renderAcquiringDataOrganization } from './renderAcquiringDataOrganization';
+import { renderAcquiringRegion } from './renderAcquiringRegion';
 import { renderSlideCheckboxes } from './renderSlideCheckboxes';
 import { renderSubmitButton } from './renderSubmitButton';
-import { useFormHandlers } from './useFormHandlers';
+import { useForm } from './useForm';
 
 export interface AcquiringFormState {
   acquiringType: string;
@@ -25,67 +21,76 @@ export interface AcquiringFormState {
   posTerminal: boolean;
 }
 
+const initialFormState = {
+  acquiringType: 'Торговый эквайринг',
+  region: '',
+  fullName: '',
+  inn: '',
+  name: '',
+  phone: '',
+  onlineСheckout: false,
+  posTerminal: false,
+};
+
+const errorsInitialState = {
+  acquiringType: '',
+  region: '',
+  fullName: '',
+  inn: '',
+  name: '',
+  phone: '',
+};
+
 export const ApplicationFormAcquiring = JSX<ApplicationFormsProps>((props) => {
   const { button, link, handleSubmit } = props;
 
-  const [formState, setFormState] = useState<AcquiringFormState>({
-    acquiringType: '',
-    region: '',
-    fullName: '',
-    inn: '',
-    name: '',
-    phone: '',
-    onlineСheckout: false,
-    posTerminal: false,
-  });
+  const { formState, errors, handleChange, handleChangeErrors, sendForm } =
+    useForm<AcquiringFormState>({
+      initialFormState,
+      errorsInitialState,
+      handleSubmit,
+    });
 
   const { acquiringType, region, fullName, inn, name, phone, onlineСheckout, posTerminal } =
     formState;
 
   const regions = useGetRegions();
 
-  const { handleChange } = useFormHandlers<AcquiringFormState>({
-    setFormState,
-  });
-
-  const selectedRegion = normalizeSelectedRegion(region, regions);
-
-  useEffect(() => {
-    setFormState((oldState) => ({
-      ...oldState,
-      acquiringType:
-        ACQUIRING_TYPES?.length && ACQUIRING_TYPES[0]?.name ? ACQUIRING_TYPES[0].name : '',
-    }));
-  }, []);
-
-  const onSubmit = async (e: PreventableEvent) => {
+  const onSubmit = (e: PreventableEvent) => {
     e.preventDefault();
 
-    const partnerComments = `Вид эквайринга=${acquiringType}/Онлайн касса=${onlineСheckout}/POS-терминал=${posTerminal}`;
-
-    handleSubmit &&
-      (await handleSubmit({
-        typeForm: 'acqr',
-        region: regions.find((_) => _.code === selectedRegion)?.name || '',
-        partnerComments,
-        fullName,
-        inn,
-        name,
-        phone,
-      }));
+    sendForm({
+      typeForm: 'acqr',
+      region: regions.find((_) => _.code === region)?.name || '',
+      partnerComments: `Вид эквайринга=${acquiringType}/Онлайн касса=${onlineСheckout}/POS-терминал=${posTerminal}`,
+      fullName,
+      inn,
+      name,
+      phone,
+    });
   };
 
   return (
     <form onSubmit={onSubmit} className="container">
       <Heading headingType="h6" title="Вид эквайринга и регион" className="text-center mb-4" />
-      {renderSelects({
+      {renderAcquiringRegion({
         acquiringType,
         regions,
-        region: selectedRegion,
+        region,
         handleChange,
+        errors,
+        handleChangeErrors,
       })}
       <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
-      {renderDataOrganization({ fullName, inn, name, phone, handleChange })}
+      {renderAcquiringDataOrganization({
+        fullName,
+        inn,
+        name,
+        phone,
+        handleChange,
+        errors,
+        handleChangeErrors,
+      })}
       {renderSlideCheckboxes({
         onlineСheckout,
         posTerminal,
@@ -96,58 +101,3 @@ export const ApplicationFormAcquiring = JSX<ApplicationFormsProps>((props) => {
     </form>
   );
 });
-
-interface RenderDataOrganizationProps {
-  fullName: string;
-  inn: string;
-  name: string;
-  phone: string;
-  handleChange: HandleFormStateChange<AcquiringFormState>;
-}
-
-const renderDataOrganization = ({
-  fullName,
-  inn,
-  name,
-  phone,
-  handleChange,
-}: RenderDataOrganizationProps) => (
-  <div className="flex justify-between gap-5 mb-5">
-    <div className="w-1/2">
-      <Input
-        className="shrink-0 text-l w-full mb-5"
-        type="text"
-        aria-label="Наименование организации"
-        label="Наименование организации"
-        value={fullName}
-        onChange={(value) => handleChange({ fullName: value })}
-      />
-      <Input
-        className="shrink-0 text-l w-full"
-        type="text"
-        aria-label="Контактное лицо"
-        label="Контактное лицо"
-        value={name}
-        onChange={(value) => handleChange({ name: value })}
-      />
-    </div>
-    <div className="w-1/2">
-      <Input
-        className="shrink-0 text-l w-full mb-5"
-        type="text"
-        label="ИНН"
-        aria-label="ИНН"
-        value={inn}
-        onChange={(value) => handleChange({ inn: value })}
-      />
-      <Input
-        className="shrink-0 text-l w-full"
-        type="text"
-        label="Телефон"
-        aria-label="Телефон"
-        value={phone}
-        onChange={(value) => handleChange({ phone: value })}
-      />
-    </div>
-  </div>
-);

package/src/components/ApplicationForm/ApplicationFormBusinessCard.tsx

@@ -1,16 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { Region } from '../../hooks/useRegions';
 import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
-import { Input } from '../../ui-kit/Input/Input';
 import { useGetRegions } from '../SafeDepositRental/useGetRegions';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
 import { Footnote } from './Footnote';
-import type { HandleFormStateChange } from './models';
-import { normalizeSelectedRegion } from './normalizeSelectedRegion';
+import { renderBusinessCardDataOrganization } from './renderBusinessCardDataOrganization';
+import { renderRegion } from './renderRegion';
 import { renderSubmitButton } from './renderSubmitButton';
-import { useFormHandlers } from './useFormHandlers';
-import { WrapperSelect } from './WrapperSelect';
+import { useForm } from './useForm';
 
 export interface BusinessCardFormState {
   region: string;
@@ -20,128 +16,61 @@ export interface BusinessCardFormState {
   mail: string;
 }
 
+const initialFormState = {
+  region: '',
+  name: '',
+  phone: '',
+  inn: '',
+  mail: '',
+};
+
 export const ApplicationFormBusinessCard = JSX<ApplicationFormsProps>((props) => {
   const { button, link, handleSubmit } = props;
 
-  const [formState, setFormState] = useState<BusinessCardFormState>({
-    region: '',
-    name: '',
-    phone: '',
-    inn: '',
-    mail: '',
-  });
+  const { formState, errors, handleChange, handleChangeErrors, sendForm } =
+    useForm<BusinessCardFormState>({
+      initialFormState,
+      errorsInitialState: initialFormState,
+      handleSubmit,
+    });
 
   const { region, name, phone, inn, mail } = formState;
 
   const regions = useGetRegions();
 
-  const { handleChange } = useFormHandlers<BusinessCardFormState>({
-    setFormState,
-  });
-
-  const selectedRegion = normalizeSelectedRegion(region, regions);
-
-  const onSubmit = async (e: PreventableEvent) => {
+  const onSubmit = (e: PreventableEvent) => {
     e.preventDefault();
 
-    handleSubmit &&
-      (await handleSubmit({
-        typeForm: 'bcrd',
-        region: regions.find((_) => _.code === selectedRegion)?.name || '',
-        name,
-        phone,
-        inn,
-        mail,
-      }));
+    sendForm({
+      typeForm: 'bcrd',
+      region: regions.find((_) => _.code === region)?.name || '',
+      name,
+      phone,
+      inn,
+      mail,
+    });
   };
 
   return (
     <form onSubmit={onSubmit} className="container">
       {renderRegion({
         regions,
-        region: selectedRegion,
+        region,
+        handleChange,
+        errors,
+        handleChangeErrors,
+      })}
+      {renderBusinessCardDataOrganization({
+        name,
+        phone,
+        inn,
+        mail,
         handleChange,
+        errors,
+        handleChangeErrors,
       })}
-      {renderDataOrganization({ name, phone, inn, mail, handleChange })}
       {renderSubmitButton(button, 'mb-4')}
       <Footnote link={link} />
     </form>
   );
 });
-
-interface RenderDataOrganizationProps {
-  name: string;
-  phone: string;
-  mail: string;
-  inn: string;
-  handleChange: HandleFormStateChange<BusinessCardFormState>;
-}
-
-const renderDataOrganization = ({
-  name,
-  phone,
-  mail,
-  inn,
-  handleChange,
-}: RenderDataOrganizationProps) => (
-  <div className="flex justify-between gap-5">
-    <div className="w-1/2">
-      <Input
-        className="shrink-0 text-l w-full mb-5"
-        type="text"
-        aria-label="Контактное лицо"
-        label="Контактное лицо"
-        value={name}
-        onChange={(value) => handleChange({ name: value })}
-      />
-      <Input
-        className="shrink-0 text-l w-full mb-5"
-        type="text"
-        aria-label="ИНН"
-        label="ИНН"
-        value={inn}
-        onChange={(value) => handleChange({ inn: value })}
-      />
-    </div>
-    <div className="w-1/2">
-      <Input
-        className="shrink-0 text-l w-full mb-5"
-        type="text"
-        aria-label="Телефон"
-        label="Телефон"
-        value={phone}
-        onChange={(value) => handleChange({ phone: value })}
-      />
-      <Input
-        className="shrink-0 text-l w-full "
-        type="text"
-        aria-label="Электронная почта"
-        label="Электронная почта"
-        value={mail}
-        onChange={(value) => handleChange({ mail: value })}
-      />
-    </div>
-  </div>
-);
-
-interface RenderRegionProps {
-  regions: Region[];
-  region: string;
-  handleChange: HandleFormStateChange<BusinessCardFormState>;
-}
-
-const renderRegion = ({ regions, region, handleChange }: RenderRegionProps) => (
-  <div className="flex justify-between gap-5 mb-5">
-    <div className="w-full">
-      <WrapperSelect
-        data={regions}
-        fieldValue="code"
-        fieldLabel="name"
-        selected={region}
-        setSelected={(value) => handleChange({ region: value })}
-        label="Регион"
-        placeholder="Выберите регион"
-      />
-    </div>
-  </div>
-);

package/src/components/ApplicationForm/ApplicationFormCredit.tsx

@@ -1,18 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBranches } from '../../hooks/useBranches';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { useGetRegions } from '../SafeDepositRental/useGetRegions';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
-import { MIN_CREDIT_AMOUNT, MIN_CREDIT_TERM } from './CreditParameters';
+import { MIN_CREDIT_AMOUNT } from './CreditParameters';
 import { Footnote } from './Footnote';
-import { normalizeSelectedRegion } from './normalizeSelectedRegion';
-import { renderBankOffices } from './renderBankOffices';
+import { renderCreditDataOrganization } from './renderCreditDataOrganization';
 import { renderCreditParameters } from './renderCreditParameters';
-import { renderDataOrganization } from './renderDataOrganization';
+import { renderRegionDepartment } from './renderRegionDepartment';
 import { renderSubmitButton } from './renderSubmitButton';
-import { useFormHandlers } from './useFormHandlers';
+import { useForm } from './useForm';
 
 export interface CreditFormState {
   amount: number;
@@ -27,76 +25,89 @@ export interface CreditFormState {
   annualRevenue: string;
 }
 
-export const ApplicationFormCredit = JSX<ApplicationFormsProps>((props) => {
-  const { button, link, handleSubmit } = props;
+const initialFormState = {
+  amount: MIN_CREDIT_AMOUNT,
+  term: 12,
+  fullName: '',
+  inn: '',
+  name: '',
+  phone: '',
+  mail: '',
+  region: '',
+  department: '',
+  annualRevenue: '',
+};
 
-  const [formState, setFormState] = useState<CreditFormState>({
-    amount: MIN_CREDIT_AMOUNT,
-    term: MIN_CREDIT_TERM,
-    fullName: '',
-    inn: '',
-    name: '',
-    phone: '',
-    mail: '',
-    region: '',
-    department: '',
-    annualRevenue: '',
-  });
+const errorsInitialState = {
+  annualRevenue: '',
+  inn: '',
+  name: '',
+  phone: '',
+  region: '',
+  department: '',
+};
 
-  const { amount, term, fullName, inn, name, phone, mail, region, department, annualRevenue } =
-    formState;
+export const ApplicationFormCredit = JSX<ApplicationFormsProps>(
+  ({ button, link, handleSubmit }) => {
+    const regions = useGetRegions();
 
-  const regions = useGetRegions();
+    const { formState, errors, handleChange, handleChangeErrors, sendForm } =
+      useForm<CreditFormState>({
+        initialFormState,
+        errorsInitialState,
+        handleSubmit,
+      });
 
-  const { handleChange } = useFormHandlers<CreditFormState>({
-    setFormState,
-  });
+    const { amount, term, fullName, inn, name, phone, mail, region, department, annualRevenue } =
+      formState;
 
-  const selectedRegion = normalizeSelectedRegion(region, regions);
+    const branches = useBranches(region).filter((branch) => branch.address);
 
-  const branches = useBranches(selectedRegion).filter((branch) => branch.address);
+    const onSubmit = (e: PreventableEvent) => {
+      e.preventDefault();
 
-  useEffect(() => {
-    handleChange({
-      department: '',
-    });
-  }, [formState.region, handleChange]);
-
-  const onSubmit = async (e: PreventableEvent) => {
-    e.preventDefault();
-
-    const partnerComments = `Сумма=${amount}/Срок=${term}/Выручка=${annualRevenue}`;
-
-    handleSubmit &&
-      (await handleSubmit({
+      sendForm({
         typeForm: 'cred',
         fullName,
         inn,
         name,
         phone,
         mail,
-        region: regions.find((_) => _.code === selectedRegion)?.name || '',
+        region: regions.find((_) => _.code === region)?.name || '',
         department: branches.find((_) => _.branchCode === department)?.address || '',
-        partnerComments,
-      }));
-  };
+        partnerComments: `Сумма=${amount}/Срок=${term}/Выручка=${annualRevenue}`,
+      });
+    };
 
-  return (
-    <form onSubmit={onSubmit} className="container">
-      <Heading headingType="h6" title="Параметры кредита" className="text-center mb-4" />
-      {renderCreditParameters({ amount, term, handleChange })}
-      <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
-      {renderDataOrganization({ fullName, inn, name, phone, mail, annualRevenue, handleChange })}
-      <Heading headingType="h6" title="Офис Банка" className="text-center mb-4" />
-      {renderBankOffices({
-        regions,
-        region: selectedRegion,
-        branches,
-        department,
-        handleChange,
-      })}
-      {renderSubmitButton(button, 'mb-4')}
-      <Footnote link={link} />
-    </form>
-  );
-});
+    return (
+      <form onSubmit={onSubmit} className="container">
+        <Heading headingType="h6" title="Параметры кредита" className="text-center mb-4" />
+        {renderCreditParameters({ amount, term, handleChange })}
+        <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
+        {renderCreditDataOrganization({
+          fullName,
+          inn,
+          name,
+          phone,
+          mail,
+          annualRevenue,
+          handleChange,
+          errors,
+          handleChangeErrors,
+        })}
+        <Heading headingType="h6" title="Офис банка" className="text-center mb-4" />
+        {renderRegionDepartment({
+          regions,
+          region,
+          branches,
+          department,
+          handleChange,
+          errors,
+          handleChangeErrors,
+        })}
+        {renderSubmitButton(button, 'mb-4')}
+        <Footnote link={link} />
+      </form>
+    );
+  },
+);