@redneckz/wildless-cms-uni-blocks 0.2.111 → 0.2.112

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

@@ -0,0 +1,125 @@
+import { JSX, PropsWithChildren } from '@redneckz/uni-jsx';
+import type { BlockDef, ContentPageDef, UniBlockProps } from '../../types';
+import type { BlockContent } from '../BlockContent';
+import { LikeControl } from '../LikeControl/LikeControl';
+import { Placeholder } from '../Placeholder/Placeholder';
+import { ContentPageContext } from './ContentPageContext';
+
+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 type JSXBlock = (
+  props: PropsWithChildren<UniBlockProps & BlockContent, any>,
+  context?: any,
+) => any;
+
+export type BlocksRegistry = Record<string, JSXBlock>;
+
+export interface ContentPageProps extends UniBlockProps {
+  blocksRegistry: BlocksRegistry;
+  data: ContentPageDef;
+  blockDecorator?: BlockDecorator;
+}
+
+export interface RenderBlockFunc {
+  block: BlockDef;
+  blockDecorator: BlockDecorator;
+  blocksRegistry: BlocksRegistry;
+  context: ContentPageContext;
+}
+
+const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
+  render({ blockClassName, block });
+
+export const ContentPage = JSX<ContentPageProps>(
+  ({
+    className,
+    context,
+    blocksRegistry,
+    data: { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' },
+    blockDecorator = defaultBlockDecorator,
+  }) => {
+    const { header } = slots;
+
+    return (
+      <section
+        className={`relative ${style2className(pageStyle)} ${className || ''}`}
+        data-theme={colorPalette}
+      >
+        {header?.blocks?.length ? (
+          <div className={`${style2className(header?.style)}`}>
+            {header.blocks.map((block, i) =>
+              renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+            )}
+          </div>
+        ) : null}
+
+        {blocks?.length ? (
+          <div className="container grid grid-cols-12 gap-1">
+            {blocks.map((block, i) =>
+              renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+            )}
+          </div>
+        ) : null}
+
+        {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, blockDecorator, blocksRegistry, context }: RenderBlockFunc,
+  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((block, i) =>
+                  renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+                )
+              : null}
+          </BlockComponent>
+        );
+      },
+    },
+    `block-${i}`,
+  );
+}
+
+function style2className(style: string[] | undefined | null): string {
+  return style ? style.join(' ') : '';
+}

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

@@ -0,0 +1,37 @@
+export interface Router {
+  pathname: string;
+  query: Record<string, string | string[] | undefined>;
+  href?: string;
+  basePath?: string;
+  push: (url: string) => void;
+}
+
+export interface LikeService {
+  likeCount: number;
+  like: () => void;
+  dislike: () => void;
+}
+
+export type HandlerDecorator = <F extends Function>(handler: F, targetContent: any) => F;
+
+export interface Search {
+  term: string;
+  setTerm: (t: string) => void;
+}
+
+export type AsyncDataHook = <Data, Error = any>(
+  key: string,
+  fetcher: () => Promise<Data>,
+) => { data?: Data; error?: Error };
+
+export type GeolocationHook = (defaultLocation: string) => [string, () => void];
+
+export interface ContentPageContext {
+  useRouter: () => Router;
+  useState: <State>(initialState: State) => [State, (_: State) => void];
+  useAsyncData: AsyncDataHook;
+  useGeolocation: GeolocationHook;
+  useLikeService: () => LikeService;
+  useSearch: () => Search;
+  handlerDecorator?: HandlerDecorator;
+}

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, '');