@redneckz/wildless-cms-uni-blocks 0.14.996 → 0.14.998

package/mobile/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -8,6 +8,7 @@ import { ToggleIcon } from '../Icon/ToggleIcon';
 interface DefaultFoldButtonProps extends ButtonProps, LabelProps {
   isUnfolded?: boolean;
   short?: boolean;
+  labelColorStyle?: string;
 }
 
 export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
@@ -17,18 +18,23 @@ export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
     short,
     label = isUnfolded ? 'Скрыть' : 'Развернуть',
     embedded,
+    labelColorStyle,
     ...rest
-  }) => (
-    <Button
-      className={style({ 'w-full': !short }, className)}
-      embedded={embedded}
-      shape={short ? 'default' : 'square'}
-      role="tab"
-      aria-label="Кнопка сворачивающейся секции"
-      {...rest}
-    >
-      <ButtonTitle>{label}</ButtonTitle>
-      <ToggleIcon isUnfolded={isUnfolded} iconVersion={embedded ? 'color' : ''} />
-    </Button>
-  ),
+  }) => {
+    const iconColor = labelColorStyle === 'white' ? '' : 'color';
+
+    return (
+      <Button
+        className={style({ 'w-full': !short }, className)}
+        embedded={embedded}
+        shape={short ? 'default' : 'square'}
+        role="tab"
+        aria-label="Кнопка сворачивающейся секции"
+        {...rest}
+      >
+        <ButtonTitle labelColor={labelColorStyle}>{label}</ButtonTitle>
+        <ToggleIcon isUnfolded={isUnfolded} iconVersion={embedded ? iconColor : ''} />
+      </Button>
+    );
+  },
 );

package/mobile/src/ui-kit/Text/Text.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 import {
   type FontWeight,
@@ -8,13 +9,13 @@ import {
   type TitleSize,
 } from './TextProps';
 
-interface TextProps {
+interface TextProps extends ComponentType {
   size?: TextSize | TitleSize;
   color?: TextColor;
   align?: TextAlign;
   font?: FontWeight;
 }
 
-export const Text = JSX<TextProps>(({ children, ...styleProps }) => (
-  <span className={style('font-sans', Object.values(styleProps))}>{children}</span>
+export const Text = JSX<TextProps>(({ children, className, ...styleProps }) => (
+  <span className={style('font-sans', Object.values(styleProps), className)}>{children}</span>
 ));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.996",
+  "version": "0.14.998",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -205,7 +205,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "110 kB",
+      "limit": "115 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/api/getSubmitBody.ts

@@ -71,6 +71,7 @@ export const getSubmitBody = ({ body, endpoint, router }: submitBodyProps) => {
       partnerName,
       partnerSymbolCode,
     }),
+    ...getRkoTariffName(typeForm),
     ...staticBody,
   };
 };
@@ -116,3 +117,10 @@ const addPageSlug = (typeForm?: string, router?: Router) =>
         typeForm: router?.pathname?.split('/')?.at(-1) || '/',
       }
     : {};
+
+const getRkoTariffName = (typeForm?: string) =>
+  typeForm === 'CALC'
+    ? {
+        partnerComments: globalThis?.sessionStorage.getItem('rkoTariffName') ?? 'Неизвестный тариф',
+      }
+    : {};

package/src/components/ApplicationForm/ApplicationForm.example.json

@@ -1798,5 +1798,49 @@
         }
       }
     }
+  ],
+  [
+    "Калькулятор РКО",
+    {
+      "content": {
+        "version": "primary",
+        "padding": "",
+        "title": "Открыть счёт РКО",
+        "typeForm": "CALC",
+        "endpoint": "sendcorporatelead",
+        "sections": [
+          {
+            "inputs": [
+              {
+                "name": "name",
+                "required": true
+              }
+            ]
+          },
+          {
+            "columns": 2,
+            "inputs": [
+              {
+                "name": "dadataPartyInnSelect",
+                "required": true
+              },
+              {
+                "name": "phone",
+                "required": true
+              }
+            ]
+          }
+        ],
+        "button": {
+          "text": "Отправить заявку",
+          "version": "primary"
+        },
+        "link": {
+          "text": "условиями передачи данных",
+          "href": "/privacy-policy",
+          "target": "_blank"
+        }
+      }
+    }
   ]
 ]

package/src/components/ApplicationForm/ApplicationForm.fixture.tsx

@@ -1126,4 +1126,30 @@ export default {
       <DialogManager />
     </div>
   ),
+  rkoCalc: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm
+        className="col-span-12"
+        title="Калькулятор РКО"
+        typeForm="CALC"
+        endpoint="sendcorporatelead"
+        sections={[
+          {
+            inputs: [{ name: 'name', required: true }],
+          },
+          {
+            columns: 2,
+            inputs: [
+              { name: 'dadataPartyInnSelect', required: true },
+              { name: 'phone', required: true },
+            ],
+          },
+        ]}
+        button={button}
+        link={linkCorp}
+      />
+      <PopupManager />
+      <DialogManager />
+    </div>
+  ),
 };

package/src/components/Blocks.mobile.ts

@@ -12,6 +12,7 @@ import { CalculatorBusinessDeposit } from './CalculatorBusinessDeposit/Calculato
 import { CalculatorCredit } from './CalculatorCredit/CalculatorCredit';
 import { CalculatorDeposit } from './CalculatorDeposit/CalculatorDeposit';
 import { CalculatorRefinancing } from './CalculatorRefinancing/CalculatorRefinancing';
+import { CalculatorRko } from './CalculatorRko/CalculatorRko';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
 import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
@@ -36,6 +37,7 @@ import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { OfficesAtmsMap } from './OfficesAtmsMap/OfficesAtmsMap';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
+import { RkoTariffCardsTable } from './RkoTariffCardsTable/RkoTariffCardsTable';
 import { RollupItem } from './RollupItem/RollupItem';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { StickyBottomMenu } from './StickyBottomMenu/StickyBottomMenu';
@@ -88,4 +90,6 @@ export const Blocks: BlocksRegistry = {
   CreditForm,
   DebitForm,
   CashbackCalculator,
+  CalculatorRko,
+  RkoTariffCardsTable,
 };

package/src/components/Blocks.ts

@@ -12,6 +12,7 @@ import { CalculatorBusinessDeposit } from './CalculatorBusinessDeposit/Calculato
 import { CalculatorCredit } from './CalculatorCredit/CalculatorCredit';
 import { CalculatorDeposit } from './CalculatorDeposit/CalculatorDeposit';
 import { CalculatorRefinancing } from './CalculatorRefinancing/CalculatorRefinancing';
+import { CalculatorRko } from './CalculatorRko/CalculatorRko';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
 import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
@@ -37,6 +38,7 @@ import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { OfficesAtmsMap } from './OfficesAtmsMap/OfficesAtmsMap';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
+import { RkoTariffCardsTable } from './RkoTariffCardsTable/RkoTariffCardsTable';
 import { RollupItem } from './RollupItem/RollupItem';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { StickyBottomMenu } from './StickyBottomMenu/StickyBottomMenu';
@@ -92,4 +94,6 @@ export const Blocks: BlocksRegistry = {
   CreditForm,
   DebitForm,
   CashbackCalculator,
+  CalculatorRko,
+  RkoTariffCardsTable,
 };

package/src/components/CalculatorDeposit/normalize.tsx

@@ -10,7 +10,6 @@ export const normalizeDepositParams = (rows?: DepositCalculatorRowsData[]) => (_
     : {
         ..._,
         ...normalizeReplenishWithdrawn(_),
-        ...normalizeMoneyValue(_, rows),
         ...normalizeMonthValue(_, rows),
         ...normalizeCurrency(_, rows),
       };
@@ -25,12 +24,6 @@ export const normalizeMonthValue = (_: DepositParams, rows?: DepositCalculatorRo
   return { monthsValue: clamp(monthsValue, minMonths, maxMonths) };
 };
 
-export const normalizeMoneyValue = (_: DepositParams, rows?: DepositCalculatorRowsData[]) => {
-  const { minSum, maxSum } = getRangeByKeys(['minSum', 'maxSum'], getRows(rows, _?.currency));
-  const moneyValue = _.moneyValue || minSum;
-
-  return { moneyValue: clamp(moneyValue, minSum, maxSum) };
-};
 export const normalizeCurrency = (_: DepositParams, rows?: DepositCalculatorRowsData[]) => ({
   currency: _?.currency ?? rows?.map((row) => row.currency)?.[0],
 });

package/src/components/CalculatorRko/CalculatorRko.fixture.mobile.tsx

@@ -0,0 +1,28 @@
+import '../../setup-fixture';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
+import { CalculatorRko } from './CalculatorRko';
+
+const calculator = {
+  className: 'col-span-12',
+  title: 'Калькулятор РКО',
+  footnote:
+    'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+  calcSource: {
+    $ref: '/wcms-resources/rko-calculator-data.json',
+  },
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CalculatorRko clientType="standard" {...calculator} />
+      <PopupManager />
+    </div>
+  ),
+  agro: (
+    <div className="container grid grid-cols-12">
+      <CalculatorRko {...calculator} clientType="agro" />
+      <PopupManager />
+    </div>
+  ),
+};

package/src/components/CalculatorRko/CalculatorRko.fixture.tsx

@@ -0,0 +1,28 @@
+import '../../setup-fixture';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
+import { CalculatorRko } from './CalculatorRko';
+
+const calculator = {
+  className: 'col-span-12',
+  title: 'Калькулятор РКО',
+  footnote:
+    'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+  calcSource: {
+    $ref: '/wcms-resources/rko-calculator-data.json',
+  },
+};
+
+export default {
+  standard: (
+    <div className="container grid grid-cols-12">
+      <CalculatorRko {...calculator} clientType="standard" />
+      <PopupManager />
+    </div>
+  ),
+  agro: (
+    <div className="container grid grid-cols-12">
+      <CalculatorRko {...calculator} clientType="agro" />
+      <PopupManager />
+    </div>
+  ),
+};

package/src/components/CalculatorRko/CalculatorRko.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm/useForm';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { CalculatorLayout } from '../../ui-kit/Calculator/CalculatorLayout';
+import { CalculatorStyle } from '../../ui-kit/Calculator/CalculatorStyle';
+import { renderCountInput } from '../../ui-kit/Calculator/renderCountInput';
+import { renderFootnote } from '../../ui-kit/Calculator/renderFootnote';
+import { renderWantedSumInput } from '../../ui-kit/Calculator/renderWantedSumInput';
+import { Loader } from '../../ui-kit/Loader/Loader';
+import { Text } from '../../ui-kit/Text/Text';
+import { UniBlock } from '../../UniBlock/UniBlock';
+import type { UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { capitalize } from '../../utils/capitalize';
+import { style } from '../../utils/style';
+import { RkoTariffCardsTable } from '../RkoTariffCardsTable/RkoTariffCardsTable';
+import { type TariffCardContent } from '../RkoTariffCardsTable/RkoTariffCardsTableContent';
+import {
+  type CalculatorRkoContent,
+  type RkoCalculatorSourceBookCommissionsParams,
+} from './CalculatorRkoContent';
+import {
+  COMMISSIONS_CONFIG,
+  INPUTS_CONFIG,
+  RKO_DEFAULT_CASH_IN_SUM,
+  RKO_DEFAULT_CASH_OUT_SUM,
+  RKO_DEFAULT_CURRENCY,
+  RKO_DEFAULT_TRANSFER_FL_SUM,
+  RKO_DEFAULT_TRANSFER_LEGAL_COUNT,
+} from './constants';
+import { filterByClientType } from './filterByClientType';
+import { getCalculatedCommission } from './getCalculatedCommission';
+import { getInitialRkoTariffsParams } from './getInitialRkoTariffsParams';
+import { getRkoCalculatorParams } from './getRkoCalculatorParams';
+import { markBestTariff } from './markBestTariff';
+import { mergeTariffData } from './mergeTariffData';
+
+export interface RkoCalculatorProps extends CalculatorRkoContent, UniBlockProps {}
+
+export const CalculatorRko = UniBlock<RkoCalculatorProps>(
+  // eslint-disable-next-line max-lines-per-function
+  ({ className = '', title, calcSource, footnote, clientType = 'standard', ...rest }) => {
+    const [tariffs, setTariffs] = useState<TariffCardContent[]>([]);
+    const [userInputParams, { field }] = useForm({
+      transferLegalCount: RKO_DEFAULT_TRANSFER_LEGAL_COUNT,
+      flTransferSum: RKO_DEFAULT_TRANSFER_FL_SUM,
+      cashOutSum: RKO_DEFAULT_CASH_OUT_SUM,
+      cashInSum: RKO_DEFAULT_CASH_IN_SUM,
+    });
+
+    const { rows } = calcSource ?? {};
+
+    const calcTariffs = useMemo(() => filterByClientType(rows?.[0]?.tariffs, clientType), [rows]);
+    const calcParams = getRkoCalculatorParams(userInputParams, rows, clientType);
+    const calcCommissions = filterByClientType(rows?.[0]?.commissions, clientType);
+
+    useEffect(() => {
+      if (!calcCommissions) {
+        const initialRkoTariffsParams = getInitialRkoTariffsParams(calcTariffs);
+        setTariffs(initialRkoTariffsParams);
+
+        return;
+      }
+      const commissions = COMMISSIONS_CONFIG.reduce((acc, config) => {
+        acc[config.key] = getCalculatedCommission({
+          ranges: calcCommissions?.[config.key],
+          value: userInputParams?.[config.valueKey],
+          minKey: config.minKey,
+          maxKey: config.maxKey,
+        });
+
+        return acc;
+      }, {} as RkoCalculatorSourceBookCommissionsParams);
+
+      const mergedTariffs = mergeTariffData(commissions, calcTariffs);
+      const result = markBestTariff(mergedTariffs);
+      setTariffs(result);
+    }, [userInputParams, calcTariffs]);
+
+    return (
+      <div className={style(className, 'bg-white')}>
+        <CalculatorLayout className={className} title={title} {...rest}>
+          <section className={style(CalculatorStyle.wrapperMax, className)}>
+            <div className={CalculatorStyle.inputMax}>
+              {renderCountInput({
+                title: 'Количество внешних переводов на счета ЮЛ и ИП в месяц, шт',
+                step: 1,
+                min: calcParams.minTransferLegalCount,
+                max: calcParams.maxTransferLegalCount,
+                ...field('transferLegalCount'),
+                value: calcParams.transferLegalCount,
+              })}
+              {INPUTS_CONFIG.map((config, index) => (
+                <div key={index}>
+                  {renderWantedSumInput({
+                    title: config.title,
+                    step: config.step,
+                    min: calcParams[`min${capitalize(config.key)}` as keyof typeof calcParams],
+                    max: calcParams[`max${capitalize(config.key)}` as keyof typeof calcParams],
+                    ...field(config.key),
+                    value: calcParams[config.key as keyof typeof calcParams],
+                  })}
+                </div>
+              ))}
+            </div>
+            <div className={style(CalculatorStyle.result)}>{renderFootnote(footnote)}</div>
+          </section>
+        </CalculatorLayout>
+        <BlockWrapper
+          className={style('flex flex-col gap-4xl items-center', className)}
+          defaultPadding="p-4xl pt-0"
+          {...rest}
+        >
+          {renderHeading()}
+          {tariffs ? (
+            <RkoTariffCardsTable items={tariffs} currency={RKO_DEFAULT_CURRENCY} />
+          ) : (
+            <Loader position="static" />
+          )}
+        </BlockWrapper>
+      </div>
+    );
+  },
+);
+
+const renderHeading = () => (
+  <Text size="text-h6" font="font-medium" align="text-center" className="block lg:mb-0 mb-m">
+    Расчеты за один месяц по введенным выше параметрам
+  </Text>
+);

package/src/components/CalculatorRko/CalculatorRkoContent.ts

@@ -0,0 +1,96 @@
+import type { JSONRefObject } from '../../data/JSONRefObject';
+import { type CommonCalculatorProps } from '../../ui-kit/Calculator/CalculatorProps';
+import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
+import { type Option } from '../../ui-kit/Select/Option';
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+
+/**
+ * @title Калькулятор РКО
+ */
+export type CalculatorRkoContent = UniBlockContent &
+  CommonCalculatorProps & {
+    calcSource?: JSONRefObject & RkoCalculatorData;
+    clientType?: ClientType;
+  };
+
+export interface RkoCalcValueProps {
+  transferLegalCount: number;
+  flTransferSum: number;
+  cashInSum: number;
+  cashOutSum: number;
+}
+
+export type RkoCalculatorUserInputParams = RkoCalcValueProps;
+
+export type CommissionType = 'fixedSum' | 'fixedAmount' | 'percent';
+
+/**
+ * @title Тип клиента
+ * @default "ЮЛ / ИП"
+ * @enumNames ["ЮЛ / ИП", "Агро"]
+ */
+export type ClientType = 'standard' | 'agro';
+
+export interface LimitParamsProps extends Pick<TariffProps, 'tariffName'> {
+  clientType: ClientType;
+  commissionType: CommissionType;
+  commissionValue: number;
+}
+
+export type TariffProps = {
+  tariffName: string;
+  tariffDesc: string;
+  clientType: string;
+  accountServiceFee: number;
+};
+
+export interface RkoCalcLimits
+  extends MinMaxTransferLegalCountProps,
+    MinMaxFlTransferSumProps,
+    MinMaxCashInSumProps,
+    MinMaxCashOutSumProps {}
+
+export type MinMaxTransferLegalCountProps = {
+  minTransferLegalCount: number;
+  maxTransferLegalCount: number;
+};
+
+export type MinMaxFlTransferSumProps = {
+  minFlTransferSum: number;
+  maxFlTransferSum: number;
+};
+
+export type MinMaxCashInSumProps = {
+  minCashInSum: number;
+  maxCashInSum: number;
+};
+
+export type MinMaxCashOutSumProps = {
+  minCashOutSum: number;
+  maxCashOutSum: number;
+};
+
+export type RkoCalculatorSourceBookTariffsParams = Omit<LimitParamsProps, 'commissionType'> &
+  Pick<TariffProps, 'accountServiceFee' | 'tariffDesc'>;
+
+export type RkoCalculatorCommissionType = LimitParamsProps;
+
+export interface RkoCalculatorSourceBookCommissionsParams {
+  transferLegalCountCommission: (RkoCalculatorCommissionType & MinMaxTransferLegalCountProps)[];
+  flTransferSumCommission: (RkoCalculatorCommissionType & MinMaxFlTransferSumProps)[];
+  cashOutSumCommission: (RkoCalculatorCommissionType & MinMaxCashOutSumProps)[];
+  cashInSumCommission: (RkoCalculatorCommissionType & MinMaxCashInSumProps)[];
+}
+
+export type RkoCalculatorRowsData = {
+  tariffs?: RkoCalculatorSourceBookTariffsParams[];
+  commissions?: RkoCalculatorSourceBookCommissionsParams;
+  currency?: Option;
+  buttons?: LinkButtonContent[];
+};
+
+export type RkoCalculatorData = {
+  rows?: RkoCalculatorRowsData[];
+};
+
+export interface RkoCalculatorParams extends RkoCalculatorUserInputParams, RkoCalcLimits {}

package/src/components/CalculatorRko/constants.ts

@@ -0,0 +1,56 @@
+import type { Option } from '../../ui-kit/Select/Option';
+
+export const RKO_DEFAULT_CURRENCY: Option = {
+  text: '₽',
+  key: 'rub',
+};
+
+export const RKO_DEFAULT_TRANSFER_FL_SUM = 0;
+export const RKO_DEFAULT_CASH_IN_SUM = 0;
+export const RKO_DEFAULT_CASH_OUT_SUM = 0;
+export const RKO_DEFAULT_TRANSFER_LEGAL_COUNT = 0;
+
+export const COMMISSIONS_CONFIG = [
+  {
+    key: 'transferLegalCountCommission',
+    valueKey: 'transferLegalCount',
+    minKey: 'minTransferLegalCount',
+    maxKey: 'maxTransferLegalCount',
+  },
+  {
+    key: 'flTransferSumCommission',
+    valueKey: 'flTransferSum',
+    minKey: 'minFlTransferSum',
+    maxKey: 'maxFlTransferSum',
+  },
+  {
+    key: 'cashOutSumCommission',
+    valueKey: 'cashOutSum',
+    minKey: 'minCashOutSum',
+    maxKey: 'maxCashOutSum',
+  },
+  {
+    key: 'cashInSumCommission',
+    valueKey: 'cashInSum',
+    minKey: 'minCashInSum',
+    maxKey: 'maxCashInSum',
+  },
+];
+
+export const INPUTS_CONFIG = [
+  {
+    key: 'flTransferSum',
+    title: 'Сумма переводов на счета ФЛ в месяц, ₽',
+    step: 50000,
+  },
+  {
+    key: 'cashInSum',
+    title: 'Внесение наличных через кассу в месяц, ₽',
+    step: 50000,
+  },
+  {
+    key: 'cashOutSum',
+    title: 'Снятие наличных в кассе банка в месяц, ₽',
+    step: 50000,
+  },
+] as const;

package/src/components/CalculatorRko/filterByClientType.ts

@@ -0,0 +1,31 @@
+import { type RkoCalculatorCommissionType } from './CalculatorRkoContent';
+
+export const filterByClientType = <T>(data: T, clientType: string): T => {
+  if (Array.isArray(data)) {
+    return data.filter((item) => item?.clientType === clientType) as T;
+  }
+
+  if (data && typeof data === 'object') {
+    const result = {} as Record<string, any>;
+
+    for (const key in data) {
+      if (Object.hasOwn(data, key)) {
+        const value = data[key];
+
+        // eslint-disable-next-line max-depth
+        if (Array.isArray(value)) {
+          result[key] = value.filter(
+            (item: RkoCalculatorCommissionType) => item?.clientType === clientType,
+          );
+        } else {
+          result[key] = value;
+        }
+      }
+    }
+
+    return result as T;
+  }
+
+  // На всякий случай
+  return data;
+};