From b79ed149ff94d93b4c54e45c97c6cbaa6c11b8c0 Mon Sep 17 00:00:00 2001 From: Esme <23175119+esme@users.noreply.github.com> Date: Thu, 2 Mar 2023 14:52:23 -0800 Subject: [PATCH] Demo console banner (#78) * Add developer console banner * Preview all branches with demo keyword * Close widget after saving call --- .github/workflows/preview.yml | 2 +- demo-v1/src/components/Alert.tsx | 29 ++++++++++++++ demo-v1/src/components/App.tsx | 25 +++++++++--- 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 +- 7 files changed, 92 insertions(+), 10 deletions(-) create mode 100644 demo-v1/src/components/Alert.tsx create mode 100644 demo-v1/test/spec/components/App-test.tsx 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: 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 eddef5db..37cfa436 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) { @@ -66,17 +68,21 @@ function App() { const handleEndCall = () => { stopTimer(); - cti.callCompleted({ - engagementId, - }); handleNavigateToScreen(ScreenNames.CallEnded); }; const handleSaveCall = () => { resetInputs(); + cti.callCompleted({ + engagementId, + }); handleNavigateToScreen(ScreenNames.Keypad); }; + const hideAlert = () => { + setShowAlert(false); + }; + const screenComponent = useMemo(() => { const Component = screens[screenIndex]; if (!Component) { @@ -115,12 +121,21 @@ function App() {
{screenComponent} + {showAlert && ( + + )}
); diff --git a/demo-v1/src/components/Components.tsx b/demo-v1/src/components/Components.tsx index 3e77308d..d7e45b21 100644 --- a/demo-v1/src/components/Components.tsx +++ b/demo-v1/src/components/Components.tsx @@ -55,7 +55,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,