Update to new accounts module & coordinated status

This aligns subscription logic with the cloud logic that'll be used in
the remote endpoint service, so we consistently use the same settings
everywhere. Also simplifies things - no need for computeds or extra
accounts wrappers everywhere.

Author: pimterry

package-lock.json

@@ -45,7 +45,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.12.1",
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@fortawesome/react-fontawesome": "^0.1.8",
-    "@httptoolkit/accounts": "^3.0.1",
+    "@httptoolkit/accounts": "^3.1.0",
     "@httptoolkit/httpsnippet": "^3.0.2",
     "@open-rpc/meta-schema": "^1.14.2",
     "@phosphor-icons/react": "^2.1.5",

package.json

@@ -98,7 +98,7 @@ class App extends React.Component<{
 
     @computed
     get canVisitSettings() {
-        return this.props.accountStore.isPaidUser || this.props.accountStore.isPastDueUser;
+        return this.props.accountStore.user.userHasSubscription();
     }
 
     @computed

src/components/app.tsx

@@ -150,7 +150,7 @@ class ModifyPage extends React.Component<ModifyPageProps> {
             updateGroupTitle,
             combineDraftRulesAsGroup
         } = this.props.rulesStore;
-        const { isPaidUser } = this.props.accountStore;
+        const isPaidUser = this.props.accountStore.user.isPaidUser();
 
         return <ModifyPageContainer ref={this.containerRef}>
             <ModifyPageHeader>

src/components/modify/modify-page.tsx

@@ -336,10 +336,9 @@ export class RuleRow extends React.Component<{
             collapsed,
             disabled
         } = this.props;
-        const {
-            isPaidUser,
-            getPro
-        } = this.props.accountStore!;
+        const { accountStore } = this.props;
+        const isPaidUser = accountStore!.user.isPaidUser();
+        const { getPro } = accountStore!;
 
         const ruleType = rule.type;
         const initialMatcher = rule.matchers.length ? rule.matchers[0] : undefined;

src/components/modify/rule-row.tsx

@@ -196,7 +196,7 @@ export const StepSelector = inject('rulesStore', 'accountStore')(observer((p: {
 }) => {
     let [ allowedSteps, needProSteps ] = _.partition(
         p.availableSteps,
-        (stepClass) => p.accountStore!.isPaidUser || !isPaidStepClass(p.ruleType, stepClass)
+        (stepClass) => p.accountStore!.user.isPaidUser() || !isPaidStepClass(p.ruleType, stepClass)
     );
 
     // Pull the breakpoint steps to the top, since they're kind of separate

src/components/modify/step-selection.tsx

@@ -72,7 +72,7 @@ export class ResponsePane extends React.Component<{
             />
             <SentResponseBodyCard
                 {...this.cardProps.responseBody}
-                isPaidUser={this.props.accountStore!.isPaidUser}
+                isPaidUser={this.props.accountStore!.user.isPaidUser()}
                 url={exchange.request.url}
                 message={response}
                 editorNode={editorNode}
@@ -126,7 +126,7 @@ export class ResponsePane extends React.Component<{
             />
             <SentResponseBodyCard
                 {...this.cardProps.responseBody}
-                isPaidUser={this.props.accountStore!.isPaidUser}
+                isPaidUser={this.props.accountStore!.user.isPaidUser()}
                 url={requestInput.url}
                 editorNode={editorNode}
             />

src/components/send/response-pane.tsx

@@ -123,8 +123,7 @@ class SettingsPage extends React.Component<SettingsPageProps> {
     render() {
         const { uiStore } = this.props;
         const {
-            isPaidUser,
-            isPastDueUser,
+            user,
             userEmail,
             userSubscription,
             subscriptionPlans,
@@ -136,7 +135,7 @@ class SettingsPage extends React.Component<SettingsPageProps> {
 
         const cardProps = uiStore.settingsCardProps;
 
-        if (!isPaidUser && !isPastDueUser) {
+        if (!user.userHasSubscription()) {
             // Can only happen if you log out whilst on this page.
             return <SettingsPagePlaceholder>
                 <Button onClick={() => getPro('settings-page')}>Get Pro</Button>
@@ -272,7 +271,7 @@ class SettingsPage extends React.Component<SettingsPageProps> {
                     The rest is active paid users only:
                  */}
 
-                { isPaidUser && <>
+                { user.isPaidUser() && <>
                     {
                         _.isString(serverVersion.value) &&
                         versionSatisfies(serverVersion.value, PORT_RANGE_SERVER_RANGE) && <>

src/components/settings/settings-page.tsx

@@ -591,7 +591,7 @@ export class SearchFilter<T> extends React.Component<{
                 availableFilters={availableFilters}
                 suggestionContext={filterSuggestionContext}
 
-                isPaidUser={accountStore!.isPaidUser}
+                isPaidUser={accountStore!.user.isPaidUser()}
                 getPro={accountStore!.getPro}
             />
             { hasContents

src/components/view/filters/search-filter.tsx

@@ -194,7 +194,7 @@ export const HeaderDetails = inject('accountStore')(observer((props: {
                 key,
                 value,
                 props.requestUrl,
-                props.accountStore!.isPaidUser
+                props.accountStore!.user.isPaidUser()
             )
 
             return <CollapsibleSection