@redneckz/wildless-cms-uni-blocks 0.7.3 → 0.7.5

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -0,0 +1,133 @@
+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 type { BusinessDepositCalculatorProps } from './CalculatorContent';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { BUSINESS_DEFAULT_DAYS, BUSINESS_DEFAULT_SUM } from './constants';
+import { Rate } from './Rate';
+import { renderDaysInput } from './renderDaysInput';
+import { renderFootnote } from './renderFootnote';
+import { renderInterestPayment } from './renderInterestPayment';
+import { renderWantedSumInput } from './renderWantedSumInput';
+import { UnknownRate } from './UnknownRate';
+import {
+  BusinessDepositCalculatorParams,
+  useBusinessDepositCalculatorParams,
+} from './useBusinessDepositCalculatorParams';
+
+export interface BusinessDepositCalculatorProp extends BusinessDepositCalculatorProps {
+  className?: string;
+}
+
+export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
+  ({ className = '', sourceBookDir, buttons, footnote, bottomFootnote, isShowDepositeName }) => {
+    const [moneyValue, setMoneyValue] = useState(BUSINESS_DEFAULT_SUM);
+    const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
+    const [daysValue, setDaysValue] = useState(BUSINESS_DEFAULT_DAYS);
+    const handleDaysValue = useCallback((_: number) => setDaysValue(_), []);
+    const [isReplenished, toggleIsReplenished] = useState(false);
+    const handleIsReplenished = useCallback((_: boolean) => toggleIsReplenished(_), []);
+    const [isPartialWithdrawal, toggleIsPartialWithdrawal] = useState(false);
+    const handleIsPartialWithdrawal = useCallback((_: boolean) => toggleIsPartialWithdrawal(_), []);
+    const [isSmallBusiness, toggleIsSmallBusiness] = useState(false);
+    const handleIsSmallBusiness = useCallback((_: boolean) => toggleIsSmallBusiness(_), []);
+    const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
+    const handleIsMonthlyInterestPayment = useCallback(
+      (_: boolean) => toggleIsMonthlyInterestPayment(_),
+      [],
+    );
+    const userInputParams = {
+      moneyValue,
+      daysValue,
+      isReplenished,
+      isPartialWithdrawal,
+      isSmallBusiness,
+      isMonthlyInterestPayment,
+    };
+
+    const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
+    const { income, finalSum, rate, depositeName } = calculatorParams;
+
+    return (
+      <section className={className}>
+        <div className="flex justify-between">
+          <div className="w-[486px]">
+            {renderWantedSumInput('Сумма вклада, ₽', calculatorParams, handleMoneyValue)}
+            {renderDaysInput('Срок вклада, дни', calculatorParams, handleDaysValue)}
+            <div className="mt-7 flex justify-between">
+              {renderBusinessDepositParamsForm({
+                ...calculatorParams,
+                handleIsReplenished,
+                handleIsPartialWithdrawal,
+                handleIsSmallBusiness,
+              })}
+              {renderInterestPayment(
+                isMonthlyInterestPayment,
+                handleIsMonthlyInterestPayment,
+                'Выплата процентов',
+              )}
+            </div>
+          </div>
+          {rate ? (
+            <Rate
+              rate={rate}
+              depositeName={depositeName}
+              isShowDepositeName={isShowDepositeName}
+              rateBlockClassName="tracking-[-25px]"
+              unit="%"
+            />
+          ) : (
+            <UnknownRate />
+          )}
+
+          <div className="w-full max-w-[350px]">
+            <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
+            <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
+            {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
+            <div className="mt-7">{renderFootnote(footnote)}</div>
+          </div>
+        </div>
+        <div className="mt-5">{renderFootnote(bottomFootnote)}</div>
+      </section>
+    );
+  },
+);
+
+interface BusinessDepositParamsFormProps extends BusinessDepositCalculatorParams {
+  handleIsReplenished?: (value: boolean) => void;
+  handleIsPartialWithdrawal?: (value: boolean) => void;
+  handleIsSmallBusiness?: (value: boolean) => void;
+}
+
+const renderBusinessDepositParamsForm = ({
+  isDisabledOperatingDeposit,
+  isReplenished,
+  isPartialWithdrawal,
+  isSmallBusiness,
+  handleIsReplenished,
+  handleIsPartialWithdrawal,
+  handleIsSmallBusiness,
+}: BusinessDepositParamsFormProps) => (
+  <div>
+    <Checkbox
+      text="Пополнение"
+      disabled={isDisabledOperatingDeposit}
+      checked={isReplenished}
+      onChange={handleIsReplenished}
+    />
+    <Checkbox
+      className="mt-3"
+      disabled={isDisabledOperatingDeposit}
+      text="Частичное снятие"
+      checked={isPartialWithdrawal}
+      onChange={handleIsPartialWithdrawal}
+    />
+    <Checkbox
+      className="mt-3"
+      text="Являюсь малым предприятием"
+      checked={isSmallBusiness}
+      onChange={handleIsSmallBusiness}
+    />
+  </div>
+);

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

@@ -4,6 +4,7 @@ import { Calculator } from './Calculator';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type {
   BonusCalculatorParamsDef,
+  BusinessDepositCalculatorParamsDef,
   CreditCalculatorParamsDef,
   DepositCalculatorParamsDef,
 } from './CalculatorContent';
@@ -26,6 +27,9 @@ const buttons: ButtonWithIconProps[] = [
 const footnote =
   'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка. ';
 
+const bottomFootnote =
+  'При сумме свыше 500 000 000 ₽ вы можете обратится в офис за индивидуальными условиями по вкладу';
+
 const CREDIT_CALCULATOR_BLOCK: CreditCalculatorParamsDef = {
   calcType: 'CreditCalculatorForm',
   buttons: buttons,
@@ -38,6 +42,14 @@ const DEPOSIT_CALCULATOR_BLOCK: DepositCalculatorParamsDef = {
   footnote,
 };
 
+const BUSINESS_DEPOSIT_CALCULATOR_BLOCK: BusinessDepositCalculatorParamsDef = {
+  calcType: 'BusinessDepositCalculatorForm',
+  buttons: buttons,
+  isShowDepositeName: true,
+  footnote,
+  bottomFootnote,
+};
+
 const BONUS_CALCULATOR_BLOCK: BonusCalculatorParamsDef = {
   title: 'Обменивайте баллы на путешествия',
   calcType: 'BonusCalculatorForm',
@@ -94,4 +106,21 @@ export default {
       />
     </div>
   ),
+  business: (
+    <div className="container grid grid-cols-12">
+      <Calculator
+        className="col-span-12"
+        calculatorTabs={[
+          {
+            nav: {
+              title: 'Кредит на любые цели',
+              description: 'Ставка от 5,5% до 5 лет',
+              icon: { icon: 'CalendarIcon' },
+            },
+            calculatorBlock: BUSINESS_DEPOSIT_CALCULATOR_BLOCK,
+          },
+        ]}
+      />
+    </div>
+  ),
 };

package/src/components/Calculator/CalculatorContent.ts

@@ -11,6 +11,13 @@ export type CommonCalculatorProps = Footnote & {
   sourceBookDir?: string;
 };
 
+export interface BusinessDepositCalculatorProps extends CommonCalculatorProps {
+  /** @title Сноска снизу блока */
+  bottomFootnote?: string;
+  /** @title Показывать название депозита */
+  isShowDepositeName?: boolean;
+}
+
 /**
  * TODO: данные из справочника
  **/
@@ -61,6 +68,16 @@ export type DepositCalculatorParamsDef = TitleProps &
     calcType: 'DepositCalculatorForm';
   };
 
+/**
+ * @title Калькулятор вкладов - бизнес
+ * @default {"calcType": "BusinessDepositCalculatorForm"}
+ */
+export type BusinessDepositCalculatorParamsDef = TitleProps &
+  DepositCalculatorParams &
+  BusinessDepositCalculatorProps & {
+    calcType: 'BusinessDepositCalculatorForm';
+  };
+
 /**
  * @title Калькулятор бонусов
  * @default {"calcType": "BonusCalculatorForm"}
@@ -77,6 +94,7 @@ export type CalculatorBlockDef =
   | EmptyOption
   | CreditCalculatorParamsDef
   | DepositCalculatorParamsDef
+  | BusinessDepositCalculatorParamsDef
   | BonusCalculatorParamsDef;
 
 /**

package/src/components/Calculator/CalculatorValueBlock.tsx

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { style } from '../../utils/style';
 
 export interface CalculatorValueBlockProps {
   title?: string;
@@ -11,13 +13,23 @@ export interface CalculatorValueBlockProps {
 
 export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
   ({ title, value, postfix = '', prefix, className = '' }) => (
-    <div className={`mb-7 ${className}`}>
-      {title ? <div className="text-l-light text-secondary-text">{title}</div> : null}
+    <div className={style('mb-7', className)}>
+      {title ? (
+        <Text size="text-l-light" color="text-secondary-text">
+          {title}
+        </Text>
+      ) : null}
       {value ? (
-        <div className="text-h3">
-          {prefix} {addSpacesBetweenNumbers(Math.round(value))} {postfix}
+        <div>
+          <Text size="text-h3">
+            {prefix} {addSpacesBetweenNumbers(Math.round(value))} {postfix}
+          </Text>
         </div>
-      ) : null}
+      ) : (
+        <div>
+          <Text size="text-h3">-</Text>
+        </div>
+      )}
     </div>
   ),
 );

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -3,6 +3,7 @@ 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';
 import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
@@ -51,7 +52,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
     const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir);
 
     return (
-      <section className={className}>
+      <section className={style('flex justify-between', className)}>
         <div className="w-[468px]">
           {renderWantedSumInput(
             'Сумма кредита, ₽',

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -3,12 +3,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
+import { style } from '../../utils/style';
 import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
 import { Rate } from './Rate';
 import { renderFootnote } from './renderFootnote';
+import { renderInterestPayment } from './renderInterestPayment';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useDepositCalculatorParams } from './useDepositCalculatorParams';
@@ -17,26 +18,16 @@ export interface DepositCalculatorProp extends DepositCalculatorParams, CommonCa
   className?: string;
 }
 
-const EVERY_MONTH = 'everyMonth';
-const AT_END_TERM = 'atEndTerm';
-
-const depositTypeItems = [
-  {
-    id: EVERY_MONTH,
-    text: 'Ежемесячно',
-  },
-  {
-    id: AT_END_TERM,
-    text: 'В конце срока',
-  },
-];
-
 export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
   ({ className = '', sourceBookDir, buttons, footnote }) => {
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
     const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
     const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
+    const handleIsMonthlyInterestPayment = useCallback(
+      (_: boolean) => toggleIsMonthlyInterestPayment(_),
+      [],
+    );
     const userInputParams = {
       moneyValue,
       monthsValue,
@@ -48,7 +39,7 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
     const { income, finalSum, rate } = calculatorParams;
 
     return (
-      <section className={className}>
+      <section className={style('flex justify-between', className)}>
         <div className="w-[468px]">
           {renderWantedSumInput(
             'Сумма вклада, ₽',
@@ -73,11 +64,7 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
           {finalSum ? (
             <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
           ) : null}
-          <RadioButtonGroup
-            items={depositTypeItems}
-            checkedItem={isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM}
-            onChange={(text: string) => toggleIsMonthlyInterestPayment(text === EVERY_MONTH)}
-          />
+          {renderInterestPayment(isMonthlyInterestPayment, handleIsMonthlyInterestPayment)}
           {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
           {renderFootnote(footnote)}
         </div>

package/src/components/Calculator/EmbeddableCalcBlocks.tsx

@@ -1,14 +1,20 @@
 import { BonusCalculatorForm, BonusCalculatorProps } from './BonusCalculatorForm';
+import {
+  BusinessDepositCalculatorForm,
+  BusinessDepositCalculatorProp,
+} from './BusinessDepositCalculatorForm';
 import { CreditCalculatorForm, CreditCalculatorProp } from './CreditCalculatorForm';
 import { DepositCalculatorForm, DepositCalculatorProp } from './DepositCalculatorForm';
 
 export type EmbeddableCalcProps =
   | CreditCalculatorProp
   | DepositCalculatorProp
+  | BusinessDepositCalculatorProp
   | BonusCalculatorProps;
 
 export const EmbeddableCalcBlocks = {
   CreditCalculatorForm,
   DepositCalculatorForm,
+  BusinessDepositCalculatorForm,
   BonusCalculatorForm,
 };

package/src/components/Calculator/Rate.tsx

@@ -1,22 +1,44 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 
 export interface RateProps {
   rate: number;
   title?: string;
   unit?: string;
+  depositeName?: string;
+  isShowDepositeName?: boolean;
   rateBlockClassName?: string;
 }
 
-export const Rate = JSX<RateProps>(({ rate, title = 'Ставка', unit, rateBlockClassName }) => (
-  <div>
-    <div className="text-l-light text-secondary-text">{title}</div>
-    <div className="flex justify-start">
-      <span
-        className={`block gradient-color-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`}
-      >
-        {String(rate).replace('.', ',')}
-      </span>
-      {unit ? <span className="gradient-color-text text-[65px] leading-[75px]">{unit}</span> : ''}
+export const Rate = JSX<RateProps>(
+  ({ rate, title = 'Ставка', unit, depositeName, isShowDepositeName, rateBlockClassName }) => (
+    <div>
+      <Text size="text-l-light" color="text-secondary-text">
+        {title}
+      </Text>
+      <div className="relative">
+        <div className="flex justify-start">
+          <span
+            className={style(
+              'block gradient-color-text font-mohave text-title-huge pr-6 -mt-4',
+              rateBlockClassName,
+            )}
+          >
+            {String(rate).replace('.', ',')}
+          </span>
+          {unit ? (
+            <span className="gradient-color-text text-[65px] leading-[75px]">{unit}</span>
+          ) : (
+            ''
+          )}
+        </div>
+        {depositeName && isShowDepositeName ? (
+          <div className="absolute bottom-7 w-full text-center whitespace-nowrap">
+            {depositeName}
+          </div>
+        ) : null}
+      </div>
     </div>
-  </div>
-));
+  ),
+);

package/src/components/Calculator/UnknownRate.tsx

@@ -0,0 +1,24 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Img } from '../../ui-kit/Img/Img';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
+
+export interface UnknownRateProps {
+  title?: string;
+}
+
+export const UnknownRate = JSX<UnknownRateProps>(({ title = 'Ставка' }) => (
+  <div>
+    <Text size="text-l-light" color="text-secondary-text">
+      {title}
+    </Text>
+    <div className="mt-1 pt-1 pl-5 pb-1.5">
+      <Img image={{ icon: 'PercentIcon' }} width="90" height="85" asSVG />
+    </div>
+    <div className="w-[250px] mt-3.5">
+      <Paragraph size="text-xl-light" color="text-primary-text">
+        Процентная ставка для срока <strong>1-30 дней</strong> устанавливается при обращении в Банк
+      </Paragraph>
+    </div>
+  </div>
+));

package/src/components/Calculator/constants.ts

@@ -1,4 +1,5 @@
 import { BonusCalculatorSourceBookParams } from './useBonusCalculatorParams';
+import { BusinessDepositCalculatorSourceBookParams } from './useBusinessDepositCalculatorParams';
 import { CreditCalculatorSourceBookParams } from './useCreditCalculatorParams';
 import { DepositCalculatorSourceBookParams } from './useDepositCalculatorParams';
 
@@ -8,7 +9,13 @@ export const DEFAULT_SUM = (DEFAULT_MAX_SUM - DEFAULT_MIN_SUM) / 2;
 export const DEFAULT_MIN_MONTHS = 13;
 export const DEFAULT_MAX_MONTHS = 60;
 export const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
-
+export const BUSINESS_DEFAULT_SUM = 100000;
+export const BUSINESS_MIN_DAYS = 1;
+export const BUSINESS_MAX_DAYS = 1095;
+export const BUSINESS_RATE_MIN_DAYS = 30; // порог количества дней, при которых ставка не доступна
+export const BUSINESS_OPERATING_MIN_DAYS = 90;
+export const BUSINESS_OPERATING_MAX_DAYS = 730;
+export const BUSINESS_DEFAULT_DAYS = 90;
 export const MONTHS_IN_YEAR = 12;
 
 export const MONTHLY_INTEREST_RATE = MONTHS_IN_YEAR * 100;
@@ -51,6 +58,21 @@ export const DEFAULT_DEPOSIT_CALCULATOR_PARAMS: DepositCalculatorSourceBookParam
   isMonthlyInterestPayment: true,
 };
 
+export const DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS: BusinessDepositCalculatorSourceBookParams =
+  {
+    minSum: 1000,
+    maxSum: 500000,
+    minDays: BUSINESS_MIN_DAYS,
+    maxDays: BUSINESS_MAX_DAYS,
+    rate: 5.9,
+    isMonthlyInterestPayment: true,
+    isReplenished: false,
+    isPartialWithdrawal: false,
+    isSmallBusiness: false,
+    depositeName: "Депозит 'Стабильный'",
+  };
+
 export const CREDIT_CALC_DEFAULT_DIR = 'credit-calculator-data';
 export const BONUS_CALC_DEFAULT_DIR = 'bonus-calculator-data';
 export const DEPOSIT_CALC_DEFAULT_DIR = 'deposit-calculator-data';
+export const BUSINESS_DEPOSIT_CALC_DEFAULT_DIR = 'business-calculator-data';

package/src/components/Calculator/renderCalculatorBlock.tsx

@@ -17,7 +17,7 @@ export const renderCalculatorBlock = (block: CalculatorBlockDef, i: number) => {
     >
       <div className="box-border p-9 w-full">
         {block?.title ? <Heading className="text-center mb-6" title={block.title} /> : null}
-        <EmbeddedBlock {...block} className="flex justify-between" />
+        <EmbeddedBlock {...block} />
       </div>
     </section>
   );

package/src/components/Calculator/renderDaysInput.tsx

@@ -0,0 +1,36 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { clamp } from '../../utils/clamp';
+
+const STEP_DAYS = 1;
+
+interface RenderDaysInputParams {
+  minDays: number;
+  maxDays: number;
+  daysValue: number;
+}
+
+export function renderDaysInput(
+  title: string,
+  params: RenderDaysInputParams,
+  callback?: (value: number) => void,
+) {
+  const { minDays, maxDays, daysValue } = params;
+  const daysText = (days: number) => {
+    const text = Number(days) % 10 === 1 ? 'дня' : 'дней';
+
+    return `${days} ${text}`;
+  };
+
+  return (
+    <InputRange
+      className="mt-7"
+      title={title}
+      items={[`От ${daysText(minDays)}`, `До ${daysText(maxDays)}`]}
+      min={minDays}
+      max={maxDays}
+      step={STEP_DAYS}
+      value={clamp(daysValue, minDays, maxDays)}
+      onChange={callback}
+    />
+  );
+}

package/src/components/Calculator/renderFootnote.tsx

@@ -1,2 +1,8 @@
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+
 export const renderFootnote = (text?: string) =>
-  text ? <p className="text-s-light text-secondary-text mt-7">{text}</p> : null;
+  text ? (
+    <Paragraph size="text-s-light" color="text-secondary-text">
+      {text}
+    </Paragraph>
+  ) : null;

package/src/components/Calculator/renderInterestPayment.tsx

@@ -0,0 +1,40 @@
+import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
+import { Text } from '../../ui-kit/Text/Text';
+
+const EVERY_MONTH = 'everyMonth';
+const AT_END_TERM = 'atEndTerm';
+
+const depositTypeItems = [
+  {
+    id: EVERY_MONTH,
+    text: 'Ежемесячно',
+  },
+  {
+    id: AT_END_TERM,
+    text: 'В конце срока',
+  },
+];
+
+export function renderInterestPayment(
+  isMonthlyInterestPayment: boolean,
+  callback?: (value: boolean) => void,
+  title?: string,
+) {
+  return (
+    <div>
+      {title ? (
+        <Text color="text-secondary-text" font="font-light">
+          {title}
+        </Text>
+      ) : null}
+
+      <div className="mt-3">
+        <RadioButtonGroup
+          items={depositTypeItems}
+          checkedItem={isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM}
+          onChange={(text: string) => callback && callback(text === EVERY_MONTH)}
+        />
+      </div>
+    </div>
+  );
+}