@redneckz/wildless-cms-uni-blocks 0.14.670 → 0.14.672

package/package.json

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

package/src/api/RetailAPI/checkCaptcha.ts

@@ -5,4 +5,6 @@ export type CapchaTextType = {
 };
 
 export const checkCaptcha = (body: CapchaTextType) =>
-  doRequest<Response>('/sms/checkCaptcha', 'POST', body);
+  doRequest('/sms/checkCaptcha', 'POST', body)
+    .then((res) => res.text())
+    .then((text) => text !== 'ERROR');

package/src/api/RetailAPI/checkCode.ts

@@ -1,4 +1,4 @@
-import { doRequest } from './doRequest';
+import { fetchRetailJSON } from './doRequest';
 
 export type CheckCodeBody = {
   smsText: string;
@@ -14,9 +14,11 @@ export type CheckCodeResponse = {
 };
 
 export const checkCode = async (body: CheckCodeBody) =>
-  doRequest<CheckCodeResponse>('/sms/checkCode', 'POST', body).then(saveToken);
+  fetchRetailJSON<CheckCodeResponse>('/sms/checkCode', 'POST', body).then(saveToken);
 
-const saveToken = (data: CheckCodeResponse) => {
-  globalThis.sessionStorage.setItem('accessToken', data.access_token);
-  globalThis.sessionStorage.setItem('refreshToken', data.refresh_token);
+const saveToken = (data: CheckCodeResponse | null) => {
+  if (data) {
+    globalThis.sessionStorage.setItem('accessToken', data.access_token);
+    globalThis.sessionStorage.setItem('refreshToken', data.refresh_token);
+  }
 };

package/src/api/RetailAPI/createCaptcha.ts

@@ -1,4 +1,6 @@
 import { doRequest } from './doRequest';
 
 export const createCaptcha = (phoneNumber: string) =>
-  doRequest<Response>(`/sms/createCaptcha?phoneNumber=${encodeURIComponent(phoneNumber)}`, 'GET');
+  doRequest(`/sms/createCaptcha?phoneNumber=${encodeURIComponent(phoneNumber)}`, 'GET').then(
+    async (res) => (res ? await res.blob() : new Blob()),
+  );

package/src/api/RetailAPI/createDraftTask.ts

@@ -1,4 +1,4 @@
-import { doRequest } from './doRequest';
+import { fetchRetailJSON } from './doRequest';
 
 export type CreateDraftTaskBody = {
   profileId: number;
@@ -10,5 +10,14 @@ export type CreateDraftTaskResponse = {
   participantId: number;
 };
 
-export const createDraftTask = (body: CreateDraftTaskBody) =>
-  doRequest<CreateDraftTaskResponse>('/user-data/createDraftTask', 'POST', body);
+export const createDraftTask = async (
+  body: CreateDraftTaskBody,
+): Promise<CreateDraftTaskResponse> => {
+  const res = await fetchRetailJSON<CreateDraftTaskResponse>(
+    '/user-data/createDraftTask',
+    'POST',
+    body,
+  );
+
+  return res || ({} as CreateDraftTaskResponse);
+};

package/src/api/RetailAPI/createUserProfile.ts

@@ -1,4 +1,4 @@
-import { doRequest } from './doRequest';
+import { fetchRetailJSON } from './doRequest';
 
 export interface RetailUserProfile {
   id?: number;
@@ -10,4 +10,6 @@ interface CreateUserProfileType {
 }
 
 export const createUserProfile = (body: CreateUserProfileType) =>
-  doRequest<CreateUserProfileType>('/public-data/createUserProfile', 'POST', body);
+  fetchRetailJSON<CreateUserProfileType>('/public-data/createUserProfile', 'POST', body).then(
+    (res) => res?.profile?.id || null,
+  );

package/src/api/RetailAPI/doRequest.ts

@@ -1,11 +1,27 @@
 import { API_BASE_URI } from '../apiBaseUrl';
 
-export async function doRequest<R>(
+export const fetchRetailJSON = async <R>(
   url: string,
   method: 'POST' | 'GET' | 'PUT',
   body?: any,
-): Promise<R> {
-  const response = await fetch(`${API_BASE_URI}${url}`, {
+): Promise<R | null> => {
+  try {
+    const response = await doRequest(url, method, body);
+
+    return response.json();
+  } catch (err) {
+    console.error(err);
+
+    return null;
+  }
+};
+
+export async function doRequest(
+  url: string,
+  method: 'POST' | 'GET' | 'PUT',
+  body?: any,
+): Promise<Response> {
+  return globalThis?.fetch?.(`${API_BASE_URI}${url}`, {
     method,
     headers: {
       'Content-Type': 'application/json',
@@ -14,14 +30,8 @@ export async function doRequest<R>(
     credentials: 'include',
     body: body ? JSON.stringify(body) : null,
   });
-
-  // TODO: add error handling
-  return isJSON(response) ? response.json() : response;
 }
 
-// TODO: Need delete isJSON
-const isJSON = (response: Response) => response.headers.get('Content-Type') === 'application/json';
-
 const getAuthorizationHeaders = () => {
   const token = sessionStorage.getItem('accessToken');
 

package/src/api/RetailAPI/feedbackById.ts

@@ -1,10 +1,10 @@
 import { doRequest } from './doRequest';
 
 export const feedbackById = async (id: number, convertToPng = false) => {
-  const response: Response = await doRequest(
+  const response = await doRequest(
     `/feedback/file?id=${encodeURIComponent(id)}&convertToPngFlg=${convertToPng}`,
     'GET',
   );
 
-  return await response.blob();
+  return response ? await response.blob() : new Blob();
 };

package/src/api/RetailAPI/getCardTypes.ts

@@ -0,0 +1,20 @@
+import { doRequest } from './doRequest';
+
+export type CardTypeData = {
+  type: string;
+  key: string;
+  value: string;
+  displayOrder: number;
+  description: string;
+};
+
+export const getCardTypes = async (paymentSystemType: string) => {
+  const response: Response = await doRequest('/dictionaryFiltered', 'POST', {
+    type: 'CARD_TYPE',
+    presets: { paymentSystemType, creditProgramId: 13 },
+  });
+
+  const data: CardTypeData[] = await response?.json();
+
+  return data;
+};

package/src/api/RetailAPI/getLink.ts

@@ -1,4 +1,4 @@
-import { doRequest } from './doRequest';
+import { fetchRetailJSON } from './doRequest';
 
 export type GetLinkBody = {
   redirectUri: string;
@@ -9,4 +9,4 @@ export type GetLinkResponse = {
 };
 
 export const getLink = (body: GetLinkBody) =>
-  doRequest<GetLinkResponse>('/esia/getLink', 'POST', body);
+  fetchRetailJSON<GetLinkResponse>('/esia/getLink', 'POST', body);

package/src/api/RetailAPI/getPaymentSystems.ts

@@ -0,0 +1,21 @@
+import { doRequest } from './doRequest';
+
+type PaymentSystemResponse = {
+  paymentSystems?: {
+    name: string;
+    type: string;
+  }[];
+};
+
+export const getPaymentSystems = async () => {
+  const response: Response = await doRequest('/public-data/creditProgramConditions', 'POST', {
+    creditProgramId: 13,
+  });
+
+  const data: PaymentSystemResponse = await response?.json();
+
+  return data?.paymentSystems?.map((paymentSystem) => ({
+    id: paymentSystem.type,
+    text: paymentSystem.name,
+  }));
+};

package/src/api/RetailAPI/getTaskStatus.ts

@@ -1,4 +1,4 @@
-import { doRequest } from './doRequest';
+import { fetchRetailJSON } from './doRequest';
 
 export enum STATUS_TYPE {
   process = 'IN_PROCESS',
@@ -7,10 +7,10 @@ export enum STATUS_TYPE {
   rework = 'REVISION',
 }
 
-interface GetTaskStatusResponse {
+export interface GetTaskStatusResponse {
   statusCd: STATUS_TYPE;
   taskId: number;
 }
 
 export const getTaskStatus = (body: { taskId: number | null }) =>
-  doRequest<GetTaskStatusResponse>('/user-data/getTaskStatus', 'POST', body);
+  fetchRetailJSON<GetTaskStatusResponse>('/user-data/getTaskStatus', 'POST', body);

package/src/api/RetailAPI/regionOffices.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_CENTER_COORDS } from './../../ui-kit/YandexMap/YandexMap';
-import { doRequest } from './doRequest';
+import { fetchRetailJSON } from './doRequest';
 
 export type OfficeType = {
   address?: string;
@@ -18,19 +18,25 @@ export interface RegionOfficesResponseType {
   offices: OfficeType[];
 }
 
-export const regionOffices = async (regionKey: string) => {
-  const response: Response = await doRequest('/public-data/regionOffices', 'POST', {
-    regionRfCd: {
-      key: regionKey,
+export const fetchRegionOffices = async (regionKey: string): Promise<OfficeType[]> => {
+  const response = await fetchRetailJSON<RegionOfficesResponseType>(
+    '/public-data/regionOffices',
+    'POST',
+    {
+      regionRfCd: {
+        key: regionKey,
+      },
+      cashCardFlg: true,
     },
-    cashCardFlg: true,
-  });
+  );
 
-  return await response.json().then((_) =>
-    _?.offices?.map((office: OfficeType) => ({
+  return (
+    response?.offices?.map((office: OfficeType) => ({
       ...office,
-      gpsLatitude: (office.latitude ?? DEFAULT_CENTER_COORDS[0]).toString().replace(',', '.'),
-      gpsLongitude: (office.longitude ?? DEFAULT_CENTER_COORDS[1]).toString().replace(',', '.'),
-    })),
+      gpsLatitude: formatCoordinate(office.latitude ?? DEFAULT_CENTER_COORDS[0]),
+      gpsLongitude: formatCoordinate(office.longitude ?? DEFAULT_CENTER_COORDS[1]),
+    })) || []
   );
 };
+
+const formatCoordinate = (coordinate: number) => Number(coordinate.toString().replace(',', '.'));

package/src/api/RetailAPI/sendCode.ts

@@ -1,4 +1,4 @@
-import { doRequest } from './doRequest';
+import { fetchRetailJSON } from './doRequest';
 import { type StatusType } from './StatusType';
 
 export type SendCodeBody = {
@@ -8,5 +8,17 @@ export type SendCodeBody = {
   };
 };
 
+type SendCodeErrorResult = { errorMessage: string };
+
 export const sendCode = (body: SendCodeBody) =>
-  doRequest<StatusType | { errorMessage: string }>('/sms/sendCode', 'POST', body);
+  fetchRetailJSON<StatusType | SendCodeErrorResult>('/sms/sendCode', 'POST', body).then(
+    (res) => !isErrorResult(res, body.phoneNumber),
+  );
+
+const isErrorResult = (
+  res: StatusType | SendCodeErrorResult | null,
+  phoneNumber: string,
+): res is SendCodeErrorResult =>
+  Boolean(res) &&
+  typeof res !== 'string' &&
+  Boolean(res?.errorMessage.startsWith(`Too many request for phoneNumber [${phoneNumber}]`));

package/src/api/RetailAPI/sendSignalToProcess.ts

@@ -10,10 +10,5 @@ interface SendSignalToProcess {
   taskId: number | null;
 }
 
-interface SendSignalToProcessResponse {
-  statusCd: string;
-  taskId: number;
-}
-
 export const sendSignalToProcess = (body: SendSignalToProcess) =>
-  doRequest<SendSignalToProcessResponse>('/user-data/sendSignalToProcess', 'POST', body);
+  doRequest('/user-data/sendSignalToProcess', 'POST', body);

package/src/api/RetailAPI/updateProfileEsia.ts

@@ -1,4 +1,4 @@
-import { doRequest } from './doRequest';
+import { fetchRetailJSON } from './doRequest';
 
 export type UpdateProfileEsiaBody = {
   code: string;
@@ -68,4 +68,4 @@ export type UpdateProfileEsiaResponse = {
 };
 
 export const updateProfileEsia = (body: UpdateProfileEsiaBody) =>
-  doRequest<UpdateProfileEsiaResponse>('/esia/updateProfileEsia', 'POST', body);
+  fetchRetailJSON<UpdateProfileEsiaResponse>('/esia/updateProfileEsia', 'POST', body);

package/src/api/RetailAPI/updateRefreshToken.ts

@@ -21,21 +21,21 @@ export const updateRefreshToken = () => {
   }
 
   const updateTokenRequest = async () => {
-    const res = await doRequest<UpdateRefreshTokenBody | Response>('/auth/refresh', 'POST', {
+    const res = await doRequest('/auth/refresh', 'POST', {
       // eslint-disable-next-line camelcase
       refresh_token: refreshToken,
       // eslint-disable-next-line camelcase
       access_token: accessToken,
     });
 
-    if (res instanceof Response) {
+    if (res) {
       handleStatus(res.status);
 
-      return;
-    }
+      const data: UpdateRefreshTokenBody = await res.json();
 
-    globalThis.sessionStorage.setItem('refreshToken', res.refresh_token);
-    globalThis.sessionStorage.setItem('accessToken', res.access_token);
+      globalThis.sessionStorage.setItem('refreshToken', data.refresh_token);
+      globalThis.sessionStorage.setItem('accessToken', data.access_token);
+    }
   };
 
   updateTokenRequest();

package/src/api/RetailAPI/updateUserProfile.ts

@@ -1,4 +1,4 @@
-import { doRequest } from './doRequest';
+import { fetchRetailJSON } from './doRequest';
 import { type CreateUserProfileResponse } from './updateUserTask';
 
 export type UpdateUserProfileBody = {
@@ -23,4 +23,4 @@ export type UpdateUserProfileBody = {
 };
 
 export const updateUserProfile = (body: UpdateUserProfileBody) =>
-  doRequest<CreateUserProfileResponse>('/user-data/updateUserProfile', 'PUT', body);
+  fetchRetailJSON<CreateUserProfileResponse>('/user-data/updateUserProfile', 'PUT', body);

package/src/api/RetailAPI/updateUserTask.ts

@@ -1,5 +1,5 @@
 import { type Option } from '../../ui-kit/Select/Option';
-import { doRequest } from './doRequest';
+import { fetchRetailJSON } from './doRequest';
 
 type ParticipantAddress = {
   addressType: {
@@ -140,4 +140,4 @@ export type CreateUserProfileResponse = {
 };
 
 export const updateUserTask = (body: UpdateUserTaskBody) =>
-  doRequest<CreateUserProfileResponse>('/user-data/updateUserTask', 'PUT', body);
+  fetchRetailJSON<CreateUserProfileResponse>('/user-data/updateUserTask', 'PUT', body);

package/src/components/ApplicationLeadForm/useApplicationLeadApi.ts

@@ -52,9 +52,7 @@ export const useApplicationLeadApi = ({
     }
 
     try {
-      const {
-        profile: { id: profileId },
-      } = await createUserProfile({
+      const profileId = await createUserProfile({
         profile: { phone: formatPhone(formData.phone as string) },
       });
 
@@ -111,6 +109,7 @@ const updateUserData = async ({
   const transformedForm = transformOtherConsentsField(formData);
 
   await updateUserProfile(getUpdateUserProfileData(profileId, transformedForm));
+
   const { taskId, participantId } = await createDraftTask({
     profileId,
     programId,
@@ -124,6 +123,7 @@ const updateUserData = async ({
       formData: transformedForm,
     }),
   );
+
   saveUserData(participantId, taskId, profileId);
   saveForm(formData);
 };

package/src/components/ApplicationLeadForm/useInitApplicationLead.ts

@@ -22,10 +22,11 @@ export const useInitApplicationLead = (nextStepLink: string) => {
         redirectUri: globalThis.location?.href,
       });
 
-      setLeadForm({
-        ...leadForm,
-        ...parseEsiaProfile(data),
-      });
+      data &&
+        setLeadForm({
+          ...leadForm,
+          ...parseEsiaProfile(data),
+        });
 
       globalThis.location.href = nextStepLink;
     }

package/src/components/CreditCardForm/CreditCardFormStatusTracker.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { getTaskStatus, STATUS_TYPE } from '../../api/RetailAPI/getTaskStatus';
 import { sendSignalToProcess, type SignalType } from '../../api/RetailAPI/sendSignalToProcess';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
@@ -24,13 +24,14 @@ export const CreditCardFormStatusTracker = JSX(() => {
       }
     })();
 
-    const trackStatus = () =>
-      getTaskStatus({ taskId }).then((res) => {
-        if (res.statusCd && res.statusCd !== STATUS_TYPE.process) {
-          clearInterval(pullingInterval);
-          setStatus(res.statusCd);
-        }
-      });
+    const trackStatus = useCallback(async () => {
+      const res = await getTaskStatus({ taskId });
+
+      if (res && res?.statusCd !== STATUS_TYPE.process) {
+        clearInterval(pullingInterval);
+        setStatus(res.statusCd);
+      }
+    }, []);
 
     const pullingInterval = setInterval(trackStatus, 30000);
   }, []);

package/src/components/CreditCardForm/formStateMap.tsx

@@ -1,9 +1,8 @@
-import { PAYMENT_SYSTEM_TYPES } from '../../ui-kit/FormField/Fields/PaymentSystemField';
 import { type FormState } from '../ApplicationLeadForm/getInitialFormState';
 
 export const formStateMap: Partial<FormState>[] = [
   {
-    paymentSystem: PAYMENT_SYSTEM_TYPES[0].id,
+    paymentSystem: '',
     currency: 'rub',
     codeWord: '',
   },

package/src/components/CreditForm/CreditFormStatusTracker.tsx

@@ -27,7 +27,7 @@ export const CreditFormStatusTracker = JSX(() => {
     const trackStatus = () =>
       taskId &&
       getTaskStatus({ taskId }).then((res) => {
-        if (res.statusCd && res.statusCd !== STATUS_TYPE.process) {
+        if (res?.statusCd && res.statusCd !== STATUS_TYPE.process) {
           clearInterval(pullingInterval);
           setStatus(res.statusCd);
         }

package/src/ui-kit/CaptchaDialog/CaptchaDialog.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { checkCaptcha } from '../../api/RetailAPI/checkCaptcha';
+import { createCaptcha } from '../../api/RetailAPI/createCaptcha';
 import { Button } from '../Button/Button';
 import { Dialog } from '../DialogManager/Dialog';
 import { Icon } from '../Icon/Icon';
 import { Input } from '../Input/Input';
 import { Logo } from '../Logo/Logo';
-import { handleCheckCaptcha } from './handleCheckCaptcha';
-import { handleCreateCaptcha } from './handleCreateCaptcha';
 
 export interface CaptchaDialogProps {
   phoneNumber: string;
@@ -21,10 +21,23 @@ export const CaptchaDialog = JSX<CaptchaDialogProps>(
     const [code, setCode] = useState('');
     const [hasError, setHasError] = useState(false);
 
-    useEffect(() => {
-      handleCreateCaptcha(setCaptcha, phoneNumber);
+    const handleCheckCaptcha = useCallback(async () => {
+      const isValidCode = await checkCaptcha({ captchaText: code });
+
+      if (isValidCode) {
+        sendCode?.();
+        close?.();
+      } else {
+        setHasError(isValidCode);
+      }
+    }, []);
+
+    const handleCreateCaptcha = useCallback(() => {
+      (async () => setCaptcha(URL.createObjectURL(await createCaptcha(phoneNumber))))();
     }, []);
 
+    useEffect(handleCreateCaptcha, []);
+
     return (
       <Dialog
         head={<Logo />}
@@ -35,7 +48,7 @@ export const CaptchaDialog = JSX<CaptchaDialogProps>(
           <div className="flex h-36 w-72">
             <img className="grow" src={captcha}></img>
             <div
-              onClick={() => handleCreateCaptcha(setCaptcha, phoneNumber)}
+              onClick={handleCreateCaptcha}
               className="flex w-8 items-center justify-center cursor-pointer"
             >
               <Icon iconVersion="normal" name="RefreshIcon" />
@@ -52,12 +65,7 @@ export const CaptchaDialog = JSX<CaptchaDialogProps>(
             <Button onClick={close} version="secondary">
               Вернуться
             </Button>
-            <Button
-              type="submit"
-              disabled={!code}
-              onClick={() => handleCheckCaptcha({ code, setHasError, close, sendCode })}
-              version="secondary"
-            >
+            <Button type="submit" disabled={!code} onClick={handleCheckCaptcha} version="secondary">
               Отправить
             </Button>
           </div>

package/src/ui-kit/EsiaLoginDialog/EsiaLoginDialog.tsx

@@ -14,6 +14,7 @@ export const EsiaLoginDialog = JSX<EsiaLoginDialogProps>(function ({ handleClose
     const resp = await getLink({
       redirectUri: globalThis.location.href,
     });
+
     if (resp) {
       globalThis.location.href = resp.link;
     }

package/src/ui-kit/FormField/Fields/AddressRetailField.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { regionOffices, type OfficeType } from '../../../api/RetailAPI/regionOffices';
+import { fetchRegionOffices, type OfficeType } from '../../../api/RetailAPI/regionOffices';
 import { getOfficePoint } from '../../../components/OfficesAtmsMap/renderOfficeCard';
 import { useOfficesAtmsMapData } from '../../../components/OfficesAtmsMap/useOfficesAtmsMapData';
 import { useLeadFormData } from '../../../hooks/useLeadFormData';
@@ -21,9 +21,8 @@ export const AddressRetailField = JSX<CustomFieldProps>(({ field, input }) => {
 
   useEffect(() => {
     (async () => {
-      const officesList = await regionOffices((regionValue?.key as string) ?? '');
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      setOffices(officesList || []);
+      const officesList = await fetchRegionOffices((regionValue?.key as string) ?? '');
+      setOffices(officesList);
     })();
 
     if (regionValue?.key) {

package/src/ui-kit/FormField/Fields/CardCategoryField.tsx

@@ -1,15 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLeadFormData } from '../../../hooks/useLeadFormData';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { getCardTypes, type CardTypeData } from '../../../api/RetailAPI/getCardTypes';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { SelectField } from '../SelectField';
 
 export const CardCategoryField = JSX<CustomFieldProps>(({ field, input }) => {
-  const { data: cardCategory } = useLeadFormData('CARD_TYPE');
+  const [cardTypes, setCardTypes] = useState<CardTypeData[]>([]);
+  const selectedPaymentSystem = field('paymentSystem').value;
+
+  useEffect(() => {
+    (async () => {
+      const fetchedCardTypes = await getCardTypes(selectedPaymentSystem as string);
+      setCardTypes(fetchedCardTypes);
+    })();
+  }, [selectedPaymentSystem]);
 
   return (
     <SelectField
       field={field}
-      source={cardCategory}
+      source={cardTypes}
       label="Категория карты"
       fieldName="cardCategory"
       input={input}

package/src/ui-kit/FormField/Fields/PaymentSystemField.tsx

@@ -1,23 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { getPaymentSystems } from '../../../api/RetailAPI/getPaymentSystems';
 import { type RadioButtonItem } from '../../RadioButtonGroup/RadioButtonGroup';
 import { RadioButtonGroupControl } from '../../RadioButtonGroup/RadioButtonGroupControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
-export const PAYMENT_SYSTEM_TYPES: RadioButtonItem[] = [
-  { id: 'mir', text: 'Карта МИР' },
-  { id: 'union_pay', text: 'UnionPay' },
-];
-
 export const PaymentSystemField = JSX<CustomFieldProps>(({ field, input }) => {
   const { value, onChange } = field('paymentSystem');
 
+  const [paymentSystemOptions, setPaymentSystemOptions] = useState<RadioButtonItem[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      const fetchedPaymentSystems = await getPaymentSystems();
+      setPaymentSystemOptions(fetchedPaymentSystems || []);
+    })();
+  }, []);
+
   return (
     <RadioButtonGroupControl
       label="Платежная система"
       orientation="horizontal"
-      items={PAYMENT_SYSTEM_TYPES}
+      items={paymentSystemOptions}
       value={value}
       onChange={(_) => onChange?.(_)}
       {...getValidation(field('paymentSystem'), validatorObj.paymentSystem, input?.required)}