@redneckz/wildless-cms-uni-blocks 0.14.609 → 0.14.616

package/src/components/ApplicationStatus/ApplicationStatus.fixture.tsx

@@ -0,0 +1,129 @@
+import '../../setup-fixture';
+
+import { ApplicationStatus } from './ApplicationStatus';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ApplicationStatus
+        className="col-span-12"
+        title="Банк одобрил вам кредит"
+        description="Обратитесь в отделение банка, чтобы завершить оформление и получить ваш кредит"
+        sectionInfoTitle="Информация о кредите"
+        sectionInfo={[
+          {
+            label: 'Сумма',
+            description: '2 500 000 ₽',
+          },
+          {
+            label: 'Ставка',
+            description: '14,5%',
+          },
+          {
+            label: 'Ежемесячный платеж',
+            description: '70342 ₽',
+          },
+          {
+            label: 'Срок кредита',
+            description: '3 года',
+          },
+          {
+            label: 'Тип платежа',
+            description: 'Аннуитетный',
+          },
+        ]}
+        sectionAdditionalTitle="В отделении Банка"
+        sectionInfoAdditional={[
+          {
+            label: 'Регион',
+            description: 'Москва и Московская область',
+          },
+          {
+            label: 'Адрес',
+            description: 'Москва, ул. Ленина д. 1',
+          },
+        ]}
+        infoCard={{
+          __html: `<p>Памятка по необходимым документам</p>`,
+          icon: 'DocIcon',
+          link: {
+            href: '',
+            target: '_blank',
+            text: 'Скачать',
+          },
+        }}
+        buttonText="Вернуться на главную"
+      />
+    </div>
+  ),
+  applicationSent: (
+    <div className="container grid grid-cols-12">
+      <ApplicationStatus
+        className="col-span-12"
+        title="Заявка успешно отправлена"
+        description="Не закрывайте окно, скоро сообщим результат"
+        interval={300}
+        sectionInfoTitle="Заявленные условия по кредиту"
+        sectionInfo={[
+          {
+            label: 'Название продукта',
+            description: 'Кредит на любые цели',
+          },
+          {
+            label: 'Цель кредита',
+            description: 'На любые цели',
+          },
+          {
+            label: 'Сумма кредита',
+            description: '2 500 000 ₽',
+          },
+          {
+            label: 'Срок кредита',
+            description: '36 мес',
+          },
+          {
+            label: 'Тип платежа',
+            description: 'Аннуитетный',
+          },
+        ]}
+      />
+    </div>
+  ),
+  waitingTimes: (
+    <div className="container grid grid-cols-12">
+      <ApplicationStatus
+        className="col-span-12"
+        title="Благодарим вас за ожидание, но нам требуется больше времени для принятия решения"
+        description="Посетите выбранное отделение банка с необходимыми документами и так завершите оформление кредита."
+        sectionInfo={[
+          {
+            label: 'Основные документы',
+            description: 'Паспорт РФ',
+          },
+        ]}
+        sectionAdditionalTitle="В отделении Банка"
+        sectionInfoAdditional={[
+          {
+            label: 'Регион',
+            description: 'Москва и Московская область',
+          },
+          {
+            label: 'Адрес',
+            description: 'Москва, ул. Ленина д. 1',
+          },
+        ]}
+        buttonText="Вернуться на главную"
+      />
+    </div>
+  ),
+  waitingReject: (
+    <div className="container grid grid-cols-12">
+      <ApplicationStatus
+        className="col-span-12"
+        title="Благодарим Вас за ожидание"
+        description="В настоящий момент Банк не может одобрить Вашу заявку на кредит. Попробуйте подать заявку позже. Спасибо за обращение в АО «Россельхозбанк»."
+        buttonText="Вернуться на главную"
+      />
+    </div>
+  ),
+};

package/src/components/ApplicationStatus/ApplicationStatus.tsx

@@ -0,0 +1,108 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMobileMode } from '../../hooks/useMobileMode';
+import { type DescriptionProps, type LabelProps } from '../../model/HeadlineType';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Button } from '../../ui-kit/Button/Button';
+import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
+import { InfoCard } from '../../ui-kit/InfoCard/InfoCard';
+import { Text } from '../../ui-kit/Text/Text';
+import { TimerCircle } from '../../ui-kit/TimerCircle/TimerCircle';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
+import { type ApplicationStatusContent } from './ApplicationStatusContent';
+
+type ApplicationStatusProps = ApplicationStatusContent & UniBlockProps;
+
+export const ApplicationStatus = JSX<ApplicationStatusProps>(
+  ({
+    title,
+    description: dsc,
+    infoCard,
+    sectionInfoTitle,
+    sectionInfo,
+    sectionAdditionalTitle,
+    sectionInfoAdditional,
+    buttonText,
+    interval,
+    ...props
+  }) => (
+    <BlockWrapper {...props}>
+      <div className="flex flex-col md:flex-row items-center">
+        <Headline
+          headlineVersion="M"
+          title={title}
+          description={dsc}
+          align="text-left"
+          padding="p-xl"
+          className="w-full"
+        />
+        {interval ? <TimerCircle interval={interval} /> : null}
+      </div>
+      <SectionInfo title={sectionInfoTitle} items={sectionInfo} />
+      <SectionInfo title={sectionAdditionalTitle} items={sectionInfoAdditional} countColumns />
+      {infoCard?.__html ? (
+        <InfoCard
+          __html={infoCard?.__html}
+          icon={infoCard?.icon}
+          link={{
+            text: infoCard?.link?.text,
+          }}
+        />
+      ) : null}
+      {buttonText ? <Button className="w-full mt-lg">{buttonText}</Button> : null}
+    </BlockWrapper>
+  ),
+);
+
+const SectionInfo = ({
+  title,
+  items,
+  countColumns = false,
+}: {
+  title?: string;
+  items?: (LabelProps & DescriptionProps)[];
+  countColumns?: boolean;
+}) => {
+  const isMobile = useMobileMode();
+
+  if (!items) {
+    return null;
+  }
+
+  return (
+    <div>
+      <hr className="w-full h-px bg-main-gray border-0" />
+      <div className="p-xl">
+        {title ? (
+          <Text color="text-primary-text" size="text-h5">
+            <div className={style({ 'mb-m': Boolean(title) })}>{title}</div>
+          </Text>
+        ) : null}
+        {items ? (
+          <div
+            className={style(
+              'grid grid-cols-1 gap-m',
+              inputColumnStyles(countColumns || isMobile ? 1 : 2),
+            )}
+          >
+            {items.map((item, index) => (
+              <div key={index}>{renderItem(item)}</div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+const renderItem = ({ label, description }: LabelProps & DescriptionProps) => (
+  <div className="flex flex-col">
+    <Text color="text-secondary-text" size="text-l">
+      {label}
+    </Text>
+    <Text color="text-primary-text" size="text-xl">
+      {description}
+    </Text>
+  </div>
+);

package/src/components/ApplicationStatus/ApplicationStatus.ui.json

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

package/src/components/ApplicationStatus/ApplicationStatusContent.ts

@@ -0,0 +1,19 @@
+import { type DescriptionProps, type LabelProps } from '../../model/HeadlineType';
+import { type InfoCardProps } from '../../ui-kit/InfoCard/InfoCard';
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+
+/**
+ * @title Статус заявки
+ */
+export type ApplicationStatusContent = UniBlockContent & {
+  title?: string;
+  description?: string;
+  interval?: number;
+  sectionInfoTitle?: string;
+  sectionInfo?: (LabelProps & DescriptionProps)[];
+  sectionAdditionalTitle?: string;
+  sectionInfoAdditional?: (LabelProps & DescriptionProps)[];
+  buttonText?: string;
+  /** @hidden */
+  infoCard?: InfoCardProps;
+};

package/src/components/Blocks.ts

@@ -3,6 +3,7 @@ import { type BlocksRegistry } from '../model/BlocksRegistry';
 import { AdTile } from './AdTile/AdTile';
 import { ApplicationForm } from './ApplicationForm/ApplicationForm';
 import { ApplicationLeadForm } from './ApplicationLeadForm/ApplicationLeadForm';
+import { ApplicationStatus } from './ApplicationStatus/ApplicationStatus';
 import { BankAccountFiltration } from './BankAccountFiltration/BankAccountFiltration';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
@@ -58,6 +59,7 @@ export const Blocks: BlocksRegistry = {
   AdTile,
   ApplicationForm,
   ApplicationLeadForm,
+  ApplicationStatus,
   BankAccountFiltration,
   BenefitsBlock,
   BonusBenefitsBlock,

package/src/components/CreditForm/CreditForm.fixture.tsx

@@ -1,6 +1,32 @@
 import '../../setup-fixture';
+import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { CreditForm } from './CreditForm';
 
+const MOCK_LEAD_FORM = {
+  surname: 'фам',
+  name: 'имя',
+  middleName: 'отч',
+  birthday: '2024-06-18T21:00:00.000Z',
+  phone: '+7 (222) 222-22-22',
+  email: '231@Mail.ru',
+  processPersonalDataLeadFlg: true,
+  consentProviderFlg: true,
+  consentPfrFlg: false,
+  consentPhotoFlg: true,
+  consentAssignmentClaimsFlg: true,
+  consentCollectionFlg: true,
+  consentInformFlg: true,
+};
+
+globalThis.localStorage.setItem('leadForm', JSON.stringify(MOCK_LEAD_FORM));
+
 export default {
-  default: <CreditForm className="col-span-12" />,
+  default: (
+    <div>
+      <CreditForm className="col-span-12" />
+      <PopupManager />
+      <DialogManager />
+    </div>
+  ),
 };

package/src/components/CreditForm/CreditForm.tsx

@@ -1,21 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { useCallback, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
-import { renderTitle } from '../../ui-kit/FormField/renderTitle';
-import { InfoCard } from '../../ui-kit/InfoCard/InfoCard';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { type SectionsProps } from '../ApplicationForm/ApplicationFormContent';
-import { type FormState } from '../ApplicationForm/getInitialFormState';
-import { renderInputs } from '../ApplicationForm/renderInputs';
 import { type FieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
-import { getInitialFormState } from '../ApplicationLeadForm/getInitialFormState';
 import { type CreditFormContent } from './CreditFormContent';
 import { CreditFormProgress } from './CreditFormProgress';
+import { CreditFormStep } from './CreditFormStep';
 import { stepsSectionsMap } from './creditFormStepsData';
-import { StepsNavigationButtons } from './StepsNavigationButtons';
 
 const STEPS_COUNT = 5;
 const STEPS_TITLES = [
@@ -26,51 +19,38 @@ const STEPS_TITLES = [
   'Отделение Банка',
 ];
 
-export interface StepProps {
-  typeForm: string;
-  sections: SectionsProps[];
-  field: FormFieldRegisterer<FormState>;
-}
-
-export interface CreditFormProps extends CreditFormContent, UniBlockProps {}
-
-export const CreditForm = JSX<CreditFormProps>(
-  ({ className, typeForm = '', sections = [], ...rest }) => {
-    const [step, setStep] = useState(1);
-    const inputs = (sections?.flatMap((_) => _?.inputs) || []) as FieldDef[];
-    const initialFormState = getInitialFormState(inputs, typeForm);
-    const handleSubmit = () => false;
-
-    const [, { field, onSubmit }] = useForm(initialFormState, { onSubmit: handleSubmit });
-
-    return (
-      <BlockWrapper className={style('bg-transparent', className)} defaultPadding="p-6xl" {...rest}>
-        <div className="container grid grid-cols-12">
-          <CreditFormProgress stepsTitles={STEPS_TITLES} step={step} totalSteps={STEPS_COUNT} />
-          <div className="py-lg px-5xl mt-2xs bg-white col-span-12">
-            <form onSubmit={onSubmit} className="space-y-m">
-              {renderStep({ sections: stepsSectionsMap[step], typeForm, field })}
-              <StepsNavigationButtons step={step} setStep={setStep} totalSteps={STEPS_COUNT} />
-            </form>
-          </div>
+interface CreditFormProps extends CreditFormContent, UniBlockProps {}
+
+export const CreditForm = JSX<CreditFormProps>(({ className, ...rest }) => {
+  const [step, setStep] = useState(1);
+  const sections = useMemo(() => stepsSectionsMap[step], [step]);
+  const inputs = (sections?.flatMap((_: SectionsProps) => _?.inputs) || []) as FieldDef[];
+
+  const handleNextStep = useCallback(() => {
+    setStep((_) => Math.min(_ + 1, STEPS_COUNT));
+  }, []);
+
+  const handlePrevStep = useCallback(() => {
+    //TODO search hook - 1,
+    setStep((_) => Math.max(_ - 1, 0));
+  }, []);
+
+  return (
+    <BlockWrapper className={style('bg-transparent', className)} defaultPadding="p-6xl" {...rest}>
+      <div className="container grid grid-cols-12">
+        <CreditFormProgress stepsTitles={STEPS_TITLES} step={step} totalSteps={STEPS_COUNT} />
+        <div className="py-lg px-5xl mt-2xs bg-white col-span-12">
+          <CreditFormStep
+            inputs={inputs}
+            key={String(step)}
+            totalSteps={STEPS_COUNT}
+            step={step}
+            sections={sections}
+            onNextStep={handleNextStep}
+            onPrevStep={handlePrevStep}
+          />
         </div>
-      </BlockWrapper>
-    );
-  },
-);
-
-const renderStep = ({ sections, field, typeForm }: StepProps) => {
-  return sections.map((_, i) => (
-    <div key={`section-${i}`} className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}>
-      {renderInfo(_?.inputs)}
-      {renderTitle(_?.title)}
-      {renderInputs({ field, typeForm, inputs: _?.inputs })}
-    </div>
-  ));
-};
-
-const renderInfo = (inputs: FieldDef[] = []) => {
-  const infoInputs = inputs.filter((_) => _.fieldType === 'info');
-
-  return infoInputs.length ? infoInputs.map(({ text }) => <InfoCard __html={text} />) : null;
-};
+      </div>
+    </BlockWrapper>
+  );
+});

package/src/components/CreditForm/CreditFormContent.ts

@@ -1,3 +1,4 @@
+import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { type TextProps, type TitleProps } from '../../model/HeadlineType';
 import { type Target } from '../../model/LinkProps';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
@@ -6,7 +7,11 @@ import {
   type SectionsProps,
   type SubmitButtonProps,
 } from '../ApplicationForm/ApplicationFormContent';
-import { type TypeFormFieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
+import {
+  type FieldDef,
+  type TypeFormFieldDef,
+} from '../ApplicationLeadForm/ApplicationLeadFormContent';
+import { type FormStateMap } from './getInitialFormState';
 
 /**
  * @title Форма заявки на потребительский кредит настраиваемая
@@ -32,3 +37,10 @@ export type CreditFormContent = UniBlockContent &
     sections?: SectionsProps[];
     endpoint?: EndpointType;
   };
+
+/** @hidden */
+export interface RenderInputsProps {
+  inputs?: FieldDef[];
+  typeForm?: TypeFormFieldDef | string;
+  field: FormFieldRegisterer<FormStateMap[keyof FormStateMap]>;
+}

package/src/components/CreditForm/CreditFormStep.tsx

@@ -0,0 +1,65 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
+import { renderTitle } from '../../ui-kit/FormField/renderTitle';
+import { InfoCard } from '../../ui-kit/InfoCard/InfoCard';
+import { style } from '../../utils/style';
+import { type SectionsProps } from '../ApplicationForm/ApplicationFormContent';
+import { type FieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
+import { getInitialFormState, type FormStateMap } from './getInitialFormState';
+import { renderInputs } from './renderInputs';
+import { StepsNavigationButtons } from './StepsNavigationButtons';
+import { useCreditFormApi } from './useCreditFormApi';
+
+export interface StepProps {
+  sections: SectionsProps[];
+  field: FormFieldRegisterer<FormStateMap[keyof FormStateMap]>;
+}
+
+export interface CreditFormStepProps {
+  totalSteps: number;
+  step: number;
+  sections: SectionsProps[];
+  inputs: FieldDef[];
+  onNextStep: () => void;
+  onPrevStep: () => void;
+}
+
+export const CreditFormStep = JSX<CreditFormStepProps>(
+  ({ totalSteps, step, sections, onPrevStep, onNextStep, inputs }) => {
+    const [localStorageData, saveStep] = useLocalStorage<Record<string, any>>('leadForm');
+    const initialState = getInitialFormState(step as keyof FormStateMap, localStorageData);
+
+    const { handleSubmit } = useCreditFormApi({
+      inputs,
+      onNextStep: onNextStep,
+      saveStep,
+    });
+
+    const [, { field, onSubmit }] = useForm(initialState, { onSubmit: handleSubmit });
+
+    return (
+      <form onSubmit={onSubmit} className="space-y-m">
+        {renderStep({ sections, field })}
+        <StepsNavigationButtons step={step} totalSteps={totalSteps} onPrevStep={onPrevStep} />
+      </form>
+    );
+  },
+);
+
+const renderStep = ({ sections, field }: StepProps) => {
+  return sections.map((_, i) => (
+    <div key={`section-${i}`} className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}>
+      {renderInfo(_?.inputs)}
+      {renderTitle(_?.title)}
+      {renderInputs({ field, inputs: _?.inputs })}
+    </div>
+  ));
+};
+
+const renderInfo = (inputs: FieldDef[] = []) => {
+  const infoInputs = inputs.filter((_) => _.fieldType === 'info');
+
+  return infoInputs.length ? infoInputs.map(({ text }) => <InfoCard __html={text} />) : null;
+};

package/src/components/CreditForm/StepsNavigationButtons.tsx

@@ -4,44 +4,25 @@ import { style } from '../../utils/style';
 
 export interface StepsNavigationButtonsProps {
   step: number;
-  setStep: (step: number) => void;
   totalSteps: number;
+  onPrevStep?: () => void;
 }
 
-export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
-  ({ step, setStep, totalSteps }) => {
-    const handleNext = () => {
-      if (step < totalSteps) {
-        setStep(step + 1);
-      }
-    };
-
-    const handlePrev = () => {
-      if (step > 1) {
-        setStep(step - 1);
-      }
-    };
-
-    return (
-      <div className={'flex justify-between'}>
-        <Button
-          onClick={handlePrev}
-          className={style('w-full @xl:w-auto')}
-          type="button"
-          version="secondary"
-          disabled={step === 1}
-        >
-          Назад
-        </Button>
-        <Button
-          onClick={handleNext}
-          className={style('w-full @xl:w-auto')}
-          type="button"
-          disabled={step === totalSteps}
-        >
-          Далее
-        </Button>
-      </div>
-    );
-  },
-);
+export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(({ step, onPrevStep }) => {
+  return (
+    <div className={'flex justify-between'}>
+      <Button
+        onClick={onPrevStep}
+        className={style('w-full @xl:w-auto')}
+        type="button"
+        version="secondary"
+        disabled={step === 1}
+      >
+        Назад
+      </Button>
+      <Button className={style('w-full @xl:w-auto')} type="submit">
+        Далее
+      </Button>
+    </div>
+  );
+});