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

package/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, servicesList, 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}
+        {servicesList?.length ? servicesList.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/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 Список услуг */
+  servicesList?: OfficeServicesBlockList[];
+}

package/src/components/PictureText/PictureText.fixture.tsx

@@ -55,11 +55,11 @@ export const INSURANCE_TEXT: PictureTextContent = {
   benefits: [
     {
       label: 'Телесное повреждение',
-      description: 'Описание',
       icon: { icon: 'ShieldTickIcon' },
     },
     {
       label: 'Госпитализация застрахованного',
+      description: 'Описание',
       icon: { icon: 'ShieldTickIcon' },
     },
     {

package/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/src/components/Recommendation/RecommendationCard.tsx

@@ -33,22 +33,24 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
           title={tileTitle}
           image={tileImage}
         >
-          {description ? <Description className="mb-2" description={description} /> : null}
-          {items?.length ? (
-            <List
-              className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
-              items={items}
-              version={version}
-            />
-          ) : null}
-          {socialMedia ? (
-            <SocialMedia
-              className="pt-[42px] pb-0"
-              media={socialMedia}
-              version={version}
-              context={context}
-            />
-          ) : null}
+          <div className="h-full flex flex-col justify-between">
+            {description ? <Description className="mb-2" description={description} /> : null}
+            {items?.length ? (
+              <List
+                className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
+                items={items}
+                version={version}
+              />
+            ) : null}
+            {socialMedia ? (
+              <SocialMedia
+                className="pt-10 pb-0"
+                media={socialMedia}
+                version={version}
+                context={context}
+              />
+            ) : null}
+          </div>
         </BaseTile>
       </section>
     );

package/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/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/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/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>
+    );
+  },
+);

package/src/components/SafeDepositRental/SafeDepositRental.fixture.tsx

@@ -1,5 +1,6 @@
 import { context } from '../../react/setup-fixture';
 import { SafeDepositRental } from './SafeDepositRental';
+
 export default {
   default: (
     <div className="container grid grid-cols-12 mb-1">

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -1,93 +1,23 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type { SafeDepositRentalContent } from './SafeDepositRentalContent';
 import { SafeDepositRentalForm } from './SafeDepositRentalForm';
-import { SafeDepositRentalTotal } from './SafeDepositRentalTotal';
+import { useGetRegions } from './useGetRegions';
 
 export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlockProps {}
 
-const DEFAULT_DAYS = 26;
-
-const DATA = {
-  cities: [
-    {
-      city: 'Москва',
-      offices: [
-        {
-          office: 'выберите отделение',
-          rate: null,
-        },
-        {
-          office: 'МоскваОфис1',
-          rate: 1,
-        },
-        {
-          office: 'МоскваОфис2',
-          rate: 2,
-        },
-        {
-          office: 'МоскваОфис3',
-          rate: 3,
-        },
-      ],
-    },
-    {
-      city: 'Краснодар',
-      offices: [
-        {
-          office: 'КраснодарОфис1',
-          rate: 2,
-        },
-        {
-          office: 'КраснодарОфис2',
-          rate: 4,
-        },
-        {
-          office: 'КраснодарОфис3',
-          rate: 6,
-        },
-      ],
-    },
-  ],
-  cellDimensions: [
-    {
-      dimension: 'маленькая',
-    },
-    {
-      dimension: 'средняя',
-    },
-    {
-      dimension: 'большая',
-    },
-  ],
-  cellOptions: [
-    {
-      option: '125x225x375',
-    },
-    {
-      option: '200x300x400',
-    },
-    {
-      option: '300x400x500',
-    },
-  ],
-};
-
 export const SafeDepositRental = JSX<SafeDepositRentalProps>(
-  ({ context, className = '', ...rest }) => {
-    const [days, setDays] = useState(DEFAULT_DAYS);
-    const data = DATA;
+  ({ title, context, className = '', ...rest }) => {
+    const regions = useGetRegions();
 
     return (
       <BlockWrapper context={context} className={`bg-white px-8 py-12 ${className}`} {...rest}>
-        <div className="flex justify-between align-top mb-6">
-          {data?.cities?.length ? (
-            <SafeDepositRentalForm {...data} days={days} setDays={setDays} />
-          ) : null}
-          <SafeDepositRentalTotal days={days} />
-        </div>
+        {title ? (
+          <Heading title={title} headingType="h3" as="h2" className="mb-2.5 text-center" />
+        ) : null}
+        <SafeDepositRentalForm regions={regions} />
         <p className="text-s-light text-secondary-text">
           Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег
           или процедуры ипотечной сделки

package/src/components/SafeDepositRental/SafeDepositRentalContent.ts

@@ -1,3 +1,24 @@
+export interface Tariff {
+  tariffType?: string;
+  tariffValue?: number;
+}
+
+export interface SafeBoxCase {
+  safeBoxCasesSize?: string;
+  tariffs?: Tariff[];
+}
+
+export interface SafeBoxCaseVolume {
+  volume?: string;
+  safeBoxCases?: SafeBoxCase[];
+}
+
+export interface Branch {
+  branchCode?: string;
+  address?: string;
+  safeBoxCaseVolumes?: SafeBoxCaseVolume[];
+}
+
 /**
  * @title Аренда сейфовых ячеек
  */