feat(registry): DOMA-9269 new registry upload flow (#5027)

* feat(condo): DOMA-9269 move receipts upload to extension tab * feat(condo): DOMA-9269 added choose custom columns and ui fixes * fix(condo): DOMA-9269 add icon beside text to table cell render * feat(registry): DOMA-10076 added editing of address cell in table * feat(condo): DOMA-9269 added tooltip props to renders * fix(condo): DOMA-9269 force reload after condo-bridge redirect * refactor(condo): DOMA-9269 rebased registry * fix(condo): DOMA-9269 removed unused style prop from iframe * feat(registry): DOMA-9269 added two flows of address fixing (addressTransform and one-time) * fix(condo): DOMA-9269 remove iframe scrolling prop * fix(registry): DOMA-10505 fixed precise money rendering in history, fixed services render
open-condo-software · Nov 6, 2024 · a60669f · a60669f
1 parent 6865f30
commit a60669f
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 72 deletions.
diff --git a/apps/condo/domains/billing/components/BillingPageContent/MainContent.tsx b/apps/condo/domains/billing/components/BillingPageContent/MainContent.tsx
@@ -59,7 +59,7 @@ export const MainContent: React.FC<MainContentProps> = ({
             result.push({
                 label: extensionPageTitle,
                 key: EXTENSION_TAB_KEY,
-                children: <IFrame src={appUrl} reloadScope='organization' withPrefetch withLoader withResize/>,
+                children: <IFrame src={appUrl} reloadScope='organization' withPrefetch withLoader withResize />,
             })
         }
 

diff --git a/apps/condo/domains/billing/components/BillingPageContent/ReceiptsTable.tsx b/apps/condo/domains/billing/components/BillingPageContent/ReceiptsTable.tsx
@@ -3,8 +3,9 @@ import { Row, Col, Typography, Space } from 'antd'
 import dayjs from 'dayjs'
 import get from 'lodash/get'
 import { useRouter } from 'next/router'
-import React, { useCallback, useMemo, useState, CSSProperties } from 'react'
+import React, { useCallback, useMemo, useState, CSSProperties, useEffect } from 'react'
 
+import bridge from '@open-condo/bridge'
 import { useDeepCompareEffect } from '@open-condo/codegen/utils/useDeepCompareEffect'
 import { useIntl } from '@open-condo/next/intl'
 
@@ -66,6 +67,7 @@ export const ReceiptsTable: React.FC = () => {
         count: total,
         objs: receipts,
         error,
+        refetch,
     } = BillingReceiptForOrganization.useObjects({
         where: { ...filtersToWhere(filters), context: { id: contextId } },
         sortBy: sortersToSortBy(sorters) as SortBillingReceiptsBy[],
@@ -101,6 +103,16 @@ export const ReceiptsTable: React.FC = () => {
         }
     }, [filters])
 
+    useEffect(() => {
+        const handleRedirect = async (event) => {
+            if (get(event, 'type') === 'condo-bridge') refetch()
+        }
+        bridge.subscribe(handleRedirect)
+        return () => {
+            bridge.unsubscribe(handleRedirect)
+        }
+    }, [refetch])
+
     const periodMetaSelect = useMemo(() => {
         return (
             <Space direction='vertical' size={12}>

diff --git a/apps/condo/domains/billing/components/BillingPageContent/ReportMessage.tsx b/apps/condo/domains/billing/components/BillingPageContent/ReportMessage.tsx
@@ -1,16 +1,27 @@
 import get from 'lodash/get'
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 
+import bridge from '@open-condo/bridge'
 import { useIntl } from '@open-condo/next/intl'
 import { Typography, Tooltip } from '@open-condo/ui'
 
 import { useBillingAndAcquiringContexts } from './ContextProvider'
 
 export const ReportMessage: React.FC = () => {
     const intl = useIntl()
-    const { billingContext } = useBillingAndAcquiringContexts()
+    const { billingContext, refetchBilling } = useBillingAndAcquiringContexts()
     const lastReport = get(billingContext, 'lastReport', {})
 
+    useEffect(() => {
+        const handleRedirect = async (event) => {
+            if (get(event, 'type') === 'condo-bridge') refetchBilling()
+        }
+        bridge.subscribe(handleRedirect)
+        return () => {
+            bridge.unsubscribe(handleRedirect)
+        }
+    }, [refetchBilling])
+
     return useMemo(() => {
         if (typeof lastReport.totalReceipts !== 'number' || typeof lastReport.finishTime !== 'string') {
             return null

diff --git a/apps/condo/domains/billing/components/BillingPageContent/index.tsx b/apps/condo/domains/billing/components/BillingPageContent/index.tsx
@@ -1,12 +1,11 @@
+import styled from '@emotion/styled'
 import get from 'lodash/get'
 import Head from 'next/head'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React from 'react'
 
-import bridge from '@open-condo/bridge'
-import type { CondoBridgeSubscriptionListener } from '@open-condo/bridge'
 import { useIntl } from '@open-condo/next/intl'
 import { useOrganization } from '@open-condo/next/organization'
-import { Typography, Tag, Button } from '@open-condo/ui'
+import { Typography, Tag } from '@open-condo/ui'
 import { colors } from '@open-condo/ui/dist/colors'
 
 import { AccessDeniedPage } from '@condo/domains/common/components/containers/AccessDeniedPage'
@@ -16,71 +15,30 @@ import { useBillingAndAcquiringContexts } from './ContextProvider'
 import { MainContent } from './MainContent'
 
 
+const StyledPageWrapper = styled(PageWrapper)`
+     & .condo-tabs, & .condo-tabs-content, & .condo-tabs-tabpane, & .page-content {
+       height: 100%;
+     }
+`
+
 export const BillingPageContent: React.FC = () => {
-    const { billingContext, refetchBilling } = useBillingAndAcquiringContexts()
+    const { billingContext } = useBillingAndAcquiringContexts()
     const billingName = get(billingContext, ['integration', 'name'], '')
 
     const intl = useIntl()
     const PageTitle = intl.formatMessage({ id: 'global.section.accrualsAndPayments' })
     const ConnectedStatusMessage = intl.formatMessage({ id: 'accrualsAndPayments.billing.statusTag.connected' }, { name: billingName })
     const ErrorStatusMessage = intl.formatMessage({ id: 'accrualsAndPayments.billing.statusTag.error' }, { name: billingName })
-    const DefaultUploadMessage = intl.formatMessage({ id: 'accrualsAndPayments.billing.uploadReceiptsAction.defaultMessage' })
 
     const userOrganization = useOrganization()
     const canReadBillingReceipts = get(userOrganization, ['link', 'role', 'canReadBillingReceipts'], false)
     const canReadPayments = get(userOrganization, ['link', 'role', 'canReadPayments'], false)
-    const canImportBillingReceipts = get(userOrganization, ['link', 'role', 'canImportBillingReceipts'], false)
 
     const currentProblem = get(billingContext, 'currentProblem')
-    const uploadUrl = get(billingContext, ['integration', 'uploadUrl'])
-    const uploadMessage = get(billingContext, ['integration', 'uploadMessage'])
 
     const tagBg = currentProblem ? colors.red['5'] : colors.green['5']
     const tagMessage = currentProblem ? ErrorStatusMessage : ConnectedStatusMessage
 
-    const [uploadModalId, setUploadModalId] = useState<string | null>(null)
-
-    const handleUploadClick = useCallback(() => {
-        if (uploadUrl) {
-            // NOTE: Open bridge modal since it will register handlers and modalId automatically
-            // Then update state to start monitoring that modal from condo side
-            bridge
-                .send('CondoWebAppShowModalWindow', { url: uploadUrl, size: 'big', title: '' })
-                .then(data => setUploadModalId(data.modalId))
-                .catch(console.error)
-        }
-    }, [uploadUrl])
-
-    useEffect(() => {
-        if (uploadModalId) {
-            const handleClose: CondoBridgeSubscriptionListener = (event) => {
-                if (event.type !== 'CondoWebAppCloseModalWindowResult' ||
-                    event.data.requestId ||
-                    !('modalId' in event.data) ||
-                    event.data.modalId !== uploadModalId) {
-                    return
-                }
-                setUploadModalId(null)
-                refetchBilling()
-            }
-            bridge.subscribe(handleClose)
-
-            return () => bridge.unsubscribe(handleClose)
-        }
-    }, [uploadModalId, refetchBilling])
-
-    const UploadAction = useMemo(() => {
-        if (!uploadUrl || !canImportBillingReceipts) {
-            return null
-        }
-
-        return (
-            <Button type='primary' onClick={handleUploadClick}>
-                {uploadMessage || DefaultUploadMessage}
-            </Button>
-        )
-    }, [uploadUrl, canImportBillingReceipts, handleUploadClick, uploadMessage, DefaultUploadMessage])
-
     if (!canReadBillingReceipts && !canReadPayments) {
         return <AccessDeniedPage />
     }
@@ -90,12 +48,10 @@ export const BillingPageContent: React.FC = () => {
             <Head>
                 <title>{PageTitle}</title>
             </Head>
-            <PageWrapper>
+            <StyledPageWrapper>
                 <PageHeader title={<Typography.Title>{PageTitle}</Typography.Title>} extra={<Tag bgColor={tagBg} textColor={colors.white}>{tagMessage}</Tag>}/>
-                <TablePageContent>
-                    <MainContent uploadComponent={UploadAction}/>
-                </TablePageContent>
-            </PageWrapper>
+                <MainContent />
+            </StyledPageWrapper>
         </>
     )
 }
diff --git a/apps/condo/domains/common/components/Table/Renders.tsx b/apps/condo/domains/common/components/Table/Renders.tsx
@@ -11,14 +11,14 @@ import isString from 'lodash/isString'
 import React from 'react'
 
 import { IconProps } from '@open-condo/icons'
-import { Tag, TypographyLinkProps } from '@open-condo/ui'
+import { Space, Tag, TypographyLinkProps } from '@open-condo/ui'
 import { colors } from '@open-condo/ui/dist/colors'
 
 import { PAYMENT_WITHDRAWN_STATUS } from '@condo/domains/acquiring/constants/payment'
 import { EmptyTableCell } from '@condo/domains/common/components/Table/EmptyTableCell'
 import { TTextHighlighterRenderPartFN } from '@condo/domains/common/components/TextHighlighter'
 import { TextHighlighter, TTextHighlighterProps } from '@condo/domains/common/components/TextHighlighter'
-import { Tooltip } from '@condo/domains/common/components/Tooltip'
+import { Tooltip, TooltipProps } from '@condo/domains/common/components/Tooltip'
 import { LOCALES } from '@condo/domains/common/constants/locale'
 import { ELLIPSIS_ROWS } from '@condo/domains/common/constants/style'
 import { getAddressDetails } from '@condo/domains/common/utils/helpers'
@@ -141,10 +141,12 @@ type GetTableCellRendererType = (props?: {
     extraHighlighterProps?: Partial<TTextHighlighterProps>
     extraPostfixProps?: TextProps
     extraTitle?: string
+    extraTooltipProps?: TooltipProps
     href?: string
     target?: TypographyLinkProps['target']
     underline?: boolean
     Icon?: React.FC<IconProps>
+    iconProps?: IconProps
 }) => (text?: string) => React.ReactElement
 
 /**
@@ -156,10 +158,12 @@ type GetTableCellRendererType = (props?: {
  * @param extraHighlighterProps
  * @param extraPostfixProps
  * @param extraTitle
+ * @param extraTooltipProps
  * @param href
  * @param target
  * @param underline
  * @param Icon
+ * @param iconProps
  * @return cell contents renderer fn
  */
 export const getTableCellRenderer: GetTableCellRendererType = ({
@@ -169,10 +173,12 @@ export const getTableCellRenderer: GetTableCellRendererType = ({
     extraHighlighterProps,
     extraPostfixProps,
     extraTitle,
+    extraTooltipProps,
     href,
     underline,
     target,
     Icon,
+    iconProps,
 } = {}) =>
     (text) => {
         const title = getTitleMessage({ text, extraTitle, postfix })
@@ -186,26 +192,26 @@ export const getTableCellRenderer: GetTableCellRendererType = ({
 
         const ellipsisConfig = isBoolean(ellipsis) ? ELLIPSIS_SETTINGS : ellipsis
 
-        const cellContent = text ? (
+        const cellContent = text && (
             !ellipsis
                 ? highlightedContent
                 : (
                     <Typography.Paragraph ellipsis={ellipsisConfig} style={ELLIPSIS_STYLES}>
                         {highlightedContent}
                     </Typography.Paragraph>
                 )
-        ) : Icon && <Icon className='icon'/>
-
+        )
         // NOTE Tooltip -> span -> content
         // This hack (span) is needed for tooltip to appear
 
         return (
-            <Tooltip title={title}>
+            <Tooltip title={title} {...extraTooltipProps}>
                 <span>
                     {
                         href
                             ? renderLink(cellContent, href, underline, target)
-                            : cellContent
+                            : Icon ? <Space size={8}><Icon {...iconProps} className={`${iconProps ? '' : 'icon'}`}/>{cellContent}</Space>
+                                : cellContent
                     }
                 </span>
             </Tooltip>

diff --git a/apps/condo/domains/common/components/Tooltip.tsx b/apps/condo/domains/common/components/Tooltip.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 
 import { colors } from '../constants/style'
 
-type TooltipProps = DefaultTooltipProps & { textColor?: string }
+export type TooltipProps = DefaultTooltipProps & { textColor?: string }
 const MOUSE_ENTER_DELAY_IN_SECONDS = 0.15
 
 /** @deprecated use Tooltip from @open-condo/ui **/

diff --git a/apps/condo/lang/en/en.json b/apps/condo/lang/en/en.json
@@ -2542,6 +2542,7 @@
   "pages.billing.NoBilling.button": "View list of integrations",
   "pages.billing.ReceiptsTable.PDFTooltip": "View PDF-receipt",
   "pages.billing.ReceiptsTable.loadRegistry.button": "Load registry",
+  "pages.billing.registry.uploadPage.title": "Registry upload",
   "pages.billing.Status.success.title": "Payments from individuals are enabled",
   "WillBeReadySoon": "Everything will be ready soon",
   "Accruals": "Accruals",

diff --git a/apps/condo/lang/ru/ru.json b/apps/condo/lang/ru/ru.json
@@ -2542,6 +2542,7 @@
   "pages.billing.NoBilling.button": "Посмотреть список интеграций",
   "pages.billing.ReceiptsTable.PDFTooltip": "Посмотреть PDF-квитанцию",
   "pages.billing.ReceiptsTable.loadRegistry.button": "Загрузить реестр",
+  "pages.billing.registry.uploadPage.title": "Загрузка нового реестра",
   "pages.billing.Status.success.title": "Платежи от физлиц подключены",
   "WillBeReadySoon": "Скоро всё будет готово",
   "Accruals": "Начисления",

diff --git a/apps/registry b/apps/registry
diff --git a/packages/ui/src/components/ActionBar/actionBar.tsx b/packages/ui/src/components/ActionBar/actionBar.tsx
@@ -11,15 +11,16 @@ const SPACE_SIZE: SpaceProps['size'] = [16, 16]
 
 export type ActionBarProps = {
     message?: string
+    wrap?: boolean
     actions: [ReactElement, ...ReactElement[]]
 }
 
 export const ActionBar: React.FC<ActionBarProps> = (props) => {
-    const { actions, message } = props
+    const { actions, message, wrap = true } = props
 
     return (
         <Affix offsetBottom={0} prefixCls={ACTION_BAR_CLASS_PREFIX}>
-            <Space wrap size={SPACE_SIZE} className={AFFIX_CONTENT_WRAPPER_CLASS}>
+            <Space wrap={wrap} size={SPACE_SIZE} className={AFFIX_CONTENT_WRAPPER_CLASS}>
                 {message && <Typography.Text strong>{message}</Typography.Text>}
                 {actions}
             </Space>