Improve sub cancellation UX & support PayPro via new cancel API

Author: pimterry

src/components/settings/settings-page.tsx

@@ -1,18 +1,17 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import { observer, inject } from "mobx-react";
-import { action, computed } from 'mobx';
 import * as dedent from 'dedent';
 import {
-    distanceInWordsStrict, format
+    distanceInWordsStrict, distanceInWordsToNow, format
 } from 'date-fns';
-import { get } from 'typesafe-get';
 
 import { WithInjected } from '../../types';
 import { styled, Theme, ThemeName } from '../../styles';
-import { WarningIcon } from '../../icons';
+import { Icon, WarningIcon } from '../../icons';
 
 import { AccountStore } from '../../model/account/account-store';
+import { SubscriptionPlans } from '../../model/account/subscriptions';
 import { UiStore } from '../../model/ui-store';
 import { serverVersion, versionSatisfies, PORT_RANGE_SERVER_RANGE } from '../../services/service-versions';
 
@@ -106,6 +105,13 @@ const EditorContainer = styled.div`
     flex-grow: 1;
 `;
 
+const AccountUpdateSpinner = styled(Icon).attrs(() => ({
+    icon: ['fas', 'spinner'],
+    spin: true
+}))`
+    margin: 0 0 0 10px;
+`;
+
 @inject('accountStore')
 @inject('uiStore')
 @observer
@@ -119,7 +125,9 @@ class SettingsPage extends React.Component<SettingsPageProps> {
             userEmail,
             userSubscription,
             subscriptionPlans,
+            isAccountUpdateInProcess,
             getPro,
+            canManageSubscription,
             logOut
         } = this.props.accountStore;
 
@@ -172,13 +180,16 @@ class SettingsPage extends React.Component<SettingsPageProps> {
                                     'deleted': 'Cancelled'
                                 }[sub.status]) || 'Unknown'
                             }
+                            { isAccountUpdateInProcess &&
+                                <AccountUpdateSpinner />
+                            }
                         </ContentValue>
 
                         <ContentLabel>
                             Subscription plan
                         </ContentLabel>
                         <ContentValue>
-                            { get(subscriptionPlans, sub.plan, 'name') || 'Unknown' }
+                            { subscriptionPlans[sub.plan]?.name ?? 'Unknown' }
                         </ContentValue>
 
                         <ContentLabel>
@@ -212,27 +223,23 @@ class SettingsPage extends React.Component<SettingsPageProps> {
                                 View latest invoice
                             </SettingsButtonLink>
                         }
-                        { sub.status !== 'deleted' &&
-                          sub.updateBillingDetailsUrl &&
-                            <SettingsButtonLink
-                                href={ sub.updateBillingDetailsUrl }
-                                target='_blank'
-                                rel='noreferrer noopener'
-                                highlight={sub.status === 'past_due'}
-                            >
-                                Update billing details
-                            </SettingsButtonLink>
-                        }
-                        { sub.status !== 'deleted' &&
-                          sub.cancelSubscriptionUrl &&
-                            <SettingsButtonLink
-                                href={ sub.cancelSubscriptionUrl }
-                                target='_blank'
-                                rel='noreferrer noopener'
+                        { canManageSubscription && <>
+                            { sub.updateBillingDetailsUrl &&
+                                <SettingsButtonLink
+                                    href={sub.updateBillingDetailsUrl}
+                                    target='_blank'
+                                    rel='noreferrer noopener'
+                                    highlight={sub.status === 'past_due'}
+                                >
+                                    Update billing details
+                                </SettingsButtonLink>
+                            }
+                            <SettingsButton
+                                onClick={this.confirmSubscriptionCancellation}
                             >
                                 Cancel subscription
-                            </SettingsButtonLink>
-                        }
+                            </SettingsButton>
+                        </> }
                         <SettingsButton onClick={logOut}>Log out</SettingsButton>
                     </AccountControls>
 
@@ -325,6 +332,40 @@ class SettingsPage extends React.Component<SettingsPageProps> {
             </SettingPageContainer>
         </SettingsPageScrollContainer>;
     }
+
+    confirmSubscriptionCancellation = () => {
+        const subscription = this.props.accountStore.userSubscription;
+        if (!subscription) {
+            throw new Error("Can't cancel without a subscription");
+        }
+
+        const planName = SubscriptionPlans[subscription.plan].name;
+
+        let cancelEffect: string;
+
+        if (subscription.status === 'active') {
+            cancelEffect = `It will remain usable until it expires in ${
+                distanceInWordsToNow(subscription.expiry)
+            } but will not renew.`;
+        } else if (subscription.status === 'past_due') {
+            cancelEffect = 'No more renewals will be attempted and it will deactivate immediately.';
+        } else {
+            throw new Error(`Cannot cancel subscription with status ${subscription.status}`);
+        }
+
+        const confirmed = confirm([
+            `This will cancel your HTTP Toolkit ${planName} subscription.`,
+            cancelEffect,
+            "Are you sure?"
+        ].join('\n\n'));
+
+        if (!confirmed) return;
+
+        this.props.accountStore.cancelSubscription().catch((e) => {
+            alert(e.message);
+            reportError(e);
+        });
+    };
 }
 
 // Annoying cast required to handle the store prop nicely in our types

src/model/account/account-store.ts

@@ -13,7 +13,8 @@ import {
     User,
     getLatestUserData,
     getLastUserData,
-    RefreshRejectedError
+    RefreshRejectedError,
+    cancelSubscription
 } from './auth';
 import {
     SubscriptionPlans,
@@ -65,6 +66,10 @@ export class AccountStore {
     @observable
     accountDataLastUpdated = 0;
 
+    // Set when we know a checkout/cancel is processing elsewhere:
+    @observable
+    isAccountUpdateInProcess = false;
+
     @computed get userEmail() {
         return this.user.email;
     }
@@ -272,8 +277,24 @@ export class AccountStore {
 
     private purchasePlan = flow(function * (this: AccountStore, email: string, sku: SKU) {
         openCheckout(email, sku);
+
         this.modal = 'post-checkout';
+        this.isAccountUpdateInProcess = true;
+        yield this.waitForUserUpdate(() => this.isPaidUser || !this.modal);
+        this.isAccountUpdateInProcess = false;
+        this.modal = undefined;
+
+        trackEvent({
+            category: 'Account',
+            action: this.isPaidUser ? 'Checkout complete' : 'Checkout cancelled',
+            value: sku
+        });
+    });
 
+    private waitForUserUpdate = flow(function * (
+        this: AccountStore,
+        completedCheck: () => boolean
+    ) {
         let focused = true;
 
         const setFocused = () => {
@@ -288,10 +309,11 @@ export class AccountStore {
         window.addEventListener('focus', setFocused);
         window.addEventListener('blur', setUnfocused);
 
-        // Keep checking the user's subscription data whilst they check out in their browser...
+        // Keep checking the user's subscription data at intervals, whilst other processes
+        // (browser checkout, update from payment provider) complete elsewhere...
         yield this.updateUser();
         let ticksSinceCheck = 0;
-        while (!this.isPaidUser && this.modal) {
+        while (!completedCheck()) {
             yield delay(1000);
             ticksSinceCheck += 1;
 
@@ -302,23 +324,33 @@ export class AccountStore {
             }
         }
 
-        if (this.isPaidUser && !focused) window.focus(); // Jump back to the front after checkout
+        if (completedCheck() && !focused) window.focus(); // Jump back to the front after update
 
         window.removeEventListener('focus', setFocused);
         window.removeEventListener('blur', setUnfocused);
 
-        trackEvent({
-            category: 'Account',
-            action: this.isPaidUser ? 'Checkout complete' : 'Checkout cancelled',
-            value: sku
-        });
-
-        this.modal = undefined;
     });
 
     @action.bound
     cancelCheckout() {
         this.modal = this.selectedPlan = undefined;
     }
 
+    get canManageSubscription() {
+        return !!this.userSubscription?.canManageSubscription;
+    }
+
+    cancelSubscription = flow(function * (this: AccountStore) {
+        yield cancelSubscription();
+
+        console.log('Subscription cancel requested');
+        this.isAccountUpdateInProcess = true;
+        yield this.waitForUserUpdate(() =>
+            !this.user.subscription ||
+            this.user.subscription.status === 'deleted'
+        );
+        this.isAccountUpdateInProcess = false;
+        console.log('Subscription cancellation confirmed');
+    });
+
 }

src/model/account/auth.ts

@@ -222,6 +222,7 @@ type AppData = {
     update_url?: string;
     cancel_url?: string;
     last_receipt_url?: string;
+    can_manage_subscription?: boolean;
     feature_flags?: string[];
     banned?: boolean;
 }
@@ -233,6 +234,7 @@ type SubscriptionData = {
     updateBillingDetailsUrl?: string;
     cancelSubscriptionUrl?: string;
     lastReceiptUrl?: string;
+    canManageSubscription: boolean;
 };
 
 export type User = {
@@ -297,7 +299,8 @@ function parseUserData(userJwt: string | null): User {
         expiry: appData.subscription_expiry ? new Date(appData.subscription_expiry) : undefined,
         updateBillingDetailsUrl: appData.update_url,
         cancelSubscriptionUrl: appData.cancel_url,
-        lastReceiptUrl: appData.last_receipt_url
+        lastReceiptUrl: appData.last_receipt_url,
+        canManageSubscription: !!appData.can_manage_subscription
     };
 
     if (_.some(subscription) && !subscription.plan) {
@@ -312,10 +315,15 @@ function parseUserData(userJwt: string | null): User {
         'cancelSubscriptionUrl'
     ];
 
+    const isCompleteSubscriptionData = _.every(
+        _.omit(subscription, ...optionalFields),
+        v => !_.isNil(v) // Not just truthy: canManageSubscription can be false on valid sub
+    );
+
     return {
         email: appData.email,
         // Use undefined rather than {} when there's any missing required sub fields
-        subscription: _.every(_.omit(subscription, ...optionalFields))
+        subscription: isCompleteSubscriptionData
             ? subscription as SubscriptionData
             : undefined,
         featureFlags: appData.feature_flags || [],
@@ -327,12 +335,32 @@ async function requestUserData(): Promise<string> {
     const token = await getToken();
     if (!token) return '';
 
-    const appDataResponse = await fetch(`${ACCOUNTS_API}/get-app-data`, {
+    const response = await fetch(`${ACCOUNTS_API}/get-app-data`, {
         method: 'GET',
         headers: {
             'Authorization': `Bearer ${token}`
         }
     });
 
-    return appDataResponse.text();
+    if (!response.ok) {
+        throw new Error(`Unexpected ${response.status} response for app data`);
+    }
+
+    return response.text();
+}
+
+export async function cancelSubscription() {
+    const token = await getToken();
+    if (!token) throw new Error("Can't cancel account without an auth token");
+
+    const response = await fetch(`${ACCOUNTS_API}/cancel-subscription`, {
+        method: 'POST',
+        headers: {
+            'Authorization': `Bearer ${token}`
+        }
+    });
+
+    if (!response.ok) {
+        throw new Error(`Unexpected ${response.status} response cancelling subscription`);
+    }
 }