@redneckz/wildless-cms-uni-blocks 0.2.109 → 0.2.113

package/mobile/src/components/ContentPage/ContentPageHead.tsx

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ContentPageMeta } from '../../types';
+
+export interface ContentPageHeadProps {
+  HeadComponent: <Props, Context, VNode>(props: Props, context?: Context) => VNode;
+  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/mobile/src/components/ContentPage/toMobilePage.ts

@@ -0,0 +1,38 @@
+import type { BlockDef, ContentPageDef } from '../../types';
+
+export function toMobilePage(contentPage: ContentPageDef): ContentPageDef {
+  const { blocks, slots } = contentPage;
+
+  return {
+    ...contentPage,
+    blocks: getMobileBlocks(blocks),
+    slots:
+      slots &&
+      Object.keys(slots).reduce(
+        (res, key) => ({
+          ...res,
+          [key]: {
+            ...slots[key],
+            blocks: getMobileBlocks(slots[key].blocks),
+          },
+        }),
+        {},
+      ),
+  };
+}
+
+function getMobileBlocks(blocks?: BlockDef[]) {
+  return blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
+}
+
+function toMobileBlock(block: BlockDef): BlockDef {
+  const { mobile } = block;
+  if (mobile) {
+    return {
+      ...block,
+      style: mobile.style?.length ? mobile.style : block.style,
+    };
+  } else {
+    return block;
+  }
+}

package/mobile/src/components/CreditCalculator/CreditCalculator.tsx

@@ -0,0 +1,154 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
+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 { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { clamp } from '../../utils/clamp';
+import {
+  DEFAULT_MAX_MONTHS,
+  DEFAULT_MAX_SUM,
+  DEFAULT_MIN_MONTHS,
+  DEFAULT_MIN_SUM,
+  DEFAULT_MONTHS,
+  DEFAULT_SUM,
+  MONTHS_IN_YEAR,
+} from './constants';
+import { CreditCalculatorContent } from './CreditCalculatorContent';
+import { getCalculatorParams } from './getCalculatorParams';
+import { getCreditRate } from './getCreditRate';
+import { getCreditTermYears } from './getCreditTermYears';
+import { getMonthlyPayment } from './getMonthlyPayment';
+
+export interface CreditCalculatorProps extends CreditCalculatorContent, UniBlockProps {}
+
+const STEP_MONEY = 1000;
+const STEP_MONTHS = 1;
+const DEFAULT_PAYMENT_TYPE = 'annuity';
+
+const borderStyle = 'border-solid border-[3px] border-primary-main rounded-md';
+
+export const CreditCalculator = JSX<CreditCalculatorProps>(
+  ({ context, className, directoryName }) => {
+    const [moneyValue, setMoneyValue] = context.useState<number | undefined>(undefined);
+    const [monthsValue, setMonthsValue] = context.useState<number | undefined>(undefined);
+    const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
+    const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
+
+    const tableRows = useCreditCalculatorData(context.useAsyncData, directoryName).rows;
+
+    const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isAnnuityChecked });
+
+    const defaultSum =
+      calculatorParams.maxSum && calculatorParams.minSum
+        ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
+        : DEFAULT_SUM;
+
+    const defaultMonths =
+      calculatorParams.maxMonths && calculatorParams.minMonths
+        ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
+        : DEFAULT_MONTHS;
+
+    const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
+    const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
+    const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
+    const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
+
+    const rate = getCreditRate({ calculatorParams, isInsurance: isInsuranceChecked });
+
+    const montlyPayment = getMonthlyPayment({
+      calculatorParams,
+      paymentType: DEFAULT_PAYMENT_TYPE,
+      rate,
+      sum: moneyValue || defaultSum,
+      months: monthsValue || defaultMonths,
+    });
+
+    const creditTermYears = getCreditTermYears(minMonths, maxMonths);
+
+    function handleButtonClick(value: number) {
+      setMonthsValue(clamp(value * MONTHS_IN_YEAR, minMonths, maxMonths));
+    }
+
+    return (
+      <section className={`font-sans text-primary-text p-10 bg-white ${className || ''}`}>
+        <div className={`box-border p-[49px] pr-[56px] mx-auto w-max ${borderStyle}`}>
+          <div className="flex justify-between ">
+            <div className="mr-[42px]">
+              <InputRange
+                title="Желаемая сумма кредита, ₽"
+                items={[
+                  `От ${addSpacesBetweenNumbers(minSum)} рублей`,
+                  `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
+                ]}
+                min={minSum}
+                max={maxSum}
+                step={STEP_MONEY}
+                value={moneyValue || defaultSum}
+                onChange={setMoneyValue}
+              />
+              <InputRange
+                className="mt-[23px]"
+                title="Срок кредита, месяцев"
+                items={['Или выберите из предложенных вариантов ниже']}
+                min={minMonths}
+                max={maxMonths}
+                step={STEP_MONTHS}
+                value={monthsValue || defaultMonths}
+                onChange={setMonthsValue}
+              />
+              <div className="flex mb-7">
+                {creditTermYears.map((number, i) => renderButton(number, i, handleButtonClick))}
+              </div>
+              <Checkbox
+                text="Получаю пенсию на карту Россельхозбанка"
+                checked={isAnnuityChecked}
+                onChange={setIsAnnuityChecked}
+              />
+              <Checkbox
+                className="mt-3 mb-7"
+                text="Комплексная страховая защита"
+                checked={isInsuranceChecked}
+                onChange={setIsInsuranceChecked}
+              />
+            </div>
+            <div className="box-border h-fit p-9 bg-primary-main rounded-md text-white">
+              <div className="text-base mb-[18px]">Наше предложение</div>
+              <div className="text-sm opacity-60">Ежемесячный платёж</div>
+              <div className="text-lg mb-3">
+                {addSpacesBetweenNumbers(Math.round(montlyPayment))} ₽
+              </div>
+              <div className="text-sm opacity-60">Ставка</div>
+              <div className="text-lg">{rate} %</div>
+            </div>
+          </div>
+          <div className="flex items-center">
+            <Button className="mr-3" text="Отправить заявку" version="primary" href="#" />
+            <div
+              className="w-80 text-2xs leading-4 text-secondary-text"
+              aria-label="Соглашение на обработку персональных данных"
+            >
+              Отправляя заявку, вы соглашаетесь на обработку персональных данных соответственно
+              требованиям ФЗ «О персональных данных»
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderButton(number: number, i: number, handleClick: (number: number) => void) {
+  return (
+    <button
+      key={String(i)}
+      className="bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer border-none"
+      onClick={() => handleClick(number)}
+    >
+      <span className="font-semibold text-sm">
+        {number} {number === 1 ? 'год' : number > 4 ? 'лет' : 'года'}
+      </span>
+    </button>
+  );
+}

package/mobile/src/components/CreditCalculator/CreditCalculatorContent.ts

@@ -0,0 +1,21 @@
+export interface CalculatorParams {
+  isAnnuity?: boolean;
+  minSum?: number;
+  maxSum?: number;
+  minMonths?: number;
+  maxMonths?: number;
+  rateWithInsurance?: number;
+  rateWithoutInsurance?: number;
+}
+
+export interface CreditCalculatorData {
+  rows?: CalculatorParams[];
+}
+
+/**
+ * @title Кредитный калькулятор
+ */
+export interface CreditCalculatorContent {
+  /** @title Справочник */
+  directoryName?: string;
+}

package/mobile/src/components/CreditCalculator/constants.ts

@@ -0,0 +1,8 @@
+export const DEFAULT_MIN_SUM = 30000;
+export const DEFAULT_MAX_SUM = 3000000;
+export const DEFAULT_SUM = (DEFAULT_MAX_SUM - DEFAULT_MIN_SUM) / 2;
+export const DEFAULT_MIN_MONTHS = 1;
+export const DEFAULT_MAX_MONTHS = 84;
+export const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
+
+export const MONTHS_IN_YEAR = 12;

package/mobile/src/components/CreditCalculator/getCalculatorParams.ts

@@ -0,0 +1,16 @@
+import { CalculatorParams } from './CreditCalculatorContent';
+
+interface GetCalculatorParamsParams {
+  tableRows?: CalculatorParams[];
+  isAnnuity?: boolean;
+}
+
+export const getCalculatorParams = (params: GetCalculatorParamsParams) => {
+  const { tableRows, isAnnuity = false } = params;
+
+  if (!tableRows) return {};
+
+  const calculatorParams = tableRows.find((row) => row.isAnnuity === isAnnuity);
+
+  return calculatorParams || {};
+};

package/mobile/src/components/CreditCalculator/getCreditRate.ts

@@ -0,0 +1,18 @@
+import { CalculatorParams } from './CreditCalculatorContent';
+
+const DEFAULT_RATE = 5;
+
+interface GetCreditRateParams {
+  calculatorParams?: CalculatorParams;
+  isInsurance: boolean;
+}
+
+export const getCreditRate = (params: GetCreditRateParams) => {
+  const { calculatorParams, isInsurance } = params;
+
+  if (!calculatorParams) return DEFAULT_RATE;
+
+  return isInsurance
+    ? calculatorParams?.rateWithInsurance || DEFAULT_RATE
+    : calculatorParams?.rateWithoutInsurance || DEFAULT_RATE;
+};

package/mobile/src/components/CreditCalculator/getCreditTermYears.spec.ts

@@ -0,0 +1,10 @@
+import { getCreditTermYears } from './getCreditTermYears';
+
+describe('getCreditTermYears', () => {
+  it('should return array starts from min year plus one and ends with max year', () => {
+    const minMonths = 12;
+    const maxMonths = 96;
+    const items = [2, 3, 4, 5, 6, 8];
+    expect(getCreditTermYears(minMonths, maxMonths)).toEqual(items);
+  });
+});

package/mobile/src/components/CreditCalculator/getCreditTermYears.ts

@@ -0,0 +1,15 @@
+import { MONTHS_IN_YEAR } from './constants';
+
+const MAX_YEARS_LENGTH = 5;
+
+export const getCreditTermYears = (minMonths: number, maxMonths: number) => {
+  const totalYears = Math.ceil((maxMonths - minMonths) / 12);
+  const firstYear = Math.floor(minMonths / MONTHS_IN_YEAR) + 1;
+
+  const result = new Array(Math.min(totalYears - 1, MAX_YEARS_LENGTH))
+    .fill(0)
+    .map((_, i) => firstYear + i);
+
+  const maxYear = totalYears + firstYear - 1;
+  return result.concat(maxYear);
+};

package/mobile/src/components/CreditCalculator/getMonthlyPayment.ts

@@ -0,0 +1,32 @@
+import { clamp } from '../../utils/clamp';
+import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM, MONTHS_IN_YEAR } from './constants';
+import { CalculatorParams } from './CreditCalculatorContent';
+
+type PaymentType = 'annuity' | 'differentiated';
+
+interface GetMonthlyPaymentParams {
+  calculatorParams?: CalculatorParams;
+  paymentType: PaymentType;
+  rate: number;
+  sum: number;
+  months: number;
+}
+
+export const getMonthlyPayment = (params: GetMonthlyPaymentParams) => {
+  const { calculatorParams, paymentType, rate, sum, months } = params;
+
+  if (!calculatorParams) return 0;
+
+  const finalSum = clamp(
+    sum,
+    calculatorParams.minSum || DEFAULT_MIN_SUM,
+    calculatorParams.maxSum || DEFAULT_MAX_SUM,
+  );
+
+  if (paymentType === 'annuity') {
+    const annuityCoef = Number(rate) / (MONTHS_IN_YEAR * 100);
+    return finalSum * (annuityCoef + annuityCoef / (Math.pow(1 + annuityCoef, months) - 1));
+  } else {
+    return finalSum / months + finalSum * (Number(rate) / 12);
+  }
+};

package/mobile/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -0,0 +1,80 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Tile } from '../Tile/Tile';
+import type { ExchangeRateTileContent } from './ExchangeRateTileContent';
+
+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/mobile/src/components/ExchangeRateTile/ExchangeRateTileContent.ts

@@ -0,0 +1,7 @@
+/**
+ * @title Курсы валют
+ */
+export interface ExchangeRateTileContent {
+  /** @title Заголовок */
+  title?: string;
+}

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

@@ -0,0 +1,73 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+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 = '') => {
+  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(/\D/g, '');

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

@@ -0,0 +1,66 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { AccordionProps } from '../Accordion/Accordion';
+import { Accordion } from '../Accordion/Accordion';
+import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
+import { Contacts } from './Contacts';
+import type { FooterContent, SubMenuItem } from './FooterContent';
+import { HorizontalNavigation } from './HorizontalNavigation';
+import { SocialMedia } from './SocialMedia';
+import { TextInformation } from './TextInformation';
+
+import { Button } from '../../ui-kit/Button/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
+import { getAccordionItems } from '../../utils/getAccordionItems';
+
+export interface FooterProps extends FooterContent, UniBlockProps {}
+
+export const Footer = JSX<FooterProps>(
+  ({
+    className = '',
+    documents,
+    relatedEnterprises,
+    contacts,
+    socialMedia,
+    topItems,
+    context,
+    horizontalNavigationTitle,
+    subMenu,
+  }) => {
+    const propsTextBlock: AccordionProps = {
+      context,
+      accordionItems: getAccordionItems(topItems),
+    };
+    return (
+      <footer className={`px-4 py-[26px] bg-white ${className}`}>
+        <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
+        <Accordion className="p-0 pt-0 pb-0 mb-4" {...propsTextBlock} />
+        <div>{subMenu?.map(renderSubMenuItem)}</div>
+        <MobileAppTile
+          context={context}
+          title="Мобильное приложение"
+          description="Загрузить для IOS и Android"
+        />
+        <SearchBar context={context} className="grow" />
+        <SocialMedia className="pb-4" media={socialMedia} context={context} />
+        <HorizontalNavigation
+          title={horizontalNavigationTitle}
+          links={relatedEnterprises}
+          context={context}
+        />
+        <TextInformation links={documents} context={context} />
+      </footer>
+    );
+  },
+);
+
+const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
+  const { icon, href, text } = menu;
+  return (
+    <Button key={`footer-${i}`} href={href} className="flex text-sm mb-4">
+      {icon ? <Icon className="pr-1" name={icon} width="24" height="24" asSVG /> : null}
+      <span className="pl-0.5 font-medium">{text}</span>
+    </Button>
+  );
+};

package/mobile/src/components/Footer/FooterContent.ts

@@ -0,0 +1,55 @@
+import type { LinkProps } from '../../model/LinkProps';
+import type { SitemapProps } from '../../services/sitemap/SitemapProps';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+
+/**
+ * @title Тип контакта
+ * @enumNames [
+ *    "Телефон",
+ *    "Почта"
+ *  ]
+ */
+export type ContactType = 'tel' | 'email';
+
+/**
+ * @title Контакт
+ */
+export interface ContactInfo {
+  /** @title Текст */
+  text?: string;
+  type?: ContactType;
+  /** @title Описание */
+  description?: string;
+}
+
+/**
+ * @required ["href"]
+ */
+export type SocialMedia = Omit<LinkProps, 'text'>;
+
+/**
+ * @title Пункт подменю
+ */
+export interface SubMenuItem extends LinkProps {
+  /** @title Иконка подменю */
+  icon?: IconName;
+}
+
+/**
+ * @title Подвал
+ * @required ["topItems"]
+ */
+export interface FooterContent extends SitemapProps {
+  /** @title Обязательные документы */
+  documents?: LinkProps[];
+  /** @title Другие предприятия */
+  relatedEnterprises?: LinkProps[];
+  /** @title Контакты */
+  contacts?: ContactInfo[];
+  /** @title Социальные сети */
+  socialMedia?: SocialMedia[];
+  /** @title Заголовок для меню */
+  horizontalNavigationTitle?: string; // TODO: для мобильной версии
+  /** @title Подменю */
+  subMenu?: SubMenuItem[]; // TODO: для мобильной версии
+}

package/mobile/src/components/Footer/FooterLink.ts

@@ -0,0 +1,6 @@
+import type { LinkProps } from '../../model/LinkProps';
+import type { UniBlockProps } from '../../types';
+
+export interface FooterLink extends UniBlockProps {
+  links?: LinkProps[];
+}