feat: intercom consent with ADS 2.0 changes and cypress test cases (#23906)
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
This commit is contained in:
Ankit Srivastava
Ankit Srivastava
parent
a2f48fa622
commit
6ba7c5bd72
|
|
@ -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",
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<ConsentContainer>
|
||||
<ActionsRow>
|
||||
<Button
|
||||
isIconButton
|
||||
kind="tertiary"
|
||||
onClick={() => showIntercomConsent(false)}
|
||||
size="sm"
|
||||
startIcon="arrow-left"
|
||||
/>
|
||||
</ActionsRow>
|
||||
<div className="mb-3" data-testid="t--intercom-consent-text">
|
||||
<Text kind="body-s" renderAs="p">
|
||||
{createMessage(INTERCOM_CONSENT_MESSAGE)}
|
||||
</Text>
|
||||
</div>
|
||||
<Button kind="primary" onClick={sendUserDataToIntercom} size="sm">
|
||||
{createMessage(CONTINUE)}
|
||||
</Button>
|
||||
</ConsentContainer>
|
||||
);
|
||||
}
|
||||
|
||||
function HelpButton() {
|
||||
const user = useSelector(getCurrentUser);
|
||||
const [showIntercomConsent, setShowIntercomConsent] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
bootIntercom(user);
|
||||
|
|
@ -75,6 +133,7 @@ function HelpButton() {
|
|||
<Menu
|
||||
onOpenChange={(open) => {
|
||||
if (open) {
|
||||
setShowIntercomConsent(false);
|
||||
AnalyticsUtil.logEvent("OPEN_HELP", { page: "Editor" });
|
||||
}
|
||||
}}
|
||||
|
|
@ -85,29 +144,46 @@ function HelpButton() {
|
|||
content={createMessage(HELP_RESOURCE_TOOLTIP)}
|
||||
placement="bottomRight"
|
||||
>
|
||||
<Button kind="tertiary" size="md" startIcon="question-line">
|
||||
<Button
|
||||
data-testid="t--help-button"
|
||||
kind="tertiary"
|
||||
size="md"
|
||||
startIcon="question-line"
|
||||
>
|
||||
Help
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</MenuTrigger>
|
||||
<MenuContent collisionPadding={10} style={{ width: HELP_MODAL_WIDTH }}>
|
||||
{HELP_MENU_ITEMS.map((item) => (
|
||||
<MenuItem
|
||||
key={item.label}
|
||||
onClick={() => {
|
||||
if (item.link) window.open(item.link, "_blank");
|
||||
if (item.id === "intercom-trigger") {
|
||||
if (intercomAppID && window.Intercom) {
|
||||
window.Intercom("show");
|
||||
{showIntercomConsent ? (
|
||||
<IntercomConsent showIntercomConsent={setShowIntercomConsent} />
|
||||
) : (
|
||||
HELP_MENU_ITEMS.map((item) => (
|
||||
<MenuItem
|
||||
id={item.id}
|
||||
key={item.label}
|
||||
onSelect={(e) => {
|
||||
if (item.link) {
|
||||
window.open(item.link, "_blank");
|
||||
}
|
||||
}
|
||||
}}
|
||||
startIcon={item.icon}
|
||||
>
|
||||
{item.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
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}
|
||||
</MenuItem>
|
||||
))
|
||||
)}
|
||||
{appVersion.id && (
|
||||
<>
|
||||
<MenuSeparator />
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user