fix(condo): INFRA-499 bump typescript to v5. Bump compiler target to …

…ES6. Bump storybook to v7 (#5215)

* fix(condo): INFRA-499 fixed types in AcquiringReceipt.tsx

* fix(condo): INFRA-499 fixed using withIntl in _app.tsx

* fix(condo): INFRA-499 mutations.utils.js moved to ts

* fix(condo): INFRA-499 fixed types in PaymentsTab.tsx

* fix(condo): INFRA-499 fixed types in Header.tsx

* fix(condo): INFRA-499 fixed types in GraphQlSearchInputWithCheckAll.tsx

* fix(condo): INFRA-499 fixed types in ImagesUploadList.tsx

* fix(condo): INFRA-499 fixed types in ImportWrapper

* fix(condo): INFRA-499 fixed types in useContactExportToExcelTask

* fix(condo): INFRA-499 fixed types in SetupTelegramNotificationsBanner

* fix(condo): INFRA-499 refactored filters

* fix(condo): INFRA-499 fixed types in ContactOption.tsx

* fix(condo): INFRA-499 fixed types in NewContactFields.tsx

* fix(condo): INFRA-499 fixed types in NotResidentFields.tsx

* fix(condo): INFRA-499 fixed types in MarketplacePaymentsContent.tsx

* fix(condo): INFRA-499 fixed types in ConnectModal.tsx

* fix(condo): INFRA-499 fixed types in AppLabelTag.tsx

* fix(condo): INFRA-499 fixed types and exports in BaseEmployeeRoleForm.tsx

* fix(condo): INFRA-499 fixed types in OrganizationSelect.tsx

* fix(condo): INFRA-499 fixed types in ticket sources

* fix(condo): INFRA-499 fixed types in ShareTicketModal.tsx

* fix(condo): INFRA-499 fixed types in forgot.tsx

* fix(condo): INFRA-499 fixed types in index.tsx

* fix(condo): INFRA-499 fixed types in user view page

* fix(condo): INFRA-499 fixed types in AppCard

* feat(condo): INFRA-499 bump typescript to v5

* feat(condo): INFRA-499 upgrade target of compiler to ES6

* feat(ui): INFRA-499 bump typescript to v5

* fix(ui): INFRA-499 fixed type errors

* fix(ui): INFRA-499 fixed type errors

* feat(ui): INFRA-499 bump storybook from v6 to v7

* fix(ui): INFRA-499 fixed types in stories

* fix(condo): INFRA-499 fixed exports

* feat(ui): INFRA-499 replaced deprecated types

* feat(condo): INFRA-499 removed unnecessary ts-ignore

* fix(condo): INFRA-499 fixed types

* feat(address-service): INFRA-499 bump typescript to v5. Upgraded compiler target to ES6

* feat(condo): INFRA-499 removed deprecated const

* feat(dev-portal): INFRA-499 bump typescript to v5. Upgraded compiler target to ES6

* feat(miniapp): INFRA-499 bump typescript to v5. Upgraded compiler target to ES6

* feat(bridge): INFRA-499 bump typescript to v5. Upgraded compiler target to ES6

* feat(codegen): INFRA-499 bump typescript to v5. Upgraded compiler target to ES6

* fix(next): INFRA-499 fixed type errors

* fix(tsconfig): INFRA-499 Upgraded compiler target to ES6

* feat(condo): INFRA-499 updated submodules

* feat(condo): INFRA-499 updated yarn.lock

* feat(dev-portal): INFRA-499 bump ts-node to 10.9.2(latest)

* feat(icons): INFRA-499 bump ts-node to 10.9.2(latest). Bump typescript to v5

* feat(condo): INFRA-499 updated submodules

* feat(condo): INFRA-499 updated yarn.lock

* feat(condo): INFRA-499 updated submodules to master

apps/address-service/package.json

@@ -92,6 +92,6 @@
     "jest-jasmine2": "^29.7.0",
     "jest-watch-typeahead": "^0.6.1",
     "pluralize": "^8.0.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.5.4"
   }
 }

apps/address-service/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES6",
     "lib": [
       "dom",
       "dom.iterable",

apps/condo/admin-ui/index.js

@@ -1,4 +1,3 @@
-// @ts-ignore
 import { UserSwitchOutlined } from '@ant-design/icons'
 import { useMutation, gql } from '@apollo/client'
 import { ItemId, AddNewItem } from '@keystonejs/app-admin-ui/components'

apps/condo/domains/acquiring/components/AcquiringReceipt.tsx

@@ -1,3 +1,4 @@
+import { MultiPaymentStatusType } from '@app/condo/schema'
 import styled from '@emotion/styled'
 import { Col, Row, Typography } from 'antd'
 import Big from 'big.js'
@@ -9,12 +10,6 @@ import React, { useEffect, useRef } from 'react'
 
 import { useIntl } from '@open-condo/next/intl'
 
-import {
-    MULTIPAYMENT_DONE_STATUS,
-    MULTIPAYMENT_ERROR_STATUS,
-    MULTIPAYMENT_PROCESSING_STATUS,
-    MULTIPAYMENT_WITHDRAWN_STATUS,
-} from '@condo/domains/acquiring/constants/payment'
 import { colors } from '@condo/domains/common/constants/style'
 import { createWrappedPdf } from '@condo/domains/common/utils/pdf'
 
@@ -66,7 +61,7 @@ interface IAcquiringReceiptProps {
     paymentDateTime: string,
     documentNumber: string,
     documentTitle: string,
-    status: MULTIPAYMENT_DONE_STATUS | MULTIPAYMENT_ERROR_STATUS | MULTIPAYMENT_PROCESSING_STATUS | MULTIPAYMENT_WITHDRAWN_STATUS,
+    status: MultiPaymentStatusType,
     payerInfo: Array<PrintingOption>,
     totalSum: {
         amountWithExplicits: string,
@@ -412,15 +407,15 @@ export const AcquiringReceipt: React.FC<IAcquiringReceiptProps> = (props) => {
     const intl = useIntl()
 
     let statusMessage = intl.formatMessage({ id: 'MultiPayment.status.DONE' })
-    if (status === MULTIPAYMENT_PROCESSING_STATUS) {
+    if (status === MultiPaymentStatusType.Processing) {
         statusMessage = intl.formatMessage({ id: 'MultiPayment.status.PROCESSING' })
-    } else if (status === MULTIPAYMENT_ERROR_STATUS) {
+    } else if (status === MultiPaymentStatusType.Error) {
         statusMessage = intl.formatMessage({ id: 'MultiPayment.status.ERROR' })
     }
     let statusColor = STATUS_SUCCESS_COLOR
-    if (status === MULTIPAYMENT_PROCESSING_STATUS) {
+    if (status === MultiPaymentStatusType.Processing) {
         statusColor = STATUS_PROCESSING_COLOR
-    } else if (status === MULTIPAYMENT_ERROR_STATUS) {
+    } else if (status === MultiPaymentStatusType.Error) {
         statusColor = STATUS_ERROR_COLOR
     }
     const payerTitle = intl.formatMessage({ id: 'acquiringReceipt.title' })

apps/condo/domains/billing/components/BillingPageContent/PaymentsTab.tsx

@@ -1,3 +1,4 @@
+import { PaymentStatusType } from '@app/condo/schema'
 import get from 'lodash/get'
 import React, { CSSProperties } from 'react'
 
@@ -6,11 +7,11 @@ import { useOrganization } from '@open-condo/next/organization'
 import { Typography } from '@open-condo/ui'
 
 import PaymentsTable from '@condo/domains/acquiring/components/payments/PaymentsTable'
-import { PAYMENT_DONE_STATUS, PAYMENT_WITHDRAWN_STATUS } from '@condo/domains/acquiring/constants/payment'
 import { Payment } from '@condo/domains/acquiring/utils/clientSchema'
 import { BasicEmptyListView } from '@condo/domains/common/components/EmptyListView'
 import { Loader } from '@condo/domains/common/components/Loader'
 
+
 const SEARCHING_DINO_IMG = 'dino/[email protected]'
 const IMG_STYLES: CSSProperties = { marginBottom: 24 }
 const TEXT_GAP = 16
@@ -26,7 +27,7 @@ export const PaymentsTab: React.FC = () => {
     const { objs: anyPayments, loading: anyPaymentsLoading, error: anyPaymentsError } = Payment.useObjects({
         where: {
             organization: { id: orgId },
-            status_in: [PAYMENT_WITHDRAWN_STATUS, PAYMENT_DONE_STATUS],
+            status_in: [PaymentStatusType.Withdrawn, PaymentStatusType.Done],
             invoice_is_null: true,
         },
         first: 1,

apps/condo/domains/common/components/GraphQlSearchInputWithCheckAll.tsx

@@ -8,11 +8,10 @@ import React, { ComponentProps, useCallback, useEffect, useRef, useState } from
 
 import { useIntl } from '@open-condo/next/intl'
 
-import { GraphQlSearchInputOption } from '@condo/domains/common/components/GraphQlSearchInput/GraphQlSearchInput'
 import { useValidations } from '@condo/domains/common/hooks/useValidations'
 
 import Checkbox from './antd/Checkbox'
-import { GraphQlSearchInput } from './GraphQlSearchInput'
+import { GraphQlSearchInputOption, GraphQlSearchInput } from './GraphQlSearchInput'
 
 
 export type InputWithCheckAllProps = {
@@ -28,7 +27,7 @@ export type InputWithCheckAllProps = {
     disabled?: boolean
     checkboxDisabled?: boolean
     checkboxHidden?: boolean
-    onDataLoaded?: (data: GraphQlSearchInputOption['data']) => void
+    onDataLoaded?: (data: GraphQlSearchInputOption['data'], allDataLoaded: boolean) => void
     /**
      * When your form has a complex structure, for example when fields change dynamically,
      * you need to mutation the form yourself after the checkbox has been checked.

apps/condo/domains/common/components/ImagesUploadList.tsx

@@ -225,7 +225,7 @@ export const ImagesUploadList: React.FC<ImagesUploadListProps> = ({
                         })
 
                         if (isFunction(onFilesChange)) {
-                            onFilesChange(fileList)
+                            onFilesChange(fileList as UploadFileType[])
                         }
 
                         setFiles(fileList)

apps/condo/domains/common/components/Import/Index.tsx

@@ -25,7 +25,7 @@ import { ActiveModalType, BaseImportWrapper, ExtraModalContentType } from './Bas
 
 export interface IImportWrapperProps {
     accessCheck: boolean
-    onFinish: (variables: unknown) => void
+    onFinish?: () => void
     columns: Columns
     rowNormalizer: RowNormalizer
     rowValidator: RowValidator

apps/condo/domains/common/components/SetupTelegramNotificationsBanner.ts

@@ -1,6 +1,5 @@
 import cookie from 'js-cookie'
 import get from 'lodash/get'
-import isInteger from 'lodash/isInteger'
 import { useEffect } from 'react'
 
 import { useFeatureFlags } from '@open-condo/featureflags/FeatureFlagsContext'
@@ -23,7 +22,9 @@ export const SetupTelegramNotificationsBanner = () => {
     const { useFlag, useFlagValue } = useFeatureFlags()
     const forceShowBanner = useFlag(SHOW_TELEGRAM_NOTIFICATIONS_BANNER) || false
     const maxEmployeeSizeFromFeatureFlag = useFlagValue(MAX_EMPLOYEE_SIZE_IN_ORGANIZATION_TO_TELEGRAM_NOTIFICATIONS)
-    const maxEmployeeSize = isInteger(maxEmployeeSizeFromFeatureFlag) ? maxEmployeeSizeFromFeatureFlag : DEFAULT_MAX_EMPLOYEE_SIZE
+    const maxEmployeeSize = typeof maxEmployeeSizeFromFeatureFlag === 'number' && Number.isInteger(maxEmployeeSizeFromFeatureFlag)
+        ? maxEmployeeSizeFromFeatureFlag
+        : DEFAULT_MAX_EMPLOYEE_SIZE
 
     const { count: employeeCount, loading: employeeLoading } = OrganizationEmployee.useCount({
         where: {

apps/condo/domains/common/components/Table/Filters.tsx

@@ -1,25 +1,28 @@
 import { FilterFilled } from '@ant-design/icons'
-import { FilterValue } from 'antd/es/table/interface'
-import { CheckboxGroupProps } from 'antd/lib/checkbox/Group'
-import { PickerProps, RangePickerProps } from 'antd/lib/date-picker/generatePicker'
-import { FilterDropdownProps } from 'antd/lib/table/interface'
+import styled from '@emotion/styled'
+import { Space } from 'antd'
+import { CheckboxGroupProps } from 'antd/es/checkbox/Group'
+import { PickerProps, RangePickerProps } from 'antd/es/date-picker/generatePicker'
+import { FilterValue, FilterDropdownProps } from 'antd/es/table/interface'
 import dayjs, { Dayjs } from 'dayjs'
 import get from 'lodash/get'
 import isArray from 'lodash/isArray'
 import isEmpty from 'lodash/isEmpty'
 import isFunction from 'lodash/isFunction'
 import React, { CSSProperties, useCallback, useMemo } from 'react'
 
+import { useIntl } from '@open-condo/next/intl'
+
 import Checkbox from '@condo/domains/common/components/antd/Checkbox'
 import Input, { CustomInputProps } from '@condo/domains/common/components/antd/Input'
 import Select, { CustomSelectProps, SelectValueType } from '@condo/domains/common/components/antd/Select'
 import { GraphQlSearchInput, ISearchInputProps } from '@condo/domains/common/components/GraphQlSearchInput'
 import DatePicker from '@condo/domains/common/components/Pickers/DatePicker'
 import DateRangePicker from '@condo/domains/common/components/Pickers/DateRangePicker'
-import { FilterContainer, SelectFilterContainer } from '@condo/domains/common/components/TableFilter'
 import { colors } from '@condo/domains/common/constants/style'
 import { QueryArgType } from '@condo/domains/common/utils/tables.utils'
 
+import { Button } from '../Button'
 import { TrackingEventType, useTracking } from '../TrackingContext'
 
 
@@ -42,6 +45,72 @@ type GetDateFilterDropdownType = GetCommonFilterDropdownType<{ datePickerProps?:
 
 type GetDateRangeFilterDropdownType = GetCommonFilterDropdownType<{ datePickerProps?: RangePickerProps<Dayjs> } & CommonFilterDropdownProps>
 
+interface IFilterContainerProps {
+    clearFilters: () => void
+    showClearButton?: boolean
+    style?: CSSProperties
+}
+
+const FILTER_CONTAINER_STYLES: CSSProperties = { padding: 16 }
+
+const handleStopPropagation = (e) => e.stopPropagation()
+
+const FilterContainer: React.FC<IFilterContainerProps> = (props) => {
+    const { showClearButton, clearFilters, children } = props
+    const intl = useIntl()
+    const ResetLabel = intl.formatMessage({ id: 'filters.Reset' })
+
+    return (
+        <div style={FILTER_CONTAINER_STYLES} onKeyDown={handleStopPropagation}>
+            <Space size={8} direction='vertical' align='center'>
+                {children}
+                {
+                    showClearButton && (
+                        <Button
+                            size='small'
+                            onClick={clearFilters}
+                            type='inlineLink'
+                        >
+                            {ResetLabel}
+                        </Button>
+                    )
+                }
+            </Space>
+        </div>
+    )
+}
+
+const StyledSelectFilterContainer = styled.div`
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 300px;
+`
+
+const SelectFilterContainer: React.FC<IFilterContainerProps> = (props) => {
+    const { showClearButton, clearFilters, style, children } = props
+    const intl = useIntl()
+    const ResetLabel = intl.formatMessage({ id: 'filters.Reset' })
+
+    return (
+        <StyledSelectFilterContainer style={style} onKeyDown={handleStopPropagation}>
+            {children}
+            {
+                showClearButton && (
+                    <Button
+                        size='small'
+                        onClick={clearFilters}
+                        type='inlineLink'
+                    >
+                        {ResetLabel}
+                    </Button>
+                )
+            }
+        </StyledSelectFilterContainer>
+    )
+}
+
 
 const FILTER_DROPDOWN_CHECKBOX_STYLES: CSSProperties = { display: 'flex', flexDirection: 'column' }