Update integration

packages/aesirx-cmp-admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aesirx-cmp-admin",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "GPL-3.0-only",
   "author": "AesirX",
   "main": "dist/index.js",

packages/aesirx-cmp-admin/src/integration/index.js

@@ -0,0 +1,5 @@
+export { default as BiIntegration } from './lib/MainLayoutIntegration';
+export { appLanguages } from '../translations';
+export { BiStoreProvider } from '../store/BiStore/BiViewModelContextProvider';
+export { BiViewModel } from '../store/BiStore/BiViewModel';
+export { DataStream } from '../components/DataStream';

packages/aesirx-cmp-admin/src/integration/lib/MainLayoutIntegration.jsx

@@ -0,0 +1,226 @@
+/*
+ * @copyright   Copyright (C) 2022 AesirX. All rights reserved.
+ * @license     GNU General Public License version 3, see LICENSE.
+ */
+
+import React, { lazy, Suspense, useEffect, useState } from 'react';
+
+import { BiStoreProvider, useBiViewModel } from '../../store/BiStore/BiViewModelContextProvider';
+import { BiViewModel } from '../../store/BiStore/BiViewModel';
+import 'scss/app.scss';
+
+import { observer } from 'mobx-react';
+import { Spinner, LoginPage } from 'aesirx-uikit';
+import { AppProvider } from 'aesirx-uikit';
+import { authRoutes, mainRoutes } from '../../routes/routes';
+import { DataStream } from '../../components/DataStream';
+import { appLanguages } from '../../translations';
+import SbarLeftIntegration from './SbarLeftIntegration';
+import { env, Storage } from 'aesirx-lib';
+import { freemiumMainMenu, getMainMenu } from 'routes/menu';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useTranslation } from 'react-i18next';
+import { Dropdown } from 'react-bootstrap';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+
+const ConsentsPage = lazy(() => import('../../containers/ConsentsPage'));
+const ConsentsTemplatePage = lazy(() => import('../../containers/ConsentsTemplatePage'));
+const ConsentsAdvancePage = lazy(() => import('../../containers/ConsentsAdvancePage'));
+
+const biViewModel = new BiViewModel();
+
+const MainLayoutIntegration = (props) => {
+  const isAuthenticated = Storage.getItem('auth');
+  const isFreemium = props?.isFreemium ?? true;
+  return (
+    <BiStoreProvider viewModel={biViewModel}>
+      <AppProvider
+        appLanguages={appLanguages}
+        authRoutes={authRoutes}
+        mainRoutes={mainRoutes}
+        isLogin={() => true}
+        componentHeader={<DataStream integration={true} />}
+        integration={true}
+        isFreemium={isFreemium}
+        leftMenu={<SbarLeftIntegration isFreemium={isFreemium} />}
+        rootId="#biapp"
+        noavatar={true}
+        isColorMode={false}
+      >
+        <div className="bi-intergration_layout">
+          {!isAuthenticated && window.env.STORAGE === 'external' ? (
+            <LoginPage text="BI" />
+          ) : (
+            <App {...props} integration={true} isFreemium={isFreemium} />
+          )}
+        </div>
+      </AppProvider>
+    </BiStoreProvider>
+  );
+};
+
+String.prototype.startsWith = function (str) {
+  return this.indexOf(str) === 0;
+};
+
+const RenderComponent = ({ link, ...props }) => {
+  const isFreemium = props?.isFreemium ?? true;
+
+  if (isFreemium && ['consents-advance'].includes(link)) {
+    return <ConsentsPage {...props} />;
+  }
+
+  switch (link) {
+    case 'consents':
+      return <ConsentsPage {...props} />;
+
+    case 'consents-template':
+      return <ConsentsTemplatePage {...props} />;
+
+    case 'consents-advance':
+      return <ConsentsAdvancePage {...props} />;
+
+    default:
+      return <ConsentsPage {...props} />;
+  }
+};
+const App = observer((props) => {
+  const {
+    biListViewModel: { integrationLink, activeDomain, setIntegrationLink },
+  } = useBiViewModel();
+  const { t } = useTranslation();
+  const [menuList, setMenuList] = useState(getMainMenu(false));
+
+  const handleChangeLink = (e, link) => {
+    e.preventDefault();
+    if (link) {
+      setIntegrationLink(link);
+    }
+  };
+
+  useEffect(() => {
+    if (props?.isFreemium) {
+      setMenuList(freemiumMainMenu);
+    }
+  }, [props?.isFreemium]);
+
+  return (
+    <Suspense fallback={<Spinner />}>
+      {menuList ? (
+        <div className="menu_intergration d-flex flex-wrap mt-2 mx-4">
+          {menuList?.map((menuList, menuListKey) => {
+            return (
+              <div key={menuListKey} className={`item_menu mb-0 intergration`}>
+                {menuList?.link && (
+                  <>
+                    {menuList?.submenu ? (
+                      <NavHoverDropDown>
+                        <Dropdown.Toggle
+                          className={`d-flex align-items-center me-3 px-4 py-10 mb-1 text-decoration-none fw-medium border rounded-pill bg-white text-primary ${
+                            integrationLink === menuList.page ? 'active' : ''
+                          }`}
+                        >
+                          {menuList?.icons_fa ? (
+                            <i>
+                              <FontAwesomeIcon icon={menuList?.icons_fa} />
+                            </i>
+                          ) : (
+                            <span
+                              className="icon d-inline-block align-text-bottom me-2"
+                              style={{
+                                WebkitMaskImage: `url(${menuList?.icons_color})`,
+                                WebkitMaskRepeat: 'no-repeat',
+                                backgroundColor: '#222328',
+                              }}
+                            ></span>
+                          )}
+                          <span className="text d-inline-block fs-sm">{t(menuList?.text)}</span>
+                          <i className="ps-1 icons text-primary mt-n1">
+                            <FontAwesomeIcon icon={faChevronDown} />
+                          </i>
+                        </Dropdown.Toggle>
+
+                        <Dropdown.Menu className="dropdown-menu border py-0 mt-2">
+                          {menuList?.submenu?.map((submenuList, submenuListKey) => {
+                            return (
+                              <div
+                                key={submenuListKey}
+                                className={`subitem_menu text px-3 fs-sm cursor-pointer ${
+                                  integrationLink === submenuList.page ? 'active' : ''
+                                }`}
+                                onClick={(e) => handleChangeLink(e, submenuList?.page)}
+                              >
+                                <div className="w-100 py-2 border-bottom">
+                                  {t(submenuList?.text)}
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </Dropdown.Menu>
+                      </NavHoverDropDown>
+                    ) : (
+                      <a
+                        href={`${menuList?.page === 'cmp' ? `${env.REACT_APP_CMP_LINK}` : '#'} `}
+                        {...(menuList?.page === 'cmp' ? { target: '_blank' } : {})}
+                        onClick={(e) => {
+                          if (menuList?.page !== 'cmp') {
+                            handleChangeLink(e, menuList?.page);
+                          }
+                        }}
+                        className={`d-flex align-items-center me-3 px-4 py-10 text-decoration-none fw-medium border rounded-pill ${
+                          integrationLink === menuList.page ? 'active' : ''
+                        } ${menuList?.page === 'cmp' && !env.REACT_APP_CMP_LINK ? 'd-none' : ''}`}
+                      >
+                        {menuList?.icons_fa ? (
+                          <i>
+                            <FontAwesomeIcon icon={menuList?.icons_fa} />
+                          </i>
+                        ) : (
+                          <span
+                            className="icon d-inline-block align-text-bottom me-2"
+                            style={{
+                              WebkitMaskImage: `url(${menuList?.icons_color})`,
+                              WebkitMaskRepeat: 'no-repeat',
+                              backgroundColor: '#222328',
+                            }}
+                          ></span>
+                        )}
+                        <span className="text d-inline-block fs-sm">{t(menuList?.text)}</span>
+                      </a>
+                    )}
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <></>
+      )}
+      <RenderComponent link={integrationLink} activeDomain={activeDomain} {...props} />
+    </Suspense>
+  );
+});
+
+const NavHoverDropDown = (props) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const handleMouseOver = () => {
+    setDropdownOpen(true);
+  };
+  const handleMouseOut = () => {
+    setDropdownOpen(false);
+  };
+  return (
+    <Dropdown
+      className="pb-2"
+      autoClose="outside"
+      show={dropdownOpen}
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+    >
+      {props.children}
+    </Dropdown>
+  );
+};
+
+export default MainLayoutIntegration;