@redneckz/wildless-cms-uni-blocks 0.14.745 → 0.14.746

package/mobile/lib/components/CardTransfer/submitCardTransfer.d.ts

@@ -0,0 +1,16 @@
+import { type CardTransferFormType } from './CardTransferContent';
+export declare type CardTransferResponse = Partial<{
+    errorCode: number;
+    errorMessage: string;
+    orderId: string;
+    formUrl: string;
+}>;
+export declare const submitCardTransfer: (typeForm: CardTransferFormType, amount: number) => Promise<CardTransferResponse | null>;
+export declare const isSuccessResponse: (response: CardTransferResponse | null) => response is {
+    orderId: string;
+    formUrl: string;
+};
+export declare const isErrorInResponse: (response: CardTransferResponse | null) => response is {
+    errorCode: number;
+    errorMessage: string;
+};

package/mobile/lib/components/CardTransfer/submitCardTransfer.js

@@ -0,0 +1,39 @@
+import { API_BASE_URI } from '../../api/apiBaseUrl.js';
+import { locationNavigator } from '../../external/locationNavigator.js';
+const paymentURLMap = {
+    private: 'p2p/registerP2P',
+    business: 'b2c/registerB2C',
+};
+const SUCCESS_URL = '/p2p/success';
+const FAIL_URL = '/p2p/success';
+const CURRENCY_CODE = '643';
+const LANGUAGE = 'ru';
+export const submitCardTransfer = async (typeForm, amount) => {
+    const navigator = locationNavigator();
+    const submitBody = {
+        amount: String(amount),
+        currency: CURRENCY_CODE,
+        returnUrl: `${navigator.origin}${SUCCESS_URL}`,
+        failUrl: `${navigator.origin}${FAIL_URL}`,
+        language: LANGUAGE,
+    };
+    const url = `${API_BASE_URI}/payment/${paymentURLMap[typeForm]}`;
+    try {
+        const res = await fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            mode: 'cors',
+            body: JSON.stringify(submitBody),
+        });
+        if (!res.ok) {
+            return null;
+        }
+        return await res.json();
+    }
+    catch (ex) {
+        return null;
+    }
+};
+export const isSuccessResponse = (response) => Boolean(response?.formUrl) && Boolean(response?.orderId);
+export const isErrorInResponse = (response) => Boolean(response?.errorMessage) && response?.errorCode !== 0;
+//# sourceMappingURL=submitCardTransfer.js.map

package/mobile/lib/components/CardTransfer/submitCardTransfer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"submitCardTransfer.js","sourceRoot":"","sources":["../../../src/components/CardTransfer/submitCardTransfer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAkBrE,MAAM,aAAa,GAAyC;IAC1D,OAAO,EAAE,iBAAiB;IAC1B,QAAQ,EAAE,iBAAiB;CAC5B,CAAC;AAEF,MAAM,WAAW,GAAG,cAAc,CAAC;AACnC,MAAM,QAAQ,GAAG,cAAc,CAAC;AAChC,MAAM,aAAa,GAAG,KAAK,CAAC;AAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC;AAEtB,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,EACrC,QAA8B,EAC9B,MAAc,EACwB,EAAE;IACxC,MAAM,SAAS,GAAG,iBAAiB,EAAE,CAAC;IAEtC,MAAM,UAAU,GAA2B;QACzC,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC;QACtB,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,GAAG,SAAS,CAAC,MAAM,GAAG,WAAW,EAAE;QAC9C,OAAO,EAAE,GAAG,SAAS,CAAC,MAAM,GAAG,QAAQ,EAAE;QACzC,QAAQ,EAAE,QAAQ;KACnB,CAAC;IAEF,MAAM,GAAG,GAAG,GAAG,YAAY,YAAY,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;IAEjE,IAAI;QACF,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,GAAG,EAAE;YAC3B,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,EAAE,cAAc,EAAE,kBAAkB,EAAE;YAC/C,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;SACjC,CAAC,CAAC;QAEH,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE;YACX,OAAO,IAAI,CAAC;SACb;QAED,OAAO,MAAM,GAAG,CAAC,IAAI,EAAE,CAAC;KACzB;IAAC,OAAO,EAAE,EAAE;QACX,OAAO,IAAI,CAAC;KACb;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,QAAqC,EACa,EAAE,CACpD,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,IAAI,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AAE3D,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,QAAqC,EACoB,EAAE,CAC3D,OAAO,CAAC,QAAQ,EAAE,YAAY,CAAC,IAAI,QAAQ,EAAE,SAAS,KAAK,CAAC,CAAC"}

package/mobile/lib/components/CardTransfer/useSubmitCardTransfer.d.ts

@@ -0,0 +1,11 @@
+import { type CardTransferFormType } from './CardTransferContent';
+export interface TransactionStore {
+    transaction: {
+        orderId: string;
+        type: 'p2p' | 'b2c';
+        url: string;
+    };
+}
+export declare const useSubmitCardTransfer: (formType: CardTransferFormType) => ({ amount }: {
+    amount: number;
+}) => Promise<void>;

package/mobile/lib/components/CardTransfer/useSubmitCardTransfer.js

@@ -0,0 +1,30 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useSessionStore } from '@redneckz/uni-jsx/lib/Store/useSessionStore';
+import { locationNavigator } from '../../external/locationNavigator.js';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog.js';
+import { isErrorInResponse, isSuccessResponse, submitCardTransfer } from './submitCardTransfer.js';
+import { SubmitFailedDialog } from './SubmitFailedDialog.js';
+export const useSubmitCardTransfer = (formType) => {
+    const responseTypeDialog = useDialog(SubmitFailedDialog);
+    const sessionStore = useSessionStore();
+    const navigator = locationNavigator();
+    const adjustedTypeForm = formType === 'private' ? 'p2p' : 'b2c';
+    return useCallback(async ({ amount }) => {
+        const response = await submitCardTransfer(formType, amount);
+        if (isSuccessResponse(response)) {
+            sessionStore.transaction = {
+                orderId: response.orderId,
+                type: adjustedTypeForm,
+                url: navigator.href,
+            };
+            navigator.assign(`${adjustedTypeForm}/?formUrl=${encodeURIComponent(response.formUrl)}`);
+        }
+        if (isErrorInResponse(response)) {
+            responseTypeDialog.open({
+                errorCode: response.errorCode,
+                errorMessage: response.errorMessage,
+            });
+        }
+    }, [formType]);
+};
+//# sourceMappingURL=useSubmitCardTransfer.js.map

package/mobile/lib/components/CardTransfer/useSubmitCardTransfer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSubmitCardTransfer.js","sourceRoot":"","sources":["../../../src/components/CardTransfer/useSubmitCardTransfer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAEjE,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAChG,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAU1D,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,QAA8B,EAAE,EAAE;IACtE,MAAM,kBAAkB,GAAG,SAAS,CAAC,kBAAkB,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,eAAe,EAAoB,CAAC;IACzD,MAAM,SAAS,GAAG,iBAAiB,EAAE,CAAC;IAEtC,MAAM,gBAAgB,GAAG,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAEhE,OAAO,WAAW,CAChB,KAAK,EAAE,EAAE,MAAM,EAAsB,EAAE,EAAE;QACvC,MAAM,QAAQ,GAAG,MAAM,kBAAkB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAE5D,IAAI,iBAAiB,CAAC,QAAQ,CAAC,EAAE;YAC/B,YAAY,CAAC,WAAW,GAAG;gBACzB,OAAO,EAAE,QAAQ,CAAC,OAAO;gBACzB,IAAI,EAAE,gBAAgB;gBACtB,GAAG,EAAE,SAAS,CAAC,IAAI;aACpB,CAAC;YAEF,SAAS,CAAC,MAAM,CAAC,GAAG,gBAAgB,aAAa,kBAAkB,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;SAC1F;QAED,IAAI,iBAAiB,CAAC,QAAQ,CAAC,EAAE;YAC/B,kBAAkB,CAAC,IAAI,CAAC;gBACtB,SAAS,EAAE,QAAQ,CAAC,SAAS;gBAC7B,YAAY,EAAE,QAAQ,CAAC,YAAY;aACpC,CAAC,CAAC;SACJ;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;AACJ,CAAC,CAAC"}

package/mobile/src/components/CardTransfer/CardTransfer.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useForm } from '../../hooks/useForm/useForm';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
@@ -8,17 +9,13 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { type CardTransferContent } from './CardTransferContent';
+import { useSubmitCardTransfer } from './useSubmitCardTransfer';
 
 const DEFAULT_TITLE = 'Укажите сумму перевода';
 const DEFAULT_LABEL = 'Сумма перевода';
 const MAX_AMOUNT = 300000;
 const MIN_AMOUNT = 1;
 
-const FORM_URL_MAP = {
-  private: 'https://old.rshb.ru/p2p/',
-  business: 'https://old.rshb.ru/smallbusiness/p2p/',
-};
-
 const INITIAL_FORM_STATE = {
   amount: 1500,
 };
@@ -34,9 +31,15 @@ export const CardTransfer = JSX<CardTransferProps>(
     formType = 'private',
     ...rest
   }) => {
-    const [{ amount }, { field }] = useForm(INITIAL_FORM_STATE);
-    const [isDisabled, setDisabled] = useState(false);
+    const [isDisabled, { setValue: setDisabled }] = useBool(false);
+
+    const handleSubmit = useSubmitCardTransfer(formType);
+
+    const [{ amount }, { field, onSubmit }] = useForm(INITIAL_FORM_STATE, {
+      onSubmit: handleSubmit,
+    });
 
+    // TODO: dont set state in useEffect
     useEffect(() => {
       setDisabled(amount <= 0);
     }, [amount]);
@@ -54,7 +57,7 @@ export const CardTransfer = JSX<CardTransferProps>(
             title={title}
           />
         ) : null}
-        <form className="w-full xl:max-w-[468px]" method="POST" action={FORM_URL_MAP[formType]}>
+        <form className="w-full xl:max-w-[468px]" method="POST" onSubmit={onSubmit}>
           <CurrencyInput
             valid={!isDisabled}
             label={label}

package/mobile/src/components/CardTransfer/CardTransferContent.ts

@@ -1,6 +1,8 @@
 import { type LabelProps, type TextProps, type TitleProps } from '../../model/HeadlineType';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
+export type CardTransferFormType = 'private' | 'business';
+
 /**
  * @title Перевод с карты на карту
  */
@@ -13,5 +15,5 @@ export type CardTransferContent = UniBlockContent &
      * @title Тип формы
      * @enumNames ['Частные клиенты', 'Бизнес-клиенты']
      */
-    formType?: 'private' | 'business';
+    formType?: CardTransferFormType;
   };

package/mobile/src/components/CardTransfer/SubmitFailedDialog.tsx

@@ -0,0 +1,42 @@
+import { Dialog } from '../../ui-kit/DialogManager/Dialog';
+import { Img } from '../../ui-kit/Img/Img';
+import { Headline } from '../Headline/Headline';
+
+export interface FormResponseDialogProps {
+  onClose?: () => void;
+  errorCode?: number;
+  errorMessage?: string;
+}
+
+const FAILED_TITLE = 'Ошибка перевода';
+
+export const SubmitFailedDialog = ({
+  onClose,
+  errorCode,
+  errorMessage,
+}: FormResponseDialogProps) => {
+  const description = errorCode ? `Код ошибки - ${errorCode}` : 'Пожалуйста, повторите позднее';
+
+  return (
+    <Dialog className="my-6xl max-w-lg w-full min-h-fit mx-auto" onClose={onClose}>
+      <div className="flex flex-col gap-lg items-center rounded-md space-x-m">
+        <Img image={{ icon: 'ResponseFailIcon', iconVersion: 'normal' }} width="136" height="136" />
+        <Headline
+          className="w-full"
+          title={FAILED_TITLE}
+          description={description}
+          headlineVersion="XS"
+          isEmbedded={true}
+        />
+        {errorMessage ? (
+          <div className="bg-secondary-dark rounded-xl px-4 pt-4 pb-8 grid gap-4 grid-cols-12">
+            <div className="col-span-8"> {errorMessage}</div>
+            <div className="col-span-4">
+              <Img image={{ icon: 'ResponseFailIcon', iconVersion: 'normal' }} />
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </Dialog>
+  );
+};

package/mobile/src/components/CardTransfer/submitCardTransfer.ts

@@ -0,0 +1,72 @@
+import { API_BASE_URI } from '../../api/apiBaseUrl';
+import { locationNavigator } from '../../external/locationNavigator';
+import { type CardTransferFormType } from './CardTransferContent';
+
+type CardTransferSubmitBody = {
+  amount: string;
+  currency: string;
+  returnUrl: string;
+  failUrl: string;
+  language: string;
+};
+
+export type CardTransferResponse = Partial<{
+  errorCode: number;
+  errorMessage: string;
+  orderId: string;
+  formUrl: string;
+}>;
+
+const paymentURLMap: Record<CardTransferFormType, string> = {
+  private: 'p2p/registerP2P',
+  business: 'b2c/registerB2C',
+};
+
+const SUCCESS_URL = '/p2p/success';
+const FAIL_URL = '/p2p/success';
+const CURRENCY_CODE = '643';
+const LANGUAGE = 'ru';
+
+export const submitCardTransfer = async (
+  typeForm: CardTransferFormType,
+  amount: number,
+): Promise<CardTransferResponse | null> => {
+  const navigator = locationNavigator();
+
+  const submitBody: CardTransferSubmitBody = {
+    amount: String(amount),
+    currency: CURRENCY_CODE,
+    returnUrl: `${navigator.origin}${SUCCESS_URL}`,
+    failUrl: `${navigator.origin}${FAIL_URL}`,
+    language: LANGUAGE,
+  };
+
+  const url = `${API_BASE_URI}/payment/${paymentURLMap[typeForm]}`;
+
+  try {
+    const res = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      mode: 'cors',
+      body: JSON.stringify(submitBody),
+    });
+
+    if (!res.ok) {
+      return null;
+    }
+
+    return await res.json();
+  } catch (ex) {
+    return null;
+  }
+};
+
+export const isSuccessResponse = (
+  response: CardTransferResponse | null,
+): response is { orderId: string; formUrl: string } =>
+  Boolean(response?.formUrl) && Boolean(response?.orderId);
+
+export const isErrorInResponse = (
+  response: CardTransferResponse | null,
+): response is { errorCode: number; errorMessage: string } =>
+  Boolean(response?.errorMessage) && response?.errorCode !== 0;

package/mobile/src/components/CardTransfer/useSubmitCardTransfer.tsx

@@ -0,0 +1,47 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useSessionStore } from '@redneckz/uni-jsx/lib/Store/useSessionStore';
+import { locationNavigator } from '../../external/locationNavigator';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
+import { type CardTransferFormType } from './CardTransferContent';
+import { isErrorInResponse, isSuccessResponse, submitCardTransfer } from './submitCardTransfer';
+import { SubmitFailedDialog } from './SubmitFailedDialog';
+
+export interface TransactionStore {
+  transaction: {
+    orderId: string;
+    type: 'p2p' | 'b2c';
+    url: string;
+  };
+}
+
+export const useSubmitCardTransfer = (formType: CardTransferFormType) => {
+  const responseTypeDialog = useDialog(SubmitFailedDialog);
+  const sessionStore = useSessionStore<TransactionStore>();
+  const navigator = locationNavigator();
+
+  const adjustedTypeForm = formType === 'private' ? 'p2p' : 'b2c';
+
+  return useCallback(
+    async ({ amount }: { amount: number }) => {
+      const response = await submitCardTransfer(formType, amount);
+
+      if (isSuccessResponse(response)) {
+        sessionStore.transaction = {
+          orderId: response.orderId,
+          type: adjustedTypeForm,
+          url: navigator.href,
+        };
+
+        navigator.assign(`${adjustedTypeForm}/?formUrl=${encodeURIComponent(response.formUrl)}`);
+      }
+
+      if (isErrorInResponse(response)) {
+        responseTypeDialog.open({
+          errorCode: response.errorCode,
+          errorMessage: response.errorMessage,
+        });
+      }
+    },
+    [formType],
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.745",
+  "version": "0.14.746",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

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

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
 import { type LinkButtonProps } from '../../ui-kit/LinkButton/LinkButtonProps';
 import { CardTransfer } from './CardTransfer';
 
@@ -8,9 +9,16 @@ const button: LinkButtonProps = {
 };
 
 export default {
-  default: (
-    <div className="container grid grid-cols-12">
-      <CardTransfer className="col-span-12" button={button} />
+  private: (
+    <div>
+      <CardTransfer button={button} formType="private" />
+      <DialogManager />
+    </div>
+  ),
+  business: (
+    <div>
+      <CardTransfer button={button} formType="business" />
+      <DialogManager />
     </div>
   ),
 };

package/src/components/CardTransfer/CardTransfer.fixture.tsx

@@ -1,5 +1,6 @@
 import '../../setup-fixture';
 
+import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
 import { type LinkButtonProps } from '../../ui-kit/LinkButton/LinkButtonProps';
 import { CardTransfer } from './CardTransfer';
 
@@ -9,5 +10,16 @@ const button: LinkButtonProps = {
 };
 
 export default {
-  default: <CardTransfer button={button} />,
+  private: (
+    <div>
+      <CardTransfer button={button} formType="private" />
+      <DialogManager />
+    </div>
+  ),
+  business: (
+    <div>
+      <CardTransfer button={button} formType="business" />
+      <DialogManager />
+    </div>
+  ),
 };

package/src/components/CardTransfer/CardTransfer.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useForm } from '../../hooks/useForm/useForm';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
@@ -8,17 +9,13 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { type CardTransferContent } from './CardTransferContent';
+import { useSubmitCardTransfer } from './useSubmitCardTransfer';
 
 const DEFAULT_TITLE = 'Укажите сумму перевода';
 const DEFAULT_LABEL = 'Сумма перевода';
 const MAX_AMOUNT = 300000;
 const MIN_AMOUNT = 1;
 
-const FORM_URL_MAP = {
-  private: 'https://old.rshb.ru/p2p/',
-  business: 'https://old.rshb.ru/smallbusiness/p2p/',
-};
-
 const INITIAL_FORM_STATE = {
   amount: 1500,
 };
@@ -34,9 +31,15 @@ export const CardTransfer = JSX<CardTransferProps>(
     formType = 'private',
     ...rest
   }) => {
-    const [{ amount }, { field }] = useForm(INITIAL_FORM_STATE);
-    const [isDisabled, setDisabled] = useState(false);
+    const [isDisabled, { setValue: setDisabled }] = useBool(false);
+
+    const handleSubmit = useSubmitCardTransfer(formType);
+
+    const [{ amount }, { field, onSubmit }] = useForm(INITIAL_FORM_STATE, {
+      onSubmit: handleSubmit,
+    });
 
+    // TODO: dont set state in useEffect
     useEffect(() => {
       setDisabled(amount <= 0);
     }, [amount]);
@@ -54,7 +57,7 @@ export const CardTransfer = JSX<CardTransferProps>(
             title={title}
           />
         ) : null}
-        <form className="w-full xl:max-w-[468px]" method="POST" action={FORM_URL_MAP[formType]}>
+        <form className="w-full xl:max-w-[468px]" method="POST" onSubmit={onSubmit}>
           <CurrencyInput
             valid={!isDisabled}
             label={label}

package/src/components/CardTransfer/CardTransferContent.ts

@@ -1,6 +1,8 @@
 import { type LabelProps, type TextProps, type TitleProps } from '../../model/HeadlineType';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
+export type CardTransferFormType = 'private' | 'business';
+
 /**
  * @title Перевод с карты на карту
  */
@@ -13,5 +15,5 @@ export type CardTransferContent = UniBlockContent &
      * @title Тип формы
      * @enumNames ['Частные клиенты', 'Бизнес-клиенты']
      */
-    formType?: 'private' | 'business';
+    formType?: CardTransferFormType;
   };

package/src/components/CardTransfer/SubmitFailedDialog.tsx

@@ -0,0 +1,42 @@
+import { Dialog } from '../../ui-kit/DialogManager/Dialog';
+import { Img } from '../../ui-kit/Img/Img';
+import { Headline } from '../Headline/Headline';
+
+export interface FormResponseDialogProps {
+  onClose?: () => void;
+  errorCode?: number;
+  errorMessage?: string;
+}
+
+const FAILED_TITLE = 'Ошибка перевода';
+
+export const SubmitFailedDialog = ({
+  onClose,
+  errorCode,
+  errorMessage,
+}: FormResponseDialogProps) => {
+  const description = errorCode ? `Код ошибки - ${errorCode}` : 'Пожалуйста, повторите позднее';
+
+  return (
+    <Dialog className="my-6xl max-w-lg w-full min-h-fit mx-auto" onClose={onClose}>
+      <div className="flex flex-col gap-lg items-center rounded-md space-x-m">
+        <Img image={{ icon: 'ResponseFailIcon', iconVersion: 'normal' }} width="136" height="136" />
+        <Headline
+          className="w-full"
+          title={FAILED_TITLE}
+          description={description}
+          headlineVersion="XS"
+          isEmbedded={true}
+        />
+        {errorMessage ? (
+          <div className="bg-secondary-dark rounded-xl px-4 pt-4 pb-8 grid gap-4 grid-cols-12">
+            <div className="col-span-8"> {errorMessage}</div>
+            <div className="col-span-4">
+              <Img image={{ icon: 'ResponseFailIcon', iconVersion: 'normal' }} />
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </Dialog>
+  );
+};

package/src/components/CardTransfer/submitCardTransfer.ts

@@ -0,0 +1,72 @@
+import { API_BASE_URI } from '../../api/apiBaseUrl';
+import { locationNavigator } from '../../external/locationNavigator';
+import { type CardTransferFormType } from './CardTransferContent';
+
+type CardTransferSubmitBody = {
+  amount: string;
+  currency: string;
+  returnUrl: string;
+  failUrl: string;
+  language: string;
+};
+
+export type CardTransferResponse = Partial<{
+  errorCode: number;
+  errorMessage: string;
+  orderId: string;
+  formUrl: string;
+}>;
+
+const paymentURLMap: Record<CardTransferFormType, string> = {
+  private: 'p2p/registerP2P',
+  business: 'b2c/registerB2C',
+};
+
+const SUCCESS_URL = '/p2p/success';
+const FAIL_URL = '/p2p/success';
+const CURRENCY_CODE = '643';
+const LANGUAGE = 'ru';
+
+export const submitCardTransfer = async (
+  typeForm: CardTransferFormType,
+  amount: number,
+): Promise<CardTransferResponse | null> => {
+  const navigator = locationNavigator();
+
+  const submitBody: CardTransferSubmitBody = {
+    amount: String(amount),
+    currency: CURRENCY_CODE,
+    returnUrl: `${navigator.origin}${SUCCESS_URL}`,
+    failUrl: `${navigator.origin}${FAIL_URL}`,
+    language: LANGUAGE,
+  };
+
+  const url = `${API_BASE_URI}/payment/${paymentURLMap[typeForm]}`;
+
+  try {
+    const res = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      mode: 'cors',
+      body: JSON.stringify(submitBody),
+    });
+
+    if (!res.ok) {
+      return null;
+    }
+
+    return await res.json();
+  } catch (ex) {
+    return null;
+  }
+};
+
+export const isSuccessResponse = (
+  response: CardTransferResponse | null,
+): response is { orderId: string; formUrl: string } =>
+  Boolean(response?.formUrl) && Boolean(response?.orderId);
+
+export const isErrorInResponse = (
+  response: CardTransferResponse | null,
+): response is { errorCode: number; errorMessage: string } =>
+  Boolean(response?.errorMessage) && response?.errorCode !== 0;

package/src/components/CardTransfer/useSubmitCardTransfer.tsx

@@ -0,0 +1,47 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useSessionStore } from '@redneckz/uni-jsx/lib/Store/useSessionStore';
+import { locationNavigator } from '../../external/locationNavigator';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
+import { type CardTransferFormType } from './CardTransferContent';
+import { isErrorInResponse, isSuccessResponse, submitCardTransfer } from './submitCardTransfer';
+import { SubmitFailedDialog } from './SubmitFailedDialog';
+
+export interface TransactionStore {
+  transaction: {
+    orderId: string;
+    type: 'p2p' | 'b2c';
+    url: string;
+  };
+}
+
+export const useSubmitCardTransfer = (formType: CardTransferFormType) => {
+  const responseTypeDialog = useDialog(SubmitFailedDialog);
+  const sessionStore = useSessionStore<TransactionStore>();
+  const navigator = locationNavigator();
+
+  const adjustedTypeForm = formType === 'private' ? 'p2p' : 'b2c';
+
+  return useCallback(
+    async ({ amount }: { amount: number }) => {
+      const response = await submitCardTransfer(formType, amount);
+
+      if (isSuccessResponse(response)) {
+        sessionStore.transaction = {
+          orderId: response.orderId,
+          type: adjustedTypeForm,
+          url: navigator.href,
+        };
+
+        navigator.assign(`${adjustedTypeForm}/?formUrl=${encodeURIComponent(response.formUrl)}`);
+      }
+
+      if (isErrorInResponse(response)) {
+        responseTypeDialog.open({
+          errorCode: response.errorCode,
+          errorMessage: response.errorMessage,
+        });
+      }
+    },
+    [formType],
+  );
+};