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

src/components/Common/SDKButtons.js

@@ -1,17 +1,30 @@
 import React from "react";
 import { useSDK } from "../../providers/SDKProvider";
 import { Button } from "./Button/Button";
+import { Block } from "../../utils/bem";
+import { Tooltip } from "./Tooltip/Tooltip";
 
 const SDKButton = ({ eventName, ...props }) => {
   const sdk = useSDK();
 
   return sdk.hasHandler(eventName) ? (
-    <Button
-      {...props}
-      onClick={() => {
-        sdk.invoke(eventName);
+    <Tooltip
+      title="You must upgrade your plan to import data"
+      style={{
+        maxWidth:200,
+        textAlign: "center",
       }}
-    />
+      disabled={!props.isSelfServeExpired}>
+      <Block name="button-wrapper">
+        <Button
+          {...props}
+          disabled={ props.disabled || props.isSelfServeExpired }
+          onClick={() => {
+            sdk.invoke(eventName);
+          }}
+        />
+      </Block>
+    </Tooltip>
   ) : null;
 };
 

src/components/DataManager/Toolbar/instruments.js

@@ -1,5 +1,5 @@
 import { FaCaretDown, FaChevronDown } from "react-icons/fa";
-import { FF_LOPS_E_10, isFF } from "../../../utils/feature-flags";
+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";
@@ -14,19 +14,28 @@ 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 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 && window.APP_SETTINGS.billing.checks.is_license_expired;
+// Check if user is self-serve and has expired subscription
+const isSelfServeExpiredSubscription = isSelfServe && window.APP_SETTINGS.subscription.current_period_end && new Date(window.APP_SETTINGS.subscription.current_period_end) < new Date();
+// Check if user is self-serve and has expired trial or subscription
+const isSelfServeExpired = isSelfServeExpiredTrial || isSelfServeExpiredSubscription;
+
 export const instruments = {
   'view-toggle': ({ size }) => {
     return <ViewToggle size={size} style={style} />;
   },
   'columns': ({ size }) => {
     const iconProps = {};
     const isNewUI = isFF(FF_LOPS_E_10);
-    
+
     if (isNewUI) {
       iconProps.size = 12;
       iconProps.style = {
@@ -71,7 +80,7 @@ export const instruments = {
   'import-button': ({ size }) => {
     return (
       <Interface name="import">
-        <ImportButton size={size}>Import</ImportButton>
+        <ImportButton isSelfServeExpired={isSelfServeExpired} size={size}>Import</ImportButton>
       </Interface>
     );
   },

src/utils/feature-flags.js

@@ -83,6 +83,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 = {};