@redneckz/wildless-cms-uni-blocks 0.3.57 → 0.3.59

package/mobile/src/types.ts

@@ -44,16 +44,10 @@ export interface ContentPageMeta {
   jsonLd?: string;
 }
 
-export interface CustomPageTemplate {
-  content?: Record<string, any>;
-  type?: string;
-}
-
 export interface ContentPageDef extends ContentPageMeta {
   style?: string[];
   blocks?: BlockDef[];
   slots?: SlotsMap;
-  customPageTmpl?: CustomPageTemplate;
   likeControl?: boolean;
   colorPalette?: ColorPalette;
 }
@@ -77,3 +71,5 @@ export interface DaDataSuggestion<T> {
 export interface DaDataAddress {
   city?: string | null;
 }
+
+export type FuncSetNumber = (value: number) => void;

package/mobile/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -13,7 +13,7 @@ type EmbeddableBlocksProps = {
 export const renderBlocksList = ({ blocks, context, className, columns }: EmbeddableBlocksProps) =>
   blocks?.length ? blocks.map(renderBlock({ context, className, columns })) : null;
 
-export const renderBlock =
+const renderBlock =
   ({ context, columns, className }: EmbeddableBlocksProps) =>
   (block: BlockDef, i: number) => {
     const type = block?.blockListType;

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

@@ -7,7 +7,7 @@ interface ButtonInnerProps extends ButtonWithIconProps {
 }
 
 export const ButtonInner = JSX<ButtonInnerProps>((props) => {
-  const { text, aboveText, appendLeft } = props;
+  const { text, aboveText, appendLeft, appendRight } = props;
   return (
     <div className={getButtonStyle(props)}>
       {appendLeft ? appendLeft : null}
@@ -17,6 +17,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
           <div className="text-button text-left">{text}</div>
         </div>
       ) : null}
+      {appendRight ? appendRight : null}
     </div>
   );
 });

package/mobile/src/ui-kit/Button/ButtonProps.ts

@@ -29,6 +29,8 @@ export interface ButtonWithIconProps extends ButtonProps {
   aboveText?: string;
   /** @hidden */
   appendLeft?: any;
+  /** @hidden */
+  appendRight?: any;
   /** @title Закругленные углы */
   rounded?: boolean;
   /** @hidden */

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

@@ -11,7 +11,7 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
   const { handlerDecorator } = context;
   const router = context.useRouter();
   return buttons?.length ? (
-    <div className={`${className}`}>
+    <div className={className}>
       {buttons.map((button, index) =>
         renderButton(useLink({ router, handlerDecorator }, button), index),
       )}

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

@@ -32,9 +32,7 @@ export const Checkbox = JSX<CheckboxProps>(({ text, checked, onChange, className
         fill="white"
         viewBox="0 0 11 9"
       />
-      {text ? (
-        <span className="font-sans ml-3 text-sm leading-5 cursor-pointer">{text}</span>
-      ) : null}
+      {text ? <span className="font-sans ml-3 text-m-base cursor-pointer">{text}</span> : null}
     </label>
   </div>
 ));

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

@@ -20,19 +20,15 @@ export const InputRange = JSX<InputRangeProps>(
     return (
       <div className={className}>
         <label className="block relative">
-          {title ? (
-            <span className="absolute text-xs text-secondary-text top-1 mt-0.5 pl-4 ml-0.5">
-              {title}
-            </span>
-          ) : null}
+          {title ? <span className="text-base text-secondary-text pl-4">{title}</span> : null}
           <input
-            className={`m-0 font-sans text-sm w-full h-12 border border-solid border-main-stroke rounded-md
-                        outline-none p-0 pl-4 m-0 box-border text-primary-text ${ title ? 'pt-4' : '' }`}
+            className={`m-0 mt-[5px] font-sans text-title w-full h-14 border border-solid border-main-stroke rounded-md
+                        outline-none p-0 pl-4 box-border text-primary-text`}
             value={addSpacesBetweenNumbers(value)}
             onChange={(e) => handleChange(e.target.value)}
             onBlur={handleBlur}
           />
-          <div className="absolute inset-x-0 top-[35px] px-4 leading-[18px]">
+          <div className="absolute inset-x-0 bottom-[-4px] px-4 leading-[18px]">
             <input
               className="box-border w-full m-0 cursor-pointer slider"
               type="range"
@@ -47,7 +43,9 @@ export const InputRange = JSX<InputRangeProps>(
         </label>
         <div className="flex justify-between my-3">
           {items.map((item, i) => (
-            <span key={String(i)} className="text-xs leading-[14px] text-secondary-text pl-4"> {item} </span>
+            <span key={String(i)} className="text-sm leading-[14px] text-secondary-text pl-4">
+              {item}
+            </span>
           ))}
         </div>
       </div>

package/mobile/src/ui-kit/InputRange/InputRangeProps.ts

@@ -1,3 +1,5 @@
+import type { FuncSetNumber } from '../../types';
+
 export interface InputRangeProps {
   className?: string;
   items?: string[];
@@ -6,5 +8,5 @@ export interface InputRangeProps {
   step?: number;
   value?: number;
   title?: string;
-  onChange?: (value: number) => void;
+  onChange?: FuncSetNumber;
 }

package/mobile/src/ui-kit/Tabs/TabsProps.ts

@@ -1,4 +1,5 @@
 import type { Picture } from '../../model/Picture';
+import { FuncSetNumber } from '../../types';
 
 /**
  * @title Вкладка
@@ -11,7 +12,7 @@ export interface Tab {
   icon?: Picture;
 }
 
-export type TabClickHandler = (value: number) => void;
+export type TabClickHandler = FuncSetNumber;
 
 export interface TabsProps {
   tabs?: Tab[];

package/package.json

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

package/src/common.css

@@ -72,6 +72,13 @@ html {
     width: 100%;
   }
 
+  .calc-rate-text {
+    background: linear-gradient(180deg, #42ab44 0%, #f6db7d 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-fill-color: transparent;
+  }
+
   input[type='range'].slider {
     -webkit-appearance: none;
     height: 4px;

package/src/components/Blocks.ts

@@ -2,6 +2,7 @@ import { Accordion } from './Accordion/Accordion';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
+import { Calculator } from './Calculator/Calculator';
 import { CreditCalculator } from './CreditCalculator/CreditCalculator';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
@@ -19,7 +20,6 @@ import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
-import { ProductGalleryGreen } from './ProductGalleryGreen/ProductGalleryGreen';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
 import { Recommendation } from './Recommendation/Recommendation';
@@ -34,6 +34,7 @@ export const Blocks = {
   BenefitsBlock,
   Bonus,
   ComparisonTable,
+  Calculator,
   CreditCalculator,
   ExchangeRateTile,
   Footer,
@@ -48,7 +49,6 @@ export const Blocks = {
   PictureText,
   ProductBlock,
   ProductGallery,
-  ProductGalleryGreen,
   ProductTile,
   PromoTile,
   OtherProducts,

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -0,0 +1,71 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { getDefaultSum } from './getDefaultSum';
+import { renderWantedSumInput } from './renderWantedSumInput';
+import { renderRate } from './renderRate';
+import { renderButtonSection } from './renderButtonSection';
+import { BonusCalculatorParams, CommonCalculatorProps } from './CalculatorContent';
+
+export interface BonusCalculatorProp
+  extends BonusCalculatorParams,
+    CommonCalculatorProps,
+    UniBlockProps {}
+
+export const BonusCalculatorForm = JSX<BonusCalculatorProp>(
+  ({
+    context,
+    className = '',
+    buttons,
+    bonus,
+    minSumTrip,
+    maxSumTrip,
+    minSumOther,
+    maxSumOther,
+  }) => {
+    const [bonusTripValue, setBonusTripValue] = context.useState<number | undefined>(undefined);
+    const [bonusOtherValue, setBonusOtherValue] = context.useState<number | undefined>(undefined);
+    const calculatorTripParams = { minSum: minSumTrip, maxSum: maxSumTrip };
+    const calculatorOtherParams = { minSum: minSumOther, maxSum: maxSumOther };
+
+    const incomeBonus = 948841;
+    const bonusOrDef = bonus || 2528;
+
+    return (
+      <section className={className}>
+        <div className="w-[468px]">
+          {renderWantedSumInput({
+            title: 'Сумма покупок в категории путешествия, ₽',
+            calculatorParams: calculatorTripParams,
+            moneyValue: bonusTripValue,
+            defaultSum: getDefaultSum(calculatorTripParams),
+            setMoneyValue: setBonusTripValue,
+            isShowItems: false,
+          })}
+          {renderWantedSumInput({
+            className: 'mt-6',
+            title: 'Сумма покупок в остальных категориях, ₽',
+            calculatorParams: calculatorOtherParams,
+            moneyValue: bonusOtherValue,
+            defaultSum: getDefaultSum(calculatorOtherParams),
+            setMoneyValue: setBonusOtherValue,
+            isShowItems: false,
+          })}
+        </div>
+        <div>
+          {bonusOrDef
+            ? renderRate({
+                rate: bonusOrDef,
+                title: 'Баллов за месяц',
+                className: 'tracking-[-14px]',
+              })
+            : null}
+        </div>
+        <div className="w-[240px]">
+          {incomeBonus ? <CalculatorValueBlock title="Баллов за год" value={incomeBonus} /> : null}
+          {renderButtonSection(context, buttons)}
+        </div>
+      </section>
+    );
+  },
+);

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

@@ -0,0 +1,131 @@
+import { context } from '../../setup-fixture';
+import { Calculator } from './Calculator';
+
+import type {
+  CreditCalculatorParamsDef,
+  MortgageCalculatorParamsDef,
+  DepositCalculatorParamsDef,
+  BonusCalculatorParamsDef,
+} from './CalculatorContent';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+const buttons: ButtonWithIconProps[] = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Отправить заявку',
+    target: '_blank',
+    version: 'primary',
+  },
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробные условия',
+    target: '_blank',
+    version: 'secondary',
+  },
+];
+
+const CREDIT_CALCULATOR_BLOCK: CreditCalculatorParamsDef = {
+  calcType: 'CreditCalculatorForm',
+  isAnnuity: true,
+  minSum: 30000,
+  maxSum: 5000000,
+  minMonths: 1,
+  maxMonths: 84,
+  rateWithInsurance: 10.2,
+  rateWithoutInsurance: 10.7,
+  buttons: buttons,
+};
+
+const MORTGAGE_CALCULATOR_BLOCK: MortgageCalculatorParamsDef = {
+  calcType: 'MortgageCalculatorForm',
+  isAnnuity: true,
+  minSum: 15000,
+  maxSum: 7500000,
+  minMonths: 2,
+  maxMonths: 120,
+  rateWithInsurance: 4,
+  rateWithoutInsurance: 5.5,
+  buttons: buttons,
+};
+
+const DEPOSIT_CALCULATOR_BLOCK: DepositCalculatorParamsDef = {
+  calcType: 'DepositCalculatorForm',
+  minSum: 50000,
+  maxSum: 5000000,
+  minMonths: 2,
+  maxMonths: 120,
+  rate: 5.9,
+  buttons: buttons,
+};
+
+const BONUS_CALCULATOR_BLOCK: BonusCalculatorParamsDef = {
+  calcType: 'BonusCalculatorForm',
+  bonus: 2528,
+  minSumTrip: 1,
+  maxSumTrip: 200000,
+  minSumOther: 1,
+  maxSumOther: 500000,
+  buttons: buttons,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Calculator
+        className="col-span-12"
+        context={context}
+        calcTabs={[
+          {
+            nav: {
+              title: 'Кредит на любые цели',
+              description: 'Ставка от 5,5% до 5 лет',
+              icon: { icon: 'CalendarIcon' },
+            },
+            calculatorBlock: CREDIT_CALCULATOR_BLOCK,
+          },
+          {
+            nav: {
+              title: 'Ипотека с господдержкой',
+              description: 'Ставка от 6%, срок до 30 лет',
+              icon: { icon: 'WalletAdd2Icon' },
+            },
+            calculatorBlock: MORTGAGE_CALCULATOR_BLOCK,
+          },
+          {
+            nav: {
+              title: 'Вклад «Доходный»',
+              description: 'Ставка до 7% до 15 лет',
+              icon: { icon: 'SafeIcon' },
+            },
+            calculatorBlock: DEPOSIT_CALCULATOR_BLOCK,
+          },
+          {
+            nav: {
+              title: 'Обменивайте баллы на путешествия',
+              icon: { icon: 'PercentageSquareIcon' },
+            },
+            calculatorBlock: BONUS_CALCULATOR_BLOCK,
+          },
+        ]}
+      />
+    </div>
+  ),
+  single: (
+    <div className="container grid grid-cols-12">
+      <Calculator
+        className="col-span-12"
+        context={context}
+        calcTabs={[
+          {
+            nav: {
+              title: 'Кредит на любые цели',
+              description: 'Ставка от 5,5% до 5 лет',
+              icon: { icon: 'CalendarIcon' },
+            },
+            calculatorBlock: CREDIT_CALCULATOR_BLOCK,
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/Calculator/Calculator.tsx

@@ -0,0 +1,141 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { CalculatorContent, CalculatorBlockDef } from './CalculatorContent';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import { Img } from '../../ui-kit/Img/Img';
+import { renderCalculatorList } from './renderCalculatorList';
+import { CalculatorNav } from './CalculatorContent';
+
+export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
+
+type TabsProps = {
+  tabsShift: number;
+  tabsNav: CalculatorNav[];
+  activeSlideIndex: number;
+  setActiveSlideIndex: (i: number) => void;
+};
+
+type NavButtonProps = {
+  tab: CalculatorNav;
+  i: number;
+  activeSlideIndex: number;
+  onClick: (ev: MouseEvent) => void;
+};
+
+const arrowBtnStyle =
+  'absolute w-[56px] h-[56px] min-h-[56px] max-h-[56px] top-1 z-10 mt-[25px] bg-white rounded-full';
+
+export const Calculator = JSX<CalculatorProps>(
+  ({ className = '', context, calcTabs = [], anchor = null }) => {
+    const tabsNav = calcTabs.map((_) => _.nav || ({} as CalculatorNav));
+    const blockCalcTabs = calcTabs.map(
+      ({ calculatorBlock }) => calculatorBlock || ({} as CalculatorBlockDef),
+    );
+    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+    const [tabsShift, setTabsShift] = context.useState(0);
+
+    const handleNextClick = () => setTabsShift(tabsShift + 1);
+    const handlePrevClick = () => setTabsShift(tabsShift - 1);
+
+    const isGalleryScrollAvailable = calcTabs?.length > 3;
+    const showNextButton = isGalleryScrollAvailable && calcTabs?.length > tabsShift + 3;
+    const showPrevButton = tabsShift > 0;
+
+    return (
+      <section
+        id={anchor}
+        className={`box-border overflow-hidden relative font-sans w-100 bg-white text-primary-text ${className}`}
+      >
+        <div>
+          {tabsNav.length > 1
+            ? renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex })
+            : null}
+          {showPrevButton ? (
+            <ArrowButton
+              className={`${arrowBtnStyle} left-3 top-3`}
+              onClick={handlePrevClick}
+              ariaLabel="Пролистать влево"
+              data-block-control="scroll-left"
+            />
+          ) : null}
+          {showNextButton ? (
+            <ArrowButton
+              className={`${arrowBtnStyle} right-3 top-3 rotate-180`}
+              onClick={handleNextClick}
+              ariaLabel="Пролистать вправо"
+              data-block-control="scroll-right"
+            />
+          ) : null}
+        </div>
+        <div
+          className="flex"
+          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          role="list"
+        >
+          {renderCalculatorList({
+            context,
+            className,
+            blockCalcTabs,
+          })}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps) {
+  const isActiveBtn = i === activeSlideIndex;
+
+  const btnClassName = isActiveBtn
+    ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
+    : `h-[77px] w-[322px] min-w-[322px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
+  const btnTitleClassName = isActiveBtn ? 'text-md-new mb-1.5' : `text-base mb-[3px]`;
+  const btnDescClassName = isActiveBtn ? 'text-base text-white' : `text-m-md`;
+  const iconClassName = isActiveBtn ? '' : `text-primary-main`;
+
+  return (
+    <button
+      type="button"
+      key={String(i)}
+      onClick={onClick}
+      aria-label={tab?.title}
+      className={`box-border font-sans relative border-[1px] border-main-stroke cursor-pointer text-left border-b-0 flex
+      ${btnClassName}`}
+    >
+      <Img
+        className={`h-[24px] w-[24px] min-w-[24px] min-h-[24px] mr-4 ${iconClassName}`}
+        image={{ ...tab?.icon, iconVersion: isActiveBtn ? 'white' : 'normal' }}
+        width="24"
+        height="24"
+        asSVG
+      />
+      <div className="border-0">
+        <div className={`font-medium ${btnTitleClassName}`}>{tab?.title}</div>
+        <div className={`text-secondary-text ${btnDescClassName}`}>{tab.description}</div>
+      </div>
+    </button>
+  );
+}
+
+function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex }: TabsProps) {
+  return (
+    <div>
+      <div
+        style={{ transform: `translateX(-${tabsShift * 388}px)` }}
+        className="flex flex-col justify-end items-center h-[126px] pt-[38px] box-border duration-1000"
+      >
+        <div className="w-full flex flex-nowrap items-end gap-2">
+          {tabsNav.map((tab, i) =>
+            renderNavButton({
+              tab,
+              i,
+              activeSlideIndex,
+              onClick: () => setActiveSlideIndex(i),
+            }),
+          )}
+        </div>
+      </div>
+      <div className="w-full h-2 bg-primary-main" />
+    </div>
+  );
+}

package/src/components/Calculator/CalculatorContent.ts

@@ -0,0 +1,134 @@
+import { Picture } from '../../model/Picture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+export interface CommonCalculatorProps {
+  buttons?: ButtonWithIconProps[];
+}
+
+export interface CreditCalculatorParams {
+  isSalary?: boolean;
+  isInsurance?: boolean;
+  isAnnuity?: boolean;
+  minSum?: number;
+  maxSum?: number;
+  minMonths?: number;
+  maxMonths?: number;
+  rateWithInsurance?: number;
+  rateWithoutInsurance?: number;
+}
+
+export interface MortgageCalculatorParams {
+  isAnnuity?: boolean;
+  minInitialContribution?: number;
+  minSum?: number;
+  maxSum?: number;
+  minMonths?: number;
+  maxMonths?: number;
+  rateWithInsurance?: number;
+  rateWithoutInsurance?: number;
+}
+
+export interface DepositCalculatorParams {
+  minSum?: number;
+  maxSum?: number;
+  minMonths?: number;
+  maxMonths?: number;
+  rate?: number;
+}
+
+export interface BonusCalculatorParams {
+  bonus?: number;
+  minSumTrip?: number;
+  maxSumTrip?: number;
+  minSumOther?: number;
+  maxSumOther?: number;
+}
+
+export interface CalculatorParams {
+  isAnnuity?: boolean;
+  minSum?: number;
+  maxSum?: number;
+  minMonths?: number;
+  maxMonths?: number;
+  rateWithInsurance?: number;
+  rateWithoutInsurance?: number;
+}
+
+/**
+ * @title Заголовок
+ * @default {"calcType": "CreditCalculatorForm"}
+ */
+export type CreditCalculatorParamsDef = CreditCalculatorParams &
+  CommonCalculatorProps & {
+    calcType: 'CreditCalculatorForm';
+  };
+
+/**
+ * @title Заголовок
+ * @default {"calcType": "MortgageCalculatorForm"}
+ */
+export type MortgageCalculatorParamsDef = MortgageCalculatorParams &
+  CommonCalculatorProps & {
+    calcType: 'MortgageCalculatorForm';
+  };
+
+/**
+ * @title Заголовок
+ * @default {"calcType": "DepositCalculatorForm"}
+ */
+export type DepositCalculatorParamsDef = DepositCalculatorParams &
+  CommonCalculatorProps & {
+    calcType: 'DepositCalculatorForm';
+  };
+
+/**
+ * @title Заголовок
+ * @default {"calcType": "BonusCalculatorForm"}
+ */
+export type BonusCalculatorParamsDef = BonusCalculatorParams &
+  CommonCalculatorProps & {
+    calcType: 'BonusCalculatorForm';
+  };
+
+/**
+ * @title Выберите калькулятор
+ */
+export type EmptyOption = null;
+
+/**
+ * @title Калькулятор
+ */
+export type CalculatorBlockDef =
+  | EmptyOption
+  | CreditCalculatorParamsDef
+  | MortgageCalculatorParamsDef
+  | DepositCalculatorParamsDef
+  | BonusCalculatorParamsDef;
+
+/**
+ * @title Кнопка навигации
+ */
+export interface CalculatorNav {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Описание */
+  description?: string;
+  icon?: Picture;
+}
+
+/**
+ * @title Вкладка
+ */
+export interface CalculatorTab {
+  nav?: CalculatorNav;
+  /** @title Настройки калькулятора */
+  calculatorBlock?: CalculatorBlockDef;
+}
+
+/**
+ * @title Калькулятор
+ */
+export interface CalculatorContent {
+  /** @title Вкладки */
+  calcTabs?: CalculatorTab[];
+}