ref(billing): Convert PowerFeatureHovercard to FC (#98952)

didn't have state or anything

Author: scttcper

static/gsApp/components/powerFeatureHovercard.tsx

@@ -1,4 +1,3 @@
-import {Component} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/core/button';
@@ -18,7 +17,7 @@ import {PlanTier} from 'getsentry/types';
 import {displayPlanName} from 'getsentry/utils/billing';
 import trackGetsentryAnalytics from 'getsentry/utils/trackGetsentryAnalytics';
 
-type Props = {
+interface PowerFeatureHovercardProps {
   /**
    * The set of features that are required for this feature. Used to
    * determine which plan is required for the feature.
@@ -53,86 +52,85 @@ type Props = {
    * opens the upsell modal.
    */
   useLearnMoreLink?: boolean;
-};
+}
 
-class PowerFeatureHovercard extends Component<Props> {
-  recordAnalytics() {
-    const {id, organization, subscription} = this.props;
+function PowerFeatureHovercard({
+  id,
+  containerClassName,
+  containerDisplayMode,
+  organization,
+  subscription,
+  partial,
+  features,
+  children,
+}: PowerFeatureHovercardProps) {
+  const recordAnalytics = () => {
     trackGetsentryAnalytics('power_icon.clicked', {
       organization,
       subscription,
       source: id,
     });
-  }
+  };
 
-  handleClick = (e: React.MouseEvent) => {
+  const handleClick = (e: React.MouseEvent) => {
     e.preventDefault();
-    const {organization, id} = this.props;
 
-    this.recordAnalytics();
+    recordAnalytics();
     openUpsellModal({
       organization,
       source: id ?? '',
     });
   };
 
-  render() {
-    const {
-      containerClassName,
-      containerDisplayMode,
-      organization,
-      subscription,
-      partial,
-      features,
-      children,
-    } = this.props;
-
-    const hoverBody = (
-      <PlanFeature features={features} {...{organization, subscription}}>
-        {({plan, tierChange}) => {
-          let planName = displayPlanName(plan);
-
-          if (tierChange === PlanTier.AM1) {
-            planName = `Performance ${planName}`;
-          }
-
-          return (
-            <LearnMoreTextBody data-test-id="power-hovercard">
-              <Flex direction="column" gap="md">
-                <div>
-                  {partial
-                    ? t('Better With %s Plan', planName)
-                    : t('Requires %s Plan', planName)}
-                </div>
-                <Button
-                  priority="primary"
-                  onClick={this.handleClick}
-                  data-test-id="power-learn-more"
-                  size="xs"
-                  icon={<IconLightning size="xs" />}
-                >
-                  {t('Learn More')}
-                </Button>
-              </Flex>
-            </LearnMoreTextBody>
-          );
-        }}
-      </PlanFeature>
-    );
-
-    return (
-      <StyledHovercard
-        containerClassName={containerClassName}
-        containerDisplayMode={containerDisplayMode}
-        bodyClassName="power-icon"
-        body={hoverBody}
-        position="right"
-        delay={200}
-      >
-        {children}
-      </StyledHovercard>
-    );
-  }
+  const hoverBody = (
+    <PlanFeature
+      features={features}
+      organization={organization}
+      subscription={subscription}
+    >
+      {({plan, tierChange}) => {
+        let planName = displayPlanName(plan);
+
+        if (tierChange === PlanTier.AM1) {
+          planName = `Performance ${planName}`;
+        }
+
+        return (
+          <LearnMoreTextBody data-test-id="power-hovercard">
+            <Flex direction="column" gap="md">
+              <div>
+                {partial
+                  ? t('Better With %s Plan', planName)
+                  : t('Requires %s Plan', planName)}
+              </div>
+              <Button
+                priority="primary"
+                onClick={handleClick}
+                data-test-id="power-learn-more"
+                size="xs"
+                icon={<IconLightning size="xs" />}
+              >
+                {t('Learn More')}
+              </Button>
+            </Flex>
+          </LearnMoreTextBody>
+        );
+      }}
+    </PlanFeature>
+  );
+
+  return (
+    <StyledHovercard
+      containerClassName={containerClassName}
+      containerDisplayMode={containerDisplayMode}
+      bodyClassName="power-icon"
+      body={hoverBody}
+      position="right"
+      delay={200}
+    >
+      {children}
+    </StyledHovercard>
+  );
 }
 
 const LearnMoreTextBody = styled('div')`