@redneckz/wildless-cms-uni-blocks 0.8.20 → 0.8.22

package/mobile/src/components/Calculator/renderInterestPayment.tsx

@@ -1,3 +1,4 @@
+import { ListOrientation } from '../../model/ListOrientation';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { Text } from '../../ui-kit/Text/Text';
 
@@ -15,21 +16,32 @@ const depositTypeItems = [
   },
 ];
 
-export function renderInterestPayment(
-  isMonthlyInterestPayment: boolean,
-  callback?: (value: boolean) => void,
-  title?: string,
-) {
+interface InterestPaymentProps {
+  isMonthlyInterestPayment: boolean;
+  callback?: (value: boolean) => void;
+  title?: string;
+  orientation?: ListOrientation;
+}
+
+export function renderInterestPayment({
+  isMonthlyInterestPayment,
+  callback,
+  title,
+  orientation = 'horizontal',
+}: InterestPaymentProps) {
   return (
     <div>
       {title ? (
-        <Text color="text-secondary-text" font="font-light">
-          {title}
-        </Text>
+        <div className="mb-3">
+          <Text color="text-secondary-text" font="font-light">
+            {title}
+          </Text>
+        </div>
       ) : null}
 
-      <div className="mt-3">
+      <div>
         <RadioButtonGroup
+          orientation={orientation}
           items={depositTypeItems}
           checkedItem={isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM}
           onChange={(text: string) => callback && callback(text === EVERY_MONTH)}

package/mobile/src/components/Calculator/renderPaymentType.tsx

@@ -0,0 +1,49 @@
+import { ListOrientation } from '../../model/ListOrientation';
+import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
+import { Text } from '../../ui-kit/Text/Text';
+
+export const ANNUITY = 'annuity';
+export const DIFFERENTIAL = 'differential';
+
+const paymentTypeItems = [
+  {
+    id: ANNUITY,
+    text: 'Аннуитетный',
+  },
+  {
+    id: DIFFERENTIAL,
+    text: 'Дифференцированный',
+  },
+];
+
+interface PaymentTypeProps {
+  isAnnuity: boolean;
+  callback?: (value: boolean) => void;
+  title?: string;
+  orientation?: ListOrientation;
+}
+
+export function renderPaymentType({
+  isAnnuity,
+  callback,
+  title,
+  orientation = 'horizontal',
+}: PaymentTypeProps) {
+  return (
+    <div>
+      {title ? (
+        <div className="mb-3">
+          <Text color="text-secondary-text" font="font-light">
+            {title}
+          </Text>
+        </div>
+      ) : null}
+      <RadioButtonGroup
+        orientation={orientation}
+        items={paymentTypeItems}
+        checkedItem={isAnnuity ? ANNUITY : DIFFERENTIAL}
+        onChange={(text: string) => callback && callback(text === ANNUITY)}
+      />
+    </div>
+  );
+}

package/mobile/src/components/Calculator/renderRegistrationType.tsx

@@ -0,0 +1,51 @@
+import { ListOrientation } from '../../model/ListOrientation';
+import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
+import { Text } from '../../ui-kit/Text/Text';
+
+const REMOTE_REGISTRATION = 'remote';
+const OFFICE_REGISTRATION = 'office';
+
+const registrationTypeItems = [
+  {
+    id: OFFICE_REGISTRATION,
+    text: 'Офис Банка',
+  },
+  {
+    id: REMOTE_REGISTRATION,
+    text: 'Дистанционно',
+  },
+];
+
+interface RegistrationTypeProps {
+  isRemoteRegistration: boolean;
+  callback?: (value: boolean) => void;
+  title?: string;
+  orientation?: ListOrientation;
+}
+
+export function renderRegistrationType({
+  isRemoteRegistration,
+  callback,
+  title,
+  orientation = 'horizontal',
+}: RegistrationTypeProps) {
+  return (
+    <div>
+      {title ? (
+        <div className="mb-3">
+          <Text color="text-secondary-text" font="font-light">
+            {title}
+          </Text>
+        </div>
+      ) : null}
+      <div>
+        <RadioButtonGroup
+          orientation={orientation}
+          items={registrationTypeItems}
+          checkedItem={isRemoteRegistration ? REMOTE_REGISTRATION : OFFICE_REGISTRATION}
+          onChange={(text: string) => callback && callback(text === REMOTE_REGISTRATION)}
+        />
+      </div>
+    </div>
+  );
+}

package/mobile/src/components/Calculator/useBusinessDepositCalculatorParams.ts

@@ -7,9 +7,9 @@ import {
 } from './constants';
 import { checkRangeByKeys, getRangeByKeys } from './rangeHelpers';
 import { useCalculatorParams } from './useCalculatorParams';
-import type { CommonDepositParams } from './useDepositCalculatorParams';
 
-export interface BusinessCommonDepositParams extends CommonDepositParams {
+export interface BusinessCommonDepositParams {
+  isMonthlyInterestPayment: boolean;
   isReplenished: boolean;
   isPartialWithdrawal: boolean;
   isSmallBusiness: boolean;
@@ -34,6 +34,7 @@ export interface BusinessDepositCalculatorParams
   income?: number;
   finalSum?: number;
   isDisabledOperatingDeposit?: boolean;
+  isShowUnknownRate?: boolean;
 }
 
 export type BusinessDepositCalculatorData = {
@@ -65,7 +66,7 @@ export const useBusinessDepositCalculatorParams = (
       ...DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS,
       ...userInputParams,
       isDisabledOperatingDeposit,
-      rate: 0,
+      isShowUnknownRate: true,
     };
   }
   const businessDepositCalculatorSourceBookParams =

package/mobile/src/components/Calculator/useCreditCalculatorParams.ts

@@ -13,9 +13,7 @@ export interface CreditCalculatorSourceBookParams extends CommonCreditParams {
   maxSum: number;
   minMonths: number;
   maxMonths: number;
-  rateBottomRange: number;
-  rateTopRange: number;
-  sumBorder: number;
+  rate: number;
 }
 
 export interface CreditCalculatorUserInputParams extends CommonCreditParams {
@@ -28,7 +26,6 @@ export interface CreditCalculatorParams
   extends CreditCalculatorSourceBookParams,
     CreditCalculatorUserInputParams {
   monthlyPayment: number;
-  finalRate: number;
 }
 
 export type CreditCalculatorData = {
@@ -53,9 +50,8 @@ export const useCreditCalculatorParams = (
       );
     }) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
 
-  const { rateBottomRange, rateTopRange, sumBorder } = creditCalculatorSourceBookParams;
-  const finalRate = moneyValue <= sumBorder ? rateBottomRange : rateTopRange;
-  const monthlyPayment = getMonthlyPayment(finalRate, userInputParams);
+  const { rate } = creditCalculatorSourceBookParams;
+  const monthlyPayment = getMonthlyPayment(rate, userInputParams);
   const sourceBookRows = data?.rows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
 
   return {
@@ -63,7 +59,6 @@ export const useCreditCalculatorParams = (
     ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
     ...getRangeByKeys(['minMonths', 'maxMonths'], sourceBookRows),
     ...userInputParams,
-    finalRate,
     monthlyPayment,
   };
 };

package/mobile/src/components/Calculator/useDepositCalculatorParams.ts

@@ -4,6 +4,7 @@ import { useCalculatorParams } from './useCalculatorParams';
 
 export interface CommonDepositParams {
   isMonthlyInterestPayment: boolean;
+  isRemoteRegistration: boolean;
 }
 
 export interface DepositCalculatorSourceBookParams extends CommonDepositParams {
@@ -34,7 +35,8 @@ export const useDepositCalculatorParams = (
   userInputParams: DepositCalculatorUserInputParams,
   sourceBookDir?: string,
 ): DepositCalculatorParams => {
-  const { isMonthlyInterestPayment, moneyValue, monthsValue } = userInputParams;
+  const { isMonthlyInterestPayment, isRemoteRegistration, moneyValue, monthsValue } =
+    userInputParams;
 
   const data = useCalculatorParams<DepositCalculatorData>(
     sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR,
@@ -44,12 +46,12 @@ export const useDepositCalculatorParams = (
     data?.rows?.find(
       (_) =>
         isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
+        isRemoteRegistration === _.isRemoteRegistration &&
         checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
         checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], _),
     ) || DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
 
   const { rate } = depositCalculatorSourceBookParams;
-
   const income = getDepositIncome(rate, userInputParams);
   const finalSum = moneyValue + income;
   const sourceBookRows = data?.rows || [DEFAULT_DEPOSIT_CALCULATOR_PARAMS];

package/mobile/src/components/Catalog/Catalog.ui.json

@@ -0,0 +1 @@
+{}

package/mobile/src/components/Footer/Contacts.tsx

@@ -15,7 +15,7 @@ export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }
       <Button
         version="primary"
         className="mb-6 w-full"
-        href="/"
+        href="https://www.rshb.ru/feedback/question/"
         target="_blank"
         ariaLabel="Обратная связь"
         text="Обратная связь"

package/mobile/src/components/Footer/Sitemap.tsx

@@ -5,6 +5,7 @@ import type { LinkProps } from '../../model/LinkProps';
 import { projectSettings } from '../../ProjectSettings';
 import type { SitemapDataProps, TopMenuItem } from '../../services/sitemap/SitemapProps';
 import { useSWRResource } from '../../services/sitemap/useSWRResource';
+import { joinPath } from '../../utils/url';
 
 export interface SitemapProps {
   className?: string;
@@ -12,7 +13,7 @@ export interface SitemapProps {
 }
 
 export const Sitemap = JSX<SitemapProps>(({ className = '', fallback }) => {
-  const link = useLink();
+  const link = useLink(true);
   const sitemap = useSWRResource<SitemapDataProps>(projectSettings.SITEMAP || 'sitemap', fallback);
 
   return (
@@ -36,24 +37,28 @@ const renderColumn = (menuItem: TopMenuItem & { onClick: () => void }, index: nu
         {text || `Раздел ${index}`}
       </a>
       {items?.map((_, i) => (
-        <ColumnItem key={String(i)} {..._} index={i} />
+        <ColumnItem key={String(i)} {..._} basePath={href} index={i} />
       ))}
     </div>
   );
 };
 
 interface ColumnItemProps extends LinkProps {
+  basePath?: string;
   index?: number;
 }
 
-const ColumnItem = JSX<ColumnItemProps>(({ text, index, ...rest }) => {
-  const link = useLink();
+const ColumnItem = JSX<ColumnItemProps>(({ text, index, basePath, ...rest }) => {
+  const isAnotherPortal =
+    projectSettings.BASE_PATH && basePath ? !projectSettings.BASE_PATH.startsWith(basePath) : false;
+
+  const link = useLink(isAnotherPortal);
   const { href, target, onClick } = link(rest);
 
   return (
     <a
       className="block text-l-light text-secondary-text hover:text-primary-main no-underline"
-      href={href}
+      href={isAnotherPortal ? joinPath(basePath, href) : href}
       target={target || '_self'}
       onClick={onClick}
     >

package/mobile/src/components/Gallery/Gallery.ui.json

@@ -0,0 +1 @@
+{}

package/mobile/src/components/MiniGallery/MiniGallery.ui.json

@@ -0,0 +1 @@
+{}

package/mobile/src/components/StepsBlock/StepsBlock.example.json

@@ -4,6 +4,8 @@
     "title": "Шаги",
     "description": "Описание",
     "showLines": true,
+    "size": "normal",
+    "stepVersion": "gray",
     "steps": [
       {
         "label": "Шаг №1",
@@ -20,7 +22,7 @@
           "text": "Кнопка",
           "target": "_blank",
           "version": "primary"
-        }
+        } 
       },
       {
         "label": "Шаг №2",

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -10,7 +10,7 @@ import { assertUnreachable } from '../../utils/assertUnreachable';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { checkCanRenderIcon } from './checkCanRenderIcon';
 import type { DefaultStep, Step, StepsBlockContent } from './StepsBlockContent';
-import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
+import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
@@ -24,6 +24,8 @@ const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
   small: 'min-h-12',
 };
 
+const styleMap = STEPS_BLOCK_STYLE;
+
 export const StepsBlock = JSX<StepsBlockProps>(
   ({
     className = '',
@@ -34,31 +36,27 @@ export const StepsBlock = JSX<StepsBlockProps>(
     size = 'normal',
     version = 'primary',
     ...rest
-  }) => {
-    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
-
-    return (
-      <BlockWrapper
-        className={`box-border px-4 py-6 flex flex-col ${className}`}
-        version={version}
-        {...rest}
-      >
-        {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
-        {description ? (
-          <p className={`text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
-            {description}
-          </p>
-        ) : null}
-        {steps?.length ? (
-          <div className={`box-border py-0.5 mb-0.5 mt-5`}>
-            <div className="flex flex-col justify-between gap-x-[101px]">
-              {steps.map(renderStep(size, version, showLines))}
-            </div>
+  }) => (
+    <BlockWrapper
+      className={`box-border px-4 py-6 flex flex-col ${className}`}
+      version={version}
+      {...rest}
+    >
+      {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
+      {description ? (
+        <p className={`text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
+          {description}
+        </p>
+      ) : null}
+      {steps?.length ? (
+        <div className={`box-border py-0.5 mb-0.5 mt-5`}>
+          <div className="flex flex-col justify-between gap-x-[101px]">
+            {steps.map(renderStep(size, version, showLines))}
           </div>
-        ) : null}
-      </BlockWrapper>
-    );
-  },
+        </div>
+      ) : null}
+    </BlockWrapper>
+  ),
 );
 
 // TODO: Create universal function for this case
@@ -88,7 +86,6 @@ const renderDefaultStep =
   (step: DefaultStep, i: number, steps: Step[]) => {
     const isLastStep = steps.length - 1 === i;
     const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
-    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
 
     return (
       <div key={String(i)}>
@@ -119,7 +116,6 @@ const renderDefaultStep =
   };
 
 const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step, i: number) => {
-  const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
   const iconAreaSize = STEPS_SIZE_MAP[size];
 
   const iconSize = size === 'normal' ? '38' : '27';

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -48,10 +48,11 @@ export type StepsBlockContent = HeadlineCommonProps & {
    * @maxItems 5
    */
   steps?: Step[];
+  stepVersion?: BlockVersion;
   /** @title Кнопка */
   button?: ButtonWithIconProps;
   /**
-   * @title Размер шагов (моб.)
+   * @title Размер шагов
    * @default normal
    */
   size?: SizeVersion; // TODO: mobile content

package/mobile/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -1,5 +1,3 @@
-import type { BlockVersion } from '../../model/BlockVersion';
-
 export type StyleType = {
   description: string;
   iconText: string;
@@ -8,42 +6,10 @@ export type StyleType = {
   dot: string;
 };
 
-export const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
-  primary: {
-    description: '!text-secondary-text text-l-light',
-    iconText: 'text-secondary-text',
-    iconBackground: 'bg-main-divider',
-    iconConnector: 'bg-secondary-light',
-    dot: 'bg-secondary-text',
-  },
-  secondary: {
-    description: '!text-white/80 text-l-light',
-    iconText: 'text-white',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-    dot: 'bg-white/80',
-  },
-  gray: {
-    // TODO Replace this Map with group-data-*
-    description: '!text-white/80 text-l-light',
-    iconText: 'text-white',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-    dot: 'bg-white/80',
-  },
-  transparent: {
-    description: '!text-white/80 text-l-light',
-    iconText: 'text-white',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-    dot: 'bg-white/80',
-  },
-  '': {
-    // TODO Replace this Map with group-data-*
-    description: '!text-white/80 text-l-light',
-    iconText: 'text-white',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-    dot: 'bg-white/80',
-  },
+export const STEPS_BLOCK_STYLE: StyleType = {
+  description: 'text-white/80 text-l-light group-data-primary:text-secondary-text',
+  iconText: 'text-white group-data-primary:text-secondary-text',
+  iconBackground: 'bg-white/30 group-data-primary:bg-main-divider',
+  iconConnector: 'bg-white group-data-primary:bg-secondary-light',
+  dot: 'bg-white/80 group-data-primary:bg-secondary-text',
 };

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

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { ListOrientation } from '../../model/ListOrientation';
 import { Checkbox } from '../Checkbox/Checkbox';
 
 export interface RadioButtonItem {
@@ -10,11 +11,17 @@ interface RadioButtonGroupProps {
   items?: RadioButtonItem[];
   checkedItem?: string;
   onChange?: (id: string) => void;
+  orientation?: ListOrientation;
 }
 
+const orientationStyleMap: Record<ListOrientation, string> = {
+  horizontal: 'gap-10',
+  vertical: 'flex-col gap-3',
+};
+
 export const RadioButtonGroup = JSX<RadioButtonGroupProps>(
-  ({ items, checkedItem, onChange: onChangeCheckedItem }) => (
-    <div className="flex flex-col gap-3">
+  ({ items, checkedItem, onChange: onChangeCheckedItem, orientation = 'horizontal' }) => (
+    <div className={`flex ${orientationStyleMap[orientation]}`}>
       {items?.map(({ id, text }) => (
         <Checkbox
           key={String(id)}

package/package.json

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

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -47,7 +47,7 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
     };
 
     const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
-    const { income, finalSum, rate, depositeName } = calculatorParams;
+    const { income, finalSum, rate, depositeName, isShowUnknownRate } = calculatorParams;
 
     return (
       <section className={className}>
@@ -62,14 +62,17 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
                 handleIsPartialWithdrawal,
                 handleIsSmallBusiness,
               })}
-              {renderInterestPayment(
+              {renderInterestPayment({
                 isMonthlyInterestPayment,
-                handleIsMonthlyInterestPayment,
-                'Выплата процентов',
-              )}
+                callback: handleIsMonthlyInterestPayment,
+                title: 'Выплата процентов',
+                orientation: 'vertical',
+              })}
             </div>
           </div>
-          {rate ? (
+          {isShowUnknownRate ? (
+            <UnknownRate />
+          ) : (
             <Rate
               rate={rate}
               depositeName={depositeName}
@@ -77,8 +80,6 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
               rateBlockClassName="tracking-[-25px]"
               unit="%"
             />
-          ) : (
-            <UnknownRate />
           )}
 
           <div className="w-full max-w-[350px]">

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -2,7 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
-import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { style } from '../../utils/style';
 import type { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
@@ -10,23 +9,10 @@ import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
 import { Rate } from './Rate';
 import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
+import { renderPaymentType } from './renderPaymentType';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useCreditCalculatorParams } from './useCreditCalculatorParams';
 
-export const ANNUITY = 'annuity';
-export const DIFFERENTIAL = 'differential';
-
-const paymentTypeItems = [
-  {
-    id: ANNUITY,
-    text: 'Аннуитетный',
-  },
-  {
-    id: DIFFERENTIAL,
-    text: 'Дифференцированный',
-  },
-];
-
 export interface CreditCalculatorProp extends CommonCalculatorProps {
   className?: string;
 }
@@ -82,21 +68,21 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
         </div>
         <Rate
           title="Ставка"
-          rate={calculatorParams.finalRate}
+          rate={calculatorParams.rate}
           rateBlockClassName="tracking-[-25px]"
           unit="%"
         />
         <div className="w-full max-w-[350px]">
           <CalculatorValueBlock
-            title={isAnnuity ? 'Ежемесячный платеж' : 'Платёж в первый месяц'}
+            title={'Ежемесячный платеж'}
             value={calculatorParams.monthlyPayment}
             postfix="₽"
           />
-          <RadioButtonGroup
-            items={paymentTypeItems}
-            checkedItem={isAnnuity ? ANNUITY : DIFFERENTIAL}
-            onChange={(text: string) => toggleIsAnnuity(text === ANNUITY)}
-          />
+          {renderPaymentType({
+            isAnnuity,
+            orientation: 'vertical',
+            callback: toggleIsAnnuity,
+          })}
           {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
           {renderFootnote(footnote)}
         </div>