@redneckz/wildless-cms-uni-blocks 0.3.4 → 0.3.7

package/src/components/ContentPage/ContentPageHead.tsx

@@ -7,7 +7,13 @@ export interface ContentPageHeadProps {
 }
 
 export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data, children }) => {
-  const { title, description, keywords, robots, og } = data;
+  const {
+    title,
+    main: { description, keywords, canonical, robots },
+    og,
+    twitter,
+    jsonLd,
+  } = data;
   return (
     <HeadComponent>
       <title>{title}</title>
@@ -20,6 +26,13 @@ export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data,
             <meta key={key} name={`og:${key}`} content={value} />
           ))
         : null}
+      {twitter
+        ? Object.entries(twitter).map(([key, value]) => (
+            <meta key={key} name={`twitter:${key}`} content={value} />
+          ))
+        : null}
+      {canonical && <link rel="canonical" href={canonical} />}
+      {jsonLd && <script type="application/ld+json">{jsonLd}</script>}
       {children}
     </HeadComponent>
   );

package/src/components/ContentPage/isBlockInRegistry.ts

@@ -1,5 +1,3 @@
-import { BlockDef } from '../../types';
-
-export function isBlockInRegistry<T>(block: BlockDef, registry: Record<string, T>) {
-  return block.type in registry;
+export function isBlockInRegistry<T>(blockType: string | undefined, registry: Record<string, T>) {
+  return (blockType || '') in registry;
 }

package/src/components/ContentPage/normalizePage.mobile.ts

@@ -32,6 +32,9 @@ export function normalizePage(
 
 function getMobileBlocks(blocks?: BlockDef[]) {
   return blocks
-    ?.filter((block) => isBlockInRegistry(block, Blocks) && !block.mobile?.hidden)
+    ?.filter(
+      (block) =>
+        isBlockInRegistry(block?.type || block?.mobile?.type, Blocks) && !block.mobile?.hidden,
+    )
     .map(normalizeBlock);
 }

package/src/components/ContentPage/normalizePage.ts

@@ -31,5 +31,5 @@ export function normalizePage<T extends ContentPageDef | undefined | null>(
 }
 
 function getDesktopBlocks(blocks?: BlockDef[]) {
-  return blocks?.filter((block) => isBlockInRegistry(block, Blocks)).map(normalizeBlock);
+  return blocks?.filter((block) => isBlockInRegistry(block?.type, Blocks)).map(normalizeBlock);
 }

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -44,7 +44,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
               <Heading
                 headingType={getTileHeadingType(className)}
                 title={title}
-                className={`whitespace-pre-wrap max-w-[600px]`}
+                className={`whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}`}
               />
             )
           }

package/src/components/Gallery/Gallery.fixture.mobile.tsx

@@ -48,7 +48,7 @@ const cards = [
   {
     image,
     title: 'Вклады в любой валюте',
-    itemsMobile: defaultItems,
+    items: defaultItems,
   },
   {
     title: 'Вклады в любой валюте',

package/src/components/Gallery/GalleryCardInner.tsx

@@ -3,10 +3,11 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
-import type { GalleryCard, GalleryItem } from './GalleryContent';
+import type { GalleryCard } from './GalleryContent';
 
 export const GalleryCardInner = JSX<GalleryCard>(
   ({ title, description, image, items, button, version }) => {
+    const titleStyleClasses = getTitleStyle(version, description, items);
     return (
       <div>
         <div>
@@ -15,15 +16,11 @@ export const GalleryCardInner = JSX<GalleryCard>(
               <Img className="mb-6" image={image} />
             </div>
           ) : null}
-          {title && renderCardTitle(title, description, items)}
-          {description ? <div className={`font-normal text-sm mt-2`}>{description}</div> : null}
-          {items?.length ? (
-            <section className={`max-w-[308px] mt-2`} role="list">
-              {items
-                .filter((item) => item?.text)
-                .map((item, i) => renderItem(item.text as string, i, version))}
-            </section>
+          {title ? renderCardTitle(title, titleStyleClasses) : null}
+          {description ? (
+            <div className={`font-normal text-sm ${title ? 'mt-2' : ''}`}>{description}</div>
           ) : null}
+          {items?.length ? renderItems(items, version) : null}
         </div>
         {button?.text && <Button className="mt-6" {...button} />}
       </div>
@@ -31,13 +28,17 @@ export const GalleryCardInner = JSX<GalleryCard>(
   },
 );
 
-function renderCardTitle(title: string, description?: string, items?: GalleryItem[]) {
+function renderCardTitle(title: string, className: string) {
+  return <div className={`font-medium text-xl m-0 ${className}`}>{title}</div>;
+}
+
+function renderItems(items, version) {
   return (
-    <div
-      className={`font-medium text-xl m-0 ${!description && !items?.length ? 'text-center' : ''}`}
-    >
-      {title}
-    </div>
+    <section className={`max-w-[308px] mt-2`} role="list">
+      {items
+        .filter((item) => item?.text)
+        .map((item, i) => renderItem(item.text as string, i, version))}
+    </section>
   );
 }
 
@@ -48,3 +49,10 @@ function renderItem(item: string, i: number, version?: BlockVersion) {
     </BlockItem>
   );
 }
+
+function getTitleStyle(version, description, items) {
+  return `font-medium text-xl m-0
+        ${version !== 'secondary' ? 'text-primary-text' : ''}
+        ${!description && !items?.length ? 'text-center' : ''}
+      `;
+}

package/src/components/Header/Header.mobile.tsx

@@ -32,7 +32,7 @@ export const Header = JSX<HeaderProps>(
 
     return (
       <header className={`${bgColor} ${className}`}>
-        <div className="container px-4 py-0">
+        <div className="container px-4 py-0 box-border">
           <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
           <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
             <div className="flex">

package/src/components/Header/HeaderBurger.tsx

@@ -18,8 +18,8 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
     const [city, getCity] = context.useGeolocation(defaultLocation);
 
     return (
-      <div className="absolute top-0 left-0 w-full h-full bg-white p-4">
-        <button className="absolute top-4 right-4" onClick={onClick}>
+      <div className="absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20">
+        <button className="absolute top-4 right-4 border-none bg-transparent" onClick={onClick}>
           <Icon name="CloseIcon" width="24" height="24" asSVG />
         </button>
         <Button onClick={getCity} className="flex items-center text-sm text-secondary-text mb-4">

package/src/components/Header/HeaderTop.tsx

@@ -11,7 +11,7 @@ export interface HeaderTopProps {
 export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
   <div className="flex items-center justify-between border-0 border-b border-main-divider h-[50px]">
     <div className="flex items-center">
-      <button className="pr-4" onClick={onClick} aria-label="Открыть меню">
+      <button className="pr-4 border-0 bg-transparent" onClick={onClick} aria-label="Открыть меню">
         <Icon
           name={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
           width="24"
@@ -21,7 +21,11 @@ export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
       </button>
       <Logo bgColor={bgColor} />
     </div>
-    <button className={`${bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'} text-sm`}>
+    <button
+      className={`${
+        bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'
+      } text-sm  border-0 bg-transparent`}
+    >
       Войти
     </button>
   </div>

package/src/components/Headline/HeadlineContent.ts

@@ -1,5 +1,5 @@
 import type { BgColorVersion } from '../../model/BgColorVersion';
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { AlignType } from '../BaseTile/BaseTileProps';

package/src/components/LinkDocs/LinkDocsListItem.mobile.tsx

@@ -4,7 +4,7 @@ import type { LinkDocsListItemProps } from './LinkDocsListItemBase';
 
 export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
   <LinkDocsListItemBase
-    className={`flex h-full ${className}`}
+    className={`flex h-full box-border ${className}`}
     iconClassName="mr-3 min-w-6 min-h-6"
     doc={doc}
     icon={icon}

package/src/components/LinkDocs/LinkDocsListItem.tsx

@@ -4,7 +4,7 @@ import type { LinkDocsListItemProps } from './LinkDocsListItemBase';
 
 export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
   <LinkDocsListItemBase
-    className={className}
+    className={`flex h-full box-border ${className}`}
     iconClassName="mr-2.5 min-w-6 min-h-6 text-primary-text"
     textClassName="self-center"
     suffixClassName="text-secondary-text group-hover:text-primary-main"

package/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,5 +1,5 @@
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 
 /**

package/src/components/Placeholder/Placeholder.fixture.mobile.tsx

@@ -0,0 +1,9 @@
+import { context } from '../../setup-fixture';
+
+import { Placeholder } from './Placeholder';
+
+export default (
+  <div className="container grid grid-cols-12">
+    <Placeholder className="col-span-12" context={context} title="Неизвестный блок" />
+  </div>
+);

package/src/components/Placeholder/Placeholder.tsx

@@ -1,7 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { PlaceholderContent } from '../../components/Placeholder/PlaceholderContent';
-import { Tile } from '../Tile/Tile';
 import type { UniBlockProps } from '../../types';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { BaseTile } from '../BaseTile/BaseTile';
+import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
+import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
+import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 
 export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
   className?: string;
@@ -9,13 +14,35 @@ export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
 
 const GOLDEN_RATIO = 1.618;
 
-export const Placeholder = JSX<PlaceholderProps>(({ className, context, title }) => {
-  return (
-    <Tile className={className} context={context} title={title} description="Блок в разработке...">
-      <figure className="m-0 min-w-[600px]">{renderShimmer()}</figure>
-    </Tile>
-  );
-});
+export const Placeholder = JSX<PlaceholderProps>(
+  ({ className, context, title, description = 'Блок в разработке...' }) => {
+    return (
+      <section
+        className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(
+          className,
+        )} ${getTileMinHeight(className)} `}
+      >
+        <BaseTile
+          context={context}
+          title={
+            title ? (
+              <Heading
+                headingType={getTileHeadingType(className)}
+                title={title}
+                className={`whitespace-pre-wrap max-w-[600px]`}
+              />
+            ) : null
+          }
+        >
+          {description ? (
+            <Description className="mt-4 max-w-[600px]" description={description} />
+          ) : null}
+          <figure className="m-0 min-w-[600px]">{renderShimmer()}</figure>
+        </BaseTile>
+      </section>
+    );
+  },
+);
 
 const renderShimmer = (size = 3) =>
   goldenSequence(100, size)

package/src/components/Placeholder/PlaceholderContent.ts

@@ -1,6 +1,7 @@
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 
 /**
  * @hidden
  */
-export type PlaceholderContent = HeadingContent;
+export type PlaceholderContent = HeadingContent & DescriptionContent;

package/src/components/ProductBlock/ProductBlock.example.json

@@ -13,5 +13,6 @@
       "text": "Кнопка",
       "version": "secondary"
     }
-  ]
+  ],
+  "version": "primary"
 }

package/src/components/ProductBlock/ProductBlock.fixture.mobile.tsx

@@ -7,9 +7,15 @@ const image: Picture = {
   format: 'webp',
   alt: 'Потребительский кредит наличными',
   size: {
-    width: 280,
-    height: 280,
+    width: 234,
+    height: 234,
   },
+  sources: [
+    {
+      src: 'money-1.png 1x, money-1-2x.png 2x',
+      format: 'png',
+    },
+  ],
 };
 
 export default {

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,7 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';

package/src/components/ProductBlock/ProductBlockInner.mobile.tsx

@@ -25,7 +25,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     version = 'primary',
   }) => {
     return (
-      <div className={`${className}`}>
+      <div className={`w-full text-primary-text ${className}`}>
         <div>
           <BaseTile
             context={context}
@@ -34,31 +34,37 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
                 <Heading
                   headingType={headingType}
                   title={title}
-                  className={`whitespace-pre-wrap max-w-[600px]`}
+                  className={`whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}`}
                 />
               )
             }
             buttons={
               buttons?.length ? (
-                <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+                <ButtonSection
+                  context={context}
+                  buttons={buttons}
+                  className="flex flex-col mt-5 gap-2.5"
+                />
               ) : null
             }
           >
             {description && <Description description={description} />}
             {benefits?.length ? (
-              <div className="mt-[19px]">
-                {benefits.map((_, i) => renderBenefit(_, i, version))}
-              </div>
+              <div className="mt-5">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
             ) : null}
             {items?.length ? <List items={items} /> : null}
           </BaseTile>
         </div>
-        {image?.src && (
-          <div className="mt-5">
-            <Img image={{ className: 'block', ...image }} />
-          </div>
-        )}
+        {renderImage(image)}
       </div>
     );
   },
 );
+
+function renderImage(image) {
+  return image?.src ? (
+    <div className="mt-5">
+      <Img image={{ className: 'block', ...image }} />
+    </div>
+  ) : null;
+}

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -25,7 +25,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     version = 'primary',
   }) => {
     return (
-      <div className={`flex grow justify-between items-stretch ${className}`}>
+      <div className={`flex grow justify-between items-stretch text-primary-text ${className}`}>
         <div className={'flex flex-col'}>
           <BaseTile
             context={context}
@@ -52,7 +52,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
                 {benefits.map((_, i) => renderBenefit(_, i, version))}
               </div>
             ) : null}
-            {items?.length ? <List items={items} /> : null}
+            {items?.length ? <List className="mt-5" items={items} /> : null}
           </BaseTile>
         </div>
         {image?.src && <Img className="mt-auto" image={image} />}

package/src/components/ProductBlock/renderBenefit.mobile.tsx

@@ -16,14 +16,14 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
     <div key={String(i)} className="flex gap-3 items-center mb-2.5 last:mb-0">
       {benefit.icon && (
         <Icon
-          className="w-[25px] h-[25px] rounded-full box-border"
+          className="w-6 h-6 rounded-full box-border"
           name={benefit.icon}
           width="24"
           height="24"
           asSVG
         />
       )}
-      <div className={`font-medium text-m-base m-0 ${benefitTitleStyleMap[version]}`}>
+      <div className={`font-medium text-m-title-xs m-0 ${benefitTitleStyleMap[version]}`}>
         {benefit.label}
       </div>
       {benefit.description && (

package/src/components/ProductGallery/ProductGallery.fixture.mobile.tsx

@@ -10,20 +10,34 @@ const moneyImage: Picture = {
     height: 280,
   },
   alt: 'Варианты потребительского кредита',
+  sources: [
+    {
+      src: 'money-1.png 1x, money-1-2x.png 2x',
+      format: 'png',
+    },
+  ],
 };
 
 const worker: Picture = {
   src: 'money-2.png',
   format: 'webp',
+  alt: 'Варианты потребительского кредита',
   size: {
     width: 280,
     height: 280,
   },
+  sources: [
+    {
+      src: 'money-2.png 1x, money-2-2x.png 2x',
+      format: 'png',
+    },
+  ],
 };
 
 const creditCard: Picture = {
   src: 'credit-card-1.png',
   format: 'webp',
+  alt: 'Варианты потребительского кредита',
   size: {
     width: 280,
     height: 280,
@@ -31,6 +45,98 @@ const creditCard: Picture = {
 };
 
 export default {
+  default: (
+    <div className="p-2">
+      <div className="container grid grid-cols-12">
+        <ProductGallery
+          className="col-span-12"
+          context={context}
+          slides={[
+            {
+              productBlock: {
+                title: 'Акция «Кредит на все, что хочется!»',
+                items: [
+                  'Потребительский кредит по специальной процентной ставке',
+                  'Получите деньги без залога и поручительства',
+                  'Кредитный лимит до 5 млн рублей',
+                ],
+                buttons: [
+                  {
+                    href: 'https://rshb.ru',
+                    text: 'Подробнее',
+                    target: '_blank',
+                    version: 'primary',
+                  },
+                ],
+                image: moneyImage,
+              },
+            },
+            {
+              productBlock: {
+                title: 'Ставка от 12,5% годовых на срок до 3 лет!',
+                items: [
+                  'Потребительский кредит по специальной процентной ставке',
+                  'Получите деньги без залога и поручительства',
+                  'Кредитный лимит до 5 млн рублей',
+                ],
+                buttons: [
+                  {
+                    href: 'https://rshb.ru',
+                    text: 'Подробнее',
+                    target: '_blank',
+                    version: 'primary',
+                  },
+                ],
+                image: worker,
+              },
+            },
+            {
+              nav: {
+                title: 'Выгодно покупать',
+                desc: 'Дополнительные бонусные баллы за покупки',
+              },
+              productBlock: {
+                title: 'Дополнительные бонусные баллы за покупки!',
+                items: [
+                  'Потребительский кредит по специальной процентной ставке',
+                  'Получите деньги без залога и поручительства',
+                  'Кредитный лимит до 5 млн рублей',
+                ],
+                buttons: [
+                  {
+                    href: 'https://rshb.ru',
+                    text: 'Подробнее',
+                    target: '_blank',
+                    version: 'primary',
+                  },
+                ],
+                image: creditCard,
+              },
+            },
+            {
+              productBlock: {
+                title: 'Карты Unionpay',
+                items: [
+                  'Потребительский кредит по специальной процентной ставке',
+                  'Получите деньги без залога и поручительства',
+                  'Кредитный лимит до 5 млн рублей',
+                ],
+                buttons: [
+                  {
+                    href: 'https://rshb.ru',
+                    text: 'Подробнее',
+                    target: '_blank',
+                    version: 'primary',
+                  },
+                ],
+                image: creditCard,
+              },
+            },
+          ]}
+        />
+      </div>
+    </div>
+  ),
   primary: (
     <div className="p-2">
       <div className="container grid grid-cols-12">

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -7,8 +7,8 @@ const moneyImage: Picture = {
   src: 'money-1.png',
   format: 'webp',
   size: {
-    width: 280,
-    height: 280,
+    width: 234,
+    height: 234,
   },
   alt: 'Варианты потребительского кредита',
 };

package/src/components/ProductGallery/ProductGallery.mobile.tsx

@@ -1,58 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { ProductGalleryBlock } from './ProductGalleryBlock';
 import type { ProductGalleryContent } from './ProductGalleryContent';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import { ProductGalleryBlock } from './ProductGalleryBlock';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-export const ProductGallery = JSX<ProductGalleryProps>(
-  ({ className, context, duration = 0, slides = [] }) => {
-    const galleryBlocks = slides.map((s) => s.productBlock);
-    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
-
-    return (
-      <section className={`font-sans bg-white overflow-hidden w-100 ${className || ''}`}>
-        <div
-          className={`flex duration-1000`}
-          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
-          role="list"
-        >
-          {galleryBlocks.map((block, i) => (
-            <ProductGalleryBlock key={String(i)} block={block} context={context} />
-          ))}
-        </div>
-
-        <div className="flex px-4 py-6">
-          {slides.map((_, i) =>
-            renderNavButton({
-              slide: _.productBlock,
-              i,
-              activeSlideIndex,
-              onClick: () => setActiveSlideIndex(i),
-              duration,
-            }),
-          )}
-        </div>
-      </section>
-    );
-  },
-);
+export const ProductGallery = JSX<ProductGalleryProps>(({ className, context, slides = [] }) => {
+  const galleryBlocks = slides.map((s) => s.productBlock);
 
-function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
-  const isActiveBtn = i === activeSlideIndex;
-  const progressBarClassName = isActiveBtn ? 'animate-slide bg-primary-main' : 'bg-main-divider';
   return (
-    <button
-      type="button"
-      key={String(i)}
-      onClick={onClick}
-      aria-label={slide?.title}
-      className={`relative overflow-hidden border-0 bg-inherit cursor-pointer pl-0 mr-1.5 pt-4 pb-5 last:mr-0 grow basis-0`}
-    >
-      <div
-        className={`absolute bottom-0 left-0 w-full h-[3px] ${progressBarClassName}`}
-        style={{ animationDuration: `${duration}s`, animationFillMode: 'forwards' }}
-      ></div>
-    </button>
+    <section className={`font-sans bg-white overflow-hidden w-100 pb-6 ${className || ''}`}>
+      <SwipeListControl context={context}>
+        {galleryBlocks.map((block, i) => (
+          <ProductGalleryBlock key={String(i)} block={block} context={context} />
+        ))}
+      </SwipeListControl>
+    </section>
   );
-}
+});