diff --git a/ui_src/src/assets/images/documentIcon.svg b/ui_src/src/assets/images/documentIcon.svg deleted file mode 100644 index 0fe6184ff..000000000 --- a/ui_src/src/assets/images/documentIcon.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/ui_src/src/assets/images/documentIconColor.svg b/ui_src/src/assets/images/documentIconColor.svg deleted file mode 100644 index 1f0264328..000000000 --- a/ui_src/src/assets/images/documentIconColor.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/ui_src/src/assets/images/supportIcon.svg b/ui_src/src/assets/images/supportIcon.svg index abccd9eab..f6565c82e 100644 --- a/ui_src/src/assets/images/supportIcon.svg +++ b/ui_src/src/assets/images/supportIcon.svg @@ -1,3 +1,3 @@ - + diff --git a/ui_src/src/assets/images/supportIconColor.svg b/ui_src/src/assets/images/supportIconColor.svg index e2e063916..8d2b92d63 100644 --- a/ui_src/src/assets/images/supportIconColor.svg +++ b/ui_src/src/assets/images/supportIconColor.svg @@ -1,3 +1,3 @@ - + diff --git a/ui_src/src/components/sideBar/index.js b/ui_src/src/components/sideBar/index.js index b33b92caa..9b514459c 100644 --- a/ui_src/src/components/sideBar/index.js +++ b/ui_src/src/components/sideBar/index.js @@ -16,7 +16,6 @@ import React, { useCallback, useContext, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; import { Divider, Popover } from 'antd'; import { SettingOutlined, ExceptionOutlined } from '@ant-design/icons'; -import { Link } from 'react-router-dom'; import ExitToAppOutlined from '@material-ui/icons/ExitToAppOutlined'; import PersonOutlinedIcon from '@material-ui/icons/PersonOutlined'; import { LOCAL_STORAGE_AVATAR_ID, LOCAL_STORAGE_COMPANY_LOGO, LOCAL_STORAGE_FULL_NAME, LOCAL_STORAGE_USER_NAME } from '../../const/localStorageConsts'; @@ -32,35 +31,41 @@ import schemaIcon from '../../assets/images/schemaIcon.svg'; import usersIcon from '../../assets/images/usersIcon.svg'; import logsIcon from '../../assets/images/logsIcon.svg'; import functionsIcon from '../../assets/images/functionsIcon.svg'; -import documentationIcon from '../../assets/images/documentIcon.svg'; -import documentationIconColor from '../../assets/images/documentIconColor.svg'; import integrationIcon from '../../assets/images/integrationIcon.svg'; import integrationIconColor from '../../assets/images/integrationIconColor.svg'; import supportIcon from '../../assets/images/supportIcon.svg'; import supportIconColor from '../../assets/images/supportIconColor.svg'; - import { ApiEndpoints } from '../../const/apiEndpoints'; import { httpRequest } from '../../services/http'; import Logo from '../../assets/images/logo.svg'; import AuthService from '../../services/auth'; import { Context } from '../../hooks/store'; import pathDomains from '../../router'; -import { DOC_URL, LATEST_RELEASE_URL } from '../../config'; +import { LATEST_RELEASE_URL } from '../../config'; import { compareVersions, isCloud } from '../../services/valueConvertor'; import Spinner from '../spinner'; +import Support from './support'; const overlayStyles = { borderRadius: '8px', width: '230px', paddingTop: '5px', - paddingBottom: '5px' + paddingBottom: '5px', + marginBottom: '10px' +}; +const overlayStylesSupport = { + borderRadius: '8px', + width: '380px', + padding: '15px', + marginBottom: '10px' }; function SideBar() { const [state, dispatch] = useContext(Context); const history = useHistory(); const [avatarUrl, SetAvatarUrl] = useState(require('../../assets/images/bots/avatar1.svg')); - const [popoverOpen, setPopoverOpen] = useState(false); + const [popoverOpenSetting, setPopoverOpenSetting] = useState(false); + const [popoverOpenSupport, setPopoverOpenSupport] = useState(false); const [hoveredItem, setHoveredItem] = useState(''); const [logoutLoader, setLogoutLoader] = useState(false); const getCompanyLogo = useCallback(async () => { @@ -122,7 +127,7 @@ function SideBar() { } }; - const content = ( + const contentSetting = (
@@ -148,7 +153,7 @@ function SideBar() { className="item-wrap" onClick={() => { history.push(pathDomains.profile); - setPopoverOpen(false); + setPopoverOpenSetting(false); }} >
@@ -162,7 +167,7 @@ function SideBar() { className="item-wrap" onClick={() => { history.push(`${pathDomains.administration}/integrations`); - setPopoverOpen(false); + setPopoverOpenSetting(false); }} >
@@ -177,7 +182,7 @@ function SideBar() { className="item-wrap" onClick={() => { history.push(`${pathDomains.administration}/usage`); - setPopoverOpen(false); + setPopoverOpenSetting(false); }} >
@@ -297,25 +302,43 @@ function SideBar() {
- {/*
setHoveredItem('support')} onMouseLeave={() => setHoveredItem('')}> - - -
*/} - + {isCloud && ( + setPopoverOpenSupport(e)} />} + trigger="click" + onOpenChange={() => setPopoverOpenSupport(!popoverOpenSupport)} + open={popoverOpenSupport} + > +
setHoveredItem('support')} + onMouseLeave={() => setHoveredItem('')} + onClick={() => setPopoverOpenSupport(true)} + > + + +
+ + )} + + {/*
setHoveredItem('documentation')} onMouseLeave={() => setHoveredItem('')}>
- + */} + setPopoverOpen(!popoverOpen)} - open={popoverOpen} + onOpenChange={() => setPopoverOpenSetting(!popoverOpenSetting)} + open={popoverOpenSetting} > -
setPopoverOpen(true)}> +
setPopoverOpenSetting(true)}> { + const [severity, setSeverity] = useState('Critical (Cannot produce or consume data)'); + const [textInfo, setTextInfo] = useState(''); + const [loader, setLoader] = useState(false); + + const clearValues = () => { + setSeverity('Critical (Cannot produce or consume data)'); + setTextInfo(''); + }; + + const sendSupport = async () => { + setLoader(true); + const severityValue = severity.split(' ')[0].toLowerCase(); + try { + await httpRequest('POST', `${ApiEndpoints.SEND_SUPPORT}`, { + severity: severityValue, + details: textInfo + }); + clearValues(); + setLoader(false); + closeModal(false); + } catch (error) { + setLoader(false); + return; + } + }; + + return ( +
+
+
+ +
+

Need Support?

+ +

If you have any questions or need assistance, please don't hesitate to reach out to our support team.

+
+
+

Link to Documentation

+ + Documentation + +
+
+

Contact Email

+ +
+
+
+

Severity

+ { + setSeverity(value); + }} + iconColor="gray" + popupClassName="message-option" + /> +

More information

+ setTextInfo(e.target.value)} + onChange={(e) => setTextInfo(e.target.value)} + /> +
+
+
+
+
+ ); +}; + +export default Support; diff --git a/ui_src/src/const/apiEndpoints.js b/ui_src/src/const/apiEndpoints.js index 58fda6aa9..01e2b70da 100644 --- a/ui_src/src/const/apiEndpoints.js +++ b/ui_src/src/const/apiEndpoints.js @@ -97,5 +97,6 @@ export const ApiEndpoints = { GET_BILLING_DETAILS: '/billing/getBill', RESEND_INVITATION: '/usermgmt/resendInvitation', REVOKED_INVITATION: '/usermgmt/revokeInvitation', - SIGN_OUT: '/usermgmt/signOut' + SIGN_OUT: '/usermgmt/signOut', + SEND_SUPPORT: '/usermgmt/sendSupportRequest' }; diff --git a/ui_src/src/domain/administration/billing/requests/index.js b/ui_src/src/domain/administration/billing/requests/index.js index e7edca6d6..81bb51a29 100644 --- a/ui_src/src/domain/administration/billing/requests/index.js +++ b/ui_src/src/domain/administration/billing/requests/index.js @@ -123,9 +123,7 @@ function Requests() { data in - {usageData && ( - - )} +
@@ -133,16 +131,17 @@ function Requests() { data in - {usageData && ( - - )} + +
data in - - {usageData && } + +
@@ -152,9 +151,9 @@ function Requests() { data out - {usageData && ( - - )} +
@@ -162,16 +161,16 @@ function Requests() { data out - {usageData && ( - - )} +
data out - - {usageData && } + +
@@ -193,7 +192,10 @@ function Requests() {

Total Payment

{displayMonth && genetrateSentence()}

 - + + +

*

+
@@ -215,6 +217,9 @@ function Requests() {

Total price

${usageData?.total_price_after_discount?.toLocaleString('en-US')}

 + +

*Please note that the pricing is not final

+
diff --git a/ui_src/src/domain/administration/billing/requests/style.scss b/ui_src/src/domain/administration/billing/requests/style.scss index f74708c56..919b5d3af 100644 --- a/ui_src/src/domain/administration/billing/requests/style.scss +++ b/ui_src/src/domain/administration/billing/requests/style.scss @@ -177,6 +177,9 @@ .total-payment-header { display: flex; justify-content: space-between; + .price-val-star { + display: flex; + } .total-ammount { margin: 0; font-family: 'InterSemiBold'; @@ -201,6 +204,12 @@ margin: 0; color: #84818a; } + .pricing-disclaimer { + margin: 0; + color: #84818a; + font-size: 11px; + font-weight: 500; + } .ammount { margin: 0; color: #2e2c34; diff --git a/ui_src/src/domain/users/createUserDetails/index.js b/ui_src/src/domain/users/createUserDetails/index.js index 4c0264b5e..af0188a46 100644 --- a/ui_src/src/domain/users/createUserDetails/index.js +++ b/ui_src/src/domain/users/createUserDetails/index.js @@ -290,17 +290,26 @@ const CreateUserDetails = ({ createUserRef, closeModal, handleLoader }) => {

Type password*

@#$%])[A-Za-z\d!?\-<>@#$%]{8,}$/, - message: - 'Password must be at least 8 characters long, contain both uppercase and lowercase, and at least one number and one special character' - } - ]} + rules={ + isCloud() + ? [ + { + required: true, + message: 'Password can not be empty' + }, + { + pattern: /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!?\-<>@#$%])[A-Za-z\d!?\-<>@#$%]{8,}$/, + message: + 'Password must be at least 8 characters long, contain both uppercase and lowercase, and at least one number and one special character' + } + ] + : [ + { + required: true, + message: 'Password can not be empty' + } + ] + } >