#9130: Slice 2 - disable all team mod activate buttons (#9147)

* create useGetAllTeamScopes TrialAwareButton

* implements TrialAwareButton

* adds tests

* only show tooltip for disabled team mods

* remove unused import

* update snapshots

* remove unneeded export

* remove extraneous period

* disable the trial aware button while organizations are loading

src/extensionConsole/App.tsx

@@ -56,7 +56,7 @@ import DatabaseUnresponsiveBanner from "@/components/DatabaseUnresponsiveBanner"
 import ActivateModPage from "@/extensionConsole/pages/activateMod/ActivateModPage";
 import { RestrictedFeatures } from "@/auth/featureFlags";
 import { useLocation } from "react-router";
-import TeamTrialBanner from "@/extensionConsole/pages/TeamTrialBanner";
+import TeamTrialBanner from "@/extensionConsole/pages/teamTrials/TeamTrialBanner";
 
 // Register the built-in bricks
 registerEditors();

src/extensionConsole/pages/activateMod/ActivateModCard.tsx

@@ -18,7 +18,7 @@
 import styles from "./ActivateModCard.module.scss";
 
 import React, { useState } from "react";
-import { Button, Card } from "react-bootstrap";
+import { Card } from "react-bootstrap";
 import useActivateModWizard from "@/activation/useActivateModWizard";
 import BlockFormSubmissionViaEnterIfFirstChild from "@/components/BlockFormSubmissionViaEnterIfFirstChild";
 import { useDispatch } from "react-redux";
@@ -44,6 +44,7 @@ import { assertNotNullish } from "@/utils/nullishUtils";
 import { Milestones } from "@/data/model/UserMilestone";
 import MarketplaceListingIcon from "@/components/MarketplaceListingIcon";
 import castError from "@/utils/castError";
+import { TrialAwareButton } from "@/extensionConsole/pages/teamTrials/TrialAwareButton";
 
 const WizardHeader: React.VoidFunctionComponent<{
   mod: ModDefinition;
@@ -69,10 +70,15 @@ const WizardHeader: React.VoidFunctionComponent<{
       <div className={styles.wizardDescription}>{mod.metadata.description}</div>
     </div>
     <div className={styles.activateButtonContainer}>
-      <Button className="text-nowrap" type="submit" disabled={isSubmitting}>
+      <TrialAwareButton
+        className="text-nowrap"
+        type="submit"
+        disabled={isSubmitting}
+        modId={mod.metadata.id}
+      >
         <FontAwesomeIcon icon={faMagic} />{" "}
         {isReactivate ? "Reactivate" : "Activate"}
-      </Button>
+      </TrialAwareButton>
     </div>
   </>
 );

src/extensionConsole/pages/mods/Status.tsx

@@ -18,7 +18,6 @@
 import styles from "./Status.module.scss";
 
 import React from "react";
-import { Button } from "react-bootstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faCheck,
@@ -35,6 +34,7 @@ import { Events } from "@/telemetry/events";
 import { useHistory } from "react-router";
 import useActivatedModComponents from "@/mods/hooks/useActivatedModComponents";
 import { API_PATHS } from "@/data/service/urlPaths";
+import { TrialAwareButton } from "@/extensionConsole/pages/teamTrials/TrialAwareButton";
 
 const Status: React.VoidFunctionComponent<{
   modViewItem: ModViewItem;
@@ -73,7 +73,8 @@ const Status: React.VoidFunctionComponent<{
 
   if (showActivate) {
     return (
-      <Button
+      <TrialAwareButton
+        modId={modId}
         size="sm"
         variant="outline-primary"
         onClick={() => {
@@ -86,13 +87,15 @@ const Status: React.VoidFunctionComponent<{
         }}
       >
         Activate
-      </Button>
+      </TrialAwareButton>
     );
   }
 
   if (hasUpdate && showReactivate && !(sharingSource.type === "Deployment")) {
     return (
-      <Button
+      <TrialAwareButton
+        modId={modId}
+        icon={faSync}
         size="sm"
         variant="info"
         className="text-nowrap"
@@ -105,8 +108,8 @@ const Status: React.VoidFunctionComponent<{
           history.push(API_PATHS.MOD_ACTIVATE(modId, true));
         }}
       >
-        <FontAwesomeIcon icon={faSync} /> Update
-      </Button>
+        Update
+      </TrialAwareButton>
     );
   }
 

src/extensionConsole/pages/TeamTrialBanner.test.tsx → src/extensionConsole/pages/teamTrials/TeamTrialBanner.test.tsx

@@ -16,7 +16,7 @@
  */
 
 import React from "react";
-import TeamTrialBanner from "@/extensionConsole/pages/TeamTrialBanner";
+import TeamTrialBanner from "@/extensionConsole/pages/teamTrials/TeamTrialBanner";
 import { render, screen, waitFor } from "@/extensionConsole/testHelpers";
 import { organizationFactory } from "@/testUtils/factories/organizationFactories";
 import { type Timestamp } from "@/types/stringTypes";

src/extensionConsole/pages/TeamTrialBanner.tsx → src/extensionConsole/pages/teamTrials/TeamTrialBanner.tsx

@@ -16,22 +16,13 @@
  */
 
 import Banner from "@/components/banner/Banner";
+import TrialCallToActionLink from "@/extensionConsole/pages/teamTrials/TrialCallToActionLink";
 import useTeamTrialStatus, {
   TeamTrialStatus,
-} from "@/extensionConsole/pages/useTeamTrialStatus";
+} from "@/extensionConsole/pages/teamTrials/useTeamTrialStatus";
 import React from "react";
 import { Collapse } from "react-bootstrap";
 
-const TrialCallToActionLink = () => (
-  <a
-    href="https://calendly.com/pixiebrix-mike/20min"
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    here.
-  </a>
-);
-
 const TeamTrialBanner: React.FunctionComponent = () => {
   const teamTrialStatus = useTeamTrialStatus();