chore(client):extract upgrade button to a separate component

Author: yuval-hazaz

.vscode/settings.json

@@ -29,6 +29,7 @@
     "loglevel",
     "microservices",
     "nestjs",
+    "novu",
     "nrwl",
     "oclif",
     "Octokit",

packages/amplication-client/src/Workspaces/WorkspaceHeader/UpgradeCtaButton.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useContext, useMemo } from "react";
+import { useUpgradeButtonData } from "../hooks/useUpgradeButtonData";
+import {
+  Button,
+  ButtonProgress,
+  EnumButtonStyle,
+} from "@amplication/ui/design-system";
+
+import { GET_CONTACT_US_LINK } from "../queries/workspaceQueries";
+import { useQuery } from "@apollo/client";
+import { useTracking } from "../../util/analytics";
+import { AnalyticsEventNames } from "../../util/analytics-events.types";
+import { AppContext } from "../../context/appContext";
+import { FeatureIndicator } from "../../Components/FeatureIndicator";
+import { BillingFeature } from "@amplication/util-billing-types";
+import { CompletePreviewSignupButton } from "../../User/CompletePreviewSignupButton";
+
+const CLASS_NAME = "workspace-header";
+const TALK_TO_US_LINK =
+  "https://meetings-eu1.hubspot.com/paz-yanover/product-overview-vp-product";
+
+const UpgradeCtaButton = () => {
+  const { currentWorkspace } = useContext(AppContext);
+
+  const { trackEvent } = useTracking();
+  const upgradeButtonData = useUpgradeButtonData(currentWorkspace);
+
+  const { data } = useQuery(GET_CONTACT_US_LINK, {
+    variables: { id: currentWorkspace.id },
+  });
+
+  const daysLeftText = useMemo(() => {
+    return `${upgradeButtonData.trialDaysLeft} day${
+      upgradeButtonData.trialDaysLeft !== 1 ? "s" : ""
+    } left for the free trial`;
+  }, [upgradeButtonData.trialDaysLeft]);
+  const handleUpgradeClick = useCallback(() => {
+    trackEvent({
+      eventName: AnalyticsEventNames.UpgradeClick,
+      eventOriginLocation: "workspace-header",
+      workspace: currentWorkspace.id,
+    });
+  }, [currentWorkspace.id, trackEvent]);
+
+  const handleContactUsClick = useCallback(() => {
+    window.open(data?.contactUsLink, "_blank");
+    trackEvent({
+      eventName: AnalyticsEventNames.HelpMenuItemClick,
+      action: "Contact Us",
+      eventOriginLocation: "workspace-header-help-menu",
+    });
+  }, [data?.contactUsLink, trackEvent]);
+
+  return (
+    <>
+      {upgradeButtonData.isCompleted &&
+        upgradeButtonData.showUpgradeTrialButton && (
+          <a
+            href={TALK_TO_US_LINK}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`${CLASS_NAME}__version`}
+          >
+            <ButtonProgress
+              className={`${CLASS_NAME}__upgrade__btn`}
+              onClick={handleUpgradeClick}
+              progress={upgradeButtonData.trialLeftProgress}
+              leftValue={daysLeftText}
+              yellowColorThreshold={50}
+              redColorThreshold={0}
+            >
+              Talk to us
+            </ButtonProgress>
+          </a>
+        )}
+      {upgradeButtonData.isCompleted &&
+        upgradeButtonData.showUpgradeDefaultButton && (
+          <a
+            href={TALK_TO_US_LINK}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`${CLASS_NAME}__version`}
+          >
+            <Button
+              className={`${CLASS_NAME}__upgrade__btn`}
+              buttonStyle={EnumButtonStyle.Outline}
+              onClick={handleUpgradeClick}
+            >
+              Talk to us
+            </Button>
+          </a>
+        )}
+      {upgradeButtonData.isCompleted &&
+        upgradeButtonData.isPreviewPlan &&
+        !upgradeButtonData.showUpgradeDefaultButton && (
+          <>
+            <FeatureIndicator
+              featureName={BillingFeature.CodeGenerationBuilds}
+              textStart="Generate production-ready code for this architecture with just a few simple clicks"
+              showTooltipLink={false}
+              element={<CompletePreviewSignupButton />}
+            />
+            <Button
+              className={`${CLASS_NAME}__upgrade__btn`}
+              buttonStyle={EnumButtonStyle.Outline}
+              onClick={handleContactUsClick}
+            >
+              Contact us
+            </Button>
+          </>
+        )}
+    </>
+  );
+};
+
+export default UpgradeCtaButton;

packages/amplication-client/src/Workspaces/WorkspaceHeader/WorkspaceHeader.tsx

@@ -1,6 +1,5 @@
 import {
   Breadcrumbs,
-  ButtonProgress,
   Dialog,
   Icon,
   SelectMenu,
@@ -9,6 +8,7 @@ import {
   SelectMenuModal,
   Tooltip,
 } from "@amplication/ui/design-system";
+import { BillingFeature } from "@amplication/util-billing-types";
 import { useApolloClient, useQuery } from "@apollo/client";
 import {
   ButtonTypeEnum,
@@ -18,20 +18,15 @@ import {
   PopoverNotificationCenter,
 } from "@novu/notification-center";
 import { useStiggContext } from "@stigg/react-sdk";
-import React, {
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useContext, useState } from "react";
 import { isMacOs } from "react-device-detect";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
 import CommandPalette from "../../CommandPalette/CommandPalette";
 import { Button, EnumButtonStyle } from "../../Components/Button";
 import UserBadge from "../../Components/UserBadge";
 import BreadcrumbsContext from "../../Layout/BreadcrumbsContext";
 import ProfileForm from "../../Profile/ProfileForm";
+import NoNotifications from "../../assets/images/no-notification.svg";
 import { unsetToken } from "../../authentication/authentication";
 import { AppContext } from "../../context/appContext";
 import {
@@ -45,16 +40,12 @@ import {
   AMPLICATION_DOC_URL,
 } from "../../util/constants";
 import { version } from "../../util/version";
+import useFetchGithubStars from "../hooks/useFetchGithubStars";
+import { GET_CONTACT_US_LINK } from "../queries/workspaceQueries";
+import UpgradeCtaButton from "./UpgradeCtaButton";
 import WorkspaceBanner from "./WorkspaceBanner";
-import styles from "./notificationStyle";
-import NoNotifications from "../../assets/images/no-notification.svg";
 import "./WorkspaceHeader.scss";
-import { BillingFeature } from "@amplication/util-billing-types";
-import { useUpgradeButtonData } from "../hooks/useUpgradeButtonData";
-import { GET_CONTACT_US_LINK } from "../queries/workspaceQueries";
-import { FeatureIndicator } from "../../Components/FeatureIndicator";
-import { CompletePreviewSignupButton } from "../../User/CompletePreviewSignupButton";
-import useFetchGithubStars from "../hooks/useFetchGithubStars";
+import styles from "./notificationStyle";
 
 const CLASS_NAME = "workspace-header";
 const AMP_GITHUB_URL = "https://github.com/amplication/amplication";
@@ -86,31 +77,18 @@ const HELP_MENU_LIST: HelpMenuItem[] = [
   },
 ];
 
-const talkToUsLink =
-  "https://meetings-eu1.hubspot.com/paz-yanover/product-overview-vp-product";
-
 const WorkspaceHeader: React.FC = () => {
-  const { currentWorkspace, currentProject, openHubSpotChat } =
-    useContext(AppContext);
-  const upgradeButtonData = useUpgradeButtonData(currentWorkspace);
+  const { currentWorkspace, currentProject } = useContext(AppContext);
 
   const { data } = useQuery(GET_CONTACT_US_LINK, {
     variables: { id: currentWorkspace.id },
   });
 
   const apolloClient = useApolloClient();
-  const history = useHistory();
   const { stigg } = useStiggContext();
   const { trackEvent } = useTracking();
-  const novuBellRef = useRef(null);
   const stars = useFetchGithubStars();
 
-  const daysLeftText = useMemo(() => {
-    return `${upgradeButtonData.trialDaysLeft} day${
-      upgradeButtonData.trialDaysLeft !== 1 ? "s" : ""
-    } left for the free trial`;
-  }, [upgradeButtonData.trialDaysLeft]);
-
   const breadcrumbsContext = useContext(BreadcrumbsContext);
 
   const [novuCenterState, setNovuCenterState] = useState(false);
@@ -121,26 +99,26 @@ const WorkspaceHeader: React.FC = () => {
   const [showProfileFormDialog, setShowProfileFormDialog] =
     useState<boolean>(false);
 
-  const [showCompleteSignupDialog, setShowCompleteSignupDialog] =
-    useState<boolean>(false);
-
   const handleSignOut = useCallback(() => {
     unsetToken();
     apolloClient.clearStore();
 
     window.location.replace(REACT_APP_AUTH_LOGOUT_URI);
-  }, [history, apolloClient]);
+  }, [apolloClient]);
 
-  const onNotificationClick = useCallback((message: IMessage) => {
-    trackEvent({
-      eventName: AnalyticsEventNames.ClickNotificationMessage,
-      messageType: message.templateIdentifier,
-    });
+  const onNotificationClick = useCallback(
+    (message: IMessage) => {
+      trackEvent({
+        eventName: AnalyticsEventNames.ClickNotificationMessage,
+        messageType: message.templateIdentifier,
+      });
 
-    if (message?.cta?.data?.url) {
-      // window.location.href = message.cta.data.url;
-    }
-  }, []);
+      if (message?.cta?.data?.url) {
+        // window.location.href = message.cta.data.url;
+      }
+    },
+    [trackEvent]
+  );
 
   const onBuildNotificationClick = useCallback(
     (templateIdentifier: string, type: ButtonTypeEnum, message: IMessage) => {
@@ -149,22 +127,14 @@ const WorkspaceHeader: React.FC = () => {
     []
   );
 
-  const handleUpgradeClick = useCallback(() => {
-    trackEvent({
-      eventName: AnalyticsEventNames.UpgradeClick,
-      eventOriginLocation: "workspace-header",
-      workspace: currentWorkspace.id,
-    });
-  }, [currentWorkspace.id, trackEvent]);
-
   const handleContactUsClick = useCallback(() => {
     window.open(data?.contactUsLink, "_blank");
     trackEvent({
       eventName: AnalyticsEventNames.HelpMenuItemClick,
       action: "Contact Us",
       eventOriginLocation: "workspace-header-help-menu",
     });
-  }, [openHubSpotChat]);
+  }, [data?.contactUsLink, trackEvent]);
 
   const handleItemDataClicked = useCallback(
     (itemData: ItemDataCommand) => {
@@ -179,18 +149,14 @@ const WorkspaceHeader: React.FC = () => {
     setShowProfileFormDialog(!showProfileFormDialog);
   }, [showProfileFormDialog, setShowProfileFormDialog]);
 
-  const handleShowCompleteSignupDialog = useCallback(() => {
-    setShowCompleteSignupDialog(!showCompleteSignupDialog);
-  }, [showCompleteSignupDialog]);
-
   const handleBellClick = useCallback(() => {
     if (!novuCenterState) {
       trackEvent({
         eventName: AnalyticsEventNames.OpenNotificationCenter,
       });
     }
     setNovuCenterState(!novuCenterState);
-  }, [novuBellRef, novuCenterState]);
+  }, [novuCenterState, trackEvent]);
 
   const Footer = () => <div></div>;
 
@@ -254,62 +220,7 @@ const WorkspaceHeader: React.FC = () => {
         <div className={`${CLASS_NAME}__center`}></div>
         <div className={`${CLASS_NAME}__right`}>
           <div className={`${CLASS_NAME}__links`}>
-            {upgradeButtonData.isCompleted &&
-              upgradeButtonData.showUpgradeTrialButton && (
-                <a
-                  href={talkToUsLink}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={`${CLASS_NAME}__version`}
-                >
-                  <ButtonProgress
-                    className={`${CLASS_NAME}__upgrade__btn`}
-                    onClick={handleUpgradeClick}
-                    progress={upgradeButtonData.trialLeftProgress}
-                    leftValue={daysLeftText}
-                    yellowColorThreshold={50}
-                    redColorThreshold={0}
-                  >
-                    Talk to us
-                  </ButtonProgress>
-                </a>
-              )}
-            {upgradeButtonData.isCompleted &&
-              upgradeButtonData.showUpgradeDefaultButton && (
-                <a
-                  href={talkToUsLink}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={`${CLASS_NAME}__version`}
-                >
-                  <Button
-                    className={`${CLASS_NAME}__upgrade__btn`}
-                    buttonStyle={EnumButtonStyle.Outline}
-                    onClick={handleUpgradeClick}
-                  >
-                    Talk to us
-                  </Button>
-                </a>
-              )}
-            {upgradeButtonData.isCompleted &&
-              upgradeButtonData.isPreviewPlan &&
-              !upgradeButtonData.showUpgradeDefaultButton && (
-                <>
-                  <FeatureIndicator
-                    featureName={BillingFeature.CodeGenerationBuilds}
-                    textStart="Generate production-ready code for this architecture with just a few simple clicks"
-                    showTooltipLink={false}
-                    element={<CompletePreviewSignupButton />}
-                  />
-                  <Button
-                    className={`${CLASS_NAME}__upgrade__btn`}
-                    buttonStyle={EnumButtonStyle.Outline}
-                    onClick={handleContactUsClick}
-                  >
-                    Contact us
-                  </Button>
-                </>
-              )}
+            <UpgradeCtaButton />
           </div>
           <hr className={`${CLASS_NAME}__vertical_border`} />