feat: LEAP-572: Implement interface indicator for expired plans (#308)

* feat: LEAP-572: Implement interface indicator for expired plans

* implements disabled tooltip

* Update src/components/Common/SDKButtons.js

Co-authored-by: yyassi-heartex <104568407+yyassi-heartex@users.noreply.github.com>

* fix validation to check if user is trial expired

* reorder imports

* add is_license_expired and current_period_end into consts

* create a component to handle disabled tooltip

---------

Co-authored-by: yyassi-heartex <104568407+yyassi-heartex@users.noreply.github.com>

src/components/Common/Tooltip/Tooltip.js

@@ -6,7 +6,7 @@ import { aroundTransition } from "../../../utils/transition";
 import "./Tooltip.styl";
 
 export const Tooltip = forwardRef(
-  ({ title, children, defaultVisible, style }, ref) => {
+  ({ title, children, defaultVisible, disabled, style }, ref) => {
     const child = Children.only(children);
     const triggerElement = ref ?? useRef();
     const tooltipElement = useRef();
@@ -83,14 +83,20 @@ export const Tooltip = forwardRef(
       [injected, offset, title, visibilityClasses, tooltipElement],
     );
 
+    useEffect(() => {
+      if (disabled === true && visibility === "visible") performAnimation(false);
+    }, [disabled]);
+
     const clone = cloneElement(child, {
       ...child.props,
       ref: triggerElement,
       onMouseEnter(e) {
+        if (disabled === true) return;
         setInjected(true);
         child.props.onMouseEnter?.(e);
       },
       onMouseLeave(e) {
+        if (disabled === true) return;
         performAnimation(false);
         child.props.onMouseLeave?.(e);
       },

src/components/DataManager/Toolbar/instruments.js

@@ -1,11 +1,13 @@
 import { FaCaretDown, FaChevronDown } from "react-icons/fa";
-import { FF_LOPS_E_10, isFF } from "../../../utils/feature-flags";
+import { Block } from "../../../utils/bem";
+import { FF_LOPS_E_10, FF_SELF_SERVE, isFF } from "../../../utils/feature-flags";
 import { ErrorBox } from "../../Common/ErrorBox";
 import { FieldsButton } from "../../Common/FieldsButton";
 import { FiltersPane } from "../../Common/FiltersPane";
 import { Icon } from "../../Common/Icon/Icon";
 import { Interface } from "../../Common/Interface";
 import { ExportButton, ImportButton } from "../../Common/SDKButtons";
+import { Tooltip } from "../../Common/Tooltip/Tooltip";
 import { ActionsButton } from "./ActionsButton";
 import { GridWidthButton } from "./GridWidthButton";
 import { LabelButton } from "./LabelButton";
@@ -14,9 +16,42 @@ import { OrderButton } from "./OrderButton";
 import { RefreshButton } from "./RefreshButton";
 import { ViewToggle } from "./ViewToggle";
 
-const style = { 
-  minWidth: '110px', 
-  justifyContent: 'space-between', 
+const style = {
+  minWidth: '110px',
+  justifyContent: 'space-between',
+};
+
+// Check if user is on trial
+const isTrialExpired = window.APP_SETTINGS.billing.checks.is_license_expired;
+// Check the subscription period end date
+const subscriptionPeriodEnd = window.APP_SETTINGS.subscription.current_period_end;
+// Check if user is self-serve
+const isSelfServe = isFF(FF_SELF_SERVE) && window.APP_SETTINGS.billing.enterprise;
+// Check if user is self-serve and has expired trial
+const isSelfServeExpiredTrial = isSelfServe && isTrialExpired && !subscriptionPeriodEnd;
+// Check if user is self-serve and has expired subscription
+const isSelfServeExpiredSubscription = isSelfServe && subscriptionPeriodEnd && new Date(subscriptionPeriodEnd) < new Date();
+// Check if user is self-serve and has expired trial or subscription
+const isSelfServeExpired = isSelfServeExpiredTrial || isSelfServeExpiredSubscription;
+
+const WithDisabledTooltip = ({ children, ...props }) => {
+  if (!props.disabled) {
+    return children;
+  }
+
+  return (
+    <Tooltip
+      title={props.title}
+      style={{
+        maxWidth:200,
+        textAlign: "center",
+      }}>
+      <Block name="button-wrapper">
+        {children}
+      </Block>
+    </Tooltip>
+  );
+
 };
 
 export const instruments = {
@@ -26,7 +61,7 @@ export const instruments = {
   'columns': ({ size }) => {
     const iconProps = {};
     const isNewUI = isFF(FF_LOPS_E_10);
-    
+
     if (isNewUI) {
       iconProps.size = 12;
       iconProps.style = {
@@ -71,7 +106,11 @@ export const instruments = {
   'import-button': ({ size }) => {
     return (
       <Interface name="import">
-        <ImportButton size={size}>Import</ImportButton>
+        <WithDisabledTooltip
+          title="You must upgrade your plan to import data"
+          disabled={isSelfServeExpired}>
+          <ImportButton disabled={isSelfServeExpired} size={size}>Import</ImportButton>
+        </WithDisabledTooltip>
       </Interface>
     );
   },

src/utils/feature-flags.js

@@ -77,6 +77,12 @@ export const FF_OPTIC_2 = "fflag_feat_optic_2_ensure_draft_saved_short";
  */
 export const FF_LOPS_86 = "fflag_feat_front_lops_86_datasets_storage_edit_short";
 
+/**
+ * Self Serve
+ * @link https://app.launchdarkly.com/default/test/features/fflag_feat_front_leap_482_self_serve_short/
+ */
+export const FF_SELF_SERVE = "fflag_feat_front_leap_482_self_serve_short";
+
 // Customize flags
 const flags = {};