@redneckz/wildless-cms-uni-blocks 0.8.16 → 0.8.18

package/src/components/ApplicationForm/ApplicationFormWed.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { PreventableEvent } from '../../model/PreventableEvent';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Input } from '../../ui-kit/Input/Input';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
@@ -46,13 +47,26 @@ export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
     text,
   } = formState;
 
-  const { handleChange, onSubmit } = useFormHandlers<WedFormState>({
-    formState,
-    handleSubmit,
+  const { handleChange } = useFormHandlers<WedFormState>({
     setFormState,
-    typeForm: 'kved',
   });
 
+  const onSubmit = async (e: PreventableEvent) => {
+    e.preventDefault();
+
+    const PartnerComments = `Валютный контроль=${currencyControl}/Документарные операции=${documentaryOperations}/Конверсионные операции=${conversionOperations}/Доп инф=${text}`;
+
+    handleSubmit &&
+      (await handleSubmit({
+        typeForm: 'kved',
+        fullName,
+        name,
+        phone,
+        mail,
+        PartnerComments,
+      }));
+  };
+
   return (
     <form onSubmit={onSubmit} className="container">
       <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />

package/src/components/ApplicationForm/ApplicationFormsProps.ts

@@ -1,8 +1,8 @@
 import type { LinkProps } from '../../model/LinkProps';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonProps } from './ApplicationFormContent';
 
 export interface ApplicationFormsProps {
   button?: ButtonProps;
   link?: LinkProps;
-  handleSubmit: (data: any) => void;
+  handleSubmit: (data: Record<string, string>) => Promise<string>;
 }

package/src/components/ApplicationForm/CreditParameters.ts

@@ -0,0 +1,7 @@
+export const MIN_CREDIT_AMOUNT = 50000;
+export const MAX_CREDIT_AMOUNT = 3000000;
+export const ITEMS_CREDIT_AMOUNT = ['От 50 000 ₽', 'До 3 000 000 ₽'];
+
+export const MIN_CREDIT_TERM = 1;
+export const MAX_CREDIT_TERM = 60;
+export const ITEMS_CREDIT_TERM = ['От 1 года', 'До 5 лет'];

package/src/components/ApplicationForm/WrapperSelect.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { OptionProps, Select } from '../../ui-kit/Select/Select';
-import { Currency } from '../ExchangeRateTile/CurrencyProps';
+import type { Currency } from '../ExchangeRateTile/CurrencyProps';
 
 interface WrapperSelectProps {
   data: Record<string, any>[];

package/src/components/ApplicationForm/acquiringTypes.ts

@@ -2,23 +2,18 @@ import { Select } from './models';
 
 export const ACQUIRING_TYPES: Select[] = [
   {
-    code: '1',
     name: 'Торговый эквайринг',
   },
   {
-    code: '2',
     name: 'Мобильный эквайринг',
   },
   {
-    code: '3',
     name: 'Интернет-эквайринг',
   },
   {
-    code: '4',
     name: 'QR-эквайринг (СБП)',
   },
   {
-    code: '5',
     name: 'Все виды эквайринга',
   },
 ];

package/src/components/ApplicationForm/renderBankOffices.tsx

@@ -22,7 +22,7 @@ export const renderBankOffices = ({
     <div className="w-1/2">
       <WrapperSelect
         data={regions}
-        fieldValue="code"
+        fieldValue="name"
         fieldLabel="name"
         selected={region}
         setSelected={(value) => handleChange({ region: value })}

package/src/components/ApplicationForm/renderCreditParameters.tsx

@@ -1,15 +1,14 @@
-import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { Text } from '../../ui-kit/Text/Text';
+import type { CreditFormState } from './ApplicationFormCredit';
 import {
-  CreditFormState,
   ITEMS_CREDIT_AMOUNT,
   ITEMS_CREDIT_TERM,
   MAX_CREDIT_AMOUNT,
   MAX_CREDIT_TERM,
   MIN_CREDIT_AMOUNT,
   MIN_CREDIT_TERM,
-} from './ApplicationFormCredit';
+} from './CreditParameters';
 import type { HandleFormStateChange } from './models';
+import { renderInputRange } from './renderInputRange';
 
 interface RenderCreditParametersProps {
   amount: number;
@@ -41,21 +40,3 @@ export const renderCreditParameters = ({
     })}
   </div>
 );
-
-interface RenderInputRangeProps {
-  label: string;
-  value: number;
-  onChange: (value: number) => void;
-  min: number;
-  max: number;
-  items: string[];
-}
-
-const renderInputRange = (props: RenderInputRangeProps) => (
-  <div className="w-1/2">
-    <label>
-      <Text size="text-m-light">{props.label}</Text>
-    </label>
-    <InputRange {...props} />
-  </div>
-);

package/src/components/ApplicationForm/renderInputRange.tsx

@@ -0,0 +1,20 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { Text } from '../../ui-kit/Text/Text';
+
+interface RenderInputRangeProps {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  min: number;
+  max: number;
+  items: string[];
+}
+
+export const renderInputRange = (props: RenderInputRangeProps) => (
+  <div className="w-1/2">
+    <label>
+      <Text size="text-m-light">{props.label}</Text>
+    </label>
+    <InputRange {...props} />
+  </div>
+);

package/src/components/ApplicationForm/renderQuestionsInterested.tsx

@@ -1,6 +1,6 @@
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
-import { WedFormState } from './ApplicationFormWed';
-import { HandleFormStateChange } from './models';
+import type { WedFormState } from './ApplicationFormWed';
+import type { HandleFormStateChange } from './models';
 
 interface RenderQuestionsInterestedProps {
   currencyControl: boolean;
@@ -37,7 +37,7 @@ export const renderQuestionsInterested = ({
     </div>
     <textarea
       placeholder="Укажите интересующий Вас вопрос, место ведения бизнеса и удобное время для телефонного звонка"
-      className="block w-full resize-y min-h-24 p-4 outline-none border rounded-md border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text"
+      className="block w-full resize-y min-h-24 p-4 outline-none border rounded-md border-main-stroke hover:border-primary-hover active:focus:border-primary-text"
       value={text}
       onChange={(e) => handleChange({ text: e.target.value })}
     />

package/src/components/ApplicationForm/renderSelects.tsx

@@ -15,7 +15,7 @@ export const renderSelects = ({ acquiringType, regions, region, handleChange }:
     <div className="w-1/2">
       <WrapperSelect
         data={ACQUIRING_TYPES}
-        fieldValue="code"
+        fieldValue="name"
         fieldLabel="name"
         selected={acquiringType}
         setSelected={(value) => handleChange({ acquiringType: value })}
@@ -26,7 +26,7 @@ export const renderSelects = ({ acquiringType, regions, region, handleChange }:
     <div className="w-1/2">
       <WrapperSelect
         data={regions}
-        fieldValue="code"
+        fieldValue="name"
         fieldLabel="name"
         selected={region}
         setSelected={(value) => handleChange({ region: value })}

package/src/components/ApplicationForm/renderSubmitButton.tsx

@@ -1,5 +1,5 @@
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
+import type { ButtonProps } from './ApplicationFormContent';
 
 export const renderSubmitButton = (button?: ButtonProps, className?: string) => {
   const buttonStyle = getRegularButtonClasses({

package/src/components/ApplicationForm/useFormHandlers.ts

@@ -3,30 +3,16 @@ import { Dispatch, SetStateAction } from 'react';
 import type { HandleFormStateChange } from './models';
 
 interface UseFormHandlersProps<T> {
-  formState: Partial<T>;
-  handleSubmit: (data: Partial<T>) => void;
   setFormState: Dispatch<SetStateAction<T>>;
-  typeForm: string;
 }
 
-export const useFormHandlers = <T>({
-  formState,
-  handleSubmit,
-  setFormState,
-  typeForm,
-}: UseFormHandlersProps<T>) => {
+export const useFormHandlers = <T>({ setFormState }: UseFormHandlersProps<T>) => {
   const handleChange: HandleFormStateChange<T> = useCallback(
     (state) => setFormState((oldState) => ({ ...oldState, ...state })),
     [],
   );
 
-  const onSubmit = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    handleSubmit && (await handleSubmit({ ...formState, typeForm }));
-  }, []);
-
   return {
     handleChange,
-    onSubmit,
   };
 };

package/src/components/Blocks.ts

@@ -13,6 +13,7 @@ import { Carousel } from './Carousel/Carousel';
 import { CarouselBankHistoryCard } from './CarouselBankHistoryCard/CarouselBankHistoryCard';
 import { CarouselCard } from './CarouselCard/CarouselCard';
 import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
+import { CarouselEventCard } from './CarouselEventCard/CarouselEventCard';
 import { CarouselInvestmentCard } from './CarouselInvestmentCard/CarouselInvestmentCard';
 import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
@@ -72,6 +73,7 @@ export const Blocks: BlocksRegistry = {
   CarouselBankHistoryCard,
   CarouselCard,
   CarouselCatalogCard,
+  CarouselEventCard,
   CarouselInvestmentCard,
   CarouselLinks,
   CarouselProductCard,

package/src/components/Carousel/Carousel.fixture.tsx

@@ -4,6 +4,7 @@ import { Blocks } from '../Blocks';
 import { BANK_HISTORY_CARD } from '../CarouselBankHistoryCard/CarouselBankHistoryCard.fixture';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
 import { CATALOG_CARD } from '../CarouselCatalogCard/CarouselCatalogCard.fixture';
+import { CAROUSEL_EVENT_CARD } from '../CarouselEventCard/CarouselEventCard.fixture';
 import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
 import { PRODUCT_CARD } from '../CarouselProductCard/CarouselProductCard.fixture';
 import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
@@ -176,6 +177,24 @@ export default {
       />
     </div>
   ),
+  events: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        isBlur={false}
+        isCyclic={false}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6).fill({
+            type: 'CarouselEventCard',
+            content: CAROUSEL_EVENT_CARD,
+            style: ['col-span-4'],
+          }),
+        }}
+        options={options}
+      />
+    </div>
+  ),
   'bank-history': (
     <div className="container grid grid-cols-12">
       <Carousel

package/src/components/Carousel/Carousel.tsx

@@ -91,6 +91,7 @@ Carousel.childrenTypes = [
   'CarouselRecommendationCard',
   'CarouselTariffsCard',
   'CarouselInvestmentCard',
+  'CarouselEventCard',
 ];
 
 const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-12' : '');

package/src/components/CarouselCard/CarouselCard.fixture.tsx

@@ -27,7 +27,7 @@ export const CARD_MINI: CarouselCardContent = {
   title: 'Хочешь попасть на практику в РСХБ?',
   description: 'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты.',
   button,
-  carouselVersion: 'mini',
+  carouselVersion: 'small',
 };
 
 export default {

package/src/components/CarouselCard/CarouselCard.tsx

@@ -1,17 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Headline } from '../Headline/Headline';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { CarouselCardContent } from './CarouselCardContent';
+import type { SizeVersion } from '../../model/SizeVersion';
 
 export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 
 const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
 
-const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
+const CARD_WIDTH_MAP: Record<SizeVersion, string> = {
   normal: 'min-w-[970px]',
-  mini: 'min-w-[355px]',
+  small: 'min-w-[355px]',
 };
 
 export const CarouselCard = JSX<CarouselCardProps>(

package/src/components/CarouselCard/CarouselCardContent.ts

@@ -1,4 +1,4 @@
-import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
+import type { SizeVersion } from '../../model/SizeVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
@@ -14,5 +14,5 @@ export interface CarouselCardContent extends HeadlineCommonProps {
    * }
    */
   button?: ButtonWithIconProps;
-  carouselVersion?: CarouselCardVersion;
+  carouselVersion?: SizeVersion;
 }

package/src/components/CarouselCard/constants.ts

@@ -1,11 +1,11 @@
-import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
+import type { SizeVersion } from '../../model/SizeVersion';
 
-export const cardStyleMap: Record<CarouselCardVersion, string> = {
+export const cardStyleMap: Record<SizeVersion, string> = {
   normal: 'min-w-[100%] justify-center items-center m-7 col-span-12',
-  mini: 'min-w-auto justify-center items-center m-9 col-span-4',
+  small: 'min-w-auto justify-center items-center m-9 col-span-4',
 };
 
-export const cardWidthMap: Record<CarouselCardVersion, string> = {
+export const cardWidthMap: Record<SizeVersion, string> = {
   normal: 'w-[1007px]',
-  mini: 'w-[350px]',
+  small: 'w-[350px]',
 };

package/src/components/CarouselEventCard/CarouselEventCard.example.json

@@ -0,0 +1,14 @@
+{
+  "icon": {
+    "icon": "SignDocsIcon",
+    "format": "webp",
+    "size": {
+      "width": 365,
+      "height": 195
+    }
+  },
+  "title": "Заголовок",
+  "description": "Описание",
+  "target": null,
+  "href": null
+}

package/src/components/CarouselEventCard/CarouselEventCard.fixture.tsx

@@ -0,0 +1,21 @@
+import { CarouselEventCard } from './CarouselEventCard';
+import type { Picture } from '../../model/Picture';
+import type { CarouselEventCardContent } from './CarouselEventCardContent';
+
+const image: Picture = {
+  src: 'event.png',
+  format: 'webp',
+  title: 'business',
+};
+
+export const CAROUSEL_EVENT_CARD: CarouselEventCardContent = {
+  title: 'ПЕРСОНАЛ В АПК',
+  description: '22-23 ноября 2022',
+  icon: image,
+};
+
+const CAROUSEL_EVENT = <CarouselEventCard {...CAROUSEL_EVENT_CARD} />;
+
+export default {
+  default: <div className="container grid grid-cols-12">{CAROUSEL_EVENT}</div>,
+};

package/src/components/CarouselEventCard/CarouselEventCard.tsx

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { style } from '../../utils/style';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { CarouselEventCardContent } from './CarouselEventCardContent';
+
+export interface CarouselEventCardProps extends CarouselEventCardContent, UniBlockProps {}
+
+export const CarouselEventCard = JSX<CarouselEventCardProps>(
+  ({ className = '', icon, title, description, href, target, ...rest }) => (
+    <BlockWrapper className={style('flex flex-col w-[365px]', className)} {...rest}>
+      <a href={href} target={target} role="link">
+        {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+        {icon?.src ? <Img image={icon} /> : null}
+        {title ? (
+          <Heading headingType="h6" as="h4" className="text-left mb-2" title={title} />
+        ) : null}
+        {description ? (
+          <div className="mb-4">
+            <Text font="font-light" size="text-s" color="text-secondary-text">
+              {description}
+            </Text>
+          </div>
+        ) : null}
+      </a>
+    </BlockWrapper>
+  ),
+);

package/src/components/CarouselEventCard/CarouselEventCard.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/CarouselEventCard/CarouselEventCardContent.ts

@@ -0,0 +1,12 @@
+import type { DescriptionProps, TitleProps } from '../../model/HeadlineType';
+import type { LinkCommonProps } from '../../model/LinkProps';
+import type { Picture } from '../../model/Picture';
+
+/**
+ * @title Карточка мероприятия в карусели
+ */
+export type CarouselEventCardContent = TitleProps &
+  DescriptionProps &
+  LinkCommonProps & {
+    icon?: Picture;
+  };

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -1,22 +1,22 @@
 {
   "content": {
-   "image": {
-    "format": "webp",
-    "size": {
-      "width": 180,
-      "height": 180
-    }
-  },
-  "title": "Заголовок 1",
-  "description": "Описание 1",
-  "socialMedia": [
-    {
-      "href": "https://t.me",
-      "target": "_blank",
-      "version": "gray",
-      "rounded": false
-    }
-  ],
-  "version": "primary"
+    "image": {
+      "format": "webp",
+      "size": {
+        "width": 180,
+        "height": 180
+      }
+    },
+    "title": "Заголовок 1",
+    "description": "Описание 1",
+    "socialMedia": [
+      {
+        "href": "https://t.me",
+        "target": "_blank",
+        "version": "gray",
+        "rounded": false
+      }
+    ],
+    "version": "primary"
   }
 }

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx

@@ -1,8 +1,10 @@
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard';
-import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
+import type {
+  CarouselRecommendationCardContent,
+  RecommendationSocialMedia,
+} from './CarouselRecommendationCardContent';
 
 const image: Picture = {
   src: 'product-basket.png',
@@ -14,7 +16,7 @@ const image: Picture = {
   title: 'product-basket',
 };
 
-const socialMedia: ButtonWithIconProps[] = [
+const socialMedia: RecommendationSocialMedia[] = [
   {
     href: 'https://t.me',
     target: '_blank',
@@ -32,6 +34,9 @@ const socialMedia: ButtonWithIconProps[] = [
     target: '_blank',
     version: 'gray',
     rounded: false,
+    icon: {
+      icon: 'OkIcon',
+    },
   },
 ];
 

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -1,20 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
+import { style } from '../../utils/style';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { SocialMedia } from '../Footer/SocialMedia';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
-import { style } from '../../utils/style';
 
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 
 export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
   ({
-    button,
     className = '',
     description,
     image,
@@ -57,7 +55,6 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
               />
             ) : null}
             {socialMedia.length ? <SocialMedia className="pt-10 pb-0" media={socialMedia} /> : null}
-            {renderButtonsSection([button], { className: 'pt-2 mt-16' })}
           </div>
         </BaseTile>
       </BlockWrapper>

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.ui.json

@@ -2,14 +2,11 @@
   "content": {
     "image": {
       "ui:field": "picture"
-    }, 
+    },
     "socialMedia": {
       "items": {
         "icon": {
           "ui:field": "icon"
-        },
-        "iconRight": {
-          "ui:field": "icon"
         }
       }
     }

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -1,9 +1,16 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { LinkCommonProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
-import type { ButtonWithIconProps, ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
+export type RecommendationSocialMedia = LinkCommonProps & {
+  version: ButtonVersion;
+  icon?: Picture;
+  rounded?: boolean;
+};
+
 /**
  * @title Карточка рекомендаций
  */
@@ -11,7 +18,7 @@ export interface CarouselRecommendationCardContent extends HeadlineCommonProps,
   /**
    * @title Соц сети
    */
-  socialMedia?: ButtonWithIconProps[];
+  socialMedia?: RecommendationSocialMedia[];
   /**
    * @default {
    *   "format": "webp",
@@ -27,12 +34,5 @@ export interface CarouselRecommendationCardContent extends HeadlineCommonProps,
    * }
    */
   image?: Picture;
-  /**
-   * @default {
-   * "text": "",
-   * "version": "secondary"
-   * }
-   */
-  button?: ButtonProps;
   version?: BlockVersion;
 }