EPMRPP-82712 || Add events for feature Help and Support (#3634)

* EPMRPP-82712 || Add events for feature Help and Support

* EPMRPP-82712 || Code Review fix - 1

app/src/components/main/analytics/events/ga4Events/helpAndSupportEvents.js

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2023 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getBasicClickEventParameters, getBasicChooseEventParameters } from '../common/ga4Utils';
+
+const HELP_AND_SUPPORT = 'help_and_support';
+
+export const HELP_AND_SUPPORT_EVENTS = {
+  CLICK_HELP_AND_SUPPORT_BUTTON: {
+    ...getBasicClickEventParameters(HELP_AND_SUPPORT),
+    place: 'sidebar',
+    element_name: 'help_and_support',
+  },
+
+  CLICK_REQUEST_SUPPORT_BUTTON: {
+    ...getBasicClickEventParameters(HELP_AND_SUPPORT),
+    modal: 'help_and_support',
+    element_name: 'request_support',
+  },
+
+  CLICK_ON_SUPPORT_LINK: (linkName) => ({
+    ...getBasicClickEventParameters(HELP_AND_SUPPORT),
+    modal: 'help_and_support',
+    link_name: linkName,
+  }),
+
+  CLICK_SEND_REQUEST_SUPPORT_BUTTON: {
+    ...getBasicClickEventParameters(HELP_AND_SUPPORT),
+    modal: 'request_support',
+    element_name: 'send',
+  },
+
+  CHOOSE_INSTRUCTION_BUTTON: (typeName) => ({
+    ...getBasicChooseEventParameters(HELP_AND_SUPPORT),
+    modal: 'help_and_support',
+    element_name: 'instruction',
+    type: typeName,
+  }),
+
+  CLICK_ASK_A_QUESTION_BUTTON: {
+    ...getBasicClickEventParameters(HELP_AND_SUPPORT),
+    modal: 'help_and_support',
+    element_name: 'ask_a_question',
+  },
+};

app/src/components/main/analytics/events/index.js

@@ -21,12 +21,7 @@ export {
 } from './filtersPageEvents';
 export { LAUNCHES_PAGE_EVENTS, LAUNCHES_MODAL_EVENTS, LAUNCHES_PAGE } from './launchesPageEvents';
 export { LOGIN_PAGE_EVENTS, LOGIN_PAGE } from './loginPageEvents';
-export {
-  SIDEBAR_EVENTS,
-  ADMIN_SIDEBAR_EVENTS,
-  FOOTER_EVENTS,
-  HELP_AND_SUPPORT_EVENTS,
-} from './sidebarFooterEvents';
+export { SIDEBAR_EVENTS, ADMIN_SIDEBAR_EVENTS, FOOTER_EVENTS } from './sidebarFooterEvents';
 export { MEMBERS_PAGE, MEMBERS_PAGE_EVENTS } from './membersPageEvents';
 export {
   PLUGINS_PAGE_EVENTS,

app/src/components/main/analytics/events/sidebarFooterEvents.js

@@ -158,22 +158,3 @@ export const FOOTER_EVENTS = {
     label: `${pageNumber}#${page}`,
   }),
 };
-
-const HELP_AND_SUPPORT = 'Help and Support';
-export const HELP_AND_SUPPORT_EVENTS = {
-  clickOnSupportModalBtn: (linkName) => ({
-    category: HELP_AND_SUPPORT,
-    action: 'Click on Button/Link on Modal Help and Support',
-    label: linkName || HELP_AND_SUPPORT,
-  }),
-  clickInstructionLink: (label) => ({
-    category: HELP_AND_SUPPORT,
-    action: 'Click on Button Instruction on Modal Help and Support ',
-    label,
-  }),
-  clickOnRequestModalBtn: (btn) => ({
-    category: HELP_AND_SUPPORT,
-    action: 'Click on Button on Modal Request Support',
-    label: btn,
-  }),
-};

app/src/layouts/common/sidebar/supportBlock/modal/requestSupportModal.jsx

@@ -31,7 +31,7 @@ import { InputOutside } from 'components/inputs/inputOutside';
 import LoginIcon from 'common/img/login-field-icon-inline.svg';
 import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
 import { NOTIFICATION_TYPES, showNotification } from 'controllers/notification';
-import { HELP_AND_SUPPORT_EVENTS } from 'components/main/analytics/events';
+import { HELP_AND_SUPPORT_EVENTS } from 'analyticsEvents/helpAndSupportEvents';
 import { messages } from '../messages';
 import styles from './requestSupportModal.scss';
 
@@ -88,19 +88,9 @@ const RequestSupport = ({ handleSubmit, initialize, invalid }) => {
         },
         disabled: invalid,
         attributes: { type: 'submit', form: REQUEST_FORM_ID },
-        eventInfo: HELP_AND_SUPPORT_EVENTS.clickOnRequestModalBtn(
-          COMMON_LOCALE_KEYS.SEND.defaultMessage,
-        ),
+        eventInfo: HELP_AND_SUPPORT_EVENTS.CLICK_SEND_REQUEST_SUPPORT_BUTTON,
       }}
-      cancelButton={{
-        text: formatMessage(COMMON_LOCALE_KEYS.CANCEL),
-        eventInfo: HELP_AND_SUPPORT_EVENTS.clickOnRequestModalBtn(
-          COMMON_LOCALE_KEYS.CANCEL.defaultMessage,
-        ),
-      }}
-      closeIconEventInfo={HELP_AND_SUPPORT_EVENTS.clickOnRequestModalBtn(
-        COMMON_LOCALE_KEYS.CLOSE.defaultMessage,
-      )}
+      cancelButton={{ text: formatMessage(COMMON_LOCALE_KEYS.CANCEL) }}
     >
       <>
         <span className={cx('text')}>{Parser(formatMessage(messages.modalText))}</span>

app/src/layouts/common/sidebar/supportBlock/supportBlock.jsx

@@ -25,7 +25,7 @@ import { withTooltip } from 'components/main/tooltips/tooltip';
 import { TextTooltip } from 'components/main/tooltips/textTooltip';
 import { InputDropdown } from 'components/inputs/inputDropdown';
 import { GhostButton } from 'components/buttons/ghostButton';
-import { HELP_AND_SUPPORT_EVENTS } from 'components/main/analytics/events';
+import { HELP_AND_SUPPORT_EVENTS } from 'analyticsEvents/helpAndSupportEvents';
 import { showModalAction } from 'controllers/modal';
 import { referenceDictionary } from 'common/utils';
 import { messages } from './messages';
@@ -70,7 +70,7 @@ export const SupportBlock = ({ options }) => {
 
   const toggleModal = () => {
     setModalShown(!isModalShown);
-    !isModalShown && trackEvent(HELP_AND_SUPPORT_EVENTS.clickOnSupportModalBtn());
+    !isModalShown && trackEvent(HELP_AND_SUPPORT_EVENTS.CLICK_HELP_AND_SUPPORT_BUTTON);
   };
 
   const openModal = () => {
@@ -80,20 +80,19 @@ export const SupportBlock = ({ options }) => {
         id: 'requestSupportModal',
       }),
     );
-    trackEvent(
-      HELP_AND_SUPPORT_EVENTS.clickOnSupportModalBtn(messages.requestSupport.defaultMessage),
-    );
+    trackEvent(HELP_AND_SUPPORT_EVENTS.CLICK_REQUEST_SUPPORT_BUTTON);
   };
 
   const onClickLink = (nameLink) => {
     toggleModal();
-    trackEvent(HELP_AND_SUPPORT_EVENTS.clickOnSupportModalBtn(nameLink));
+    trackEvent(HELP_AND_SUPPORT_EVENTS.CLICK_ON_SUPPORT_LINK(nameLink));
   };
 
   const onClickUserChoiceBtn = () => {
     toggleModal();
     const label = options.find(({ value }) => value === userChoice).label;
-    trackEvent(HELP_AND_SUPPORT_EVENTS.clickInstructionLink(label));
+    !userChoice && trackEvent(HELP_AND_SUPPORT_EVENTS.CLICK_ASK_A_QUESTION_BUTTON);
+    userChoice && trackEvent(HELP_AND_SUPPORT_EVENTS.CHOOSE_INSTRUCTION_BUTTON(label));
   };
 
   return (
@@ -141,7 +140,7 @@ export const SupportBlock = ({ options }) => {
                     target="_blank"
                     rel="noreferrer noopener"
                     className={cx('support-link')}
-                    onClick={() => onClickLink('email')}
+                    onClick={() => onClickLink('support_team')}
                     key={EMAIL_SUPPORT}
                   >
                     {formatMessage(messages.ourSupportTeam)}
@@ -153,7 +152,7 @@ export const SupportBlock = ({ options }) => {
                     target="_blank"
                     rel="noreferrer noopener"
                     className={cx('support-link')}
-                    onClick={() => onClickLink(messages.slackChannel.defaultMessage)}
+                    onClick={() => onClickLink('slack')}
                     key={referenceDictionary.rpSlack}
                   >
                     {formatMessage(messages.slackChannel)}