fix: reload subscription state after event (#727)

* fix: reload subscription state after event

* chore: yarn.lock

* chore: lint

* fix: hook exhaustive deps

app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx

@@ -11,6 +11,7 @@ import { NoSubscription } from './NoSubscription';
 import { Text } from '@/preferences/components';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
+import { ApplicationEvent } from '@standardnotes/snjs';
 
 type Props = {
   application: WebApplication;
@@ -58,6 +59,20 @@ export const Subscription: FunctionComponent<Props> = observer(({
     }
   }, [getSubscription, getSubscriptions]);
 
+  useEffect(() => {
+    const removeUserRoleObserver = application.addEventObserver(
+      async () => {
+        await getSubscription();
+        await getSubscriptions();
+      },
+      ApplicationEvent.UserRolesChanged
+    );
+
+    return () => {
+      removeUserRoleObserver();
+    };
+  }, [application, getSubscription, getSubscriptions]);
+
   useEffect(() => {
     if (application.hasAccount()) {
       getSubscriptionInfo();
@@ -77,7 +92,7 @@ export const Subscription: FunctionComponent<Props> = observer(({
             ) : loading ? (
               <Text>Loading subscription information...</Text>
             ) : userSubscription && userSubscription.endsAt > now ? (
-              <SubscriptionInformation subscriptionState={subscriptionState} application={application}/>
+              <SubscriptionInformation subscriptionState={subscriptionState} application={application} />
             ) : (
               <NoSubscription application={application} />
             )}