@redneckz/wildless-cms-uni-blocks 0.7.9 → 0.8.1

package/src/components/ApplicationForm/WrapperSelect.tsx

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { OptionProps, Select } from '../../ui-kit/Select/Select';
+import { Currency } from '../ExchangeRateTile/CurrencyProps';
+
+interface WrapperSelectProps {
+  data: Record<string, any>[];
+  fieldLabel: string;
+  fieldValue?: string;
+  selected: string;
+  setSelected: (value: string) => void;
+  label: string;
+  placeholder?: string;
+}
+
+export const WrapperSelect = JSX<WrapperSelectProps>(
+  ({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
+    const dataFormat: OptionProps[] = data
+      .filter(Boolean)
+      .map((_) => ({ key: _?.[fieldValue || fieldLabel], text: _?.[fieldLabel] }));
+    const selectedObj = dataFormat.find((_) => _.key === selected);
+
+    return (
+      <Select
+        options={dataFormat}
+        label={label}
+        placeholder={placeholder || selected}
+        onChange={(_) => setSelected(_.key as Currency)}
+        value={selectedObj}
+      />
+    );
+  },
+);

package/src/components/ApplicationForm/acquiringTypes.ts

@@ -0,0 +1,24 @@
+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/models.ts

@@ -0,0 +1,7 @@
+export interface Select {
+  id?: number;
+  code?: string;
+  name?: string;
+}
+
+export type HandleFormStateChange<T> = (state: Partial<T>) => void;

package/src/components/ApplicationForm/normalizeSelectedRegion.ts

@@ -0,0 +1,4 @@
+import { Region } from '../../hooks/useRegions';
+
+export const normalizeSelectedRegion = (selectedRegion: string, regions?: Region[]) =>
+  !selectedRegion && regions?.length && regions[0]?.code ? regions[0].code : selectedRegion;

package/src/components/ApplicationForm/renderBankOffices.tsx

@@ -0,0 +1,45 @@
+import { Branch } from '../../hooks/useSafeBoxes';
+import type { CreditFormState } from './ApplicationFormCredit';
+import type { HandleFormStateChange, Select } from './models';
+import { WrapperSelect } from './WrapperSelect';
+
+interface RenderBankOfficesProps {
+  regions: Select[];
+  region: string;
+  branches: Branch[];
+  department: string;
+  handleChange: HandleFormStateChange<CreditFormState>;
+}
+
+export const renderBankOffices = ({
+  regions,
+  region,
+  branches,
+  department,
+  handleChange,
+}: RenderBankOfficesProps) => (
+  <div className="flex justify-between gap-5 mb-7">
+    <div className="w-1/2">
+      <WrapperSelect
+        data={regions}
+        fieldValue="code"
+        fieldLabel="name"
+        selected={region}
+        setSelected={(value) => handleChange({ region: value })}
+        label="Регион"
+        placeholder="Выберите регион"
+      />
+    </div>
+    <div className="w-1/2">
+      <WrapperSelect
+        data={branches}
+        fieldValue="branchCode"
+        fieldLabel="address"
+        selected={department}
+        setSelected={(value) => handleChange({ department: value })}
+        label="Адрес"
+        placeholder="Выберите адрес"
+      />
+    </div>
+  </div>
+);

package/src/components/ApplicationForm/renderContacts.tsx

@@ -0,0 +1,22 @@
+import { Img } from '../../ui-kit/Img/Img';
+
+export const renderContacts = () => (
+  <div className="flex">
+    <a
+      className="flex items-center text-primary-text no-underline mr-6"
+      href={`tel:8 (800) 200-78-70`}
+      aria-label="8 (800) 200-78-70"
+    >
+      <Img image={{ icon: 'PhoneIcon' }} width="24" height="24" className="mr-3" />
+      <span>8 (800) 200-78-70</span>
+    </a>
+    <a
+      className="flex items-center text-primary-text no-underline"
+      aria-label="ved@rshb.ru"
+      href={`mailto:ved@rshb.ru`}
+    >
+      <Img image={{ icon: 'MailIcon' }} width="24" height="24" className="mr-3" />
+      <span>ved@rshb.ru</span>
+    </a>
+  </div>
+);

package/src/components/ApplicationForm/renderCreditParameters.tsx

@@ -0,0 +1,61 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { Text } from '../../ui-kit/Text/Text';
+import {
+  CreditFormState,
+  ITEMS_CREDIT_AMOUNT,
+  ITEMS_CREDIT_TERM,
+  MAX_CREDIT_AMOUNT,
+  MAX_CREDIT_TERM,
+  MIN_CREDIT_AMOUNT,
+  MIN_CREDIT_TERM,
+} from './ApplicationFormCredit';
+import type { HandleFormStateChange } from './models';
+
+interface RenderCreditParametersProps {
+  amount: number;
+  term: number;
+  handleChange: HandleFormStateChange<CreditFormState>;
+}
+
+export const renderCreditParameters = ({
+  amount,
+  term,
+  handleChange,
+}: RenderCreditParametersProps) => (
+  <div className="flex justify-between gap-5 mb-7">
+    {renderInputRange({
+      label: 'Сумма кредита, ₽',
+      value: amount,
+      onChange: (value) => handleChange({ amount: value }),
+      min: MIN_CREDIT_AMOUNT,
+      max: MAX_CREDIT_AMOUNT,
+      items: ITEMS_CREDIT_AMOUNT,
+    })}
+    {renderInputRange({
+      label: 'Срок кредита, месяцев',
+      value: term,
+      onChange: (value) => handleChange({ term: value }),
+      min: MIN_CREDIT_TERM,
+      max: MAX_CREDIT_TERM,
+      items: ITEMS_CREDIT_TERM,
+    })}
+  </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/renderDataOrganization.tsx

@@ -0,0 +1,78 @@
+import { Input } from '../../ui-kit/Input/Input';
+import type { CreditFormState } from './ApplicationFormCredit';
+import type { HandleFormStateChange } from './models';
+
+interface RenderDataOrganizationProps {
+  fullName: string;
+  inn: string;
+  name: string;
+  phone: string;
+  mail: string;
+  annualRevenue: string;
+  handleChange: HandleFormStateChange<CreditFormState>;
+}
+
+export const renderDataOrganization = ({
+  fullName,
+  inn,
+  name,
+  phone,
+  mail,
+  annualRevenue,
+  handleChange,
+}: RenderDataOrganizationProps) => (
+  <div className="flex justify-between gap-5 mb-7">
+    <div className="w-1/2">
+      <Input
+        className="shrink-0 text-l w-full mb-5"
+        type="text"
+        aria-label="Наименование организации"
+        label="Наименование организации"
+        value={fullName}
+        onChange={(value) => handleChange({ fullName: value })}
+      />
+      <Input
+        className="shrink-0 text-l w-full mb-5"
+        type="text"
+        aria-label="ИНН"
+        label="ИНН"
+        value={inn}
+        onChange={(value) => handleChange({ inn: value })}
+      />
+      <Input
+        className="shrink-0 text-l w-full "
+        type="text"
+        aria-label="Телефон"
+        label="Телефон"
+        value={phone}
+        onChange={(value) => handleChange({ phone: value })}
+      />
+    </div>
+    <div className="w-1/2">
+      <Input
+        className="shrink-0 text-l w-full mb-5"
+        type="text"
+        aria-label="Годовая выручка, ₽"
+        label="Годовая выручка, ₽"
+        value={annualRevenue}
+        onChange={(value) => handleChange({ annualRevenue: value })}
+      />
+      <Input
+        className="shrink-0 text-l w-full mb-5"
+        type="text"
+        aria-label="Контактное лицо"
+        label="Контактное лицо"
+        value={name}
+        onChange={(value) => handleChange({ name: value })}
+      />
+      <Input
+        className="shrink-0 text-l w-full "
+        type="text"
+        aria-label="Электронная почта"
+        label="Электронная почта"
+        value={mail}
+        onChange={(value) => handleChange({ mail: value })}
+      />
+    </div>
+  </div>
+);

package/src/components/ApplicationForm/renderQuestionsInterested.tsx

@@ -0,0 +1,45 @@
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { WedFormState } from './ApplicationFormWed';
+import { HandleFormStateChange } from './models';
+
+interface RenderQuestionsInterestedProps {
+  currencyControl: boolean;
+  documentaryOperations: boolean;
+  conversionOperations: boolean;
+  text: string;
+  handleChange: HandleFormStateChange<WedFormState>;
+}
+
+export const renderQuestionsInterested = ({
+  currencyControl,
+  documentaryOperations,
+  conversionOperations,
+  text,
+  handleChange,
+}: RenderQuestionsInterestedProps) => (
+  <div className="mb-6">
+    <div className="flex items-center mb-4 gap-6">
+      <Checkbox
+        text="Валютный контроль"
+        checked={currencyControl}
+        onChange={(value) => handleChange({ currencyControl: value })}
+      />
+      <Checkbox
+        text="Документарные операции"
+        checked={documentaryOperations}
+        onChange={(value) => handleChange({ documentaryOperations: value })}
+      />
+      <Checkbox
+        text="Конверсионные операции"
+        checked={conversionOperations}
+        onChange={(value) => handleChange({ conversionOperations: value })}
+      />
+    </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"
+      value={text}
+      onChange={(e) => handleChange({ text: e.target.value })}
+    />
+  </div>
+);

package/src/components/ApplicationForm/renderSelects.tsx

@@ -0,0 +1,38 @@
+import { ACQUIRING_TYPES } from './acquiringTypes';
+import type { AcquiringFormState } from './ApplicationFormAcquiring';
+import type { HandleFormStateChange, Select } from './models';
+import { WrapperSelect } from './WrapperSelect';
+
+interface SelectsProps {
+  acquiringType: string;
+  regions: Select[];
+  region: string;
+  handleChange: HandleFormStateChange<AcquiringFormState>;
+}
+
+export const renderSelects = ({ acquiringType, regions, region, handleChange }: SelectsProps) => (
+  <div className="flex justify-between gap-5 mb-7">
+    <div className="w-1/2">
+      <WrapperSelect
+        data={ACQUIRING_TYPES}
+        fieldValue="code"
+        fieldLabel="name"
+        selected={acquiringType}
+        setSelected={(value) => handleChange({ acquiringType: value })}
+        label="Вид эквайринга"
+        placeholder="Выберите эквайринг"
+      />
+    </div>
+    <div className="w-1/2">
+      <WrapperSelect
+        data={regions}
+        fieldValue="code"
+        fieldLabel="name"
+        selected={region}
+        setSelected={(value) => handleChange({ region: value })}
+        label="Адрес"
+        placeholder="Выберите адрес"
+      />
+    </div>
+  </div>
+);

package/src/components/ApplicationForm/renderSlideCheckboxes.tsx

@@ -0,0 +1,28 @@
+import { SlideCheckbox } from '../../ui-kit/SlideCheckbox/SlideCheckbox';
+import type { AcquiringFormState } from './ApplicationFormAcquiring';
+import type { HandleFormStateChange } from './models';
+
+type SlideCheckboxesProps = {
+  onlineСheckout: boolean;
+  posTerminal: boolean;
+  handleChange: HandleFormStateChange<AcquiringFormState>;
+};
+
+export const renderSlideCheckboxes = ({
+  onlineСheckout,
+  posTerminal,
+  handleChange,
+}: SlideCheckboxesProps) => (
+  <div className="mb-5">
+    <SlideCheckbox
+      checked={onlineСheckout}
+      text="Хочу купить онлайн-кассу"
+      onClick={() => handleChange({ onlineСheckout: !onlineСheckout })}
+    />
+    <SlideCheckbox
+      checked={posTerminal}
+      text="Хочу купить POS-терминал"
+      onClick={() => handleChange({ posTerminal: !posTerminal })}
+    />
+  </div>
+);

package/src/components/ApplicationForm/renderSubmitButton.tsx

@@ -0,0 +1,15 @@
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
+
+export const renderSubmitButton = (button?: ButtonProps, className?: string) => {
+  const buttonStyle = getRegularButtonClasses({
+    className: 'text-white',
+    version: button?.version,
+  });
+
+  return (
+    <button type="submit" className={`p-4 ${buttonStyle} ${className}`}>
+      {button?.text ? button.text : 'Отправить заявку'}
+    </button>
+  );
+};

package/src/components/ApplicationForm/useFormHandlers.ts

@@ -0,0 +1,32 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+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>) => {
+  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

@@ -1,6 +1,7 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
 import { Accordion } from './Accordion/Accordion';
 import { AccordionItem } from './AccordionItem/AccordionItem';
+import { ApplicationForm } from './ApplicationForm/ApplicationForm';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
@@ -61,6 +62,7 @@ import { Video } from './Video/Video';
 export const Blocks: BlocksRegistry = {
   Accordion,
   AccordionItem,
+  ApplicationForm,
   BenefitsBlock,
   Bonus,
   BonusBenefitsBlock,

package/src/components/Header/Header.tsx

@@ -41,10 +41,6 @@ export const Header = JSX<HeaderProps>(
 
     const activeTopItem = topItems?.find(isTopItemActive(router));
 
-    const topMenu = topItems?.map((_, i) => (
-      <TopItem key={String(i)} active={_ === activeTopItem} aria-label={_.text} {..._} />
-    ));
-
     return (
       <BlockWrapper
         tag="header"
@@ -59,7 +55,9 @@ export const Header = JSX<HeaderProps>(
         <div className="container">
           <div className="flex items-center">
             <Logo className="mr-8" bgColor={bgColor} logo={logo} />
-            {topMenu}
+            {topItems?.map((_, i) => (
+              <TopItem key={String(i)} active={_ === activeTopItem} {..._} />
+            ))}
             <HeaderSecondaryMenu
               version={version}
               className="ml-auto"

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -9,7 +9,6 @@ import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { style } from '../../utils/style';
 import { HeaderChatBotButton } from './HeaderChatBotButton';
 import type { ChatBot } from './HeaderContent';
-import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
 interface HeaderSecondaryMenuContent {
   version?: BlockVersion;
@@ -39,33 +38,14 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           flat={true}
           href="#"
           text={location.name}
-          ariaLabel="Местоположение"
           onClick={showLocationModal}
         />
         {officesLink ? (
-          <TopItem
-            className="mr-7"
-            flat={true}
-            href={officesLink}
-            text="Офисы и банкоматы"
-            ariaLabel="Список всех доступных офисов и банкоматов"
-          />
+          <TopItem className="mr-7" flat={true} href={officesLink} text="Офисы и банкоматы" />
         ) : null}
         {chat ? (
           <HeaderChatBotButton className="mr-5" iconVersion={iconVersion} chat={chat} />
         ) : null}
-        <HeaderSecondaryMenuButton
-          className="mr-5"
-          image={{ icon: 'LoupeIcon', iconVersion }}
-          ariaLabel="Поиск по сайту"
-          disabled={true}
-        />
-        <HeaderSecondaryMenuButton
-          image={{ icon: 'GridIcon', iconVersion }}
-          ariaLabel="Дополнительные ссылки"
-          isRounded={true}
-          disabled={true}
-        />
         {isShowLocationModal ? (
           <Location
             currentLocation={location}

package/src/components/Header/HeaderSubMenu.tsx

@@ -4,6 +4,7 @@ import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObs
 import { useRouter } from '../../hooks/useRouter';
 import type { LinkProps } from '../../model/LinkProps';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
+import { style } from '../../utils/style';
 import { DropdownMenu } from './DropdownMenu';
 import { HeaderSubMenuItem } from './HeaderSubMenuItem';
 
@@ -40,7 +41,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [] }) => {
         {subItems.map((_, i) => (
           <HeaderSubMenuItem
             key={String(i)}
-            className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
+            className={style('mr-8', visibleItemsCount - 1 < i ? 'invisible' : '')}
             active={_ === activeSubItem}
             observerOptions={observerOptions}
             onVisibilityChange={subItemsVisibilityHandlers[i]}

package/src/components/Header/HeaderSubMenuItem.tsx

@@ -15,7 +15,7 @@ export interface HeaderSubMenuItemProps extends LinkProps {
 }
 
 export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
-  ({ className, active, observerOptions, onVisibilityChange, children, ...linkProps }) => {
+  ({ observerOptions, onVisibilityChange, children, ...rest }) => {
     const observerCallback = useCallback(
       (entries: IntersectionObserverEntry[]) => {
         if (!entries.length || !onVisibilityChange) {
@@ -33,9 +33,7 @@ export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
 
     return (
       <span ref={ref}>
-        <HeaderItem className={className} active={active} {...linkProps}>
-          {children}
-        </HeaderItem>
+        <HeaderItem {...rest}>{children}</HeaderItem>
       </span>
     );
   },

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -7,7 +7,7 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
 import type { SafeDepositRentalContent } from './SafeDepositRentalContent';
 import { SafeDepositRentalForm } from './SafeDepositRentalForm';
-import { HandleChangeState, SafeDepositRentalState } from './SafeDepositRentalTypes';
+import { HandleFormStateChange, SafeDepositRentalState } from './SafeDepositRentalTypes';
 import { Region, useGetRegions } from './useGetRegions';
 import { getBranch, getCoordinates } from './utils';
 
@@ -33,7 +33,7 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
 
     const branches = useSafeBoxes(selectedRegion);
 
-    const handleChangeSafeDepositState: HandleChangeState = useCallback(
+    const handleChangeSafeDepositState: HandleFormStateChange = useCallback(
       (state) => setStateDepositState((oldState) => ({ ...oldState, ...state })),
       [setStateDepositState],
     );

package/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -5,7 +5,7 @@ import { RegionsAndBranches } from './RegionsAndBranches';
 import { RenderRadioButtons } from './RenderRadioButtons';
 import { RentalPeriod } from './RentalPeriod';
 import { SafeBoxCases } from './SafeBoxCases';
-import type { HandleChangeState, SafeDepositRentalState } from './SafeDepositRentalTypes';
+import type { HandleFormStateChange, SafeDepositRentalState } from './SafeDepositRentalTypes';
 import { Region } from './useGetRegions';
 
 export interface SafeDepositRentalFieldsProps extends SafeDepositRentalState {
@@ -14,7 +14,7 @@ export interface SafeDepositRentalFieldsProps extends SafeDepositRentalState {
   caseVolumes?: SafeBoxCaseVolume[];
   branches?: Branch[];
   onClick: () => void;
-  onChange: HandleChangeState;
+  onChange: HandleFormStateChange;
 }
 
 export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
@@ -60,10 +60,10 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
   },
 );
 
-const onSelectedBranch = (onChange: HandleChangeState) => (value: string) => {
+const onSelectedBranch = (onChange: HandleFormStateChange) => (value: string) => {
   onChange({ selectedBranch: value, selectedCaseVolume: '', selectedBoxSize: '' });
 };
 
-const onSelectedCaseVolume = (onChange: HandleChangeState) => (value: string) => {
+const onSelectedCaseVolume = (onChange: HandleFormStateChange) => (value: string) => {
   onChange({ selectedCaseVolume: value, selectedBoxSize: '' });
 };

package/src/components/SafeDepositRental/SafeDepositRentalTypes.ts

@@ -6,4 +6,4 @@ export interface SafeDepositRentalState {
   days: number;
 }
 
-export type HandleChangeState = (state: Partial<SafeDepositRentalState>) => void;
+export type HandleFormStateChange = (state: Partial<SafeDepositRentalState>) => void;