From 6ba7c5bd7238c853dd7f894e8f83a51d76a9aeb9 Mon Sep 17 00:00:00 2001
From: Ankit Srivastava <67647761+ankitsrivas14@users.noreply.github.com>
Date: Thu, 1 Jun 2023 19:36:57 +0530
Subject: [PATCH] feat: intercom consent with ADS 2.0 changes and cypress test
cases (#23906)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Update Intercom consent popup with ADS 2.0 changes and added cypress
test cases.
#### PR fixes following issue(s)
Fixes https://github.com/appsmithorg/appsmith/issues/22385
> if no issue exists, please create an issue and ask the maintainers
about this first
>
>
#### Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video
>
>
#### Type of change
> Please delete options that are not relevant.
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- Chore (housekeeping or task changes that don't impact user perception)
- This change requires a documentation update
>
>
>
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Test-plan-implementation#speedbreaker-features-to-consider-for-every-change)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans/_edit#areas-of-interest)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
---
.../ClientSide/Editor/HelpButton_spec.ts | 18 +++
.../cypress/support/Pages/DebuggerHelper.ts | 3 +
app/client/src/pages/Editor/HelpButton.tsx | 114 +++++++++++++++---
3 files changed, 116 insertions(+), 19 deletions(-)
create mode 100644 app/client/cypress/e2e/Regression/ClientSide/Editor/HelpButton_spec.ts
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 (
+
+
+
+
+
+ {createMessage(INTERCOM_CONSENT_MESSAGE)}
+
+
+
+
+ );
+}
+
function HelpButton() {
const user = useSelector(getCurrentUser);
+ const [showIntercomConsent, setShowIntercomConsent] = useState(false);
useEffect(() => {
bootIntercom(user);
@@ -75,6 +133,7 @@ function HelpButton() {