@redneckz/wildless-cms-uni-blocks 0.5.5 → 0.5.7

package/mobile/src/components/Calculator/CreditCalculatorForm.tsx

@@ -11,6 +11,7 @@ import { renderMonthsInput } from './renderMonthsInput';
 import { renderPaymentTypeSelector } from './renderPaymentTypeSelector';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useCreditCalculatorParams } from './useCreditCalculatorParams';
+import { renderFootnote } from './renderFootnote';
 
 export const ANNUITY = 'annuity';
 export const DIFFERENTIAL = 'differential';
@@ -29,7 +30,7 @@ const paymentTypeItems = [
 export interface CreditCalculatorProp extends CommonCalculatorProps, UniBlockProps {}
 
 export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
-  ({ context, className = '', sourceBookDir, buttons }) => {
+  ({ context, className = '', sourceBookDir, buttons, footnote }) => {
     const [isAnnuity, toggleIsAnnuity] = useState(false);
     const [isInsurance, toggleIsInsurance] = useState(true);
     const [isSalaryClient, toggleIsSalaryClient] = useState(false);
@@ -81,7 +82,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
           rateBlockClassName="tracking-[-25px]"
           unit="%"
         />
-        <div className="w-[351px]">
+        <div className="w-full max-w-[350px]">
           <CalculatorValueBlock
             title={isAnnuity ? 'Ежемесячный платеж' : 'Платёж в первый месяц'}
             value={calculatorParams.monthlyPayment}
@@ -93,6 +94,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             onChange: (text: string) => toggleIsAnnuity(text === ANNUITY),
           })}
           {renderButtonSection(context, buttons)}
+          {renderFootnote(footnote)}
         </div>
       </section>
     );

package/mobile/src/components/Calculator/DepositCalculatorForm.tsx

@@ -17,16 +17,33 @@ import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderWantedSumInput } from './renderWantedSumInput';
+import { renderPaymentTypeSelector } from './renderPaymentTypeSelector';
+import { renderFootnote } from './renderFootnote';
 
 export interface DepositCalculatorProp
   extends DepositCalculatorParams,
     CommonCalculatorProps,
     UniBlockProps {}
 
+const EVERY_MONTH = 'everyMonth';
+const AT_END_TERM = 'atEndTerm';
+
+const depositTypeItems = [
+  {
+    id: EVERY_MONTH,
+    text: 'Ежемесячно',
+  },
+  {
+    id: AT_END_TERM,
+    text: 'В конце срока',
+  },
+];
+
 export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
-  ({ context, className = '', buttons, rate }) => {
+  ({ context, className = '', rate, buttons, footnote }) => {
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
+    const [isEveryMonth, toggleIsEveryMonth] = useState(false);
 
     const income = 948841;
     const finallySum = 1218841;
@@ -54,14 +71,20 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
           )}
         </div>
         <Rate rate={rate || 1} rateBlockClassName="tracking-[-25px]" unit="%" />
-        <div className="w-[351px]">
+        <div className="w-full max-w-[350px]">
           {income ? (
             <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
           ) : null}
           {finallySum ? (
             <CalculatorValueBlock title="Сумма в конце срока" value={finallySum} postfix="₽" />
           ) : null}
+          {renderPaymentTypeSelector(context, {
+            items: depositTypeItems,
+            checkedItem: isEveryMonth ? EVERY_MONTH : AT_END_TERM,
+            onChange: (text: string) => toggleIsEveryMonth(text === EVERY_MONTH),
+          })}
           {renderButtonSection(context, buttons)}
+          {renderFootnote(footnote)}
         </div>
       </section>
     );

package/mobile/src/components/Calculator/EmbeddableCalcBlocks.tsx

@@ -1,17 +1,14 @@
 import { BonusCalculatorForm, BonusCalculatorProps } from './BonusCalculatorForm';
 import { CreditCalculatorForm, CreditCalculatorProp } from './CreditCalculatorForm';
 import { DepositCalculatorForm, DepositCalculatorProp } from './DepositCalculatorForm';
-import { MortgageCalculatorForm, MortgageCalculatorProp } from './MortgageCalculatorForm';
 
 export type EmbeddableCalcProps =
   | CreditCalculatorProp
-  | MortgageCalculatorProp
   | DepositCalculatorProp
   | BonusCalculatorProps;
 
 export const EmbeddableCalcBlocks = {
   CreditCalculatorForm,
-  MortgageCalculatorForm,
   DepositCalculatorForm,
   BonusCalculatorForm,
 };

package/mobile/src/components/Calculator/renderFootnote.tsx

@@ -0,0 +1,2 @@
+export const renderFootnote = (text) =>
+  text ? <p className="text-s-light text-secondary-text mt-7">{text}</p> : null;

package/mobile/src/components/CardTransfer/CardTransferContent.ts

@@ -1,13 +1,12 @@
+import type { LabelProps, TitleProps } from '../../model/HeadlineType';
+
 /**
  * @title Перевод с карты на карту
  */
-export type CardTransferContent = {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Название поля */
-  label?: string;
-  /** @title Плейсхолдер поля */
-  placeholder?: string;
-  /** @title Текст кнопки */
-  buttonText?: string;
-};
+export type CardTransferContent = LabelProps &
+  TitleProps & {
+    /** @title Плейсхолдер */
+    placeholder?: string;
+    /** @title Текст кнопки */
+    buttonText?: string;
+  };

package/mobile/src/components/Catalog/CatalogCard.tsx

@@ -1,12 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
+import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import type { UniBlockProps } from '../../types';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import type { CatalogCardType, CatalogProductColor } from './CatalogContent';
+import type { CatalogCardType } from './CatalogContent';
 
 export interface CatalogCardProps extends CatalogCardType, UniBlockProps {
   version?: BlockVersion;
@@ -18,7 +19,7 @@ const iconVersionMap = {
   secondary: 'black',
 };
 
-const cardStyleMap: Record<CatalogProductColor, string> = {
+const cardStyleMap: Record<ProductColorVersion, string> = {
   black: 'bg-black',
   white: 'bg-white',
 };
@@ -48,7 +49,7 @@ export const CatalogCard = JSX<CatalogCardProps>(
   },
 );
 
-const renderColorOption = (color: CatalogProductColor, i: number) => (
+const renderColorOption = (color: ProductColorVersion, i: number) => (
   <span
     key={String(i)}
     className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}

package/mobile/src/components/Catalog/CatalogContent.ts

@@ -1,17 +1,13 @@
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
-/**
- * @enumNames ["Черный", "Белый"]
- */
-export type CatalogProductColor = 'black' | 'white';
-
 export interface CatalogCardType extends HeadlineCommonProps, ImageContent {
   /** @title Цена в рублях */
   price?: number;
   /** @title Доступные цвета */
-  colors?: CatalogProductColor[];
+  colors?: ProductColorVersion[];
   /**
    * @title Кнопка
    * @default {

package/mobile/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -1,43 +1,25 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
-
-/**
- * @hidden
- */
-export type Row = {
-  header: RowHeader;
-  data: CellData[][];
-};
+import type { DescriptionProps, LabelProps, TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Ячейка
  */
-export interface CellData {
-  /** @title Заголовок */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-}
+export type CellData = LabelProps & DescriptionProps;
 
 /**
  * @title Шапка колонки
  */
-export interface ColumnHeader {
-  /** @title Заголовок */
-  title?: string;
+export type ColumnHeader = TitleProps & {
   /** @title Подзаголовок */
   subtitle?: string;
-  /**
-   * @default { "format": "webp", "size": { "width": 24 } }
-   */
+  /** @default { "format": "webp", "size": { "width": 24 } } */
   icon?: Picture;
-  /**
-   * @default { "format": "webp", "size": { "width": 100 } }
-   */
+  /** @default { "format": "webp", "size": { "width": 100 } } */
   image?: Picture;
   link?: LinkProps;
-}
+};
 
 /**
  * @title Продукт
@@ -56,32 +38,12 @@ export interface RowHeader {
   title?: string;
 }
 
-/**
- * @title Ячейка
- */
-export interface TableColumnData {
-  rowHeader?: string;
-  cell: CellData[];
-}
-
-/**
- * @title Параметр
- */
-export interface TableColumnHeader {
-  /** @title Заголовок */
-  title?: string;
-
-  icon?: Picture;
-}
-
 /**
  * @title Сравнительная таблица
  */
-export interface ComparisonTableContent {
-  /** @title Заголовок */
-  title?: string;
+export type ComparisonTableContent = TitleProps & {
   /** @title Параметры */
-  rowHeaders?: RowHeader[];
+  rowHeaders?: TitleProps[];
   /** @title Продукты */
   columns?: Column[];
   /** @title Закрасить первую колонку */
@@ -90,4 +52,4 @@ export interface ComparisonTableContent {
   visibleRowLength?: number;
   /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
   orientation?: ListOrientation; // TODO: мобильный проп
-}
+};

package/mobile/src/components/ComparisonTable/TableColumn.tsx

@@ -1,11 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { IconProps } from '../../model/Picture';
 import type { UniBlockProps } from '../../types';
+import type { TitleProps } from '../../model/HeadlineType';
 import { Button } from '../../ui-kit/Button/Button';
+import { CellData } from './ComparisonTableContent';
 import { GRADIENT } from './constants';
 import { HeaderCell } from './HeaderCell';
 import { TableCell } from './TableCell';
-import type { TableColumnData, TableColumnHeader } from './ComparisonTableContent';
+
+export interface TableColumnData {
+  rowHeader?: string;
+  cell: CellData[];
+}
+
+export type TableColumnHeader = TitleProps & IconProps;
 
 export interface TableColumnProps extends UniBlockProps {
   header: TableColumnHeader;

package/mobile/src/components/ComparisonTable/TableRow.tsx

@@ -1,10 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Row } from './ComparisonTableContent';
+import type { CellData, RowHeader } from './ComparisonTableContent';
 import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
 import { TableCarouselContainer } from './TableCarouselContainer';
 import { TableCell } from './TableCell';
 import { TableRowContainer } from './TableRowContainer';
 
+export interface Row {
+  header: RowHeader;
+  data: CellData[][];
+}
 export interface TableRowProps {
   className?: string;
   row: Row;

package/mobile/src/components/ContentPage/computeAPIFallback.spec.ts

@@ -0,0 +1,63 @@
+import { Fallback, FallbackMap } from '../../types/Fallback';
+import { Blocks } from '../Blocks';
+import { computeAPIFallback, getPageFallbackMap, loadBlockFallback } from './computeAPIFallback';
+
+describe('computeAPIFallback', () => {
+  it('should return fallback data', async () => {
+    const fallbackData: Fallback = {
+      key: 'data',
+    };
+
+    const blockFallback = await computeAPIFallback(Blocks)();
+
+    expect(blockFallback).toEqual(fallbackData);
+  });
+});
+
+describe('loadBlockFallback', () => {
+  it('should load block fallback', async () => {
+    const headerBlockFallback: FallbackMap = {
+      key: expect.any(Function),
+    };
+
+    const blockName = 'Header';
+    const blockFallback = await loadBlockFallback(blockName);
+
+    expect(blockFallback).toEqual(headerBlockFallback);
+  });
+});
+
+describe('getPageFallbackMap', () => {
+  it('should return unique fallbacks (for page) from blocks fallback map', async () => {
+    const pageFallbackMap = {
+      key: expect.any(Function),
+      key2: expect.any(Function),
+    };
+
+    const blocksFallbackMap: Array<FallbackMap | undefined> = [
+      undefined,
+      { key: expect.any(Function) },
+      { key2: expect.any(Function) },
+      undefined,
+      { key: expect.any(Function) },
+    ];
+
+    expect(getPageFallbackMap(blocksFallbackMap)).toEqual(pageFallbackMap);
+  });
+
+  it('should not return unique fallbacks (for page) from blocks fallback map', async () => {
+    const pageFallbackMap = {
+      key: expect.any(Function),
+    };
+
+    const blocksFallbackMap: Array<FallbackMap | undefined> = [
+      undefined,
+      { key: expect.any(Function) },
+      { key2: expect.any(Function) },
+      undefined,
+      { key: expect.any(Function) },
+    ];
+
+    expect(getPageFallbackMap(blocksFallbackMap)).not.toEqual(pageFallbackMap);
+  });
+});

package/mobile/src/components/ContentPage/computeAPIFallback.ts

@@ -0,0 +1,55 @@
+import type { Fallback, FallbackMap } from '../../types/Fallback';
+import type { BlocksRegistry } from './ContentPage';
+
+interface FallbackData {
+  key: string;
+  data: unknown;
+}
+
+export const computeAPIFallback =
+  (blocksRegistry: BlocksRegistry) => async (): Promise<Fallback> => {
+    const blocksFallbackMap = await Promise.all(Object.keys(blocksRegistry).map(loadBlockFallback));
+    const pageFallbackMap = getPageFallbackMap(blocksFallbackMap);
+    const fallbackData = await Promise.allSettled(
+      Object.entries(pageFallbackMap).map(async ([key, fetcher]) => {
+        const data = await fetcher();
+
+        return { key, data };
+      }),
+    );
+
+    return fallbackData
+      .filter((d): d is PromiseFulfilledResult<FallbackData> => d.status === 'fulfilled')
+      .reduce((res, item) => {
+        return {
+          ...res,
+          [item.value.key]: item.value.data,
+        };
+      }, {});
+  };
+
+export async function loadBlockFallback(blockName: string): Promise<FallbackMap | undefined> {
+  try {
+    const blockFallback = await import(`../${blockName}/${blockName}.fallback`);
+
+    return blockFallback && blockFallback['fallback']
+      ? await blockFallback['fallback']()
+      : undefined;
+  } catch (error) {
+    return undefined;
+  }
+}
+
+export function getPageFallbackMap(blocksFallbackMap: Array<FallbackMap | undefined>): FallbackMap {
+  return blocksFallbackMap
+    .filter((m): m is FallbackMap => Boolean(m))
+    .reduce((result, fallbackMap) => {
+      for (const [key, fetcher] of Object.entries(fallbackMap)) {
+        if (!result[key]) {
+          result[key] = fetcher;
+        }
+      }
+
+      return result;
+    }, {});
+}

package/mobile/src/components/ErrorBlock/ErrorBlockContent.ts

@@ -1,5 +1,6 @@
 import type { Picture } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Изображение
@@ -7,6 +8,20 @@ import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 export type ErrorImageDef = {
   /** @default Image */
   errorContentType: 'Image';
+  /**
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 460
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 276,
+   *       "format": "webp",
+   *       "alignment": "center"
+   *   }]
+   * }
+   */
   image?: Picture;
 };
 
@@ -41,12 +56,10 @@ export type ErrorType =
 /**
  * @title Блок ошибки
  */
-export interface ErrorBlockContent {
-  /** @title Заголовок */
-  title?: string;
+export type ErrorBlockContent = TitleProps & {
   /** @title Описание */
   subtitle?: string;
   error?: ErrorContentDef;
   /** @title Кнопка */
   button?: ButtonProps;
-}
+};

package/mobile/src/components/ExchangeRateTile/ExchangeRateTileContent.ts

@@ -1,10 +1,9 @@
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Курсы обмена валют
  */
-export interface ExchangeRateTileContent {
-  /** @title Заголовок */
-  title?: string;
+export type ExchangeRateTileContent = TitleProps & {
   button?: ButtonProps;
-}
+};

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

@@ -1,6 +1,6 @@
 import { Input } from '../../ui-kit/Input/Input';
-import { Select } from '../../ui-kit/Select/Select';
-import { SelectOption } from '../../ui-kit/Select/SelectOption';
+import { SelectCustom } from '../../ui-kit/SelectCustom/SelectCustom';
+import type { OptionProps } from '../../ui-kit/SelectCustom/SelectCustom';
 import type { Currency } from './CurrencyProps';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 
@@ -15,28 +15,25 @@ interface InputProps {
 
 export function renderInput(props: InputProps) {
   const { placeholder, rates, selected, value, setValue, setSelected } = props;
+  const ratesOptions: OptionProps[] = rates.map((_) => ({ key: _.code ?? '', text: _.code ?? '' }));
+  const selectedValue: OptionProps = { key: selected, text: selected };
 
   return (
-    <div className="relative flex items-center">
+    <div className="relative flex">
       <Input
-        className="shrink-0 h-13 border pl-4 pt-4 pb-4 rounded-md text-l w-full appearance-none -mr-12"
+        className="shrink-0 h-14 pl-4 pt-4 pb-4 text-l w-full appearance-none mr-[-90px]"
         placeholder={placeholder}
         type="text"
         value={value}
         onChange={setValue}
       />
-      {rates.length ? (
-        <Select
-          className="shrink-0 w-20 h-9 -translate-x-8 bg-transparent"
-          value={selected}
-          onChange={(_) => setSelected(_ as Currency)}
-        >
-          {rates.map((_, i) => (
-            <SelectOption key={String(i)} value={_.code}>
-              {_.code}
-            </SelectOption>
-          ))}
-        </Select>
+      {ratesOptions.length ? (
+        <SelectCustom
+          isBorder={false}
+          onChange={(_) => setSelected(_.key as Currency)}
+          options={ratesOptions}
+          value={selectedValue}
+        />
       ) : null}
     </div>
   );

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

@@ -9,6 +9,7 @@ import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
 
 import { useSitemap } from '../../services/sitemap/useSitemap';
+import type { Fallback } from '../../types/Fallback';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
@@ -25,8 +26,10 @@ export const Footer = JSX<FooterProps>(
     socialMedia,
     context,
     horizontalNavigationTitle,
+    page,
   }) => {
-    const sitemap = useSitemap();
+    const fallback: Fallback | undefined = page?.fallback;
+    const sitemap = useSitemap(fallback);
     const dispositions = sitemap?.dispositions;
 
     return (

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

@@ -1,6 +1,7 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapProps } from '../../services/sitemap/SitemapProps';
-import type { Picture } from '../../model/Picture';
+import type { IconProps } from '../../model/Picture';
+import type { DescriptionProps } from '../../model/HeadlineType';
 
 /**
  * @title Тип контакта
@@ -14,13 +15,11 @@ export type ContactType = 'tel' | 'email';
 /**
  * @title Контакт
  */
-export interface ContactInfo {
+export type ContactInfo = DescriptionProps & {
   /** @title Текст */
   text?: string;
   type?: ContactType;
-  /** @title Описание */
-  description?: string;
-}
+};
 
 /**
  * @required ["href"]
@@ -30,10 +29,7 @@ export type SocialMedia = Omit<LinkProps, 'text'>;
 /**
  * @title Пункт подменю
  */
-export interface SubMenuItem extends LinkProps {
-  /** @title Иконка подменю */
-  icon?: Picture;
-}
+export type SubMenuItem = LinkProps & IconProps;
 
 /**
  * @title Подвал

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

@@ -1,12 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
+import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 import type { UniBlockProps } from '../../types';
 import type { FooterLink } from './FooterLink';
-import { HorizontalNavigationLink } from './HorizontalNavigationLink';
+import type { TitleProps } from '../../model/HeadlineType';
 
-export interface HorizontalNavigationProps extends FooterLink, UniBlockProps {
-  title?: string;
-}
+export interface HorizontalNavigationProps extends FooterLink, UniBlockProps, TitleProps {}
 
 export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
   ({ title, links, className = '', context }) => {

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

@@ -5,13 +5,15 @@ import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import type { TopMenuItem } from '../../services/sitemap/SitemapProps';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import type { UniBlockProps } from '../../types';
+import type { Fallback } from '../../types/Fallback';
 
 export interface SitemapProps extends UniBlockProps {
   items?: TopMenuItem[];
+  fallback?: Fallback;
 }
 
-export const Sitemap = JSX<SitemapProps>(({ className = '', items, context }) => {
-  const sitemap = useSitemap();
+export const Sitemap = JSX<SitemapProps>(({ className = '', items, fallback, context }) => {
+  const sitemap = useSitemap(fallback);
   const mergedItems = mergeTopItems(sitemap.topItems, items);
   const linkParams = {
     router: context.useRouter(),