@redneckz/wildless-cms-uni-blocks 0.2.77 → 0.2.81

package/src/components/CreditCalculator/CreditCalculator.tsx

@@ -1,106 +1,155 @@
 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_MIN_MONTHS,
+  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 rate = getCreditRate({ calculatorParams, isInsurance: isInsuranceChecked });
 
-  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 montlyPayment = getMonthlyPayment({
+      calculatorParams,
+      paymentType: DEFAULT_PAYMENT_TYPE,
+      rate,
+      sum: moneyValue || defaultSum,
+      months: monthsValue || defaultMonths,
+    });
+
+    const creditTermYears = getCreditTermYears(
+      calculatorParams.minMonths || DEFAULT_MIN_MONTHS,
+      calculatorParams.maxMonths || DEFAULT_MAX_MONTHS,
+    );
+
+    function handleButtonClick(value: number) {
+      setMonthsValue(
+        clamp(
+          value * MONTHS_IN_YEAR,
+          calculatorParams?.minMonths || DEFAULT_MIN_MONTHS,
+          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={[
+                  `От ${addSpacesBetweenNumbers(Number(calculatorParams.minSum))} рублей`,
+                  `До ${addSpacesBetweenNumbers(Number(calculatorParams.maxSum))} рублей`,
+                ]}
+                min={calculatorParams?.minSum}
+                max={calculatorParams?.maxSum}
+                step={STEP_MONEY}
+                value={moneyValue || defaultSum}
+                onChange={setMoneyValue}
+              />
+              <InputRange
+                title="Срок кредита, месяцев"
+                items={['Или выберите из предложенных вариантов ниже']}
+                min={calculatorParams?.minMonths}
+                max={calculatorParams?.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/content-page-repository/ContentPageRepository.ts

@@ -5,6 +5,7 @@ import type { ContentPageDef } from '../types';
 import type { TransformationOptions } from './TransformationOptions';
 import { transformContentPage } from './transformContentPage';
 
+const INDEX_PAGE_SLUG = 'index';
 const find = util.promisify(glob);
 
 export function ContentPageRepository({
@@ -16,6 +17,11 @@ export function ContentPageRepository({
     return await Promise.all(pagePaths.map(readPage));
   }
 
+  async function getSecondaryContentPages() {
+    const pages = await getAllContentPages();
+    return pages.filter((content) => content.slug !== INDEX_PAGE_SLUG);
+  }
+
   async function getContentPageBySlug(slug: string): Promise<ContentPageDef | undefined> {
     const pages = await getAllContentPages();
     return pages.find((content) => content.slug === slug);
@@ -26,6 +32,14 @@ export function ContentPageRepository({
     return page && toMobilePage(page);
   }
 
+  async function getIndexPage() {
+    return await getContentPageBySlug(INDEX_PAGE_SLUG);
+  }
+
+  async function getIndexMobilePage() {
+    return await getMobilePageBySlug(INDEX_PAGE_SLUG);
+  }
+
   const cache: Record<string, ContentPageDef> = {};
   async function readPage(filePath: string): Promise<ContentPageDef> {
     if (!(filePath in cache)) {
@@ -41,5 +55,8 @@ export function ContentPageRepository({
     getAllContentPages,
     getContentPageBySlug,
     getMobilePageBySlug,
+    getSecondaryContentPages,
+    getIndexPage,
+    getIndexMobilePage,
   };
 }

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/DocIcon.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.809 2.759A2.813 2.813 0 0 1 11.742 2h5.524C18.776 2 20 3.16 20 4.59v13.82c0 1.43-1.224 2.59-2.734 2.59H6.734C5.224 21 4 19.84 4 18.41v-5.95c0-.477.408-.864.911-.864.504 0 .912.387.912.864v5.95c0 .476.408.863.911.863h10.532c.503 0 .911-.387.911-.864V4.591c0-.477-.408-.864-.911-.864h-5.367v4.03c0 .955-.816 1.728-1.823 1.728H4.911c-.368 0-.7-.21-.842-.533a.83.83 0 0 1 .198-.941l5.542-5.252Zm.267 2.19L7.112 7.758h2.964v-2.81Z" fill="#1C1C1C" />
+  <rect x="8" y="12" width="8" height="2" rx="1" fill="#42AB44" />
+  <rect x="8" y="15" width="5" height="2" rx="1" fill="#42AB44" />
+</svg>

package/src/icons/MinusIcon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 12h5M4 12h7" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/PlusIcon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 18V6M15 12h5M4 12h7M12 20V4" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/ui-kit/Icon/IconProps.ts

@@ -19,6 +19,9 @@ export enum IconMap {
   'TelegramIcon',
   'VKIcon',
   'GlassIcon',
+  'DocIcon',
+  'PlusIcon',
+  'MinusIcon',
 }
 
 export type IconName = keyof typeof IconMap;

package/src/ui-kit/InputRange/InputRange.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import type { InputRangeProps } from './InputRangeProps';
 
 export const InputRange = JSX<InputRangeProps>(
@@ -11,7 +12,7 @@ export const InputRange = JSX<InputRangeProps>(
     };
 
     const inputStyle = {
-      backgroundSize: `${(value * 100) / max - 1}% 100%`,
+      backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
     };
 
     const handleBlur = () => {
@@ -33,7 +34,7 @@ export const InputRange = JSX<InputRangeProps>(
             className={`m-0 font-sans text-sm w-full h-12 border-2 border-solid border-main-divider rounded-md outline-none p-0 pl-4 m-0 box-border text-primary-text ${
               title ? 'pt-4' : ''
             }`}
-            value={String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ' ')}
+            value={addSpacesBetweenNumbers(value)}
             onChange={(e) => handleChange(e.target.value)}
             onBlur={handleBlur}
           />

package/src/utils/addSpacesBetweenNumbers.ts

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