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

package/src/components/CalculatorRko/getCalculatedCommission.ts

@@ -0,0 +1,174 @@
+import { type CommissionType } from './CalculatorRkoContent';
+const SLICE_CORRECTION = 1; // если диапазон включает обе границы
+
+type CalculateCommissionProps = {
+  ranges?: RangeType[];
+  value?: number;
+  minKey?: string;
+  maxKey?: string;
+};
+
+type CalculateCommissionByTypeProps = {
+  type: CommissionType;
+  sliceAmount: number;
+  commissionValue: number;
+  context: { min: number; max: number; amount: number };
+};
+
+type CheckRangeProps = {
+  range: RangeType;
+  amount: number;
+  minKey: string;
+  maxKey: string;
+};
+
+type RangeType = Record<string, number | string>;
+
+export const getCalculatedCommission = ({
+  ranges = [],
+  value = 0,
+  minKey = 'min',
+  maxKey = 'max',
+}: CalculateCommissionProps) => {
+  const amount = Number(value);
+  if (isNaN(amount) || amount <= 0) {
+    return 0;
+  }
+
+  const groupedTariffs = groupRangesByTariff(ranges);
+  const result = {};
+
+  for (const tariff in groupedTariffs) {
+    result[tariff] = calculateTariffCommission({
+      ranges: groupedTariffs[tariff],
+      value: amount,
+      minKey,
+      maxKey,
+    });
+  }
+
+  return result;
+};
+
+const calculateTariffCommission = ({
+  ranges = [],
+  value = 0,
+  minKey = 'min',
+  maxKey = 'max',
+}: CalculateCommissionProps): number => {
+  const validRanges = getValidTariffRanges(ranges, minKey);
+
+  let totalCommission = 0;
+  let minCommission = 0;
+
+  for (const range of validRanges) {
+    minCommission = Number(range.minCommission) ?? 0;
+
+    if (!isValidRange({ range, amount: value, minKey, maxKey })) {
+      continue;
+    }
+
+    const sliceAmount = calculateSliceAmount({ range, amount: value, minKey, maxKey });
+
+    const commission = calculateCommissionByType({
+      type: range.commissionType as CommissionType,
+      sliceAmount,
+      commissionValue: Number(range.commissionValue),
+      context: {
+        min: Number(range[minKey]),
+        max: Number(range[maxKey]),
+        amount: Number(value),
+      },
+    });
+
+    totalCommission += commission;
+
+    if (value <= range[maxKey]) {
+      break;
+    }
+  }
+
+  if (totalCommission < minCommission) {
+    totalCommission = minCommission;
+  }
+
+  return Math.round(totalCommission);
+};
+
+const calculateSliceAmount = ({ range, amount, minKey, maxKey }: CheckRangeProps): number => {
+  const min = range[minKey];
+  const max = range[maxKey];
+
+  const sliceStart = Math.max(Number(min), 0);
+  const sliceEnd = Math.min(Number(max), amount);
+
+  return sliceEnd - sliceStart + SLICE_CORRECTION;
+};
+
+const isValidRange = ({ range, amount, minKey, maxKey }: CheckRangeProps): boolean => {
+  const min = range[minKey];
+  const max = range[maxKey];
+  const commissionValue = Number(range.commissionValue);
+
+  if (min == null || max == null || isNaN(commissionValue)) {
+    return false;
+  }
+  if (amount < min) {
+    return false;
+  }
+
+  const sliceStart = Math.max(Number(min), 0);
+  const sliceEnd = Math.min(Number(max), amount);
+
+  return sliceStart <= sliceEnd;
+};
+
+const getValidTariffRanges = (ranges: RangeType[], minKey: string) =>
+  ranges
+    .filter((r) => r.commissionValue != null && r.commissionType != null)
+    .sort((a, b) => Number(a[minKey]) - Number(b[minKey]));
+
+const calculateCommissionByType = ({
+  type,
+  sliceAmount,
+  commissionValue,
+  context,
+}: CalculateCommissionByTypeProps): number => {
+  const { min, max, amount } = context;
+
+  switch (type) {
+    case 'fixedSum':
+      if (min === 0 || amount <= max) {
+        return commissionValue;
+      }
+
+      return 0;
+
+    case 'percent':
+      return (sliceAmount * commissionValue) / 100;
+
+    case 'fixedAmount':
+      return Math.round(sliceAmount * commissionValue);
+
+    default:
+      return 0;
+  }
+};
+
+const groupRangesByTariff = (ranges: RangeType[]) => {
+  const tariffs: Record<string, any[]> = {};
+
+  for (const range of ranges) {
+    const { tariff } = range;
+    if (!tariff) {
+      continue;
+    }
+
+    if (!tariffs[tariff]) {
+      tariffs[tariff] = [];
+    }
+    tariffs[tariff].push(range);
+  }
+
+  return tariffs;
+};

package/src/components/CalculatorRko/getInitialRkoTariffsParams.ts

@@ -0,0 +1,17 @@
+import { type TariffCardContent } from '../RkoTariffCardsTable/RkoTariffCardsTableContent';
+import { type RkoCalculatorSourceBookTariffsParams } from './CalculatorRkoContent';
+
+export const getInitialRkoTariffsParams = (
+  tariffs: RkoCalculatorSourceBookTariffsParams[] = [],
+): TariffCardContent[] =>
+  tariffs.map((tariff) => {
+    return {
+      ...tariff,
+      flTransferSumCommission: 0,
+      cashOutSumCommission: 0,
+      cashInSumCommission: 0,
+      transferLegalCountCommission: 0,
+      totalCommission: tariff.accountServiceFee,
+      isBest: false,
+    };
+  });

package/src/components/CalculatorRko/getRkoCalculatorParams.ts

@@ -0,0 +1,47 @@
+import { getRangeByKeys } from '../../ui-kit/Calculator/rangeHelpers';
+import {
+  type ClientType,
+  type RkoCalculatorParams,
+  type RkoCalculatorRowsData,
+  type RkoCalculatorSourceBookCommissionsParams,
+  type RkoCalculatorUserInputParams,
+} from './CalculatorRkoContent';
+
+export const getRkoCalculatorParams = (
+  userInputParams: RkoCalculatorUserInputParams,
+  rows?: RkoCalculatorRowsData[],
+  clientType?: ClientType,
+): RkoCalculatorParams => {
+  const commissionsRows: RkoCalculatorSourceBookCommissionsParams | undefined =
+    rows?.[0]?.commissions;
+
+  const { minTransferLegalCount, maxTransferLegalCount } = getRangeByKeys(
+    ['minTransferLegalCount', 'maxTransferLegalCount'],
+    commissionsRows?.transferLegalCountCommission.filter((item) => item.clientType === clientType),
+  );
+  const { minFlTransferSum, maxFlTransferSum } = getRangeByKeys(
+    ['minFlTransferSum', 'maxFlTransferSum'],
+    commissionsRows?.flTransferSumCommission.filter((item) => item.clientType === clientType),
+  );
+
+  const { minCashInSum, maxCashInSum } = getRangeByKeys(
+    ['minCashInSum', 'maxCashInSum'],
+    commissionsRows?.cashInSumCommission.filter((item) => item.clientType === clientType),
+  );
+  const { minCashOutSum, maxCashOutSum } = getRangeByKeys(
+    ['minCashOutSum', 'maxCashOutSum'],
+    commissionsRows?.cashOutSumCommission.filter((item) => item.clientType === clientType),
+  );
+
+  return {
+    ...userInputParams,
+    minTransferLegalCount,
+    maxTransferLegalCount,
+    minFlTransferSum,
+    maxFlTransferSum,
+    minCashInSum,
+    maxCashInSum,
+    minCashOutSum,
+    maxCashOutSum,
+  };
+};

package/src/components/CalculatorRko/markBestTariff.ts

@@ -0,0 +1,16 @@
+export const markBestTariff = <T extends { totalCommission: number }>(
+  tariffs: T[],
+): (T & { isBest?: boolean })[] => {
+  if (tariffs.length === 0) {
+    return tariffs;
+  }
+
+  const minCommission = Math.min(...tariffs.map((t) => t.totalCommission));
+
+  const minTariffIndex = tariffs.findIndex((t) => t.totalCommission === minCommission);
+
+  return tariffs.map((tariff, index) => ({
+    ...tariff,
+    isBest: index === minTariffIndex,
+  }));
+};

package/src/components/CalculatorRko/mergeTariffData.ts

@@ -0,0 +1,37 @@
+import { type TariffCardContent } from '../RkoTariffCardsTable/RkoTariffCardsTableContent';
+import {
+  type RkoCalculatorSourceBookCommissionsParams,
+  type RkoCalculatorSourceBookTariffsParams,
+} from './CalculatorRkoContent';
+
+export const mergeTariffData = (
+  commissionData: RkoCalculatorSourceBookCommissionsParams,
+  tariffs: RkoCalculatorSourceBookTariffsParams[] = [],
+): TariffCardContent[] => {
+  const commissionKeys = [
+    'flTransferSumCommission',
+    'cashOutSumCommission',
+    'cashInSumCommission',
+    'transferLegalCountCommission',
+  ] as const;
+
+  return tariffs.map((tariff) => {
+    const { tariffName, accountServiceFee } = tariff;
+
+    const commissions = commissionKeys.reduce((acc, key) => {
+      acc[key] = commissionData[key]?.[tariffName] ?? 0;
+
+      return acc;
+    }, {} as Record<typeof commissionKeys[number], number>);
+
+    const totalCommission =
+      Object.values(commissions).reduce((sum, val) => sum + val, 0) + accountServiceFee;
+
+    return {
+      ...tariff,
+      ...commissions,
+      isBest: false,
+      totalCommission,
+    };
+  });
+};

package/src/components/CalculatorRko/renderCommissionSum.tsx

@@ -0,0 +1,9 @@
+import { type Option } from '../../ui-kit/Select/Option';
+import { Text } from '../../ui-kit/Text/Text';
+import { RKO_DEFAULT_CURRENCY } from './constants';
+
+export const renderCommissionSum = (value: number, currency: Option, className?: string) => (
+  <Text className={className}>
+    {value?.toLocaleString()}&nbsp;{(currency ?? RKO_DEFAULT_CURRENCY).text}
+  </Text>
+);

package/src/components/RkoTariffCardsTable/RkoTariffCard.tsx

@@ -0,0 +1,93 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { useMobileMode } from '../../hooks/useMobileMode';
+import { type ComponentType } from '../../model/ComponentType';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import type { LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
+import type { Option } from '../../ui-kit/Select/Option';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import { RKO_COLUMNS_ORDER } from './constants';
+import { renderDesktopCard } from './renderDesktopCard';
+import { renderMobileCard } from './renderMobileCard';
+import { renderRecommendedLabel } from './renderRecommendedLabel';
+import { type TariffCardContent } from './RkoTariffCardsTableContent';
+
+export interface TariffCardProps extends TariffCardContent, ComponentType {
+  currency: Option;
+  buttons: LinkButtonContent[];
+  commissionTypes?: string[];
+}
+
+export const RkoTariffCard = JSX(
+  ({
+    tariffName,
+    tariffDesc,
+    className,
+    transferLegalCountCommission,
+    flTransferSumCommission,
+    cashInSumCommission,
+    accountServiceFee,
+    cashOutSumCommission,
+    totalCommission,
+    currency,
+    isBest = false,
+    commissionTypes,
+  }: TariffCardProps) => {
+    const [isUnfolded, { toggle }] = useBool(false);
+
+    const tariffData = {
+      accountServiceFee,
+      transferLegalCountCommission,
+      flTransferSumCommission,
+      cashOutSumCommission,
+      cashInSumCommission,
+      totalCommission,
+    };
+
+    const commissions = RKO_COLUMNS_ORDER.map((key) => tariffData[key]);
+
+    const isMobileMode = useMobileMode();
+
+    const handleOpenDepositClick = () =>
+      globalThis?.sessionStorage.setItem('rkoTariffName', tariffName);
+
+    return (
+      <div
+        className={style(
+          className,
+          'rounded-xl min-h-24 items-center min-w-0 lg:p-xl p-3xl',
+          isBest
+            ? 'bg-primary-main text-white relative'
+            : 'bg-white text-primary-text border border-solid border-gray',
+        )}
+      >
+        <div className="col-span-2">
+          <Heading headingType={isMobileMode ? 'h2' : 'h6'} title={tariffName} />
+          <Text size="text-xs">{tariffDesc}</Text>
+        </div>
+        {isMobileMode
+          ? renderMobileCard({
+              commissions,
+              currency,
+              isUnfolded,
+              handleFold: toggle,
+              commissionTypes,
+              isBest,
+            })
+          : renderDesktopCard(commissions, currency)}
+        <div className="flex flex-wrap @xl:flex-nowrap gap-lg sm:gap-m w-full @lg:w-auto col-span-2">
+          <LinkButton
+            version={isBest ? 'secondary' : 'primary'}
+            className={style('basis-full @lg:basis-auto w-full')}
+            text="Открыть счёт"
+            href="/business/calculator-rko#opendeposit"
+            onClick={handleOpenDepositClick}
+          />
+        </div>
+        {renderRecommendedLabel(isBest)}
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,60 @@
+import type { LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
+import { RkoTariffCardsTable } from './RkoTariffCardsTable';
+
+const ITEMS = [
+  {
+    tariffName: 'Базовый лайт',
+    tariffDesc: 'Для старта бизнеса',
+    clientType: 'standard',
+    accountServiceFee: 0,
+    transferLegalCountCommission: 1150,
+    flTransferSumCommission: 0,
+    cashInSumCommission: 3300,
+    cashOutSumCommission: 3300,
+    totalCommission: 1520,
+  },
+  {
+    tariffName: 'Базовый комфорт',
+    tariffDesc: 'Оптимальный тариф',
+    clientType: 'standard',
+    accountServiceFee: 650,
+    transferLegalCountCommission: 1570,
+    flTransferSumCommission: 500,
+    cashInSumCommission: 3300,
+    cashOutSumCommission: 3500,
+    totalCommission: 2730,
+  },
+  {
+    tariffName: 'Расчетный эконом',
+    tariffDesc: 'Для малых оборотов',
+    clientType: 'standard',
+    accountServiceFee: 1290,
+    transferLegalCountCommission: 2100,
+    flTransferSumCommission: 1200,
+    cashInSumCommission: 3900,
+    cashOutSumCommission: 4200,
+    totalCommission: 4730,
+  },
+];
+
+const buttons: LinkButtonContent[] = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Открыть счёт',
+    target: '_self',
+    version: 'secondary',
+  },
+];
+
+export default {
+  default: (
+    <RkoTariffCardsTable
+      items={ITEMS}
+      currency={{
+        text: '₽',
+        key: 'rub',
+      }}
+      buttons={buttons}
+    />
+  ),
+};

package/src/components/RkoTariffCardsTable/RkoTariffCardsTable.fixture.tsx

@@ -0,0 +1,60 @@
+import type { LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
+import { RkoTariffCardsTable } from './RkoTariffCardsTable';
+
+const ITEMS = [
+  {
+    tariffName: 'Базовый лайт',
+    tariffDesc: 'Для старта бизнеса',
+    clientType: 'standard',
+    accountServiceFee: 0,
+    transferLegalCountCommission: 1150,
+    flTransferSumCommission: 0,
+    cashInSumCommission: 3300,
+    cashOutSumCommission: 3300,
+    totalCommission: 1520,
+  },
+  {
+    tariffName: 'Базовый комфорт',
+    tariffDesc: 'Оптимальный тариф',
+    clientType: 'standard',
+    accountServiceFee: 650,
+    transferLegalCountCommission: 1570,
+    flTransferSumCommission: 500,
+    cashInSumCommission: 3300,
+    cashOutSumCommission: 3500,
+    totalCommission: 2730,
+  },
+  {
+    tariffName: 'Расчетный эконом',
+    tariffDesc: 'Для малых оборотов',
+    clientType: 'standard',
+    accountServiceFee: 1290,
+    transferLegalCountCommission: 2100,
+    flTransferSumCommission: 1200,
+    cashInSumCommission: 3900,
+    cashOutSumCommission: 4200,
+    totalCommission: 4730,
+  },
+];
+
+const buttons: LinkButtonContent[] = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Открыть счёт',
+    target: '_self',
+    version: 'secondary',
+  },
+];
+
+export default {
+  default: (
+    <RkoTariffCardsTable
+      items={ITEMS}
+      currency={{
+        text: '₽',
+        key: 'rub',
+      }}
+      buttons={buttons}
+    />
+  ),
+};

package/src/components/RkoTariffCardsTable/RkoTariffCardsTable.tsx

@@ -0,0 +1,45 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMobileMode } from '../../hooks/useMobileMode';
+import type { UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { RKO_DEFAULT_CURRENCY } from '../CalculatorRko/constants';
+import { type CommissionKey } from './constants';
+import { getSortedCommissionTypes } from './getCommissionTypes';
+import { renderRkoTariffsTableHeader } from './renderRkoTariffsTableHeader';
+import { RkoTariffCard } from './RkoTariffCard';
+import { type RkoTariffCardsTableContent } from './RkoTariffCardsTableContent';
+
+export interface RkoTariffCardsTableProps extends RkoTariffCardsTableContent, UniBlockProps {}
+
+export const RkoTariffCardsTable = JSX(
+  ({ items = [], currency = RKO_DEFAULT_CURRENCY, buttons = [] }: RkoTariffCardsTableProps) => {
+    const isMobileMode = useMobileMode();
+
+    const commissionTypes: CommissionKey[] = getSortedCommissionTypes(items) ?? [];
+    const columnsCount = commissionTypes.length + 4; // 2 на "Название тарифа" и 2 на кнопку
+
+    const tableLayoutStyle = `lg:grid lg:grid-cols-${String(columnsCount)} gap-m`;
+
+    return (
+      <div className="lg:space-y-m space-y-xl w-full">
+        {isMobileMode
+          ? null
+          : renderRkoTariffsTableHeader({
+              params: commissionTypes,
+              className: tableLayoutStyle,
+            })}
+
+        {items.map((item, index) => (
+          <div key={index}>
+            <RkoTariffCard
+              {...item}
+              className={tableLayoutStyle}
+              currency={currency}
+              buttons={buttons}
+              commissionTypes={commissionTypes}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  },
+);

package/src/components/RkoTariffCardsTable/RkoTariffCardsTableContent.ts

@@ -0,0 +1,18 @@
+import type { LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
+import type { Option } from '../../ui-kit/Select/Option';
+import { type TariffProps } from '../CalculatorRko/CalculatorRkoContent';
+
+export interface TariffCardContent extends TariffProps {
+  transferLegalCountCommission: number;
+  flTransferSumCommission: number;
+  cashInSumCommission: number;
+  cashOutSumCommission: number;
+  totalCommission: number;
+  isBest?: boolean;
+}
+
+export interface RkoTariffCardsTableContent {
+  items?: TariffCardContent[];
+  currency?: Option;
+  buttons?: LinkButtonContent[];
+}

package/src/components/RkoTariffCardsTable/constants.ts

@@ -0,0 +1,20 @@
+export const RKO_COMMISSIONS_TITLE_MAP: Record<string, string> = {
+  tariffName: 'Название тарифа',
+  accountServiceFee: 'Обслуживание счета',
+  transferLegalCountCommission: 'Переводы Юрлицам и ИП',
+  flTransferSumCommission: 'Переводы физлицам',
+  cashOutSumCommission: 'Снятие наличных',
+  cashInSumCommission: 'Внесение наличных',
+  totalCommission: 'Итоговая комиссия',
+};
+
+export const RKO_COLUMNS_ORDER = [
+  'accountServiceFee',
+  'transferLegalCountCommission',
+  'flTransferSumCommission',
+  'cashOutSumCommission',
+  'cashInSumCommission',
+  'totalCommission',
+] as const;
+
+export type CommissionKey = typeof RKO_COLUMNS_ORDER[number];

package/src/components/RkoTariffCardsTable/getCommissionTypes.ts

@@ -0,0 +1,10 @@
+import { RKO_COLUMNS_ORDER, type CommissionKey } from './constants';
+import { type TariffCardContent } from './RkoTariffCardsTableContent';
+
+export const getSortedCommissionTypes = (items: TariffCardContent[]): CommissionKey[] => {
+  if (!items || items.length === 0) {
+    return [];
+  }
+
+  return RKO_COLUMNS_ORDER.filter((key) => key in items[0]);
+};

package/src/components/RkoTariffCardsTable/renderDesktopCard.tsx

@@ -0,0 +1,7 @@
+import type { Option } from '../../ui-kit/Select/Option';
+import { renderCommissionSum } from '../CalculatorRko/renderCommissionSum';
+
+export const renderDesktopCard = (commissions: number[], currency: Option) =>
+  commissions.map((commission, index) => (
+    <div key={index}>{renderCommissionSum(commission, currency)}</div>
+  ));

package/src/components/RkoTariffCardsTable/renderHiddenCommission.tsx

@@ -0,0 +1,23 @@
+import type { Option } from '../../ui-kit/Select/Option';
+import { Text } from '../../ui-kit/Text/Text';
+import { renderCommissionSum } from '../CalculatorRko/renderCommissionSum';
+import { RKO_COMMISSIONS_TITLE_MAP } from './constants';
+
+type RenderHiddenCommissionProps = {
+  commission: number;
+  currency: Option;
+  commissionType?: string;
+  index?: number;
+};
+
+export const renderHiddenCommission = ({
+  commission,
+  currency,
+  commissionType,
+  index,
+}: RenderHiddenCommissionProps) => (
+  <div className="flex justify-between align-center" key={index}>
+    <Text>{RKO_COMMISSIONS_TITLE_MAP[commissionType ?? '']}</Text>
+    {renderCommissionSum(commission, currency)}
+  </div>
+);