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

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/Calculator/useDepositCalculatorParams.ts

@@ -112,4 +112,4 @@ const checkRowByParam = ({ row, userInputParams, paramKey, isExclude }: CheckRow
   isExclude || userInputParams[paramKey] === row[paramKey];
 
 const getMiddleMonth = (minMonths: number, maxMonths: number): number =>
-  Math.round((maxMonths - minMonths) / 2);
+  minMonths + Math.round((maxMonths - minMonths) / 2);

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"
+  }
+}

package/mobile/src/components/ExchangeRateOffice/ExchangeRateOffice.tsx

@@ -0,0 +1,60 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import type { CurrencyInformation, ExchangeRateOfficeContent } from './ExchangeRateOfficeContent';
+import { renderCurrencyRow } from './renderCurrencies';
+import { renderTableHeader } from './renderTableHeader';
+
+export interface ExchangeRateOfficeProps extends ExchangeRateOfficeContent, UniBlockProps {}
+
+export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
+  ({ className = '', currencies = [], actuality = '', officeName = '', ...rest }) => {
+    const fourRates: CurrencyInformation[] = topNRates(currencies, 4);
+
+    return (
+      <BlockWrapper
+        className={style('font-sans text-primary-text py-10 bg-white', className)}
+        {...rest}
+      >
+        <div className="flex flex-row flex-grow-0 justify-between mx-10 mb-8">
+          <Heading
+            headingType="h4"
+            title={'Курс обмена валют в ' + officeName}
+            className="whitespace-pre-wrap text-h4 mb-5"
+          />
+          <div className="pl-11">
+            <Text size="text-m-light" align="text-left" color="text-secondary-text">
+              {actuality}
+            </Text>
+          </div>
+        </div>
+        <div className="flex flex-row ml-8 mr-14 pt-4 text-left">
+          {fourRates.length > 0 ? (
+            <table className={style('h-fit w-fit', className)}>
+              <thead>
+                <tr>
+                  <th>
+                    <Text size="text-m-light" align="text-left" color="text-secondary-text">
+                      Валюта
+                    </Text>
+                  </th>
+                  {renderTableHeader('Купить')}
+                  {renderTableHeader('Продать')}
+                  {renderTableHeader('Лучшая покупка')}
+                  {renderTableHeader('Лучшая продажа')}
+                </tr>
+              </thead>
+              <tbody>{fourRates.map((item) => renderCurrencyRow(item))}</tbody>
+            </table>
+          ) : null}
+        </div>
+      </BlockWrapper>
+    );
+  },
+);
+
+const topNRates = (rates: CurrencyInformation[], n: number) =>
+  rates.sort((a, b) => Number(a.id) - Number(b.id)).slice(0, n);

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

@@ -0,0 +1 @@
+{}

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

@@ -0,0 +1,36 @@
+/**
+ * @title Информация об одной валюте
+ */
+export interface CurrencyInformation {
+  /** @title Номер */
+  id?: number;
+  /** @title Название */
+  title?: string;
+  /** @title Покупная цена */
+  buyPrice?: number;
+  /** @title Цена продажи */
+  sellPrice?: number;
+  /** @title Разница покупки */
+  buyDifference?: number;
+  /** @title Разница продажи */
+  sellDifference?: number;
+  /** @title Имя основного офиса для покупки */
+  buyOfficeName?: string;
+  /** @title Другие офисы покупки */
+  buyBonusOfficeName?: string;
+  /** @title Имя основного офиса для продажи*/
+  sellOfficeName?: string;
+  /** @title Другие офисы продажи */
+  sellBonusOfficeName?: string;
+}
+/**
+ * @title Курсы валют офиса
+ */
+export interface ExchangeRateOfficeContent {
+  /** @title Имя офиса */
+  officeName?: string;
+  /** @title Список валют */
+  currencies?: CurrencyInformation[];
+  /** @title Актуальность информации */
+  actuality?: string;
+}

package/mobile/src/components/ExchangeRateOffice/renderCurrencies.tsx

@@ -0,0 +1,73 @@
+import type { IconName } from '../../icons/IconName';
+import { Img } from '../../ui-kit/Img/Img';
+import { style } from '../../utils/style';
+import { Currencies } from './Currencies';
+import type { CurrencyInformation } from './ExchangeRateOfficeContent';
+
+const CURRENCY_ICONS_MAP: Record<keyof typeof Currencies, IconName> = {
+  USD: 'DollarIcon',
+  EUR: 'EuroIcon',
+  GBP: 'DollarIcon',
+  AUD: 'DollarIcon',
+  CNY: 'DollarIcon',
+  RUB: 'RoundRubleIcon',
+};
+
+export const renderCurrencyRow = ({
+  title,
+  buyPrice,
+  buyDifference,
+  sellPrice,
+  sellDifference,
+  buyOfficeName,
+  sellOfficeName,
+}: CurrencyInformation) => {
+  return (
+    <tr key={title} className="pb-1 text-h6">
+      <td className="pt-4">
+        <div className="flex items-center">
+          {title ? (
+            <Img image={{ icon: CURRENCY_ICONS_MAP[title] }} width="24" height="24" />
+          ) : null}
+          <span className="ml-2">{title}</span>
+        </div>
+      </td>
+      {renderCurrency(buyPrice, buyDifference)}
+      {renderCurrency(sellPrice, sellDifference)}
+      {renderOffice(buyPrice, buyOfficeName)}
+      {renderOffice(sellPrice, sellOfficeName)}
+    </tr>
+  );
+};
+
+const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(value) : '');
+
+const renderCurrency = (price?: number, difference?: number) => {
+  return (
+    <td className="pt-4 pl-11">
+      <div>{formatCurrency(price)}</div>
+      <div
+        className={style(
+          'font-normal text-sm text-secondary-text',
+          (difference || 0) >= 0 ? 'text-green' : 'text-red',
+        )}
+      >
+        {formatCurrency(difference)}
+      </div>
+    </td>
+  );
+};
+
+const renderOffice = (price?: number, officeName = '') => {
+  return (
+    <td className="pt-4 pl-11">
+      <div>{formatCurrency(price)}</div>
+      <div className="font-normal text-sm text-green">{officeName}</div>
+    </td>
+  );
+};
+
+const currencyNumberFormat = new Intl.NumberFormat('ru', {
+  style: 'currency',
+  currency: Currencies.RUB,
+});

package/mobile/src/components/ExchangeRateOffice/renderTableHeader.tsx

@@ -0,0 +1,11 @@
+import { Text } from '../../ui-kit/Text/Text';
+
+export const renderTableHeader = (title: string) => {
+  return (
+    <th className="pl-11">
+      <Text size="text-m-light" align="text-left" color="text-secondary-text">
+        {title}
+      </Text>
+    </th>
+  );
+};

package/mobile/src/components/Footer/TextInformationLink.tsx

@@ -10,7 +10,7 @@ interface TextInformationLinkProps extends LinkProps {
 
 export const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
   ({ className = '', index, ...rest }) => {
-    const link = useLink();
+    const link = useLink({ isRemote: true });
     const { href, target, text, onClick } = link(rest);
 
     return (

package/mobile/src/components/RichTextBlock/RichTextBlock.tsx

@@ -7,11 +7,11 @@ import type { RichTextBlockContent } from './RichTextBlockContent';
 interface RichTextBlockProps extends RichTextBlockContent, UniBlockProps {}
 
 export const RichTextBlock = JSX<RichTextBlockProps>((props) => {
-  const { __html, ...rest } = props;
+  const { __html, richVersion, ...rest } = props;
 
   return (
     <BlockWrapper {...rest}>
-      <RichText __html={__html} />
+      <RichText __html={__html} richVersion={richVersion} />
     </BlockWrapper>
   );
 });