@redneckz/wildless-cms-uni-blocks 0.3.69 → 0.3.71

package/src/components/Calculator/Calculator.tsx

@@ -1,10 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { FuncReturnVoid, UniBlockProps } from '../../types';
-import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
 import { Img } from '../../ui-kit/Img/Img';
-import type { CalculatorBlockDef, CalculatorContent } from './CalculatorContent';
-import { CalculatorNav } from './CalculatorContent';
+import type { CalculatorBlockDef, CalculatorContent, CalculatorNav } from './CalculatorContent';
 import { renderCalculatorBlock } from './renderCalculatorBlock';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
 export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
 
@@ -22,9 +21,6 @@ type NavButtonProps = {
   onClick: FuncReturnVoid<MouseEvent>;
 };
 
-const arrowBtnStyle =
-  'absolute w-[56px] h-[56px] min-h-[56px] max-h-[56px] top-1 z-10 mt-[25px] bg-white rounded-full';
-
 export const Calculator = JSX<CalculatorProps>(
   ({ className = '', context, calcTabs = [], anchor = null }) => {
     const tabsNav = calcTabs.map((_) => _.nav || ({} as CalculatorNav));
@@ -50,22 +46,12 @@ export const Calculator = JSX<CalculatorProps>(
           {tabsNav.length > 1
             ? renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex })
             : null}
-          {showPrevButton ? (
-            <ArrowButton
-              className={`${arrowBtnStyle} left-3 top-3`}
-              onClick={handlePrevClick}
-              ariaLabel="Пролистать влево"
-              data-block-control="scroll-left"
-            />
-          ) : null}
-          {showNextButton ? (
-            <ArrowButton
-              className={`${arrowBtnStyle} right-3 top-3 rotate-180`}
-              onClick={handleNextClick}
-              ariaLabel="Пролистать вправо"
-              data-block-control="scroll-right"
-            />
-          ) : null}
+          {renderArrows({
+            handler: [handlePrevClick, handleNextClick],
+            isShown: [showPrevButton, showNextButton],
+            btnClass: ['left-3', 'right-3'],
+            className: 'top-8',
+          })}
         </div>
         <div
           className="flex"

package/src/components/Calculator/getCalculatorParams.ts

@@ -8,7 +8,9 @@ interface GetCalculatorParamsParams {
 export const getCalculatorParams = (params: GetCalculatorParamsParams) => {
   const { tableRows, isAnnuity = false } = params;
 
-  if (!tableRows) return {};
+  if (!tableRows) {
+    return {};
+  }
 
   const calculatorParams = tableRows.find((row) => row.isAnnuity === isAnnuity);
 

package/src/components/Calculator/getCreditRate.ts

@@ -10,7 +10,9 @@ interface GetCreditRateParams {
 export const getCreditRate = (params: GetCreditRateParams) => {
   const { calculatorParams, isInsurance } = params;
 
-  if (!calculatorParams) return DEFAULT_RATE;
+  if (!calculatorParams) {
+    return DEFAULT_RATE;
+  }
 
   return isInsurance
     ? calculatorParams?.rateWithInsurance || DEFAULT_RATE

package/src/components/Calculator/getMonthlyPayment.ts

@@ -15,7 +15,9 @@ interface GetMonthlyPaymentParams {
 export const getMonthlyPayment = (params: GetMonthlyPaymentParams) => {
   const { calculatorParams, paymentType, rate, sum, months } = params;
 
-  if (!calculatorParams) return 0;
+  if (!calculatorParams) {
+    return 0;
+  }
 
   const finalSum = clamp(
     sum,

package/src/components/Calculator/renderCalculatorBlock.tsx

@@ -1,14 +1,7 @@
 import type { JSXBlock } from '../../components/ContentPage/ContentPage';
-import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
 import type { CalculatorBlockDef } from './CalculatorContent';
 import { EmbeddableCalcBlocks, EmbeddableCalcProps } from './EmbeddableCalcBlocks';
 
-type EmbeddableCalcBlocks = {
-  blockCalcTabs?: CalculatorBlockDef[];
-  context: ContentPageContext;
-  className?: string;
-};
-
 export const renderCalculatorBlock =
   ({ context, className }: any) =>
   (blockCalcTabs: CalculatorBlockDef, i: number) => {

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

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { ComparisonTable } from './ComparisonTable';
 import type { Column } from './ComparisonTableContent';
 
@@ -96,30 +96,6 @@ const columns: Column[] = [
       ],
     ],
   },
-  {
-    header: {
-      title: 'Профсоюзная',
-      image: image3,
-      link: {
-        text: 'Подробнее',
-        href: '/credits',
-      },
-    },
-    data: [
-      [{ label: 'Нет' }],
-      [{ label: 'Бесплатно' }],
-      [{ label: 'Есть' }],
-      [{ label: 'До 20%' }],
-      [
-        {
-          label: 'Бесплатно',
-          description: 'При обороте по карте от 10000 ₽ в месяц',
-        },
-      ],
-      [{ label: '69 рублей в месяц' }],
-      [{ description: 'Для членов профсоюзных организаций' }],
-    ],
-  },
 ];
 export default {
   default: (
@@ -131,7 +107,7 @@ export default {
         context={context}
         rowHeaders={rowHeaders}
         orientation="vertical"
-        columns={Array(2).fill(columns).flat()}
+        columns={columns}
         visibleRowLength={2}
       />
     </div>

package/src/components/ComparisonTable/ComparisonTable.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { ComparisonTable } from './ComparisonTable';
 import type { Column } from './ComparisonTableContent';
 

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
-import { Img } from '../../ui-kit/Img/Img';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
 
 export interface HeaderCellProps {
   icon?: Picture;
@@ -13,6 +13,10 @@ export interface HeaderCellProps {
   link?: LinkProps;
 }
 
+const headingStyle = (isFillGradient = false): string => (isFillGradient ? 'text-white' : '');
+const subtitleStyle = (isFillGradient = false): string =>
+  `text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
+
 export const HeaderCell = JSX<HeaderCellProps>(
   ({ icon, image, title, subtitle, isFillGradient }) => (
     <div role="columnheader" scope="col">
@@ -30,19 +34,9 @@ export const HeaderCell = JSX<HeaderCellProps>(
         </div>
       )}
       {title ? (
-        <Heading
-          headingType="h4"
-          className={`${isFillGradient ? 'text-white' : ''}`}
-          title={title}
-        />
-      ) : null}
-      {subtitle ? (
-        <div
-          className={`text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`}
-        >
-          {subtitle}
-        </div>
+        <Heading headingType="h4" className={headingStyle(isFillGradient)} title={title} />
       ) : null}
+      {subtitle ? <div className={subtitleStyle(isFillGradient)}>{subtitle}</div> : null}
     </div>
   ),
 );

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

@@ -22,6 +22,11 @@ export const TableCell = JSX<TableCellProps>(({ cell, rowHeader, isFillGradient
   );
 });
 
+const labelStyle = (isFillGradient = false): string =>
+  `text-right ${isFillGradient ? 'text-white' : ''}`;
+const descriptionStyle = (isFillGradient = false): string =>
+  `text-right ${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`;
+
 const renderCellInner =
   (isFillGradient: boolean, rowHeader?: string) =>
   ({ label, description }: CellData, i: number) =>
@@ -31,15 +36,9 @@ const renderCellInner =
           {rowHeader}
         </div>
         <div className="basis-1/2">
-          {label ? (
-            <div className={`text-right ${isFillGradient ? 'text-white' : ''}`}>{label}</div>
-          ) : null}
+          {label ? <div className={labelStyle(isFillGradient)}>{label}</div> : null}
           {description ? (
-            <div
-              className={`text-right ${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}
-            >
-              {description}
-            </div>
+            <div className={descriptionStyle(isFillGradient)}>{description}</div>
           ) : null}
         </div>
       </div>

package/src/components/ComparisonTable/TableCell.tsx

@@ -28,17 +28,14 @@ export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isF
   );
 });
 
+const labelStyle = (isFillGradient = false): string =>
+  `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`;
+const descriptionStyle = (isFillGradient = false): string =>
+  `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`;
+
 const renderCellInner = ({ label, description }: CellData, i: number, isFillGradient: boolean) => (
   <div key={String(i)} className="first:pt-7 pt-6 last:pb-7">
-    {label ? (
-      <h4 className={`text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`}>{label}</h4>
-    ) : null}
-    {description ? (
-      <div
-        className={`text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`}
-      >
-        {description}
-      </div>
-    ) : null}
+    {label ? <h4 className={labelStyle(isFillGradient)}>{label}</h4> : null}
+    {description ? <div className={descriptionStyle(isFillGradient)}>{description}</div> : null}
   </div>
 );

package/src/components/ComparisonTable/TableRow.tsx

@@ -14,18 +14,15 @@ export interface TableRowProps {
   isLastRow: boolean;
 }
 
+const titleStyle = (isLastRow = false) =>
+  `text-sm py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
+    isLastRow ? 'border-b-0' : 'border-solid'
+  }`;
+
 export const TableRow = JSX<TableRowProps>(
   ({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (
     <TableRowContainer>
-      {header?.title ? (
-        <div
-          className={`text-sm py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
-            !isLastRow ? 'border-solid' : 'border-b-0'
-          }`}
-        >
-          {header.title}
-        </div>
-      ) : null}
+      {header?.title ? <div className={titleStyle(isLastRow)}>{header.title}</div> : null}
       {data?.length ? (
         <TableCarouselContainer activeCardIndex={activeCardIndex} columnWidth={COLUMN_WIDTH}>
           {data.map((cell, i) => (

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

@@ -1,4 +1,4 @@
-import { mobileContext } from '../../setup-fixture';
+import { mobileContext } from '../../react/setup-fixture';
 
 import type { ContentPageDef } from '../../types';
 import { Blocks } from '../Blocks';

package/src/components/ContentPage/ContentPage.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import type { ContentPageDef } from '../../types';
 import { Blocks } from '../Blocks';

package/src/components/ContentPage/ContentPage.page.json

@@ -1953,11 +1953,6 @@
         }
       }
     },
-    {
-      "type": "CreditCalculator",
-      "anchor": "calculator",
-      "style": ["col-span-12"]
-    },
     {
       "type": "Recommendation",
       "style": ["col-span-12"],
@@ -2155,7 +2150,7 @@
       "content": {
         "title": "Страховые риски и продукты",
         "description": "Описание",
-        "insuranceSum": 500000,
+        "sum": 500000,
         "image": {
           "src": "insurance.png",
           "title": "страхование",
@@ -2188,6 +2183,55 @@
         ]
       }
     },
+    {
+      "type": "InsuranceAmountBlock",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Выбор страховой суммы",
+        "button": {
+          "href": "https://rshb.ru",
+          "text": "Выбрать программу"
+        },
+        "insuranceTabs": [
+          {
+            "title": "Индивидуальный",
+            "cards": [
+              {
+                "sum": 200000,
+                "fee": 2100,
+                "icon": { "icon": "ActualBalanceIcon" }
+              },
+              {
+                "sum": 200000,
+                "fee": 2100,
+                "icon": { "icon": "ActualBalanceIcon" }
+              },
+              {
+                "sum": 200000,
+                "fee": 2100,
+                "icon": { "icon": "ActualBalanceIcon" }
+              }
+            ]
+          },
+          {
+            "title": "Семейный",
+            "cards": [
+              {
+                "sum": 400000,
+                "fee": 3600,
+                "icon": { "icon": "ActualBalanceIcon" }
+              },
+              {
+                "sum": 400000,
+                "fee": 3600,
+                "icon": { "icon": "ActualBalanceIcon" }
+              }
+            ]
+          }
+        ]
+      }
+    },
+
     {
       "type": "Footer",
       "style": ["col-span-12"],

package/src/components/ContentPage/ContentPageContext.tsx

@@ -1,3 +1,6 @@
+import { VNode } from '../../model/VNode';
+import type { FuncReturnVoid } from '../../types';
+
 export interface Router {
   pathname: string;
   query: Record<string, string | string[] | undefined>;
@@ -20,19 +23,32 @@ export interface Search {
   setTerm: (t: string) => void;
 }
 
-export type AsyncDataHook = <Data, Error = any>(
+export type AsyncDataHook = <Data, Err = any>(
   key: string,
-  fetcher: (key: string) => Promise<Data>,
-) => { data?: Data; error?: Error };
+  fetcher: (fetcherKey: string) => Promise<Data>,
+) => { data?: Data; error?: Err };
 
 export type GeolocationHook = (defaultLocation: string) => [string, () => void];
 
+export type SetStateAction<S> = S | ((prevState: S) => S);
+export type SetStateHook = <State>(
+  initialState: State | (() => State),
+) => [State, FuncReturnVoid<SetStateAction<State>>];
+
+export interface IntersectionObserverTagProps {
+  Tag: string;
+  children?: VNode;
+  observerCallback: IntersectionObserverCallback;
+  observerOptions?: IntersectionObserverInit;
+}
+
 export interface ContentPageContext {
   useRouter: () => Router;
-  useState: <State>(initialState: State) => [State, (_: State) => void];
+  useState: SetStateHook;
   useAsyncData: AsyncDataHook;
   useGeolocation: GeolocationHook;
   useLikeService: () => LikeService;
   useSearch: () => Search;
   handlerDecorator?: HandlerDecorator;
+  IntersectionObserverTag: (props: IntersectionObserverTagProps & Record<string, any>) => VNode;
 }

package/src/components/ExchangeRateTile/CurrencyProps.ts

@@ -0,0 +1,5 @@
+export enum Currency {
+  RUB = 'RUB',
+  EUR = 'EUR',
+  USD = 'USD',
+}

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
-import type { ExchangeCurrencyItem } from './ExchangeRateTileContent';
+import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import { formatCurrency } from './formatCurrency';
 
 const TABLE_HEAD_STYLE = 'font-light text-left font-normal text-sm text-secondary-text';
@@ -31,7 +31,7 @@ export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurre
 });
 
 const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
-  const code = exchangeCurrencyItem?.currency?.currency;
+  const code = exchangeCurrencyItem?.code;
   return (
     <tr key={code} className="pb-1">
       <td className="pt-4">
@@ -41,10 +41,10 @@ const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
         </div>
       </td>
       <td className="pt-4 pl-11 m-title-md font-light">
-        {formatCurrency(exchangeCurrencyItem.buyExchangeRate)}
+        {formatCurrency(exchangeCurrencyItem.buy)}
       </td>
       <td className="pt-4 pl-11 m-title-md font-light">
-        {formatCurrency(exchangeCurrencyItem.saleExchangeRate)}
+        {formatCurrency(exchangeCurrencyItem.sell)}
       </td>
     </tr>
   );

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -1,47 +1,132 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Button } from '../../ui-kit/Button/Button';
-import { Input } from '../../ui-kit/Input/Input';
-import { Select } from '../../ui-kit/Select/Select';
-import { SelectOption } from '../../ui-kit/Select/SelectOption';
-import type { ExchangeCurrencyItem } from './ExchangeRateTileContent';
-
-export interface ExchangeCurrencyCalculatorProps {
-  exchangeCurrencyItems: ExchangeCurrencyItem[];
-  codes: string[];
+import type { FuncReturnVoid, UniBlockProps } from '../../types';
+import { calculateResult, formatValue } from './calculateResult';
+import { callbackCurrencySelect } from './callbackCurrencySelect';
+import { Currency } from './CurrencyProps';
+import { renderButton } from './renderButton';
+import { renderInput } from './renderInput';
+
+export interface ExchangeCurrencyItem {
+  code?: Currency;
+  buy?: number;
+  sell?: number;
+}
+export interface ExchangeCurrencyCalculatorProps extends UniBlockProps {
   className?: string;
+  currencyRatesBuy: ExchangeCurrencyItem[];
+  currencyRatesSell: ExchangeCurrencyItem[];
+}
+export interface CalcState {
+  inputSell: string;
+  inputBuy: string;
+  selectSell: Currency;
+  selectBuy: Currency;
 }
 
 export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
-  ({ codes, className = '' }) => {
+  ({ context, className = '', currencyRatesBuy, currencyRatesSell }) => {
+    const [calcState, setCalcState] = context.useState<CalcState>({
+      inputSell: '',
+      inputBuy: '',
+      selectSell: currencyRatesBuy?.[0]?.code || Currency.RUB,
+      selectBuy: currencyRatesSell?.[0]?.code || Currency.USD,
+    });
+
+    const handleSetCalcState = (newState: Partial<CalcState>) => {
+      setCalcState((oldState) => ({ ...oldState, ...newState }));
+    };
+
     return (
       <div className={`grid gap-3.5 ${className}`}>
-        {renderInput('Хочу продать', codes)}
-        {renderInput('Получу', codes, 'USD')}
-        <Button className="box-border mt-3.5 py-3 h-12 w-full" version="primary" href="#">
-          Купить валюту
-        </Button>
+        {renderInput({
+          placeholder: 'Хочу продать',
+          rates: currencyRatesBuy,
+          selected: calcState.selectSell,
+          setSelected: handleSelectSell(calcState, handleSetCalcState, currencyRatesSell),
+          value: calcState.inputSell,
+          setValue: (value) =>
+            handleInputSell(handleSetCalcState, currencyRatesSell)(
+              value,
+              calcState.selectSell,
+              calcState.selectBuy,
+            ),
+        })}
+        {renderInput({
+          placeholder: 'Получу',
+          rates: currencyRatesSell,
+          selected: calcState.selectBuy,
+          setSelected: handleSelectBuy(calcState, handleSetCalcState, currencyRatesBuy),
+          value: calcState.inputBuy,
+          setValue: (value) =>
+            handleInputBuy(handleSetCalcState, currencyRatesBuy)(
+              value,
+              calcState.selectBuy,
+              calcState.selectSell,
+            ),
+        })}
+        {renderButton()}
       </div>
     );
   },
 );
 
-function renderInput(placeholder: string, codes: string[], selected?: string) {
-  return (
-    <div className="relative flex items-center">
-      <Input
-        className="h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12"
-        type="number"
-        placeholder={`${placeholder}`}
-      />
-      {codes.length ? (
-        <Select className="h-9 -translate-x-4">
-          {codes.map((code, i) => (
-            <SelectOption key={String(i)} value={code} selected={code === selected}>
-              {code}
-            </SelectOption>
-          ))}
-        </Select>
-      ) : null}
-    </div>
-  );
-}
+const handleSelectSell =
+  (
+    calcState: CalcState,
+    setCalcState: FuncReturnVoid<Partial<CalcState>>,
+    currencyRatesSell: ExchangeCurrencyItem[],
+  ) =>
+  (value: Currency) => {
+    setCalcState({ selectSell: value });
+    callbackCurrencySelect({
+      value,
+      oppositeValue: calcState.selectBuy,
+      handleConvert: (codeFrom = calcState.selectSell, codeTo = calcState.selectBuy) => {
+        handleInputSell(setCalcState, currencyRatesSell)(calcState.inputSell, codeFrom, codeTo);
+      },
+    });
+  };
+
+const handleSelectBuy =
+  (
+    calcState: CalcState,
+    setCalcState: FuncReturnVoid<Partial<CalcState>>,
+    currencyRatesBuy: ExchangeCurrencyItem[],
+  ) =>
+  (value: Currency) => {
+    setCalcState({ selectBuy: value });
+    callbackCurrencySelect({
+      value,
+      oppositeValue: calcState.selectSell,
+      handleConvert: (codeTo = calcState.selectBuy, codeFrom = calcState.selectSell) =>
+        handleInputBuy(setCalcState, currencyRatesBuy)(calcState.inputBuy, codeTo, codeFrom),
+    });
+  };
+
+const handleInputSell =
+  (setCalcState: FuncReturnVoid<Partial<CalcState>>, currencyRatesSell: ExchangeCurrencyItem[]) =>
+  (value: string, codeFrom: Currency, codeTo: Currency) => {
+    setCalcState({ inputSell: formatValue(value), selectBuy: codeTo });
+    const rate =
+      currencyRatesSell.find((_) => _.code === codeTo)?.buy ||
+      currencyRatesSell.find((_) => _.code === codeFrom)?.sell;
+    if (rate) {
+      setCalcState({
+        inputBuy: String(calculateResult(value, rate, codeFrom === Currency.RUB) || ''),
+      });
+    }
+  };
+
+const handleInputBuy =
+  (setCalcState: FuncReturnVoid<Partial<CalcState>>, currencyRatesBuy: ExchangeCurrencyItem[]) =>
+  (value: string, codeTo: Currency, codeFrom: Currency) => {
+    setCalcState({ inputBuy: formatValue(value), selectSell: codeFrom });
+    const rate =
+      currencyRatesBuy.find((_) => _.code === codeFrom)?.sell ||
+      currencyRatesBuy.find((_) => _.code === codeTo)?.buy;
+    if (rate) {
+      setCalcState({
+        inputSell: String(calculateResult(value, rate, codeTo === Currency.RUB) || ''),
+      });
+    }
+  };

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

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { ExchangeRateTile } from './ExchangeRateTile';