@redneckz/wildless-cms-uni-blocks 0.2.79 → 0.2.83

package/lib/ui-kit/InputRange/InputRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputRange.js","sourceRoot":"","sources":["../../../src/ui-kit/InputRange/InputRange.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAC3B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;QACxD,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG;QACjB,cAAc,EAAE,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,QAAQ;KACnD,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,IAAI,KAAK,GAAG,GAAG;YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,KAAK,GAAG,GAAG;YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aACvB,eAAK,SAAS,EAAC,UAAU,aACtB,KAAK,CAAC,CAAC,CAAC,CACP,eAAM,SAAS,EAAC,+DAA+D,YAC5E,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,EACR,gBACE,SAAS,EAAE,iJACT,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EACnB,EAAE,EACF,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,uBAAuB,EAAE,GAAG,CAAC,EAC1D,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,MAAM,EAAE,UAAU,GAClB,EACF,cAAK,SAAS,EAAC,sCAAsC,YACnD,gBACE,SAAS,EAAC,6CAA6C,EACvD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,KAAK,EAAE,UAAU,GACjB,GACE,IACF,EACN,cAAK,SAAS,EAAC,gCAAgC,YAC5C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,eAAsB,SAAS,EAAC,kCAAkC,YAC/D,IAAI,IADI,MAAM,CAAC,CAAC,CAAC,CAEb,CACR,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"InputRange.js","sourceRoot":"","sources":["../../../src/ui-kit/InputRange/InputRange.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAG9E,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAC3B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;QACxD,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG;QACjB,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;KAC5E,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,IAAI,KAAK,GAAG,GAAG;YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,KAAK,GAAG,GAAG;YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aACvB,eAAK,SAAS,EAAC,UAAU,aACtB,KAAK,CAAC,CAAC,CAAC,CACP,eAAM,SAAS,EAAC,+DAA+D,YAC5E,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,EACR,gBACE,SAAS,EAAE,iJACT,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EACnB,EAAE,EACF,KAAK,EAAE,uBAAuB,CAAC,KAAK,CAAC,EACrC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,MAAM,EAAE,UAAU,GAClB,EACF,cAAK,SAAS,EAAC,sCAAsC,YACnD,gBACE,SAAS,EAAC,6CAA6C,EACvD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,KAAK,EAAE,UAAU,GACjB,GACE,IACF,EACN,cAAK,SAAS,EAAC,gCAAgC,YAC5C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,eAAsB,SAAS,EAAC,kCAAkC,YAC/D,IAAI,IADI,MAAM,CAAC,CAAC,CAAC,CAEb,CACR,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/lib/ui-kit/Logo/Logo.fixture.d.ts

@@ -0,0 +1,3 @@
+import '../../setup-fixture';
+declare const _default: any;
+export default _default;

package/lib/ui-kit/TopItem/TopItem.fixture.d.ts

@@ -0,0 +1,6 @@
+import '../../setup-fixture';
+declare const _default: {
+    default: any;
+    active: any;
+};
+export default _default;

package/lib/utils/addSpacesBetweenNumbers.d.ts

@@ -0,0 +1 @@
+export declare const addSpacesBetweenNumbers: (number: number) => string;

package/lib/utils/addSpacesBetweenNumbers.js

@@ -0,0 +1,2 @@
+export const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
+//# sourceMappingURL=addSpacesBetweenNumbers.js.map

package/lib/utils/addSpacesBetweenNumbers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"addSpacesBetweenNumbers.js","sourceRoot":"","sources":["../../src/utils/addSpacesBetweenNumbers.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,MAAc,EAAE,EAAE,CACxD,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,wBAAwB,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.2.79",
+  "version": "0.2.83",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -79,7 +79,7 @@
   "scripts": {
     "start": "npm run cosmos",
     "build": "npm run build:lib && npm run build:commonjs && npm run bundle && npm run build:style && npm run build:icons",
-    "postbuild": "npm run size",
+    "postbuild": "npm run size && npm run cosmos:export && copyfiles --up 1 \"./docs/**/*\" ./build",
     "build:lib": "rimraf ./lib && tsc --build --verbose",
     "postbuild:lib": "replace-in-file --configFile=replace-config.lib.cjs --verbose",
     "build:commonjs": "rimraf ./dist && tsc --module commonjs --noImplicitUseStrict --outDir dist",
@@ -121,6 +121,7 @@
     "@size-limit/file": "^7.0.8",
     "@types/jest": "^28.1.1",
     "autoprefixer": "^10.4.7",
+    "copyfiles": "^2.4.1",
     "css-loader": "^6.7.1",
     "cssnano": "^5.1.11",
     "html-webpack-plugin": "^5.5.0",

package/src/ProjectSettings.ts

@@ -6,6 +6,7 @@ export interface ProjectSettings {
   ENABLE_ASSIST?: boolean;
   SITEMAP?: string;
   CDN?: string; // Should ends with "/"
+  CREDIT_CALCULATOR?: string;
 }
 
 export const projectSettings = new (class implements ProjectSettings {

package/src/components/Blocks.ts

@@ -15,6 +15,7 @@ import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Accordion } from './Accordion/Accordion';
+import { CreditCalculator } from './CreditCalculator/CreditCalculator';
 
 export const Blocks = {
   Header,
@@ -34,4 +35,5 @@ export const Blocks = {
   MiniGallery,
   ComparisonTable,
   Accordion,
+  CreditCalculator,
 };

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

@@ -1360,6 +1360,13 @@
         ]
       }
     },
+    {
+      "type": "CreditCalculator",
+      "style": ["col-span-12"],
+      "content": {
+        "directoryName": "credit-calculator-data"
+      }
+    },
     {
       "type": "Footer",
       "style": ["col-span-12"],

package/src/components/CreditCalculator/CreditCalculator.fixture.tsx

@@ -1,4 +1,4 @@
 import { CreditCalculator } from './CreditCalculator';
 import { context } from '../../setup-fixture';
 
-export default <CreditCalculator context={context} />;
+export default <CreditCalculator context={context} directoryName="credit-calculator-data" />;

package/src/components/CreditCalculator/CreditCalculator.tsx

@@ -1,106 +1,153 @@
 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 UniBlockProps {}
+export interface CreditCalculatorProps extends CreditCalculatorContent, UniBlockProps {}
+
+const STEP_MONEY = 1000;
+const STEP_MONTHS = 1;
+const DEFAULT_PAYMENT_TYPE = 'annuity';
 
 const borderStyle = 'border-solid border-3 border-primary-main rounded-md';
 
-const MIN_MONEY = 50000;
-const MAX_MONEY = 3000000;
-const STEP_MONEY = 1000;
+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 CREDIT_TERM_YEARS = [2, 3, 4, 5, 6, 7];
+    const tableRows = useCreditCalculatorData(context.useAsyncData, directoryName).rows;
 
-const MIN_MONTHS = 1;
-const MAX_MONTHS = 84;
-const STEP_MONTHS = 1;
+    const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isAnnuityChecked });
 
-const MONTHS_IN_YEAR = 12;
+    const defaultSum =
+      calculatorParams.maxSum && calculatorParams.minSum
+        ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
+        : DEFAULT_SUM;
 
-export const CreditCalculator = JSX<CreditCalculatorProps>(({ context, className }) => {
-  const [moneyValue, setMoneyValue] = context.useState(350000);
-  const [monthsValue, setMonthsValue] = context.useState(12);
-  const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
-  const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
+    const defaultMonths =
+      calculatorParams.maxMonths && calculatorParams.minMonths
+        ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
+        : DEFAULT_MONTHS;
 
-  const handleButtonClick = (value: number) => {
-    setMonthsValue(clamp(value * MONTHS_IN_YEAR, MIN_MONTHS, MAX_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;
 
-  return (
-    <section className={`font-sans text-primary-text bg-white p-4 ${className}`}>
-      <div className={`box-border p-12 flex flex-col justify-between ${borderStyle}`}>
-        <div className="flex justify-between">
-          <div className="grow mr-11">
-            <InputRange
-              title="Желаемая сумма кредита, ₽"
-              items={['От 50 000 рублей', 'До 3 000 000 рублей']}
-              min={MIN_MONEY}
-              max={MAX_MONEY}
-              step={STEP_MONEY}
-              value={moneyValue}
-              onChange={setMoneyValue}
-            />
-            <InputRange
-              title="Срок кредита, месяцев"
-              items={['Или выберите из предложенных вариантов ниже']}
-              min={MIN_MONTHS}
-              max={MAX_MONTHS}
-              step={STEP_MONTHS}
-              value={monthsValue}
-              onChange={setMonthsValue}
-            />
-            <div className="flex mb-7">
-              {CREDIT_TERM_YEARS.map((number, i) => renderButton(number, i, handleButtonClick))}
+    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 bg-white p-4 ${className}`}>
+        <div className={`box-border p-12 flex flex-col justify-between ${borderStyle}`}>
+          <div className="flex justify-between">
+            <div className="grow mr-11">
+              <InputRange
+                title="Желаемая сумма кредита, ₽"
+                items={[
+                  `От ${addSpacesBetweenNumbers(minSum)} рублей`,
+                  `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
+                ]}
+                min={minSum}
+                max={maxSum}
+                step={STEP_MONEY}
+                value={moneyValue || defaultSum}
+                onChange={setMoneyValue}
+              />
+              <InputRange
+                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="mb-4"
+                text="Комплексная страховая защита"
+                checked={isInsuranceChecked}
+                onChange={setIsInsuranceChecked}
+              />
+            </div>
+            <div className="p-9 bg-primary-main rounded-md text-white">
+              <div className="text-base mb-5">Наше предложение</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>
-            <Checkbox
-              text="Получаю пенсию на карту Россельхозбанка"
-              checked={isAnnuityChecked}
-              onChange={setIsAnnuityChecked}
-            />
-            <Checkbox
-              className="mb-4"
-              text="Комплексная страховая защита"
-              checked={isInsuranceChecked}
-              onChange={setIsInsuranceChecked}
-            />
-          </div>
-          <div className="p-9 bg-primary-main rounded-md text-white">
-            <div className="text-base mb-5">Наше предложение</div>
-            <div className="text-sm opacity-60">Ежемесячный платёж</div>
-            <div className="text-lg mb-3">26 827 ₽</div>
-            <div className="text-sm opacity-60">Ставка</div>
-            <div className="text-lg">16,9 %</div>
           </div>
-        </div>
-        <div className="flex items-center">
-          <Button className="mr-3" text="Отправить заявку" version="primary" href="#" />
-          <div
-            className="w-80 text-xxs leading-4 text-secondary-text"
-            aria-label="Соглашение на обработку персональных данных"
-          >
-            Отправляя заявку, вы соглашаетесь на обработку персональных данных соответственно
-            требованиям ФЗ «О персональных данных»
+          <div className="flex items-center">
+            <Button className="mr-3" text="Отправить заявку" version="primary" href="#" />
+            <div
+              className="w-80 text-xxs leading-4 text-secondary-text"
+              aria-label="Соглашение на обработку персональных данных"
+            >
+              Отправляя заявку, вы соглашаетесь на обработку персональных данных соответственно
+              требованиям ФЗ «О персональных данных»
+            </div>
           </div>
         </div>
-      </div>
-    </section>
-  );
-});
-
-const renderButton = (number: number, i: number, handleClick: (number: number) => void) => (
-  <div
-    key={String(i)}
-    className="bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer"
-    role="button"
-    onClick={() => handleClick(number)}
-  >
-    <span className="font-medium text-sm">
-      {number} {number > 4 ? 'лет' : 'года'}
-    </span>
-  </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/src/components/CreditCalculator/CreditCalculatorContent.ts

@@ -0,0 +1,17 @@
+export interface CalculatorParams {
+  isAnnuity?: boolean;
+  minSum?: number;
+  maxSum?: number;
+  minMonths?: number;
+  maxMonths?: number;
+  rateWithInsurance?: number;
+  rateWithoutInsurance?: number;
+}
+
+export interface CreditCalculatorData {
+  rows?: CalculatorParams[];
+}
+
+export interface CreditCalculatorContent {
+  directoryName?: string;
+}

package/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/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/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/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/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/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/src/components/Footer/Footer.fixture.tsx

@@ -188,7 +188,7 @@ export default (
         ],
       },
     ]}
-    socialMedia={[{ href: 'https://vk.com' }, { href: 'https://ok.ru' }, { href: 'https://t.me' }]}
+    socialMedia={[{ href: 'https://t.me' }, { href: 'https://vk.com' }, { href: 'https://ok.ru' }]}
     contacts={[
       {
         text: '+7 (495) 787-7-787',

package/src/components/Footer/SocialMedia.tsx

@@ -6,10 +6,22 @@ import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { useLink } from '../../hooks/useLink';
 import { Button } from '../../ui-kit/Button/Button';
 
-const ICONS_MAP: Array<{ origins: string[]; icon: IconName; label: string }> = [
-  { origins: ['t.me', 'telegram.org'], icon: 'TelegramIcon', label: 'Телеграм' },
-  { origins: ['vk.com'], icon: 'VKIcon', label: 'ВКонтакте' },
-  { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники' },
+const ICONS_MAP: Array<{
+  origins: string[];
+  icon: IconName;
+  label: string;
+  width: string;
+  height: string;
+}> = [
+  {
+    origins: ['t.me', 'telegram.org'],
+    icon: 'TelegramIcon',
+    label: 'Телеграм',
+    width: '20px',
+    height: '16px',
+  },
+  { origins: ['vk.com'], icon: 'VKIcon', label: 'ВКонтакте', width: '24px', height: '12px' },
+  { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники', width: '12px', height: '20px' },
 ];
 
 export interface SocialMediaProps extends UniBlockProps {
@@ -33,7 +45,7 @@ interface MediaButtonProps {
 }
 
 const MediaButton = JSX<MediaButtonProps>(({ href }) => {
-  const { icon, label } =
+  const { icon, label, width, height } =
     ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
 
   if (!icon) return null;
@@ -45,8 +57,15 @@ const MediaButton = JSX<MediaButtonProps>(({ href }) => {
       target="_blank"
       rel="noopener noreferrer"
       aria-label={label}
-      className="border-solid border border-main-divider w-9 h-9 flex items-center justify-center hover:text-primary-main"
-      appendLeft={<Icon name={icon} />}
+      className="border-solid border border-main-divider w-9 h-9 flex items-center justify-center hover:fill-primary-main"
+      appendLeft={
+        <Icon
+          name={icon}
+          width={width}
+          height={height}
+          className="[&>*]:fill-primary-text [&>*]:hover:fill-primary-main"
+        />
+      }
     />
   );
 });

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -45,10 +45,14 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           <Icon name="ProfileIcon" aria-hidden="true" />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
-          className="mr-5 text-secondary-light hover:text-secondary-active min-w-[32px] min-h-[32px]"
+          className="mr-5 text-secondary-light hover:text-primary-main min-w-[32px] min-h-[32px]"
           ariaLabel="Дополнительные ссылки"
         >
-          <Icon name="GridIcon" aria-hidden="true" />
+          <Icon
+            name="GridIcon"
+            aria-hidden="true"
+            className="[&>*]:fill-secondary-light [&>*]:hover:fill-primary-main"
+          />
         </HeaderSecondaryMenuButton>
       </div>
     );

package/src/hooks/useCreditCalculatorData.ts

@@ -0,0 +1,23 @@
+import type { AsyncDataHook } from '../components/ContentPage/ContentPageContext';
+import { CreditCalculatorData } from '../components/CreditCalculator/CreditCalculatorContent';
+
+export function useCreditCalculatorData(
+  useAsyncData: AsyncDataHook,
+  directoryName: string | undefined,
+): CreditCalculatorData {
+  const { data } = useAsyncData(creditCalculatorUrl(directoryName), () =>
+    fetchCreditCalculatorData(directoryName),
+  );
+  return data || {};
+}
+
+async function fetchCreditCalculatorData(
+  directoryName: string | undefined,
+): Promise<CreditCalculatorData> {
+  const response = await fetch(creditCalculatorUrl(directoryName));
+  return await response.json();
+}
+
+function creditCalculatorUrl(directoryName: string | undefined) {
+  return `/wcms-resources/${directoryName || 'credit-calculator-data'}.json`;
+}

package/src/icons/ActualBalanceIcon.svg

@@ -1,4 +1,5 @@
 <svg
+  id="icon"
   width="48"
   height="48"
   viewBox="0 0 70 70"

package/src/icons/AppleIcon.svg

@@ -1 +1 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 24"><path d="M18.406 12.761c-.023-3.028 2.793-4.511 2.93-4.572-1.603-2.073-4.075-2.357-4.968-2.377-2.083-.204-4.098 1.117-5.174 1.117-1.076 0-2.725-1.097-4.488-1.056-2.266.04-4.395 1.198-5.563 3.007-2.404 3.698-.618 9.124 1.694 12.09 1.145 1.464 2.496 3.09 4.259 3.028 1.717-.06 2.358-.975 4.441-.975 2.06 0 2.656.975 4.465.935 1.854-.02 3.022-1.463 4.12-2.947 1.329-1.666 1.855-3.332 1.878-3.413 0 0-3.549-1.2-3.594-4.837Zm-3.389-8.92c.916-1.037 1.557-2.419 1.374-3.841-1.35.061-3.022.833-3.984 1.829-.847.894-1.625 2.337-1.42 3.698 1.512.102 3.069-.67 4.03-1.686Z" fill="#42AB44"/></svg>
+<svg id="icon" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 24"><path d="M18.406 12.761c-.023-3.028 2.793-4.511 2.93-4.572-1.603-2.073-4.075-2.357-4.968-2.377-2.083-.204-4.098 1.117-5.174 1.117-1.076 0-2.725-1.097-4.488-1.056-2.266.04-4.395 1.198-5.563 3.007-2.404 3.698-.618 9.124 1.694 12.09 1.145 1.464 2.496 3.09 4.259 3.028 1.717-.06 2.358-.975 4.441-.975 2.06 0 2.656.975 4.465.935 1.854-.02 3.022-1.463 4.12-2.947 1.329-1.666 1.855-3.332 1.878-3.413 0 0-3.549-1.2-3.594-4.837Zm-3.389-8.92c.916-1.037 1.557-2.419 1.374-3.841-1.35.061-3.022.833-3.984 1.829-.847.894-1.625 2.337-1.42 3.698 1.512.102 3.069-.67 4.03-1.686Z" fill="#42AB44"/></svg>

package/src/icons/CalendarIcon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+<svg id="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
   <path
     stroke="#1C1C1C"
     stroke-linecap="round"

package/src/icons/ClockIcon.svg

@@ -1,4 +1,5 @@
 <svg
+  id='icon'
   width="70"
   height="70"
   viewBox="0 0 70 70"

package/src/icons/ComfortableCompIcon.svg

@@ -1,4 +1,5 @@
 <svg
+  id="icon"
   width="70"
   height="70"
   viewBox="0 0 70 70"

package/src/icons/DollarIcon.svg

@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
     d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
     fill="#46B448"

package/src/icons/EmptyWalletIcon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+<svg id="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
   <path
     stroke="#292D32"
     stroke-linecap="round"

package/src/icons/EuroIcon.svg

@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
     d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
     fill="#3060BF"