Demo console banner

.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:

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<HTMLButtonElement>;
+}) {
+  return (
+    <div
+      style={{
+        backgroundColor: "white",
+        border: "2px solid #CBD6E2",
+        padding: "10px",
+        display: "flex",
+        fontSize: "13px",
+      }}
+    >
+      {title}
+      <LinkButton use="transparent-on-primary" onClick={onConfirm}>
+        &times;
+      </LinkButton>
+    </div>
+  );
+}
+
+export default Alert;

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) {
@@ -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 && (
+          <Alert
+            title="Open your console to see the incoming and outgoing messages with HubSpot."
+            onConfirm={hideAlert}
+          />
+        )}
       </div>
     </ThemeProvider>
   );

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;

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(<App />);
+    expect(
+      screen.getByText("Log into your calling account")
+    ).toBeInTheDocument();
+  });
+
+  it("Shows alert", () => {
+    renderWithWrapper(<App />);
+    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(<App />);
+    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();
+  });
+});

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,

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,