, fieldName: string) => void;\r\n checkField: (\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n form: any,\r\n field: IFormField,\r\n ) => IValidationData;\r\n}\r\n\r\nexport function withFormGeneratorValidation(\r\n WrappedComponent: React.ComponentType
,\r\n getFieldsFromOuterScope: () => IFormField[],\r\n) {\r\n const inputsTables: Record> = {};\r\n const setInputsTableProp = (classComponent: InstanceType, fieldName: string) =>\r\n (inputsTables[fieldName] = classComponent);\r\n\r\n const InnerComponent: React.FC = (props) => {\r\n const { forwardRef, ...rest } = props;\r\n\r\n const initValidation = (fields: IFormField[]): IValidationState => {\r\n return fields.reduce((acc, field) => {\r\n if (field.type === 'section') {\r\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\r\n acc[field.name] = initValidation(field.fields!);\r\n } else {\r\n acc[field.name] = { valid: true, message: '' };\r\n }\r\n\r\n return acc;\r\n }, {});\r\n };\r\n\r\n const [validationState, setValidationState] = useState(() => initValidation(getFieldsFromOuterScope()));\r\n\r\n const handleSetInitialValidationState = (fields: IFormField[]) => {\r\n setValidationState(initValidation(fields));\r\n };\r\n\r\n const startsWithPath = (path: string, pathToCheck: string | string[]) => {\r\n const pathSegments = path.split('.');\r\n\r\n if (Array.isArray(pathToCheck)) {\r\n return pathToCheck.some((pathToCheck) => {\r\n const pathToCheckSegments = pathToCheck.split('.');\r\n\r\n return pathToCheckSegments.every((segment, i) => {\r\n return segment === pathSegments[i];\r\n });\r\n });\r\n } else {\r\n const pathToCheckSegments = pathToCheck.split('.');\r\n\r\n return pathToCheckSegments.every((segment, i) => {\r\n return segment === pathSegments[i];\r\n });\r\n }\r\n };\r\n\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const checkField = (form: any, field: IFormField) => {\r\n if (field.required) {\r\n if (form[field.name] === '' || form[field.name] === null || form[field.name] === undefined) {\r\n return { valid: false, message: keyMap.formsValidationRequiredError };\r\n }\r\n\r\n if (field.type === 'multiselect' && !form[field.name].length) {\r\n return { valid: false, message: keyMap.formsValidationRequiredError };\r\n }\r\n\r\n if (field.confirm && form[field.name] !== form[field.confirm]) {\r\n const message = field.validationMessage || keyMap.formsValidationConfirmError;\r\n\r\n return { valid: false, message };\r\n }\r\n }\r\n\r\n if (field.onlyEng) {\r\n const validator = validators.onlyEngAndDigits;\r\n const params = { ...field };\r\n\r\n if (!validator.check(form[field.name], params)) {\r\n return { valid: false, message: validator.message };\r\n }\r\n }\r\n\r\n if (field.onlyEngLetters) {\r\n const validator = validators.onlyEngLetters;\r\n const params = { ...field };\r\n\r\n if (!validator.check(form[field.name], params)) {\r\n return { valid: false, message: validator.message };\r\n }\r\n }\r\n\r\n if (field.type && validators[field.type]) {\r\n const validator = validators[field.type];\r\n const params = { ...field, form };\r\n\r\n // @ts-ignore\r\n if (!validator.check(form[field.name], params)) {\r\n return { valid: false, message: validator.message };\r\n }\r\n }\r\n\r\n if (field.validator) {\r\n const { validator } = field;\r\n const params = { ...field, form };\r\n\r\n if (!validator.check(form[field.name], params)) {\r\n return { valid: false, message: validator.message, placeholders: validator.placeholders };\r\n }\r\n }\r\n\r\n if (field.type === 'array') {\r\n if (inputsTables[field.name] && !inputsTables[field.name].validate()) {\r\n return { valid: false, message: keyMap.formsValidationMapError };\r\n }\r\n }\r\n\r\n return { valid: true, message: '' };\r\n };\r\n\r\n const getValidation = (\r\n fields: IFormField[],\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n form: any,\r\n sectionPath: string | null,\r\n validationPath?: string,\r\n ): IValidationState => {\r\n return fields.reduce((validation, field) => {\r\n const path = sectionPath ? [sectionPath, field.name].join('.') : field.name;\r\n\r\n if (field.type === 'section') {\r\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\r\n validation[field.name] = getValidation(field.fields!, form[field.name], path, validationPath);\r\n } else if (validationPath && !startsWithPath(path, validationPath)) {\r\n validation[field.name] = { valid: true, message: '' };\r\n } else {\r\n validation[field.name] = checkField(form, field);\r\n }\r\n\r\n return validation;\r\n }, {});\r\n };\r\n\r\n const getIsValid = (fields: IFormField[], validation: IValidationState): boolean => {\r\n return fields.reduce((_isValid, field) => {\r\n let isValid = _isValid;\r\n\r\n if (isValid === false) {\r\n return isValid;\r\n }\r\n\r\n if (isHidden({ props }, field)) {\r\n return true;\r\n }\r\n\r\n if (field.type === 'hidden') {\r\n return true;\r\n }\r\n\r\n if (field.type === 'section') {\r\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\r\n isValid = getIsValid(field.fields!, validation[field.name] as IValidationState);\r\n } else {\r\n isValid = validation[field.name].valid as boolean;\r\n }\r\n\r\n return isValid;\r\n }, true);\r\n };\r\n\r\n const validate = (validationPath?: string): boolean => {\r\n const fields = getFieldsFromOuterScope();\r\n const { form } = props;\r\n const validation = getValidation(fields, form, null, validationPath);\r\n const isValid = getIsValid(fields, validation);\r\n\r\n setValidationState(validation);\r\n\r\n if (!isValid) {\r\n scrollToFirstError(fields, validation);\r\n }\r\n\r\n return isValid;\r\n };\r\n\r\n return (\r\n ((name, field) => {\r\n if (name) {\r\n return name;\r\n }\r\n\r\n if (field.type === 'section') {\r\n return getInvalidFieldName(field.fields as IFormField[], validation[field.name] as IValidationState) as string;\r\n }\r\n\r\n if (!validation[field.name].valid) {\r\n return field.name;\r\n }\r\n\r\n return name;\r\n }, '');\r\n };\r\n\r\n const invalidFiledName = getInvalidFieldName(fields, validation);\r\n const element = document.querySelector(`[data-fieldname=${invalidFiledName}]`) as HTMLElement | null;\r\n\r\n if (element) {\r\n const closestParentModalNode = element.closest('.modal');\r\n\r\n // ScrollTo is not supported for old mobile browsers.\r\n // ScrollIntoView has better support, but still not perfect\r\n\r\n if (closestParentModalNode) {\r\n if (closestParentModalNode.scrollTo) {\r\n closestParentModalNode.scrollTo({\r\n top: element.offsetTop,\r\n behavior: 'smooth',\r\n });\r\n } else if (closestParentModalNode.scrollIntoView) {\r\n closestParentModalNode.scrollIntoView();\r\n }\r\n } else {\r\n const boundingClientRect = element.getBoundingClientRect();\r\n\r\n if (window.scrollTo) {\r\n window.scrollTo({\r\n top: window.pageYOffset + boundingClientRect.top - 80,\r\n behavior: 'smooth',\r\n });\r\n } else if (element.scrollIntoView) {\r\n element.scrollIntoView();\r\n }\r\n }\r\n }\r\n};\r\n","import { KeyMapKeys } from '@locales/lokalise/keyMap';\r\nimport { ENUM_CONSTANTS } from 'components/shared/enum.constants';\r\nimport { CAPTCHA_PROVIDERS, ENUM_LOCALE_CODE, LANGUAGE_CODE_TO_LOCALE_CODE } from 'global.enums';\r\nimport { LanguageType } from 'global.interfaces';\r\nimport i18next from 'i18next';\r\nimport { IEnumConstant } from './enum.constants.interface';\r\nimport { EmptyObject } from './shared.interfaces';\r\n\r\nexport interface ILocaleStructure {\r\n key: ENUM_LOCALE_CODE;\r\n title: string;\r\n i18n: string;\r\n}\r\n\r\nexport interface ILocalesEnum {\r\n name: string;\r\n value: ENUM_LOCALE_CODE;\r\n}\r\n\r\ninterface IExcludeOptions {\r\n exclude?: boolean;\r\n ignoreValue?: string | null;\r\n}\r\n\r\nexport type LocalMapType = {\r\n [key in LanguageType]: ILocaleStructure;\r\n};\r\n\r\nconst SETTINGS = window.settings as ISystemSettings;\r\n\r\nexport class GENERAL_CONSTANTS {\r\n static get LOCALES(): LocalMapType | EmptyObject {\r\n if (!SETTINGS || !SETTINGS.language || SETTINGS.language.length === 0) {\r\n return {};\r\n }\r\n\r\n const localeMap: LocalMapType = SETTINGS.language\r\n .sort((a, b) => a.order - b.order)\r\n .filter((lang) => !lang.exclude)\r\n .reduce((acc, lang) => {\r\n const key = lang.code.replace('-', '_').toLocaleUpperCase() as LanguageType;\r\n\r\n const i18nTranslationKey = `enum.language.${lang.key.toLowerCase()}`;\r\n\r\n acc[key] = {\r\n key: lang.code as ENUM_LOCALE_CODE,\r\n title: i18next.t(i18nTranslationKey as KeyMapKeys),\r\n i18n: i18nTranslationKey,\r\n };\r\n\r\n return acc;\r\n }, {} as LocalMapType);\r\n\r\n return localeMap;\r\n }\r\n\r\n static get DEFAULT_LOCALE(): ENUM_LOCALE_CODE {\r\n const locales = this.LOCALES;\r\n\r\n const localesKeys = Object.keys(locales);\r\n\r\n if (localesKeys.length == 0) {\r\n return LANGUAGE_CODE_TO_LOCALE_CODE.en;\r\n }\r\n\r\n return locales[localesKeys[0] as LanguageType].key;\r\n }\r\n\r\n static get LOCALES_ENUM(): ILocalesEnum[] {\r\n const locales = this.LOCALES;\r\n\r\n return Object.keys(locales).map((lang) => ({\r\n name: locales[lang as LanguageType].i18n,\r\n value: locales[lang as LanguageType].key,\r\n }));\r\n }\r\n\r\n static get COUNTRY(): IEnumConstant[] {\r\n return this.getCountryList();\r\n }\r\n\r\n static get COUNTRY_WITH_EXCLUDED(): IEnumConstant[] {\r\n return this.getCountryList({ exclude: false });\r\n }\r\n\r\n static get COUNTRY_WITH_ALL_NOT_ALLOWED_AND_EXCLUDED(): IEnumConstant[] {\r\n return this.getGeneralEnumList('country', 'COUNTRY', { exclude: false });\r\n }\r\n\r\n static get COUNTRY_WITH_ALL_AND_EXCLUDED(): IEnumConstant[] {\r\n return this.getGeneralEnumList('country', 'COUNTRY', { exclude: false }).filter(\r\n (c) => c.name !== 'enum.country.notAllowed',\r\n );\r\n }\r\n\r\n static get DEFAULT_COUNTRY(): string | undefined {\r\n const countries = this.PREFERRED_COUNTRIES;\r\n\r\n return countries.length > 0 ? countries[0] : undefined;\r\n }\r\n\r\n static get PREFERRED_COUNTRIES(): string[] {\r\n if (!SETTINGS || !SETTINGS.country) {\r\n return [];\r\n }\r\n\r\n return SETTINGS.country\r\n .filter((x) => x.preferred)\r\n .sort((a, b) => a.order - b.order)\r\n .map((x) => x.code.toLowerCase());\r\n }\r\n\r\n static get EXCLUDE_COUNTRIES(): string[] {\r\n if (!SETTINGS || !SETTINGS.country) {\r\n return [];\r\n }\r\n\r\n return SETTINGS.country.filter((x) => x.exclude).map((x) => x.code.toLowerCase());\r\n }\r\n\r\n static get PSP_CURRENCY(): IEnumConstant[] {\r\n return this.getGeneralEnumList('currency', 'PSP_CURRENCY');\r\n }\r\n\r\n static get DEFAULT_CURRENCY(): string {\r\n const currency = this.PSP_CURRENCY;\r\n\r\n if (currency.length > 0) {\r\n return currency[0].value;\r\n }\r\n\r\n return '';\r\n }\r\n\r\n static get WALLET_OPERATION_CATEGORY(): IEnumConstant[] {\r\n return this.getGeneralEnumList('walletOperationCategory', 'WALLET_OPERATION_CATEGORY');\r\n }\r\n\r\n static get GROUP_MAPPING(): IEnumConstant[] {\r\n return this.getGeneralEnumList('groupMapping', 'GROUP_MAPPING');\r\n }\r\n\r\n static get DEFAULT_NUMBER_PRECISION(): number {\r\n if (!SETTINGS?.numberPrecision) {\r\n return 4;\r\n }\r\n\r\n return SETTINGS.numberPrecision;\r\n }\r\n\r\n static get ID_HASH_SUFFIX(): string {\r\n if (!SETTINGS?.gtmSettings?.idHashSuffix) {\r\n return '';\r\n }\r\n\r\n return SETTINGS.gtmSettings.idHashSuffix;\r\n }\r\n\r\n static get CAPTCHA_PROVIDER(): CAPTCHA_PROVIDERS | null {\r\n if (!SETTINGS?.captchaSettings?.provider) {\r\n return null;\r\n }\r\n\r\n return SETTINGS.captchaSettings.provider.toLowerCase() === CAPTCHA_PROVIDERS.HCAPTCHA\r\n ? CAPTCHA_PROVIDERS.HCAPTCHA\r\n : CAPTCHA_PROVIDERS.RECAPTCHA;\r\n }\r\n\r\n static get CAPTCHA_SETTINGS_KEY(): string {\r\n if (!SETTINGS?.captchaSettings?.siteKey) {\r\n return '';\r\n }\r\n\r\n return SETTINGS.captchaSettings.siteKey;\r\n }\r\n\r\n static get CAPTCHA_SIGNIN_PROTECTION(): boolean {\r\n if (!SETTINGS?.captchaSettings?.signInProtection) {\r\n return false;\r\n }\r\n\r\n return SETTINGS.captchaSettings.signInProtection;\r\n }\r\n\r\n static get CAPTCHA_WIDGET_SETTINGS() {\r\n if (!SETTINGS?.captchaSettings?.widgetSettings) {\r\n return {};\r\n }\r\n\r\n return SETTINGS.captchaSettings.widgetSettings;\r\n }\r\n\r\n static get MEASUREMENT_SETTINGS(): ISystemMeasurementSetting[] {\r\n if (!SETTINGS?.measurementSettings) {\r\n return [];\r\n }\r\n\r\n return SETTINGS.measurementSettings;\r\n }\r\n\r\n static getGeneralEnumList(\r\n globalProperty: keyof ISystemSettings,\r\n enumName: keyof typeof ENUM_CONSTANTS,\r\n excludeOptions?: IExcludeOptions,\r\n ): IEnumConstant[] {\r\n if (!SETTINGS) {\r\n return [];\r\n }\r\n\r\n const list = SETTINGS[globalProperty];\r\n\r\n if (!Array.isArray(list)) {\r\n return [];\r\n }\r\n\r\n const fullEnumList = ENUM_CONSTANTS[enumName];\r\n const resultList: Array = [];\r\n const exclude = excludeOptions?.exclude ?? true;\r\n\r\n list\r\n .sort((a, b) => a.order - b.order)\r\n .forEach((item) => {\r\n if (exclude && item.exclude && excludeOptions?.ignoreValue !== item.key) {\r\n return;\r\n }\r\n\r\n // @ts-ignore\r\n const it = fullEnumList.find((x) => x.value === item.key);\r\n\r\n if (it) {\r\n resultList.push(it);\r\n }\r\n });\r\n\r\n return resultList;\r\n }\r\n\r\n static getCountryList(excludeOptions?: IExcludeOptions): IEnumConstant[] {\r\n return this.getGeneralEnumList('country', 'COUNTRY', excludeOptions).filter(\r\n (c) => c.name !== 'enum.country.notAllowed' && c.name !== 'enum.country.allCountries',\r\n );\r\n }\r\n\r\n static getSystemSettingsCountryByKey(key: string): ISystemSettingsCountry | undefined {\r\n return SETTINGS.country.find((x) => x.key === key);\r\n }\r\n}\r\n","import { enrichGoogleAnalyticsSuffix } from 'components/shared/utils/enrichGoogleAnalyticsSuffix';\r\nimport { CURRENCY } from 'global.enums';\r\n\r\nconst sendGoogleEvent = (event: Record) => {\r\n if (!Array.isArray(window.dataLayer)) return;\r\n\r\n window.dataLayer.push(event);\r\n};\r\n\r\nexport const pushTicketStartEvent = (): void => {\r\n sendGoogleEvent({\r\n event: 'ticketStart',\r\n });\r\n};\r\n\r\nexport const pushTicketSubmittedEvent = (): void => {\r\n sendGoogleEvent({\r\n event: 'ticketSubmitted',\r\n });\r\n};\r\n\r\nexport const pushTicketErrorEvent = (errorMsg: string): void => {\r\n sendGoogleEvent({\r\n errorMsg,\r\n event: 'ticketError',\r\n });\r\n};\r\n\r\nexport const pushLoginSuccessfulEvent = (userIdHash: string): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n event: 'loginSuccessful',\r\n });\r\n};\r\n\r\nexport const pushLoginErrorEvent = (errorMsg: string): void => {\r\n sendGoogleEvent({\r\n errorMsg,\r\n event: 'loginError',\r\n });\r\n};\r\n\r\nexport const pushRegistrationSuccessfulEvent = (\r\n userIdHash: string,\r\n clientSourceType: number,\r\n language: string,\r\n countryCode: string,\r\n): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n clientSourceType,\r\n language,\r\n countryCode,\r\n event: 'registrationSuccessful',\r\n });\r\n};\r\n\r\nexport const pushRegistrationErrorEvent = (errorMsg: string): void => {\r\n sendGoogleEvent({\r\n errorMsg,\r\n event: 'registrationError',\r\n });\r\n};\r\n\r\nexport const pushLanguageSelectorEvent = (language: string): void => {\r\n sendGoogleEvent({\r\n language,\r\n event: 'languageSelector',\r\n });\r\n};\r\n\r\nexport const pushExportEvent = (userIdHash: string, event: string): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n event,\r\n });\r\n};\r\n\r\nexport const pushAccountsBalanceCurrencyCodeEvent = (currencyCode: string): void => {\r\n sendGoogleEvent({\r\n currencyCode,\r\n event: 'accountsBalanceCurrencyCode',\r\n });\r\n};\r\n\r\nexport const pushEWalletCurrencyCodeEvent = (currencyCode: string): void => {\r\n sendGoogleEvent({\r\n currencyCode,\r\n event: 'eWalletCurrencyCode',\r\n });\r\n};\r\n\r\nexport const pushAccountCreateErrorEvent = (errorMsg: string): void => {\r\n sendGoogleEvent({\r\n errorMsg,\r\n event: 'accountCreateError',\r\n });\r\n};\r\n\r\nexport const pushDownloadLegalDocumentEvent = (\r\n userIdHash: string,\r\n language: string,\r\n docType: string,\r\n event: string,\r\n): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n language,\r\n docType,\r\n event,\r\n });\r\n};\r\n\r\nexport const pushTradingPlatformDownloadEvent = (linkType: string): void => {\r\n sendGoogleEvent({\r\n platformDownloaded: linkType,\r\n event: 'tradingPlatformDownload',\r\n });\r\n};\r\n\r\nexport const pushMamDocUploadEvent = (userIdHash: string, docType: string): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n docType,\r\n event: 'mamDocUpload',\r\n });\r\n};\r\n\r\nexport const pushNotificationsFilterEvent = (subject: string): void => {\r\n sendGoogleEvent({\r\n subject,\r\n event: 'notificationsFilter',\r\n });\r\n};\r\n\r\nexport const pushPartnershipStartEvent = (): void => {\r\n sendGoogleEvent({\r\n event: 'partnershipStart',\r\n });\r\n};\r\n\r\nexport const pushPartnershipSubmittedEvent = (): void => {\r\n sendGoogleEvent({\r\n event: 'partnershipSubmitted',\r\n });\r\n};\r\n\r\nexport const pushPartnershipErrorEvent = (userIdHash: string, errorMsg: string): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n errorMsg,\r\n event: 'partnershipError',\r\n });\r\n};\r\n\r\nexport const pushDocumentUploadEvent = (documentType: string): void => {\r\n sendGoogleEvent({\r\n documentType,\r\n event: 'documentUpload',\r\n });\r\n};\r\n\r\nexport const pushDocumentUploadErrorEvent = (errorMsg: string): void => {\r\n sendGoogleEvent({\r\n errorMsg,\r\n event: 'documentUploadError',\r\n });\r\n};\r\n\r\nexport const pushPinPasswordUpdateEvent = (): void => {\r\n sendGoogleEvent({\r\n event: 'pinPasswordUpdate',\r\n });\r\n};\r\n\r\nexport const pushEWalletViewedEvent = (): void => {\r\n sendGoogleEvent({\r\n event: 'eWalletViewed',\r\n });\r\n};\r\n\r\nexport const pushTransferSuccessfulEvent = (\r\n accountIdHash: string | undefined,\r\n transferValue: string,\r\n transferCurrency: string,\r\n destinationAccountID: string | undefined,\r\n): void => {\r\n sendGoogleEvent({\r\n accountID: enrichGoogleAnalyticsSuffix(accountIdHash),\r\n transferValue,\r\n transferCurrency,\r\n destinationAccountID,\r\n event: 'transferSuccessful',\r\n });\r\n};\r\n\r\nexport const pushTransferErrorEvent = (accountIdHash: string | undefined, errorMsg: string): void => {\r\n sendGoogleEvent({\r\n accountID: enrichGoogleAnalyticsSuffix(accountIdHash),\r\n errorMsg,\r\n event: 'transferError',\r\n });\r\n};\r\n\r\nexport const pushWithdrawFundsSuccessfulEvent = (\r\n accountIdHash: string,\r\n withdrawIdHash: string,\r\n depositValue: number,\r\n depositCurrency: string,\r\n depositSource: string,\r\n): void => {\r\n sendGoogleEvent({\r\n accountID: enrichGoogleAnalyticsSuffix(accountIdHash),\r\n withdrawID: enrichGoogleAnalyticsSuffix(withdrawIdHash),\r\n depositValue,\r\n depositCurrency,\r\n depositSource,\r\n event: 'withdrawFundsSuccessful',\r\n });\r\n};\r\n\r\nexport const pushWithdrawFundsErrorEvent = (accountIdHash: string, errorMsg: string): void => {\r\n sendGoogleEvent({\r\n accountID: enrichGoogleAnalyticsSuffix(accountIdHash),\r\n errorMsg,\r\n event: 'withdrawFundsError',\r\n });\r\n};\r\n\r\nexport const pushAccountCreateSuccessfulEvent = (\r\n userIdHash: string,\r\n clientSourceType: number,\r\n accountIdHash: string,\r\n accountType: string,\r\n status: string,\r\n leverage?: number | string,\r\n): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n clientSourceType,\r\n accountID: enrichGoogleAnalyticsSuffix(accountIdHash),\r\n accountType,\r\n leverage,\r\n verification: status,\r\n event: 'accountCreateSuccessful',\r\n });\r\n};\r\n\r\nexport const pushStartedCopyMasterSuccessEvent = (\r\n userIdHash: string,\r\n clientSourceType: number,\r\n accountIdHash: string,\r\n accountType: string,\r\n masterTradingAccountIdHash: string,\r\n masterUserIdHash: string,\r\n): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n clientSourceType,\r\n accountID: enrichGoogleAnalyticsSuffix(accountIdHash),\r\n accountType,\r\n master_accountID: enrichGoogleAnalyticsSuffix(masterTradingAccountIdHash),\r\n master_userId: enrichGoogleAnalyticsSuffix(masterUserIdHash),\r\n event: 'started_copy_master_success',\r\n });\r\n};\r\n\r\nexport const pushStoppedCopyMasterSuccessEvent = (\r\n userIdHash: string,\r\n clientSourceType: number,\r\n accountIdHash: string,\r\n accountType: string,\r\n masterTradingAccountIdHash: string | undefined,\r\n masterUserIdHash: string | undefined,\r\n): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n clientSourceType,\r\n accountID: enrichGoogleAnalyticsSuffix(accountIdHash),\r\n accountType,\r\n master_accountID: enrichGoogleAnalyticsSuffix(masterTradingAccountIdHash),\r\n master_userId: enrichGoogleAnalyticsSuffix(masterUserIdHash),\r\n stop_copy_reason: 'byhimself',\r\n event: 'stopped_copy_master_success',\r\n });\r\n};\r\n\r\nexport const pushHowToDepositVideoEvent = (\r\n userIdHash: string,\r\n clientSourceType: number,\r\n ibUserId: string | null,\r\n verification: string,\r\n): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n clientSourceType,\r\n ib_user_id: enrichGoogleAnalyticsSuffix(ibUserId),\r\n verification,\r\n eventAction: 'click_play',\r\n event: 'how_to_deposit_video',\r\n });\r\n};\r\n\r\nexport const pushSuccessDepositEvent = (\r\n accountIdHash: string,\r\n depositIdHash: string,\r\n depositValue: number,\r\n depositAmountUSD: number,\r\n depositCurrency: CURRENCY,\r\n depositSource: string,\r\n userIdHash: string,\r\n clientSourceType: number,\r\n ibUserId: string | null,\r\n accountType: string,\r\n depositFundsType: string,\r\n verification: string,\r\n): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n clientSourceType,\r\n ib_user_id: enrichGoogleAnalyticsSuffix(ibUserId),\r\n accountID: enrichGoogleAnalyticsSuffix(accountIdHash),\r\n accountType,\r\n depositID: enrichGoogleAnalyticsSuffix(depositIdHash),\r\n depositValue,\r\n depositAmountUSD,\r\n depositCurrency,\r\n depositSource,\r\n deposit_funds_type: depositFundsType,\r\n verification,\r\n event: 'deposit_start',\r\n });\r\n};\r\n\r\nexport const pushErrorDepositEvent = (accountIdHash: string, errorMsg: string): void => {\r\n sendGoogleEvent({\r\n accountID: enrichGoogleAnalyticsSuffix(accountIdHash),\r\n errorMsg,\r\n event: 'deposit_start_error',\r\n });\r\n};\r\n\r\nexport const pushDepositPreStartEvent = (\r\n userIdHash: string,\r\n clientSourceType: number,\r\n ibUserId: string | null,\r\n accountIdHash: string,\r\n accountType: string,\r\n depositValue: number,\r\n depositCurrency: CURRENCY,\r\n depositAmountUSD: number,\r\n depositSource: string,\r\n depositFundsType: string,\r\n verification: string,\r\n): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n clientSourceType,\r\n ib_user_id: enrichGoogleAnalyticsSuffix(ibUserId),\r\n accountID: enrichGoogleAnalyticsSuffix(accountIdHash),\r\n accountType,\r\n depositValue,\r\n depositCurrency,\r\n depositAmountUSD,\r\n depositSource,\r\n deposit_funds_type: depositFundsType,\r\n verification,\r\n event: 'deposit_pre_start',\r\n });\r\n};\r\n\r\nexport const pushQuickDepositClickBtnEvent = (\r\n userIdHash: string,\r\n clientSourceType: number,\r\n ibUserId: string | null,\r\n verification: string,\r\n): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n clientSourceType,\r\n ib_user_id: enrichGoogleAnalyticsSuffix(ibUserId),\r\n verification,\r\n event: 'quick_deposit_clck_btn',\r\n });\r\n};\r\n\r\nexport const pushAccountCardDepositClickEvent = (\r\n userIdHash: string,\r\n clientSourceType: number,\r\n ibUserId: string | null,\r\n accountIdHash: string,\r\n accountType: string,\r\n verification: string,\r\n event: string,\r\n): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n clientSourceType,\r\n ib_user_id: enrichGoogleAnalyticsSuffix(ibUserId),\r\n accountID: enrichGoogleAnalyticsSuffix(accountIdHash),\r\n accountType,\r\n verification,\r\n event,\r\n });\r\n};\r\n\r\nexport const pushSelectDepositFundsCategoryEvent = (\r\n userIdHash: string,\r\n clientSourceType: number,\r\n ibUserId: string | null,\r\n verification: string,\r\n depositFundsType: string | undefined,\r\n): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n clientSourceType,\r\n ib_user_id: enrichGoogleAnalyticsSuffix(ibUserId),\r\n verification,\r\n deposit_funds_type: depositFundsType,\r\n event: 'deposit_funds_type_start',\r\n });\r\n};\r\n\r\nexport const pushDepositPaymentSourceEvent = (\r\n userIdHash: string,\r\n clientSourceType: number,\r\n ibUserId: string | null,\r\n verification: string,\r\n depositFundsType: string | undefined,\r\n depositSource: string,\r\n): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n clientSourceType,\r\n ib_user_id: enrichGoogleAnalyticsSuffix(ibUserId),\r\n verification,\r\n deposit_funds_type: depositFundsType,\r\n depositSource,\r\n eventAction: 'psp_click',\r\n event: 'deposit_payment_source',\r\n });\r\n};\r\n\r\nexport const pushAuthorizedBankingMethodEvent = (\r\n userIdHash: string,\r\n clientSourceType: number,\r\n ibUserId: string | null,\r\n depositFundsType: string | undefined,\r\n verification: string,\r\n eventAction: string,\r\n): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n clientSourceType,\r\n ib_user_id: enrichGoogleAnalyticsSuffix(ibUserId),\r\n verification,\r\n deposit_funds_type: depositFundsType,\r\n eventAction,\r\n event: 'online_bank_transaction',\r\n });\r\n};\r\n\r\nexport const pushOpenAccountModalShowEvent = (\r\n userIdHash: string,\r\n clientSourceType: number,\r\n verification: string,\r\n): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n clientSourceType,\r\n verification,\r\n event: 'open_account_modal_window_shows',\r\n });\r\n};\r\n\r\nexport const pushOpenAccountModalCloseEvent = (\r\n userIdHash: string,\r\n clientSourceType: number,\r\n verification: string,\r\n): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n clientSourceType,\r\n verification,\r\n event: 'open_account_modal_window_closed',\r\n });\r\n};\r\n\r\nexport const pushRegistrationSuccessfulMaPageEvent = (userIdHash: string, clientSourceType: number): void => {\r\n sendGoogleEvent({\r\n userID: enrichGoogleAnalyticsSuffix(userIdHash),\r\n clientSourceType,\r\n event: 'registration_successful_ma_page',\r\n });\r\n};\r\n\r\nexport const pushGetSmsCodeEvent = (): void => {\r\n sendGoogleEvent({\r\n event: 'sms_phone_confirm_click_get_code',\r\n });\r\n};\r\n\r\nexport const pushInputSmsCodeCharacterEvent = (): void => {\r\n sendGoogleEvent({\r\n event: 'sms_phone_confirm_input_character',\r\n });\r\n};\r\n\r\nexport const pushSmsCodeResendEvent = (): void => {\r\n sendGoogleEvent({\r\n event: 'sms_phone_confirm_resend_code',\r\n });\r\n};\r\n\r\nexport const pushSmsCodeIsCorrectEvent = (): void => {\r\n sendGoogleEvent({\r\n event: 'sms_phone_confirm_success',\r\n });\r\n};\r\n\r\nexport const pushSmsCodeIsIncorrectEvent = (): void => {\r\n sendGoogleEvent({\r\n event: 'sms_phone_confirm_fail',\r\n });\r\n};\r\n\r\nexport const pushRegistrationContinueEvent = (): void => {\r\n sendGoogleEvent({\r\n event: 'ma_reg_continue_button_click',\r\n });\r\n};\r\n","import React from 'react';\r\n\r\ninterface IProps {\r\n description: string;\r\n classname?: string;\r\n}\r\n\r\nexport const DescriptionBlock: React.FC = (props) => {\r\n const { description, classname } = props;\r\n\r\n return (\r\n \r\n {description} \r\n
\r\n );\r\n};\r\n","import React, { useState, useRef, useEffect, FC, useCallback } from 'react';\r\nimport { Button } from '@components-library/Button';\r\nimport { IFormField } from '@components-shared/forms/formField.interface';\r\nimport ModalPortal from '@components-shared/modal/ModalPortal';\r\nimport { useModalEventObserver } from '@components-shared/modal/modalEventObserver';\r\nimport { KeyMapKeys, keyMap } from '@locales/lokalise/keyMap';\r\nimport cn from 'classnames';\r\nimport FormGenerator from 'components/shared/forms/formGenerator';\r\nimport i18next from 'i18next';\r\nimport { CloseButton } from '../shared/CloseButton';\r\n\r\nconst el = document.createElement('div');\r\nconst { body } = document;\r\n\r\nbody.appendChild(el);\r\n\r\nconst FIELDS: IFormField[] = [\r\n {\r\n name: 'commentText',\r\n title: keyMap.sharedFieldsInternalComment,\r\n type: 'textarea',\r\n attributes: { autoComplete: 'off' },\r\n required: true,\r\n },\r\n];\r\n\r\nexport type ConfirmModalProps = {\r\n className?: string;\r\n title?: string;\r\n subtitle?: string;\r\n};\r\n\r\nexport type ConfirmModalState = {\r\n content: string | React.ReactElement;\r\n action: null | ((commentText?: string) => Promise) | ((commentText?: string) => void);\r\n closeAction?: null | (() => void);\r\n needComment?: boolean;\r\n confirmBtnText?: string;\r\n cancelBtnText?: string;\r\n};\r\n\r\ninterface StaticConfirmModalProps {\r\n show: (\r\n content: ConfirmModalState['content'],\r\n action: ConfirmModalState['action'],\r\n closeAction?: ConfirmModalState['closeAction'],\r\n needComment?: ConfirmModalState['needComment'],\r\n confirmBtnText?: ConfirmModalState['confirmBtnText'],\r\n cancelBtnText?: ConfirmModalState['cancelBtnText'],\r\n ) => void;\r\n}\r\n\r\nconst Form = FormGenerator(FIELDS);\r\n\r\nconst ConfirmModal: FC & StaticConfirmModalProps = ({ className, title, subtitle }) => {\r\n const [state, setState] = useState({\r\n content: '',\r\n action: null,\r\n closeAction: null,\r\n needComment: false,\r\n confirmBtnText: '',\r\n cancelBtnText: '',\r\n });\r\n\r\n const [value, setValue] = useState({ commentText: '' });\r\n\r\n const formRef = useRef(null);\r\n\r\n const close = useCallback(() => {\r\n setState({ ...state, content: '', action: null, closeAction: null });\r\n setValue({ commentText: '' });\r\n }, [state]);\r\n\r\n useModalEventObserver(close, { condition: Boolean(state.content), ignoreEscButton: true });\r\n\r\n const show = useCallback(\r\n (\r\n content: ConfirmModalState['content'],\r\n action: ConfirmModalState['action'],\r\n closeAction: ConfirmModalState['closeAction'] = null,\r\n needComment = false,\r\n confirmBtnText: ConfirmModalState['confirmBtnText'],\r\n cancelBtnText: ConfirmModalState['cancelBtnText'],\r\n ) => {\r\n setState({ ...state, content, action, closeAction, needComment, confirmBtnText, cancelBtnText });\r\n },\r\n [state],\r\n );\r\n\r\n useEffect(() => {\r\n ConfirmModal.show = show;\r\n }, [show]);\r\n\r\n const action = async () => {\r\n const { needComment, action } = state;\r\n\r\n if (needComment && formRef.current && !formRef.current.validate()) {\r\n return;\r\n }\r\n\r\n if (action) {\r\n await action(value.commentText);\r\n }\r\n close();\r\n };\r\n\r\n const closeAction = () => {\r\n close();\r\n if (state.closeAction) {\r\n state.closeAction();\r\n }\r\n };\r\n\r\n if (!state.content) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n {title &&
{i18next.t(title as KeyMapKeys)}
}\r\n {subtitle &&
{i18next.t(subtitle as KeyMapKeys)}
}\r\n
\r\n
\r\n
\r\n
\r\n {typeof state.content === 'string' ? i18next.t(state.content as KeyMapKeys) : state.content}\r\n
\r\n {state.needComment && (\r\n
setValue({ commentText: value })}\r\n ref={formRef}\r\n />\r\n )}\r\n \r\n
\r\n \r\n {i18next.t((state.confirmBtnText as KeyMapKeys) || (keyMap.modalYes as KeyMapKeys))}\r\n \r\n \r\n {i18next.t((state.cancelBtnText as KeyMapKeys) || (keyMap.modalNo as KeyMapKeys))}\r\n \r\n
\r\n
\r\n
\r\n
\r\n );\r\n};\r\n\r\nConfirmModal.show = () => console.error('method show is not defined');\r\n\r\nexport { ConfirmModal };\r\n","import { useRef, useEffect, ReactNode } from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\nconst ModalPortal = ({ children }: { children: ReactNode }) => {\r\n const portalElementRef = useRef(document.createElement('div'));\r\n\r\n useEffect(() => {\r\n const currentPortalElement = portalElementRef.current;\r\n\r\n document.body.appendChild(currentPortalElement);\r\n\r\n const modalCount = getModalCount(true);\r\n\r\n document.body.setAttribute('data-modal-open', modalCount.toString());\r\n\r\n if (modalCount === 1) {\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n return () => {\r\n document.body.removeChild(currentPortalElement);\r\n\r\n const modalCount = getModalCount(false);\r\n\r\n document.body.setAttribute('data-modal-open', modalCount.toString());\r\n\r\n if (modalCount === 0) {\r\n document.body.removeAttribute('data-modal-open');\r\n document.body.style.overflow = '';\r\n }\r\n };\r\n }, []);\r\n\r\n const getModalCount = (increment: boolean) => {\r\n const currentCount = Number(getDataModalOpenAttr('data-modal-open')) || 0;\r\n const newCount = increment ? currentCount + 1 : currentCount - 1;\r\n\r\n document.body.setAttribute('data-modal-open', newCount.toString());\r\n\r\n return newCount;\r\n };\r\n\r\n return ReactDOM.createPortal(children, portalElementRef.current);\r\n};\r\n\r\nexport default ModalPortal;\r\nexport const getDataModalOpenAttr = (attr: string) => document.body.getAttribute(attr);\r\n","import React, { FC, useCallback } from 'react';\r\nimport { XIcon } from '@components-library/Icons/iconsComponents';\r\nimport ModalPortal from '@components-shared/modal/ModalPortal';\r\nimport { useModalEventObserver } from '@components-shared/modal/modalEventObserver';\r\nimport { keyMap, KeyMapKeys } from '@locales/lokalise/keyMap';\r\nimport cn from 'classnames';\r\nimport i18next from 'i18next';\r\n\r\nconst ESC_KEY = 'Escape';\r\n\r\nexport interface IModalProps {\r\n rootClassName?: string;\r\n closeHandler?: () => void;\r\n children?: React.ReactNode;\r\n showModalCloseButton?: boolean;\r\n title?: string;\r\n buttonTitle?: string;\r\n subtitle?: string;\r\n header?: React.ReactNode;\r\n footer?: boolean;\r\n modalFooter?: React.ReactNode[];\r\n notification?: JSX.Element;\r\n titleTranslationOption?: Record;\r\n closeOnEscKey?: boolean;\r\n classNameContainer?: string;\r\n classNameHeader?: string;\r\n classNameFooter?: string;\r\n classNameBody?: string;\r\n classNameCloseButton?: string;\r\n}\r\n\r\nexport const Modal: FC = ({\r\n closeOnEscKey = true,\r\n closeHandler,\r\n rootClassName,\r\n children,\r\n showModalCloseButton = true,\r\n title,\r\n buttonTitle,\r\n subtitle,\r\n footer = false,\r\n header,\r\n modalFooter,\r\n notification,\r\n titleTranslationOption,\r\n classNameContainer,\r\n classNameFooter,\r\n classNameHeader,\r\n classNameBody,\r\n classNameCloseButton,\r\n}) => {\r\n const close = useCallback(\r\n (event: React.MouseEvent | Event): void => {\r\n event?.stopPropagation?.();\r\n closeHandler?.();\r\n },\r\n [closeHandler],\r\n );\r\n\r\n const handleKeyDown = useCallback(\r\n (event: KeyboardEvent): void => {\r\n if (event.key === ESC_KEY && closeOnEscKey) {\r\n close(event);\r\n }\r\n },\r\n [closeOnEscKey, close],\r\n );\r\n\r\n useModalEventObserver(handleKeyDown, { ignoreEscButton: !closeOnEscKey });\r\n\r\n const titleOptions = titleTranslationOption ? titleTranslationOption : undefined;\r\n const titleTranslation = title && (\r\n // @ts-ignore\r\n {i18next.t(title as any, titleOptions as any)}
\r\n );\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n {header &&
{header}
}\r\n {titleTranslation}\r\n {subtitle &&
{i18next.t(subtitle as KeyMapKeys)}
}\r\n {showModalCloseButton && (\r\n
\r\n \r\n )}\r\n
\r\n {notification}\r\n
{children}
\r\n\r\n {footer && (\r\n
\r\n \r\n {i18next.t(buttonTitle ? (buttonTitle as KeyMapKeys) : (keyMap.modalClose as KeyMapKeys))}\r\n \r\n
\r\n )}\r\n\r\n {modalFooter &&
{modalFooter}
}\r\n
\r\n
\r\n );\r\n};\r\n","import React from 'react';\r\nimport { createRoot } from 'react-dom/client';\r\nimport { keyMap } from '@locales/lokalise/keyMap';\r\nimport { Notification } from 'components/library/Notification';\r\nimport { ConfirmModal } from './Confirm';\r\nimport { Modal } from './Modal';\r\nimport './style.scss';\r\n\r\nconst { body } = document;\r\n\r\nconst confirmRoot = document.createElement('div');\r\n\r\nbody.appendChild(confirmRoot);\r\nconst confirmRootInstance = createRoot(confirmRoot);\r\n\r\nconfirmRootInstance.render(\r\n
\r\n );\r\n};\r\n","import React, { useCallback } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useHistory } from 'react-router';\r\nimport { keyMap } from '@locales/lokalise/keyMap';\r\n\r\nconst trimToLastForwardslash = (url: string): string => {\r\n const str = url[url.length - 1] === '/' ? url.slice(0, -1) : url;\r\n const lastSlashIndex = str.lastIndexOf('/');\r\n\r\n return lastSlashIndex !== -1 ? str.substring(0, lastSlashIndex) : str;\r\n};\r\n\r\ninterface INavButtonsProps {\r\n onClick?: () => void;\r\n backPath?: string;\r\n}\r\n\r\nexport const useGoBackNavigation = (backPath?: string) => {\r\n const history = useHistory();\r\n const isHistoryEmpty = history.length <= 1;\r\n\r\n const goBack = useCallback(() => {\r\n if (isHistoryEmpty) {\r\n const { pathname = '/' } = history.location;\r\n const url = backPath || trimToLastForwardslash(pathname);\r\n\r\n history.push(url);\r\n } else {\r\n history.goBack();\r\n }\r\n }, [history, backPath, isHistoryEmpty]);\r\n\r\n return {\r\n goBack,\r\n };\r\n};\r\n\r\nconst NavButtons = ({ onClick, backPath }: INavButtonsProps) => {\r\n const { i18n } = useTranslation();\r\n\r\n const { goBack } = useGoBackNavigation(backPath);\r\n\r\n return (\r\n \r\n
\r\n {\r\n if (!onClick) {\r\n return goBack();\r\n }\r\n\r\n return onClick();\r\n }}>\r\n {i18n.t(keyMap.sharedActionsBack)}\r\n \r\n
\r\n
| null;\r\n icon?: ReactNode;\r\n isDecimalListType?: boolean;\r\n isSpacePreWrap?: boolean;\r\n}\r\n\r\nexport const NotificationMessage: React.FC = (props) => {\r\n const { i18n } = useTranslation();\r\n const { title, listItems, icon, useRollUp, type, isDecimalListType, isSpacePreWrap = true } = props;\r\n const [rolledUp, setRolledUp] = useState(useRollUp);\r\n\r\n const onClickHandler = () => {\r\n setRolledUp(!rolledUp);\r\n };\r\n\r\n const listTypeClassName = isDecimalListType ? styles.notification__decimal : styles.notification__bullet;\r\n\r\n const getItems = () =>\r\n listItems &&\r\n listItems.map((item) => (\r\n \r\n
\r\n
{renderItem(item)} \r\n
\r\n
\r\n
{icon}
\r\n\r\n
\r\n {i18n.t(title as KeyMapKeys)}\r\n \r\n \r\n
\r\n {useRollUp && (\r\n
\r\n
\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
[] = [\r\n 'enum.reportType.closedTrades',\r\n 'enum.reportType.tradingVolume',\r\n];\r\n\r\nconst getFields = (isUser: boolean | undefined): IFormField[] => {\r\n let reportTypes = ENUM_CONSTANTS.REPORT_TYPE.sort((a, b) => {\r\n return a.name > b.name ? 1 : -1;\r\n });\r\n\r\n if (isUser === true) {\r\n reportTypes = reportTypes.filter((t) => USER_REPORT_NAMES.includes(t.name));\r\n }\r\n\r\n return [\r\n {\r\n name: 'createdOn',\r\n title: keyMap.sharedFieldsCreatedOn,\r\n type: 'dateTimeRange',\r\n timeFormat: false,\r\n },\r\n {\r\n name: 'user',\r\n title: keyMap.sharedFieldsUser,\r\n isHidden: (ctx: CtxProps) => ctx.props.isUser === true,\r\n },\r\n {\r\n name: 'type',\r\n title: keyMap.sharedFieldsType,\r\n type: 'select',\r\n options: reportTypes,\r\n },\r\n {\r\n name: 'status',\r\n title: keyMap.commonStatus,\r\n type: 'select',\r\n options: ENUM_CONSTANTS.REPORT_STATUS,\r\n isHidden: (ctx: CtxProps) => ctx.props.isUser === true,\r\n },\r\n {\r\n name: 'country',\r\n title: keyMap.sharedFieldsCountry,\r\n type: 'select',\r\n options: ENUM_CONSTANTS.COUNTRY,\r\n isHidden: (ctx: CtxProps) => ctx.props.isUser === true,\r\n },\r\n {\r\n name: 'componentId',\r\n type: 'hidden',\r\n defaultValue: (ctx: CtxProps) => ctx.props.componentId || null,\r\n },\r\n ];\r\n};\r\n\r\nconst ReportGrid: React.FC = (props) => {\r\n const {\r\n api = ApiUrls.reportAdmin.grid,\r\n downloadApi = ApiUrls.reportAdmin.download,\r\n isUser,\r\n truncatePagination = false,\r\n } = props;\r\n\r\n const actions = [\r\n {\r\n name: keyMap.sharedActionsDetails,\r\n type: 'link',\r\n link: '/admin/reports',\r\n isHidden: () => !!isUser,\r\n },\r\n {\r\n name: keyMap.sharedActionsDownload,\r\n onClick: (data: IReportRow) => onDownload(`${downloadApi}?id=${data.id}`),\r\n isHidden: (data: IReportRow) => !data.fileItem.fileName,\r\n },\r\n ];\r\n\r\n const fields = getFields(isUser);\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {i18n.t(keyMap.sharedActionsCreate)}\r\n \r\n
\r\n
\r\n
Reports History \r\n
\r\n\r\n
\r\n
\r\n
\r\n {`${title}:`} \r\n \r\n {value.map((v) => {\r\n const displayValue = `${v[key as DisplayValue]}: ${getFormattedNumber(v.volume, { precision: true })}`;\r\n\r\n if (v.bySymbol && v.bySymbol.length) {\r\n return (\r\n
\r\n {displayValue} \r\n \r\n {v.bySymbol.map((item: IVolumeBySymbol) => (\r\n
{`${item.symbol}: ${item.volume}`}
\r\n ))}\r\n
\r\n );\r\n }\r\n\r\n return (\r\n
\r\n {displayValue}\r\n
\r\n );\r\n })}\r\n
\r\n);\r\n\r\nconst ColumnValue = ({\r\n row,\r\n value,\r\n volumeBySymbolKey,\r\n volumeByAccountKey,\r\n}: {\r\n row: ITradingVolumeRow;\r\n value: ITradingVolume;\r\n volumeByAccountKey: AccountKeyVolume;\r\n volumeBySymbolKey: SymbolKeyVolume;\r\n}): JSX.Element | null => {\r\n const { i18n } = useTranslation();\r\n\r\n if (!value) {\r\n return null;\r\n }\r\n const totalNonEcn = getFormattedNumber(value.totalNonEcn, { precision: true });\r\n const totalEcn = getFormattedNumber(value.totalEcn, { precision: true });\r\n\r\n return (\r\n \r\n
{`${i18n.t(\r\n keyMap.partnershipIbInfoStatisticsTradingVolReportTotalNonEcn,\r\n )}: ${totalNonEcn}`}
\r\n
{`${i18n.t(\r\n keyMap.partnershipIbInfoStatisticsTradingVolReportTotalEcn,\r\n )}: ${totalEcn}`}
\r\n {renderVolumeBy(\r\n i18n.t(keyMap.partnershipIbInfoStatisticsTradingVolReportByAccount),\r\n row[volumeByAccountKey] || [],\r\n 'account',\r\n )}\r\n {renderVolumeBy(\r\n i18n.t(keyMap.partnershipIbInfoStatisticsTradingVolReportBySymbol),\r\n row[volumeBySymbolKey] || [],\r\n 'symbol',\r\n )}\r\n
\r\n {getFormattedNumber(value.commission, { precision: true })} \r\n \r\n {value.commissionSenders.map((item) => (\r\n
\r\n {`${item.sender || ''}: ${getFormattedNumber(item.commission, { precision: true })}`}\r\n
\r\n ))}\r\n
\r\n);\r\n\r\nexport const COLUMNS = [\r\n {\r\n key: 'mainIbCode',\r\n name: keyMap.partnershipIbInfoStatisticsTradingVolReportMainIbCode,\r\n },\r\n {\r\n key: 'partnerAccount',\r\n name: keyMap.partnershipIbInfoStatisticsTradingVolReportPartnerAccount,\r\n render: (row: ITradingVolumeRow, value: string): JSX.Element => (\r\n \r\n {value} \r\n {row.email}
\r\n \r\n ),\r\n },\r\n {\r\n key: 'level',\r\n name: keyMap.partnershipIbInfoStatisticsTradingVolReportLevel,\r\n },\r\n {\r\n key: 'totalClients',\r\n name: keyMap.partnershipIbInfoStatisticsTradingVolReportTotalClientsSubIb,\r\n render: renderClients,\r\n },\r\n {\r\n key: 'bdmCode',\r\n name: keyMap.sharedFieldsBdmCode,\r\n },\r\n {\r\n key: 'aeCode',\r\n name: keyMap.sharedFieldsAeCode,\r\n },\r\n {\r\n key: 'ownTradingVolume',\r\n name: keyMap.partnershipIbInfoStatisticsTradingVolReportOwnTradingVolume,\r\n render: (row: ITradingVolumeRow, val: ITradingVolume): JSX.Element | null => (\r\n data.totalCount,\r\n totalComponent: (data: ApiVolumeReportAdminGridTotalsItem) => {\r\n return (\r\n (null);\r\n\r\n useImperativeHandle(ref, () => ({ setData, validate }));\r\n\r\n useEffect(() => {\r\n if (initialValue) {\r\n setData(initialValue);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (data) {\r\n setData(data);\r\n }\r\n }, [data]);\r\n\r\n const changeHandler = useCallback(() => {\r\n if (!signature || !signature.current) {\r\n return;\r\n }\r\n const base64Signature = signature.current.toDataURL('image/png');\r\n const data = base64Signature.slice(PREFIX.length);\r\n\r\n signature.current.canvas.current?.toBlob((blob) => {\r\n onChange({ metaInfo: PREFIX, data, signatureFile: blob });\r\n });\r\n }, [onChange]);\r\n\r\n useEffect(() => {\r\n //@ts-ignore\r\n if (signature.current && signature?.current?.signaturePad) {\r\n const { current } = signature;\r\n\r\n //@ts-ignore\r\n current.signaturePad.addEventListener('endStroke', changeHandler);\r\n // clean up the event handler\r\n return function cleanup() {\r\n //@ts-ignore\r\n current.signaturePad.removeEventListener('endStroke', changeHandler);\r\n };\r\n }\r\n }, [changeHandler]);\r\n\r\n const validate = () => {\r\n if (!signature || !signature.current) {\r\n return true;\r\n }\r\n\r\n const isValid = !signature.current.isEmpty();\r\n\r\n setIsValid(isValid);\r\n\r\n return isValid;\r\n };\r\n\r\n const clearHandler = () => {\r\n if (!signature || !signature.current) {\r\n return;\r\n }\r\n signature.current.clear();\r\n onChange(null);\r\n };\r\n\r\n const setData = (image: SignatureDataType) => {\r\n if (!signature || !signature.current) {\r\n return;\r\n }\r\n if (image && image.metaInfo && image.data) {\r\n signature.current.fromDataURL(image.metaInfo + image.data);\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n {!disabled && (\r\n \r\n {i18n.t(keyMap.signatureClearBtn)}\r\n \r\n )}\r\n
\r\n
> =>\r\n await fetchApi.get(path, { params: { id } });\r\n\r\nexport const minDepositLimitsAreConfigured = (\r\n recommendedMinDepositLimits: RecommendedMinDepositLimitsType[],\r\n accountGroupMappingType: IApiGroupMappingType,\r\n): boolean => {\r\n return recommendedMinDepositLimits.some(({ groupMappingType }) => groupMappingType === accountGroupMappingType);\r\n};\r\n\r\nexport const isLotCopyTypeCheck = (copyType?: IApiCopyType): boolean => {\r\n return copyType === IApiCopyType.Lot;\r\n};\r\n\r\nexport const leverageFieldHandler = (\r\n masterLeverage: number,\r\n fields: SharedIModalFormField[],\r\n isUpdateLeverageAllowed: boolean,\r\n leverages?: { value: number }[],\r\n) => {\r\n if (!isUpdateLeverageAllowed) {\r\n return;\r\n }\r\n\r\n const leverageFieldIdx = FormUtils.getFieldIndex(fields, LEVERAGE);\r\n\r\n if (leverages) {\r\n const leverageFromMaster = { value: masterLeverage };\r\n\r\n if (!leverages.some((option) => option.value === masterLeverage)) {\r\n leverages.unshift(leverageFromMaster);\r\n }\r\n\r\n FormUtils.updateFormField(\r\n leverageFieldIdx,\r\n {\r\n options: leverages,\r\n attributes: { disabled: !isUpdateLeverageAllowed },\r\n },\r\n fields,\r\n );\r\n }\r\n};\r\n","import React, { Component } from 'react';\r\nimport { ModalWrapper } from '@components-library/Modals/ModalWrapper';\r\nimport { IFormField } from '@components-shared/forms/formField.interface';\r\nimport { getRequestString } from '@components-shared/table/utils/getRequestString';\r\nimport { keyMap } from '@locales/lokalise/keyMap';\r\nimport { fetchApi } from 'api/fetchApi';\r\n// @ts-ignore\r\nimport generator, { getInitialState, mergeState } from 'components/shared/forms/formGenerator';\r\nimport FormGenerator from 'components/shared/forms/formGenerator';\r\nimport { handleError } from 'utils/errors';\r\nimport { TableActionModalProps, TableActionModalState } from '../types';\r\n\r\nconst FIELDS: IFormField[] = [];\r\nconst Form = generator(FIELDS);\r\n\r\nclass ActionModal extends Component {\r\n state: TableActionModalState;\r\n\r\n constructor(props: TableActionModalProps) {\r\n super(props);\r\n\r\n const { fields = [], data, dataSection, noData } = this.props;\r\n const formData = dataSection ? data[dataSection] : data;\r\n\r\n this.state = {\r\n form: noData ? { ...getInitialState(fields) } : { ...mergeState(fields, formData) },\r\n };\r\n }\r\n\r\n form = React.createRef>();\r\n\r\n componentDidMount(): void {\r\n const { fields } = this.props;\r\n\r\n if (this.form.current) {\r\n this.form.current.update(fields);\r\n }\r\n }\r\n\r\n onChange = (name: any, value: any) => {\r\n const { form } = this.state;\r\n\r\n form[name] = value;\r\n this.setState({ form });\r\n };\r\n\r\n onSubmit = async () => {\r\n const { form } = this.state;\r\n const { closeModal, updateData, api, data } = this.props;\r\n\r\n const requestString = getRequestString(api, data);\r\n\r\n try {\r\n await fetchApi.post(requestString, form);\r\n updateData(false);\r\n closeModal();\r\n } catch (error) {\r\n handleError('Failed to send data', error);\r\n }\r\n };\r\n\r\n render() {\r\n const { closeModal, modalTitle, name } = this.props;\r\n const { form } = this.state;\r\n\r\n const actions = [\r\n {\r\n title: keyMap.sharedActionsSubmit,\r\n onClick: this.onSubmit,\r\n },\r\n {\r\n title: keyMap.sharedActionsCancel,\r\n onClick: closeModal,\r\n className: 'primary--button',\r\n noValidate: true,\r\n },\r\n ];\r\n\r\n return (\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default ActionModal;\r\n","import React, { FC, ReactNode } from 'react';\r\nimport { Link, withRouter } from 'react-router-dom';\r\nimport { DeprecatedFAIcon } from '@components-library/Icons/DeprecatedFAIcon';\r\nimport { getRequestString } from '@components-shared/table/utils/getRequestString';\r\nimport { KeyMapKeys, keyMap } from '@locales/lokalise/keyMap';\r\nimport { fetchApi } from 'api/fetchApi';\r\nimport cn from 'classnames';\r\nimport { ConfirmDialog } from 'components/shared/modal';\r\nimport { ITableRecordData } from 'global.interfaces';\r\nimport i18next from 'i18next';\r\nimport { handleError } from 'utils/errors';\r\nimport {\r\n TableActionsProps,\r\n TableActionDetails,\r\n TableActionLink,\r\n TableActionsMap,\r\n TableActionDefault,\r\n TableAction,\r\n} from '../types';\r\nimport { COMMENT_FIELDS } from './modalFields';\r\n\r\nconst getActionName = (name: undefined | string | ((data: ITableRecordData) => string), data: ITableRecordData) =>\r\n typeof name === 'function' ? name(data) : i18next.t((name || 'actionName') as KeyMapKeys);\r\n\r\nconst onActionFn = (params: Omit & { type: string }, postParams?: any) => {\r\n const { name, data, setUpdatingState, updateData, onClick, api, queryStringParam } = params;\r\n\r\n if (onClick) {\r\n return onClick(data, postParams);\r\n }\r\n\r\n if (!api) {\r\n return null;\r\n }\r\n\r\n setUpdatingState();\r\n\r\n const requestString = getRequestString(api, data, queryStringParam);\r\n\r\n return fetchApi\r\n .post(requestString, postParams)\r\n .then(() => updateData(false))\r\n .catch((error) => {\r\n const messageOfFailedAction = getActionName(name, data);\r\n const errorMessage =\r\n params.errorMessage || typeof messageOfFailedAction === 'string'\r\n ? i18next.t(keyMap.sharedErrorsFailedMessageForRecord, {\r\n actionName: i18next.t(messageOfFailedAction as KeyMapKeys),\r\n })\r\n : i18next.t(keyMap.sharedErrorsOperationFailed);\r\n\r\n handleError(errorMessage, error);\r\n setUpdatingState(false);\r\n });\r\n};\r\n\r\nexport const onAction = (params: Omit & { type: string }) => {\r\n const { confirm, data, name, confirmMessage, comment, commentKey = 'internalComment' } = params;\r\n\r\n if (confirm) {\r\n const actionName = getActionName(name, data);\r\n const confirmText =\r\n confirmMessage || i18next.t(keyMap.sharedConfirmMessage, { actionName: i18next.t(actionName as KeyMapKeys) });\r\n\r\n // TODO: HOW THIS EVEN WORKS?\r\n return (ConfirmDialog as any).show(\r\n confirmText,\r\n (commentText: any) => onActionFn(params, { [commentKey]: commentText }),\r\n null,\r\n comment,\r\n );\r\n }\r\n\r\n return onActionFn(params);\r\n};\r\n\r\nconst renderActionIcon = (params: TableActionDetails | TableActionLink | Omit) => {\r\n const { iconClass } = params;\r\n\r\n if (iconClass == null) {\r\n return;\r\n }\r\n\r\n return typeof iconClass === 'string' ? (\r\n \r\n \r\n ) : (\r\n {iconClass} \r\n );\r\n};\r\n\r\nconst renderDefaultAction = (params: Omit & { type: string }, isModal?: boolean) => {\r\n const { name, data, disabled, className, setCurrentRow } = params;\r\n const title = getActionName(name, data);\r\n const isDisabled = typeof disabled === 'function' ? disabled(data) : !!disabled;\r\n\r\n return (\r\n (isModal ? setCurrentRow({ ...params }) : onAction(params))}>\r\n {renderActionIcon(params)}\r\n {typeof title === 'string' ? i18next.t(title as KeyMapKeys) : title}\r\n \r\n );\r\n};\r\n\r\nconst renderDetailsAction = (params: TableActionDetails) => {\r\n const { name, data, disabled, changeShowDetails, component } = params;\r\n\r\n if (!component) {\r\n return null;\r\n }\r\n const title = getActionName(name, data);\r\n const isDisabled = typeof disabled === 'function' ? disabled(data) : !!disabled;\r\n\r\n return (\r\n \r\n {renderActionIcon(params)}\r\n {title}\r\n \r\n );\r\n};\r\n\r\nconst renderLinkAction = (props: TableActionLink) => {\r\n const { name = keyMap.sharedActionsDetails, location, link, data, actionKey = 'id' } = props;\r\n\r\n let linkUrl = '';\r\n\r\n const id = data[actionKey] ? `/${data[actionKey]}` : '';\r\n\r\n if (link) {\r\n linkUrl = typeof link === 'function' ? `${link(data)}${id}` : `${link}${id}`;\r\n } else {\r\n linkUrl = `${location.pathname}${id}`;\r\n }\r\n\r\n return (\r\n (renderLinkAction) as any,\r\n comment: (params) => renderDefaultAction({ ...params, fields: COMMENT_FIELDS }, true),\r\n form: (params) =>\r\n renderDefaultAction(\r\n {\r\n ...params,\r\n fields: params.fields || COMMENT_FIELDS,\r\n },\r\n true,\r\n ),\r\n};\r\n\r\nconst getActionTypeRenderer = (actionType: keyof TableActionsMap) =>\r\n ACTION_TYPES[actionType] as (params: TableActionsMap[keyof TableActionsMap]) => ReactNode;\r\n\r\nexport const Actions: FC = ({\r\n actionList = [],\r\n additionalActionsClass,\r\n data,\r\n updateData,\r\n setUpdatingState,\r\n setCurrentRow,\r\n changeShowDetails,\r\n}) => (\r\n \r\n {actionList.map((action, i) => {\r\n const key = `action_${i}`;\r\n const { isHidden } = action;\r\n const isHideAction = typeof isHidden === 'function' ? isHidden(data as ITableRecordData) : isHidden;\r\n\r\n if (isHideAction) {\r\n return null;\r\n }\r\n\r\n if (action.type && Object.prototype.hasOwnProperty.call(ACTION_TYPES, action.type)) {\r\n const renderAction = getActionTypeRenderer(action.type);\r\n\r\n return (\r\n \r\n {action.separator && | }\r\n {renderAction({\r\n ...action,\r\n updateData,\r\n data,\r\n setUpdatingState,\r\n setCurrentRow,\r\n changeShowDetails,\r\n } as TableAction)}\r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n {action.separator && | }\r\n {ACTION_TYPES.default({\r\n ...(action as TableActionDefault),\r\n updateData,\r\n data,\r\n setUpdatingState,\r\n })}\r\n \r\n );\r\n })}\r\n \r\n);\r\n","import { IFormField } from '@components-shared/forms/formField.interface';\r\nimport { keyMap } from '@locales/lokalise/keyMap';\r\n\r\nexport const COMMENT_FIELDS: IFormField[] = [\r\n {\r\n name: 'publicComment',\r\n title: keyMap.sharedFieldsPublicComment,\r\n type: 'textarea',\r\n attributes: { autoComplete: 'off' },\r\n limit: 256,\r\n },\r\n {\r\n name: 'internalComment',\r\n title: keyMap.sharedFieldsInternalComment,\r\n type: 'textarea',\r\n attributes: { autoComplete: 'off' },\r\n limit: 256,\r\n },\r\n];\r\n\r\nexport const FOLLOW_UP_FIELDS = [\r\n {\r\n name: 'internalComment',\r\n title: keyMap.sharedFieldsInternalComment,\r\n type: 'textarea',\r\n attributes: { autoComplete: 'off' },\r\n limit: 256,\r\n },\r\n];\r\n\r\nexport const COMMENT_FIELDS_UNLIM = [\r\n {\r\n name: 'publicComment',\r\n title: keyMap.sharedFieldsPublicComment,\r\n type: 'textarea',\r\n attributes: { autoComplete: 'off' },\r\n },\r\n {\r\n name: 'internalComment',\r\n title: keyMap.sharedFieldsInternalComment,\r\n type: 'textarea',\r\n attributes: { autoComplete: 'off' },\r\n },\r\n];\r\n\r\nexport const FOLLOW_UP_FIELDS_UNLIM = [\r\n {\r\n name: 'internalComment',\r\n title: keyMap.sharedFieldsInternalComment,\r\n type: 'textarea',\r\n attributes: { autoComplete: 'off' },\r\n },\r\n];\r\n\r\nexport default { COMMENT_FIELDS, FOLLOW_UP_FIELDS, COMMENT_FIELDS_UNLIM, FOLLOW_UP_FIELDS_UNLIM };\r\n","import React, { ReactNode, useState } from 'react';\r\nimport { X } from 'react-feather';\r\nimport cn from 'classnames';\r\nimport { ITableRecordData } from 'global.interfaces';\r\nimport { Actions } from '../TableActions';\r\nimport { TableActionDetails, TableBodyProps } from '../types';\r\n\r\nexport const TableBody = (props: TableBodyProps): JSX.Element => {\r\n const {\r\n data: records,\r\n columns,\r\n parentContext,\r\n actions,\r\n updateData,\r\n setUpdatingState,\r\n setCurrentRow,\r\n actionKey,\r\n additionalActionsClass,\r\n selectedRowsIds = [],\r\n toggleRowsSelection,\r\n openedRowDetailsId = null,\r\n toggleOpened,\r\n tableHasExtensions,\r\n tableRowDetails = () => null,\r\n selectedColumn,\r\n selectByColumnName,\r\n totals,\r\n withStickyAction,\r\n } = props;\r\n\r\n const [detailsActiveRow, setDetailsActiveRow] = useState('');\r\n\r\n const changeShowDetails = (key: string) => {\r\n setDetailsActiveRow(key);\r\n };\r\n\r\n const columnCount = actions ? columns.length + 1 : columns.length;\r\n const detailsAction =\r\n actions && (actions.find((action: any) => action.type === 'details') as TableActionDetails | null);\r\n const hasComponent = detailsAction && detailsAction.component;\r\n const DetailsComponent = detailsAction?.component;\r\n\r\n const getRecordValue = (record: ITableRecordData, key: string, isRenderFn: boolean): ReactNode => {\r\n const keys = key.split('.');\r\n\r\n const value = keys.reduce((xs, x) => {\r\n if (!xs) {\r\n return null;\r\n }\r\n\r\n return typeof xs === 'object' ? (xs as any)[x] : xs;\r\n }, record as any);\r\n\r\n if (isRenderFn) {\r\n return value;\r\n }\r\n\r\n return typeof value !== 'object' ? value : null;\r\n };\r\n\r\n const getRows = () => {\r\n return records.map((record, i) => {\r\n const key = `record_${i}`;\r\n const actionKeyReact = `action_${i}`;\r\n const recordId = record[selectByColumnName] as number;\r\n const recordIdArray = Array.of(recordId);\r\n const isSelected = selectedRowsIds?.includes(recordId);\r\n const isOpened = recordId === openedRowDetailsId;\r\n\r\n const handleOpenClick = () => {\r\n if (tableHasExtensions) {\r\n toggleOpened?.(recordId);\r\n }\r\n };\r\n const handleSelectChange = () => {\r\n if (tableHasExtensions && selectByColumnName) {\r\n toggleRowsSelection(recordIdArray);\r\n }\r\n };\r\n\r\n record.actionKey = actionKey;\r\n\r\n return (\r\n \r\n \r\n {columns.map((col) => {\r\n const colClassName = col.className ?? '';\r\n\r\n if (col.render) {\r\n return (\r\n \r\n \r\n {col.render(record, getRecordValue(record, col.key, true), parentContext)}\r\n \r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n {col.key === 'checkbox' ? (\r\n \r\n \r\n ) : (\r\n \r\n {getRecordValue(record, col.key, false)}\r\n \r\n )}\r\n \r\n );\r\n })}\r\n\r\n {actions && (\r\n \r\n changeShowDetails(key)}\r\n additionalActionsClass={additionalActionsClass}\r\n />\r\n \r\n )}\r\n \r\n\r\n {isOpened && (\r\n \r\n \r\n {tableRowDetails(recordId)}
\r\n \r\n \r\n )}\r\n\r\n {detailsActiveRow === key && hasComponent && (\r\n \r\n \r\n \r\n changeShowDetails('')} />\r\n {DetailsComponent &&
\r\n \r\n \r\n )}\r\n \r\n );\r\n });\r\n };\r\n\r\n const getTotalsRow = () => {\r\n if (!totals) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n \r\n {columns.map((col) => {\r\n return (\r\n \r\n {getRecordValue(totals, col.key, false)}
\r\n \r\n );\r\n })}\r\n \r\n \r\n );\r\n };\r\n\r\n return (\r\n \r\n {getRows()}\r\n {getTotalsRow()}\r\n \r\n );\r\n};\r\n","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { keyMap } from '@locales/lokalise/keyMap';\r\nimport { handleError } from 'utils/errors';\r\nimport { TableExportProps } from '../types';\r\n\r\nconst TableExport = (props: TableExportProps) => {\r\n const { exportAPI } = props;\r\n const { i18n } = useTranslation();\r\n\r\n const onDownload = () => {\r\n const { exportAPI } = props;\r\n const form = document.createElement('form');\r\n\r\n form.method = 'POST';\r\n form.action = exportAPI;\r\n document.body.appendChild(form);\r\n\r\n try {\r\n form.submit();\r\n } catch (error) {\r\n handleError('Export failed', error);\r\n return false;\r\n } finally {\r\n document.body.removeChild(form);\r\n }\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default TableExport;\r\n","import React, { Component, FormEvent, ReactNode, useState } from 'react';\r\nimport { Button } from '@components-library/Button';\r\nimport { Text } from '@components-library/Typography';\r\nimport { DateTimeRange } from '@components-shared/forms/DateTimeRange';\r\nimport { DateTimeRangeOptionType } from '@components-shared/forms/DateTimeRange/types';\r\nimport { DynamicDropdown } from '@components-shared/forms/DynamicDropdown/DynamicDropdown';\r\nimport { Input } from '@components-shared/forms/Input';\r\nimport { MultiSelect, IMultiSelectOption } from '@components-shared/forms/MultiSelect';\r\nimport { Select } from '@components-shared/forms/Select';\r\nimport Checkbox from '@components-shared/forms/checkbox';\r\nimport CustomSelect from '@components-shared/forms/customSelect';\r\nimport DateTime from '@components-shared/forms/datetimePicker';\r\nimport { FieldValue, IFormField } from '@components-shared/forms/formField.interface';\r\nimport NumberRange from '@components-shared/forms/numberRange';\r\nimport validators from '@components-shared/forms/validators';\r\nimport { pushExportEvent } from '@components-shared/googleAnalyticsEvents';\r\nimport { calculateScreenSize } from '@components-shared/utils/calculateScreenSize';\r\nimport { screenSizeObserver } from '@components-shared/utils/screenSizeObesrver';\r\nimport { keyMap } from '@locales/lokalise/keyMap';\r\nimport { handleError } from '@utils/errors';\r\nimport { getFileUrlForDownloading } from '@utils/fileDownload';\r\nimport { IUtilsDateTimeRange } from '@utils/library/dateTime';\r\nimport { observer } from 'mobx-react';\r\nimport { useMobxStore } from 'store/mobx';\r\n//@ts-ignore: remove after translating into typescript\r\nimport { getInitialState } from '../../forms/formGenerator';\r\nimport {\r\n ITableFiltersForm,\r\n ITableFiltersFields,\r\n ITableValidationType,\r\n ITableFieldTypes,\r\n ITableFilterFieldType,\r\n ITableFiltersFieldsValues,\r\n ITableMultiSelectFieldType,\r\n ITableSelectFieldType,\r\n ITableCustomSelectFieldType,\r\n ITableDynamicDropdownFieldType,\r\n ITableInputFieldType,\r\n ITableFilter,\r\n ITableFilterState,\r\n ITableFilterProps,\r\n} from './interfaces';\r\n\r\nclass TableFilter extends Component implements ITableFilter {\r\n state = {\r\n form: { ...getInitialState(this.props.fields as IFormField[], this.props.parentContext) },\r\n validation: this.getValidation(this.props.fields),\r\n screenSize: calculateScreenSize(window.innerWidth),\r\n };\r\n\r\n onScreenSizeUpdate = (screenSize: ITableFilterState['screenSize']) => {\r\n this.setState({ screenSize });\r\n };\r\n\r\n componentDidMount(): void {\r\n screenSizeObserver.subscribe(this.onScreenSizeUpdate);\r\n\r\n this.props.setGetFilterValuesRef?.(this.getFilter);\r\n }\r\n\r\n componentWillUnmount(): void {\r\n screenSizeObserver.unsubscribe(this.onScreenSizeUpdate);\r\n }\r\n\r\n getValidation(fields: ITableFiltersFields) {\r\n return fields.reduce((acc: ITableValidationType, f: ITableFieldTypes) => {\r\n acc[f.name] = { valid: true, message: '' };\r\n return acc;\r\n }, {});\r\n }\r\n\r\n checkField = (form: ITableFiltersForm, f: ITableFieldTypes) => {\r\n const field = form[f.name];\r\n const fieldType = f.type;\r\n\r\n if (f.required) {\r\n if (field === '' || field == null || field == undefined || (Array.isArray(field) && field.length === 0)) {\r\n return { valid: false, message: keyMap.formsValidationRequiredError };\r\n }\r\n }\r\n\r\n if (validators[fieldType]) {\r\n const validator = validators[fieldType];\r\n const params = { ...f };\r\n\r\n //@ts-ignore: remove after translating into typescript\r\n if (!validator.check(field, params)) {\r\n return { valid: false, message: validator.message };\r\n }\r\n }\r\n\r\n if (f.validator) {\r\n const { validator } = f;\r\n\r\n if (!validator.check(field as FieldValue)) {\r\n return { valid: false, message: validator.message };\r\n }\r\n }\r\n\r\n return { valid: true, message: '' };\r\n };\r\n\r\n update(_fields: ITableFiltersFields, needUpdate: boolean) {\r\n const fields = _fields;\r\n\r\n this.setState(\r\n {\r\n validation: this.getValidation(fields),\r\n form: { ...getInitialState(fields as IFormField[]) },\r\n },\r\n () => needUpdate && this.props.onFilter(),\r\n );\r\n }\r\n\r\n getFieldInfo = (name: string) => {\r\n return this.props.fields.find((x) => x.name == name);\r\n };\r\n\r\n validate = () => {\r\n const { form } = this.state;\r\n const { fields } = this.props;\r\n let isValid = true;\r\n\r\n const setValidateField = () =>\r\n fields.reduce((validation: ITableValidationType, f: ITableFilterFieldType) => {\r\n validation[f.name] = this.checkField(form, f);\r\n\r\n if (!validation[f.name].valid) {\r\n isValid = false;\r\n }\r\n\r\n return validation;\r\n }, {});\r\n\r\n const validation = setValidateField();\r\n\r\n this.setState({ validation });\r\n\r\n return isValid;\r\n };\r\n\r\n getValidationField(name: string) {\r\n const { validation } = this.state;\r\n\r\n return validation[name];\r\n }\r\n\r\n onChange = (name: string, value: ITableFiltersFieldsValues | Array) => {\r\n const { form } = this.state;\r\n\r\n form[name] = value;\r\n this.setState({ form });\r\n };\r\n\r\n onDatetimeChange = ({ name, value }: { name: string; value: string }) => {\r\n const { form } = this.state;\r\n\r\n form[name] = value;\r\n this.setState({ form });\r\n };\r\n\r\n multiselect = (props: ITableMultiSelectFieldType, value: Array) => (\r\n this.onChange(target.name, target.checked)}\r\n value={value}\r\n valid={this.getValidationField(props.name).valid}\r\n validationMessage={this.getValidationField(props.name).message}\r\n />\r\n );\r\n\r\n select = (props: ITableSelectFieldType, value: string) => (\r\n ): boolean | void => {\r\n e.preventDefault();\r\n const { onFilter } = this.props;\r\n\r\n if (!this.validate()) {\r\n return false;\r\n }\r\n\r\n return onFilter();\r\n };\r\n\r\n getFilterClass() {\r\n const { fields, className = '' } = this.props;\r\n\r\n if (!className) {\r\n let fieldsCount = 0;\r\n const fieldsInRow = 4;\r\n\r\n fields.forEach((f) => (f.type === 'dateTimeRange' ? (fieldsCount += 3) : (fieldsCount += 1)));\r\n const rowsCount = Math.ceil(fieldsCount / fieldsInRow);\r\n\r\n const rowsCountAdjustifierMap: Record = {\r\n xs: 1,\r\n sm: 1,\r\n md: 1,\r\n lg: 1,\r\n xl: 0,\r\n };\r\n\r\n return fieldsCount > 4 ? `multi-rows rows--${rowsCount + rowsCountAdjustifierMap[this.state.screenSize]}` : '';\r\n }\r\n\r\n return className;\r\n }\r\n\r\n render(): ReactNode {\r\n const { fields, exportAPI, processing } = this.props;\r\n const { form } = this.state;\r\n const className = this.getFilterClass();\r\n const anyNoHiddenFilters = fields.find((field) => field.type !== 'hidden');\r\n\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default TableFilter;\r\n\r\nexport const DownloadButton = observer(\r\n (props: { getFilter: () => unknown; exportAPI?: string; exportEvent?: string }) => {\r\n const [isExportProcessing, setIsExportProcessing] = useState(false);\r\n const {\r\n accountStore: {\r\n userInfo: { idHash },\r\n },\r\n } = useMobxStore();\r\n\r\n const onDownload = async (): Promise => {\r\n const link = document.createElement('a');\r\n\r\n const filter = props.getFilter();\r\n\r\n try {\r\n setIsExportProcessing(true);\r\n const { url, fileName } = await getFileUrlForDownloading(props.exportAPI ?? '', filter);\r\n\r\n link.href = url;\r\n link.setAttribute('download', fileName);\r\n document.body.appendChild(link);\r\n link.click();\r\n\r\n if (props.exportEvent) {\r\n pushExportEvent(idHash, props.exportEvent);\r\n }\r\n } catch (error) {\r\n handleError('Export failed', error);\r\n return false;\r\n } finally {\r\n setIsExportProcessing(false);\r\n if (link?.parentNode) {\r\n link.parentNode.removeChild(link);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n {keyMap.formsExport}\r\n \r\n );\r\n },\r\n);\r\n","import React, { memo, ReactNode } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { KeyMapKeys } from '@locales/lokalise/keyMap';\r\n\r\ninterface ITableFootnote {\r\n icon?: ReactNode;\r\n hint: string;\r\n}\r\nexport const TableFootnote = memo(({ icon, hint }: ITableFootnote): JSX.Element => {\r\n const { i18n } = useTranslation();\r\n\r\n return (\r\n \r\n {icon || ''}\r\n
{i18n.t(hint as KeyMapKeys)}
\r\n
{\r\n onFilter = (key: string, value: FormValuesType) => {\r\n const { onFilter, headerFilterValues } = this.props;\r\n\r\n const filterValues = { ...headerFilterValues };\r\n\r\n filterValues[key] = value;\r\n\r\n onFilter(filterValues);\r\n this.props.changePage(0);\r\n };\r\n\r\n generateTableNames() {\r\n const {\r\n columns,\r\n toggleRowsSelection,\r\n data,\r\n selectedRowsIds = [],\r\n tableHasExtensions,\r\n headerFilterValues,\r\n headerFilterDefaultValues,\r\n getSortedData,\r\n headerSortValues,\r\n selectByColumnName,\r\n } = this.props;\r\n const cols = columns || [];\r\n const handleSelectAllChange = () => {\r\n tableHasExtensions &&\r\n selectByColumnName &&\r\n toggleRowsSelection(data.map((d) => d[selectByColumnName]).filter(Boolean) as number[]);\r\n };\r\n\r\n return cols.map((col) =>\r\n col.key === 'checkbox' ? (\r\n // eslint-disable-next-line multiline-ternary\r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n {this.generateTableNames()}\r\n {actions && (\r\n \r\n {keyMap.sharedActionsActions} \r\n \r\n )}\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default observer(TableHeader);\r\n","import React from 'react';\r\nimport { MoreHorizontal } from 'react-feather';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Button } from '@components-library/Button';\r\nimport { PaginationParams } from '@components-shared/table/TablePagination/interfaces';\r\nimport { TableAmount } from '@components-shared/table/types';\r\nimport { KeyMapKeys, keyMap } from '@locales/lokalise/keyMap';\r\nimport { getFormattedNumber } from '@utils/helper';\r\nimport cn from 'classnames';\r\n\r\nexport type TablePaginationProps = {\r\n paginationParams: PaginationParams;\r\n perPage: number;\r\n amounts?: TableAmount[];\r\n isGettingTotals?: boolean;\r\n isGettingTotalsFinished?: boolean;\r\n onGetTotals?: () => void;\r\n};\r\n\r\nexport const Pagination = ({\r\n amounts,\r\n isGettingTotals,\r\n isGettingTotalsFinished,\r\n onGetTotals,\r\n perPage,\r\n paginationParams,\r\n}: TablePaginationProps) => {\r\n const { count, truncatePagination, startIndex, changePage } = paginationParams;\r\n const { i18n } = useTranslation();\r\n\r\n const generatePageRange = (currentPage: number, lastPage: number) => {\r\n const delta = 2;\r\n const left = Math.max(1, currentPage - delta);\r\n const right = Math.min(lastPage - 1, currentPage + delta);\r\n\r\n const range = [];\r\n\r\n for (let i = left; i <= right; i += 1) {\r\n range.push(i);\r\n }\r\n\r\n if (currentPage - delta > 1) {\r\n range.unshift(null);\r\n }\r\n if (currentPage + delta < lastPage - 1) {\r\n range.push(null);\r\n }\r\n\r\n range.unshift(0);\r\n\r\n if (lastPage !== 0) {\r\n range.push(lastPage);\r\n }\r\n\r\n return range;\r\n };\r\n\r\n const getAdjustedCount = () => {\r\n if (truncatePagination && count === perPage * 10 + 1) {\r\n return count - 1;\r\n }\r\n\r\n return count;\r\n };\r\n\r\n const renderPages = () => {\r\n const adjustedCount = getAdjustedCount();\r\n const lastPage = adjustedCount ? Math.ceil(adjustedCount / perPage) - 1 : 0;\r\n const currentPage = Math.ceil(startIndex / perPage);\r\n\r\n const pages = generatePageRange(currentPage, lastPage);\r\n const nextPage = currentPage === lastPage ? lastPage : currentPage + 1;\r\n const prevPage = currentPage - 1 < 0 ? 0 : currentPage - 1;\r\n\r\n return (\r\n \r\n changePage(prevPage)}>\r\n changePage(page || 0)}\r\n className={cn('pagination__item', {\r\n active: page === currentPage,\r\n disabled: page === null,\r\n })}>\r\n {page !== null ? (\r\n page === lastPage && adjustedCount + 1 === count ? (\r\n `${getFormattedNumber(page + 1)}+`\r\n ) : (\r\n page + 1\r\n )\r\n ) : (\r\n changePage(nextPage)}>\r\n
\r\n );\r\n };\r\n\r\n const renderTotalCount = () => {\r\n if (count === 0) {\r\n return null;\r\n }\r\n\r\n const currentPage = Math.ceil(startIndex / perPage);\r\n const from = startIndex + 1;\r\n const to = Math.min((currentPage + 1) * perPage, count);\r\n const adjustedCount = getAdjustedCount();\r\n\r\n const formattedFrom = getFormattedNumber(from);\r\n const formattedTo = getFormattedNumber(to);\r\n const formattedOf = `${getFormattedNumber(adjustedCount)}${adjustedCount + 1 === count ? '+' : ''}`;\r\n\r\n return (\r\n <>\r\n {i18n.t(keyMap.tableTotalCount, {\r\n from: formattedFrom,\r\n to: formattedTo,\r\n of: formattedOf,\r\n })}\r\n \r\n );\r\n };\r\n\r\n const renderTotalAmount = () => {\r\n if (!onGetTotals) {\r\n return null;\r\n }\r\n\r\n return !isGettingTotalsFinished ? (\r\n \r\n {keyMap.tableShowTotals}\r\n \r\n ) : (\r\n \r\n {amounts\r\n ?.filter((item) => typeof item.value === 'number')\r\n .map((item, index, items) => {\r\n const isLastItem = index === items.length - 1;\r\n const renderedValue = item.renderedValue ?? item.value?.toLocaleString();\r\n\r\n return (\r\n \r\n \r\n {i18n.t(item.title as KeyMapKeys)}:{' '}\r\n {renderedValue ?? 'N/A'} \r\n \r\n {!isLastItem && | }\r\n \r\n );\r\n })}\r\n \r\n );\r\n };\r\n\r\n return (\r\n \r\n
{renderTotalAmount()}
\r\n
{renderTotalCount()}
\r\n {renderPages()}\r\n
) => void;\r\n api: string;\r\n showSettings: boolean;\r\n totalsData: unknown;\r\n tableId: string;\r\n}\r\n\r\nexport const TablePagination = ({\r\n apiGetTotals,\r\n truncatePagination,\r\n changePage,\r\n count,\r\n startIndex,\r\n numberOfRows,\r\n getFetchBody,\r\n source,\r\n updateTableState,\r\n showSettings,\r\n api,\r\n tableId,\r\n totalsData,\r\n}: ITablePagination) => {\r\n const [fetchTotalsProcessing, setFetchTotalsProcessing] = useState(false);\r\n\r\n const paginationParams: PaginationParams = {\r\n count,\r\n startIndex,\r\n changePage,\r\n truncatePagination,\r\n };\r\n\r\n const handleGetTotals = async () => {\r\n const fetchBody = getFetchBody();\r\n\r\n if (!apiGetTotals) {\r\n return;\r\n }\r\n\r\n try {\r\n setFetchTotalsProcessing(true);\r\n\r\n const { data: responseData } = await fetchApi.post(apiGetTotals.url, fetchBody, {\r\n cancelToken: source?.token,\r\n });\r\n\r\n void updateTableState({\r\n preciseCount: apiGetTotals.totalCountExtractor?.(responseData) ?? null,\r\n totalsData: responseData,\r\n });\r\n } catch (error) {\r\n handleError(keyMap.sharedErrorsFailedToGetRecord, error);\r\n } finally {\r\n setFetchTotalsProcessing(false);\r\n }\r\n };\r\n\r\n const changeRowsPerPage = (numberOfRows: number) => {\r\n cacheService.cacheValue(tableId, numberOfRows, TABLE_CACHE_PREFIX, api);\r\n\r\n updateTableState({ numberOfRows });\r\n changePage(0, numberOfRows);\r\n };\r\n\r\n return (\r\n <>\r\n {showSettings && (\r\n \r\n {actions.map((rowAction) => (\r\n onRowSelectionButtonClick(rowAction)}>\r\n {rowAction.name} \r\n \r\n ))}\r\n
\r\n );\r\n};\r\n","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { keyMap } from '@locales/lokalise/keyMap';\r\nimport cn from 'classnames';\r\n\r\nexport type TableSettingsProps = {\r\n changeRowsPerPage: (rowsPerPage: number) => void;\r\n numberOfRows: number;\r\n numberOfRowsList: number[];\r\n};\r\n\r\nconst TableSettings = ({ changeRowsPerPage, numberOfRows, numberOfRowsList }: TableSettingsProps) => {\r\n const { i18n } = useTranslation();\r\n\r\n return (\r\n \r\n
\r\n
{i18n.t(keyMap.tableShowItems)}
\r\n
\r\n {numberOfRowsList.map((item) => (\r\n changeRowsPerPage(item)}>\r\n {item}\r\n \r\n ))}\r\n
\r\n
\r\n
;\r\n}\r\n\r\nexport const TableWrapper = ({\r\n children,\r\n className,\r\n useStickyActions,\r\n updateActionShadow,\r\n hideActionShadow,\r\n updateTableScroll,\r\n tableRef,\r\n}: ITableWrapper) => {\r\n const tableWrapperRef = useRef(null);\r\n\r\n const additionalClass = className || '';\r\n\r\n const { documentDirection } = useContext(AppContext);\r\n\r\n useEffect(() => {\r\n if (!useStickyActions) {\r\n return;\r\n }\r\n const tableWrapper = tableWrapperRef.current;\r\n const table = tableRef.current;\r\n\r\n const debounceInstance = debounce((entries) => {\r\n if (!table) {\r\n return;\r\n }\r\n\r\n for (const entry of entries) {\r\n const { contentRect } = entry;\r\n const divWidth = contentRect.width;\r\n\r\n const tableWidth = table.offsetWidth;\r\n\r\n const hasHorizontalScroll = tableWidth > Math.round(divWidth);\r\n\r\n const isScrollEnd = isHorizontalScrollAtEnd();\r\n\r\n if (hasHorizontalScroll) {\r\n updateTableScroll(true);\r\n updateActionShadow(isScrollEnd);\r\n } else {\r\n updateTableScroll(false);\r\n updateActionShadow(true);\r\n }\r\n }\r\n }, 300);\r\n\r\n const resizeObserver = new ResizeObserver(debounceInstance);\r\n\r\n if (tableWrapper) {\r\n resizeObserver.observe(tableWrapper);\r\n }\r\n\r\n return () => {\r\n if (tableWrapper) {\r\n debounceInstance.cancel();\r\n resizeObserver.unobserve(tableWrapper);\r\n }\r\n };\r\n }, [tableRef, updateActionShadow, updateTableScroll, useStickyActions]);\r\n\r\n const isHorizontalScrollAtEnd = () => {\r\n if (tableWrapperRef.current) {\r\n const { scrollLeft, clientWidth, scrollWidth } = tableWrapperRef.current;\r\n\r\n return scrollLeft + clientWidth >= scrollWidth;\r\n }\r\n\r\n return false;\r\n };\r\n\r\n const tableWrapperScrollHandler = (e: React.UIEvent) => {\r\n if (!useStickyActions) {\r\n return;\r\n }\r\n const { scrollLeft, scrollWidth, clientWidth } = e.currentTarget;\r\n const tolerance = 1;\r\n const maxScrollLeft = scrollWidth - clientWidth - tolerance;\r\n\r\n const currentActionShadowState =\r\n documentDirection === 'rtl' ? -Math.floor(scrollLeft) >= maxScrollLeft : Math.ceil(scrollLeft) >= maxScrollLeft;\r\n\r\n if (currentActionShadowState !== hideActionShadow) {\r\n updateActionShadow(currentActionShadowState);\r\n }\r\n };\r\n\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n};\r\n","export const NUMBER_OF_ROWS: number[] = [15, 30, 50];\r\nexport const DEFAULT_HEADER_SORT_VALUES = { sortingType: false, selectedColumn: '' };\r\nexport const TABLE_CACHE_PREFIX = '__tableSettings';\r\n","import React, { Component } from 'react';\r\nimport { Text } from '@components-library/Typography';\r\nimport { FormValuesType, IFormField } from '@components-shared/forms/formField.interface';\r\nimport { ITableFilter, ITableFilterFieldType } from '@components-shared/table/TableFilter';\r\nimport TableFilter from '@components-shared/table/TableFilter/TableFilter';\r\nimport { TableFootnote } from '@components-shared/table/TableFootnote';\r\nimport { TablePagination } from '@components-shared/table/TablePagination/TablePagination';\r\nimport { TableRowSelectionButton } from '@components-shared/table/TableRowSelectionButton/TableRowSelectionButton';\r\nimport { TableWrapper } from '@components-shared/table/TableWrapper';\r\nimport { DEFAULT_HEADER_SORT_VALUES, NUMBER_OF_ROWS, TABLE_CACHE_PREFIX } from '@components-shared/table/constants';\r\nimport { updateTablePageQueryParams } from '@components-shared/table/utils/updateTablePageQueryParams';\r\nimport { withRouterInnerRef } from '@components-shared/withRouterInnerRef';\r\nimport { keyMap } from '@locales/lokalise/keyMap';\r\nimport { cacheService } from '@utils/library';\r\nimport { CancelToken, CancelTokenSource, fetchApi, isFetchApiCancel } from 'api/fetchApi';\r\nimport cn from 'classnames';\r\n// @ts-ignore: remove after translating into typescript\r\nimport { getInitialState } from 'components/shared/forms/formGenerator';\r\nimport Preloader from 'components/shared/preloader';\r\nimport { getUpdatedSelectedRows } from 'components/shared/table/rowSelection';\r\nimport withErrorBoundary from 'components/shared/withErrorBoundary';\r\nimport { ITableRecordData } from 'global.interfaces';\r\nimport { ErrorType, handleError } from 'utils/errors';\r\nimport { getURLParams } from 'utils/helper';\r\nimport ActionModal from './ActionModal';\r\nimport { TableBody } from './TableBody';\r\nimport TableExport from './TableExport';\r\nimport TableHeader from './TableHeader';\r\nimport {\r\n RowSelectionAction,\r\n TableColumn,\r\n TableCurrentRow,\r\n TableGetDataResponse,\r\n TableProps,\r\n TableState,\r\n} from './types';\r\n\r\nexport type TableRefObject = InstanceType;\r\n\r\n/**\r\n * @deprecated Please use the new grid for new components.\r\n */\r\nclass Table> extends Component {\r\n tableId: string;\r\n\r\n constructor(props: TableProps & ExtraTableProps) {\r\n super(props);\r\n\r\n const { columns, tableId } = this.props;\r\n const headerFilters = columns\r\n .filter(({ filterType }) => filterType)\r\n .map(({ key, filterType }) => ({ name: key, type: filterType }));\r\n const headerFiltersStateInitialState = { ...getInitialState(headerFilters) };\r\n\r\n this.tableId = `${tableId}-page`;\r\n\r\n const numberOfRows = this.setNumberOfRows();\r\n\r\n this.state = {\r\n headerFilterValues: headerFiltersStateInitialState,\r\n headerSortValues: DEFAULT_HEADER_SORT_VALUES,\r\n headerFilterDefaultValues: headerFiltersStateInitialState,\r\n numberOfRows,\r\n processing: true,\r\n startIndex: 0,\r\n count: 0,\r\n preciseCount: null,\r\n totalsData: null,\r\n data: [],\r\n initialTableData: [],\r\n showSettings: true,\r\n updating: false,\r\n currentRow: null,\r\n noData: undefined,\r\n selectedRowsIds: [],\r\n hideActionShadow: true,\r\n hasTableScroll: true,\r\n };\r\n }\r\n\r\n filter = React.createRef();\r\n\r\n tableRef = React.createRef();\r\n\r\n source?: CancelTokenSource;\r\n\r\n async componentDidMount() {\r\n const { apiExplicitRequest, location = {} } = this.props;\r\n const { search = null } = location;\r\n\r\n if (!apiExplicitRequest) {\r\n const urlParams = getURLParams(search);\r\n const page = urlParams[this.tableId];\r\n const action = page ? () => this.changePage(+page - 1) : this.getData;\r\n\r\n const initialTableData = await action();\r\n\r\n this.setState({ initialTableData });\r\n } else {\r\n this.setState({\r\n processing: false,\r\n showSettings: false,\r\n noData: true,\r\n });\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps: Readonly) {\r\n if (prevProps.api !== this.props.api) {\r\n this.setState({ numberOfRows: this.setNumberOfRows() });\r\n }\r\n }\r\n\r\n componentWillUnmount(): void {\r\n this.cancelPreviousRequest();\r\n }\r\n\r\n setNumberOfRows = () => {\r\n const { tableId, api } = this.props;\r\n\r\n return cacheService.getCachedValue(tableId, TABLE_CACHE_PREFIX, api) || NUMBER_OF_ROWS[0];\r\n };\r\n\r\n getCurrentCount = () => {\r\n const { count, preciseCount } = this.state;\r\n\r\n return preciseCount ?? count;\r\n };\r\n\r\n getFetchBody = () => {\r\n const { initialSortOrder } = this.props;\r\n const { headerFilterValues, headerSortValues } = this.state;\r\n const filter = this.filter?.current?.getFilter?.() ?? {};\r\n\r\n return {\r\n ...filter,\r\n ...headerFilterValues,\r\n headerSortValues,\r\n ...(initialSortOrder ? { orderBy: [initialSortOrder] } : {}),\r\n };\r\n };\r\n\r\n getData = async (skip = 0, clearData = true): Promise => {\r\n const { numberOfRows, headerFilterValues, headerSortValues } = this.state;\r\n const { api, onGetDataTrigger, onGetDataHandler } = this.props;\r\n\r\n if (skip < 0) {\r\n skip = 0;\r\n }\r\n\r\n this.setState({\r\n processing: clearData,\r\n updating: !clearData,\r\n });\r\n\r\n const filter = this.filter?.current?.getFilter?.() ?? {};\r\n const perPage = numberOfRows;\r\n\r\n const startSymbol = api && api.toString().indexOf('?') === -1 ? '?' : '&';\r\n const apiString = `${api}${startSymbol}skip=${skip}&take=${perPage}`;\r\n\r\n if (onGetDataHandler) {\r\n onGetDataHandler({\r\n ...(filter as never as { [name: string]: FormValuesType }),\r\n ...headerFilterValues,\r\n ...headerSortValues,\r\n });\r\n }\r\n\r\n this.cancelPreviousRequest();\r\n\r\n this.source = CancelToken.source();\r\n const fetchBody = this.getFetchBody();\r\n\r\n try {\r\n const fetchFn = fetchApi.post(apiString, fetchBody, { cancelToken: this.source.token });\r\n\r\n const { data: responseData } = await fetchFn;\r\n\r\n const data: TableGetDataResponse = responseData;\r\n const isPagination = !!data?.records || !!(data as any)?.data?.records;\r\n const count = data?.count || (data as any).data?.recordsCount || (data as any).length || 0;\r\n const tableData = data.records || ((data as any)?.data && (data as any)?.data.records) || data;\r\n\r\n this.props.gridApiCallback?.(responseData);\r\n this.setState({\r\n data: tableData,\r\n count,\r\n processing: false,\r\n updating: false,\r\n noData: false,\r\n numberOfRows: isPagination ? perPage : this.getCurrentCount(),\r\n showSettings: isPagination,\r\n });\r\n\r\n if (onGetDataTrigger) {\r\n onGetDataTrigger(data.records || data);\r\n }\r\n\r\n return tableData;\r\n } catch (error) {\r\n if (!isFetchApiCancel(error as ErrorType)) {\r\n handleError(keyMap.sharedErrorsFailedToGetData, error as ErrorType);\r\n this.setState({ processing: false, updating: false, noData: false });\r\n }\r\n return [];\r\n }\r\n };\r\n\r\n cancelPreviousRequest(): void {\r\n if (this.source) {\r\n this.source.cancel('Operation canceled due to new request.');\r\n }\r\n }\r\n\r\n updateTablePageQueryParamsDependOnApiExplicitRequest = (pageNumber: number): void => {\r\n const { apiExplicitRequest, history, location = {} } = this.props;\r\n\r\n if (apiExplicitRequest) {\r\n return;\r\n }\r\n updateTablePageQueryParams(pageNumber, this.tableId, location, history);\r\n };\r\n\r\n changePage = (page: number, currentNumberOfRow?: number): ITableRecordData[] => {\r\n const numberOfRows = currentNumberOfRow ?? this.state.numberOfRows;\r\n const pageNumber = page < 0 ? 0 : page;\r\n const startIndex = pageNumber * numberOfRows;\r\n\r\n this.setState({ startIndex }, async () => {\r\n this.updateTablePageQueryParamsDependOnApiExplicitRequest(pageNumber);\r\n await this.getData(startIndex);\r\n });\r\n\r\n return [];\r\n };\r\n\r\n updateData = async (clearData = true, deletedCount = 0): Promise => {\r\n const { startIndex, numberOfRows } = this.state;\r\n\r\n const currentCount = this.getCurrentCount();\r\n\r\n if (currentCount - deletedCount < startIndex) {\r\n const lastPage = currentCount ? Math.ceil((currentCount - deletedCount) / numberOfRows) - 1 : 0;\r\n\r\n await this.changePage(lastPage);\r\n await this.getData(startIndex - numberOfRows, clearData);\r\n } else {\r\n await this.getData(startIndex, clearData);\r\n }\r\n };\r\n\r\n setUpdatingState = (state = true): void => this.setState({ updating: state });\r\n\r\n setCurrentRow = (currentRow: TableCurrentRow | null = null): void => this.setState({ currentRow });\r\n\r\n getColumns = (): TableColumn[] => {\r\n const { parentContext, columns } = this.props;\r\n\r\n return columns.filter(\r\n (col) => !col.isHidden || (typeof col.isHidden === 'function' && !col.isHidden(parentContext)),\r\n );\r\n };\r\n\r\n renderTableTitle = (): JSX.Element | null => {\r\n const { title } = this.props;\r\n\r\n return !title ? null : {title} ;\r\n };\r\n\r\n toggleRowsSelection = (selectedRowIds: number[]): void => {\r\n const { selectedRowsIds } = this.state;\r\n const newSelectedRowsIds = getUpdatedSelectedRows(selectedRowsIds, selectedRowIds);\r\n\r\n this.setState({ selectedRowsIds: newSelectedRowsIds });\r\n };\r\n\r\n updateTableScroll = (hasTableScroll: boolean) => {\r\n this.setState({ hasTableScroll });\r\n };\r\n\r\n updateActionShadow = (hideActionShadow: boolean) => {\r\n this.setState({ hideActionShadow });\r\n };\r\n\r\n renderTable(): JSX.Element {\r\n const idColumn = 'id';\r\n const {\r\n className,\r\n actions,\r\n parentContext,\r\n pagination = true,\r\n actionKey,\r\n showPreloader,\r\n additionalActionsClass = '',\r\n tableHasExtensions = false,\r\n toggleOpened,\r\n tableRowDetails = () => null,\r\n openedRowDetailsId,\r\n selectByColumnName = idColumn,\r\n apiGetTotals,\r\n useStickyActions,\r\n api,\r\n truncatePagination,\r\n tableId,\r\n } = this.props;\r\n\r\n const {\r\n processing,\r\n noData,\r\n data,\r\n initialTableData,\r\n startIndex,\r\n showSettings,\r\n updating,\r\n headerFilterValues,\r\n headerFilterDefaultValues,\r\n headerSortValues,\r\n selectedRowsIds,\r\n totalsData,\r\n hideActionShadow,\r\n hasTableScroll,\r\n numberOfRows,\r\n } = this.state;\r\n\r\n if (processing || showPreloader) {\r\n return \r\n {keyMap.tableClickFilterButton} \r\n
\r\n );\r\n }\r\n\r\n const additionalClass = className || '';\r\n const columns = this.getColumns();\r\n\r\n const withStickyAction = Boolean(useStickyActions && !hideActionShadow && this.state.hasTableScroll);\r\n\r\n return (\r\n \r\n {this.renderTableTitle()}\r\n
\r\n \r\n \r\n {pagination && (\r\n
this.setState((prev) => ({ ...prev, ...state }))}\r\n api={api}\r\n showSettings={showSettings}\r\n totalsData={totalsData}\r\n tableId={tableId}\r\n />\r\n )}\r\n ,\r\n ): ITableFilterFieldType[] | void => {\r\n return filterFields?.filter((f) => !f.isHidden || (typeof f.isHidden === 'function' && !f.isHidden(parentContext)));\r\n };\r\n\r\n onRowSelectionButtonClick = (action: RowSelectionAction): void => {\r\n const { selectedRowsIds } = this.state;\r\n\r\n action.onClick(selectedRowsIds);\r\n this.setState({ selectedRowsIds: [] });\r\n };\r\n\r\n render(): JSX.Element {\r\n const { rowSelectionActions, filterFields, exportAPI, filterClassName, parentContext, beforeBtn, exportEvent } =\r\n this.props;\r\n const { currentRow, processing, selectedRowsIds } = this.state;\r\n\r\n const fields = this.getFilterFields(parentContext, filterFields);\r\n\r\n return (\r\n \r\n {!fields && exportAPI &&
}\r\n\r\n {fields ? (\r\n
\r\n ) : (\r\n <>\r\n )}\r\n\r\n
\r\n\r\n {beforeBtn && (\r\n
\r\n {beforeBtn.title}\r\n \r\n )}\r\n\r\n {this.renderTable()}\r\n\r\n {!processing && currentRow && (\r\n this.setCurrentRow(null)}\r\n {...currentRow}\r\n fields={currentRow.fields as IFormField[]}\r\n />\r\n )}\r\n \r\n getSortedData(column.key, false)}\r\n className=\"table__sort-icon\"\r\n icon={isAscending}\r\n />\r\n getSortedData(column.key, true)}\r\n className=\"table__sort-icon\"\r\n icon={isDescending}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const renderFilterButton = () => {\r\n const icon = Object.values(filterValue).every((i) => i === 0)\r\n ? DEPRECATED_FA_GLOBAL_SPRITE.filter\r\n : DEPRECATED_FA_GLOBAL_SPRITE.filterActive;\r\n\r\n return \r\n \r\n
\r\n {columnTitle} \r\n {columnTooltip &&
\r\n {column.sortable && (\r\n
\r\n {renderSortButtons(column.key)}\r\n {isSlashVisible &&
/ }\r\n\r\n {column.filterType && (\r\n
\r\n }\r\n trigger=\"click\">\r\n {renderFilterButton()}\r\n \r\n )}\r\n
\r\n )}\r\n
\r\n );\r\n});\r\n\r\nexport { TableHeaderCell };\r\n","import React, { Component } from 'react';\r\nimport { Text } from '@components-library/Typography';\r\nimport { TableHeaderRangeFilter } from '@components-shared/table/PaginationTable';\r\nimport { keyMap } from '@locales/lokalise/keyMap';\r\nimport { InputRangeWithSlider } from 'components/shared/forms/InputRangeWithSlider';\r\nimport { TableHeaderFilterTypes } from '../types';\r\nimport styles from './styles.module.scss';\r\n\r\nexport type TableHeaderFilterProps = {\r\n keyName: string;\r\n onFilter: (name: string, value: T) => void;\r\n filterType: TableHeaderFilterTypes;\r\n limitRange?: number[];\r\n initialState: T;\r\n headerFilterDefaultValue: T;\r\n};\r\n\r\nexport type TableHeaderFilterState = {\r\n filterTypeValue: T;\r\n};\r\n\r\nexport class TableHeaderFilter extends Component, TableHeaderFilterState> {\r\n state: TableHeaderFilterState = {\r\n filterTypeValue: this.props.initialState,\r\n };\r\n\r\n onSubmitFilter = (event: React.FormEvent): void => {\r\n event.preventDefault();\r\n const { keyName, onFilter } = this.props;\r\n const { filterTypeValue } = this.state;\r\n\r\n onFilter(keyName, filterTypeValue);\r\n };\r\n\r\n onClearFilter = (): void => {\r\n const { keyName, onFilter, headerFilterDefaultValue } = this.props;\r\n\r\n onFilter(keyName, headerFilterDefaultValue);\r\n };\r\n\r\n onChange = (keyName: string, value: T): void => {\r\n this.setState({ filterTypeValue: value });\r\n };\r\n\r\n getComponentByFilterType = (type: TableHeaderFilterTypes): JSX.Element => {\r\n const { keyName, limitRange: limitRange } = this.props;\r\n\r\n switch (type) {\r\n case 'numberRangeWithSlider': {\r\n const limitFromValue = limitRange && limitRange[0];\r\n const limitToValue = limitRange && limitRange[1];\r\n const inputRangeWithSliderInitialState = this.state.filterTypeValue as unknown as TableHeaderRangeFilter;\r\n\r\n return (\r\n \r\n keyName={keyName}\r\n onChange={this.onChange}\r\n initialState={inputRangeWithSliderInitialState}\r\n limitToValue={limitToValue}\r\n limitFromValue={limitFromValue}\r\n />\r\n );\r\n }\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n","import { ITableRecordData } from 'global.interfaces';\r\n\r\nexport const getRequestString = (\r\n api: string | ((data: ITableRecordData) => string),\r\n data: ITableRecordData,\r\n queryStringParam?: string,\r\n): string => {\r\n const { actionKey = 'id' } = data;\r\n\r\n if (queryStringParam) {\r\n return `${api}?${queryStringParam}=${data[actionKey]}`;\r\n } else {\r\n return typeof api === 'function'\r\n ? api(data)\r\n : `${api}${api.toString().indexOf('?') === -1 ? '?' : '&'}${actionKey}=${data[actionKey]}`;\r\n }\r\n};\r\n","import React from 'react';\r\nimport { Text } from '@components-library/Typography';\r\nimport { IHeaderTextContext } from '@components-shared/table/types';\r\nimport { getUtcOffsetDescription } from '@utils/library/dateTime';\r\n\r\nexport const getHeaderTextWithUtcOffset = (context: IHeaderTextContext, headerText?: string): JSX.Element => {\r\n const { utcOffsetInHours } = context;\r\n\r\n return (\r\n <>\r\n {headerText && {headerText} } [{getUtcOffsetDescription(utcOffsetInHours)}] \r\n \r\n );\r\n};\r\n\r\ninterface IColumnWithHeader {\r\n name?: string;\r\n getHeaderText?: (context: IHeaderTextContext, header?: string) => JSX.Element;\r\n}\r\n\r\nexport const getColumnHeaderText = (context: IHeaderTextContext, column: IColumnWithHeader): JSX.Element => {\r\n const headerName = column.name ? column.name : '';\r\n\r\n if (column.getHeaderText) {\r\n return column.getHeaderText(context, headerName);\r\n }\r\n\r\n return {headerName} ;\r\n};\r\n","import type { History, Location } from 'history';\r\n\r\nexport const updateTablePageQueryParams = (\r\n page: number,\r\n tableId: string,\r\n location?: Partial,\r\n history?: History,\r\n) => {\r\n if (!location || !history) {\r\n return;\r\n }\r\n const searchParams = new URLSearchParams(location.search);\r\n const initialSearchParamsSize = searchParams.size;\r\n\r\n const pageValueForParam = String(page ? page + 1 : '');\r\n\r\n if (pageValueForParam) {\r\n searchParams.set(tableId, pageValueForParam);\r\n } else if (initialSearchParamsSize) {\r\n searchParams.delete(tableId);\r\n } else {\r\n return;\r\n }\r\n\r\n history.push({\r\n pathname: location.pathname,\r\n search: `?${searchParams.toString()}`,\r\n });\r\n};\r\n","import React from 'react';\r\nimport { ArrowIcon } from '@components-library/Icons/iconsComponents';\r\nimport cn from 'classnames';\r\n\r\ninterface ITabListScrollButtonLeftProps {\r\n handleScroll: (direction: 'left') => void;\r\n showButton: boolean;\r\n hidden?: boolean;\r\n}\r\n\r\nexport const TabListScrollButtonLeft = ({\r\n handleScroll,\r\n showButton,\r\n hidden = false,\r\n}: ITabListScrollButtonLeftProps) => {\r\n if (hidden) {\r\n return;\r\n }\r\n return (\r\n <>\r\n {showButton && (\r\n handleScroll('left')}>\r\n handleScroll('right')}>\r\n = (props) => {\r\n const { defaultTab, switchTab, children, className } = props;\r\n const initialTabValue = defaultTab || 0;\r\n const [activeTab, setActiveTab] = useState(initialTabValue);\r\n\r\n const tabSwitcher = (value: number): void => {\r\n if (switchTab) {\r\n switchTab(() => setActiveTab(value), value);\r\n } else {\r\n setActiveTab(value);\r\n }\r\n };\r\n\r\n const childrenElement = React.Children.map(children as ReactElement, (child: ReactElement) =>\r\n React.cloneElement(child, { activeTab, tabSwitcher }),\r\n );\r\n\r\n const additionalTabClass = cn('tabs', styles.tabs, className);\r\n\r\n return {childrenElement}
;\r\n};\r\n\r\nconst TabList: React.FC = (props) => {\r\n const { tabSwitcher, activeTab, className, children, tabListItemClassName } = props;\r\n const tabs = React.Children.toArray(children);\r\n\r\n const { ref: tabListRef, handleScroll, showButton } = useCheckOverFlowTabs();\r\n\r\n const handlerClickTabList = useCallback(\r\n (i: number) => {\r\n tabSwitcher?.(i);\r\n },\r\n [tabSwitcher],\r\n );\r\n\r\n const additionalTabListClass = cn('tab-list', styles.tabList, className);\r\n\r\n return (\r\n \r\n
\r\n\r\n
\r\n {tabs.map((tabItem, i) => {\r\n return (\r\n handlerClickTabList(i)}>\r\n {tabItem}\r\n \r\n );\r\n })}\r\n \r\n\r\n
\r\n
= (props) => {\r\n const { i18n } = useTranslation();\r\n const { title, onClick, className } = props;\r\n\r\n return (\r\n \r\n {i18n.t(title as KeyMapKeys)}\r\n \r\n );\r\n};\r\n\r\nconst TabPanel: React.FC = (props) => {\r\n const { children, activeTab, className } = props;\r\n const panel = React.Children.toArray(children)[activeTab as number];\r\n const additionalTabPanelClass = cn('tab-panel', styles.tabPanel, className);\r\n\r\n return {panel}
;\r\n};\r\n\r\nexport { Tabs, TabList, TabListItem, TabPanel };\r\n","import { useCallback } from 'react';\r\nimport { useEffect, useRef, useState } from 'react';\r\nimport throttle from 'lodash-es/throttle';\r\n\r\nexport const useCheckOverFlowTabs = () => {\r\n const ref = useRef(null);\r\n const [showButton, setShowButtons] = useState(false);\r\n\r\n useEffect(() => {\r\n const checkOverflow = throttle(() => {\r\n if (ref.current) {\r\n const { scrollWidth, clientWidth } = ref.current;\r\n\r\n setShowButtons(scrollWidth > clientWidth);\r\n }\r\n }, 400);\r\n\r\n checkOverflow();\r\n window.addEventListener('resize', checkOverflow);\r\n return () => window.removeEventListener('resize', checkOverflow);\r\n }, []);\r\n\r\n const handleScroll = useCallback((direction: 'left' | 'right') => {\r\n if (ref.current) {\r\n const SCROLL_AMOUNT = 100;\r\n\r\n ref.current.scrollBy({\r\n left: direction === 'left' ? -SCROLL_AMOUNT : SCROLL_AMOUNT,\r\n behavior: 'smooth',\r\n });\r\n }\r\n }, []);\r\n\r\n return {\r\n ref,\r\n handleScroll,\r\n showButton,\r\n };\r\n};\r\n","import React, { CSSProperties, useState } from 'react';\r\nimport { API_ORIGIN } from '@api/fetchApi';\r\nimport cn from 'classnames';\r\nimport { defaultAvatarColorsGenerator } from 'utils/defaultAvatarColorsGenerator';\r\nimport styles from './styles.module.scss';\r\n\r\ninterface IUserAvatarProps {\r\n avatarSource: string | null;\r\n userInitials: string;\r\n size: number;\r\n withBorder?: boolean;\r\n className?: string;\r\n}\r\n\r\nexport const UserAvatar = (props: IUserAvatarProps) => {\r\n const [isAvatarLoadedWithError, setIsAvatarLoadedWithError] = useState(false);\r\n\r\n const { avatarSource, withBorder, size, className, userInitials } = props;\r\n\r\n const defaultAvatarColors = defaultAvatarColorsGenerator(userInitials);\r\n\r\n const textColor = defaultAvatarColors.font;\r\n const backgroundColor = !avatarSource ? defaultAvatarColors.background : 'inherit';\r\n\r\n const avatarStyles: CSSProperties = {\r\n color: textColor,\r\n background: backgroundColor,\r\n width: size,\r\n height: size,\r\n fontSize: Math.round(size / 2.5),\r\n };\r\n\r\n const avatarClassNames = cn(styles.avatar, withBorder && styles.avatarWithBorders, className);\r\n\r\n const imageSrc = avatarSource?.includes(API_ORIGIN) ? avatarSource : API_ORIGIN + avatarSource;\r\n\r\n return (\r\n \r\n {avatarSource && !isAvatarLoadedWithError ? (\r\n
setIsAvatarLoadedWithError(true)}\r\n />\r\n ) : (\r\n {userInitials}
\r\n )}\r\n ;\r\n}\r\ninterface IState {\r\n componentHasError: boolean;\r\n error: IError | null;\r\n}\r\n\r\nfunction withErrorBoundary(Component: React.ComponentType
) {\r\n class ComponentWithErrorBoundary extends React.Component {\r\n state: IState = {\r\n componentHasError: false,\r\n error: null,\r\n };\r\n\r\n static getDerivedStateFromError(error: IError) {\r\n return {\r\n componentHasError: true,\r\n error,\r\n };\r\n }\r\n\r\n render() {\r\n const { forwardRef, ...rest } = this.props;\r\n const { componentHasError, error } = this.state;\r\n\r\n /* \"window.pageWithErrorEnabled\"\r\n -- Solution for testing error layout,\r\n can be removed after testing.\r\n\r\n Can be added via developer console. Resets after page reload.\r\n */\r\n\r\n if (componentHasError || window.pageWithErrorEnabled) {\r\n return (WrappedComponent: React.ComponentType
) {\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, max-len\r\n const InnerComponentWithRef: React.FC & { forwardRef: unknown }> = (\r\n props,\r\n ) => {\r\n const { forwardRef, ...rest } = props;\r\n\r\n return = {\r\n Finished: 'greyStatus',\r\n Ongoing: 'greenStatus',\r\n New: 'greenStatus',\r\n};\r\n\r\nexport const POINTS_PRECISION = 2;\r\n\r\nexport const getFormattedPoints = (points: number) => {\r\n return getFormattedNumber(points, { precision: POINTS_PRECISION });\r\n};\r\n\r\nexport const getLoyaltyProgramRedeemStatusColor = (\r\n status: ENUM_TYPES['LOYALTY_PARTICIPANT_REDEEM_STATUS'],\r\n): ColorType => {\r\n switch (status as ENUM_TYPES['LOYALTY_PARTICIPANT_REDEEM_STATUS']) {\r\n case 'Pending':\r\n case 'Approving':\r\n case 'Rejecting':\r\n case 'Cancelling':\r\n case 'Delivering':\r\n return 'orangeStatus';\r\n case 'Approved':\r\n case 'Delivered':\r\n return 'greenStatus';\r\n case 'Cancelled':\r\n case 'Rejected':\r\n case 'Failed':\r\n case 'Undelivered':\r\n return 'redStatus';\r\n default:\r\n return 'greyStatus';\r\n }\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport { createContext } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport {\r\n strengthRules,\r\n newPasswordIsDifferFromOldOneValidate,\r\n StrengthRulesType,\r\n} from '@components-shared/forms/strengthPassword';\r\nimport { keyMap, KeyMapKeys } from '@locales/lokalise/keyMap';\r\nimport cn from 'classnames';\r\nimport styles from './passwordStrengthMeter.styles.module.scss';\r\n\r\nexport const PasswordStrengthMeterContext = createContext(null);\r\n\r\nexport const PasswordStrengthMeter = React.memo(\r\n ({\r\n newPassword,\r\n oldPassword,\r\n hasOldPasswordValidation,\r\n }: {\r\n newPassword: string;\r\n oldPassword?: string;\r\n hasOldPasswordValidation?: boolean;\r\n }) => {\r\n const { i18n } = useTranslation();\r\n const [isTouched, setIsTouched] = useState(false);\r\n\r\n useEffect(() => {\r\n if (newPassword) {\r\n setIsTouched(true);\r\n } else {\r\n setIsTouched(false);\r\n }\r\n }, [newPassword]);\r\n\r\n const getHintClassName = (isValid: boolean) => {\r\n if (!isTouched) return 'form__hint';\r\n return `form__hint ${isValid ? styles.valid : styles.notValid}`;\r\n };\r\n\r\n const strengthMap: Record = {\r\n minLength: {\r\n message: keyMap.formsValidationEightCharactersLong,\r\n isValid: strengthRules.minLength.fn(newPassword),\r\n },\r\n hasUppercase: {\r\n message: keyMap.formsValidationOneUppercaseLetter,\r\n isValid: strengthRules.hasUppercase.fn(newPassword),\r\n },\r\n hasLowercase: {\r\n message: keyMap.formsValidationOneLowercaseLetter,\r\n isValid: strengthRules.hasLowercase.fn(newPassword),\r\n },\r\n hasNumber: {\r\n message: keyMap.formsValidationOneNumber,\r\n isValid: strengthRules.hasNumber.fn(newPassword),\r\n },\r\n hasSpecialCharacters: {\r\n message: keyMap.formsValidationOneSpecialSymbol,\r\n isValid: strengthRules.hasSpecialCharacters.fn(newPassword),\r\n },\r\n hasRepeatedCharacters: {\r\n message: keyMap.formsValidationRepeatedCharacters,\r\n isValid: strengthRules.hasRepeatedCharacters.fn(newPassword),\r\n },\r\n };\r\n\r\n const isPasswordDifferentFromOldOne = {\r\n message: keyMap.formsValidationNewPasswordIsDifferent,\r\n isValid: newPasswordIsDifferFromOldOneValidate(newPassword, oldPassword),\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n {i18n.t(strengthMap['minLength'].message)}\r\n \r\n \r\n {i18n.t(strengthMap['hasUppercase'].message)}\r\n \r\n \r\n {i18n.t(strengthMap['hasLowercase'].message)}\r\n \r\n \r\n {i18n.t(strengthMap['hasNumber'].message)}\r\n \r\n \r\n {i18n.t(strengthMap['hasSpecialCharacters'].message)}\r\n \r\n \r\n {i18n.t(strengthMap['hasRepeatedCharacters'].message)}\r\n \r\n {hasOldPasswordValidation && (\r\n \r\n {i18n.t(isPasswordDifferentFromOldOne.message)}\r\n \r\n )}\r\n \r\n
{\r\n return {\r\n id: i18n.t(keyMap.tableTotal) as string,\r\n amount: getFormattedNumber(data?.totalAmount, { precision: 2 }),\r\n currency: data?.currency,\r\n amountUSD: getFormattedNumber(data?.totalAmountUSD, { precision: 2 }),\r\n };\r\n },\r\n }}\r\n parentContext={{ props }}\r\n />\r\n );\r\n};\r\n","import React from 'react';\r\nimport { EnumUserRoute } from '@components-member/userRoutes/enums';\r\nimport { userRoute } from '@components-member/userRoutes/userRoute';\r\nimport CONSTANTS from '@components-shared/constants';\r\nimport ENUM_CONSTANTS from '@components-shared/enum.constants';\r\nimport { IEnumConstant } from '@components-shared/enum.constants.interface';\r\nimport { FormattedDateTime } from '@components-shared/formattedDateTime';\r\nimport { IColumn } from '@components-shared/shared.interfaces';\r\nimport { keyMap } from '@locales/lokalise/keyMap';\r\nimport { getFormattedNumber, getLink, getTableLabel, getValueFromEnums } from '@utils/helper';\r\nimport { IContextProps, ISalesUserPspOperation } from './interfaces';\r\n\r\nexport const SALES_USER_PSP_OPERATION_GRID_COLUMNS = [\r\n {\r\n key: 'id',\r\n name: keyMap.sharedFieldsId,\r\n render: (row: ISalesUserPspOperation, value: string) =>\r\n getLink(\r\n value,\r\n row.type === CONSTANTS.PSP_OPERATIONS.DEPOSIT\r\n ? userRoute(EnumUserRoute.salesUserDepositDetails).getPath({ id: row.id })\r\n : userRoute(EnumUserRoute.salesUserWithdrawalDetails).getPath({ id: row.id }),\r\n ),\r\n },\r\n {\r\n key: 'createdOn',\r\n name: keyMap.sharedFieldsCreatedOn,\r\n render: (row: ISalesUserPspOperation, value: string) => {\r\n return (null);\r\n const [processing, setProcessing] = useState(true);\r\n const [errorMessage, setErrorMessage] = useState('');\r\n\r\n const getModel = useCallback(async (): Promise => {\r\n try {\r\n const response = await fetchApi.get(ApiUrls.salesUserPspOperations.get, {\r\n params: { id },\r\n });\r\n\r\n setDetails(response.data);\r\n } catch (error) {\r\n handleError(keyMap.sharedErrorsFailedToGetRecord, error);\r\n setErrorMessage(error.response.data);\r\n } finally {\r\n setProcessing(false);\r\n }\r\n }, [id]);\r\n\r\n useEffect(() => {\r\n void getModel();\r\n }, [getModel]);\r\n\r\n const renderDetails = () => {\r\n if (processing) {\r\n return \r\n \r\n
\r\n \r\n );\r\n };\r\n\r\n return (\r\n \r\n
\r\n
\r\n
{`${i18n.t(keyMap.pspTransactionResultTitle)} #${id}`} \r\n\r\n
{renderDetails()}
\r\n
\r\n
{\r\n constructor(props: ISalesUserTradingAccountProps) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n (null);\r\n const [processing, setProcessing] = useState(true);\r\n const [errorMessage, setErrorMessage] = useState('');\r\n\r\n const getModel = useCallback(async (): Promise => {\r\n try {\r\n const response = await fetchApi.get(ApiUrls.salesUserTradingAccount.get, {\r\n params: { id },\r\n });\r\n\r\n setDetails(response.data);\r\n } catch (error) {\r\n handleError(keyMap.sharedErrorsFailedToGetRecord, error);\r\n setErrorMessage(error.response.data);\r\n } finally {\r\n setProcessing(false);\r\n }\r\n }, [id]);\r\n\r\n useEffect(() => {\r\n void getModel();\r\n }, [getModel]);\r\n\r\n const renderDetails = () => {\r\n if (processing) {\r\n return \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
{`${i18n.t(keyMap.sharedFieldsTradingAccount)} #${id}`} \r\n\r\n
{renderDetails()}
\r\n
\r\n
>(\r\n form: T,\r\n user: IUser,\r\n): Promise => {\r\n const response = await fetchApi.post(\r\n ApiUrls.tradingAccountUser.selfTradeAccountCreate,\r\n form,\r\n );\r\n\r\n accountCreatedSuccessfullyEvent(response.data.idHash, form, user, response.data.accountType);\r\n\r\n return response.data;\r\n};\r\n\r\nexport const accountCreatedSuccessfullyEvent = (\r\n accountIdHash: string,\r\n form: T,\r\n user: IUser,\r\n accountType: string,\r\n): void => {\r\n pushAccountCreateSuccessfulEvent(\r\n user.idHash,\r\n getClientSourceType(user.profile.clientSourceType),\r\n accountIdHash,\r\n accountType,\r\n user.profile.status,\r\n form.leverage,\r\n );\r\n};\r\n","import React, { Component } from 'react';\r\nimport ApiUrls from '@api/apiUrls';\r\nimport { fetchApi } from '@api/fetchApi';\r\nimport {\r\n PasswordStrengthMeter,\r\n PasswordStrengthMeterContext,\r\n} from '@components-member/PasswordStrengthMeter/PasswordStrengthMeter';\r\nimport { IFields, IFormConfig, IFormContainerProps } from '@components-member/TradingAccounts/interfaces';\r\nimport { MessageDataType, UserLeverageHint } from '@components-member/shared/UserLeverageHint';\r\nimport { FormType } from '@components-shared/forms/formField.interface';\r\nimport { NotificationDialog } from '@components-shared/modal';\r\nimport { keyMap } from '@locales/lokalise/keyMap';\r\nimport { handleError } from '@utils/errors';\r\nimport generator, { getInitialState } from 'components/shared/forms/formGenerator';\r\n\r\ninterface IState {\r\n form: FormType & { leverage?: number; password: string };\r\n tradingSettings: MessageDataType;\r\n}\r\n\r\nconst FormContainer = (formConfig: IFormConfig) => {\r\n const formState = getInitialState(formConfig.fields);\r\n const Form = generator(formConfig.fields);\r\n const isFormReset = formConfig?.resetFields;\r\n\r\n return class FormComponent extends Component {\r\n form: React.RefObject<{ update: (data: IFields[]) => void }>;\r\n\r\n constructor(props: IFormContainerProps) {\r\n super(props);\r\n\r\n this.state = {\r\n form: this.getDefaultFormState(),\r\n tradingSettings: {\r\n leverageWarnings: {},\r\n },\r\n };\r\n\r\n this.form = React.createRef();\r\n }\r\n\r\n getDefaultFormState = () => {\r\n const { account } = this.props;\r\n\r\n return account ? { leverage: account?.leverage } : { ...formState };\r\n };\r\n\r\n async componentDidMount() {\r\n const { fields } = formConfig;\r\n const { account } = this.props;\r\n const idx = fields.findIndex((f) => f.name === 'leverage');\r\n\r\n if (idx > -1 && account) {\r\n const { leverages } = account;\r\n\r\n const options = leverages.map((o: number) => ({ value: o }));\r\n\r\n fields[idx] = {\r\n ...fields[idx],\r\n options,\r\n };\r\n\r\n this.form.current?.update(fields);\r\n }\r\n\r\n await this.getTradingSettings();\r\n }\r\n\r\n getTradingSettings = async () => {\r\n try {\r\n const response = await fetchApi.get(ApiUrls.userTradingAccountSettings.get);\r\n\r\n this.setState({ tradingSettings: response.data });\r\n } catch (error) {\r\n handleError(keyMap.tradingAccountsFailedToFetchTradingAccounts, error);\r\n }\r\n };\r\n\r\n resetFormState = () => {\r\n if (isFormReset) {\r\n this.setState({ form: { ...formState } });\r\n }\r\n return;\r\n };\r\n\r\n getAction = () => {\r\n const { api, accountId } = this.props;\r\n const { form } = this.state;\r\n\r\n form.tradingAccountId = accountId;\r\n\r\n return fetchApi.post(api, form);\r\n };\r\n\r\n onAction = async () => {\r\n const { errorMessage, successMessage } = formConfig;\r\n\r\n try {\r\n await this.getAction();\r\n this.resetFormState();\r\n\r\n return NotificationDialog.show(successMessage);\r\n } catch (error) {\r\n handleError(errorMessage, error);\r\n }\r\n };\r\n\r\n onChange = (name: string, value: string) => {\r\n const { form } = this.state;\r\n\r\n form[name] = value;\r\n\r\n this.setState({ form });\r\n };\r\n\r\n beforeActionContent = () => {\r\n const isLeverageForm = formConfig.fields.some((field) => field.name === 'leverage');\r\n\r\n if (!isLeverageForm) {\r\n return;\r\n }\r\n\r\n const { leverageWarnings } = this.state.tradingSettings;\r\n\r\n if (!Object.keys(leverageWarnings).length) {\r\n return;\r\n }\r\n\r\n return & { accountTypes: TRADING_ACCOUNT_TYPE[] } = {\r\n title: keyMap.tradingAccountsLeverageFormTitle,\r\n link: 'leverage',\r\n errorMessage: keyMap.tradingAccountsLeverageFormErrorMessage,\r\n successMessage: keyMap.tradingAccountsLeverageFormSuccessMessage,\r\n accountTypes: [CONSTANTS.TRADING_ACCOUNT_TYPE.REAL, CONSTANTS.TRADING_ACCOUNT_TYPE.DEMO],\r\n settingName: 'changeLeverageAllowed',\r\n fields: [\r\n {\r\n name: EnumUTALeverageFormField.leverage,\r\n title: keyMap.commonLeverage,\r\n type: 'select',\r\n options: [],\r\n attributes: {\r\n autoComplete: 'off',\r\n },\r\n required: true,\r\n hintMessage: keyMap.tradingAccountsLeverageFormLeverageHint,\r\n },\r\n ],\r\n};\r\n\r\nexport const TRANSFER_FORM = {\r\n title: keyMap.tradingAccountsTransferFormTitle,\r\n link: 'transfer',\r\n accountTypes: [CONSTANTS.TRADING_ACCOUNT_TYPE.REAL],\r\n settingName: 'withdrawalAllowed',\r\n};\r\n\r\nexport const DEPOSIT_FORM = {\r\n title: keyMap.tradingAccountsDepositFormTitle,\r\n link: 'deposit',\r\n accountTypes: [CONSTANTS.TRADING_ACCOUNT_TYPE.REAL],\r\n settingName: 'depositAllowed',\r\n onClick: accountCardDepositClickEvent,\r\n};\r\n\r\nexport const WITHDRAW_FORM = {\r\n title: keyMap.tradingAccountsWithdrawFormTitle,\r\n link: 'withdraw',\r\n accountTypes: [CONSTANTS.TRADING_ACCOUNT_TYPE.REAL],\r\n settingName: 'withdrawalAllowed',\r\n};\r\n\r\nexport const REFILL_FORM: IFormConfig = {\r\n title: keyMap.tradingAccountsRefillFormRefillTitle,\r\n link: 'refill',\r\n apiParams: ['amount'],\r\n errorMessage: keyMap.tradingAccountsRefillFormRefillErrorMessage,\r\n successMessage: keyMap.tradingAccountsRefillFormRefillSuccessMessage,\r\n accountTypes: [CONSTANTS.TRADING_ACCOUNT_TYPE.DEMO],\r\n settingName: 'depositAllowed',\r\n fields: [\r\n {\r\n name: 'amount',\r\n title: keyMap.tradingAccountsRefillFormRefillAmountTitle,\r\n type: 'number',\r\n attributes: {\r\n autoComplete: 'off',\r\n },\r\n required: true,\r\n },\r\n ],\r\n};\r\n\r\nexport const ACCOUNT_HISTORY = {\r\n title: keyMap.tradingAccountsAccountHistoryFormTitle,\r\n link: 'history',\r\n accountTypes: [CONSTANTS.TRADING_ACCOUNT_TYPE.REAL, CONSTANTS.TRADING_ACCOUNT_TYPE.DEMO],\r\n settingName: 'historyAllowed',\r\n};\r\n\r\nexport const SOCIAL_TRADING_SETTINGS_INVESTOR = {\r\n title: keyMap.tradingAccountsSocialTradingSettings,\r\n link: 'follower',\r\n accountTypes: [CONSTANTS.TRADING_ACCOUNT_TYPE.REAL],\r\n settingName: 'socialTradingSettingsAllowed',\r\n};\r\n\r\nexport const SOCIAL_TRADING_SETTINGS_MASTER = {\r\n title: keyMap.tradingAccountsSocialTradingSettings,\r\n link: 'master',\r\n accountTypes: [CONSTANTS.TRADING_ACCOUNT_TYPE.REAL],\r\n settingName: 'socialTradingSettingsAllowed',\r\n};\r\n\r\nexport const MAM_INVESTOR_CANCEL_LPOA = {\r\n title: keyMap.tradingAccountsTerminateLPOA,\r\n link: 'terminateLPOA',\r\n accountTypes: [CONSTANTS.TRADING_ACCOUNT_TYPE.REAL],\r\n settingName: 'mamInvestorSettingsAllowed',\r\n};\r\n\r\nexport const ACCOUNT_ARCHIVING_FORM = {\r\n title: keyMap.tradingAccountsArchvingFormTitle,\r\n link: 'archive',\r\n accountTypes: [CONSTANTS.TRADING_ACCOUNT_TYPE.REAL, CONSTANTS.TRADING_ACCOUNT_TYPE.DEMO],\r\n settingName: 'archivingAllowed',\r\n};\r\n\r\nexport const PUSH_NOTIFICATIONS = {\r\n title: keyMap.pushNotifications,\r\n link: 'notifications',\r\n accountTypes: [CONSTANTS.TRADING_ACCOUNT_TYPE.REAL, CONSTANTS.TRADING_ACCOUNT_TYPE.DEMO],\r\n settingName: 'pushNotificationsAllowed',\r\n};\r\n\r\nexport const MasterPasswordForm = FormContainer(MASTER_PASSWORD_FORM);\r\nexport const InvestorPasswordForm = FormContainer(INVESTOR_PASSWORD_FORM);\r\nexport const LeverageForm = FormContainer(LEVERAGE_FORM);\r\nexport const RefillForm = FormContainer(REFILL_FORM);\r\n","import {\r\n pushOpenAccountModalShowEvent,\r\n pushOpenAccountModalCloseEvent,\r\n} from '@components-shared/googleAnalyticsEvents';\r\nimport { getClientSourceType } from '@components-shared/utils/getClientSourceType';\r\nimport type { IUser } from 'global.interfaces';\r\n\r\nclass OpenAccountAnalyticsService {\r\n private getOpenAccountModalData = (userInfo: IUser) => {\r\n const { profile, idHash } = userInfo;\r\n const { clientSourceType, status } = profile;\r\n\r\n return {\r\n userIdHash: idHash,\r\n clientSourceType,\r\n verification: status,\r\n };\r\n };\r\n\r\n openAccountModalShowEvent = (user: IUser) => {\r\n const { userIdHash, clientSourceType, verification } = this.getOpenAccountModalData(user);\r\n\r\n pushOpenAccountModalShowEvent(userIdHash, getClientSourceType(clientSourceType), verification);\r\n };\r\n\r\n openAccountModalCloseEvent = (user: IUser): void => {\r\n const { userIdHash, clientSourceType, verification } = this.getOpenAccountModalData(user);\r\n\r\n pushOpenAccountModalCloseEvent(userIdHash, getClientSourceType(clientSourceType), verification);\r\n };\r\n}\r\n\r\nexport const openAccountAnalyticsService = new OpenAccountAnalyticsService();\r\n","import { useEffect, useState } from 'react';\r\nimport { api } from '@api/apiMemberArea';\r\nimport {\r\n IApiCurrencyString,\r\n IApiGroupMappingType,\r\n IApiTradingAccountCardActions,\r\n} from '@api/interfaces/data-contracts';\r\nimport {\r\n ACCOUNT_ARCHIVING_FORM,\r\n ACCOUNT_HISTORY,\r\n DEPOSIT_FORM,\r\n INVESTOR_PASSWORD_FORM,\r\n LEVERAGE_FORM,\r\n MAM_INVESTOR_CANCEL_LPOA,\r\n MASTER_PASSWORD_FORM,\r\n REFILL_FORM,\r\n SOCIAL_TRADING_SETTINGS_INVESTOR,\r\n SOCIAL_TRADING_SETTINGS_MASTER,\r\n TRANSFER_FORM,\r\n WITHDRAW_FORM,\r\n PUSH_NOTIFICATIONS,\r\n} from '@components-member/TradingAccounts/AccountDetails/formFields';\r\nimport { IAccountCardMenuAction, ITradingAccountCardActions } from '@components-member/TradingAccounts/interfaces';\r\nimport { getAccountCategoryType } from '@utils/getAccountCategoryType';\r\nimport { TRADING_ACCOUNT_TYPE } from 'global.enums';\r\nimport { useMobxStore } from 'store/mobx';\r\n\r\nconst ALWAYS_ALLOWED_SETTINGS = ['historyAllowed'];\r\n\r\nconst ENABLED_TRADING_ACCOUNT_ACTIONS = [\r\n MASTER_PASSWORD_FORM,\r\n INVESTOR_PASSWORD_FORM,\r\n LEVERAGE_FORM,\r\n REFILL_FORM,\r\n DEPOSIT_FORM,\r\n WITHDRAW_FORM,\r\n TRANSFER_FORM,\r\n ACCOUNT_HISTORY,\r\n ACCOUNT_ARCHIVING_FORM,\r\n PUSH_NOTIFICATIONS,\r\n];\r\n\r\nconst DISABLED_TRADING_ACCOUNT_ACTIONS = [ACCOUNT_HISTORY];\r\n\r\nconst EXTENTEND_DISABLED_TRADING_ACCOUNT_ACTIONS = [\r\n REFILL_FORM,\r\n DEPOSIT_FORM,\r\n WITHDRAW_FORM,\r\n TRANSFER_FORM,\r\n ACCOUNT_HISTORY,\r\n];\r\n\r\nconst filterActionsForCopyTradingAccounts = (\r\n actions: IAccountCardMenuAction[],\r\n groupMappingType: IApiGroupMappingType,\r\n investorId: number | null,\r\n masterId: number | null,\r\n isCopyTradingEnabled: boolean,\r\n) => {\r\n const { isCopyTradingAccount } = getAccountCategoryType({\r\n groupMappingType,\r\n investorId,\r\n masterId,\r\n });\r\n\r\n if (!isCopyTradingAccount || !isCopyTradingEnabled) {\r\n return actions;\r\n }\r\n\r\n return setSocialTradingActions(actions, groupMappingType, investorId, masterId);\r\n};\r\n\r\nconst setMamTradingActions = (\r\n actions: IAccountCardMenuAction[],\r\n groupMappingType: IApiGroupMappingType,\r\n investorId: number | null,\r\n masterId: number | null,\r\n lpoaEnabledForMamAccounts: boolean,\r\n isMamInvestor: boolean,\r\n) => {\r\n if (!lpoaEnabledForMamAccounts) {\r\n return;\r\n }\r\n\r\n const { isInMamInvestorGroupMappingType } = getAccountCategoryType({\r\n groupMappingType,\r\n investorId,\r\n masterId,\r\n });\r\n\r\n if (!isInMamInvestorGroupMappingType) {\r\n return;\r\n }\r\n\r\n if (isMamInvestor) {\r\n actions.push(MAM_INVESTOR_CANCEL_LPOA);\r\n return;\r\n }\r\n};\r\n\r\nconst setSocialTradingActions = (\r\n actions: IAccountCardMenuAction[],\r\n groupMappingType: IApiGroupMappingType,\r\n investorId: number | null,\r\n masterId: number | null,\r\n) => {\r\n const { isMasterAccount, isInvestorAccount } = getAccountCategoryType({\r\n groupMappingType,\r\n investorId,\r\n masterId,\r\n });\r\n\r\n let socialTradingAction;\r\n\r\n if (isMasterAccount) {\r\n socialTradingAction = SOCIAL_TRADING_SETTINGS_MASTER;\r\n }\r\n\r\n if (isInvestorAccount) {\r\n socialTradingAction = SOCIAL_TRADING_SETTINGS_INVESTOR;\r\n }\r\n\r\n if (!socialTradingAction) {\r\n return actions;\r\n }\r\n\r\n const indexOfSocialTradingSetting = 2;\r\n\r\n actions.splice(indexOfSocialTradingSetting, 0, socialTradingAction);\r\n return actions;\r\n};\r\n\r\nconst filterActionsAllowedByTradingAccountSettings = (\r\n actions: IAccountCardMenuAction[],\r\n accountType: string,\r\n settings: IApiTradingAccountCardActions,\r\n) => {\r\n return actions.filter(\r\n (action) =>\r\n action.accountTypes.indexOf(accountType as TRADING_ACCOUNT_TYPE) !== -1 &&\r\n (ALWAYS_ALLOWED_SETTINGS.indexOf(action.settingName) !== -1 ||\r\n settings[action.settingName as keyof IApiTradingAccountCardActions]),\r\n );\r\n};\r\n\r\nconst filterActionsByCurrency = (actions: IAccountCardMenuAction[], accountCurrency: string) => {\r\n if (!accountCurrency) {\r\n actions = actions.filter(\r\n (action) =>\r\n action.link != DEPOSIT_FORM.link && action.link != WITHDRAW_FORM.link && action.link != TRANSFER_FORM.link,\r\n );\r\n }\r\n\r\n return actions;\r\n};\r\n\r\nconst getActions = (\r\n actions: IAccountCardMenuAction[],\r\n currency: IApiCurrencyString,\r\n accountType: string,\r\n settings: IApiTradingAccountCardActions,\r\n): IAccountCardMenuAction[] => {\r\n actions = filterActionsByCurrency(actions, currency);\r\n return filterActionsAllowedByTradingAccountSettings(actions, accountType, settings);\r\n};\r\n\r\nconst setPushSettingsActions = (actions: IAccountCardMenuAction[], showTradingPushNotificationsTab: boolean) => {\r\n if (showTradingPushNotificationsTab === true) {\r\n return actions;\r\n }\r\n\r\n return actions.filter((action) => action.settingName !== 'pushNotificationsAllowed');\r\n};\r\n\r\nconst getEnabledActions = (\r\n actions: IAccountCardMenuAction[],\r\n groupMappingType: IApiGroupMappingType,\r\n investorId: number | null,\r\n masterId: number | null,\r\n accountType: string,\r\n currency: string,\r\n settings: IApiTradingAccountCardActions,\r\n isCopyTradingEnabled: boolean,\r\n lpoaEnabledForMamAccounts: boolean,\r\n showTradingPushNotificationsTab: boolean,\r\n): IAccountCardMenuAction[] => {\r\n const { isMamInvestor } = settings;\r\n\r\n actions = getActions(actions, currency, accountType, settings);\r\n actions = filterActionsForCopyTradingAccounts(actions, groupMappingType, investorId, masterId, isCopyTradingEnabled);\r\n\r\n setMamTradingActions(\r\n actions,\r\n groupMappingType,\r\n investorId || null,\r\n masterId || null,\r\n lpoaEnabledForMamAccounts,\r\n isMamInvestor,\r\n );\r\n\r\n actions = setPushSettingsActions(actions, showTradingPushNotificationsTab);\r\n\r\n return actions;\r\n};\r\n\r\nexport const getAccountCardDefaultActions = (): ITradingAccountCardActions => ({\r\n changeInvestorPasswordAllowed: false,\r\n changeLeverageAllowed: false,\r\n changeMasterPasswordAllowed: false,\r\n archivingAllowed: false,\r\n depositAllowed: false,\r\n withdrawalAllowed: false,\r\n isMamInvestor: false,\r\n pushNotificationsAllowed: false,\r\n});\r\n\r\nexport const useTradingAccountActions = (\r\n accountId: number,\r\n groupMappingType: IApiGroupMappingType,\r\n investorId: number | null,\r\n masterId: number | null,\r\n accountType: string,\r\n currency: string,\r\n isCopyTradingEnabled: boolean,\r\n enabled: boolean,\r\n setActionProcessing?: (state: boolean) => void,\r\n): IAccountCardMenuAction[] => {\r\n const {\r\n accountStore: { generalSettings, onboardingConfiguration },\r\n } = useMobxStore();\r\n const { isExtendedAccountActions, lpoaEnabledForMamAccounts } = generalSettings;\r\n\r\n const [accountSettings, setAccountSettings] = useState(getAccountCardDefaultActions());\r\n\r\n useEffect(() => {\r\n void (async () => {\r\n const response = await api.ma.tradingAccountCardUser.getActions(accountId);\r\n\r\n setActionProcessing?.(false);\r\n setAccountSettings(response.data);\r\n })();\r\n }, [accountId, setActionProcessing]);\r\n\r\n const disabledActions = isExtendedAccountActions\r\n ? (EXTENTEND_DISABLED_TRADING_ACCOUNT_ACTIONS as IAccountCardMenuAction[])\r\n : (DISABLED_TRADING_ACCOUNT_ACTIONS as IAccountCardMenuAction[]);\r\n\r\n return enabled\r\n ? getEnabledActions(\r\n ENABLED_TRADING_ACCOUNT_ACTIONS as IAccountCardMenuAction[],\r\n groupMappingType,\r\n investorId,\r\n masterId,\r\n accountType,\r\n currency,\r\n accountSettings,\r\n isCopyTradingEnabled,\r\n lpoaEnabledForMamAccounts,\r\n onboardingConfiguration?.showTradingPushNotificationsTab ?? false,\r\n )\r\n : getActions(disabledActions, currency, accountType, accountSettings);\r\n};\r\n","import React, { useRef, useState } from 'react';\r\nimport { FieldName, useForm } from 'react-hook-form';\r\nimport { useTranslation } from 'react-i18next';\r\nimport {\r\n apiDataChangeRequestUserService,\r\n IApiDataChangeRequestUser,\r\n} from '@api/services/dataChangeRequestUser.apiService';\r\nimport { ButtonNew } from '@components-library/ButtonNew/ButtonNew';\r\nimport { DocumentPreview } from '@components-member/shared/DropzoneDocumentPreview/DocumentPreview/DocumentPreview';\r\nimport { DropZone } from '@components-shared/DropZone';\r\nimport { IFormField } from '@components-shared/forms/formField.interface';\r\nimport generator from '@components-shared/forms/formGenerator';\r\nimport { NotificationDialog } from '@components-shared/modal';\r\nimport { keyMap } from '@locales/lokalise/keyMap';\r\nimport { handleError } from '@utils/errors';\r\nimport { observer } from 'mobx-react';\r\nimport styles from './userUpdateBankDetails.styles.module.scss';\r\n\r\nconst fields: IFormField[] = [\r\n {\r\n name: 'bankBranchName',\r\n title: keyMap.settingsUserFormBankDetailsBankBranchNameTitle,\r\n required: true,\r\n className: 'sm-6',\r\n },\r\n {\r\n name: 'beneficiaryBankName',\r\n title: keyMap.settingsUserFormBankDetailsBeneficiaryBankNameTitle,\r\n required: true,\r\n className: 'sm-6',\r\n },\r\n {\r\n name: 'beneficiaryAccountNumber',\r\n title: keyMap.settingsUserFormBankDetailsBeneficiaryAccountNumberTitle,\r\n hideNumericArrows: true,\r\n required: true,\r\n className: 'sm-12',\r\n },\r\n];\r\n\r\nconst Form = generator(fields);\r\n\r\ntype IFormApiDataChangeRequestUser = Omit & {\r\n bankCardFileItem: File | null;\r\n};\r\n\r\nexport const UserUpdateBankDetailsForm = observer(\r\n ({\r\n onClose,\r\n onSuccess,\r\n dropzoneTitle,\r\n }: {\r\n onSuccess: () => Promise;\r\n onClose?: (state: boolean) => void;\r\n dropzoneTitle?: string;\r\n }) => {\r\n const { i18n } = useTranslation();\r\n\r\n const [processing, setProcessing] = useState(false);\r\n\r\n const { watch, setValue, handleSubmit } = useForm({\r\n defaultValues: {\r\n beneficiaryBankName: '',\r\n beneficiaryAccountNumber: '',\r\n bankBranchName: '',\r\n bankCardFileItem: null,\r\n },\r\n });\r\n\r\n const formRef = useRef(null);\r\n\r\n const handleChange = (\r\n fieldName: FieldName>,\r\n value: string,\r\n ) => {\r\n setValue(fieldName, value);\r\n };\r\n\r\n const formState = watch();\r\n\r\n const isValidForm = () => {\r\n return formRef.current?.validate();\r\n };\r\n\r\n const getFormData = (data: IApiDataChangeRequestUser) => {\r\n const formData = new FormData();\r\n\r\n formData.append('beneficiaryBankName', data.beneficiaryBankName);\r\n formData.append('beneficiaryAccountNumber', data.beneficiaryAccountNumber);\r\n formData.append('bankBranchName', data.bankBranchName);\r\n formData.append('bankCardFileItem', data.bankCardFileItem);\r\n\r\n return formData;\r\n };\r\n\r\n const handleClose = () => {\r\n onClose?.(false);\r\n };\r\n\r\n const onSubmit = async (data: IFormApiDataChangeRequestUser) => {\r\n const isValid = isValidForm();\r\n\r\n if (!isValid || !data.bankCardFileItem) {\r\n return;\r\n }\r\n\r\n try {\r\n setProcessing(true);\r\n\r\n const formData = getFormData({ ...data, bankCardFileItem: data.bankCardFileItem });\r\n\r\n await apiDataChangeRequestUserService.create(formData);\r\n\r\n await onSuccess();\r\n\r\n NotificationDialog.show(keyMap.sharedMsgRecordSuccessSaved, 'success');\r\n\r\n handleClose();\r\n } catch (error) {\r\n handleError(keyMap.sharedErrorsFailedToCreateRecord, error);\r\n } finally {\r\n setProcessing(false);\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n
\r\n {!formState.bankCardFileItem && (\r\n setValue('bankCardFileItem', file) }}\r\n />\r\n )}\r\n {formState.bankCardFileItem && (\r\n setValue('bankCardFileItem', null)}\r\n />\r\n )}\r\n
\r\n\r\n
\r\n \r\n {i18n.t(keyMap.sharedActionsSubmit)}\r\n \r\n \r\n {i18n.t(keyMap.commonClose)}\r\n \r\n
\r\n
\r\n
\r\n {withUserName && (\r\n
\r\n
\r\n )}\r\n {messages.map((key, index) => (\r\n
{i18n.t(key)}
\r\n ))}\r\n
;\r\n\r\n pushAuthorizedBankingMethodEvent(\r\n userIdHash,\r\n getClientSourceType(clientSourceType),\r\n ibUserId,\r\n depositFundsType,\r\n verification,\r\n bankingTypes[eventAction],\r\n );\r\n};\r\n\r\ntype GetAccountType = (accountInfo: GetAccountTypeProps) => TRADING_ACCOUNT_FORM_TYPE | string;\r\n\r\ntype GetAccountTypeProps = {\r\n accountType: IApiAccountType | TRANSFER_ACCOUNT_TYPE;\r\n groupMappingType: IApiGroupMappingType;\r\n investorId: number | null;\r\n masterId: number | null;\r\n};\r\n\r\nexport const getAccountType: GetAccountType = (accountInfo) => {\r\n const { accountType } = accountInfo;\r\n\r\n if (accountType === IApiAccountType.Demo) {\r\n return TRADING_ACCOUNT_FORM_TYPE.DEMO;\r\n }\r\n\r\n const { isMasterAccount, isInvestorAccount, isCopyTradingAccount } = getAccountCategoryType(accountInfo);\r\n\r\n if (!isCopyTradingAccount) {\r\n return TRADING_ACCOUNT_FORM_TYPE.SELF;\r\n }\r\n\r\n if (isInvestorAccount) {\r\n return TRADING_ACCOUNT_FORM_TYPE.INVESTOR;\r\n }\r\n\r\n if (isMasterAccount) {\r\n return TRADING_ACCOUNT_FORM_TYPE.MASTER;\r\n }\r\n\r\n return '';\r\n};\r\n","import { IApiTradingAccountCardInfo } from '@api/interfaces/data-contracts';\r\nimport { IApiTradingAccountCardInfoExt } from '@components-member/TradingAccounts/interfaces';\r\nimport { getAccountType } from '@components-member/psp/deposit/analyticsEvents/depositAnalyticsEvents';\r\nimport { IBasePluginProps, AccountInfo, IForm } from 'components/user/psp/psp.interfaces';\r\nimport { TRANSFER_ACCOUNT_TYPE } from 'global.enums';\r\nimport { IPlugin, IUser, IUserProfile } from 'global.interfaces';\r\n\r\nexport const getQuickDepositClickBtnEventData = (user: IUser, parentIbUserIdHash: string | null) => {\r\n const { idHash, profile } = user;\r\n const { clientSourceType, status } = profile;\r\n\r\n return {\r\n userIdHash: idHash,\r\n clientSourceType,\r\n ibUserId: parentIbUserIdHash,\r\n verification: status,\r\n };\r\n};\r\n\r\nexport const getAccountCardDepositClickEventData = (\r\n userInfo: IUser,\r\n userProfile: IUserProfile,\r\n account: IApiTradingAccountCardInfo,\r\n event: string,\r\n) => {\r\n const { parentIbUserIdHash } = userProfile;\r\n const { profile, idHash } = userInfo;\r\n const { clientSourceType, status } = profile;\r\n\r\n return {\r\n event,\r\n userIdHash: idHash,\r\n clientSourceType,\r\n ibUserId: parentIbUserIdHash,\r\n account,\r\n verification: status,\r\n };\r\n};\r\n\r\ntype GetDepositPreStartEventDataProps = Pick<\r\n IBasePluginProps,\r\n 'selectedPlugin' | 'selectedCategory' | 'accounts' | 'userInfo' | 'userProfile'\r\n>;\r\n\r\nexport const getDepositPreStartEventData = (form: IForm, props: GetDepositPreStartEventDataProps) => {\r\n const { userInfo, selectedPlugin, selectedCategory, accounts, userProfile } = props;\r\n const { profile, idHash } = userInfo;\r\n const { parentIbUserIdHash } = userProfile;\r\n const { clientSourceType, status } = profile;\r\n\r\n const selectedAccount = accounts.find((account) => account.value === form.account) as AccountInfo;\r\n\r\n const accountType = getAccountType({\r\n accountType: selectedAccount.accountType as TRANSFER_ACCOUNT_TYPE,\r\n groupMappingType: selectedAccount.groupMappingType,\r\n investorId: selectedAccount.investorId,\r\n masterId: selectedAccount.masterId,\r\n });\r\n\r\n return {\r\n userIdHash: idHash,\r\n clientSourceType,\r\n ibUserId: parentIbUserIdHash,\r\n accountIdHash: (selectedAccount as never as IApiTradingAccountCardInfoExt).idHash,\r\n accountType,\r\n account: selectedAccount,\r\n depositValue: form.amount,\r\n depositCurrency: form.currency,\r\n depositAmountUSD: form.amountUSD,\r\n depositSource: selectedPlugin.name,\r\n depositFundsType: selectedCategory,\r\n verification: status,\r\n };\r\n};\r\n\r\nexport const getSelectDepositFundsCategoryEventData = (\r\n depositFundsType: string,\r\n userInfo: IUser,\r\n userProfile: IUserProfile,\r\n) => {\r\n const { parentIbUserIdHash } = userProfile;\r\n const { profile, idHash } = userInfo;\r\n const { clientSourceType, status } = profile;\r\n\r\n return {\r\n depositFundsType,\r\n userIdHash: idHash,\r\n clientSourceType,\r\n ibUserId: parentIbUserIdHash,\r\n verification: status,\r\n };\r\n};\r\n\r\nexport const getDepositPaymentSourceEventData = (\r\n depositFundsType: string,\r\n depositSource: string,\r\n userInfo: IUser,\r\n userProfile: IUserProfile,\r\n) => {\r\n const { parentIbUserIdHash } = userProfile;\r\n const { profile, idHash } = userInfo;\r\n const { clientSourceType, status } = profile;\r\n\r\n return {\r\n depositFundsType,\r\n depositSource,\r\n userIdHash: idHash,\r\n clientSourceType,\r\n ibUserId: parentIbUserIdHash,\r\n verification: status,\r\n };\r\n};\r\n\r\nexport const getAuthorizedBankingMethodEventData = (\r\n type: IPlugin,\r\n selectedCategory: string,\r\n userInfo: IUser,\r\n userProfile: IUserProfile,\r\n) => {\r\n const { parentIbUserIdHash } = userProfile;\r\n const { profile, idHash } = userInfo;\r\n const { clientSourceType, status } = profile;\r\n\r\n return {\r\n userIdHash: idHash,\r\n clientSourceType,\r\n ibUserId: parentIbUserIdHash,\r\n verification: status,\r\n eventAction: type.depositAdminAction,\r\n depositFundsType: selectedCategory,\r\n };\r\n};\r\n\r\nexport const getsSuccessDepositEventData = (\r\n form: IForm,\r\n selectedAccountType: string,\r\n accountIdHash: string,\r\n selectedPlugin: IPlugin,\r\n selectedCategory: string,\r\n depositIdHash: string,\r\n userProfile: IUserProfile,\r\n userInfo: IUser,\r\n) => {\r\n const { parentIbUserIdHash } = userProfile;\r\n const { profile, idHash } = userInfo;\r\n const { clientSourceType, status } = profile;\r\n\r\n return {\r\n accountIdHash,\r\n depositIdHash,\r\n depositValue: form.amount,\r\n depositAmountUSD: form.amountUSD,\r\n depositCurrency: form.currency,\r\n depositSource: selectedPlugin.name,\r\n userIdHash: idHash,\r\n clientSourceType,\r\n ibUserId: parentIbUserIdHash,\r\n accountType: selectedAccountType,\r\n depositFundsType: selectedCategory,\r\n verification: status,\r\n };\r\n};\r\n","import { PREFILL_USER_FORM_TYPE } from '@components-member/psp/withdrawal/plugins/BasePluginWithdrawal/components/BankAccountRedirectButton/constants';\r\nimport { CONSTANTS } from 'components/shared/constants';\r\nimport { CURRENCY } from 'global.enums';\r\nimport { IPSPInfo } from './pspInfo.interface';\r\n\r\nexport const getEmptyPspInfo = (): IPSPInfo => {\r\n return {\r\n currencies: [],\r\n exchange: [],\r\n exchangeRatesToDisplay: [],\r\n amount: {\r\n min: 0,\r\n max: 0,\r\n currency: CURRENCY.USD,\r\n },\r\n operationFee: {\r\n feeBrackets: [],\r\n feeCurrency: CURRENCY.USD,\r\n minFee: 0,\r\n maxFee: 0,\r\n skipOptions: {\r\n operationAmount: null,\r\n operationAmountComparison: 'Greater',\r\n },\r\n },\r\n operationFeeSkipInfo: {\r\n feeWillAlwaysBeSkipped: false,\r\n },\r\n data: null,\r\n depositAdminAction: CONSTANTS.DEPOSIT_ADMIN_ACTION.NONE,\r\n financialIdentityType: null,\r\n isHideExchangeRate: false,\r\n bankAccounts: [],\r\n digitalWalletAccounts: [],\r\n cards: [],\r\n cryptoWalletAccounts: [],\r\n id: 0,\r\n createUserFinancialIdentityType: PREFILL_USER_FORM_TYPE.NONE,\r\n userNameAliases: [],\r\n allowSelectingBeneficiaryName: false,\r\n storeLocallyNewlyCreatedAccountHolderNames: false,\r\n operationTutorial: {\r\n isEnabled: false,\r\n tutorialVideos: [],\r\n },\r\n operationTip: {\r\n isEnabled: false,\r\n position: null,\r\n tips: [],\r\n },\r\n requireBankDetails: null,\r\n consents: [],\r\n };\r\n};\r\n","import React from 'react';\r\n\r\nconst ctx = React.createContext({});\r\n\r\nexport default ctx;\r\n","import React, { Component } from 'react';\r\nimport Context from './context';\r\n\r\nconst connect = (WrappedComponent) => {\r\n class ComponentWithPermissionProps extends Component {\r\n render() {\r\n return (\r\n \r\n {(permissionProps) => \r\n );\r\n }\r\n }\r\n\r\n return ComponentWithPermissionProps;\r\n};\r\n\r\nexport default connect;\r\n","import React from 'react';\r\nimport Context from './context';\r\n\r\nclass Store extends React.Component {\r\n state = {\r\n pspResponseData: { qrCode: '' },\r\n };\r\n\r\n setPspResponseData = (data) => this.setState({ pspResponseData: data });\r\n\r\n render() {\r\n const { children } = this.props;\r\n const props = {\r\n ...this.state,\r\n setPspResponseData: this.setPspResponseData,\r\n };\r\n\r\n return {children} ;\r\n }\r\n}\r\n\r\nexport default Store;\r\n","import connectToPspStore from './connect';\r\nimport store from './pspStore';\r\n\r\nexport default store;\r\nexport { connectToPspStore };\r\n","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { NavLink } from 'react-router-dom';\r\nimport { InfoIcon } from '@components-library/Icons/iconsComponents';\r\nimport { keyMap } from '@locales/lokalise/keyMap';\r\nimport cn from 'classnames';\r\nimport styles from './styles.module.scss';\r\n\r\ninterface IPspOperationsNotificationProps {\r\n depositTabLocation?: boolean;\r\n text: string;\r\n depositFromAccount?: boolean;\r\n}\r\n\r\nexport const PspOperationsNotification = ({\r\n depositTabLocation,\r\n text,\r\n depositFromAccount,\r\n}: IPspOperationsNotificationProps) => {\r\n const { i18n } = useTranslation();\r\n\r\n return (\r\n \r\n
\r\n
\r\n {depositTabLocation && !depositFromAccount && (\r\n
\r\n {i18n.t(keyMap.profileVerificationBtnTxt)}\r\n \r\n )}\r\n
= {\r\n [PREAUTHORIZED_TYPE.BANK_ACCOUNT]: {\r\n title: keyMap.pspDepositDepositFormAddNewBankAccount,\r\n tooltip: keyMap.pspBankAccountDetailsWithdrawalHint,\r\n path: EnumUserRoute.bankAccounts,\r\n },\r\n};\r\n\r\nexport enum PREFILL_USER_FORM_TYPE {\r\n NONE = 'None',\r\n}\r\n","import { CONSTANTS } from 'components/shared/constants';\r\n\r\nexport const showQFormSignature = (type: string) => {\r\n return type !== CONSTANTS.Q_FORM_TYPE.IB;\r\n};\r\n","import React, { Component } from 'react';\r\nimport { keyMap } from '@locales/lokalise/keyMap';\r\nimport { CONSTANTS } from 'components/shared/constants';\r\nimport DetailsTable from 'components/shared/detailsTable';\r\nimport { ENUM_CONSTANTS } from 'components/shared/enum.constants';\r\nimport { EmptyObject } from 'components/shared/shared.interfaces';\r\nimport { getTableLabel, getValueFromEnums } from 'utils/helper';\r\nimport { QFormInfo } from './qforms.types';\r\n\r\ninterface IProps {\r\n data: QFormInfo | EmptyObject;\r\n}\r\n\r\nconst COLUMNS = [\r\n {\r\n key: 'declineReason',\r\n name: keyMap.sharedFieldsDeclineReason,\r\n render: (data: QFormInfo, value: string) => getValueFromEnums(value, ENUM_CONSTANTS.DECLINE_REASON),\r\n },\r\n {\r\n key: 'publicComment',\r\n name: keyMap.sharedFieldsComment,\r\n },\r\n];\r\n\r\nclass StatusInfo extends Component {\r\n constructor(props: IProps) {\r\n super(props);\r\n }\r\n\r\n getColumns(data: QFormInfo) {\r\n const columns = [...COLUMNS];\r\n const idx = columns.findIndex((col) => col.key === 'declineReason');\r\n\r\n if (data.status !== CONSTANTS.Q_FORM_STATUS.DECLINED) {\r\n columns.splice(idx, 1);\r\n }\r\n\r\n return columns;\r\n }\r\n\r\n render() {\r\n const { data } = this.props;\r\n\r\n return (\r\n \r\n
{getTableLabel(data.status, ENUM_CONSTANTS.Q_FORM_STATUS)}
\r\n
\r\n
;\r\n tradingAccountId?: number | string;\r\n additionalValidation?: () => boolean | null;\r\n renderAfterComponent?: () => JSX.Element | null;\r\n onCreateHandler?: (id?: number) => void;\r\n onSendHandlerSuccess?: () => void;\r\n onSendHandlerFail?: (errorMessage: string) => void;\r\n className: string;\r\n classNameKey: string;\r\n id?: number;\r\n status: Q_FORM_STATUS;\r\n isDisabled?: boolean;\r\n additionalData?: IAdditionalData;\r\n}\r\n\r\ninterface IAdditionalData {\r\n [key: string]: string;\r\n}\r\n\r\ninterface IState {\r\n info: QuestionsInfoType | EmptyObject;\r\n data: QuestionsDataType | EmptyObject;\r\n signature: SignatureDataType | null;\r\n processing: boolean;\r\n isValid: boolean | null | undefined;\r\n qFormInfo: QFormInfo | EmptyObject;\r\n errMsg: string;\r\n}\r\n\r\nclass QForm extends Component {\r\n state: IState = {\r\n info: {},\r\n data: {},\r\n signature: null,\r\n processing: false,\r\n isValid: true,\r\n qFormInfo: {},\r\n errMsg: '',\r\n };\r\n\r\n signature: RefObject = createRef();\r\n\r\n form: RefObject> = createRef();\r\n\r\n componentDidMount() {\r\n const { id } = this.props;\r\n\r\n if (!id) {\r\n return;\r\n }\r\n\r\n if (id > 0) {\r\n void this.get(id);\r\n }\r\n }\r\n\r\n get createEndpoint() {\r\n const { className, qFormType, tradingAccountId } = this.props;\r\n\r\n let createEndpoint = `${ApiUrls.qFormUser.create}?className=${className}&qFormType=${qFormType}`;\r\n\r\n if (tradingAccountId) {\r\n createEndpoint = `${createEndpoint}&tradingAccountId=${tradingAccountId}`;\r\n }\r\n\r\n return createEndpoint;\r\n }\r\n\r\n create = async () => {\r\n const { refresh, isDisabled, onCreateHandler, additionalData } = this.props;\r\n\r\n if (isDisabled) {\r\n return;\r\n }\r\n\r\n const { createEndpoint } = this;\r\n\r\n try {\r\n const response = await fetchApi.post(createEndpoint, additionalData);\r\n\r\n if (onCreateHandler) {\r\n onCreateHandler(response.data);\r\n }\r\n\r\n void refresh();\r\n } catch (error) {\r\n handleError(keyMap.partnershipQuestionnaireQuestionnaireCreateFailErr, error);\r\n }\r\n };\r\n\r\n get = async (id: number) => {\r\n this.setState({ processing: true });\r\n try {\r\n const response = await fetchApi.get(`${ApiUrls.qFormUser.get}?id=${id}`);\r\n\r\n const { signature } = response.data.details;\r\n const { info, data } = response.data.details.questions;\r\n const { qFormInfo } = response.data;\r\n\r\n this.setState({\r\n info,\r\n data,\r\n signature,\r\n qFormInfo,\r\n });\r\n\r\n if (this.signature && this.signature.current) {\r\n this.signature.current.setData(signature as SignatureDataType);\r\n }\r\n } catch (error) {\r\n this.setState({ errMsg: error.response.data });\r\n handleError(keyMap.sharedErrorsFailedToGetRecord, error);\r\n } finally {\r\n this.setState({ processing: false });\r\n }\r\n };\r\n\r\n set = async () => {\r\n const { id, refresh } = this.props;\r\n const { data, signature } = this.state;\r\n const form = {\r\n answers: data,\r\n signature,\r\n };\r\n\r\n try {\r\n await fetchApi.post(`${ApiUrls.qFormUser.update}?id=${id}`, form);\r\n void refresh();\r\n } catch (error) {\r\n handleError(keyMap.partnershipQuestionnaireQuestionnaireUpdateFailErr, error);\r\n }\r\n };\r\n\r\n isSignatureValid = (): boolean => {\r\n const { qFormInfo } = this.state;\r\n const { type } = qFormInfo;\r\n\r\n if (!showQFormSignature(type)) {\r\n return true;\r\n }\r\n\r\n if (!this.signature.current?.validate()) {\r\n return false;\r\n }\r\n\r\n return true;\r\n };\r\n\r\n send = () => {\r\n const { id, refresh, additionalValidation, onSendHandlerSuccess, onSendHandlerFail } = this.props;\r\n\r\n const { data, signature } = this.state;\r\n const isAdditionalValid = additionalValidation ? additionalValidation() : true;\r\n const isFormValid = this.form.current?.validate();\r\n const isValid = isFormValid && this.isSignatureValid() && isAdditionalValid;\r\n\r\n this.setState({ isValid });\r\n\r\n if (!isValid) {\r\n return;\r\n }\r\n\r\n const form = {\r\n answers: data,\r\n signature,\r\n };\r\n\r\n return fetchApi\r\n .post(`${ApiUrls.qFormUser.send}?id=${id}`, form)\r\n .then(() => {\r\n if (onSendHandlerSuccess) {\r\n onSendHandlerSuccess();\r\n }\r\n void refresh();\r\n })\r\n .catch((error) => {\r\n if (onSendHandlerFail) {\r\n onSendHandlerFail(error.response.data);\r\n }\r\n handleError(keyMap.partnershipQuestionnaireQuestionnaireSendFailErr, error);\r\n });\r\n };\r\n\r\n changeHandler = (data: QuestionsDataType | EmptyObject) => {\r\n this.setState({ data });\r\n };\r\n\r\n setHandler = () => this.set();\r\n\r\n changeSignatureHandler = (signature: SignatureDataType | null) => {\r\n this.setState({ signature });\r\n };\r\n\r\n delete = () => {\r\n const { id, refresh } = this.props;\r\n\r\n // @ts-ignore: remove after translating into typescript\r\n ConfirmDialog.show(keyMap.partnershipQuestionnaireDeleteConfirmationTxt, () =>\r\n fetchApi\r\n .post(`${ApiUrls.qFormUser.delete}?id=${id}`)\r\n .then(() => refresh())\r\n .catch((error) => handleError(keyMap.partnershipQuestionnaireQuestionnaireDeleteFailErr, error)),\r\n );\r\n };\r\n\r\n renderSignature(isDisabledForm: boolean) {\r\n const { i18next } = this.props;\r\n const { signature, qFormInfo } = this.state;\r\n\r\n const { type } = qFormInfo;\r\n\r\n if (!showQFormSignature(type)) {\r\n return;\r\n }\r\n\r\n return (\r\n \r\n {i18next.t(keyMap.profileSignature)} \r\n
\r\n );\r\n }\r\n\r\n render(): JSX.Element {\r\n const { processing, errMsg, info, data, isValid, qFormInfo } = this.state;\r\n const { status, id, isDisabled, renderAfterComponent, classNameKey, i18next } = this.props;\r\n\r\n if (id === 0) {\r\n return (\r\n \r\n
{i18next.t(keyMap.partnershipQuestionnaireCreateQuestionarrieTxt)}
\r\n
\r\n {i18next.t(keyMap.partnershipQuestionnaireStartBtn)}\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n
(\r\n \r\n {renderAfterComponent && renderAfterComponent()}\r\n {this.renderSignature(isDisabledForm)}\r\n\r\n \r\n
\r\n \r\n \r\n {i18next.t(keyMap.partnershipQuestionnaireSendBtn)}\r\n \r\n \r\n \r\n \r\n {i18next.t(keyMap.sharedActionsSave)}\r\n \r\n \r\n \r\n {!isValid && (\r\n
\r\n
{i18next.t(keyMap.partnershipQuestionnaireValidationFailTxt)}
\r\n
\r\n )}\r\n
\r\n )}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default connectToContext(QForm);\r\n","// extracted by mini-css-extract-plugin\nexport default {\"xs\":\"576px\",\"sm\":\"768px\",\"md\":\"1024px\",\"lg\":\"1280px\",\"xl\":\"1600px\",\"MOBILE_MAX_WIDTH\":\"450px\",\"DESKTOP_MIN_WIDTH\":\"451px\",\"blue_main\":\"#0b5bb8\",\"blueLight10\":\"#dfeef7\",\"blue50\":\"#edf4fd\",\"blue100\":\"#d7e7fb\",\"blue500\":\"#247fea\",\"blue600\":\"#1d65ba\",\"blue700\":\"#154b8b\",\"red500\":\"#e54133\",\"grey50\":\"#f4f8fc\",\"grey100\":\"#e9eff7\",\"grey200\":\"#d3dce7\",\"grey400\":\"#9baac3\",\"grey900\":\"#1e3045\",\"danger70\":\"#c50707\",\"white\":\"#fff\",\"documentPreview\":\"documentPreview--ghALpXmD\",\"documentPreviewDocumentIcon\":\"documentPreviewDocumentIcon--uFe70ffq\",\"documentPreviewBody\":\"documentPreviewBody--kLdfz4eH\",\"documentPreviewTrashIcon\":\"documentPreviewTrashIcon--q6H1_iuF\",\"progress\":\"progress--b6AqMY4j\"};","import React from 'react';\r\nimport { UPLOAD_COMPLETED_PERCENT } from '@components-member/shared/DropzoneDocumentPreview/constants';\r\nimport { Progress } from 'antd';\r\nimport DocumentIcon from 'assets/icons/documentIcon.svg';\r\nimport TrashIcon from 'assets/icons/trash icon.svg';\r\nimport styles from './documentPreview.styles.module.scss';\r\n\r\ninterface IDocumentPreviewProps {\r\n fileName: string;\r\n onDeleteHandler: () => void;\r\n progress?: number;\r\n}\r\n\r\nexport const DocumentPreview = (props: IDocumentPreviewProps) => {\r\n const { fileName, progress, onDeleteHandler } = props;\r\n\r\n return (\r\n \r\n
\r\n \r\n\r\n
\r\n
{fileName} \r\n\r\n {progress !== UPLOAD_COMPLETED_PERCENT && progress !== undefined && (\r\n
\r\n )}\r\n
\r\n\r\n
\r\n \r\n
{message}
;\r\n};\r\n","import React, { memo } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { RegularNotificationMessage } from 'components/shared/forms/notificationMessage/regular';\r\n\r\ntype LeverageWarnings = {\r\n [key: string]: {\r\n text: string;\r\n };\r\n};\r\n\r\nexport type MessageDataType = {\r\n leverageWarnings: LeverageWarnings;\r\n};\r\n\r\ninterface IProps {\r\n message?: LeverageWarnings;\r\n}\r\n\r\nexport const UserLeverageHint = memo((props: IProps): JSX.Element | null => {\r\n const { i18n } = useTranslation();\r\n const currentMessage = () => {\r\n if (!props.message) {\r\n return '';\r\n }\r\n\r\n return props.message[i18n.language]?.text || '';\r\n };\r\n\r\n return = {\r\n value?: number | null;\r\n fields: T[];\r\n form: RefObject<{ update: (field: T[]) => void }>;\r\n onChange: (name: string, value: string) => void;\r\n fetchSettings: () => Promise>;\r\n};\r\n\r\nexport const configureAccountSettings = async ({\r\n value,\r\n fields,\r\n form,\r\n onChange,\r\n fetchSettings,\r\n}: ConfigureAccountSettingsArgs) => {\r\n if (!value) {\r\n onChange('copyType', '');\r\n\r\n resetAccountCreateForm(fields);\r\n form.current?.update(fields);\r\n\r\n return defaultSocialTradingSettings;\r\n }\r\n\r\n const settings = await fetchAccountSettings(fetchSettings);\r\n\r\n updateAccountCreateForm({ value, fields, settings });\r\n\r\n form.current?.update(fields);\r\n\r\n return settings;\r\n};\r\n\r\nconst fetchAccountSettings = async (\r\n fetchSettings: () => Promise>,\r\n): Promise => {\r\n try {\r\n const { data } = await fetchSettings();\r\n\r\n return data;\r\n } catch (error) {\r\n handleError(keyMap.sharedErrorsFailedToGetSettings, error);\r\n\r\n return defaultSocialTradingSettings;\r\n }\r\n};\r\n\r\nconst updateAccountCreateForm = ({\r\n value,\r\n fields,\r\n settings,\r\n}: {\r\n value?: number | null;\r\n fields: T[];\r\n settings: IBaseAccountSettings;\r\n}) => {\r\n if (!value) {\r\n resetAccountCreateForm(fields);\r\n } else {\r\n const {\r\n availableAllocationMethods,\r\n isMarginStopCopyLevelSupported,\r\n isStopCopyViaMarginLevelSupported,\r\n isLossStopCopyLevelSupported,\r\n } = settings;\r\n const options = availableAllocationMethods.map((option: string) => ({ value: option }));\r\n\r\n FormUtils.updateFormFieldByName(EnumUTAFormTAField.copyType, { options, attributes: { disabled: false } }, fields);\r\n updateCopyLevelAccountFields({\r\n isMarginStopCopyLevelSupported,\r\n isLossStopCopyLevelSupported,\r\n isStopCopyViaMarginLevelSupported,\r\n fields,\r\n });\r\n }\r\n};\r\n\r\nexport const updateCopyLevelAccountFields = ({\r\n isLossStopCopyLevelSupported,\r\n isMarginStopCopyLevelSupported,\r\n isStopCopyViaMarginLevelSupported,\r\n fields,\r\n}: {\r\n isLossStopCopyLevelSupported: boolean;\r\n isMarginStopCopyLevelSupported: boolean;\r\n isStopCopyViaMarginLevelSupported: boolean;\r\n fields: T[];\r\n}) => {\r\n FormUtils.updateFormFieldByName(\r\n EnumUserSharedFormField.percentageLossStopCopyLevel,\r\n { isHidden: !isLossStopCopyLevelSupported },\r\n fields,\r\n );\r\n const isMarginCopyVisible = isMarginStopCopyLevelSupported && !isStopCopyViaMarginLevelSupported;\r\n\r\n FormUtils.updateFormFieldByName(\r\n EnumUserSharedFormField.marginStopCopyLevel,\r\n { isHidden: !isMarginCopyVisible },\r\n fields,\r\n );\r\n\r\n FormUtils.updateFormFieldByName(\r\n EnumUserSharedFormField.stopCopyViaMarginLevel,\r\n { isHidden: !isStopCopyViaMarginLevelSupported },\r\n fields,\r\n );\r\n};\r\n\r\nexport const updateInvestorMarginLevelFields = ({\r\n account,\r\n isMarginStopCopyLevelSupported,\r\n isStopCopyViaMarginLevelSupported,\r\n fields,\r\n}: {\r\n account: IInvestorAccountDetails | EmptyObject;\r\n isMarginStopCopyLevelSupported: boolean;\r\n isStopCopyViaMarginLevelSupported: boolean;\r\n fields: T[];\r\n}) => {\r\n const marginStopCopyValue = account.marginStopCopyLevel;\r\n const isMarginStopCopyShouldBeHidden = !marginStopCopyValue || !isMarginStopCopyLevelSupported;\r\n\r\n if (isMarginStopCopyShouldBeHidden) {\r\n return;\r\n }\r\n\r\n FormUtils.updateFormFieldByName(\r\n EnumUserSharedFormField.marginStopCopyLevel,\r\n { isHidden: isMarginStopCopyShouldBeHidden },\r\n fields,\r\n );\r\n\r\n FormUtils.updateFormFieldByName(\r\n EnumUserSharedFormField.stopCopyViaMarginLevel,\r\n { isHidden: !isMarginStopCopyShouldBeHidden || !isStopCopyViaMarginLevelSupported },\r\n fields,\r\n );\r\n};\r\n\r\nconst resetAccountCreateForm = (fields: T[]) => {\r\n FormUtils.updateFormFieldByName(EnumUTAFormTAField.copyType, { options: [], attributes: { disabled: true } }, fields);\r\n FormUtils.updateFormFieldByName(EnumUserSharedFormField.percentageLossStopCopyLevel, { isHidden: true }, fields);\r\n FormUtils.updateFormFieldByName(EnumUserSharedFormField.marginStopCopyLevel, { isHidden: true }, fields);\r\n FormUtils.updateFormFieldByName(EnumUserSharedFormField.stopCopyViaMarginLevel, { isHidden: true }, fields);\r\n};\r\n","import React from 'react';\r\nimport { CopyIcon, XIcon } from '@components-library/Icons/iconsComponents';\r\nimport { IMaster } from '@components-member/socialTrading/social.interfaces';\r\nimport { keyMap } from '@locales/lokalise/keyMap';\r\nimport actionStyles from './actions.styles.module.scss';\r\n\r\nexport const DEFAULT_RATING_PERIOD = 'Overall';\r\nexport const DEFAULT_FILTER_PERIOD = 'Month';\r\n\r\nexport const getTableActionStop = (onClick: (data: IMaster) => void) => ({\r\n name: keyMap.sharedActionsStop,\r\n onClick,\r\n isHidden: (data: IMaster) => !data.isCopied,\r\n iconClass: (\r\n form: T,\r\n user: IUser,\r\n selectedMaster: IMaster | EmptyObject,\r\n selectedInvestorAccount: IBaseInvestor | EmptyObject,\r\n): Promise => {\r\n await fetchApi.post(`${ApiUrls.accountType.startCopying}?tradingAccountId=${form.investorId}`, form);\r\n\r\n stopCopyingEventInitiatedByInvestor(selectedInvestorAccount, user);\r\n\r\n masterAccountSuccessfullyCopiedEvent(selectedInvestorAccount.tradingAccountIdHash, user, selectedMaster);\r\n};\r\n\r\nexport const stopCopying = async (user: IUser, investor: IBaseInvestor | EmptyObject): Promise => {\r\n await fetchApi.post(`${ApiUrls.copyTrading.stopCopying}?investorId=${investor.id}`);\r\n\r\n stopCopyingEventInitiatedByInvestor(investor, user);\r\n};\r\n\r\nexport const stopCopyingByMaster = async (investorId: number): Promise => {\r\n await fetchApi.post(`${ApiUrls.copyTrading.stopCopyingByMaster}?investorId=${investorId}`);\r\n};\r\n\r\nexport const createMasterAccount = async (form: IMasterAccountCreateRequest, user: IUser): Promise => {\r\n const response = await fetchApi.post(\r\n ApiUrls.tradingAccountUser.masterAccountCreate,\r\n form,\r\n );\r\n\r\n masterAndCommissionAccountInfoEvents(response.data, form, user);\r\n};\r\n\r\nexport const createInvestorAccount = async (\r\n form: T,\r\n user: IUser,\r\n selectedMaster: IMaster | EmptyObject,\r\n): Promise => {\r\n const response = await fetchApi.post(ApiUrls.tradingAccountUser.investorAccountCreate, form);\r\n\r\n //account created\r\n accountCreatedSuccessfullyEvent(response.data.idHash, form, user, TRADING_ACCOUNT_FORM_TYPE.INVESTOR);\r\n\r\n //investor copies master\r\n masterAccountSuccessfullyCopiedEvent(response.data.idHash, user, selectedMaster);\r\n};\r\n\r\nconst masterAndCommissionAccountInfoEvents = (\r\n response: MasterAccountCreatedResponse,\r\n form: IMasterAccountCreateRequest,\r\n user: IUser,\r\n): void => {\r\n accountCreatedSuccessfullyEvent(response.idHash, form, user, TRADING_ACCOUNT_FORM_TYPE.MASTER);\r\n\r\n const { commissionAccountInfo } = response;\r\n\r\n //if already existing commission account was used for creating master\r\n if (!commissionAccountInfo) {\r\n return;\r\n }\r\n\r\n commissionAccountCreateSuccessfulEvent(\r\n user.idHash,\r\n user.profile.clientSourceType,\r\n commissionAccountInfo.idHash,\r\n commissionAccountInfo.accountType,\r\n commissionAccountInfo.leverage,\r\n user.profile.status,\r\n );\r\n};\r\n\r\nconst commissionAccountCreateSuccessfulEvent = (\r\n userIdHash: string,\r\n clientSourceType: CLIENT_SOURCE_TYPE,\r\n commissionAccIdHash: string,\r\n commissionAccType: string,\r\n commissionAccLeverage: number,\r\n status: string,\r\n) => {\r\n pushAccountCreateSuccessfulEvent(\r\n userIdHash,\r\n getClientSourceType(clientSourceType),\r\n commissionAccIdHash,\r\n commissionAccType,\r\n status,\r\n commissionAccLeverage,\r\n );\r\n};\r\n\r\nconst masterAccountSuccessfullyCopiedEvent = (\r\n investorAccountIdHash: string,\r\n user: IUser,\r\n selectedMaster: IMaster | EmptyObject,\r\n): void => {\r\n pushStartedCopyMasterSuccessEvent(\r\n user.idHash,\r\n getClientSourceType(user.profile.clientSourceType),\r\n investorAccountIdHash,\r\n TRADING_ACCOUNT_FORM_TYPE.INVESTOR,\r\n selectedMaster.tradingAccountIdHash,\r\n selectedMaster.userIdHash,\r\n );\r\n};\r\n\r\n//currently stop copying can be done only by investor\r\nconst stopCopyingEventInitiatedByInvestor = (\r\n selectedInvestorAccount: IBaseInvestor | EmptyObject,\r\n user: IUser,\r\n): void => {\r\n if (selectedInvestorAccount.masterInfo == null) {\r\n return;\r\n }\r\n\r\n pushStoppedCopyMasterSuccessEvent(\r\n user.idHash,\r\n getClientSourceType(user.profile.clientSourceType),\r\n selectedInvestorAccount.tradingAccountIdHash,\r\n TRADING_ACCOUNT_FORM_TYPE.INVESTOR,\r\n selectedInvestorAccount.masterInfo.tradingAccountIdHash,\r\n selectedInvestorAccount.masterInfo.userIdHash,\r\n );\r\n};\r\n\r\nexport const getCopyTradingSettings = async (): Promise> => {\r\n return await fetchApi.get(ApiUrls.copyTradingSettings.get);\r\n};\r\n","// extracted by mini-css-extract-plugin\nexport default {\"xs\":\"576px\",\"sm\":\"768px\",\"md\":\"1024px\",\"lg\":\"1280px\",\"xl\":\"1600px\",\"MOBILE_MAX_WIDTH\":\"450px\",\"DESKTOP_MIN_WIDTH\":\"451px\",\"blue_main\":\"#0b5bb8\",\"blueLight10\":\"#dfeef7\",\"blue50\":\"#edf4fd\",\"blue100\":\"#d7e7fb\",\"blue500\":\"#247fea\",\"blue600\":\"#1d65ba\",\"blue700\":\"#154b8b\",\"red500\":\"#e54133\",\"grey50\":\"#f4f8fc\",\"grey100\":\"#e9eff7\",\"grey200\":\"#d3dce7\",\"grey400\":\"#9baac3\",\"grey900\":\"#1e3045\",\"danger70\":\"#c50707\",\"white\":\"#fff\",\"description\":\"description--StNMrmoY\"};","import React from 'react';\r\nimport { DescriptionBlock } from 'components/shared/infoBlocks/description';\r\nimport styles from './styles.module.scss';\r\n\r\nexport const SelectedOptionDescription = ({ description }: { description: string }): JSX.Element => {\r\n return \r\n {args.name} \r\n \r\n {args.value} {args.percentValue && '%'}\r\n \r\n
\r\n );\r\n };\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n {option.nickname} \r\n {option.login} \r\n
\r\n
\r\n
\r\n \r\n {renderContentBlock({\r\n name: i18n.t(keyMap.commonPlatformType),\r\n value: valueFromEnumService.getValueFromEnumsWithI18n(\r\n option.tradingPlatformType,\r\n ENUM_CONSTANTS.TRADING_PLATFORM_TYPE,\r\n i18n,\r\n ),\r\n needAccent: true,\r\n percentValue: false,\r\n })}\r\n \r\n {renderContentBlock({\r\n name: i18n.t(keyMap.mastersFieldsProfitability),\r\n value: option.profitability,\r\n percentValue: true,\r\n needAccent: true,\r\n })}\r\n\r\n \r\n {renderContentBlock({\r\n name: i18n.t(keyMap.investorsCount),\r\n value: option.countOfInvestors,\r\n percentValue: false,\r\n needAccent: false,\r\n })}\r\n {renderContentBlock({\r\n name: i18n.t(keyMap.mastersFieldsProfitSharing),\r\n value: option.profitSharing,\r\n percentValue: true,\r\n needAccent: false,\r\n })}\r\n \r\n
\r\n
): OptionComponent[] => {\r\n return optionsData.map((option) => {\r\n return {\r\n optionComponent: }>) => {\r\n if (ref && ref.current) {\r\n await ref.current.updateData();\r\n }\r\n};\r\n\r\nexport const getAccountPrefix = (\r\n type: string,\r\n): (typeof CONSTANTS.ACCOUNT_TYPE_PREFIX)[keyof typeof CONSTANTS.ACCOUNT_TYPE_PREFIX] | '' => {\r\n const { STD, ECN } = CONSTANTS.ACCOUNT_TYPE_PREFIX;\r\n\r\n if (\r\n type === IApiGroupMappingType.RealCopyTradingMasterStandard ||\r\n type === IApiGroupMappingType.RealCopyTradingInvestorStandard\r\n ) {\r\n return STD;\r\n }\r\n\r\n if (\r\n type === IApiGroupMappingType.RealCopyTradingMasterEcn ||\r\n type === IApiGroupMappingType.RealCopyTradingInvestorEcn\r\n ) {\r\n return ECN;\r\n }\r\n\r\n return '';\r\n};\r\n\r\nexport const setLotForEquityAndBalanceCopyTypeToZero = (\r\n form: T,\r\n): void => {\r\n if (!isLotCopyTypeCheck(form.copyType)) {\r\n form.lot = String(0);\r\n }\r\n};\r\n\r\nexport const setMarginPercentageLevelToZero = <\r\n T extends { percentageLossStopCopyLevel: string; marginStopCopyLevel: string },\r\n>(\r\n form: T,\r\n) => {\r\n if (!form.percentageLossStopCopyLevel) {\r\n form.percentageLossStopCopyLevel = String(0);\r\n }\r\n\r\n if (!form.marginStopCopyLevel) {\r\n form.marginStopCopyLevel = String(0);\r\n }\r\n};\r\n\r\nexport const getAccentColorClass = (value: string | number): string => {\r\n const state = Math.sign(Number(value));\r\n\r\n switch (state) {\r\n case 1:\r\n return styles.accent_green;\r\n\r\n case -1:\r\n return styles.accent_red;\r\n\r\n default:\r\n return styles.accent_fade;\r\n }\r\n};\r\n\r\nexport const ibCodeFieldIsEnabled = (canSetIb: boolean, clientSourceType: ClientSourceType): boolean => {\r\n const isDirectClientSourceType = clientSourceType === CLIENT_SOURCE_TYPE.DIRECT;\r\n\r\n return canSetIb && !isDirectClientSourceType;\r\n};\r\n\r\nexport const filterIbCodeFieldIfDisabled = (\r\n fields: (IModalFormField | IFormField)[],\r\n canSetIb: boolean,\r\n clientSourceType: ClientSourceType,\r\n) => {\r\n const ibCodeField = ibCodeFieldIsEnabled(canSetIb, clientSourceType);\r\n\r\n if (ibCodeField) {\r\n return fields;\r\n }\r\n\r\n return fields.filter((field) => field.name !== 'ibCode');\r\n};\r\n\r\nconst onMasterActionHandler = (\r\n actionType: QUERY_PARAMS,\r\n data: IMaster | IMasterAccount,\r\n routeData: { search: string },\r\n) => {\r\n const { masterAccountId } = data;\r\n const sourceType = routeData.search.includes(MASTERS_RATING_ACTION_SOURCE.EXTERNAL)\r\n ? MASTERS_RATING_ACTION_SOURCE.EXTERNAL\r\n : MASTERS_RATING_ACTION_SOURCE.DEFAULT;\r\n\r\n reactRouterService.addUrlQueryParams({\r\n [QUERY_PARAMS.ACTION]: actionType,\r\n [QUERY_PARAMS.MASTER]: masterAccountId,\r\n [QUERY_PARAMS.SOURCE]: sourceType,\r\n });\r\n};\r\n\r\nexport const onMasterStopHandler = (data: IMaster | IMasterAccount, routeData: { search: string }) => {\r\n onMasterActionHandler(QUERY_PARAMS.STOP, data, routeData);\r\n};\r\n\r\nexport const onMasterCopyHandler = (data: IMaster | IMasterAccount, routeData: { search: string }): void => {\r\n onMasterActionHandler(QUERY_PARAMS.COPY, data, routeData);\r\n};\r\n\r\nexport const setTooltipMessage = (idx: number, message: string, fields: Array): void => {\r\n if (idx > -1) {\r\n fields[idx] = Object.assign({\r\n ...fields[idx],\r\n tooltip: message,\r\n });\r\n }\r\n};\r\n\r\nexport const getGroupMappingTypeById = (accountType: IApiUserTradingAccountType): IApiGroupMappingType | undefined => {\r\n return accountType ? accountType.groupMappingType : undefined;\r\n};\r\n\r\nexport const isMasterDepositFieldsVisible = (\r\n recommendedMinDepositLimits: RecommendedMinDepositLimitsType[],\r\n groupMappingType?: IApiGroupMappingType,\r\n): boolean => {\r\n if (!groupMappingType) {\r\n return false;\r\n }\r\n\r\n return minDepositLimitsAreConfigured(recommendedMinDepositLimits, groupMappingType);\r\n};\r\n\r\nexport const getMasterRecommendedDepositTooltipMsg = (\r\n depositLimits: RecommendedMinDepositLimitsType[],\r\n accountCurrency: string,\r\n makeMinDepositAmountRequired: boolean,\r\n accountGroupMappingType?: IApiGroupMappingType,\r\n): string => {\r\n if (!accountGroupMappingType) {\r\n return '';\r\n }\r\n const accountTypeLimitConfig = depositLimits.find(\r\n ({ groupMappingType, currency }) => groupMappingType === accountGroupMappingType && currency === accountCurrency,\r\n );\r\n\r\n const limit = accountTypeLimitConfig && accountTypeLimitConfig.limits;\r\n\r\n if (!limit) {\r\n return '';\r\n }\r\n\r\n const min = getFormattedNumber(limit.minAllowedAmount, { precision: true });\r\n const max = getFormattedNumber(limit.maxAllowedAmount, { precision: true });\r\n const mes = makeMinDepositAmountRequired\r\n ? keyMap.tradingAccountsOpenMasterAccountFormRecommendedDepositMandatoryTooltipMsg\r\n : keyMap.tradingAccountsOpenMasterAccountFormRecommendedDepositOptionalTooltipMsg;\r\n\r\n return i18next.t(mes, {\r\n min,\r\n max,\r\n currency: accountCurrency,\r\n });\r\n};\r\n\r\nexport const getMasterDescription = (recommendedMinDepositAmount: number | null, currency: string | null): string => {\r\n if (!recommendedMinDepositAmount) {\r\n return '';\r\n }\r\n const amount = getUpperFormattedInteger(recommendedMinDepositAmount);\r\n\r\n return i18next.t(keyMap.socialTradingModalMasterDescription, { amount, currency });\r\n};\r\n\r\nexport const copyTypeOptionsHandler = (\r\n availableAllocationMethods: IApiCopyType[],\r\n fields: IModalFormField[],\r\n accountAllocationMethod?: IApiCopyType,\r\n): void => {\r\n const copyTypeFieldIdx = FormUtils.getFieldIndex(fields, EnumUSTFormField.copyType);\r\n\r\n if (availableAllocationMethods.length === 0) {\r\n return;\r\n }\r\n\r\n const defaultOptions = ENUM_CONSTANTS.ALLOCATION_METHOD as Array<{ value: IApiCopyType }>;\r\n\r\n const filteredOptions = defaultOptions.filter((defaultOption) =>\r\n availableAllocationMethods.includes(defaultOption.value),\r\n );\r\n\r\n if (accountAllocationMethod && !availableAllocationMethods.includes(accountAllocationMethod)) {\r\n const allocationMethodEnumValue = defaultOptions.find((option) => option.value === accountAllocationMethod);\r\n\r\n if (allocationMethodEnumValue) {\r\n filteredOptions.push(allocationMethodEnumValue);\r\n }\r\n }\r\n\r\n FormUtils.updateFormField(copyTypeFieldIdx, { options: [...filteredOptions] }, fields);\r\n};\r\n\r\nexport const getMasterCopyType = (availableAllocationMethods: IApiCopyType[], value: IApiCopyType) => {\r\n return availableAllocationMethods.includes(value) ? value : undefined;\r\n};\r\n\r\nexport const getLeverageFromInvestorType = (\r\n investorTypes: IApiUserTradingAccountType[],\r\n selectedInvestorType: number | IApiGroupMappingType | undefined,\r\n) => {\r\n const investorType = investorTypes.find(\r\n (type) => type.id === selectedInvestorType || type.groupMappingType === selectedInvestorType,\r\n );\r\n\r\n if (investorType) {\r\n return investorType.leverages.map((option) => ({ value: option }));\r\n }\r\n};\r\n","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { WarningIcon } from '@components-library/Icons/iconsComponents';\r\nimport { keyMap } from '@locales/lokalise/keyMap';\r\nimport CONSTANTS from 'components/shared/constants';\r\nimport { NotificationMessage } from 'components/shared/notification';\r\nimport { ENUM_LOCALE_CODE } from 'global.enums';\r\nimport { IBrokerParams, IUser } from 'global.interfaces';\r\nimport i18next from 'i18next';\r\nimport { i18n } from 'i18next';\r\nimport { PspOperationsNotification } from '../psp/pspOperationsNotification';\r\n\r\ninterface UserStatusData {\r\n isUserApproved: boolean;\r\n depositAllowedForUnverifiedProfile: boolean;\r\n maxTotalDepositAmountForUnverifiedProfile: number;\r\n userCanDeposit: boolean;\r\n userCanWithdraw: boolean;\r\n userIsNotApprovedAndCanDeposit: boolean;\r\n hasAnyActiveKycChecks: boolean;\r\n}\r\n\r\nexport const getUserStatusData = (userInfo?: IUser | null): UserStatusData => {\r\n if (!userInfo) {\r\n return getEmptyData();\r\n }\r\n\r\n const {\r\n isUserApproved,\r\n depositAllowedForUnverifiedProfile,\r\n maxTotalDepositAmountForUnverifiedProfile,\r\n hasAnyActiveKycChecks,\r\n } = userInfo;\r\n const userCanDeposit = isUserApproved || depositAllowedForUnverifiedProfile;\r\n const userCanWithdraw = isUserApproved;\r\n const userIsNotApprovedAndCanDeposit = !isUserApproved && depositAllowedForUnverifiedProfile;\r\n\r\n return {\r\n isUserApproved,\r\n depositAllowedForUnverifiedProfile,\r\n maxTotalDepositAmountForUnverifiedProfile,\r\n userCanDeposit,\r\n userCanWithdraw,\r\n userIsNotApprovedAndCanDeposit,\r\n hasAnyActiveKycChecks,\r\n };\r\n};\r\n\r\nconst getEmptyData = (): UserStatusData => {\r\n return {\r\n isUserApproved: false,\r\n depositAllowedForUnverifiedProfile: false,\r\n maxTotalDepositAmountForUnverifiedProfile: 0,\r\n userCanDeposit: false,\r\n userCanWithdraw: false,\r\n userIsNotApprovedAndCanDeposit: false,\r\n hasAnyActiveKycChecks: false,\r\n };\r\n};\r\n\r\ninterface DepositWarningMessageProps {\r\n userInfo: IUser;\r\n depositTabLocation: boolean;\r\n brokerParams: IBrokerParams;\r\n}\r\n\r\nexport const DepositWarningMessage = (props: DepositWarningMessageProps) => {\r\n const { i18n } = useTranslation();\r\n const userStatusData = getUserStatusData(props.userInfo);\r\n const showDepositWarningMessage = props.depositTabLocation && userStatusData.userCanDeposit;\r\n\r\n if (!showDepositWarningMessage) {\r\n return null;\r\n }\r\n\r\n const { depositWarningTitle, depositWarningMessageList } = getDepositWarningMessages(props.brokerParams, i18n);\r\n\r\n return (\r\n \r\n