@redneckz/wildless-cms-uni-blocks 0.6.34 → 0.6.35

package/mobile/src/services/sitemap/SitemapProps.ts

@@ -20,13 +20,12 @@ export interface DispositionItem extends LinkProps {
 }
 
 export interface SitemapDataProps {
-  /** @title Основное меню */
   topItems?: TopMenuItem[];
-  /** @title Дополнительное меню */
   dispositions?: DispositionItem[];
   logo?: {
     image?: Picture;
     title?: string;
   };
   defaultLocation?: string;
+  officesLink?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.34",
+  "version": "0.6.35",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Calculator/Calculator.fixture.tsx

@@ -34,11 +34,6 @@ const CREDIT_CALCULATOR_BLOCK: CreditCalculatorParamsDef = {
 
 const DEPOSIT_CALCULATOR_BLOCK: DepositCalculatorParamsDef = {
   calcType: 'DepositCalculatorForm',
-  minSum: 50000,
-  maxSum: 5000000,
-  minMonths: 2,
-  maxMonths: 120,
-  rate: 5.9,
   buttons: buttons,
   footnote,
 };

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -5,19 +5,13 @@ import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
-import {
-  DEFAULT_MAX_MONTHS,
-  DEFAULT_MAX_SUM,
-  DEFAULT_MIN_MONTHS,
-  DEFAULT_MIN_SUM,
-  DEFAULT_MONTHS,
-  DEFAULT_SUM,
-} from './constants';
+import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
 import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
 import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderWantedSumInput } from './renderWantedSumInput';
+import { useDepositCalculatorParams } from './useDepositCalculatorParams';
 
 export interface DepositCalculatorProp extends DepositCalculatorParams, CommonCalculatorProps {
   className?: string;
@@ -38,13 +32,18 @@ const depositTypeItems = [
 ];
 
 export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
-  ({ className = '', rate, buttons, footnote }) => {
+  ({ className = '', sourceBookDir, buttons, footnote }) => {
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
-    const [isEveryMonth, toggleIsEveryMonth] = useState(false);
+    const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
+    const userInputParams = {
+      moneyValue,
+      monthsValue,
+      isMonthlyInterestPayment,
+    };
 
-    const income = 948841;
-    const finallySum = 1218841;
+    const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir);
+    const { income, finalSum, rate } = calculatorParams;
 
     return (
       <section className={className}>
@@ -52,18 +51,14 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
           {renderWantedSumInput(
             'Сумма вклада, ₽',
             {
-              moneyValue,
-              minSum: DEFAULT_MIN_SUM,
-              maxSum: DEFAULT_MAX_SUM,
+              ...calculatorParams,
             },
             setMoneyValue,
           )}
           {renderMonthsInput(
             'Срок вклада, месяцев',
             {
-              minMonths: DEFAULT_MIN_MONTHS,
-              maxMonths: DEFAULT_MAX_MONTHS,
-              monthsValue,
+              ...calculatorParams,
             },
             setMonthsValue,
           )}
@@ -73,13 +68,13 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
           {income ? (
             <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
           ) : null}
-          {finallySum ? (
-            <CalculatorValueBlock title="Сумма в конце срока" value={finallySum} postfix="₽" />
+          {finalSum ? (
+            <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
           ) : null}
           <RadioButtonGroup
             items={depositTypeItems}
-            checkedItem={isEveryMonth ? EVERY_MONTH : AT_END_TERM}
-            onChange={(text: string) => toggleIsEveryMonth(text === EVERY_MONTH)}
+            checkedItem={isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM}
+            onChange={(text: string) => toggleIsMonthlyInterestPayment(text === EVERY_MONTH)}
           />
           {renderButtonSection(buttons)}
           {renderFootnote(footnote)}

package/src/components/Calculator/constants.ts

@@ -1,5 +1,6 @@
 import { BonusCalculatorSourceBookParams } from './useBonusCalculatorParams';
 import { CreditCalculatorSourceBookParams } from './useCreditCalculatorParams';
+import { DepositCalculatorSourceBookParams } from './useDepositCalculatorParams';
 
 export const DEFAULT_MIN_SUM = 60000;
 export const DEFAULT_MAX_SUM = 2000000;
@@ -41,5 +42,15 @@ export const DEFAULT_BONUS_CALCULATOR_PARAMS: BonusCalculatorSourceBookParams =
   restBonusRate: 0.01,
 };
 
+export const DEFAULT_DEPOSIT_CALCULATOR_PARAMS: DepositCalculatorSourceBookParams = {
+  minSum: 50000,
+  maxSum: 5000000,
+  minMonths: 2,
+  maxMonths: 120,
+  rate: 5.9,
+  isMonthlyInterestPayment: true,
+};
+
 export const CREDIT_CALC_DEFAULT_DIR = 'credit-calculator-data';
 export const BONUS_CALC_DEFAULT_DIR = 'bonus-calculator-data';
+export const DEPOSIT_CALC_DEFAULT_DIR = 'deposit-calculator-data';

package/src/components/Calculator/useDepositCalculatorParams.ts

@@ -0,0 +1,64 @@
+import { DEFAULT_DEPOSIT_CALCULATOR_PARAMS, DEPOSIT_CALC_DEFAULT_DIR } from './constants';
+import { useCalculatorParams } from './useCalculatorParams';
+
+export interface CommonDepositParams {
+  isMonthlyInterestPayment: boolean;
+}
+export interface DepositCalculatorSourceBookParams extends CommonDepositParams {
+  minSum: number;
+  maxSum: number;
+  minMonths: number;
+  maxMonths: number;
+  rate: number;
+}
+
+export interface DepositCalculatorUserInputParams extends CommonDepositParams {
+  moneyValue: number;
+  monthsValue: number;
+}
+
+export interface DepositCalculatorParams
+  extends DepositCalculatorSourceBookParams,
+    DepositCalculatorUserInputParams {
+  income: number;
+  finalSum: number;
+}
+
+export type DepositCalculatorData = {
+  rows: DepositCalculatorSourceBookParams[];
+};
+
+export const useDepositCalculatorParams = (
+  userInputParams: DepositCalculatorUserInputParams,
+  sourceBookDir?: string,
+): DepositCalculatorParams => {
+  const { isMonthlyInterestPayment, moneyValue } = userInputParams;
+
+  const data = useCalculatorParams<DepositCalculatorData>(
+    sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR,
+  );
+
+  const depositCalculatorSourceBookParams =
+    data?.rows.find((_) => isMonthlyInterestPayment === _.isMonthlyInterestPayment) ||
+    DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
+
+  const { rate } = depositCalculatorSourceBookParams;
+
+  const income = getDepositIncome(rate, userInputParams);
+  const finalSum = moneyValue + income;
+
+  return { ...depositCalculatorSourceBookParams, ...userInputParams, income, finalSum };
+};
+
+const getDepositIncome = (rate: number, userInputParams: DepositCalculatorUserInputParams) => {
+  const { isMonthlyInterestPayment, moneyValue, monthsValue } = userInputParams;
+
+  if (isMonthlyInterestPayment) {
+    return Math.round(moneyValue * Math.pow((1200 + rate) / 1200, monthsValue) - moneyValue);
+  } else {
+    /*
+    Приблизительный расчёт, не учитывающий разницу в количестве дней в месяцах. Месяц принят за 30 дней, год за 365 дней.
+    */
+    return Math.round((moneyValue * rate * 30 * monthsValue) / 365 / 100);
+  }
+};

package/src/components/Header/Header.tsx

@@ -25,7 +25,7 @@ export const Header = JSX<HeaderProps>(
   ({ bgColor = 'bg-white', className = '', showSubMenu = true, ...rest }) => {
     const router = useRouter();
 
-    const { topItems, logo, defaultLocation } = useSWRResource<SitemapDataProps>(
+    const { topItems, logo, defaultLocation, officesLink } = useSWRResource<SitemapDataProps>(
       projectSettings.SITEMAP || 'sitemap',
       rest.options?.page?.fallback,
     );
@@ -57,6 +57,7 @@ export const Header = JSX<HeaderProps>(
             <HeaderSecondaryMenu
               className="ml-auto"
               defaultLocation={defaultLocation}
+              officesLink={officesLink}
               bgColor={bgColor}
             />
           </div>

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -8,6 +8,7 @@ import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
 interface HeaderSecondaryMenuContent {
   defaultLocation?: string;
+  officesLink?: string;
   bgColor?: BgColorVersion;
 }
 
@@ -29,7 +30,7 @@ const LINKS_ICON_VERSION_MAP: Record<BgColorVersion, IconVersion> = {
 };
 
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({ className, defaultLocation = 'Москва', bgColor = 'bg-white' }) => {
+  ({ className, officesLink, defaultLocation = 'Москва', bgColor = 'bg-white' }) => {
     const [city, getCity] = useGeolocation(defaultLocation);
 
     return (
@@ -43,14 +44,16 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           onClick={getCity}
           bgColor={bgColor}
         />
-        <TopItem
-          className="mr-7"
-          flat={true}
-          href="#"
-          text="Офисы и банкоматы"
-          ariaLabel="Список всех доступных офисов и банкоматов"
-          bgColor={bgColor}
-        />
+        {officesLink ? (
+          <TopItem
+            className="mr-7"
+            flat={true}
+            href={officesLink}
+            text="Офисы и банкоматы"
+            ariaLabel="Список всех доступных офисов и банкоматов"
+            bgColor={bgColor}
+          />
+        ) : null}
         <HeaderSecondaryMenuButton
           className={`mr-5 group ${COLORS_MAP[bgColor]}`}
           ariaLabel="Поиск по сайту"

package/src/components/OtherProductsItem/OtherProductsItem.tsx

@@ -35,7 +35,7 @@ export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProd
             <DefaultFoldButton
               label={label}
               icon={icons[Number(isUnfolded)]}
-              dataTheme={rest.options?.page?.colorPalette || colorPalette}
+              dataTheme={colorPalette || rest.options?.page?.colorPalette}
               onClick={onToggle}
             />
           )}

package/src/components/VerticalLayout/VerticalLayout.tsx

@@ -31,15 +31,17 @@ const backgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
 };
 
 export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutProps>(
-  ({ className = '', gap = '', align = 'left', version = 'transparent', ...rest }) => (
+  ({ className = '', gap = '', align, version = 'transparent', ...rest }) => (
     <BlockWrapper
       className={[
         'flex flex-col',
         gapStyleMap[gap],
-        alignStyle[align],
+        align && alignStyle[align],
         backgroundStyleMap[version],
         className,
-      ].join(' ')}
+      ]
+        .filter(Boolean)
+        .join(' ')}
       {...rest}
     >
       {renderChildren(rest)}

package/src/services/sitemap/SitemapProps.ts

@@ -20,13 +20,12 @@ export interface DispositionItem extends LinkProps {
 }
 
 export interface SitemapDataProps {
-  /** @title Основное меню */
   topItems?: TopMenuItem[];
-  /** @title Дополнительное меню */
   dispositions?: DispositionItem[];
   logo?: {
     image?: Picture;
     title?: string;
   };
   defaultLocation?: string;
+  officesLink?: string;
 }