fix(settings): Refresh recovery phone service availability on delete

Because:

* Recovery phone information and removal option are shown for any user that has enabled the service, even if they are not located in a supported location for setup
* After removing the phone number, service availability should be checked to determine if the user should be able to add another phone number

This commit:

* refresh recovery phone info after removing phone (this will force a geodb check for service availability)

Closes #FXA-11165

Author: vpomerleau

packages/fxa-settings/src/components/Settings/PageRecoveryPhoneRemove/index.stories.tsx

@@ -7,7 +7,7 @@ import { Meta } from '@storybook/react';
 import { withLocalization } from 'fxa-react/lib/storybooks';
 import PageRecoveryPhoneRemove from '.';
 import { LocationProvider } from '@reach/router';
-import { mockAppContext } from '../../../models/mocks';
+import { mockAppContext, MOCK_ACCOUNT } from '../../../models/mocks';
 import { Account, AppContext } from '../../../models';
 
 export default {
@@ -16,12 +16,20 @@ export default {
   decorators: [withLocalization],
 } as Meta;
 
+const account = {
+  ...MOCK_ACCOUNT,
+  recoveryPhone: {
+    exists: true,
+    phoneNumber: '123-456-7890',
+    available: true,
+  },
+  removeRecoveryPhone: () => true,
+} as unknown as Account;
+
 export const Default = () => (
   <AppContext.Provider
     value={mockAppContext({
-      account: {
-        removeRecoveryPhone: () => {},
-      } as unknown as Account,
+      account,
     })}
   >
     <LocationProvider>

packages/fxa-settings/src/components/Settings/PageRecoveryPhoneRemove/index.test.tsx

@@ -41,6 +41,7 @@ jest.mock('@reach/router', () => ({
 }));
 
 const account = {
+  refresh: jest.fn(),
   removeRecoveryPhone: jest.fn().mockResolvedValue({}),
   recoveryPhone: { phoneNumber: MOCK_FULL_PHONE_NUMBER },
 } as unknown as Account;

packages/fxa-settings/src/components/Settings/PageRecoveryPhoneRemove/index.tsx

@@ -54,7 +54,10 @@ const PageRecoveryPhoneRemove = (props: RouteComponentProps) => {
   const clickRemoveRecoveryPhone = useCallback(async () => {
     try {
       await account.removeRecoveryPhone();
-
+      // get the latest status of recovery phone info and availability
+      // ensure correct data is shown on the settings page
+      // and that service availability is correctly checked against current location
+      await account.refresh('recoveryPhone');
       alertSuccessAndGoHome();
     } catch (e) {
       const localizedError = getLocalizedErrorMessage(ftlMsgResolver, e);

packages/fxa-settings/src/models/Account.ts

@@ -1392,22 +1392,6 @@ export class Account implements AccountData {
     const result = await this.withLoadingStatus(
       this.authClient.recoveryPhoneDelete(sessionToken()!)
     );
-
-    const cache = this.apolloClient.cache;
-    cache.modify({
-      id: cache.identify({ __typename: 'Account' }),
-      fields: {
-        recoveryPhone() {
-          return {
-            exists: false,
-            phoneNumber: null,
-            nationalFormat: null,
-            available: true,
-          };
-        },
-      },
-    });
-
     return result;
   }