Added premium features notification (cvat-ai#5812)

<!-- Raise an issue to propose your change
(https://github.com/opencv/cvat/issues).
It helps to avoid duplication of efforts from multiple independent
contributors.
Discuss your ideas with maintainers to be sure that changes will be
approved and merged.
Read the [Contribution
guide](https://opencv.github.io/cvat/docs/contributing/). -->

<!-- Provide a general summary of your changes in the Title above -->

### Motivation and context
<!-- Why is this change required? What problem does it solve? If it
fixes an open
issue, please link to the issue here. Describe your changes in detail,
add
screenshots. -->

### How has this been tested?
<!-- Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc. -->

### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable for some reason, then ~~explicitly
strikethrough~~ the whole
line. If you don't do that, GitHub will show incorrect progress for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [ ] I submit my changes into the `develop` branch
- [ ] I have added a description of my changes into the
[CHANGELOG](https://github.com/opencv/cvat/blob/develop/CHANGELOG.md)
file
- [ ] I have updated the documentation accordingly
- [ ] I have added tests to cover my changes
- [ ] I have linked related issues (see [GitHub docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))
- [ ] I have increased versions of npm packages if it is necessary

([cvat-canvas](https://github.com/opencv/cvat/tree/develop/cvat-canvas#versioning),

[cvat-core](https://github.com/opencv/cvat/tree/develop/cvat-core#versioning),

[cvat-data](https://github.com/opencv/cvat/tree/develop/cvat-data#versioning)
and

[cvat-ui](https://github.com/opencv/cvat/tree/develop/cvat-ui#versioning))

### License

- [ ] I submit _my code changes_ under the same [MIT License](
https://github.com/opencv/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.

Author: klakhov

cvat-core/src/api-implementation.ts

@@ -86,6 +86,11 @@ export default function implementAPI(cvat) {
         await serverProxy.server.logout();
     };
 
+    cvat.server.hasLimits.implementation = async (userId, orgId) => {
+        const result = await serverProxy.server.hasLimits(userId, orgId);
+        return result;
+    };
+
     cvat.server.socialAuthentication.implementation = async () => {
         const result: SocialAuthMethodsRawType = await serverProxy.server.socialAuthentication();
         return Object.entries(result).map(([provider, value]) => new SocialAuthMethod({ ...value, provider }));

cvat-core/src/api.ts

@@ -77,6 +77,10 @@ function build() {
                 const result = await PluginRegistry.apiWrapper(cvat.server.logout);
                 return result;
             },
+            async hasLimits(userId, orgId) {
+                const result = await PluginRegistry.apiWrapper(cvat.server.hasLimits, userId, orgId);
+                return result;
+            },
             async socialAuthentication() {
                 const result = await PluginRegistry.apiWrapper(cvat.server.socialAuthentication);
                 return result;

cvat-core/src/server-proxy.ts

@@ -262,6 +262,10 @@ Axios.interceptors.request.use((reqConfig) => {
         return reqConfig;
     }
 
+    if (reqConfig.url.endsWith('/limits')) {
+        return reqConfig;
+    }
+
     reqConfig.params = { ...organization, ...(reqConfig.params || {}) };
     return reqConfig;
 });
@@ -498,6 +502,25 @@ async function getSelf(): Promise<SerializedUser> {
     return response.data;
 }
 
+async function hasLimits(userId: number, orgId: number): Promise<boolean> {
+    const { backendAPI } = config;
+
+    try {
+        const response = await Axios.get(`${backendAPI}/limits`, {
+            params: {
+                ...(orgId ? { org_id: orgId } : { user_id: userId }),
+            },
+        });
+        return response.data?.count !== 0;
+    } catch (serverError) {
+        if (serverError.code === 404) {
+            return false;
+        }
+
+        throw serverError;
+    }
+}
+
 async function authorized(): Promise<boolean> {
     try {
         // In CVAT app we use two types of authentication
@@ -2373,6 +2396,7 @@ export default Object.freeze({
         installedApps,
         loginWithSocialAccount,
         selectSSOIdentityProvider,
+        hasLimits,
     }),
 
     projects: Object.freeze({

cvat-ui/index.d.ts

@@ -5,4 +5,5 @@
 import 'redux-thunk/extend-redux';
 
 declare module '*.svg';
+declare module '*.png';
 declare module 'cvat-core/src/api';

cvat-ui/src/assets/paid-features-preview.png

@@ -75,6 +75,7 @@ import EmailConfirmationPage from './email-confirmation-pages/email-confirmed';
 import EmailVerificationSentPage from './email-confirmation-pages/email-verification-sent';
 import IncorrectEmailConfirmationPage from './email-confirmation-pages/incorrect-email-confirmation';
 import CreateModelPage from './create-model-page/create-model-page';
+import PremiumFeaturesModal from './premium-features-modal/premium-features-modal';
 
 interface CVATAppProps {
     loadFormats: () => void;
@@ -398,6 +399,8 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
             isModelPluginActive,
         } = this.props;
 
+        const { CVAT_BILLING_URL } = appConfig;
+
         const { healthIinitialized, backendIsHealthy } = this.state;
 
         const notRegisteredUserInitialized = (userInitialized && (user == null || !user.isVerified));
@@ -493,6 +496,7 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
                                     <ExportBackupModal />
                                     <ImportDatasetModal />
                                     <ImportBackupModal />
+                                    { CVAT_BILLING_URL && <PremiumFeaturesModal /> }
                                     {/* eslint-disable-next-line */}
                                     <a id='downloadAnchor' target='_blank' style={{ display: 'none' }} download />
                                 </Layout.Content>

cvat-ui/src/components/cvat-app.tsx

@@ -0,0 +1,103 @@
+// Copyright (C) 2023 CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { CombinedState } from 'reducers';
+import Typography from 'antd/es/typography';
+import Modal from 'antd/lib/modal';
+import { Col, Row } from 'antd/lib/grid';
+import Switch from 'antd/lib/switch';
+import Button from 'antd/lib/button';
+import Space from 'antd/lib/space';
+import { getCore } from 'cvat-core-wrapper';
+import PaidFeaturesPreviewImage from 'assets/paid-features-preview.png';
+import moment from 'moment';
+import config from 'config';
+import './styles.scss';
+
+const core = getCore();
+const { CVAT_BILLING_URL } = config;
+
+export default function PremiumFeaturesModal(): JSX.Element {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [dontShowAgainToday, setDontShowAgainToday] = useState(localStorage.getItem('paidNotificationShown') === moment().format('YYYY-MM-DD'));
+    const organization = useSelector((state: CombinedState) => state.organizations.current);
+    const user = useSelector((state: CombinedState) => state.auth.user);
+
+    const closeModal = useCallback((): void => {
+        if (dontShowAgainToday) {
+            const now = moment().format('YYYY-MM-DD');
+            localStorage.setItem('paidNotificationShown', now);
+        }
+        setIsModalOpen(false);
+    }, [dontShowAgainToday]);
+
+    const openBillingPage = useCallback((): void => {
+        const params = organization?.id ? `/?type=organization&orgId=${organization.id}` : '/?type=personal';
+        const billingURL = `${CVAT_BILLING_URL}${params}`;
+        window.open(billingURL, '_self');
+    }, []);
+
+    useEffect(() => {
+        if (!dontShowAgainToday) {
+            core.server.hasLimits(user.id, organization?.id).then((hasLimits: boolean) => {
+                if (!hasLimits && !user.isSuperuser && !user.isStaff) {
+                    setIsModalOpen(true);
+                }
+            });
+        }
+    }, [user, organization]);
+
+    return (
+        <>
+            <Modal
+                className='cvat-paid-features-notification'
+                visible={isModalOpen}
+                onCancel={closeModal}
+                closable={false}
+                width={725}
+                footer={(
+                    <Row justify='space-between'>
+                        <Col className='cvat-paid-features-notification-dont-show'>
+                            <Switch onChange={(checked: boolean) => setDontShowAgainToday(checked)} />
+                            <Typography.Text>Don&apos;t show again today</Typography.Text>
+                        </Col>
+                        <Col>
+                            <Button onClick={closeModal}>
+                                Close
+                            </Button>
+                            <Button
+                                type='primary'
+                                onClick={openBillingPage}
+                            >
+                                Check premium features
+                            </Button>
+                        </Col>
+                    </Row>
+                )}
+            >
+                <img src={PaidFeaturesPreviewImage} alt='paid-features-preview' />
+                <Row className='cvat-paid-features-notification-description' justify='space-between'>
+                    <Col className='cvat-paid-features-notification-description-title' span={8}>
+                        <Typography.Title level={3}>Enhance your experience with premium features</Typography.Title>
+                    </Col>
+                    <Col className='cvat-paid-features-notification-description-details' span={14}>
+                        <Space direction='vertical' size='small'>
+                            <Typography.Text>
+                                We&apos;ve added premium features designed to enhance your experience and productivity.
+                                These features include advanced analytics and reporting, automated annotation,
+                                better user management, and increased storage capacity.
+                            </Typography.Text>
+                            <Typography.Text>
+                                In order to access these features, you need to subscribe to our paid plan.
+                            </Typography.Text>
+                        </Space>
+                    </Col>
+                </Row>
+                <Row />
+            </Modal>
+        </>
+    );
+}

cvat-ui/src/components/premium-features-modal/premium-features-modal.tsx

@@ -0,0 +1,46 @@
+// Copyright (C) 2023 CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+@import '../../base.scss';
+
+.cvat-paid-features-notification {
+    width: $grid-unit-size * 40;
+    height: $grid-unit-size * 20;
+
+    img {
+        max-width: 100%;
+        max-height: 100%;
+    }
+
+    .ant-modal-body {
+        padding: 0;
+    }
+
+    .ant-modal-footer {
+        border: none;
+        padding: $grid-unit-size * 4;
+
+        .cvat-paid-features-notification-dont-show {
+            margin-top: $grid-unit-size;
+
+            .ant-switch {
+                margin-right: $grid-unit-size * 2;
+            }
+        }
+    }
+
+    .cvat-paid-features-notification-description {
+        padding: $grid-unit-size * 6 $grid-unit-size * 4;
+    }
+
+    .cvat-paid-features-notification-description-title {
+        h3 {
+            font-size: 26px;
+        }
+    }
+
+    .cvat-paid-features-notification-description-details {
+        font-size: 13px;
+    }
+}

cvat-ui/src/components/premium-features-modal/styles.scss

@@ -121,6 +121,10 @@ module.exports = (env) => {
                         },
                     ],
                 },
+                {
+                    test: /\.(png|jpg|jpeg|gif)$/i,
+                    type: 'asset/resource',
+                },
                 {
                     test: /3rdparty\/.*\.worker\.js$/,
                     use: {