diff --git a/app/client/cypress/e2e/Regression/ClientSide/Editor/HelpButton_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Editor/HelpButton_spec.ts new file mode 100644 index 0000000000..36c339c443 --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Editor/HelpButton_spec.ts @@ -0,0 +1,18 @@ +import * as _ from "../../../../support/Objects/ObjectsCore"; + +describe("Help Button on editor", function () { + it("1. Chat with us and Intercom consent should be visible on Help Menu", () => { + _.agHelper.GetNClick(_.debuggerHelper.locators._helpButton, 0, true, 1000); + _.agHelper.GetNClick( + _.debuggerHelper.locators._intercomOption, + 0, + true, + 1000, + ); + _.agHelper.GetNAssertElementText( + _.debuggerHelper.locators._intercomConsentText, + "Can we have your email for better support?", + "contain.text", + ); + }); +}); diff --git a/app/client/cypress/support/Pages/DebuggerHelper.ts b/app/client/cypress/support/Pages/DebuggerHelper.ts index 409787c0a4..dd6ec514c3 100644 --- a/app/client/cypress/support/Pages/DebuggerHelper.ts +++ b/app/client/cypress/support/Pages/DebuggerHelper.ts @@ -42,6 +42,9 @@ export class DebuggerHelper { _debuggerList: ".debugger-list", _debuggerFilter: "input[data-testid=t--debugger-search]", _debuggerSelectedTab: ".ads-v2-tabs__list-tab", + _helpButton: "[data-testid='t--help-button']", + _intercomOption: "#intercom-trigger", + _intercomConsentText: "[data-testid='t--intercom-consent-text']", }; ClickDebuggerIcon( diff --git a/app/client/src/pages/Editor/HelpButton.tsx b/app/client/src/pages/Editor/HelpButton.tsx index f3c7ced19b..f19401fd4a 100644 --- a/app/client/src/pages/Editor/HelpButton.tsx +++ b/app/client/src/pages/Editor/HelpButton.tsx @@ -1,14 +1,16 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { HELP_MODAL_WIDTH } from "constants/HelpConstants"; import AnalyticsUtil from "utils/AnalyticsUtil"; import { getCurrentUser } from "selectors/usersSelectors"; -import { useSelector } from "react-redux"; -import bootIntercom from "utils/bootIntercom"; +import { useDispatch, useSelector } from "react-redux"; +import bootIntercom, { updateIntercomProperties } from "utils/bootIntercom"; import { APPSMITH_DISPLAY_VERSION, + CONTINUE, createMessage, HELP_RESOURCE_TOOLTIP, + INTERCOM_CONSENT_MESSAGE, } from "@appsmith/constants/messages"; import { Button, @@ -18,10 +20,13 @@ import { MenuTrigger, Tooltip, MenuSeparator, + Text, } from "design-system"; import { getAppsmithConfigs } from "@appsmith/configs"; import moment from "moment/moment"; import styled from "styled-components"; +import { getInstanceId } from "@appsmith/selectors/tenantSelectors"; +import { updateIntercomConsent, updateUserDetails } from "actions/userActions"; const { appVersion, cloudHosting, intercomAppID } = getAppsmithConfigs(); @@ -31,6 +36,15 @@ const HelpFooter = styled.div` justify-content: space-between; font-size: 8px; `; +const ConsentContainer = styled.div` + padding: 10px; +`; +const ActionsRow = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; +`; type HelpItem = { label: string; link?: string; @@ -64,8 +78,52 @@ if (intercomAppID && window.Intercom) { }); } +function IntercomConsent({ + showIntercomConsent, +}: { + showIntercomConsent: (val: boolean) => void; +}) { + const user = useSelector(getCurrentUser); + const instanceId = useSelector(getInstanceId); + const dispatch = useDispatch(); + + const sendUserDataToIntercom = () => { + updateIntercomProperties(instanceId, user); + dispatch( + updateUserDetails({ + intercomConsentGiven: true, + }), + ); + dispatch(updateIntercomConsent()); + showIntercomConsent(false); + window.Intercom("show"); + }; + return ( + + + + + ); +} + function HelpButton() { const user = useSelector(getCurrentUser); + const [showIntercomConsent, setShowIntercomConsent] = useState(false); useEffect(() => { bootIntercom(user); @@ -75,6 +133,7 @@ function HelpButton() { { if (open) { + setShowIntercomConsent(false); AnalyticsUtil.logEvent("OPEN_HELP", { page: "Editor" }); } }} @@ -85,29 +144,46 @@ function HelpButton() { content={createMessage(HELP_RESOURCE_TOOLTIP)} placement="bottomRight" > - - {HELP_MENU_ITEMS.map((item) => ( - { - if (item.link) window.open(item.link, "_blank"); - if (item.id === "intercom-trigger") { - if (intercomAppID && window.Intercom) { - window.Intercom("show"); + {showIntercomConsent ? ( + + ) : ( + HELP_MENU_ITEMS.map((item) => ( + { + if (item.link) { + window.open(item.link, "_blank"); } - } - }} - startIcon={item.icon} - > - {item.label} - - ))} + if (item.id === "intercom-trigger") { + e?.preventDefault(); + if (intercomAppID && window.Intercom) { + if (user?.isIntercomConsentGiven || cloudHosting) { + window.Intercom("show"); + } else { + setShowIntercomConsent(true); + } + } + } + }} + startIcon={item.icon} + > + {item.label} + + )) + )} {appVersion.id && ( <>