@redneckz/wildless-cms-uni-blocks 0.4.6 → 0.4.7

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

@@ -39,7 +39,7 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
           {renderWantedSumInput(
             'Сумма покупок в остальных категориях, ₽',
             {
-              className: 'mt-6',
+              className: 'mt-7',
               minSum: minSumOther,
               maxSum: maxSumOther,
               moneyValue: restExpenseValue,

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

@@ -75,9 +75,11 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
 
   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`;
+    : `h-[77px] w-[328px] min-w-[328px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
   const btnTitleClassName = isActiveBtn ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
-  const btnDescClassName = isActiveBtn ? 'text-l font-light text-white' : `text-m font-light`;
+  const btnDescClassName = isActiveBtn
+    ? 'text-l-light text-white'
+    : `text-m-light text-secondary-text`;
   const iconClassName = isActiveBtn ? '' : `text-primary-main`;
 
   return (
@@ -86,7 +88,7 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
       key={String(i)}
       onClick={onClick}
       aria-label={tab?.title}
-      className={`box-border font-sans relative border border-main-stroke cursor-pointer text-left border-b-0 flex hover:h-[88px]
+      className={`box-border relative border border-main-stroke cursor-pointer text-left border-b-0 flex hover:h-[88px]
       ${btnClassName}`}
     >
       <Img
@@ -98,7 +100,7 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
       />
       <div className="border-0">
         <div className={`${btnTitleClassName}`}>{tab?.title}</div>
-        <div className={`text-secondary-text ${btnDescClassName}`}>{tab.description}</div>
+        <div className={`${btnDescClassName}`}>{tab.description}</div>
       </div>
     </button>
   );

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

@@ -1,6 +1,7 @@
 import type { EmptyOption } from '../../model/EmptyOptionType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { TitleProps } from '../../model/HeadlineType';
 
 export interface CommonCalculatorProps {
   /** @title Кнопки */
@@ -115,7 +116,8 @@ export interface CalculatorParams {
  * @title Кредитный калькулятор
  * @default {"calcType": "CreditCalculatorForm"}
  */
-export type CreditCalculatorParamsDef = CreditCalculatorParams &
+export type CreditCalculatorParamsDef = TitleProps &
+  CreditCalculatorParams &
   CommonCalculatorProps & {
     calcType: 'CreditCalculatorForm';
   };
@@ -124,7 +126,8 @@ export type CreditCalculatorParamsDef = CreditCalculatorParams &
  * @title Ипотечный калькулятор
  * @default {"calcType": "MortgageCalculatorForm"}
  */
-export type MortgageCalculatorParamsDef = MortgageCalculatorParams &
+export type MortgageCalculatorParamsDef = TitleProps &
+  MortgageCalculatorParams &
   CommonCalculatorProps & {
     calcType: 'MortgageCalculatorForm';
   };
@@ -133,7 +136,8 @@ export type MortgageCalculatorParamsDef = MortgageCalculatorParams &
  * @title Калькулятор вкладов
  * @default {"calcType": "DepositCalculatorForm"}
  */
-export type DepositCalculatorParamsDef = DepositCalculatorParams &
+export type DepositCalculatorParamsDef = TitleProps &
+  DepositCalculatorParams &
   CommonCalculatorProps & {
     calcType: 'DepositCalculatorForm';
   };
@@ -142,7 +146,8 @@ export type DepositCalculatorParamsDef = DepositCalculatorParams &
  * @title Калькулятор бонусов
  * @default {"calcType": "BonusCalculatorForm"}
  */
-export type BonusCalculatorParamsDef = BonusCalculatorParams &
+export type BonusCalculatorParamsDef = TitleProps &
+  BonusCalculatorParams &
   CommonCalculatorProps & {
     calcType: 'BonusCalculatorForm';
   };
@@ -171,10 +176,10 @@ export interface CalculatorNav {
 /**
  * @title Вкладка
  */
-export interface CalculatorTab {
+export type CalculatorTab = TitleProps & {
   nav?: CalculatorNav;
   calculatorBlock?: CalculatorBlockDef;
-}
+};
 
 /**
  * @title Калькулятор

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

@@ -13,7 +13,7 @@ export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
   ({ title, value, postfix = '', prefix, className = '' }) => {
     return (
       <div className={`mb-5 ${className}`}>
-        {title ? <div className="text-l-light">{title}</div> : null}
+        {title ? <div className="text-l-light text-secondary-text">{title}</div> : null}
         {value ? (
           <div className="text-h3">
             {prefix} {addSpacesBetweenNumbers(Math.round(value))} {postfix}

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

@@ -55,7 +55,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             setMoneyValue,
           )}
           {renderMonthsInput('Срок кредита, месяцев', calculatorParams, setMonthsValue)}
-          <div className="pt-7">
+          <div className="mt-7">
             <Checkbox
               text="Получаю зарплату на счёт в Россельхозбанке"
               checked={isSalaryClient}

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

@@ -32,8 +32,6 @@ export const MortgageCalculatorForm = JSX<MortgageCalculatorProp>(
     const maxMonths = /* calculatorParams?.maxMonths || */ DEFAULT_MAX_MONTHS;
 
     const rate = getCreditRate({ calculatorParams, isInsurance: isInsurance });
-
-    const monthlyPayment = 777777; // TODO: hardcode
     const proposalMortgageValue = { credit: 3892000, period: 15, taxRefund: 650000 }; // TODO: hardcode
 
     return (
@@ -60,17 +58,13 @@ export const MortgageCalculatorForm = JSX<MortgageCalculatorProp>(
             <Checkbox text="Страхование жизни" checked={isInsurance} onChange={toggleIsInsurance} />
             <Checkbox
               className="mt-4"
-              text="Страхование жизни, злоровья и временной утраты трудоспособности"
+              text="Страхование жизни, здоровья и временной утраты трудоспособности"
               checked={isFullInsurance}
               onChange={toggleIsFullInsurance}
             />
           </div>
         </div>
-        <div>
-          <Rate rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
-
-          <CalculatorValueBlock title="Ежемесячный платеж" value={monthlyPayment} postfix="₽" />
-        </div>
+        <Rate rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
         <div>
           <div className="w-[351px]">{renderProposalMortgage(proposalMortgageValue)}</div>
           {renderButtonSection(context, buttons)}

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

@@ -9,14 +9,14 @@ export interface RateProps {
 
 export const Rate = JSX<RateProps>(({ rate, title = 'Ставка', unit, rateBlockClassName }) => (
   <div>
-    <div className="text-l-light ml-3">{title}</div>
+    <div className="text-l-light text-secondary-text">{title}</div>
     <div className="flex justify-start">
       <span
-        className={`block calc-rate-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`}
+        className={`block gradient-color-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`}
       >
         {String(rate).replace('.', ',')}
       </span>
-      {unit ? <span className="calc-rate-text text-[65px] leading-[75px]">{unit}</span> : ''}
+      {unit ? <span className="gradient-color-text text-[65px] leading-[75px]">{unit}</span> : ''}
     </div>
   </div>
 ));

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

@@ -1,6 +1,7 @@
 import type { JSXBlock } from '../ContentPage/ContentPage';
 import type { CalculatorBlockDef } from './CalculatorContent';
 import { EmbeddableCalcBlocks, EmbeddableCalcProps } from './EmbeddableCalcBlocks';
+import { Heading } from '../../ui-kit/Heading/Heading';
 
 export const renderCalculatorBlock =
   ({ context, className }: any) =>
@@ -18,6 +19,7 @@ export const renderCalculatorBlock =
         role="listitem"
       >
         <div className="box-border p-9 w-full">
+          {block?.title ? <Heading className="text-center mb-6" title={block.title} /> : null}
           <EmbeddedBlock context={context} {...block} className="flex justify-between" />
         </div>
       </section>

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

@@ -17,7 +17,7 @@ export function renderInitialFeeInput(title, props: RenderWantedSumInputParams,
 
   return (
     <InputRange
-      className="mt-6"
+      className="mt-7"
       title={title}
       items={[
         `От ${addSpacesBetweenNumbers(minSum)} рублей`,

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

@@ -19,7 +19,7 @@ export function renderMonthsInput(title: string, params: RenderMonthsInputParams
 
   return (
     <InputRange
-      className="mt-6"
+      className="mt-7"
       title={title}
       items={[`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`]}
       min={minMonths}

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

@@ -6,11 +6,16 @@ type porposalMortgage = {
   taxRefund: number;
 };
 
+const monthlyPayment = 777777; // TODO: hardcode
+
 export function renderProposalMortgage({ credit, period, taxRefund }: porposalMortgage) {
   return (
     <div>
-      {<CalculatorValueBlock title="Сумма кредита" value={credit} postfix="₽" />}
-      {<CalculatorValueBlock title="Срок" value={period} postfix="лет" />}
+      <div className="flex justify-between">
+        {<CalculatorValueBlock title="Сумма кредита" value={credit} postfix="₽" />}
+        {<CalculatorValueBlock title="Срок" value={period} postfix="лет" className="w-[120px]" />}
+      </div>
+      {<CalculatorValueBlock title="Ежемесячный платеж" value={monthlyPayment} postfix="₽" />}
       {<CalculatorValueBlock title="Налоговый вычет" value={taxRefund} postfix="₽" />}
     </div>
   );

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

@@ -0,0 +1,13 @@
+{
+  "title": "Страница не найдена",
+  "subtitle": "Возможно неправильно набран адрес или такой странице не существует",
+  "error": {
+    "errorContentType": "Code",
+    "code": 404
+  },
+  "button": {
+    "text": "Вернуться на главную",
+    "version": "primary",
+    "target": "_blank"
+  }
+}

package/mobile/src/components/ErrorBlock/ErrorBlock.tsx

@@ -0,0 +1,45 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { ErrorBlockContent } from './ErrorBlockContent';
+import { useLink } from '../../hooks/useLink';
+import { Button } from '../../ui-kit/Button/Button';
+import { Img } from '../../ui-kit/Img/Img';
+import { Heading } from '../../ui-kit/Heading/Heading';
+
+export interface ErrorBlockProps extends ErrorBlockContent, UniBlockProps {}
+
+const renderErrorContent = (error: ErrorBlockContent['error']) => {
+  if (error?.errorContentType === 'Image' && error?.image) {
+    return <Img className="mb-7" image={error.image} />;
+  }
+
+  if (error?.errorContentType === 'Code' && error.code) {
+    return <div className="text-title-extra gradient-color-text">{error.code}</div>;
+  }
+
+  return null;
+};
+
+export const ErrorBlock = JSX<ErrorBlockProps>(
+  ({ context, className = '', title, subtitle, error, button }) => {
+    const { useRouter, handlerDecorator } = context;
+    const router = useRouter();
+
+    return (
+      <section className={`flex flex-col justify-center items-center ${className}`} role="listitem">
+        <div className="flex justify-center mb-7">{renderErrorContent(error)}</div>
+        {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
+        {subtitle ? <div className="text-xl-light text-left mb-7">{subtitle}</div> : null}
+        {button?.text ? (
+          <Button
+            className="py-4 px-9"
+            version={button?.version}
+            {...useLink({ router, handlerDecorator }, button)}
+          >
+            {button.text}
+          </Button>
+        ) : null}
+      </section>
+    );
+  },
+);

package/mobile/src/components/ErrorBlock/ErrorBlockContent.ts

@@ -0,0 +1,38 @@
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { EmptyOption } from '../../model/EmptyOptionType';
+
+/**
+ * @title Изображение
+ */
+export type ErrorImageDef = {
+  /** @default Image */
+  errorContentType: 'Image';
+  /** @title Изображение */
+  image?: Picture;
+};
+
+/**
+ * @title Код ошибки
+ */
+export type ErrorCodeDef = {
+  /** @default Code */
+  errorContentType: 'Code';
+  /** @title Код ошибки */
+  code?: number;
+};
+export type ErrorContentDef = EmptyOption | ErrorImageDef | ErrorCodeDef;
+
+/**
+ * @title Блок Ошибка
+ */
+export interface ErrorBlockContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Описание */
+  subtitle?: string;
+  /** @title Вид контента */
+  error?: ErrorContentDef;
+  /** @title Кнопка */
+  button?: ButtonProps;
+}

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

@@ -0,0 +1,33 @@
+{
+  "title": "Услуги",
+  "officesList": [
+    {
+      "text": "Обслуживание физических лиц",
+      "icon": { "icon": "CardTickIcon" }
+    },
+    {
+      "text": "Обслуживание юридических лиц",
+      "icon": { "icon": "EmptyWalletChangeIcon" }
+    },
+    {
+      "text": "Продажа монет из драгоценных металлов",
+      "icon": { "icon": "UserTickIcon" }
+    },
+    {
+      "text": "Аренда индивидуальных сейфовых ячеек",
+      "icon": { "icon": "UserTickIcon" }
+    },
+    {
+      "text": "Операции с обезличенными металлическими счетами",
+      "icon": { "icon": "ShieldTickIcon" }
+    },
+    {
+      "text": "Операции со слитками драгоценных металлов",
+      "icon": { "icon": "ShieldTickIcon" }
+    },
+    {
+      "text": "Передача фото и голоса в Единую биометрическую систему",
+      "icon": { "icon": "ShieldTickIcon" }
+    }
+  ]
+}

package/mobile/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -0,0 +1,41 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import type {
+  OfficeServicesBlockContent,
+  OfficeServicesBlockList,
+} from './OfficeServicesBlockContent';
+
+export interface OfficeServicesBlockProps extends OfficeServicesBlockContent, UniBlockProps {}
+
+export const OfficeServicesBlock = JSX<OfficeServicesBlockProps>(
+  ({ className = '', context, title, officesList, anchor = '' }) => {
+    return (
+      <BlockWrapper
+        context={context}
+        id={anchor}
+        className={`font-sans bg-white p-12 flex flex-col ${className}`}
+      >
+        {title ? <Heading headingType="h5" className="mb-2.5" title={title} /> : null}
+        {officesList?.length ? officesList.map(renderListItems) : null}
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderListItems = (itemList: OfficeServicesBlockList, i) => (
+  <li key={`list_item_${String(i)}`} className="flex mb-2.5 list-none">
+    {itemList.icon ? (
+      <Img
+        className="mr-[14px] max-w-6 max-h-6"
+        width="24px"
+        height="24px"
+        asSVG
+        image={itemList.icon}
+      />
+    ) : null}
+    {itemList.text ? <span className="text-l-light">{itemList.text}</span> : null}
+  </li>
+);

package/mobile/src/components/OfficeServicesBlock/OfficeServicesBlockContent.ts

@@ -0,0 +1,26 @@
+import type { Picture } from '../../model/Picture';
+
+export interface OfficeServicesBlockList {
+  /**
+   *  @title Иконка
+   *  @default {
+   *   "size": {
+   *     "width": 24,
+   *     "height": 24
+   *   },
+   *   "format": "webp"
+   * }
+   */
+  icon?: Picture;
+  text?: string;
+}
+
+/**
+ * @title Офисные услуги
+ */
+export interface OfficeServicesBlockContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Список */
+  officesList?: OfficeServicesBlockList[];
+}

package/mobile/src/components/PictureText/PictureText.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
-import type { PictureTextContent } from './PictureTextContent';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../types';
+import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
 import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
-import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
-import { Headline } from '../Headline/Headline';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { VersionStyleMap } from '../../model/BlockVersion';
+import { Headline } from '../Headline/Headline';
+import type { PictureTextContent } from './PictureTextContent';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
@@ -42,7 +42,7 @@ export const PictureText = JSX<PictureTextProps>(
           align="center"
         />
         <div className={'flex justify-center gap-[122px] mt-[30px]'}>
-          {image?.src && <Img className={directionRight ? 'order-2 ml-6' : 'mr-6'} image={image} />}
+          {image?.src ? <Img className={directionRight ? 'order-2' : ''} image={image} /> : null}
           <div className="w-[558px] m-auto">
             {benefits?.length ? (
               <div className="flex flex-col gap-4">{benefits.map(renderBenefit(version))}</div>

package/mobile/src/components/SafeDepositRental/RegionsAndBranches.tsx

@@ -0,0 +1,50 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { Branch } from './SafeDepositRentalContent';
+import { Region } from './useGetRegions';
+import { WrapperSelect } from './WrapperSelect';
+
+interface RegionsAndBranchesProps {
+  regions?: Region[];
+  selectedRegion: string;
+  onSelectedRegion: (value: string) => void;
+  branches?: Branch[];
+  selectedBranch: string;
+  onSelectedBranch: (value: string) => void;
+}
+
+export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
+  ({
+    regions = [],
+    selectedRegion,
+    onSelectedRegion: onSelectedRegion,
+    branches = [],
+    selectedBranch,
+    onSelectedBranch,
+  }) => {
+    return (
+      <div className="flex justify-between mb-6">
+        <div className="w-full mr-4">
+          <WrapperSelect
+            data={regions}
+            fieldValue="code"
+            fieldLabel="name"
+            selected={selectedRegion}
+            setSelected={onSelectedRegion}
+            label="Город"
+          />
+        </div>
+        <div className="w-full">
+          <WrapperSelect
+            data={branches}
+            fieldValue="branchCode"
+            fieldLabel="address"
+            selected={selectedBranch}
+            setSelected={onSelectedBranch}
+            label="Отделение"
+            placeholder="Выберите отделение"
+          />
+        </div>
+      </div>
+    );
+  },
+);

package/mobile/src/components/SafeDepositRental/RenderRadioButtons.tsx

@@ -0,0 +1,29 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks/core';
+import { Radio } from '../../ui-kit/Radio/Radio';
+
+export const RenderRadioButtons = JSX(() => {
+  const [selectedOption, setSelectedOption] = useState('option1');
+
+  const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelectedOption(_.target.value);
+
+  return (
+    <div>
+      <Radio
+        className="mb-2"
+        name="contractType"
+        text="Простое хранение"
+        value="option1"
+        checked={selectedOption === 'option1'}
+        onChange={onChange}
+      />
+      <Radio
+        name="contractType"
+        text="Сделка с недвижимостью"
+        value="option2"
+        checked={selectedOption === 'option2'}
+        onChange={onChange}
+      />
+    </div>
+  );
+});

package/mobile/src/components/SafeDepositRental/RentalPeriod.tsx

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+
+const ITEMS = ['От 1 дня', 'До 365 дней'];
+const MIN = 1;
+const MAX = 365;
+
+interface RentalPeriodProps {
+  days: number;
+  setDays: (value: number) => void;
+}
+
+export const RentalPeriod = JSX<RentalPeriodProps>(({ days, setDays }) => (
+  <div className="mb-6">
+    <span className="block text-m-light mb-[3px]">Срок аренды</span>
+    <InputRange min={MIN} max={MAX} value={days} items={ITEMS} onChange={setDays} />
+  </div>
+));

package/mobile/src/components/SafeDepositRental/SafeBoxCases.tsx

@@ -0,0 +1,48 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { SafeBoxCase, SafeBoxCaseVolume } from './SafeDepositRentalContent';
+import { WrapperSelect } from './WrapperSelect';
+
+interface SafeBoxCasesProps {
+  caseVolumes?: SafeBoxCaseVolume[];
+  selectedCaseVolume: string;
+  onSelectedCaseVolume: (value: string) => void;
+  safeBoxCases?: SafeBoxCase[];
+  selectedBoxSize: string;
+  onSelectedBoxSize: (value: string) => void;
+}
+
+export const SafeBoxCases = JSX<SafeBoxCasesProps>(
+  ({
+    caseVolumes = [],
+    selectedCaseVolume,
+    onSelectedCaseVolume,
+    safeBoxCases = [],
+    selectedBoxSize,
+    onSelectedBoxSize,
+  }) => {
+    return (
+      <div className="flex justify-between mb-6">
+        <div className="mr-4 w-full">
+          <WrapperSelect
+            data={caseVolumes}
+            fieldLabel="volume"
+            selected={selectedCaseVolume}
+            setSelected={onSelectedCaseVolume}
+            label="Размер"
+            placeholder="Выберите размер"
+          />
+        </div>
+        <div className="w-full">
+          <WrapperSelect
+            data={safeBoxCases}
+            fieldLabel="safeBoxCasesSize"
+            selected={selectedBoxSize}
+            setSelected={onSelectedBoxSize}
+            label="Параметры ячейки, мм (ВхШхД)"
+            placeholder="Выберите параметр ячейки"
+          />
+        </div>
+      </div>
+    );
+  },
+);