Revert "Revert "feat: native smart tags (#782)""

This reverts commit b57350c899.

app/assets/javascripts/components/Premium/usePremiumModal.tsx

@@ -1,3 +1,5 @@
+import { FeaturesState } from '@/ui_models/app_state/features_state';
+import { observer } from 'mobx-react-lite';
 import { FunctionalComponent } from 'preact';
 import { useCallback, useContext, useState } from 'preact/hooks';
 import { createContext } from 'react';
@@ -21,29 +23,31 @@ export const usePremiumModal = (): PremiumModalContextData => {
   return value;
 };
 
-export const PremiumModalProvider: FunctionalComponent = ({ children }) => {
-  const [featureName, setFeatureName] = useState<null | string>(null);
+interface Props {
+  state: FeaturesState;
+}
 
-  const activate = setFeatureName;
+export const PremiumModalProvider: FunctionalComponent<Props> = observer(
+  ({ state, children }) => {
+    const featureName = state._premiumAlertFeatureName;
+    const activate = state.showPremiumAlert;
+    const close = state.closePremiumAlert;
 
-  const closeModal = useCallback(() => {
-    setFeatureName(null);
-  }, [setFeatureName]);
+    const showModal = !!featureName;
 
-  const showModal = !!featureName;
-
-  return (
-    <>
-      {showModal && (
-        <PremiumFeaturesModal
-          showModal={!!featureName}
-          featureName={featureName}
-          onClose={closeModal}
-        />
-      )}
-      <PremiumModalProvider_ value={{ activate }}>
-        {children}
-      </PremiumModalProvider_>
-    </>
-  );
-};
+    return (
+      <>
+        {showModal && (
+          <PremiumFeaturesModal
+            showModal={!!featureName}
+            featureName={featureName}
+            onClose={close}
+          />
+        )}
+        <PremiumModalProvider_ value={{ activate }}>
+          {children}
+        </PremiumModalProvider_>
+      </>
+    );
+  }
+);