@redneckz/wildless-cms-uni-blocks 0.14.779 → 0.14.788

package/mobile/src/components/CalculatorDeposit/renderDepositParamsForm.tsx

@@ -1,71 +1,84 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
-import { renderBinaryRadioButtonGroup } from '../../ui-kit/Calculator/renderBinaryRadioButtonGroup';
+import {
+  renderBinaryRadioButtonGroup,
+  type BinaryRadioButtonGroupProps,
+} from '../../ui-kit/Calculator/renderBinaryRadioButtonGroup';
 import { renderPayout } from '../../ui-kit/Calculator/renderPayout';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
-import { type CalculatorDepositParamsViewSettings } from './CalculatorDepositContent';
-import { type DepositCalculatorParams } from './getDepositCalculatorParams';
+import { type Option } from '../../ui-kit/Select/Option';
+import { Select, type SelectProps } from '../../ui-kit/Select/Select';
+import { Text } from '../../ui-kit/Text/Text';
+import {
+  type CalculatorDepositParamsViewSettings,
+  type DepositCalculatorParams,
+} from './CalculatorDepositContent';
 import { renderRegistrationType } from './renderRegistrationType';
 
 export const renderDepositParamsForm = (
   params: DepositCalculatorParams & CalculatorDepositParamsViewSettings,
   field: FormFieldRegisterer<any>,
+  extraPercents?: Option[],
 ) => {
   const isCurrency = params?.currency?.key !== 'rub';
 
   return (
-    <div className="grid gap-lg">
-      <div className="flex gap-lg">
-        {params.isShowReplenish
-          ? renderBinaryRadioButtonGroup({
-              title: 'Пополнение',
-              ...field('isReplenish'),
-              value: params.isReplenish,
-              orientation: 'vertical',
-              items: [
-                { id: 'withReplenish', text: 'С пополнением' },
-                { id: 'withoutReplenish', text: 'Без пополнения' },
-              ],
-              disabled: isCurrency,
-            })
-          : null}
-        {params.isShowWithdrawn
-          ? renderBinaryRadioButtonGroup({
-              title: 'Снятие',
-              ...field('isWithdrawn'),
-              value: params.isWithdrawn,
-              orientation: 'vertical',
-              items: [
-                { id: 'wthDrawn', text: 'Со снятием' },
-                { id: 'noWithdrawn', text: 'Без снятия' },
-              ],
-              disabled: isCurrency,
-            })
-          : null}
-      </div>
+    <div className="grid grid-cols-2 gap-lg">
+      {renderReplenish(field('isReplenish'), params, isCurrency)}
+      {renderWithdrawn(field('isWithdrawn'), params, isCurrency)}
       {renderSeparator(params.isShowReplenish || params.isShowWithdrawn)}
-      <div className="flex gap-lg">
-        {params.isShowMonthlyInterestPayment
-          ? renderPayout({
-              title: 'Выплата процентов',
-              ...field('isMonthlyInterestPayment'),
-              value: params.isMonthlyInterestPayment,
-              orientation: 'vertical',
-            })
-          : null}
-        {params.isShowRemoteRegistration
-          ? renderRegistrationType({
-              title: 'Оформление',
-              ...field('isRemoteRegistration'),
-              value: params.isRemoteRegistration,
-              orientation: 'vertical',
-            })
-          : null}
-      </div>
-      {renderSeparator(params.isShowNewClient)}
+      {params.isShowMonthlyInterestPayment ? renderPayout(field('isMonthlyInterestPayment')) : null}
+      {renderRegistrationType(field('isRemoteRegistration'), params.isShowRemoteRegistration)}
+      {renderExtraPercents(field('extraPercent'), extraPercents)}
       {params.isShowNewClient ? <Checkbox text="Новый вкладчик" {...field('isNewClient')} /> : null}
     </div>
   );
 };
 
+const renderReplenish = (
+  props: Partial<BinaryRadioButtonGroupProps>,
+  params: DepositCalculatorParams & CalculatorDepositParamsViewSettings,
+  isCurrency = false,
+) =>
+  params.isShowReplenish
+    ? renderBinaryRadioButtonGroup({
+        ...props,
+        title: 'Пополнение',
+        orientation: 'vertical',
+        items: [
+          { id: 'withReplenish', text: 'С пополнением' },
+          { id: 'withoutReplenish', text: 'Без пополнения' },
+        ],
+        disabled: isCurrency,
+      })
+    : null;
+
+const renderWithdrawn = (
+  props: Partial<BinaryRadioButtonGroupProps>,
+  params: DepositCalculatorParams & CalculatorDepositParamsViewSettings,
+  isCurrency = false,
+) =>
+  params.isShowWithdrawn
+    ? renderBinaryRadioButtonGroup({
+        ...props,
+        title: 'Снятие',
+        orientation: 'vertical',
+        items: [
+          { id: 'wthDrawn', text: 'Со снятием' },
+          { id: 'noWithdrawn', text: 'Без снятия' },
+        ],
+        disabled: isCurrency,
+      })
+    : null;
+
 const renderSeparator = (isShow = false) =>
-  isShow ? <div className="border-b border-main-divider w-full"></div> : null;
+  isShow ? <div className="border-b border-main-divider col-span-2 w-full"></div> : null;
+
+const renderExtraPercents = (props: Partial<SelectProps>, extraPercents?: Option[]) =>
+  extraPercents?.length ? (
+    <div className="w-full space-y-s col-span-2">
+      <Text color="text-secondary-text" font="font-light">
+        Надбавка за операции по карте
+      </Text>
+      <Select options={extraPercents} {...props} />
+    </div>
+  ) : null;

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

@@ -3,11 +3,18 @@ import {
   type BinaryRadioButtonGroupProps,
 } from '../../ui-kit/Calculator/renderBinaryRadioButtonGroup';
 
-export const renderRegistrationType = (props: Partial<BinaryRadioButtonGroupProps>) =>
-  renderBinaryRadioButtonGroup({
-    ...props,
-    items: [
-      { id: 'remote', text: 'Дистанционно' },
-      { id: 'office', text: 'Офис Банка' },
-    ],
-  });
+export const renderRegistrationType = (
+  props: Partial<BinaryRadioButtonGroupProps>,
+  isShow = false,
+) =>
+  isShow
+    ? renderBinaryRadioButtonGroup({
+        ...props,
+        title: 'Оформление',
+        orientation: 'vertical',
+        items: [
+          { id: 'remote', text: 'Дистанционно' },
+          { id: 'office', text: 'Офис Банка' },
+        ],
+      })
+    : null;

package/mobile/src/components/CalculatorRefinancing/CalculatorRefinancing.tsx

@@ -57,9 +57,6 @@ export const CalculatorRefinancing = UniBlock<RefinancingCalculatorProp>(
     );
 
     const paymentTypeElement = renderPaymentType({
-      title: '',
-      mobileTitle: 'Тип платежа',
-      orientation: 'vertical',
       ...field('isAnnuity'),
     });
 
@@ -114,7 +111,7 @@ export const CalculatorRefinancing = UniBlock<RefinancingCalculatorProp>(
               postfix="₽"
             />
             {calcParams.benefit > 0 ? (
-              <CalculatorValue title={'Выгода в месяц'} value={calcParams.benefit} postfix="₽" />
+              <CalculatorValue title="Выгода в месяц" value={calcParams.benefit} postfix="₽" />
             ) : null}
             <div className="hidden sm:block mb-lg">{paymentTypeElement}</div>
             {renderButtonsSection(buttons, { isVertical: true })}

package/mobile/src/retail/adaptors/getFamilyStatusAndIncomeData.ts

@@ -44,4 +44,4 @@ export const getFamilyStatusAndIncomeData = (formData: LeadFormState): Partial<P
 };
 
 export const countIncomeAverage = (wages?: number, retirementIncome?: number) =>
-  Number(wages) + Number(retirementIncome);
+  Number(wages ?? 0) + Number(retirementIncome ?? 0);

package/mobile/src/retail/components/DocumentDialog/DocumentDialog.tsx

@@ -13,7 +13,7 @@ export const DocumentDialog = JSX<DocumentDialogProps>(({ src, onClose, onDocume
   const isMobileMode = useMobileMode();
 
   return (
-    <Dialog className="my-6xl max-w-4xl mx-auto px-0 min-h-0 pb-0" onClose={onClose}>
+    <Dialog className="my-6xl max-w-4xl mx-auto px-0 min-h-0 pb-0 z-[101]" onClose={onClose}>
       {isMobileMode ? (
         <img src={src} />
       ) : (

package/mobile/src/retail/components/EsiaLoginDialog/EsiaLoginDialog.tsx

@@ -45,11 +45,16 @@ export const EsiaLoginDialog = JSX<EsiaLoginDialogProps>(({ onClose }) => {
           </ul>
           <Img image={{ icon: 'GosUslugiIcon', iconVersion: 'normal' }} height="70" />
         </div>
-        <div className="flex flex-wrap gap-lg w-full">
-          <Button type="button" onClick={handleAuth}>
+        <div className="@container flex flex-wrap gap-lg w-full">
+          <Button type="button" onClick={handleAuth} className="w-full md:w-auto">
             Заполнить через Госуслуги
           </Button>
-          <Button type="button" version="secondary" onClick={handleClose}>
+          <Button
+            type="button"
+            version="secondary"
+            onClick={handleClose}
+            className="w-full md:w-auto"
+          >
             Пропустить
           </Button>
         </div>

package/mobile/src/retail/components/Fields/AddressCourierField.tsx

@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { type JSONRefObject } from '../../../data/JSONRefObject';
+import { type CustomFieldProps } from '../../../ui-kit/FormField/CustomFieldProps';
+import { UniBlock } from '../../../UniBlock/UniBlock';
+import { type UniBlockProps } from '../../../UniBlock/UniBlockProps';
+import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
+import { DaDataInputControl } from '../DaDataInputControl/DaDataInputControl';
+import { getAddressFromDaDataItem } from './AddressField';
+
+export interface AddressCourierFieldProps extends CustomFieldProps, UniBlockProps {
+  source?: JSONRefObject & {
+    deliveryCities?: string[];
+  };
+}
+
+export const AddressCourierField = UniBlock<AddressCourierFieldProps>(
+  ({ field, input, source }) => {
+    const [errorCity, setErrorCity] = useState('');
+    const fieldValue = field('addressCourier')?.value;
+    const currentLocality = fieldValue?.locality;
+    const currentCity = fieldValue?.city;
+
+    useEffect(() => {
+      if (
+        (currentCity || currentLocality) &&
+        !source?.deliveryCities?.includes(currentCity as string)
+      ) {
+        field?.('addressCourier')?.onChange?.({
+          ...fieldValue,
+          house: '',
+        });
+        setErrorCity('Город недоступен для доставки');
+      } else {
+        setErrorCity('');
+      }
+    }, [currentCity, currentLocality, source]);
+
+    const onDaDataChange = useCallback((item: DaDataSuggestion) => {
+      field?.('addressCourier')?.onChange?.(getAddressFromDaDataItem(item));
+    }, []);
+
+    const onChange = useCallback((value: string) => {
+      field?.('addressCourier')?.onChange?.({
+        apartment: '',
+        city: '',
+        district: '',
+        fullAddress: value,
+        fiasCode: '',
+        house: '',
+        locality: '',
+        okatoRegionCode: '',
+        postcode: '',
+        region: '',
+        regionCode: '',
+        street: '',
+        qc: '',
+        qcComplete: '',
+        qcHouse: '',
+      });
+    }, []);
+
+    return (
+      <DaDataInputControl
+        label="Адрес"
+        {...field('addressCourier')}
+        value={fieldValue?.fullAddress}
+        onChange={onChange}
+        {...input}
+        error={errorCity || field('addressCourier')?.error}
+        onDaDataChange={onDaDataChange}
+      />
+    );
+  },
+);

package/mobile/src/retail/inputs.tsx

@@ -1,4 +1,7 @@
+/* eslint-disable max-lines */
+import { type CustomFieldProps } from '../ui-kit/FormField/CustomFieldProps';
 import { PhoneField } from '../ui-kit/FormField/Fields/PhoneField';
+import { AddressCourierField } from './components/Fields/AddressCourierField';
 import { AddressFactField } from './components/Fields/AddressFactField';
 import { AddressField } from './components/Fields/AddressField';
 import { AddressMatchField } from './components/Fields/AddressMatchField';
@@ -65,6 +68,10 @@ import { SurnameField } from './components/Fields/SurnameField';
 import { TotalIncomeField } from './components/Fields/TotalIncomeField';
 import { WagesField } from './components/Fields/WagesField';
 
+const DELIVERY_CITIES_REF = {
+  $ref: '/wcms-resources/delivery-cities-data.json',
+};
+
 export const InputsApplicationLeadMap = {
   limitedBirthday: LimitedBirthdayField,
   name: NameField,
@@ -142,7 +149,9 @@ export const InputsRetailMap = {
 };
 
 export const InputRetailCardMap = {
-  addressCourier: AddressField,
+  addressCourier: (props: CustomFieldProps) => (
+    <AddressCourierField {...props} source={DELIVERY_CITIES_REF} />
+  ),
   paymentSystem: PaymentSystemField,
   currency: CurrencyField,
   cardCategory: CardCategoryField,

package/mobile/src/retail/model/LeadFormState.ts

@@ -57,7 +57,7 @@ export interface Address {
   qcHouse?: string;
 }
 
-export interface Calculator {
+export interface CalculatorProps {
   moneyValue?: number;
   monthsValue?: number;
   isAnnuity?: boolean;
@@ -164,7 +164,7 @@ export interface LeadFormState extends FormRetailConsents, FormStateDeliveryType
   cardCategory?: Option;
   codeWord?: string;
   esiaAccountTypeCd?: Option;
-  calculator?: Calculator;
+  calculator?: CalculatorProps;
   addressRetail?: Option;
   loanAmount?: number;
   creditPeriod?: number;

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

@@ -28,7 +28,7 @@ export const Rate = JSX<RateProps>(
         {title}
       </Text>
       <div className="relative">
-        <div className="flex @xl:justify-center gradient-color-text">
+        <div className="flex @xl:justify-center gradient-color-text gap-xs">
           <span className="font-mohave text-title-huge -mt-m tracking-[-15px]">
             {toLocalNumberFormat(fractionDigits, { fixed: true })(rate)}
           </span>

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

@@ -1,4 +1,5 @@
-import { type DepositCalculatorSourceBookParams } from '../../components/CalculatorDeposit/getDepositCalculatorParams';
+import { type DepositCalculatorSourceBookParams } from '../../components/CalculatorDeposit/CalculatorDepositContent';
+import { type Option } from '../Select/Option';
 import { type CalcDefaultParamsProps } from './CalculatorProps';
 
 export const getDefaultParamsMin = (rateRows?: CalcDefaultParamsProps[]) =>
@@ -9,11 +10,17 @@ export const getDefaultParamsMin = (rateRows?: CalcDefaultParamsProps[]) =>
 export const getDefaultParamsMax = (
   rateRows: DepositCalculatorSourceBookParams[] = [],
   isNewClient = false,
-) =>
-  getDefaultParams(
-    [(i: number, acc: number) => i > acc, (i, prev) => i?.minSum < prev?.minSum],
-    rateRows?.filter((_) => isNewClient === Boolean(_?.isNewClient)),
-  );
+  extraPercents: Option[] = [],
+) => {
+  return {
+    ...getDefaultParams(
+      [(i: number, acc: number) => i > acc, (i, prev) => i?.minSum < prev?.minSum],
+      rateRows?.filter((_) => isNewClient === Boolean(_?.isNewClient)),
+    ),
+    extraPercent: extraPercents.at(-1),
+    extraPercents,
+  };
+};
 
 const getDefaultParams = (
   comparators: [

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

@@ -8,7 +8,6 @@ import { Text } from '../../ui-kit/Text/Text';
 export interface BinaryRadioButtonGroupProps {
   items: [truthy: RadioButtonItem, falsy: RadioButtonItem];
   title?: string;
-  mobileTitle?: string;
   orientation?: ListOrientation;
   value?: boolean;
   className?: string;
@@ -19,27 +18,19 @@ export interface BinaryRadioButtonGroupProps {
 export const renderBinaryRadioButtonGroup = ({
   items,
   title,
-  mobileTitle = title,
   orientation = 'horizontal',
   value,
   onChange,
   ...rest
 }: BinaryRadioButtonGroupProps) => (
-  <div className="grid gap-s whitespace-nowrap">
+  <div className="grid gap-s whitespace-nowrap lg:sm:col-span-1 col-span-2">
     {title ? (
-      <div className="hidden @5xl:block" role="radiogroup" aria-label={title}>
+      <div role="radiogroup" aria-label={title}>
         <Text color="text-secondary-text" font="font-light">
           {title}
         </Text>
       </div>
     ) : null}
-    {mobileTitle ? (
-      <div className="@5xl:hidden" role="radiogroup" aria-label={mobileTitle}>
-        <Text color="text-secondary-text" font="font-light">
-          {mobileTitle}
-        </Text>
-      </div>
-    ) : null}
 
     <RadioButtonGroup
       orientation={orientation}

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

@@ -6,6 +6,8 @@ import {
 export const renderPaymentType = (props: Partial<BinaryRadioButtonGroupProps>) =>
   renderBinaryRadioButtonGroup({
     ...props,
+    title: 'Тип платежа',
+    orientation: 'vertical',
     className: 'sm:flex-col',
     items: [
       { id: 'annuity', text: 'Аннуитетный' },

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

@@ -6,6 +6,8 @@ import {
 export const renderPayout = (props: Partial<BinaryRadioButtonGroupProps>) =>
   renderBinaryRadioButtonGroup({
     ...props,
+    title: 'Выплата процентов',
+    orientation: 'vertical',
     items: [
       { id: 'everyMonth', text: 'Ежемесячно' },
       { id: 'atEndTerm', text: 'В конце срока' },

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

@@ -5,7 +5,7 @@ import {
 import {
   type DepositCalculatorParams,
   type DepositCalculatorSourceBookParams,
-} from '../../components/CalculatorDeposit/getDepositCalculatorParams';
+} from '../../components/CalculatorDeposit/CalculatorDepositContent';
 import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
 import { clamp } from '../../utils/clamp';
 

package/package.json

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

package/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -29,6 +29,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
     nextStepLink = '/credit-lead',
     button,
     productType = 'credit',
+    data,
     ...rest
   }) => {
     const applicationFormData = useMemo(() => getApplicationFormData(productType), [productType]);
@@ -48,6 +49,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
       programId,
       nextStepLink,
       productType,
+      data,
     });
 
     const [, { field, onSubmit }] = useForm(initialFormState, {

package/src/components/ApplicationLeadForm/ApplicationLeadFormContent.ts

@@ -1,3 +1,4 @@
+import { type AspectsProps } from '../../model/AspectsProps';
 import { type TextProps, type TitleProps } from '../../model/HeadlineType';
 import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { type InputRetailSectionsType } from '../../retail/model/InputSectionsType';
@@ -13,6 +14,7 @@ export type ProductType = 'credit' | 'creditCard' | 'debitCard';
  * @title Форма заявки настраиваемая
  */
 export type ApplicationLeadFormContent = UniBlockContent &
+  AspectsProps &
   TitleProps &
   InputRetailSectionsType & {
     /** @title Кнопка */

package/src/components/ApplicationLeadForm/useApplicationLeadApi.tsx

@@ -1,6 +1,9 @@
 /* eslint-disable max-lines */
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { handleAspects } from '../../hooks/useAspects/handleAspects';
+import { useAspects } from '../../hooks/useAspects/useAspects';
+import { type AspectsProps } from '../../model/AspectsProps';
 import { createDraftTask } from '../../retail/api/createDraftTask';
 import { createUserProfile } from '../../retail/api/createUserProfile';
 import { createUserTaskDebit } from '../../retail/api/createUserTaskDebit';
@@ -15,26 +18,30 @@ import { VerifyPhoneDialog } from '../../retail/components/VerifyPhoneDialog/Ver
 import { type FormRetailConsents, type LeadFormState } from '../../retail/model/LeadFormState';
 import { getUpdateUserProfileData } from '../../retail/utils/getUpdateUserProfile';
 import { useDialog } from '../../ui-kit/DialogManager/useDialog';
+import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 import { formatPhone } from '../../utils/formatPhone';
 import { type ProductType } from './ApplicationLeadFormContent';
 import { productTypeToConsentsMap } from './consents';
 import { getCreditLeadFormTaskData, getDebitLeadFormTaskData } from './getLeadFormTaskData';
 import { useSaveUserData, type UserData } from './useSaveUserData';
 
-interface ApplicationLeadApiProps {
+interface ApplicationLeadApiProps extends AspectsProps {
   programId: string;
   nextStepLink: string;
   productType: ProductType;
 }
 
+// eslint-disable-next-line max-lines-per-function
 export const useApplicationLeadApi = ({
   programId,
   nextStepLink,
   productType,
+  data,
 }: ApplicationLeadApiProps) => {
   const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
   const [ok, setOK] = useState<boolean | undefined>();
   const saveUserData = useSaveUserData();
+  const aspects = useAspects();
 
   const openEsiaLoginDialog = useEsiaLoginDialog(nextStepLink);
   const consentBkiDialog = useConsentBkiDialog(openEsiaLoginDialog);
@@ -57,6 +64,11 @@ export const useApplicationLeadApi = ({
             productType,
             saveUserData,
           });
+          handleAspects({
+            aspectsAttributes: data,
+            aspects,
+            ev: {} as PreventableEventWithTarget,
+          });
           verifyPhoneDialog.close();
           if (productType === 'debitCard') {
             openEsiaLoginDialog();

package/src/components/CalculatorBusinessDeposit/CalculatorBusinessDeposit.tsx

@@ -77,10 +77,7 @@ export const CalculatorBusinessDeposit = UniBlock<CalculatorBusinessDepositProp>
             <div className="flex flex-col sm:flex-row gap-y-m gap-x-5xl">
               {renderBusinessDepositParamsForm(calculatorParams, field)}
               {renderPayout({
-                title: 'Выплата процентов',
-                orientation: 'vertical',
                 ...field('isMonthlyInterestPayment'),
-                className: 'sm:flex-col',
               })}
             </div>
           </div>

package/src/components/CalculatorCredit/CalculatorCredit.tsx

@@ -78,8 +78,6 @@ export const CalculatorCredit = UniBlock<CalculatorDepositProps>(
 
     const calcParams = getCreditCalculatorParams(userInputParams, calcSource, paramsViewSettings);
     const paymentTypeElement = renderPaymentType({
-      title: 'Тип платежа',
-      orientation: 'vertical',
       ...field('isAnnuity'),
     });
     const { onChange: setMoneyValue } = field('moneyValue');

package/src/components/CalculatorDeposit/CalculatorDeposit.fixture.tsx

@@ -97,4 +97,16 @@ export default {
       <PopupManager />
     </div>
   ),
+  extraPercents: (
+    <div className="container grid grid-cols-12">
+      <CalculatorDeposit
+        {...calculator}
+        title="Калькулятор с задаными дефолтными значениями"
+        paramsViewSettings={{
+          isShowReplenish: true,
+        }}
+      />
+      <PopupManager />
+    </div>
+  ),
 };