@redneckz/wildless-cms-uni-blocks 0.3.83 → 0.3.85

package/src/components/Calculator/constants.ts

@@ -1,8 +1,45 @@
-export const DEFAULT_MIN_SUM = 30000;
-export const DEFAULT_MAX_SUM = 3000000;
+import { BonusCalculatorSourceBookParams } from './useBonusCalculatorParams';
+import { CreditCalculatorSourceBookParams } from './useCreditCalculatorParams';
+
+export const DEFAULT_MIN_SUM = 60000;
+export const DEFAULT_MAX_SUM = 2000000;
 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_MIN_MONTHS = 13;
+export const DEFAULT_MAX_MONTHS = 60;
 export const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
 
 export const MONTHS_IN_YEAR = 12;
+
+export const MONTHLY_INTEREST_RATE = MONTHS_IN_YEAR * 100;
+
+export const DEFAULT_CREDIT_CALCULATOR_PARAMS: CreditCalculatorSourceBookParams = {
+  minSum: DEFAULT_MIN_SUM,
+  maxSum: DEFAULT_MAX_SUM,
+  minMonths: DEFAULT_MIN_MONTHS,
+  maxMonths: DEFAULT_MAX_MONTHS,
+  rateBottomRange: 10,
+  rateTopRange: 7,
+  isSalaryClient: true,
+  isStateEmployee: true,
+  isInsurance: true,
+  sumBorder: 999999,
+};
+
+export const DEFAULT_TRAVEL_MIN_SUM = 6000;
+export const DEFAULT_REST_MIN_SUM = 6000;
+
+export const DEFAULT_BONUS_CALCULATOR_PARAMS: BonusCalculatorSourceBookParams = {
+  minSumTravel: 6000,
+  maxSumTravel: 200000,
+  minSumOther: 6000,
+  maxSumOther: 200000,
+  maxBonus: 5000,
+  prefMonthsNum: 2,
+  prefTravelBonusRate: 0.015,
+  prefRestBonusRate: 0.01,
+  travelBonusRate: 0.015,
+  restBonusRate: 0.01,
+};
+
+export const CREDIT_CALC_DEFAULT_DIR = 'credit-calculator-data';
+export const BONUS_CALC_DEFAULT_DIR = 'bonus-calculator-data';

package/src/components/Calculator/getBonus.ts

@@ -0,0 +1,38 @@
+import { MONTHS_IN_YEAR } from './constants';
+import type { BonusCalculatorSourceBookParams } from './useBonusCalculatorParams';
+
+export const getBonus = (
+  params: BonusCalculatorSourceBookParams,
+  bonusTravelValue: number,
+  bonusOtherValue: number,
+) => {
+  const {
+    minSumTravel,
+    minSumOther,
+    maxBonus,
+    prefMonthsNum,
+    prefTravelBonusRate,
+    prefRestBonusRate,
+    travelBonusRate,
+    restBonusRate,
+  } = params;
+
+  if (bonusTravelValue === minSumTravel && bonusOtherValue === minSumOther) {
+    return [0, 0];
+  }
+
+  const prefBonus = Math.min(
+    Math.round(prefTravelBonusRate * bonusTravelValue) +
+      Math.round(prefRestBonusRate * bonusOtherValue),
+    maxBonus,
+  );
+
+  const bonus = Math.min(
+    Math.round(travelBonusRate * bonusTravelValue) + Math.round(restBonusRate * bonusOtherValue),
+    maxBonus,
+  );
+
+  const yearBonus = prefBonus * prefMonthsNum + bonus * (MONTHS_IN_YEAR - prefMonthsNum);
+
+  return [prefBonus, yearBonus];
+};

package/src/components/Calculator/getDefaultMonths.ts

@@ -1,7 +1,2 @@
-import { DEFAULT_MONTHS } from './constants';
-import type { CalculatorParams } from './CalculatorContent';
-
-export const getDefaultMonths = (calculatorParams: CalculatorParams) =>
-  calculatorParams.maxMonths && calculatorParams.minMonths
-    ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
-    : DEFAULT_MONTHS;
+export const getDefaultMonths = (minMonths: number, maxMonths: number) =>
+  Math.round((maxMonths - minMonths) / 2);

package/src/components/Calculator/getDefaultSum.ts

@@ -1,7 +1,4 @@
 import { DEFAULT_SUM } from './constants';
-import type { CalculatorParams } from './CalculatorContent';
 
-export const getDefaultSum = (calculatorParams: CalculatorParams) =>
-  calculatorParams.maxSum && calculatorParams.minSum
-    ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
-    : DEFAULT_SUM;
+export const getDefaultSum = (minSum?: number, maxSum?: number) =>
+  maxSum && minSum ? (maxSum - minSum) / 2 : DEFAULT_SUM;

package/src/components/Calculator/getMonthlyPayment.ts

@@ -1,35 +1,19 @@
-import { clamp } from '../../utils/clamp';
-import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM, MONTHS_IN_YEAR } from './constants';
-import type { CalculatorParams } from './CalculatorContent';
+/**
+ * Формулы расчёта аннуитетных и дифференцированных платежей:
+ * https://finuslugi.ru/potrebitelskie_kredity/stat_annuitetnye_i_differentsirovannye_platezhi
+ */
 
-type PaymentType = 'annuity' | 'differentiated';
+import { MONTHLY_INTEREST_RATE, MONTHS_IN_YEAR } from './constants';
+import type { CreditCalculatorUserInputParams } from './useCreditCalculatorParams';
 
-interface GetMonthlyPaymentParams {
-  calculatorParams?: CalculatorParams;
-  paymentType: PaymentType;
-  rate: number;
-  sum: number;
-  months: number;
-}
+export const getMonthlyPayment = (rate: number, params: CreditCalculatorUserInputParams) => {
+  const { isAnnuity, moneyValue, monthsValue } = params;
 
-export const getMonthlyPayment = (params: GetMonthlyPaymentParams) => {
-  const { calculatorParams, paymentType, rate, sum, months } = params;
+  if (isAnnuity) {
+    const i = rate / MONTHLY_INTEREST_RATE; // Используется значение ставки в процентах
 
-  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));
+    return moneyValue * (i + i / (Math.pow(1 + i, monthsValue) - 1));
   } else {
-    return finalSum / months + finalSum * (Number(rate) / 12);
+    return Math.round(moneyValue / monthsValue) + moneyValue * (rate / (MONTHS_IN_YEAR * 100)); // Используется значение ставки (rate) в процентах, делённое на сто.
   }
 };

package/src/components/Calculator/renderCalculatorBlock.tsx

@@ -1,11 +1,11 @@
-import type { JSXBlock } from '../../components/ContentPage/ContentPage';
+import type { JSXBlock } from '../ContentPage/ContentPage';
 import type { CalculatorBlockDef } from './CalculatorContent';
 import { EmbeddableCalcBlocks, EmbeddableCalcProps } from './EmbeddableCalcBlocks';
 
 export const renderCalculatorBlock =
   ({ context, className }: any) =>
-  (blockCalcTabs: CalculatorBlockDef, i: number) => {
-    const type = blockCalcTabs?.calcType;
+  (block: CalculatorBlockDef, i: number) => {
+    const type = block?.calcType;
     if (!type || !(type in EmbeddableCalcBlocks)) {
       return null;
     }
@@ -18,7 +18,7 @@ export const renderCalculatorBlock =
         role="listitem"
       >
         <div className="box-border p-9 w-full">
-          <EmbeddedBlock context={context} {...blockCalcTabs} className="flex justify-between" />
+          <EmbeddedBlock context={context} {...block} className="flex justify-between" />
         </div>
       </section>
     );

package/src/components/Calculator/renderInitialFeeInput.tsx

@@ -1,28 +1,24 @@
+// TEMP
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM } from './constants';
-import type { CalculatorParams } from './CalculatorContent';
 
 const STEP_MONEY = 1000;
 
-interface RenderWantedSumInputProps {
-  calculatorParams: CalculatorParams;
-  moneyValue: number | undefined;
-  defaultSum: number;
-  setMoneyValue: InputRangeProps['onChange'];
+interface RenderWantedSumInputParams {
+  moneyValue: number;
 }
 
-export function renderInitialFeeInput(props: RenderWantedSumInputProps) {
-  const { calculatorParams, moneyValue, defaultSum, setMoneyValue } = props;
+export function renderInitialFeeInput(title, props: RenderWantedSumInputParams, callback) {
+  const { moneyValue } = props;
 
-  const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
-  const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
+  const minSum = DEFAULT_MIN_SUM;
+  const maxSum = DEFAULT_MAX_SUM;
 
   return (
     <InputRange
       className="mt-6"
-      title="Первоначальный взнос, ₽ "
+      title={title}
       items={[
         `От ${addSpacesBetweenNumbers(minSum)} рублей`,
         `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
@@ -30,8 +26,8 @@ export function renderInitialFeeInput(props: RenderWantedSumInputProps) {
       min={minSum}
       max={maxSum}
       step={STEP_MONEY}
-      value={moneyValue || defaultSum}
-      onChange={setMoneyValue}
+      value={moneyValue}
+      onChange={callback}
     />
   );
 }

package/src/components/Calculator/renderMonthsInput.tsx

@@ -1,19 +1,16 @@
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
+import { clamp } from '../../utils/clamp';
 
 const STEP_MONTHS = 1;
 
-interface RenderMonthsInputProps {
-  title: string;
+interface RenderMonthsInputParams {
   minMonths: number;
   maxMonths: number;
-  monthsValue: number | undefined;
-  defaultMonths: number;
-  setMonthsValue: InputRangeProps['onChange'];
+  monthsValue: number;
 }
 
-export function renderMonthsInput(props: RenderMonthsInputProps) {
-  const { title, minMonths, maxMonths, monthsValue, defaultMonths, setMonthsValue } = props;
+export function renderMonthsInput(title: string, params: RenderMonthsInputParams, callback) {
+  const { minMonths, maxMonths, monthsValue } = params;
   const monthText = (month) => {
     const text = Number(month) % 10 === 1 ? 'месяца' : 'месяцев';
 
@@ -28,8 +25,8 @@ export function renderMonthsInput(props: RenderMonthsInputProps) {
       min={minMonths}
       max={maxMonths}
       step={STEP_MONTHS}
-      value={monthsValue || defaultMonths}
-      onChange={setMonthsValue}
+      value={clamp(monthsValue, minMonths, maxMonths)}
+      onChange={callback}
     />
   );
 }

package/src/components/Calculator/renderPaymentTypeSelector.tsx

@@ -0,0 +1,12 @@
+import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
+
+export function renderPaymentTypeSelector(context, { items, checkedItem, onChange }) {
+  return (
+    <RadioButtonGroup
+      context={context}
+      items={items}
+      checkedItem={checkedItem}
+      onChangeCheckedItem={onChange}
+    />
+  );
+}

package/src/components/Calculator/renderRealEstateValue.tsx

@@ -1,33 +1,29 @@
+// TEMP
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM } from './constants';
-import type { CalculatorParams } from './CalculatorContent';
 
 const STEP_MONEY = 1000;
 
 interface RenderRealEstateValueInputProps {
-  calculatorParams: CalculatorParams;
-  moneyValue: number | undefined;
-  defaultSum: number;
-  setMoneyValue: InputRangeProps['onChange'];
+  moneyValue: number;
 }
 
-export function renderRealEstateValue(props: RenderRealEstateValueInputProps) {
-  const { calculatorParams, moneyValue, defaultSum, setMoneyValue } = props;
+export function renderRealEstateValue(title, props: RenderRealEstateValueInputProps, callback) {
+  const { moneyValue } = props;
 
-  const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
-  const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
+  const minSum = DEFAULT_MIN_SUM;
+  const maxSum = DEFAULT_MAX_SUM;
 
   return (
     <InputRange
-      title="Стоимость недвижимости, ₽ "
+      title={title}
       items={[`От ${addSpacesBetweenNumbers(minSum)} ₽`, `До ${addSpacesBetweenNumbers(maxSum)} ₽`]}
       min={minSum}
       max={maxSum}
       step={STEP_MONEY}
-      value={moneyValue || defaultSum}
-      onChange={setMoneyValue}
+      value={moneyValue}
+      onChange={callback}
     />
   );
 }

package/src/components/Calculator/renderWantedSumInput.tsx

@@ -1,34 +1,21 @@
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM } from './constants';
-import type { CalculatorParams } from './CalculatorContent';
+import { clamp } from '../../utils/clamp';
 
-const STEP_MONEY = 1000;
+const DEFAULT_MONEY_STEP = 1000;
 
-interface RenderWantedSumInputProps {
+interface RenderWantedSumParams {
+  minSum: number;
+  maxSum: number;
+  moneyValue: number;
   className?: string;
-  title: string;
+  step?: number;
   isShowItems?: boolean;
-  calculatorParams: CalculatorParams;
-  moneyValue: number | undefined;
-  defaultSum: number;
-  setMoneyValue: InputRangeProps['onChange'];
 }
 
-export function renderWantedSumInput(props: RenderWantedSumInputProps) {
-  const {
-    title,
-    className = '',
-    calculatorParams,
-    moneyValue,
-    defaultSum,
-    setMoneyValue,
-    isShowItems = true,
-  } = props;
+export function renderWantedSumInput(title: string, params: RenderWantedSumParams, callback) {
+  const { moneyValue, minSum, maxSum, step = DEFAULT_MONEY_STEP, isShowItems = true } = params;
 
-  const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
-  const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
   const items = [
     `От ${addSpacesBetweenNumbers(minSum)} ₽`,
     `До ${addSpacesBetweenNumbers(maxSum)} ₽`,
@@ -36,14 +23,13 @@ export function renderWantedSumInput(props: RenderWantedSumInputProps) {
 
   return (
     <InputRange
-      className={className}
       title={title}
       items={isShowItems ? items : []}
       min={minSum}
       max={maxSum}
-      step={STEP_MONEY}
-      value={moneyValue || defaultSum}
-      onChange={setMoneyValue}
+      step={step}
+      value={clamp(moneyValue, minSum, maxSum)}
+      onChange={callback}
     />
   );
 }

package/src/components/Calculator/useBonusCalculatorParams.ts

@@ -0,0 +1,55 @@
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { BONUS_CALC_DEFAULT_DIR, DEFAULT_BONUS_CALCULATOR_PARAMS } from './constants';
+import { getBonus } from './getBonus';
+import { useCalculatorParams } from './useCalculatorParams';
+
+export interface BonusCalculatorUserInputParams {
+  travelExpenseValue: number;
+  restExpenseValue: number;
+}
+
+export interface BonusCalculatorSourceBookParams {
+  minSumTravel: number;
+  maxSumTravel: number;
+  minSumOther: number;
+  maxSumOther: number;
+  maxBonus: number;
+  prefMonthsNum: number;
+  prefTravelBonusRate: number;
+  prefRestBonusRate: number;
+  travelBonusRate: number;
+  restBonusRate: number;
+}
+
+export interface BonusCalculatorParams
+  extends BonusCalculatorUserInputParams,
+    BonusCalculatorSourceBookParams {
+  monthBonus: number;
+  yearBonus: number;
+}
+
+export const getBonusCalculatorParams = (
+  context: ContentPageContext,
+  userInputParams: BonusCalculatorUserInputParams,
+  sourceBookDir,
+) => {
+  const { travelExpenseValue, restExpenseValue } = userInputParams;
+  const bonusCalculatorSourceBookParams =
+    useCalculatorParams<BonusCalculatorSourceBookParams>(
+      context.useAsyncData,
+      sourceBookDir || BONUS_CALC_DEFAULT_DIR,
+    ) || DEFAULT_BONUS_CALCULATOR_PARAMS;
+
+  const [monthBonus, yearBonus] = getBonus(
+    bonusCalculatorSourceBookParams,
+    travelExpenseValue,
+    restExpenseValue,
+  );
+
+  return {
+    ...bonusCalculatorSourceBookParams,
+    ...userInputParams,
+    monthBonus,
+    yearBonus,
+  };
+};

package/src/components/Calculator/useCalculatorParams.ts

@@ -0,0 +1,16 @@
+import type { AsyncDataHook } from '../ContentPage/ContentPageContext';
+
+export function useCalculatorParams<Data>(useAsyncData: AsyncDataHook, dir: string) {
+  const { data } = useAsyncData<Data>(
+    `/wcms-resources/${dir}.json`,
+    fetchCalculatorSourceBookParams,
+  );
+
+  return data;
+}
+
+async function fetchCalculatorSourceBookParams<Data>(url: string): Promise<Data> {
+  const response = await fetch(url);
+
+  return await response.json();
+}

package/src/components/Calculator/useCreditCalculatorParams.ts

@@ -0,0 +1,70 @@
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { CREDIT_CALC_DEFAULT_DIR, DEFAULT_CREDIT_CALCULATOR_PARAMS } from './constants';
+import { getMonthlyPayment } from './getMonthlyPayment';
+import { useCalculatorParams } from './useCalculatorParams';
+
+export interface CommonCreditParams {
+  isInsurance: boolean;
+  isSalaryClient: boolean;
+  isStateEmployee: boolean;
+}
+export interface CreditCalculatorSourceBookParams extends CommonCreditParams {
+  minSum: number;
+  maxSum: number;
+  minMonths: number;
+  maxMonths: number;
+  rateBottomRange: number;
+  rateTopRange: number;
+  sumBorder: number;
+}
+
+export interface CreditCalculatorUserInputParams extends CommonCreditParams {
+  isAnnuity: boolean;
+  moneyValue: number;
+  monthsValue: number;
+}
+
+export interface CreditCalculatorParams
+  extends CreditCalculatorSourceBookParams,
+    CreditCalculatorUserInputParams {
+  monthlyPayment: number;
+  finalRate: number;
+}
+
+export type CreditCalculatorData = {
+  rows: CreditCalculatorSourceBookParams[];
+};
+
+export const getCreditCalculatorParams = (
+  context: ContentPageContext,
+  userInputParams: CreditCalculatorUserInputParams,
+  sourceBookDir?: string,
+): CreditCalculatorParams => {
+  const { isInsurance, isSalaryClient, isStateEmployee, moneyValue } = userInputParams;
+
+  const data = useCalculatorParams<CreditCalculatorData>(
+    context.useAsyncData,
+    sourceBookDir || CREDIT_CALC_DEFAULT_DIR,
+  );
+  const creditCalculatorSourceBookParams =
+    data?.rows.find((_) => {
+      return (
+        isInsurance === _.isInsurance &&
+        isSalaryClient === _.isSalaryClient &&
+        isStateEmployee === _.isStateEmployee
+      );
+    }) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
+
+  const { rateBottomRange, rateTopRange, sumBorder } = creditCalculatorSourceBookParams;
+  const finalRate = moneyValue <= sumBorder ? rateBottomRange : rateTopRange;
+  const monthlyPayment = getMonthlyPayment(finalRate, userInputParams);
+
+  const extendedCalculatorParams = {
+    ...creditCalculatorSourceBookParams,
+    ...userInputParams,
+    finalRate,
+    monthlyPayment,
+  };
+
+  return extendedCalculatorParams;
+};

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -3,7 +3,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import { formatCurrency } from './formatCurrency';
 
-const TABLE_HEAD_STYLE = 'font-light text-left font-normal text-sm text-secondary-text';
+const TABLE_HEAD_STYLE = 'text-left text-m text-secondary-text';
 
 const CURRENCY_ICONS_MAP = {
   USD: 'DollarIcon',
@@ -34,19 +34,15 @@ const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
   const code = exchangeCurrencyItem?.code;
 
   return (
-    <tr key={code} className="pb-1">
+    <tr key={code} className="pb-1 text-h6">
       <td className="pt-4">
         <div className="flex items-center">
           {code ? <Img image={{ icon: CURRENCY_ICONS_MAP[code] }} width="24" height="24" /> : null}
-          <span className="text-m-title-md ml-2">{code}</span>
+          <span className="ml-2">{code}</span>
         </div>
       </td>
-      <td className="pt-4 pl-11 m-title-md font-light">
-        {formatCurrency(exchangeCurrencyItem.buy)}
-      </td>
-      <td className="pt-4 pl-11 m-title-md font-light">
-        {formatCurrency(exchangeCurrencyItem.sell)}
-      </td>
+      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.sell)}</td>
+      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.buy)}</td>
     </tr>
   );
 };

package/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -9,12 +9,14 @@ interface CurrentLocationProps {
 
 export const CurrentLocation = JSX<CurrentLocationProps>(
   ({ className = '', address, distance }) => (
-    <div className={`flex text-sm ${className}`}>
+    <div className={`flex ${className}`}>
       <Img image={{ icon: 'GpsIcon' }} width="24" height="24" asSVG />
-      <div className="ml-3 font-light">
-        {address ? <p className="m-0 mb-[3px]">{address}</p> : null}
+      <div className="ml-3">
+        {address ? <p className="text-primary-main  m-0 mb-1 text-l">{address}</p> : null}
         {distance ? (
-          <p className="text-secondary-text m-0">Курс указан для ближайшего офиса - {distance}</p>
+          <p className="text-secondary-text m-0 text-m">
+            Курс указан для ближайшего офиса - {distance}
+          </p>
         ) : null}
       </div>
     </div>

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -5,6 +5,7 @@ import { callbackCurrencySelect } from './callbackCurrencySelect';
 import { Currency } from './CurrencyProps';
 import { renderButton } from './renderButton';
 import { renderInput } from './renderInput';
+import { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 export interface ExchangeCurrencyItem {
   code?: Currency;
@@ -15,6 +16,7 @@ export interface ExchangeCurrencyCalculatorProps extends UniBlockProps {
   className?: string;
   currencyRatesBuy: ExchangeCurrencyItem[];
   currencyRatesSell: ExchangeCurrencyItem[];
+  button?: ButtonProps;
 }
 export interface CalcState {
   inputSell: string;
@@ -24,7 +26,7 @@ export interface CalcState {
 }
 
 export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
-  ({ context, className = '', currencyRatesBuy, currencyRatesSell }) => {
+  ({ context, className = '', currencyRatesBuy, currencyRatesSell, button }) => {
     const [calcState, setCalcState] = context.useState<CalcState>({
       inputSell: '',
       inputBuy: '',
@@ -37,7 +39,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
     };
 
     return (
-      <div className={`grid gap-3.5 ${className}`}>
+      <div className={`grid gap-[18px] pt-2 ${className}`}>
         {renderInput({
           placeholder: 'Хочу продать',
           rates: currencyRatesBuy,
@@ -64,7 +66,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
               calcState.selectSell,
             ),
         })}
-        {renderButton()}
+        {button?.text ? renderButton(button) : null}
       </div>
     );
   },

package/src/components/ExchangeRateTile/ExchangeRateTile.example.json

@@ -0,0 +1,8 @@
+{
+  "button": {
+    "href": "https://coins.rshb.ru/exchange",
+    "text": "Купить валюту",
+    "target": "_blank",
+    "version": "primary"
+  }
+}

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

@@ -1,11 +1,19 @@
 import { context } from '../../react/setup-fixture';
 
 import { ExchangeRateTile } from './ExchangeRateTile';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+const button: ButtonProps = {
+  href: 'https://coins.rshb.ru/exchange',
+  text: 'Купить валюту',
+  target: '_blank',
+  version: 'primary',
+};
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <ExchangeRateTile context={context} className="col-span-8" />
+      <ExchangeRateTile context={context} button={button} className="col-span-8" />
     </div>
   ),
 };