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

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/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>
   );
 });

package/mobile/src/ui-kit/Button/getRegularButtonClasses.ts

@@ -8,7 +8,7 @@ export const getRegularButtonClasses = ({
 }: GetButtonClassParams): string =>
   [
     buttonStyle,
-    'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-text focus:border',
+    'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-text focus:border h-fit',
     version ? buttonStyleMap[version] : '',
     rounded ? 'rounded-full' : 'rounded-md',
     className,

package/mobile/src/ui-kit/Button/renderButtonsSection.tsx

@@ -14,7 +14,7 @@ export const renderButtonsSection = (
   buttons?: (ButtonWithIconProps | undefined)[],
   { className = '', buttonClassName, isVertical }: ButtonsSectionOptions = {},
 ) =>
-  buttons?.length && buttons.some((_) => _?.text) ? (
+  buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (
     <div className={style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className)}>
       {buttons.map(renderButton(buttonClassName))}
     </div>
@@ -26,7 +26,7 @@ const renderButton =
     const { text, icon, iconRight, version, ...rest } = button || {};
     const iconVersion = version === 'secondary' ? 'color' : 'white';
 
-    return text ? (
+    return text || icon?.icon ? (
       <Button
         key={index ? String(index) : ''}
         className={buttonClassName}

package/mobile/src/ui-kit/RichText/RichText.tsx

@@ -1,8 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import type { RichTextProps } from './RichTextProps';
 
 export const RichText = JSX<RichTextProps>((props) => {
-  const { __html = '' } = props;
+  const { __html = '', richVersion = '' } = props;
 
-  return <div className="md-container" dangerouslySetInnerHTML={{ __html }} />;
+  return (
+    <div className={style(richVersion, 'md-container')} dangerouslySetInnerHTML={{ __html }} />
+  );
 });

package/mobile/src/ui-kit/RichText/RichTextProps.ts

@@ -5,7 +5,7 @@ export interface RichTextProps {
   __html?: HTML;
   /**
    * @title Стиль форматированного текста
-   * @enumNames ["по умолчанию", "в полоску"]
+   * @enumNames ["по умолчанию", "Строки разного цвета", "Горизонтальные разделители"]
    */
-  richVersion?: '' | 'striped';
+  richVersion?: '' | 'striped' | 'horizontal-separator';
 }

package/mobile/src/ui-kit/Select/Select.tsx

@@ -17,10 +17,22 @@ export type SelectProps = LabelProps & {
   options: OptionProps[];
   isBorder?: boolean;
   placeholder?: string;
+  valid?: boolean;
+  onValidate?: (value: string) => void;
 };
 
 export const Select = JSX<SelectProps>(
-  ({ className = '', isBorder = true, label, options = [], value, onChange, placeholder = '' }) => {
+  ({
+    className = '',
+    isBorder = true,
+    label,
+    options = [],
+    value,
+    onChange,
+    placeholder = '',
+    valid = true,
+    onValidate,
+  }) => {
     const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
     const [isOpen, setIsOpen] = useState(false);
     const handleClickOutside = useCallback(() => setIsOpen(false), []);
@@ -30,6 +42,7 @@ export const Select = JSX<SelectProps>(
       setSelectedItem(option);
       setIsOpen(false);
       onChange(option);
+      onValidate && onValidate(option.text);
     };
 
     const isSelected = (option: OptionProps) => Boolean(option.key === selectedItem.key);
@@ -50,7 +63,7 @@ export const Select = JSX<SelectProps>(
         <div className={`relative ${isOpen ? 'z-20' : 'z-10'}`}>
           <div
             className={`text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
-            ${getBorderStyle(isBorder)}`}
+            ${getBorderStyle(isBorder, valid)}`}
             onClick={() => setIsOpen(!isOpen)}
           >
             <p className="p-4 pr-8 h-14 overflow-hidden text-ellipsis whitespace-nowrap">
@@ -108,5 +121,7 @@ const renderOption =
     );
   };
 
-const getBorderStyle = (isBorder: boolean) =>
-  isBorder ? 'border border-gray rounded-md hover:border-primary-hover' : '';
+const getBorderStyle = (isBorder: boolean, valid: boolean) => `
+  ${isBorder ? 'border rounded-md hover:border-primary-hover' : ''} ${
+  valid ? ' border-gray' : 'border-error'
+} `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.9.16",
+  "version": "0.10.0",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -189,7 +189,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "53 kB",
+      "limit": "54 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>
-);