@redneckz/wildless-cms-uni-blocks 0.14.1028 → 0.14.1030

package/src/components/ApplicationLeadForm/useApplicationLeadApi.tsx

@@ -62,6 +62,7 @@ export const useApplicationLeadApi = ({
   const consentBkiDialog = useConsentBkiDialog(goToNextStep);
   const verifyPhoneDialog = useDialog(VerifyPhoneDialog);
   const draftDialog = useDraftDialog();
+
   const handleFailSendForm = () => {
     verifyPhoneDialog.close();
     changeSubmitFormStatus(false);
@@ -145,7 +146,7 @@ export const useApplicationLeadApi = ({
     try {
       startSending();
       const transformedFormData = transformFormData(formData);
-      const participantId = await createParticipant({
+      const participantData = await createParticipant({
         phone: formatPhone(transformedFormData.phone as string),
         email: transformedFormData.email as string,
       });
@@ -153,38 +154,41 @@ export const useApplicationLeadApi = ({
       const referalData = leadFormStore.referalData;
       const marketingInfo = sessionStore.marketingInfo;
 
-      if (!participantId) {
+      if (!participantData) {
         throw new Error();
       }
 
-      const sendCurrentTask = async () => {
-        const taskId = await updateUserDataNewMicroservice({
-          programId,
-          participantId,
-          formData: transformedFormData,
-          referalData,
-          productType,
-          marketingInfo,
-          saveUserData,
-          sendAspects,
-        });
-        verifyPhoneDialog.close();
+      const { participantId, userId } = participantData;
 
-        consentBkiDialog.open({
-          phone: transformedFormData.phone,
-          taskId,
-          participantId,
-          onFail: handleFailSendForm,
-        });
-      };
+      if (!participantId) {
+        throw new Error();
+      }
 
-      const handleSuccessVerify = async () => {
-        try {
-          await sendCurrentTask();
-        } catch {
-          handleFailSendForm();
-        }
-      };
+      const sendCurrentTask = createSendCurrentTaskNew({
+        programId,
+        participantId,
+        userId,
+        formData: transformedFormData,
+        referalData,
+        productType,
+        marketingInfo,
+        saveUserData,
+        sendAspects,
+        verifyPhoneDialog,
+        consentBkiDialog,
+        handleFailSendForm,
+      });
+
+      const handleSuccessVerify = createHandleSuccessVerifyNew({
+        userId,
+        programId,
+        productType,
+        verifyPhoneDialog,
+        draftDialog,
+        sendAspects,
+        sendCurrentTask,
+        handleFailSendForm,
+      });
 
       const acceptedConsents = getAcceptedConsents(transformedFormData, productType);
 
@@ -207,6 +211,108 @@ export const useApplicationLeadApi = ({
   };
 };
 
+const createSendCurrentTaskNew =
+  ({
+    programId,
+    participantId,
+    userId,
+    formData,
+    referalData,
+    productType,
+    marketingInfo,
+    saveUserData,
+    sendAspects,
+    verifyPhoneDialog,
+    consentBkiDialog,
+    handleFailSendForm,
+  }: {
+    programId: string;
+    participantId: string | number;
+    userId?: string | number;
+    formData: LeadFormState;
+    referalData: ReferalData | null;
+    productType: ProductType;
+    marketingInfo: MarketingInfo | null;
+    saveUserData: (userData: UserData) => void;
+    sendAspects: (userId: string | number, taskId: number) => void;
+    verifyPhoneDialog: any;
+    consentBkiDialog: any;
+    handleFailSendForm: () => void;
+  }) =>
+  async () => {
+    const taskId = await updateUserDataNewMicroservice({
+      programId,
+      participantId,
+      userId,
+      formData,
+      referalData,
+      productType,
+      marketingInfo,
+      saveUserData,
+      sendAspects,
+    });
+    verifyPhoneDialog.close();
+
+    consentBkiDialog.open({
+      phone: formData.phone,
+      taskId,
+      userId,
+      participantId,
+      onFail: handleFailSendForm,
+    });
+  };
+
+const createHandleSuccessVerifyNew =
+  ({
+    userId,
+    programId,
+    productType,
+    verifyPhoneDialog,
+    draftDialog,
+    sendAspects,
+    sendCurrentTask,
+    handleFailSendForm,
+  }: {
+    userId?: string | number;
+    programId: string;
+    productType: ProductType;
+    verifyPhoneDialog: any;
+    draftDialog: any;
+    sendAspects: (userId: string | number, taskId: number) => void;
+    sendCurrentTask: () => Promise<void>;
+    handleFailSendForm: () => void;
+  }) =>
+  async () => {
+    try {
+      const lastTaskId = await getLastTaskStatus({
+        userId,
+        profileId: userId,
+        programId,
+      });
+
+      if (lastTaskId) {
+        const task = await getTaskById({ taskId: lastTaskId });
+
+        if (task) {
+          verifyPhoneDialog.close();
+          draftDialog.open({
+            task,
+            isFromLead: true,
+            isDebit: productType === 'debitCard',
+            sendAspects,
+            onClose: sendCurrentTask,
+          });
+
+          return;
+        }
+      }
+
+      await sendCurrentTask();
+    } catch {
+      handleFailSendForm();
+    }
+  };
+
 const getAcceptedConsents = (formData: LeadFormState, productType: ProductType): string[] => {
   const consents = productTypeToConsentsMap[productType];
 
@@ -288,6 +394,7 @@ const updateUserData = async ({
 
 const updateUserDataNewMicroservice = async ({
   programId,
+  userId,
   participantId,
   formData,
   referalData,
@@ -297,13 +404,14 @@ const updateUserDataNewMicroservice = async ({
   sendAspects,
 }: {
   programId: string;
-  participantId: number;
+  participantId: string | number;
+  userId?: string | number;
   formData: LeadFormState;
   referalData: ReferalData | null;
   productType: ProductType;
   marketingInfo: MarketingInfo | null;
   saveUserData: (userData: UserData) => void;
-  sendAspects: (profileId: number, taskId: number) => void;
+  sendAspects: (userId: string | number, taskId: number) => void;
 }): Promise<number> => {
   let taskId: number;
   const transformedConsents = transformConsentsFields(formData, productType);
@@ -332,8 +440,8 @@ const updateUserDataNewMicroservice = async ({
       });
     }
 
-    sendAspects(participantId, taskId);
-    saveUserData({ participantId, taskId, programId, formData });
+    sendAspects(userId || participantId, taskId);
+    saveUserData({ participantId, taskId, userId, programId, formData });
 
     return taskId;
   } catch (ex) {

package/src/components/ApplicationLeadForm/useLeadFormStore.ts

@@ -8,7 +8,8 @@ export interface LeadFormStoreSlice {
   leadForm: LeadFormState;
   taskId: number;
   profileId: Nullable<number>;
-  participantId: number;
+  userId: Nullable<string | number>;
+  participantId: string | number;
   programId: string;
   productType: ProductType;
   referalData: ReferalData;

package/src/components/ApplicationLeadForm/useSaveUserData.ts

@@ -4,9 +4,10 @@ import { type Nullable } from '../../utils/Nullable';
 import { useLeadFormStore } from './useLeadFormStore';
 
 export interface UserData {
-  participantId: number;
+  participantId: string | number;
   taskId: number;
   profileId?: Nullable<number>;
+  userId?: Nullable<string | number>;
   programId: string;
   formData: LeadFormState;
 }
@@ -14,10 +15,18 @@ export const useSaveUserData = () => {
   const leadFormStore = useLeadFormStore();
 
   return useCallback(
-    ({ participantId, taskId, profileId, programId: programNumber, formData }: UserData) => {
+    ({
+      participantId,
+      taskId,
+      userId,
+      profileId,
+      programId: programNumber,
+      formData,
+    }: UserData) => {
       leadFormStore.participantId = participantId;
       leadFormStore.taskId = taskId;
       leadFormStore.profileId = profileId;
+      leadFormStore.userId = userId;
       leadFormStore.programId = programNumber;
       leadFormStore.leadForm = formData;
     },

package/src/components/ApplicationLeadForm/useSendLeadFormAspects.tsx

@@ -9,7 +9,7 @@ export const useSendLeadFormAspects = ({ data }: AspectsProps) => {
   const aspects = useAspects();
 
   return useCallback(
-    (ProfileId: number, TaskId: number) => {
+    (ProfileId: string | number, TaskId: number) => {
       const snowplowParams = JSON.stringify({
         ProfileId,
         TaskId,

package/src/components/Blocks.ts

@@ -38,6 +38,7 @@ import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { OfficesAtmsMap } from './OfficesAtmsMap/OfficesAtmsMap';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { RatesTable } from './RatesTable/RatesTable';
+import { ReferalForm } from './ReferalForm/ReferalForm';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RkoTariffCardsTable } from './RkoTariffCardsTable/RkoTariffCardsTable';
 import { RollupItem } from './RollupItem/RollupItem';
@@ -98,4 +99,5 @@ export const Blocks: BlocksRegistry = {
   CalculatorRko,
   RkoTariffCardsTable,
   RatesTable,
+  ReferalForm,
 };

package/src/components/CreditCardForm/getCreditCardFormTaskData.ts

@@ -12,7 +12,7 @@ import {
 } from './getDeliveryCreditCardData';
 
 type getCreditCardFormTaskDataProps = {
-  participantId: number;
+  participantId: string | number;
   taskId: number;
   profileId: number;
   formData: LeadFormState;

package/src/components/DebitForm/getDebitCardFormTaskData.ts

@@ -12,7 +12,7 @@ import {
 import { debitProgrammIdToCardCodesMap } from './utils';
 
 type getDebitFormTaskDataProps = {
-  participantId: number;
+  participantId: string | number;
   taskId: number;
   formData: LeadFormState;
   programId: string;

package/src/components/ReferalForm/ReferalForm.example.json

@@ -0,0 +1,8 @@
+{
+  "content": {
+    "link": "https://www.rshb.ru/business/dlya-druga/rko",
+    "button": {
+      "text": "Получить ссылку"
+    }
+  }
+}

package/src/components/ReferalForm/ReferalForm.fixture.mobile.tsx

@@ -0,0 +1,16 @@
+import '../../setup-fixture';
+
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
+import { ReferalForm } from './ReferalForm';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ReferalForm
+        link="https://www.rshb.ru/business/dlya-druga/rko"
+        button={{ text: 'Получить ссылку' }}
+      />
+      <PopupManager />
+    </div>
+  ),
+};

package/src/components/ReferalForm/ReferalForm.fixture.tsx

@@ -0,0 +1,16 @@
+import '../../setup-fixture';
+
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
+import { ReferalForm } from './ReferalForm';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ReferalForm
+        link="https://www.rshb.ru/business/dlya-druga/rko"
+        button={{ text: 'Получить ссылку' }}
+      />
+      <PopupManager />
+    </div>
+  ),
+};

package/src/components/ReferalForm/ReferalForm.tsx

@@ -0,0 +1,78 @@
+import { useCallback, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm/useForm';
+import { ApplicationFormLayout } from '../../ui-kit/ApplicationFormLayout/ApplicationFormLayout';
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
+import { getFormValidator } from '../../ui-kit/FormField/getObjectValidator';
+import { Link } from '../../ui-kit/Link/Link';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { type Option } from '../../ui-kit/Select/Option';
+import { Text } from '../../ui-kit/Text/Text';
+import { UniBlock } from '../../UniBlock/UniBlock';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { type FieldDef } from '../ApplicationForm/ApplicationFormContent';
+import { type ReferalFormContent } from './ReferalFormContent';
+import { sections } from './referalFormData';
+import { renderSections } from './renderSections';
+import { ResultLink } from './ResultLink';
+
+export interface FormState {
+  email?: string;
+  dadataPartyInnSelect?: Option;
+}
+
+export interface ReferalFormProps extends ReferalFormContent, UniBlockProps {}
+
+export const ReferalForm = UniBlock<ReferalFormProps>(({ link = '', button, ...rest }) => {
+  const [isShowResultLink, setIsShowResultLink] = useState(false);
+  const [referalLink, setReferalLink] = useState('');
+  const inputs = useMemo(
+    () => (sections?.flatMap((_) => _?.inputs) || []) as FieldDef[],
+    [sections],
+  );
+
+  const formValidator = useMemo(() => getFormValidator(inputs), [inputs]);
+
+  const handleSubmit = useCallback(async (formData: FormState) => {
+    setReferalLink(
+      `${link}?utm_source=${formData.dadataPartyInnSelect?.text}&utm_mail=${formData.email}`,
+    );
+    setIsShowResultLink(true);
+  }, []);
+
+  const [, { field, onSubmit }] = useForm(
+    {},
+    {
+      resetOnSubmit: true,
+      formValidator,
+      onSubmit: handleSubmit,
+    },
+  );
+
+  return (
+    <ApplicationFormLayout
+      className="container space-y-m col-span-12"
+      title={getTitle(isShowResultLink)}
+      {...rest}
+    >
+      {isShowResultLink ? (
+        <ResultLink link={referalLink} />
+      ) : (
+        <form onSubmit={onSubmit}>
+          {renderSections(sections, field)}
+          <Paragraph size="text-l" font="font-light" color="text-secondary-text">
+            <Text>Нажимая кнопку, вы подтверждаете согласие с </Text>
+            <Link href="/privacy-policy" target="_blank" ariaLabel="условия передачи данных">
+              условиями передачи данных
+            </Link>
+          </Paragraph>
+          <SubmitButton className="w-full @xl:w-auto">
+            {button?.text ?? 'Получить ссылку'}
+          </SubmitButton>
+        </form>
+      )}
+    </ApplicationFormLayout>
+  );
+});
+
+const getTitle = (isShowResultLink = false) =>
+  isShowResultLink ? 'Ваша личная ссылка' : 'Как получить бесплатное обслуживание счёта';

package/src/components/ReferalForm/ReferalForm.ui.json

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

package/src/components/ReferalForm/ReferalFormContent.ts

@@ -0,0 +1,12 @@
+import { type TextProps } from '../../model/HeadlineType';
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+
+/**
+ * @title Форма для создания реферальной ссылки
+ */
+export type ReferalFormContent = UniBlockContent & {
+  /** @title Адрес страницы с заявкой для реферала */
+  link?: string;
+  /** @title Кнопка */
+  button?: TextProps;
+};

package/src/components/ReferalForm/ResultLink.tsx

@@ -0,0 +1,20 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
+import { renderLinkInput } from './renderLinkInput';
+
+type ResultLinkProps = {
+  link: string;
+};
+
+export const ResultLink = JSX<ResultLinkProps>(({ link }) => {
+  return (
+    <div>
+      <div className="@xl:text-center @xl:col-span-2 mb-m">
+        <Text size="text-h6">Скопируйте ссылку и отправьте другу</Text>
+      </div>
+      {renderLinkInput({
+        value: link,
+      })}
+    </div>
+  );
+});

package/src/components/ReferalForm/referalFormData.ts

@@ -0,0 +1,18 @@
+import { type SectionsProps } from '../../model/InputSectionsType';
+
+export const sections: SectionsProps[] = [
+  { title: 'Заполните ваши данные и получите персональную ссылку', inputs: [] },
+  {
+    columns: 2,
+    inputs: [
+      {
+        name: 'dadataPartyInnSelect',
+        required: true,
+      },
+      {
+        name: 'email',
+        required: true,
+      },
+    ],
+  },
+];

package/src/components/ReferalForm/renderLinkInput.tsx

@@ -0,0 +1,37 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { type Picture } from '../../model/Picture';
+import { Img } from '../../ui-kit/Img/Img';
+import { type InputProps } from '../../ui-kit/Input/InputProps';
+import { defaultStyle } from '../../ui-kit/Input/styles';
+import { style } from '../../utils/style';
+
+const icon: Picture = {
+  src: 'CopyIcon.svg',
+  iconVersion: 'normal',
+  size: { width: 20 },
+};
+
+export const renderLinkInput = JSX<InputProps>(({ className, value = '' }) => {
+  const onClick = useCallback(async () => {
+    try {
+      await globalThis.navigator.clipboard.writeText(value);
+    } catch {
+      console.log('Ошибка копирования');
+    }
+  }, []);
+
+  return (
+    <div className={style('relative flex items-center max-w-lg m-auto', className)}>
+      <input
+        className={style('h-14 border-gray text-ellipsis pr-5xl', defaultStyle)}
+        type="text"
+        value={value}
+        disabled={true}
+      />
+      <div role="button" className="absolute right-3" onClick={onClick}>
+        <Img image={icon} />
+      </div>
+    </div>
+  );
+});

package/src/components/ReferalForm/renderSections.tsx

@@ -0,0 +1,18 @@
+import type { FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import type { SectionsProps } from '../../model/InputSectionsType';
+import { getField } from '../../ui-kit/FormField/getField';
+import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
+import { renderTitle } from '../../ui-kit/FormField/renderTitle';
+import { style } from '../../utils/style';
+import { type FieldDef } from '../ApplicationForm/ApplicationFormContent';
+
+export const renderSections = (
+  sections: SectionsProps[],
+  field: FormFieldRegisterer<Record<string, any>>,
+) =>
+  sections.map((_, i) => (
+    <div key={`section-${i}`} className={style(inputColumnStyles(_.columns), 'grid')}>
+      {renderTitle(_.title)}
+      {(_?.inputs || [])?.map(getField<FieldDef>(field))}
+    </div>
+  ));

package/src/hooks/useDadataParty.ts

@@ -9,7 +9,7 @@ export interface DaDataPartyHint {
 }
 
 export const useDadataParty = async (searchQuery: string): Promise<DaDataPartyHint[]> =>
-  (await getDaDataHints({ url: INN_DADATA_URL, query: searchQuery })).map((_) => ({
+  (await getDaDataHints({ url: INN_DADATA_URL, query: searchQuery }))?.map((_) => ({
     fullName: _?.value,
     address: _?.data?.address?.value,
     inn: _?.data?.inn,