From 3058c15b6daa6ae34eb28a69b88f915697f49d49 Mon Sep 17 00:00:00 2001 From: Esme Ling Date: Wed, 1 Mar 2023 17:05:12 -0800 Subject: [PATCH 1/4] Add developer console banner --- demo-v1/src/components/Alert.tsx | 29 ++++++++++++++ demo-v1/src/components/App.tsx | 17 ++++++++- demo-v1/src/components/Components.tsx | 2 +- demo-v1/test/spec/components/App-test.tsx | 38 +++++++++++++++++++ .../components/screens/KeypadScreen-test.tsx | 4 +- .../components/screens/LoginScreen-test.tsx | 2 +- 6 files changed, 87 insertions(+), 5 deletions(-) create mode 100644 demo-v1/src/components/Alert.tsx create mode 100644 demo-v1/test/spec/components/App-test.tsx diff --git a/demo-v1/src/components/Alert.tsx b/demo-v1/src/components/Alert.tsx new file mode 100644 index 00000000..dd55d2e5 --- /dev/null +++ b/demo-v1/src/components/Alert.tsx @@ -0,0 +1,29 @@ +import { ReactElement, MouseEventHandler } from "react"; +import { LinkButton } from "./Components"; + +function Alert({ + title, + onConfirm, +}: { + title: string | ReactElement; + onConfirm: MouseEventHandler; +}) { + return ( +
+ {title} + + × + +
+ ); +} + +export default Alert; diff --git a/demo-v1/src/components/App.tsx b/demo-v1/src/components/App.tsx index 29a4ed65..48ec41ca 100644 --- a/demo-v1/src/components/App.tsx +++ b/demo-v1/src/components/App.tsx @@ -16,6 +16,7 @@ import { useCti } from "../hooks/useCti"; import { useCallDurationTimer } from "../hooks/useTimer"; import { WHITE } from "../visitor-ui-component-library/theme/ColorConstants"; import { ScreenNames } from "../types/ScreenTypes"; +import Alert from "./Alert"; export const screens = [ LoginScreen, @@ -40,6 +41,7 @@ function App() { const [dialNumber, setDialNumber] = useState("+1"); const [notes, setNotes] = useState(""); const { callDurationString, startTimer, stopTimer } = useCallDurationTimer(); + const [showAlert, setShowAlert] = useState(true); const handleNextScreen = () => { if (screenIndex === screens.length - 1) { @@ -77,6 +79,10 @@ function App() { handleNavigateToScreen(ScreenNames.Keypad); }; + const hideAlert = () => { + setShowAlert(false); + }; + const screenComponent = useMemo(() => { const Component = screens[screenIndex]; if (!Component) { @@ -116,11 +122,20 @@ function App() { style={{ backgroundColor: "#f5f8fa", color: "#516f90", - minWidth: "400px", + width: "400px", minHeight: "600px", + display: "flex", + flexDirection: "column", + justifyContent: "space-between", }} > {screenComponent} + {showAlert ? ( + + ) : null} ); diff --git a/demo-v1/src/components/Components.tsx b/demo-v1/src/components/Components.tsx index ac97013c..1c19cb50 100644 --- a/demo-v1/src/components/Components.tsx +++ b/demo-v1/src/components/Components.tsx @@ -59,7 +59,7 @@ export const LinkButton = styled(VizExButton).attrs((props) => ({ padding: 0; `; -export const RoundedButton = styled(Button).attrs((props) => ({ +export const RoundedButton = styled(VizExButton).attrs((props) => ({ disabled: props.disabled, }))` border-radius: 25px; diff --git a/demo-v1/test/spec/components/App-test.tsx b/demo-v1/test/spec/components/App-test.tsx new file mode 100644 index 00000000..5fb34c91 --- /dev/null +++ b/demo-v1/test/spec/components/App-test.tsx @@ -0,0 +1,38 @@ +import { screen, waitForElementToBeRemoved } from "@testing-library/react"; +import App from "../../../src/components/App"; +import { renderWithWrapper } from "../../render"; + +describe("App", () => { + it("Shows login screen", () => { + renderWithWrapper(); + expect( + screen.getByText("Log into your calling account") + ).toBeInTheDocument(); + }); + + it("Shows alert", () => { + renderWithWrapper(); + expect( + screen.getByText( + /Open your console to see the incoming and outgoing messages with HubSpot./i + ) + ).toBeInTheDocument(); + }); + + it("Hides alert when confirm button is clicked", async () => { + renderWithWrapper(); + const confirmAlertButton = screen.getByRole("button", { name: /×/i }); + confirmAlertButton.click(); + + await waitForElementToBeRemoved(() => + screen.getByText( + /Open your console to see the incoming and outgoing messages with HubSpot./i + ) + ); + expect( + screen.queryByText( + /Open your console to see the incoming and outgoing messages with HubSpot./i + ) + ).not.toBeInTheDocument(); + }); +}); diff --git a/demo-v1/test/spec/components/screens/KeypadScreen-test.tsx b/demo-v1/test/spec/components/screens/KeypadScreen-test.tsx index 928d6f5a..527dd0a8 100644 --- a/demo-v1/test/spec/components/screens/KeypadScreen-test.tsx +++ b/demo-v1/test/spec/components/screens/KeypadScreen-test.tsx @@ -1,11 +1,11 @@ -import { fireEvent, waitFor } from "@testing-library/react"; +import { fireEvent } from "@testing-library/react"; import KeypadScreen, { validateKeypadInput, } from "../../../../src/components/screens/KeypadScreen"; import { ScreenNames } from "../../../../src/types/ScreenTypes"; import { renderWithWrapper } from "../../../render"; -const noop = () => {}; +const noop = (..._args: any[]) => {}; const cti = { userLoggedOut: noop, diff --git a/demo-v1/test/spec/components/screens/LoginScreen-test.tsx b/demo-v1/test/spec/components/screens/LoginScreen-test.tsx index dd7584eb..806832d8 100644 --- a/demo-v1/test/spec/components/screens/LoginScreen-test.tsx +++ b/demo-v1/test/spec/components/screens/LoginScreen-test.tsx @@ -2,7 +2,7 @@ import { fireEvent } from "@testing-library/react"; import LoginScreen from "../../../../src/components/screens/LoginScreen"; import { renderWithWrapper } from "../../../render"; -const noop = () => {}; +const noop = (..._args: any[]) => {}; const cti = { userLoggedIn: noop, From c67ca4a889d91e199691e90bfb63fe433667df13 Mon Sep 17 00:00:00 2001 From: Esme Ling Date: Wed, 1 Mar 2023 17:10:51 -0800 Subject: [PATCH 2/4] Preview all branches with demo keyword --- .github/workflows/preview.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml index 86107580..b0e98f22 100644 --- a/.github/workflows/preview.yml +++ b/.github/workflows/preview.yml @@ -4,7 +4,7 @@ concurrency: preview-${{ github.ref }} on: workflow_dispatch: pull_request: - branches: [project-demo-v1] + branches: ['*demo*'] jobs: deploy-preview: From 8685ab23b2ee2a7166bc72c3558c3abf7a4c9755 Mon Sep 17 00:00:00 2001 From: Esme Ling Date: Thu, 2 Mar 2023 14:20:15 -0800 Subject: [PATCH 3/4] Close widget after saving call --- demo-v1/src/components/App.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/demo-v1/src/components/App.tsx b/demo-v1/src/components/App.tsx index 48ec41ca..758053b8 100644 --- a/demo-v1/src/components/App.tsx +++ b/demo-v1/src/components/App.tsx @@ -68,14 +68,14 @@ function App() { const handleEndCall = () => { stopTimer(); - cti.callCompleted({ - engagementId, - }); handleNavigateToScreen(ScreenNames.CallEnded); }; const handleSaveCall = () => { resetInputs(); + cti.callCompleted({ + engagementId, + }); handleNavigateToScreen(ScreenNames.Keypad); }; From 5ce6415e767e0ccf76b1c2cfc94037ca2c071fe3 Mon Sep 17 00:00:00 2001 From: Esme <23175119+esme@users.noreply.github.com> Date: Thu, 2 Mar 2023 14:51:54 -0800 Subject: [PATCH 4/4] Update demo-v1/src/components/App.tsx Co-authored-by: Alonso Cadenas --- demo-v1/src/components/App.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demo-v1/src/components/App.tsx b/demo-v1/src/components/App.tsx index 758053b8..37cfa436 100644 --- a/demo-v1/src/components/App.tsx +++ b/demo-v1/src/components/App.tsx @@ -130,12 +130,12 @@ function App() { }} > {screenComponent} - {showAlert ? ( + {showAlert && ( - ) : null} + )} );