@redneckz/wildless-cms-uni-blocks 0.3.12 → 0.3.15

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

@@ -1882,6 +1882,80 @@
       "type": "CreditCalculator",
       "style": ["col-span-12"]
     },
+    {
+      "type": "Recommendation",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "С этим продуктом приобретают",
+        "recommendations": [
+          {
+            "title": "Кредиты",
+            "items": ["до 10 000 000 ₽", "до 10 лет"],
+            "image": {
+              "src": "chair.png",
+              "alt": "Варианты потребительского кредита",
+              "format": "webp",
+              "size": {
+                "width": 180,
+                "height": 180
+              }
+            }
+          },
+          {
+            "title": "Кредитные карты",
+            "description": "Льготный период 120 дней",
+            "image": {
+              "src": "credit-card-1.png",
+              "alt": "Варианты потребительского кредита",
+              "format": "webp",
+              "size": {
+                "width": 180,
+                "height": 180
+              }
+            }
+          },
+          {
+            "title": "Кредитные карты",
+            "description": "Льготный период 120 дней",
+            "image": {
+              "src": "credit-card-1.png",
+              "alt": "Варианты потребительского кредита",
+              "format": "webp",
+              "size": {
+                "width": 180,
+                "height": 180
+              }
+            }
+          },
+          {
+            "title": "Кредитные карты",
+            "description": "Льготный период 120 дней",
+            "image": {
+              "src": "credit-card-1.png",
+              "alt": "Варианты потребительского кредита",
+              "format": "webp",
+              "size": {
+                "width": 180,
+                "height": 180
+              }
+            }
+          },
+          {
+            "title": "Кредитные карты",
+            "description": "Льготный период 120 дней",
+            "image": {
+              "src": "credit-card-1.png",
+              "alt": "Варианты потребительского кредита",
+              "format": "webp",
+              "size": {
+                "width": 180,
+                "height": 180
+              }
+            }
+          }
+        ]
+      }
+    },
     {
       "type": "Footer",
       "style": ["col-span-12"],

package/src/components/ContentPage/ContentPageHead.tsx

@@ -28,7 +28,7 @@ export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data,
 function renderOpenGraph(og: Record<string, string> | undefined) {
   return og
     ? Object.entries(og).map(([key, value]) => (
-        <meta key={key} name={`og:${key}`} content={value} />
+        <meta key={key} property={`og:${key}`} content={value} />
       ))
     : null;
 }

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

@@ -1,12 +1,32 @@
-import { CreditCalculator } from './CreditCalculator';
 import { context } from '../../setup-fixture';
+import { CreditCalculator } from './CreditCalculator';
+import type { CreditCalculatorTab } from './CreditCalculatorContent';
+
+const TABS: CreditCalculatorTab[] = [
+  {
+    title: 'Кредит',
+    description: 'Ставка от 6% до 7 лет',
+    directoryName: 'credit-calculator-data',
+    icon: 'CardIcon',
+  },
+  {
+    title: 'Кредит',
+    description: 'Ставка от 4% до 7 лет',
+    directoryName: 'credit-calculator-data1',
+    icon: 'ChartSquareIcon',
+  },
+  {
+    title: 'Кредит',
+    description: 'Ставка от 3% до 6 лет',
+    directoryName: 'credit-calculator-data2',
+    icon: 'DiscountShapeIcon',
+  },
+];
 
-export default (
-  <div className="container grid grid-cols-12">
-    <CreditCalculator
-      className="col-span-12"
-      context={context}
-      directoryName="credit-calculator-data"
-    />
-  </div>
-);
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CreditCalculator className="col-span-12" context={context} tabs={TABS} />
+    </div>
+  ),
+};

package/src/components/CreditCalculator/CreditCalculator.tsx

@@ -1,92 +1,30 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
-import type { UniBlockProps } from '../../types';
-import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
-import { clamp } from '../../utils/clamp';
-import { DEFAULT_MAX_MONTHS, DEFAULT_MIN_MONTHS, MONTHS_IN_YEAR } from './constants';
+import { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Tabs } from '../../ui-kit/Tabs/Tabs';
+import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import type { CreditCalculatorContent } from './CreditCalculatorContent';
-import { getCalculatorParams } from './getCalculatorParams';
-import { getCreditRate } from './getCreditRate';
-import { getCreditTermYears } from './getCreditTermYears';
-import { getDefaultMonths } from './getDefaultMonths';
-import { getDefaultSum } from './getDefaultSum';
-import { getMonthlyPayment } from './getMonthlyPayment';
-import { renderButton } from './renderButton';
-import { renderMonthsInput } from './renderMonthsInput';
-import { renderProposal } from './renderProposal';
-import { renderTermsButton } from './renderTermsButton';
-import { renderWantedSumInput } from './renderWantedSumInput';
+import { CreditCalculatorForm } from './CreditCalculatorForm';
+import { DEFAULT_TABS } from './defaultTabs';
 
 export interface CreditCalculatorProps extends CreditCalculatorContent, UniBlockProps {}
 
-const DEFAULT_PAYMENT_TYPE = 'annuity';
-
-const borderStyle = 'border-solid border-[3px] border-primary-main rounded-md';
-
 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 tableRows = useCreditCalculatorData(context.useAsyncData, directoryName).rows;
-    const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isAnnuityChecked });
-
-    const defaultSum = getDefaultSum(calculatorParams);
-    const defaultMonths = getDefaultMonths(calculatorParams);
-
-    const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
-    const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
-
-    const rate = getCreditRate({ calculatorParams, isInsurance: isInsuranceChecked });
-
-    const monthlyPayment = 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));
-    }
+  ({ className = '', context, tabs = DEFAULT_TABS }) => {
+    const [currentTabIndex, setCurrentTabIndex] = context.useState(0);
 
     return (
-      <section className={`font-sans text-primary-text p-10 bg-white ${className}`}>
-        <div className={`box-border p-[49px] pr-[56px] mx-auto w-max ${borderStyle}`}>
-          <div className="flex justify-between">
-            <div className="mr-[42px]">
-              {renderWantedSumInput({ calculatorParams, moneyValue, defaultSum, setMoneyValue })}
-              {renderMonthsInput({
-                minMonths,
-                maxMonths,
-                monthsValue,
-                defaultMonths,
-                setMonthsValue,
-              })}
-              <div className="flex mb-7">
-                {creditTermYears.map((number, i) => renderButton(number, i, handleButtonClick))}
-              </div>
-              <Checkbox
-                text="Получаю пенсию на карту Россельхозбанка"
-                checked={isAnnuityChecked}
-                onChange={setIsAnnuityChecked}
-              />
-              <Checkbox
-                className="mt-3 mb-7"
-                text="Комплексная страховая защита"
-                checked={isInsuranceChecked}
-                onChange={setIsInsuranceChecked}
-              />
-            </div>
-            {renderProposal(monthlyPayment, rate)}
-          </div>
-          {renderTermsButton()}
-        </div>
+      <section className={`font-sans text-primary-text py-10 bg-white ${className}`}>
+        <Heading
+          className="w-full text-center mb-8"
+          headingType={getTileHeadingType(className)}
+          title="Калькулятор"
+        />
+        <Tabs tabs={tabs} currentTabIndex={currentTabIndex} onTabClick={setCurrentTabIndex} />
+        <CreditCalculatorForm
+          context={context}
+          directoryName={tabs[currentTabIndex]?.directoryName}
+        />
       </section>
     );
   },

package/src/components/CreditCalculator/CreditCalculatorContent.ts

@@ -1,3 +1,5 @@
+import type { Tab } from '../../ui-kit/Tabs/TabsProps';
+
 export interface CalculatorParams {
   isAnnuity?: boolean;
   minSum?: number;
@@ -13,9 +15,17 @@ export interface CreditCalculatorData {
 }
 
 /**
- * @title Кредитный калькулятор
+ * @title Вкладка
  */
-export interface CreditCalculatorContent {
+export interface CreditCalculatorTab extends Tab {
   /** @title Справочник */
   directoryName?: string;
 }
+
+/**
+ * @title Кредитный калькулятор
+ */
+export interface CreditCalculatorContent {
+  /** @title Вкладки */
+  tabs?: CreditCalculatorTab[];
+}

package/src/components/CreditCalculator/CreditCalculatorForm.tsx

@@ -0,0 +1,92 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
+import type { UniBlockProps } from '../../types';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { clamp } from '../../utils/clamp';
+import { DEFAULT_MAX_MONTHS, DEFAULT_MIN_MONTHS, MONTHS_IN_YEAR } from './constants';
+import { getCalculatorParams } from './getCalculatorParams';
+import { getCreditRate } from './getCreditRate';
+import { getCreditTermYears } from './getCreditTermYears';
+import { getDefaultMonths } from './getDefaultMonths';
+import { getDefaultSum } from './getDefaultSum';
+import { getMonthlyPayment } from './getMonthlyPayment';
+import { renderButton } from './renderButton';
+import { renderMonthsInput } from './renderMonthsInput';
+import { renderProposal } from './renderProposal';
+import { renderTermsButton } from './renderTermsButton';
+import { renderWantedSumInput } from './renderWantedSumInput';
+
+const DEFAULT_PAYMENT_TYPE = 'annuity';
+
+const BORDER_STYLE = 'border-solid border-[3px] border-primary-main rounded-md';
+
+export interface CreditCalculatorFormProps extends UniBlockProps {
+  directoryName?: string;
+}
+
+export const CreditCalculatorForm = JSX<CreditCalculatorFormProps>(({ context, 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 tableRows = useCreditCalculatorData(context.useAsyncData, directoryName).rows;
+  const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isAnnuityChecked });
+
+  const defaultSum = getDefaultSum(calculatorParams);
+  const defaultMonths = getDefaultMonths(calculatorParams);
+
+  const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
+  const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
+
+  const rate = getCreditRate({ calculatorParams, isInsurance: isInsuranceChecked });
+
+  const monthlyPayment = 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="mt-7">
+      <div className={`box-border p-[49px] pr-[56px] mx-auto w-max ${BORDER_STYLE}`}>
+        <div className="flex justify-between">
+          <div className="mr-[42px]">
+            {renderWantedSumInput({ calculatorParams, moneyValue, defaultSum, setMoneyValue })}
+            {renderMonthsInput({
+              minMonths,
+              maxMonths,
+              monthsValue,
+              defaultMonths,
+              setMonthsValue,
+            })}
+            <div className="flex mb-7">
+              {creditTermYears.map((number, i) => renderButton(number, i, handleButtonClick))}
+            </div>
+            <Checkbox
+              text="Получаю пенсию на карту Россельхозбанка"
+              checked={isAnnuityChecked}
+              onChange={setIsAnnuityChecked}
+            />
+            <Checkbox
+              className="mt-3 mb-7"
+              text="Комплексная страховая защита"
+              checked={isInsuranceChecked}
+              onChange={setIsInsuranceChecked}
+            />
+          </div>
+          {renderProposal(monthlyPayment, rate)}
+        </div>
+        {renderTermsButton()}
+      </div>
+    </section>
+  );
+});

package/src/components/CreditCalculator/defaultTabs.ts

@@ -0,0 +1,22 @@
+import type { CreditCalculatorTab } from './CreditCalculatorContent';
+
+export const DEFAULT_TABS: CreditCalculatorTab[] = [
+  {
+    title: 'Кредит',
+    description: 'Ставка от 6% до 7 лет',
+    directoryName: 'credit-calculator-data',
+    icon: 'CardIcon',
+  },
+  {
+    title: 'Кредит',
+    description: 'Ставка от 4% до 7 лет',
+    directoryName: 'credit-calculator-data1',
+    icon: 'ChartSquareIcon',
+  },
+  {
+    title: 'Кредит',
+    description: 'Ставка от 3% до 6 лет',
+    directoryName: 'credit-calculator-data2',
+    icon: 'DiscountShapeIcon',
+  },
+];