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

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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>
+);

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

@@ -0,0 +1,61 @@
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+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';
+import { renderHiddenCommission } from './renderHiddenCommission';
+
+type MobileCardProps = {
+  commissions: number[];
+  currency: Option;
+  isUnfolded: boolean;
+  handleFold: () => void;
+  commissionTypes?: string[];
+  isMobileMode?: boolean;
+  isBest?: boolean;
+};
+
+export const renderMobileCard = ({
+  commissions,
+  currency,
+  isUnfolded,
+  handleFold,
+  commissionTypes,
+  isBest = false,
+}: MobileCardProps) => {
+  const totalCommission = commissionTypes?.at(-1) ?? '';
+
+  return (
+    <Foldable className="py-4">
+      <div className="w-full space-y-xl">
+        <FoldableSection isUnfolded={isUnfolded} className="space-y-xl">
+          {commissions.map(
+            (commission, index) =>
+              index !== commissions.length - 1 &&
+              renderHiddenCommission({
+                commission,
+                currency,
+                commissionType: commissionTypes?.[index],
+                index,
+              }),
+          )}
+        </FoldableSection>
+        <div className="flex justify-between items-center">
+          <Text font="font-medium">{RKO_COMMISSIONS_TITLE_MAP[totalCommission]}</Text>
+          {renderCommissionSum(commissions.at(-1) ?? 0, currency, 'text-h2')}
+        </div>
+      </div>
+      <DefaultFoldButton
+        className="mt-m mx-auto"
+        label={isUnfolded ? 'Скрыть' : 'Подробнее'}
+        isUnfolded={isUnfolded}
+        embedded
+        labelColorStyle={isBest ? 'white' : ''}
+        onClick={handleFold}
+        short
+      />
+    </Foldable>
+  );
+};

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

@@ -0,0 +1,9 @@
+import { Text } from '../../ui-kit/Text/Text';
+
+export const renderRecommendedLabel = (isBest: boolean) => {
+  return isBest ? (
+    <div className="absolute block rounded-xl min-h-xs flex justify-center align-center bg-orange py-1 px-2 lg:ml-xl top-[-10px]">
+      <Text size="text-xs">Рекомендуем</Text>
+    </div>
+  ) : null;
+};

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

@@ -0,0 +1,25 @@
+import { type ComponentType } from '../../model/ComponentType';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import { RKO_COMMISSIONS_TITLE_MAP } from './constants';
+
+interface RkoTariffsTableHeader extends ComponentType {
+  params: string[];
+}
+
+export const renderRkoTariffsTableHeader = ({ params, className }: RkoTariffsTableHeader) => {
+  return params ? (
+    <div className={style(className)}>
+      <Text size="text-xs" font="font-medium" className="col-span-2">
+        {RKO_COMMISSIONS_TITLE_MAP['tariffName']}
+      </Text>
+      {params.map((param, index) => (
+        <div key={index}>
+          <Text size="text-xs" font="font-medium">
+            {RKO_COMMISSIONS_TITLE_MAP[param]}
+          </Text>
+        </div>
+      ))}
+    </div>
+  ) : null;
+};

package/mobile/src/model/FormTypeFieldDef.ts

@@ -26,4 +26,5 @@ export type FormTypeFieldDef =
   | 'FINOMBUDSMAN'
   | 'PF'
   | 'UNIVERSAL'
-  | 'PRACTICE';
+  | 'PRACTICE'
+  | 'CALC';

package/mobile/src/ui-kit/Button/ButtonTitle.tsx

@@ -2,10 +2,15 @@ import { JSX } from '@redneckz/uni-jsx';
 import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 
-export const ButtonTitle = JSX<ComponentType>(({ className, children }) => (
+interface ButtonTitleProps extends ComponentType {
+  labelColor?: string;
+}
+
+export const ButtonTitle = JSX<ButtonTitleProps>(({ className, labelColor, children }) => (
   <span
     className={style(
-      'inline-flex items-center text-start gap-s group-[]/btn-embedded:text-primary-main',
+      'inline-flex items-center text-start gap-s',
+      labelColor === 'white' ? 'text-white' : 'group-[]/btn-embedded:text-primary-main',
       className,
     )}
   >

package/mobile/src/ui-kit/Calculator/CalculatorStyle.tsx

@@ -1,5 +1,7 @@
 export const CalculatorStyle = {
   wrapper: 'flex flex-col justify-between lg:flex-row gap-4xl',
+  wrapperMax: 'w-full',
   input: 'flex flex-col lg:w-1/2 gap-2xl',
+  inputMax: 'grid lg:grid-cols-2 grid-cols-1 gap-4xl',
   result: 'flex flex-col gap-y-xl min-w-52',
 };

package/mobile/src/ui-kit/Calculator/renderCountInput.tsx

@@ -0,0 +1,13 @@
+import { InputRange } from '../InputRange/InputRange';
+import { type InputRangeProps } from '../InputRange/InputRangeProps';
+
+const DEFAULT_AMOUNT_STEP = 1;
+
+export const renderCountInput = ({
+  min = 0,
+  max = 0,
+  step = DEFAULT_AMOUNT_STEP,
+  ...rest
+}: InputRangeProps) => (
+  <InputRange items={[`От ${min} шт`, `До ${max} шт`]} step={step} {...rest} />
+);

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.997",
+  "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"
+        }
+      }
+    }
   ]
 ]