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

package/{src/components/ApplicationForm/renderSelects.tsx → mobile/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/mobile/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/mobile/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/mobile/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/{src/components/ApplicationForm/renderBankOffices.tsx → mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/components/Carousel/Carousel.example.json

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

package/mobile/src/components/Carousel/Carousel.tsx

@@ -5,11 +5,11 @@ import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import { SwipeListControlDots } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
 import type { CarouselContent } from './CarouselContent';
 import { CarouselScrollButtons } from './CarouselScrollButtons';
-import { SwipeListControlDots } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -28,6 +28,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
     arrowsPadded = true,
     isPadding = true,
     showDots = false,
+    isAlignCenter = false,
     ...rest
   }) => {
     const { blocks: childBlocks = [] } = rest.block || {};
@@ -53,7 +54,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
         )}
         {...rest}
       >
-        <div className="relative max-w-full">
+        <div className={style(getAlignStyle(isAlignCenter), 'relative max-w-full')}>
           <SwipeListContainer
             containerRef={containerRef}
             visibleItemCount={visibleItemCount}
@@ -105,6 +106,9 @@ Carousel.childrenTypes = [
 
 const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-12' : '');
 
+const getAlignStyle = (isAlignCenter: boolean): string =>
+  isAlignCenter ? 'flex justify-center' : '';
+
 const renderDots = (
   containerRef: { current: HTMLDivElement | null },
   dotsActiveIndex: number,

package/mobile/src/components/Carousel/CarouselContent.ts

@@ -17,4 +17,6 @@ export type CarouselContent = UniBlockContent & {
   isCyclic?: boolean;
   /** @title Внутренний отступ  */
   isPadding?: boolean;
+  /** @title Выравнивать по центру  */
+  isAlignCenter?: boolean;
 };

package/mobile/src/components/CarouselRichTextCard/CarouselRichTextCard.tsx

@@ -8,14 +8,9 @@ import type { CarouselRichTextCardContent } from './CarouselRichTextCardContent'
 export interface CarouselRichTextCardProps extends CarouselRichTextCardContent, UniBlockProps {}
 
 export const CarouselRichTextCard = JSX<CarouselRichTextCardProps>(
-  ({ className = '', __html, richVersion = 'striped', ...rest }) => {
-    return (
-      <BlockWrapper
-        className={style('p-9 border border-gray min-w-96', richVersion, className)}
-        {...rest}
-      >
-        <RichText __html={__html} />
-      </BlockWrapper>
-    );
-  },
+  ({ className = '', __html, richVersion = 'striped', ...rest }) => (
+    <BlockWrapper className={style('p-9 border border-gray min-w-96', className)} {...rest}>
+      <RichText __html={__html} richVersion={richVersion} />
+    </BlockWrapper>
+  ),
 );

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -29,7 +29,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     return (
       <BlockWrapper
         className={style(
-          'relative border border-gray min-w-[322px] p-8 flex flex-col',
+          'relative border border-gray p-8 flex flex-col',
           getHitStyle(isHighlighting),
           className,
         )}
@@ -63,7 +63,7 @@ const renderIconBlock = (icon?: Picture) => (
 );
 
 const getHitStyle = (isHighlighting?: boolean): string =>
-  isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-7';
+  isHighlighting ? 'mt-8 pt-20' : 'mt-20 pt-8';
 
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button

package/mobile/src/components/ExchangeRateOffice/Currencies.ts

@@ -0,0 +1,8 @@
+export enum Currencies {
+  EUR = 'EUR',
+  USD = 'USD',
+  GBP = 'GBP',
+  AUD = 'AUD',
+  CNY = 'CNY',
+  RUB = 'RUB',
+}

package/mobile/src/components/ExchangeRateOffice/ExchangeRateOffice.example.json

@@ -0,0 +1,32 @@
+{
+  "content": {
+    "officeName": "Московский региональный филиал ЦРМБ",
+    "currencies": [
+      {
+        "id": 1,
+        "title": "USD",
+        "buyPrice": 104.0741,
+        "sellPrice": 103.1618,
+        "buyDifference": -3.74,
+        "sellDifference": -0.31,
+        "buyOfficeName": "Моковский региональный филиал ЦРМБ",
+        "buyBonusOfficeName": "Дополнительный офис г. Москва (ул. Арбат)",
+        "sellOfficeName": "Дополнительный офис г. Москва (ул. Новоясеньская)",
+        "sellBonusOfficeName": "Дополнительный офис г. Москва (Волгоградский проспект)"
+      },
+      {
+        "id": 2,
+        "title": "EUR",
+        "buyPrice": 114.7833,
+        "sellPrice": 113.2613,
+        "buyDifference": 1.65,
+        "sellDifference": -0.41,
+        "buyOfficeName": "Моковский региональный филиал ЦРМБ",
+        "buyBonusOfficeName": "Дополнительный офис г. Москва (ул. Арбат)",
+        "sellOfficeName": "Дополнительный офис г. Москва (ул. Новоясеньская)",
+        "sellBonusOfficeName": "Дополнительный офис г. Москва (Волгоградский проспект)"
+      }
+    ],
+    "actuality": "Актуально на 12:36, 12 июля 2022"
+  }
+}