@redneckz/wildless-cms-uni-blocks 0.4.0 → 0.4.2

package/mobile/src/ProjectSettings.ts

@@ -3,10 +3,9 @@ export interface ProjectSettings {
   RC_BRANCH?: string;
   PROD_BRANCH: string;
   FORCED_DRAFT_FLOW: boolean;
-  ENABLE_ASSIST?: boolean;
+  ASSIST_PROJECT_ID?: string;
   SITEMAP?: string;
   CDN?: string; // Should ends with "/"
-  CREDIT_CALCULATOR?: string;
 }
 
 export const projectSettings = new (class implements ProjectSettings {
@@ -31,8 +30,8 @@ export const projectSettings = new (class implements ProjectSettings {
   get FORCED_DRAFT_FLOW() {
     return this._.FORCED_DRAFT_FLOW;
   }
-  get ENABLE_ASSIST() {
-    return this._.ENABLE_ASSIST;
+  get ASSIST_PROJECT_ID() {
+    return this._.ASSIST_PROJECT_ID;
   }
   get SITEMAP() {
     return this._.SITEMAP;

package/mobile/src/api/LikeAPI.ts

@@ -1,3 +1,5 @@
+import { projectSettings } from '../ProjectSettings';
+
 interface UserData {
   token: string;
   name: string;
@@ -11,7 +13,7 @@ const AUTH_PREFIX = 'guest';
 const STORAGE_KEY = 'likesToken';
 
 // eslint-disable-next-line max-lines-per-function
-export function LikeAPI(projectId: string, baseURL = '') {
+export function LikeAPI() {
   async function getLikeCount(...nodeIds: string[]): Promise<LikeData[]> {
     if (!nodeIds.length) {
       return [];
@@ -21,7 +23,7 @@ export function LikeAPI(projectId: string, baseURL = '') {
 
     try {
       const response = await fetch(
-        `${baseURL}/assist/v1/public/projects/${projectId}/nodes/likes`,
+        `/assist/v1/public/projects/${projectSettings.ASSIST_PROJECT_ID}/nodes/likes`,
         {
           method: 'POST',
           mode: 'cors',
@@ -50,19 +52,22 @@ export function LikeAPI(projectId: string, baseURL = '') {
     const { token: Authorization, name } = await auth();
 
     try {
-      const response = await fetch(`${baseURL}/assist/v1/public/projects/${projectId}/nodes/like`, {
-        method: 'POST',
-        mode: 'cors',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization,
-          UserID: name,
+      const response = await fetch(
+        `/assist/v1/public/projects/${projectSettings.ASSIST_PROJECT_ID}/nodes/like`,
+        {
+          method: 'POST',
+          mode: 'cors',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization,
+            UserID: name,
+          },
+          body: JSON.stringify({
+            node_id: nodeId,
+            user_name: name,
+          }),
         },
-        body: JSON.stringify({
-          node_id: nodeId,
-          user_name: name,
-        }),
-      });
+      );
       const { likes } = await response.json();
 
       return likes || 0;
@@ -82,7 +87,7 @@ export function LikeAPI(projectId: string, baseURL = '') {
 
     try {
       const response = await fetch(
-        `${baseURL}/assist/v1/public/projects/${projectId}/nodes/unlike`,
+        `/assist/v1/public/projects/${projectSettings.ASSIST_PROJECT_ID}/nodes/unlike`,
         {
           method: 'POST',
           mode: 'cors',
@@ -118,7 +123,7 @@ export function LikeAPI(projectId: string, baseURL = '') {
     }
 
     try {
-      const response = await fetch(`${baseURL}/assist/v1/public/auth`, {
+      const response = await fetch(`/assist/v1/public/auth`, {
         method: 'POST',
         mode: 'cors',
         headers: {

package/mobile/src/components/BaseTile/BaseTile.tsx

@@ -10,9 +10,9 @@ export const BaseTile = JSX<BaseTileProps>(
       <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
         {title}
         <div className="flex grow w-full justify-between">
-          <div className="flex flex-col justify-between w-full">
+          <div className="flex flex-col w-full">
             <div>{children}</div>
-            {buttons ? <div>{buttons}</div> : null}
+            {buttons ? <div className="mt-9">{buttons}</div> : null}
           </div>
           {image}
         </div>

package/mobile/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -4,7 +4,7 @@ import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { BenefitItemProps, BenefitsBlockContent } from './BenefitsBlockContent';
-import { DescriptionType, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
+import { DescriptionDef, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
@@ -53,7 +53,7 @@ const renderStep = (benefit: BenefitItemProps, i: number) => {
   );
 };
 
-const renderDescription = (description?: DescriptionType) => {
+const renderDescription = (description?: DescriptionDef) => {
   const benefitType = description ? description?.benefitType : null;
   if (!benefitType) {
     return null;

package/mobile/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -32,7 +32,7 @@ export type ListBenefitDef = {
 /**
  * @title Вид контента
  */
-export type DescriptionType = EmptyOption | TextBenefitDef | ListBenefitDef;
+export type DescriptionDef = EmptyOption | TextBenefitDef | ListBenefitDef;
 
 /**
  * @title Преимущество
@@ -41,7 +41,7 @@ export interface BenefitItemProps {
   /** @title Название */
   label?: string;
   /** @title Описание */
-  description?: DescriptionType;
+  description?: DescriptionDef;
   icon?: Picture;
 }
 

package/mobile/src/components/BlockContent.ts

@@ -8,7 +8,6 @@ import type { GalleryContent } from './Gallery/GalleryContent';
 import type { GracePeriodContent } from './GracePeriod/GracePeriodContent';
 import type { GroupBlockContent } from './GroupBlock/GroupBlockContent';
 import type { HeaderContent } from './Header/HeaderContent';
-import type { InsuranceContent } from './Insurance/InsuranceContent';
 import type { InsuranceAmountBlockContent } from './InsuranceAmountBlock/InsuranceAmountBlockContent';
 import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { LinkListContent } from './LinkList/LinkListContent';
@@ -57,5 +56,4 @@ export type BlockContent =
   | LinkListContent
   | GroupBlockContent
   | BonusBenefitsBlockContent
-  | InsuranceContent
   | SafeDepositRentalContent;

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

@@ -1947,12 +1947,51 @@
           "alt": "Варианты потребительского кредита",
           "format": "webp",
           "size": {
-            "width": 200,
-            "height": 200
+            "width": 400,
+            "height": 300
           }
         }
       }
     },
+    {
+      "type": "PictureText",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Страховые риски и продукты",
+        "description": "Описание",
+        "sum": 500000,
+        "image": {
+          "src": "insurance.png",
+          "title": "страхование",
+          "format": "webp",
+          "alt": "Страховые риски и продукты",
+          "size": {
+            "width": 400,
+            "height": 300
+          },
+          "sources": [
+            {
+              "src": "insurance.png 1x, insurance-2x.png 2x",
+              "format": "png"
+            }
+          ]
+        },
+        "benefits": [
+          {
+            "label": "Ликвидация организации",
+            "icon": {
+              "icon": "ShieldTickIcon"
+            }
+          },
+          {
+            "label": "Сокращение численности работников организации",
+            "icon": {
+              "icon": "ShieldTickIcon"
+            }
+          }
+        ]
+      }
+    },
     {
       "type": "Recommendation",
       "style": ["col-span-12"],
@@ -2144,45 +2183,6 @@
         ]
       }
     },
-    {
-      "type": "Insurance",
-      "style": ["col-span-12"],
-      "content": {
-        "title": "Страховые риски и продукты",
-        "description": "Описание",
-        "sum": 500000,
-        "image": {
-          "src": "insurance.png",
-          "title": "страхование",
-          "format": "webp",
-          "alt": "Страховые риски и продукты",
-          "size": {
-            "width": 400,
-            "height": 300
-          },
-          "sources": [
-            {
-              "src": "insurance.png 1x, insurance-2x.png 2x",
-              "format": "png"
-            }
-          ]
-        },
-        "benefits": [
-          {
-            "label": "Ликвидация организации",
-            "icon": {
-              "icon": "ShieldTickIcon"
-            }
-          },
-          {
-            "label": "Сокращение численности работников организации",
-            "icon": {
-              "icon": "ShieldTickIcon"
-            }
-          }
-        ]
-      }
-    },
     {
       "type": "InsuranceAmountBlock",
       "style": ["col-span-12"],

package/mobile/src/components/Footer/MediaButton.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../../ui-kit/Img/Img';
 

package/mobile/src/components/Footer/SocialMedia.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
 import { MediaButton } from './MediaButton';

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { ListOrientation } from '../../model/ListOrientation';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';

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

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { GalleryVersion } from '../../model/GalleryVersion';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { cardStyleMap, cardVersionMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
 import { GalleryCardInner } from './GalleryCardInner';

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

@@ -4,7 +4,8 @@
   "image": {
     "format": "webp",
     "size": {
-      "width": 300
+      "width": 400,
+      "height": 300
     }
   },
   "version": "primary",
@@ -13,14 +14,16 @@
     {
       "label": "Преимущество №1",
       "icon": {
-        "icon": "DocumentTextIcon"
+        "icon": "ShieldTickIcon"
       }
     },
     {
       "label": "Преимущество №2",
       "icon": {
-        "icon": "DocumentTextIcon"
+        "icon": "ShieldTickIcon"
       }
     }
-  ]
+  ],
+  "sum": 500000,
+  "monthLimit": 25000
 }

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

@@ -1,11 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { PictureTextBenefit, PictureTextContent } from './PictureTextContent';
-
-import { BlockVersion } from '../../model/BlockVersion';
+import type { PictureTextContent } from './PictureTextContent';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
+import { Headline } from '../Headline/Headline';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
@@ -17,56 +19,75 @@ const pictureTextStyleMap: Record<BlockVersion, string> = {
 export const PictureText = JSX<PictureTextProps>(
   ({
     className = '',
+    context,
     title,
+    description,
     image,
     benefits,
     version = 'primary',
+    sum,
+    monthLimit,
     directionRight = false,
     ...rest
   }) => {
     return (
       <BlockWrapper
         className={`relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`}
+        context={context}
         {...rest}
       >
-        <Heading headingType="h2" className="text-center" title={title} />
-        <div className={'flex justify-center mt-9'}>
+        <Headline
+          context={context}
+          className="!p-0"
+          title={title}
+          description={description}
+          headlineVersion="M"
+          bgColorHeadline={version}
+          align="center"
+        />
+        <div className={'flex justify-center gap-[122px] mt-[30px]'}>
           {image?.src && <Img className={directionRight ? 'order-2 ml-6' : 'mr-6'} image={image} />}
-          {benefits?.length ? (
-            <div className="flex flex-col">
-              {benefits.map((_, i) => renderBenefit(_, i, version))}
-            </div>
-          ) : null}
+          <div className="w-[558px] m-auto">
+            {benefits?.length ? (
+              <div className="flex flex-col gap-4">{benefits.map(renderBenefit(version))}</div>
+            ) : null}
+            {renderInsuranceSumMonth(sum, monthLimit)}
+          </div>
         </div>
       </BlockWrapper>
     );
   },
 );
 
-function renderBenefit(benefit: PictureTextBenefit, i: number, version: string) {
+const renderBenefit = (version: BlockVersion) => (benefit: BenefitItemProps, i: number) =>
+  (
+    <BenefitItem
+      key={String(i)}
+      icon={benefit.icon}
+      label={benefit.label}
+      description={benefit.description}
+      version={version}
+    />
+  );
+
+function renderInsuranceSumMonth(sum?: number, monthLimit?: number) {
+  return sum || monthLimit ? (
+    <div className="bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4">
+      {Number.isFinite(sum) ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
+      {Number.isFinite(monthLimit)
+        ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
+        : null}
+    </div>
+  ) : null;
+}
+
+function renderValueBlock(title: string, sum = 0, isAnotherBlock = false) {
+  const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
+
   return (
-    <div key={String(i)} className="flex flex-row mb-8">
-      {benefit.icon ? (
-        <Img
-          className="w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]"
-          image={benefit.icon}
-          width="48"
-          height="48"
-          asSVG
-        />
-      ) : null}
-      <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
-        {benefit?.label ? (
-          <div className={`text-xl m-0 ${version === 'primary' ? 'text-primary-text' : ''}`}>
-            {benefit.label}
-          </div>
-        ) : null}
-        {benefit?.description ? (
-          <div className={`text-s ${version === 'primary' ? 'text-secondary-text' : ''}`}>
-            {benefit.description}
-          </div>
-        ) : null}
-      </div>
+    <div className={`flex justify-between items-center gap-2 w-full ${widthStyle}`}>
+      <span className="text-secondary-text text-l-light">{title}</span>
+      <span className="text-primary-main text-h6">{addSpacesBetweenNumbers(sum)} ₽</span>
     </div>
   );
 }

package/mobile/src/components/PictureText/PictureTextContent.ts

@@ -1,29 +1,20 @@
-import { BlockVersion } from '../../model/BlockVersion';
-import type { TitleProp } from '../../model/HeadlineType';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { Picture } from '../../model/Picture';
+import type { BenefitsProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
-export type TitleWithImageContent = TitleProp & ImageContent;
-
-export interface PictureTextBenefit {
-  /** @title Иконка */
-  icon?: Picture;
-  /** @title Название */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-}
+export type TitleWithImageContent = HeadlineCommonProps & ImageContent;
 
 /**
  * @title Картинка с текстом
  */
-export interface PictureTextContent extends TitleWithImageContent {
-  version?: BlockVersion;
-  /** @title Список преимуществ */
-  benefits?: PictureTextBenefit[];
+export interface PictureTextContent extends BenefitsProps, TitleWithImageContent {
   /**
    * @title Картинка справа/текст слева
    * @default false
    */
   directionRight?: boolean;
+  /** @title Ежемесячный лимит */
+  monthLimit?: number;
+  /** @title Страховая сумма */
+  sum?: number;
 }

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -4,33 +4,19 @@ import type { LinkProps } from '../../model/LinkProps';
 import type { ButtonContent, BackwardButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { Picture } from '../../model/Picture';
 import type { HeadlineProps } from '../../model/HeadlineType';
-
-export interface ProductBlockBenefit {
-  icon?: Picture;
-  /** @title Название */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-}
-
-export type BenefitItemProps = {
-  benefit: ProductBlockBenefit;
-  version?: BlockVersion;
-  benefitsVersion?: IconVersion;
-};
+import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 
 export type ProductBlockInnerContent = HeadlineProps &
   ListContent &
   ButtonContent &
   ImageContent & {
     /**
-     * @title Преимущества
+     * @title Список преимуществ
      * @minItems 2
      * @maxItems 3
      */
-    benefits?: ProductBlockBenefit[];
+    benefits?: BenefitItemProps[];
     benefitsVersion?: IconVersion;
     version?: BlockVersion;
     /**

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

@@ -52,11 +52,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             }
           >
             {benefits?.filter((_) => _.label)?.length ? (
-              <div className="mt-3">
-                {benefits.map((benefit, i) =>
-                  renderBenefit({ benefit, version, benefitsVersion }, i),
-                )}
-              </div>
+              <div className="mt-3">{benefits.map(renderBenefit(version, benefitsVersion))}</div>
             ) : null}
             {items?.length ? (
               <List className="mt-3 text-m" items={items} version={version} isDotted={isDotted} />

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

@@ -1,44 +1,19 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import { Img } from '../../ui-kit/Img/Img';
-import type { BenefitItemProps } from './ProductBlockContent';
+import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import type { IconVersion } from '../../model/IconVersion';
+import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
 
-const benefitTitleStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-primary-text',
-  secondary: 'text-white',
-};
-const benefitDescStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white',
-};
-
-export function renderBenefit({ benefit, version = 'primary' }: BenefitItemProps, i: number) {
-  const isIconWhite = version === 'secondary';
-
-  return (
-    <div key={String(i)} className="flex gap-3 items-center mb-2.5 last:mb-0">
-      {benefit.icon ? (
-        <Img
-          className={renderBenefitIconBgStyle(version)}
-          image={{ ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
-          width="24"
-          height="24"
-          asSVG
-        />
-      ) : null}
-      <div className={`text-l m-0 ${benefitTitleStyleMap[version]}`}>{benefit.label}</div>
-      {benefit.description && (
-        <div className={`text-s ${benefitDescStyleMap[version]}`}>{benefit.description}</div>
-      )}
-    </div>
-  );
-}
-
-function renderBenefitIconBgStyle(version) {
-  let bgColorStyle = 'text-primary-main';
-
-  if (version === 'secondary') {
-    bgColorStyle = 'text-black';
-  }
-
-  return `w-6 h-6 rounded-full box-border ${bgColorStyle}`;
-}
+export const renderBenefit =
+  (version: BlockVersion = 'primary', benefitsVersion: IconVersion = 'normal') =>
+  ({ icon, label, description }: BenefitItemProps, i: number) => {
+    return (
+      <BenefitItem
+        key={String(i)}
+        icon={icon}
+        label={label}
+        description={description}
+        version={version}
+        benefitsVersion={benefitsVersion}
+      />
+    );
+  };

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -6,8 +6,8 @@ import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
-import type { ProductTileContent, TextBenefit } from './ProductTileContent';
 import { Headline } from '../Headline/Headline';
+import type { ProductTileContent, TextBenefit } from './ProductTileContent';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
@@ -42,6 +42,7 @@ export const ProductTile = JSX<ProductTileProps>(
           <Headline
             context={context}
             className="!p-0"
+            as="h2"
             title={title}
             description={description}
             headlineVersion={headlineVersion}
@@ -68,7 +69,7 @@ export const ProductTile = JSX<ProductTileProps>(
 
 function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
   return (
-    <div className="flex mt-4">
+    <div className="flex mt-3.5">
       {benefits.length ? (
         <div className="mr-6 gap-2.5 text-h6">{benefits.map(renderBenefitLabel)}</div>
       ) : null}