@redneckz/wildless-cms-uni-blocks 0.2.74 → 0.2.77

package/src/components/ContentPage/ContentPage.tsx

@@ -0,0 +1,88 @@
+import { JSX, PropsWithChildren } from '@redneckz/uni-jsx';
+import type { BlockContent } from '../BlockContent';
+import { LikeControl } from '../LikeControl/LikeControl';
+import { Placeholder } from '../Placeholder/Placeholder';
+import type { BlockDef, ContentPageDef, UniBlockProps } from '../../types';
+
+interface BlockDecoratorProps<VNode> {
+  blockClassName: string;
+  block: BlockDef;
+  render: (props: { blockClassName: string; block: BlockDef }) => VNode;
+}
+
+export type BlockDecorator<VNode = any> = (
+  props: BlockDecoratorProps<VNode>,
+  index?: number | string,
+) => any;
+
+export interface ContentPageProps extends UniBlockProps {
+  blocksRegistry: Record<
+    string,
+    (props: PropsWithChildren<UniBlockProps & BlockContent, any>, context?: any) => any
+  >;
+  data: ContentPageDef;
+  blockDecorator?: BlockDecorator;
+}
+
+const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
+  render({ blockClassName, block });
+
+export const ContentPage = JSX<ContentPageProps>(
+  ({
+    className,
+    context,
+    blocksRegistry,
+    data: { style: pageStyle, blocks, likeControl, colorPalette = 'pc' },
+    blockDecorator = defaultBlockDecorator,
+  }) => {
+    return (
+      <section className="relative" data-theme={colorPalette}>
+        <div className={`grid grid-cols-12 gap-1 ${style2className(pageStyle)} ${className || ''}`}>
+          {blocks?.length ? blocks.map(renderBlock) : null}
+        </div>
+        {likeControl && (
+          <div className="flex items-end absolute bottom-0 right-0 h-full pointer-events-none">
+            <LikeControl
+              className="rounded-tl-lg sticky bottom-0 pointer-events-auto"
+              context={context}
+            />
+          </div>
+        )}
+      </section>
+    );
+
+    function renderBlock(block: BlockDef, i: number) {
+      const { type } = block;
+      if (!(type in blocksRegistry)) {
+        console.warn(`No block with "${type}" is registered`);
+      }
+
+      const BlockComponent = blocksRegistry[type] || Placeholder;
+      return blockDecorator(
+        {
+          blockClassName: style2className(block.style),
+          block,
+          render: (props) => {
+            const { version, content, blocks } = props.block;
+            return (
+              <BlockComponent
+                key={`${type}-${i}`}
+                className={props.blockClassName}
+                version={version}
+                context={context}
+                {...content}
+              >
+                {blocks?.length ? blocks.map(renderBlock) : null}
+              </BlockComponent>
+            );
+          },
+        },
+        `block-${i}`,
+      );
+    }
+  },
+);
+
+function style2className(style: string[] | undefined | null): string {
+  return style ? style.join(' ') : '';
+}

package/src/components/ContentPage/ContentPageHead.tsx

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ContentPageMeta } from '../../types';
+
+export interface ContentPageHeadProps {
+  HeadComponent: Function;
+  data: ContentPageMeta;
+}
+
+export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data, children }) => {
+  const { title, description, keywords, robots, og } = data;
+  return (
+    <HeadComponent>
+      <title>{title}</title>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      {description && <meta name="description" content={description} />}
+      {keywords && <meta name="keywords" content={keywords.join(',')} />}
+      {robots && <meta name="robots" content={robots.join(',')} />}
+      {og
+        ? Object.entries(og).map(([key, value]) => (
+            <meta key={key} name={`og:${key}`} content={value} />
+          ))
+        : null}
+      {children}
+    </HeadComponent>
+  );
+});

package/src/components/ContentPage/toMobilePage.ts

@@ -0,0 +1,21 @@
+import type { BlockDef, ContentPageDef } from '../../types';
+
+export function toMobilePage(contentPage: ContentPageDef): ContentPageDef {
+  const blocks = contentPage.blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
+  return {
+    ...contentPage,
+    blocks,
+  };
+}
+
+function toMobileBlock(block: BlockDef): BlockDef {
+  const { mobile } = block;
+  if (mobile) {
+    return {
+      ...block,
+      style: mobile.style?.length ? mobile.style : block.style,
+    };
+  } else {
+    return block;
+  }
+}

package/src/components/CreditCalculator/CreditCalculator.fixture.tsx

@@ -0,0 +1,4 @@
+import { CreditCalculator } from './CreditCalculator';
+import { context } from '../../setup-fixture';
+
+export default <CreditCalculator context={context} />;

package/src/components/CreditCalculator/CreditCalculator.tsx

@@ -0,0 +1,106 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { clamp } from '../../utils/clamp';
+
+export interface CreditCalculatorProps extends UniBlockProps {}
+
+const borderStyle = 'border-solid border-3 border-primary-main rounded-md';
+
+const MIN_MONEY = 50000;
+const MAX_MONEY = 3000000;
+const STEP_MONEY = 1000;
+
+const CREDIT_TERM_YEARS = [2, 3, 4, 5, 6, 7];
+
+const MIN_MONTHS = 1;
+const MAX_MONTHS = 84;
+const STEP_MONTHS = 1;
+
+const MONTHS_IN_YEAR = 12;
+
+export const CreditCalculator = JSX<CreditCalculatorProps>(({ context, className }) => {
+  const [moneyValue, setMoneyValue] = context.useState(350000);
+  const [monthsValue, setMonthsValue] = context.useState(12);
+  const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
+  const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
+
+  const handleButtonClick = (value: number) => {
+    setMonthsValue(clamp(value * MONTHS_IN_YEAR, MIN_MONTHS, MAX_MONTHS));
+  };
+
+  return (
+    <section className={`font-sans text-primary-text bg-white p-4 ${className}`}>
+      <div className={`box-border p-12 flex flex-col justify-between ${borderStyle}`}>
+        <div className="flex justify-between">
+          <div className="grow mr-11">
+            <InputRange
+              title="Желаемая сумма кредита, ₽"
+              items={['От 50 000 рублей', 'До 3 000 000 рублей']}
+              min={MIN_MONEY}
+              max={MAX_MONEY}
+              step={STEP_MONEY}
+              value={moneyValue}
+              onChange={setMoneyValue}
+            />
+            <InputRange
+              title="Срок кредита, месяцев"
+              items={['Или выберите из предложенных вариантов ниже']}
+              min={MIN_MONTHS}
+              max={MAX_MONTHS}
+              step={STEP_MONTHS}
+              value={monthsValue}
+              onChange={setMonthsValue}
+            />
+            <div className="flex mb-7">
+              {CREDIT_TERM_YEARS.map((number, i) => renderButton(number, i, handleButtonClick))}
+            </div>
+            <Checkbox
+              text="Получаю пенсию на карту Россельхозбанка"
+              checked={isAnnuityChecked}
+              onChange={setIsAnnuityChecked}
+            />
+            <Checkbox
+              className="mb-4"
+              text="Комплексная страховая защита"
+              checked={isInsuranceChecked}
+              onChange={setIsInsuranceChecked}
+            />
+          </div>
+          <div className="p-9 bg-primary-main rounded-md text-white">
+            <div className="text-base mb-5">Наше предложение</div>
+            <div className="text-sm opacity-60">Ежемесячный платёж</div>
+            <div className="text-lg mb-3">26 827 ₽</div>
+            <div className="text-sm opacity-60">Ставка</div>
+            <div className="text-lg">16,9 %</div>
+          </div>
+        </div>
+        <div className="flex items-center">
+          <Button className="mr-3" text="Отправить заявку" version="primary" href="#" />
+          <div
+            className="w-80 text-xxs leading-4 text-secondary-text"
+            aria-label="Соглашение на обработку персональных данных"
+          >
+            Отправляя заявку, вы соглашаетесь на обработку персональных данных соответственно
+            требованиям ФЗ «О персональных данных»
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+});
+
+const renderButton = (number: number, i: number, handleClick: (number: number) => void) => (
+  <div
+    key={String(i)}
+    className="bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer"
+    role="button"
+    onClick={() => handleClick(number)}
+  >
+    <span className="font-medium text-sm">
+      {number} {number > 4 ? 'лет' : 'года'}
+    </span>
+  </div>
+);

package/src/components/ExchangeRateTile/ExchangeRateTile.fixture.tsx

@@ -0,0 +1,11 @@
+import { context } from '../../setup-fixture';
+
+import { ExchangeRateTile } from './ExchangeRateTile';
+
+export default {
+  default: (
+    <div className="grid grid-cols-12">
+      <ExchangeRateTile context={context} className="col-span-4" />
+    </div>
+  ),
+};

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -0,0 +1,80 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ExchangeRateTileContent } from './ExchangeRateTileContent';
+import { Tile } from '../Tile/Tile';
+import type { UniBlockProps } from '../../types';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { Icon } from '../../ui-kit/Icon/Icon';
+
+export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
+
+const CBR_EXCHANGE_RATE_URL = 'https://www.cbr-xml-daily.ru/daily_json.js';
+
+const CURRENCY_CODES = ['USD', 'EUR'];
+const CURRENCY_ICONS_MAP = {
+  USD: 'DollarIcon',
+  EUR: 'EuroIcon',
+};
+
+const buttons: ButtonProps[] = [
+  {
+    text: 'Все показатели',
+    href: 'https://cbr.ru/currency_base/daily/',
+    version: 'secondary',
+  },
+];
+
+export const ExchangeRateTile = JSX<ExchangeRateTileProps>(({ className, context, title }) => {
+  const { data } = context.useAsyncData(CBR_EXCHANGE_RATE_URL, fetchExchangeRate);
+  return (
+    <Tile
+      className={className}
+      context={context}
+      title={title || 'Курсы обмена валют'}
+      buttons={buttons}
+    >
+      <table>
+        <thead>
+          <tr>
+            <CurrencyTH>Валюта</CurrencyTH>
+            <CurrencyTH className="pl-11">Курс</CurrencyTH>
+          </tr>
+        </thead>
+        <tbody>
+          {CURRENCY_CODES.map((code) => {
+            const value = (data?.Valute || {})[code]?.Value;
+            return (
+              <tr key={code}>
+                <CurrencyTD className="pt-4">
+                  <div className="flex items-center">
+                    <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" />
+                    <span className="ml-2">{code}</span>
+                  </div>
+                </CurrencyTD>
+                <CurrencyTD className="pt-4 pl-11">{formatCurrency(value)}</CurrencyTD>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </Tile>
+  );
+});
+
+const CurrencyTH = JSX<{ className?: string }>(({ className = '', children }) => (
+  <th className={`text-left font-normal text-sm text-secondary-text ${className}`}>{children}</th>
+));
+
+const CurrencyTD = JSX<{ className?: string }>(({ className = '', children }) => (
+  <td className={`text-left font-normal text-base text-primary-text ${className}`}>{children}</td>
+));
+
+async function fetchExchangeRate(): Promise<{
+  Valute?: Record<string, { CharCode: string; Name?: string; Value: number; Previous?: number }>;
+}> {
+  const response = await fetch(CBR_EXCHANGE_RATE_URL);
+  return await response.json();
+}
+
+const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
+
+const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(value) : '');

package/src/components/Footer/Contacts.tsx

@@ -0,0 +1,73 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { useLink } from '../../hooks/useLink';
+import type { ContactInfo } from './FooterContent';
+
+export interface ContactsProps extends UniBlockProps {
+  items?: ContactInfo[];
+  hasButton?: boolean;
+}
+
+export const Contacts = JSX<ContactsProps>(({ className, items, hasButton, context }) => {
+  const router = context.useRouter();
+  const { handlerDecorator } = context;
+
+  return (
+    <div className={`flex flex-col ${className || ''}`}>
+      {items?.length ? items.map(renderContact) : null}
+      {hasButton ? (
+        <Button
+          version="primary"
+          className="my-4"
+          {...useLink(
+            { router, handlerDecorator },
+            {
+              text: 'Обратная связь',
+              href: '/',
+              target: '_blank',
+            },
+          )}
+        />
+      ) : null}
+    </div>
+  );
+});
+
+const renderContact = (item: ContactInfo, index: number) => {
+  const { type, text, description } = item;
+
+  return (
+    <div className="mb-4" key={String(index)}>
+      <div>{renderText(type, text)}</div>
+      <div className="font-sans text-sm text-secondary-text">{description}</div>
+    </div>
+  );
+};
+
+const renderText = (type: ContactInfo['type'], text: string) => {
+  switch (type) {
+    case 'tel':
+      return (
+        <a
+          className="font-sans font-medium text-xl text-primary-text no-underline"
+          href={`tel:${formatTel(text)}`}
+        >
+          {text}
+        </a>
+      );
+    case 'email':
+      return (
+        <a
+          className="font-sans font-medium text-xl text-primary-text no-underline"
+          href={`mailto:${text}`}
+        >
+          {text}
+        </a>
+      );
+    default:
+      return <span>{text}</span>;
+  }
+};
+
+const formatTel = (s: string) => s.replaceAll(/(\-|\s|\(|\)|\D+)/g, '');

package/src/components/Footer/Footer.fixture.tsx

@@ -0,0 +1,265 @@
+import { context } from '../../setup-fixture';
+import { Footer } from './Footer';
+
+const DEFAULT_ORIGIN = 'https://rshb.ru/';
+
+export default (
+  <Footer
+    topItems={[
+      {
+        href: DEFAULT_ORIGIN,
+        text: 'Частным клиентам',
+        target: '_blank',
+        items: [
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Кредитные карты',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Дебетовые карты',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Кредиты',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Ипотека',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Вклады и сбережения',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Инвестиции',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Страхование',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Премиальным клиентам',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Биометрическая регистрация',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Перевод денег',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Обмен денег',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Акции',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Тарифы',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Архивная информация',
+          },
+        ],
+      },
+      {
+        href: DEFAULT_ORIGIN,
+        text: 'Бизнес клиентам',
+        target: '_blank',
+        items: [
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'РКО',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Кредиты',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Депозиты',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Эквайринг',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Банковские карты',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'ВЭД',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Инвестиции',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Обмен валюты',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Страхование',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Партнёрские программы',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Онлайн-сервисы',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Акции',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Тарифы',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Архивная информация',
+          },
+        ],
+      },
+      {
+        href: DEFAULT_ORIGIN,
+        text: 'О банке',
+        target: '_blank',
+        items: [
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'О банке',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Новости',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Офисы и отделения',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Карьера в банке',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Пресс-центр',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Кредитным организациям',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Закупки',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Непрофильные/Профильные нецелевые активы',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Инсайдерам',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Противодействие коррупции',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Меры безопасности',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Залоговое имущество',
+          },
+        ],
+      },
+    ]}
+    socialMedia={[{ href: 'https://vk.com' }, { href: 'https://ok.ru' }, { href: 'https://t.me' }]}
+    contacts={[
+      {
+        text: '+7 (495) 787-7-787',
+        description: 'Для звонков из-за границы',
+        type: 'tel',
+      },
+      {
+        text: 'example@example.com',
+        description: 'Для писем',
+        type: 'email',
+      },
+      {
+        text: '7787',
+        description: 'Абонентам МТС, Мегафон, Билайн и Tele2',
+        type: 'tel',
+      },
+    ]}
+    relatedEnterprises={[
+      {
+        text: 'РСХБ Страхование',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+      {
+        text: 'РСХБ Страхование жизни',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+      {
+        text: 'РСХБ Управление активами',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+      {
+        text: 'РСХБ Лизинг',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+      {
+        text: 'РСХБ Факторинг',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+    ]}
+    documents={[
+      {
+        text: 'Информация о процентных ставках по договорам банковского вклада с физическими лицами',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+      {
+        text: 'Раскрытие информации профессиональным участником рынка ценных бумаг',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+      {
+        text: 'Раскрытие информации',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+      {
+        text: 'Удостоверяющий центр',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+      {
+        text: 'Финансовая культура',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+    ]}
+    context={context}
+  />
+);