@redneckz/wildless-cms-uni-blocks 0.3.37 → 0.3.38

package/mobile/lib/ui-kit/Button/ButtonInner.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 export const ButtonInner = JSX((props) => {
     const { text, aboveText, appendLeft } = props;
-    return (_jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (_jsxs("div", { children: [_jsx("div", { className: "text-m-2xs font-light text-left", children: aboveText }), _jsx("div", { className: "text-button-sm text-left", children: text })] })) : null] }));
+    return (_jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (_jsxs("div", { children: [_jsx("div", { className: "text-m-2xs font-light text-left", children: aboveText }), _jsx("div", { className: "text-button text-left", children: text })] })) : null] }));
 });
 const getButtonStyle = (props) => {
     const { version, aboveText, rounded } = props;

package/mobile/lib/ui-kit/Button/ButtonInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonInner.js","sourceRoot":"","sources":["../../../src/ui-kit/Button/ButtonInner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAQxC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAmB,CAAC,KAAK,EAAE,EAAE;IACzD,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAC9C,OAAO,CACL,eAAK,SAAS,EAAE,cAAc,CAAC,KAAK,CAAC,aAClC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,EAC9B,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACnB,0BACE,cAAK,SAAS,EAAC,iCAAiC,YAAE,SAAS,GAAO,EAClE,cAAK,SAAS,EAAC,0BAA0B,YAAE,IAAI,GAAO,IAClD,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,CAAC,KAAuB,EAAE,EAAE;IACjD,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE9C,IAAI,OAAO,KAAK,MAAM,EAAE;QACtB,OAAO,EAAE,CAAC;KACX;IAED,MAAM,aAAa,GAAG,cAAc,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAEvE,OAAO;QACL,kCAAkC;QAClC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW;QAC/C,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KAC9B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAoB,EAAE,EAAE,CACvE,OAAO,CAAC,IAAI,IAAI,SAAS,IAAI,CAAC,UAAU,CAAC,CAAC"}
+{"version":3,"file":"ButtonInner.js","sourceRoot":"","sources":["../../../src/ui-kit/Button/ButtonInner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAQxC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAmB,CAAC,KAAK,EAAE,EAAE;IACzD,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAC9C,OAAO,CACL,eAAK,SAAS,EAAE,cAAc,CAAC,KAAK,CAAC,aAClC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,EAC9B,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACnB,0BACE,cAAK,SAAS,EAAC,iCAAiC,YAAE,SAAS,GAAO,EAClE,cAAK,SAAS,EAAC,uBAAuB,YAAE,IAAI,GAAO,IAC/C,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,CAAC,KAAuB,EAAE,EAAE;IACjD,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE9C,IAAI,OAAO,KAAK,MAAM,EAAE;QACtB,OAAO,EAAE,CAAC;KACX;IAED,MAAM,aAAa,GAAG,cAAc,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAEvE,OAAO;QACL,kCAAkC;QAClC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW;QAC/C,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KAC9B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAoB,EAAE,EAAE,CACvE,OAAO,CAAC,IAAI,IAAI,SAAS,IAAI,CAAC,UAAU,CAAC,CAAC"}

package/mobile/src/components/BlockContent.ts

@@ -3,6 +3,7 @@ import type { ComparisonTableContent } from './ComparisonTable/ComparisonTableCo
 import type { ExchangeRateTileContent } from './ExchangeRateTile/ExchangeRateTileContent';
 import type { FooterContent } from './Footer/FooterContent';
 import type { GalleryContent } from './Gallery/GalleryContent';
+import type { GracePeriodContent } from './GracePeriod/GracePeriodContent';
 import type { HeaderContent } from './Header/HeaderContent';
 import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { LinkListContent } from './LinkList/LinkListContent';
@@ -29,6 +30,7 @@ export type BlockContent =
   | ExchangeRateTileContent
   | FooterContent
   | GalleryContent
+  | GracePeriodContent
   | HeaderContent
   | LinkDocsContent
   | MobileAppTileContent

package/mobile/src/components/ContentPage/ContentPage.page.json

@@ -2025,6 +2025,100 @@
         ]
       }
     },
+    {
+      "type": "GracePeriod",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Пример использования «Карты для покупок в рассрочку»:",
+        "description": "Необязательное описание",
+        "calendar": [
+          {
+            "blackText": "1 декабря — беспроцентный период",
+            "greenText": "начинается с первого числа каждого месяца",
+            "month": [
+              {
+                "name": "Август",
+                "image": {
+                  "src": "calendar/august.png",
+                  "format": "webp",
+                  "size": {
+                    "width": 210,
+                    "height": "auto"
+                  },
+                  "alt": "Пример использования «Карты для покупок в рассрочку»"
+                }
+              }
+            ]
+          },
+          {
+            "blackText": "25 сентября и 25 октября — обязательный платеж 25 числа следующих месяцев",
+            "greenText": "(минимальный платеж, 3% от суммы задолженности)",
+            "month": [
+              {
+                "name": "Сентябрь",
+                "image": {
+                  "src": "calendar/september.png",
+                  "format": "webp",
+                  "size": {
+                    "width": 210,
+                    "height": "auto"
+                  },
+                  "alt": "Пример использования «Карты для покупок в рассрочку»"
+                }
+              },
+              {
+                "name": "Октябрь",
+                "image": {
+                  "src": "calendar/october.png",
+                  "format": "webp",
+                  "size": {
+                    "width": 210,
+                    "height": "auto"
+                  },
+                  "alt": "Пример использования «Карты для покупок в рассрочку»"
+                }
+              }
+            ]
+          },
+          {
+            "blackText": "25 ноября — последний день беспроцентного 3-х месячного периода",
+            "greenText": "",
+            "month": [
+              {
+                "name": "Ноябрь",
+                "image": {
+                  "src": "calendar/november.png",
+                  "format": "webp",
+                  "size": {
+                    "width": 210,
+                    "height": "auto"
+                  },
+                  "alt": "Пример использования «Карты для покупок в рассрочку»"
+                }
+              }
+            ]
+          },
+          {
+            "blackText": "",
+            "greenText": "25 декабря — обязательный платеж в соответствии с тарифом",
+            "month": [
+              {
+                "name": "Декабрь",
+                "image": {
+                  "src": "calendar/december.png",
+                  "format": "webp",
+                  "size": {
+                    "width": 210,
+                    "height": "auto"
+                  },
+                  "alt": "Пример использования «Карты для покупок в рассрочку»"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    },
     {
       "type": "Footer",
       "style": ["col-span-12"],

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

@@ -0,0 +1,90 @@
+{
+  "title": "Пример использования «Карты для покупок в рассрочку»:",
+  "description": "Описание",
+  "calendar": [
+    {
+      "blackText": "1 декабря — беспроцентный период",
+      "greenText": "начинается с первого числа каждого месяца",
+      "month": [
+        {
+          "name": "Август",
+          "image": {
+            "src": "calendar/august.png",
+            "format": "webp",
+            "size": {
+              "width": 210,
+              "height": "auto"
+            },
+            "alt": "Пример использования «Карты для покупок в рассрочку»"
+          }
+        }
+      ]
+    },
+    {
+      "blackText": "25 сентября и 25 октября — обязательный платеж 25 числа следующих месяцев",
+      "greenText": "(минимальный платеж, 3% от суммы задолженности)",
+      "month": [
+        {
+          "name": "Сентябрь",
+          "image": {
+            "src": "calendar/september.png",
+            "format": "webp",
+            "size": {
+              "width": 210,
+              "height": "auto"
+            },
+            "alt": "Пример использования «Карты для покупок в рассрочку»"
+          }
+        },
+        {
+          "name": "Октябрь",
+          "image": {
+            "src": "calendar/october.png",
+            "format": "webp",
+            "size": {
+              "width": 210,
+              "height": "auto"
+            },
+            "alt": "Пример использования «Карты для покупок в рассрочку»"
+          }
+        }
+      ]
+    },
+    {
+      "blackText": "25 ноября — последний день беспроцентного 3-х месячного периода",
+      "greenText": "",
+      "month": [
+        {
+          "name": "Ноябрь",
+          "image": {
+            "src": "calendar/november.png",
+            "format": "webp",
+            "size": {
+              "width": 210,
+              "height": "auto"
+            },
+            "alt": "Пример использования «Карты для покупок в рассрочку»"
+          }
+        }
+      ]
+    },
+    {
+      "blackText": "",
+      "greenText": "25 декабря — обязательный платеж в соответствии с тарифом",
+      "month": [
+        {
+          "name": "Декабрь",
+          "image": {
+            "src": "calendar/december.png",
+            "format": "webp",
+            "size": {
+              "width": 210,
+              "height": "auto"
+            },
+            "alt": "Пример использования «Карты для покупок в рассрочку»"
+          }
+        }
+      ]
+    }
+  ]
+}

package/mobile/src/components/GracePeriod/GracePeriod.tsx

@@ -0,0 +1,70 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { GracePeriodContent } from './GracePeriodContent';
+
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+
+export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
+
+export const GracePeriod = JSX<GracePeriodProps>(
+  ({ className = '', title, description, calendar, anchor = null }) => {
+    return (
+      <section className={`bg-white p-16 pt-12 ${className}`} id={anchor}>
+        <Heading headingType="h2" className="text-center" title={title} />
+        <div className="font-light text-base-md text-center mt-3">{description}</div>
+        {renderCalendar(calendar)}
+      </section>
+    );
+  },
+);
+
+const renderCalendar = (calendar) => {
+  const colCount =
+    calendar.reduce((accumulator, currentValue) => accumulator + currentValue.month.length, 0) || 1;
+  const colSize = 100 / colCount;
+
+  const mappedCalendar = calendar.map((_) => ({
+    ..._,
+    flexBasis: `${_.month.length * colSize}%`,
+  }));
+
+  return (
+    <div className="w-full flex flex-col justify-center mt-14">
+      <div className="flex w-full mb-3 font-light text-m-title-md mb-3 text-center">
+        {mappedCalendar.map((_) => renderMonthNames(_, colSize))}
+      </div>
+      <div className="flex w-full">
+        {mappedCalendar.map((_, ind) => (
+          <div
+            key={`monthItem-${ind}`}
+            className="pr-3 mr-3 border-r border-r-gray/100 last:border-r-0 last:pr-0 last:mr-0"
+            style={{ flexBasis: _.flexBasis }}
+          >
+            <div className="flex">{renderMonthImages(_)}</div>
+            <div className="font-light text-sm text-primary-text mt-3">
+              <span>{_.blackText}</span>&thinsp;
+              <span className="text-primary-main">{_.greenText}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const renderMonthNames = (item, colSize) =>
+  item.month.map((_) => (
+    <div key={`monthName-${_.name}`} style={{ flexBasis: `${colSize}%` }}>
+      {_.name}
+    </div>
+  ));
+const renderMonthImages = (item) =>
+  item.month.map((_) => (
+    <div
+      key={`monthImage-${_.image.src}`}
+      className="max-h-[207px] border-r-[1px] pr-3 mr-3 border-r-gray/100 last:border-r-0 last:pr-0 last:mr-0"
+    >
+      <Img image={_.image} className="flex" />
+    </div>
+  ));

package/mobile/src/components/GracePeriod/GracePeriodContent.ts

@@ -0,0 +1,27 @@
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { Picture } from '../../model/Picture';
+
+interface Month {
+  /** @title Название месяца */
+  name?: string;
+  /** @title Изображение календарного месяца */
+  image?: Picture;
+}
+
+interface CalendarItem {
+  month?: Month[];
+  /** @title Основной текст */
+  blackText?: string;
+  /** @title Вспомогательный текст */
+  greenText?: string;
+}
+
+/**
+ * @title Льготный период
+ */
+export interface GracePeriodContent extends HeadingContent {
+  /** @title Описание */
+  description?: string;
+  /** @title Календарь */
+  calendar?: CalendarItem[];
+}

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

@@ -4,6 +4,7 @@ import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
+import { isSSR } from '../../utils/isSSR';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { headerSubMenuObserver } from './HeaderSubMenuObserver';
 
@@ -19,6 +20,10 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems, bgCol
   const { handlerDecorator } = context;
 
   setTimeout(() => {
+    if (isSSR()) {
+      return;
+    }
+
     const headerSubMenu = globalThis.document.querySelectorAll('[data-item-name=header-submenu]');
     headerSubMenu.forEach((_) => {
       headerSubMenuObserver?.observe(_);

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

@@ -14,7 +14,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {isWithText(props) ? (
         <div>
           <div className="text-m-2xs font-light text-left">{aboveText}</div>
-          <div className="text-button-sm text-left">{text}</div>
+          <div className="text-button text-left">{text}</div>
         </div>
       ) : null}
     </div>

package/package.json

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

package/src/components/BlockContent.ts

@@ -3,6 +3,7 @@ import type { ComparisonTableContent } from './ComparisonTable/ComparisonTableCo
 import type { ExchangeRateTileContent } from './ExchangeRateTile/ExchangeRateTileContent';
 import type { FooterContent } from './Footer/FooterContent';
 import type { GalleryContent } from './Gallery/GalleryContent';
+import type { GracePeriodContent } from './GracePeriod/GracePeriodContent';
 import type { HeaderContent } from './Header/HeaderContent';
 import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { LinkListContent } from './LinkList/LinkListContent';
@@ -29,6 +30,7 @@ export type BlockContent =
   | ExchangeRateTileContent
   | FooterContent
   | GalleryContent
+  | GracePeriodContent
   | HeaderContent
   | LinkDocsContent
   | MobileAppTileContent

package/src/components/Blocks.ts

@@ -5,6 +5,7 @@ import { CreditCalculator } from './CreditCalculator/CreditCalculator';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
+import { GracePeriod } from './GracePeriod/GracePeriod';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { LinkDocs } from './LinkDocs/LinkDocs';
@@ -34,6 +35,7 @@ export const Blocks = {
   ExchangeRateTile,
   Footer,
   Gallery,
+  GracePeriod,
   Header,
   Headline,
   LinkDocs,

package/src/components/ContentPage/ContentPage.page.json

@@ -2025,6 +2025,100 @@
         ]
       }
     },
+    {
+      "type": "GracePeriod",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Пример использования «Карты для покупок в рассрочку»:",
+        "description": "Необязательное описание",
+        "calendar": [
+          {
+            "blackText": "1 декабря — беспроцентный период",
+            "greenText": "начинается с первого числа каждого месяца",
+            "month": [
+              {
+                "name": "Август",
+                "image": {
+                  "src": "calendar/august.png",
+                  "format": "webp",
+                  "size": {
+                    "width": 210,
+                    "height": "auto"
+                  },
+                  "alt": "Пример использования «Карты для покупок в рассрочку»"
+                }
+              }
+            ]
+          },
+          {
+            "blackText": "25 сентября и 25 октября — обязательный платеж 25 числа следующих месяцев",
+            "greenText": "(минимальный платеж, 3% от суммы задолженности)",
+            "month": [
+              {
+                "name": "Сентябрь",
+                "image": {
+                  "src": "calendar/september.png",
+                  "format": "webp",
+                  "size": {
+                    "width": 210,
+                    "height": "auto"
+                  },
+                  "alt": "Пример использования «Карты для покупок в рассрочку»"
+                }
+              },
+              {
+                "name": "Октябрь",
+                "image": {
+                  "src": "calendar/october.png",
+                  "format": "webp",
+                  "size": {
+                    "width": 210,
+                    "height": "auto"
+                  },
+                  "alt": "Пример использования «Карты для покупок в рассрочку»"
+                }
+              }
+            ]
+          },
+          {
+            "blackText": "25 ноября — последний день беспроцентного 3-х месячного периода",
+            "greenText": "",
+            "month": [
+              {
+                "name": "Ноябрь",
+                "image": {
+                  "src": "calendar/november.png",
+                  "format": "webp",
+                  "size": {
+                    "width": 210,
+                    "height": "auto"
+                  },
+                  "alt": "Пример использования «Карты для покупок в рассрочку»"
+                }
+              }
+            ]
+          },
+          {
+            "blackText": "",
+            "greenText": "25 декабря — обязательный платеж в соответствии с тарифом",
+            "month": [
+              {
+                "name": "Декабрь",
+                "image": {
+                  "src": "calendar/december.png",
+                  "format": "webp",
+                  "size": {
+                    "width": 210,
+                    "height": "auto"
+                  },
+                  "alt": "Пример использования «Карты для покупок в рассрочку»"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    },
     {
       "type": "Footer",
       "style": ["col-span-12"],

package/src/components/GracePeriod/GracePeriod.example.json

@@ -0,0 +1,90 @@
+{
+  "title": "Пример использования «Карты для покупок в рассрочку»:",
+  "description": "Описание",
+  "calendar": [
+    {
+      "blackText": "1 декабря — беспроцентный период",
+      "greenText": "начинается с первого числа каждого месяца",
+      "month": [
+        {
+          "name": "Август",
+          "image": {
+            "src": "calendar/august.png",
+            "format": "webp",
+            "size": {
+              "width": 210,
+              "height": "auto"
+            },
+            "alt": "Пример использования «Карты для покупок в рассрочку»"
+          }
+        }
+      ]
+    },
+    {
+      "blackText": "25 сентября и 25 октября — обязательный платеж 25 числа следующих месяцев",
+      "greenText": "(минимальный платеж, 3% от суммы задолженности)",
+      "month": [
+        {
+          "name": "Сентябрь",
+          "image": {
+            "src": "calendar/september.png",
+            "format": "webp",
+            "size": {
+              "width": 210,
+              "height": "auto"
+            },
+            "alt": "Пример использования «Карты для покупок в рассрочку»"
+          }
+        },
+        {
+          "name": "Октябрь",
+          "image": {
+            "src": "calendar/october.png",
+            "format": "webp",
+            "size": {
+              "width": 210,
+              "height": "auto"
+            },
+            "alt": "Пример использования «Карты для покупок в рассрочку»"
+          }
+        }
+      ]
+    },
+    {
+      "blackText": "25 ноября — последний день беспроцентного 3-х месячного периода",
+      "greenText": "",
+      "month": [
+        {
+          "name": "Ноябрь",
+          "image": {
+            "src": "calendar/november.png",
+            "format": "webp",
+            "size": {
+              "width": 210,
+              "height": "auto"
+            },
+            "alt": "Пример использования «Карты для покупок в рассрочку»"
+          }
+        }
+      ]
+    },
+    {
+      "blackText": "",
+      "greenText": "25 декабря — обязательный платеж в соответствии с тарифом",
+      "month": [
+        {
+          "name": "Декабрь",
+          "image": {
+            "src": "calendar/december.png",
+            "format": "webp",
+            "size": {
+              "width": 210,
+              "height": "auto"
+            },
+            "alt": "Пример использования «Карты для покупок в рассрочку»"
+          }
+        }
+      ]
+    }
+  ]
+}