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

package/src/components/ApplicationForm/InputControl.tsx

@@ -0,0 +1,35 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Input } from '../../ui-kit/Input/Input';
+import { Text } from '../../ui-kit/Text/Text';
+
+interface InputControlProps {
+  className: string;
+  label: string;
+  value: string;
+  error?: string;
+  onChange: (value: string) => void;
+  onBlur?: (value: string) => void;
+}
+
+export const InputControl = JSX<InputControlProps>(
+  ({ className, label, value, error, onChange, onBlur }) => {
+    return (
+      <div className={className}>
+        <Input
+          type="text"
+          aria-label={label}
+          label={label}
+          valid={Boolean(!error)}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+        />
+        <div className="h-2">
+          <Text size="text-xs-light" color="text-error">
+            {error ? error : null}
+          </Text>
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/ApplicationForm/SelectControl.tsx

@@ -0,0 +1,54 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { OptionProps, Select } from '../../ui-kit/Select/Select';
+import { Text } from '../../ui-kit/Text/Text';
+import type { Currency } from '../ExchangeRateTile/CurrencyProps';
+
+interface SelectControlProps {
+  data: Record<string, any>[];
+  fieldLabel: string;
+  fieldValue?: string;
+  selected: string;
+  setSelected: (value: string) => void;
+  label: string;
+  placeholder?: string;
+  error?: string;
+  onValidate?: (value: string) => void;
+}
+
+export const SelectControl = JSX<SelectControlProps>(
+  ({
+    data,
+    fieldLabel,
+    fieldValue,
+    selected,
+    placeholder = '',
+    setSelected,
+    label,
+    error,
+    onValidate,
+  }) => {
+    const dataFormat: OptionProps[] = data
+      .filter(Boolean)
+      .map((_) => ({ key: _?.[fieldValue || fieldLabel], text: _?.[fieldLabel] }));
+    const selectedObj = dataFormat.find((_) => _.key === selected);
+
+    return (
+      <div>
+        <Select
+          options={dataFormat}
+          label={label}
+          valid={Boolean(!error)}
+          placeholder={placeholder || selected}
+          onChange={(_) => setSelected(_.key as Currency)}
+          value={selectedObj}
+          onValidate={onValidate}
+        />
+        <div className="h-2">
+          <Text size="text-xs-light" color="text-error">
+            {error ? error : null}
+          </Text>
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/ApplicationForm/models.ts

@@ -5,3 +5,9 @@ export interface Select {
 }
 
 export type HandleFormStateChange<T> = (state: Partial<T>) => void;
+
+export interface DataOrganization<T> {
+  handleChange: HandleFormStateChange<T>;
+  errors: Record<string, string>;
+  handleChangeErrors: (state: any) => void;
+}

package/src/components/ApplicationForm/normalizeSelected.ts

@@ -0,0 +1,4 @@
+import type { Select } from './models';
+
+export const normalizeSelected = (field: string, selected: string, options: Select[]): string =>
+  !selected && options?.length && options[0]?.[field] ? options[0][field] : selected;

package/src/components/ApplicationForm/renderAcquiringDataOrganization.tsx

@@ -0,0 +1,60 @@
+import { AcquiringFormState } from './ApplicationFormAcquiring';
+import { InputControl } from './InputControl';
+import type { DataOrganization } from './models';
+import { validate } from './validate';
+
+interface RenderAcquiringDataOrganizationProps extends DataOrganization<AcquiringFormState> {
+  fullName: string;
+  inn: string;
+  name: string;
+  phone: string;
+}
+
+export const renderAcquiringDataOrganization = ({
+  fullName,
+  inn,
+  name,
+  phone,
+  handleChange,
+  errors,
+  handleChangeErrors,
+}: RenderAcquiringDataOrganizationProps) => (
+  <div className="flex justify-between gap-5 mb-5">
+    <div className="w-1/2">
+      <InputControl
+        className="shrink-0 text-l w-full mb-3"
+        label="Наименование организации"
+        error={errors['fullName']}
+        value={fullName}
+        onChange={(value) => handleChange({ fullName: value })}
+        onBlur={(value) => handleChangeErrors({ fullName: validate('fullName', value) })}
+      />
+      <InputControl
+        className="shrink-0 text-l w-full mb-3"
+        label="Контактное лицо"
+        error={errors['name']}
+        value={name}
+        onChange={(value) => handleChange({ name: value })}
+        onBlur={(value) => handleChangeErrors({ name: validate('name', value) })}
+      />
+    </div>
+    <div className="w-1/2">
+      <InputControl
+        className="shrink-0 text-l w-full mb-3"
+        label="ИНН"
+        error={errors['inn']}
+        value={inn}
+        onChange={(value) => handleChange({ inn: value })}
+        onBlur={(value) => handleChangeErrors({ inn: validate('inn', value) })}
+      />
+      <InputControl
+        className="shrink-0 text-l w-full mb-3"
+        label="Телефон"
+        error={errors['phone']}
+        value={phone}
+        onChange={(value) => handleChange({ phone: value })}
+        onBlur={(value) => handleChangeErrors({ phone: validate('phone', value) })}
+      />
+    </div>
+  </div>
+);

package/{mobile/src/components/ApplicationForm/renderSelects.tsx → src/components/ApplicationForm/renderAcquiringRegion.tsx}

@@ -1,35 +1,51 @@
-import type { AcquiringFormState } from './ApplicationFormAcquiring';
-import { WrapperSelect } from './WrapperSelect';
 import { ACQUIRING_TYPES } from './acquiringTypes';
+import type { AcquiringFormState } from './ApplicationFormAcquiring';
 import type { HandleFormStateChange, Select } from './models';
+import { SelectControl } from './SelectControl';
+import { validate } from './validate';
 
-interface SelectsProps {
+interface RenderAcquiringRegionProps {
   acquiringType: string;
   regions: Select[];
   region: string;
   handleChange: HandleFormStateChange<AcquiringFormState>;
+  errors: Record<string, string>;
+  handleChangeErrors: (state: any) => void;
 }
 
-export const renderSelects = ({ acquiringType, regions, region, handleChange }: SelectsProps) => (
+export const renderAcquiringRegion = ({
+  acquiringType,
+  regions,
+  region,
+  handleChange,
+  errors,
+  handleChangeErrors,
+}: RenderAcquiringRegionProps) => (
   <div className="flex justify-between gap-5 mb-7">
     <div className="w-1/2">
-      <WrapperSelect
+      <SelectControl
         data={ACQUIRING_TYPES}
         fieldValue="name"
         fieldLabel="name"
+        error={errors['acquiringType']}
         selected={acquiringType}
         setSelected={(value) => handleChange({ acquiringType: value })}
+        onValidate={(value) =>
+          handleChangeErrors({ acquiringType: validate('acquiringType', value) })
+        }
         label="Вид эквайринга"
         placeholder="Выберите эквайринг"
       />
     </div>
     <div className="w-1/2">
-      <WrapperSelect
+      <SelectControl
         data={regions}
         fieldValue="code"
         fieldLabel="name"
+        error={errors['region']}
         selected={region}
         setSelected={(value) => handleChange({ region: value })}
+        onValidate={(value) => handleChangeErrors({ region: validate('region', value) })}
         label="Адрес"
         placeholder="Выберите адрес"
       />

package/src/components/ApplicationForm/renderBusinessCardDataOrganization.tsx

@@ -0,0 +1,60 @@
+import type { BusinessCardFormState } from './ApplicationFormBusinessCard';
+import { InputControl } from './InputControl';
+import type { DataOrganization } from './models';
+import { validate } from './validate';
+
+interface RenderBusinessCardDataOrganizationProps extends DataOrganization<BusinessCardFormState> {
+  name: string;
+  phone: string;
+  mail: string;
+  inn: string;
+}
+
+export const renderBusinessCardDataOrganization = ({
+  name,
+  phone,
+  mail,
+  inn,
+  handleChange,
+  errors,
+  handleChangeErrors,
+}: RenderBusinessCardDataOrganizationProps) => (
+  <div className="flex justify-between gap-5">
+    <div className="w-1/2">
+      <InputControl
+        className="shrink-0 text-l w-full mb-3"
+        label="Контактное лицо"
+        error={errors['name']}
+        value={name}
+        onChange={(value) => handleChange({ name: value })}
+        onBlur={(value) => handleChangeErrors({ name: validate('name', value) })}
+      />
+      <InputControl
+        className="shrink-0 text-l w-full mb-3"
+        label="ИНН"
+        error={errors['inn']}
+        value={inn}
+        onChange={(value) => handleChange({ inn: value })}
+        onBlur={(value) => handleChangeErrors({ inn: validate('inn', value) })}
+      />
+    </div>
+    <div className="w-1/2">
+      <InputControl
+        className="shrink-0 text-l w-full mb-3"
+        label="Телефон"
+        error={errors['phone']}
+        value={phone}
+        onChange={(value) => handleChange({ phone: value })}
+        onBlur={(value) => handleChangeErrors({ phone: validate('phone', value) })}
+      />
+      <InputControl
+        className="shrink-0 text-l w-full mb-3"
+        label="Электронная почта"
+        error={errors['mail']}
+        value={mail}
+        onChange={(value) => handleChange({ mail: value })}
+        onBlur={(value) => handleChangeErrors({ mail: validate('mail', value) })}
+      />
+    </div>
+  </div>
+);

package/src/components/ApplicationForm/renderCreditDataOrganization.tsx

@@ -0,0 +1,76 @@
+import type { CreditFormState } from './ApplicationFormCredit';
+import { InputControl } from './InputControl';
+import type { DataOrganization } from './models';
+import { validate } from './validate';
+
+interface RenderCreditDataOrganizationProps extends DataOrganization<CreditFormState> {
+  fullName: string;
+  inn: string;
+  name: string;
+  phone: string;
+  mail: string;
+  annualRevenue: string;
+}
+
+export const renderCreditDataOrganization = ({
+  fullName,
+  inn,
+  name,
+  phone,
+  mail,
+  annualRevenue,
+  handleChange,
+  errors,
+  handleChangeErrors,
+}: RenderCreditDataOrganizationProps) => (
+  <div className="flex justify-between gap-5 mb-7">
+    <div className="w-1/2">
+      <InputControl
+        className="shrink-0 text-l w-full mb-3"
+        label="Наименование организации"
+        value={fullName}
+        onChange={(value) => handleChange({ fullName: value })}
+      />
+      <InputControl
+        className="shrink-0 text-l w-full mb-3"
+        label="ИНН"
+        error={errors['inn']}
+        value={inn}
+        onChange={(value) => handleChange({ inn: value })}
+        onBlur={(value) => handleChangeErrors({ inn: validate('inn', value) })}
+      />
+      <InputControl
+        className="shrink-0 text-l w-full mb-3"
+        label="Телефон"
+        error={errors['phone']}
+        value={phone}
+        onChange={(value) => handleChange({ phone: value })}
+        onBlur={(value) => handleChangeErrors({ phone: validate('phone', value) })}
+      />
+    </div>
+    <div className="w-1/2">
+      <InputControl
+        className="shrink-0 text-l w-full mb-3"
+        label="Годовая выручка, ₽"
+        error={errors['annualRevenue']}
+        value={annualRevenue}
+        onChange={(value) => handleChange({ annualRevenue: value })}
+        onBlur={(value) => handleChangeErrors({ annualRevenue: validate('annualRevenue', value) })}
+      />
+      <InputControl
+        className="shrink-0 text-l w-full mb-3"
+        label="Контактное лицо"
+        error={errors['name']}
+        value={name}
+        onChange={(value) => handleChange({ name: value })}
+        onBlur={(value) => handleChangeErrors({ name: validate('name', value) })}
+      />
+      <InputControl
+        className="shrink-0 text-l w-full mb-3"
+        label="Электронная почта"
+        value={mail}
+        onChange={(value) => handleChange({ mail: value })}
+      />
+    </div>
+  </div>
+);

package/src/components/ApplicationForm/renderRegion.tsx

@@ -0,0 +1,36 @@
+import { BusinessCardFormState } from './ApplicationFormBusinessCard';
+import { HandleFormStateChange, Select } from './models';
+import { SelectControl } from './SelectControl';
+import { validate } from './validate';
+
+interface RenderRegionProps {
+  regions: Select[];
+  region: string;
+  handleChange: HandleFormStateChange<BusinessCardFormState>;
+  errors: Record<string, string>;
+  handleChangeErrors: (state: any) => void;
+}
+
+export const renderRegion = ({
+  regions,
+  region,
+  handleChange,
+  errors,
+  handleChangeErrors,
+}: RenderRegionProps) => (
+  <div className="flex justify-between gap-5 mb-5">
+    <div className="w-full">
+      <SelectControl
+        data={regions}
+        fieldValue="code"
+        fieldLabel="name"
+        error={errors['region']}
+        selected={region}
+        setSelected={(value) => handleChange({ region: value })}
+        onValidate={(value) => handleChangeErrors({ region: validate('region', value) })}
+        label="Регион"
+        placeholder="Выберите регион"
+      />
+    </div>
+  </div>
+);

package/{mobile/src/components/ApplicationForm/renderBankOffices.tsx → src/components/ApplicationForm/renderRegionDepartment.tsx}

@@ -1,42 +1,51 @@
 import type { Branch } from '../SafeDepositRental/useSafeBoxes';
 import type { CreditFormState } from './ApplicationFormCredit';
 import type { HandleFormStateChange, Select } from './models';
-import { WrapperSelect } from './WrapperSelect';
+import { SelectControl } from './SelectControl';
+import { validate } from './validate';
 
-interface RenderBankOfficesProps {
+interface RenderRegionDepartmentProps {
   regions: Select[];
   region: string;
   branches: Branch[];
   department: string;
   handleChange: HandleFormStateChange<CreditFormState>;
+  errors: Record<string, string>;
+  handleChangeErrors: (state: any) => void;
 }
 
-export const renderBankOffices = ({
+export const renderRegionDepartment = ({
   regions,
   region,
   branches,
   department,
   handleChange,
-}: RenderBankOfficesProps) => (
+  errors,
+  handleChangeErrors,
+}: RenderRegionDepartmentProps) => (
   <div className="flex justify-between gap-5 mb-7">
     <div className="w-1/2">
-      <WrapperSelect
+      <SelectControl
         data={regions}
         fieldValue="code"
         fieldLabel="name"
+        error={errors['region']}
         selected={region}
-        setSelected={(value) => handleChange({ region: value })}
+        setSelected={(value) => handleChange({ region: value, department: '' })}
+        onValidate={(value) => handleChangeErrors({ region: validate('region', value) })}
         label="Регион"
         placeholder="Выберите регион"
       />
     </div>
     <div className="w-1/2">
-      <WrapperSelect
+      <SelectControl
         data={branches}
         fieldValue="branchCode"
         fieldLabel="address"
+        error={errors['department']}
         selected={department}
         setSelected={(value) => handleChange({ department: value })}
+        onValidate={(value) => handleChangeErrors({ department: validate('department', value) })}
         label="Адрес"
         placeholder="Выберите адрес"
       />

package/src/components/ApplicationForm/renderWedDataOrganization.tsx

@@ -0,0 +1,68 @@
+import type { WedFormState } from './ApplicationFormWed';
+import { InputControl } from './InputControl';
+import type { DataOrganization } from './models';
+import { validate } from './validate';
+
+interface RenderWedDataOrganizationProps extends DataOrganization<WedFormState> {
+  fullName: string;
+  name: string;
+  phone: string;
+  mail: string;
+}
+
+export const renderWedDataOrganization = ({
+  fullName,
+  name,
+  phone,
+  mail,
+  handleChange,
+  errors,
+  handleChangeErrors,
+}: RenderWedDataOrganizationProps) => (
+  <div>
+    <div className="flex justify-between gap-5">
+      <div className="w-1/2">
+        <InputControl
+          className="shrink-0 text-l w-full mb-3"
+          label="Наименование организации"
+          error={errors['fullName']}
+          value={fullName}
+          onChange={(value) => handleChange({ fullName: value })}
+          onBlur={(value) => handleChangeErrors({ fullName: validate('fullName', value) })}
+        />
+      </div>
+      <div className="w-1/2">
+        <InputControl
+          className="shrink-0 text-l w-full mb-3"
+          label="ФИО"
+          error={errors['name']}
+          value={name}
+          onChange={(value) => handleChange({ name: value })}
+          onBlur={(value) => handleChangeErrors({ name: validate('name', value) })}
+        />
+      </div>
+    </div>
+    <div className="flex justify-between gap-5 mb-7">
+      <div className="w-1/2">
+        <InputControl
+          className="shrink-0 text-l w-full mb-3"
+          label="Телефон"
+          error={errors['phone']}
+          value={phone}
+          onChange={(value) => handleChange({ phone: value })}
+          onBlur={(value) => handleChangeErrors({ phone: validate('phone', value) })}
+        />
+      </div>
+      <div className="w-1/2">
+        <InputControl
+          className="shrink-0 text-l w-full mb-3"
+          label="Электронная почта"
+          error={errors['mail']}
+          value={mail}
+          onChange={(value) => handleChange({ mail: value })}
+          onBlur={(value) => handleChangeErrors({ mail: validate('mail', value) })}
+        />
+      </div>
+    </div>
+  </div>
+);

package/src/components/ApplicationForm/useForm.ts

@@ -0,0 +1,65 @@
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { HandleFormStateChange } from './models';
+import { validate } from './validate';
+
+interface UseFormHandlersProps<T> {
+  initialFormState: Required<T>;
+  errorsInitialState?: Partial<T>;
+  handleSubmit?: (data: Record<string, string>) => Promise<string>;
+}
+
+export const useForm = <T>({
+  initialFormState,
+  errorsInitialState,
+  handleSubmit,
+}: UseFormHandlersProps<T>) => {
+  const [formState, setFormState] = useState(initialFormState);
+
+  const [errors, setErrors] = useState(errorsInitialState || {});
+
+  const handleChange: HandleFormStateChange<T> = useCallback(
+    (state) => setFormState((oldState) => ({ ...oldState, ...state })),
+    [],
+  );
+
+  const handleChangeErrors = useCallback(
+    (state) => setErrors((oldState) => ({ ...oldState, ...state })),
+    [],
+  );
+
+  const sendForm = useCallback(
+    async (sendData: Record<string, string>) => {
+      const errorsTemp: string[] = [];
+
+      const validateData: Record<string, string> = Object.keys(formState)
+        .filter((_) => Object.keys(errors).includes(_))
+        .reduce((obj, key) => {
+          obj[key] = formState[key];
+
+          return obj;
+        }, {});
+
+      for (const [key, value] of Object.entries(validateData)) {
+        const error = validate(key, value);
+
+        errorsTemp.push(error);
+        handleChangeErrors({ [key]: error });
+      }
+
+      if (errorsTemp.some((_) => _.length !== 0)) {
+        return;
+      }
+
+      handleSubmit && (await handleSubmit(sendData));
+    },
+    [formState],
+  );
+
+  return {
+    formState,
+    handleChange,
+    errors,
+    handleChangeErrors,
+    sendForm,
+  };
+};

package/src/components/ApplicationForm/validate.ts

@@ -0,0 +1,22 @@
+const ERROR_EMPTY = 'Некорректно заполненное поле';
+
+export const validate = (key: string, value: string) => {
+  switch (key) {
+    case 'name':
+      return isName(value);
+    case 'inn':
+      return isTin(value);
+    case 'mail':
+      return isEmpty(value);
+    case 'phone':
+      return isEmpty(value);
+    default:
+      return isEmpty(value);
+  }
+};
+
+const isEmpty = (value: string) => (value ? '' : ERROR_EMPTY);
+
+const isName = (value: string) => (value.length > 1 ? '' : ERROR_EMPTY);
+
+const isTin = (value: string) => (value.length === 10 || value.length === 12 ? '' : ERROR_EMPTY);

package/src/components/Blocks.ts

@@ -22,6 +22,7 @@ import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ContactsBlock } from './ContactsBlock/ContactsBlock';
 import { ErrorBlock } from './ErrorBlock/ErrorBlock';
+import { ExchangeRateOffice } from './ExchangeRateOffice/ExchangeRateOffice';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Filtration } from './Filtration/Filtration';
 import { Footer } from './Footer/Footer';
@@ -111,4 +112,5 @@ export const Blocks: BlocksRegistry = {
   Tile,
   VerticalLayout,
   Video,
+  ExchangeRateOffice,
 };

package/src/components/Bonus/Bonus.tsx

@@ -3,6 +3,8 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
 import { Headline } from '../Headline/Headline';
 import type { BonusContent, BonusCountDef, BonusImageDef } from './BonusContent';
 
@@ -22,14 +24,17 @@ export const Bonus = JSX<BonusProps>((props) => {
                   key={String(i)}
                   className="flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0"
                 >
-                  <div className="flex justify-between w-full">
-                    <div className="flex flex-col justify-between mr-4">
-                      <div>
-                        <div className="text-h4">{_.title}</div>
-                        <div className="text-xl-light mt-2 max-w-[488px]">{_.description}</div>
-                      </div>
-                      {renderButtonsSection(_?.buttons)}
+                  {_?.title ? <Text size="text-h4">{_.title}</Text> : null}
+                  {_?.description ? (
+                    <div className="mt-2">
+                      <Paragraph size="text-xl" font="font-light">
+                        {_.description}
+                      </Paragraph>
                     </div>
+                  ) : null}
+
+                  <div className="flex justify-between items-end mt-3">
+                    {renderButtonsSection(_?.buttons)}
                     {_.bonusItemContent?.bonusType
                       ? renderBonusItemContent(_.bonusItemContent)
                       : null}

package/src/components/Carousel/Carousel.example.json

@@ -3,5 +3,6 @@
   "isBlur": false,
   "arrowsPadded": true,
   "isCycle": false,
-  "isPadding": true
+  "isPadding": true,
+  "isAlignCenter": false
 }