Proof of concept for brave/brave-browser#33031

Needs more work (UI mock ups, tests, etc)

components/brave_vpn/browser/brave_vpn_service.cc

@@ -383,7 +383,8 @@ void BraveVpnService::UpdatePurchasedStateForSessionExpired(
     return;
   }
 
-  SetPurchasedState(env, PurchasedState::SESSION_EXPIRED);
+  SetPurchasedState(env, out_of_credentials ? PurchasedState::OUT_OF_CREDENTIALS
+                                            : PurchasedState::SESSION_EXPIRED);
 }
 
 bool BraveVpnService::IsCurrentRegionSelectedAutomatically(
@@ -572,6 +573,8 @@ void BraveVpnService::OnCredentialSummary(const std::string& domain,
   std::string summary_string_trimmed;
   base::TrimWhitespaceASCII(summary->message, base::TrimPositions::TRIM_ALL,
                             &summary_string_trimmed);
+  //SetPurchasedState(env, PurchasedState::OUT_OF_CREDENTIALS);
+  //return;
   if (summary_string_trimmed.length() == 0) {
     // no credential found; person needs to login
     VLOG(1) << __func__ << " : No credential found; user needs to login!";
@@ -678,6 +681,7 @@ void BraveVpnService::OnPrepareCredentialsPresentation(
     return;
   }
 
+  out_of_credentials = false;
   SetSkusCredential(local_prefs_, credential, time);
 
   if (GetCurrentEnvironment() != env) {
@@ -716,28 +720,28 @@ void BraveVpnService::OnGetSubscriberCredentialV12(
       return;
     }
 
-    // If we get here, we've already tried two credentials (the retry failed).
+    // We can set the state as FAILED and do not attempt to get another
+    // credential. The cached credential will eventually expire and user will
+    // fetch a new one.
+    //
+    // There could be two reasons for this.
+
+    // 1. We've already tried two credentials (the retry failed).
     if (token_no_longer_valid && IsRetriedSkusCredential(local_prefs_)) {
       VLOG(2) << __func__
               << " : Got TokenNoLongerValid again with retried skus credential";
+      out_of_credentials = true;
+      SetPurchasedState(
+          GetCurrentEnvironment(), PurchasedState::FAILED,
+          l10n_util::GetStringUTF8(IDS_BRAVE_VPN_PURCHASE_TOKEN_NOT_VALID));
+      return;
     }
 
-    // When this path is reached:
-    // - The cached credential is considered good but vendor side has an error.
-    //   That could be a network outage or a server side error on vendor side.
-    // OR
-    // - The cached credential is consumed and we've now tried two different
-    //   credentials.
-    //
-    // We set the state as FAILED and do not attempt to get another credential.
-    // Cached credential will eventually expire and user will fetch a new one.
-    //
-    // This logic can be updated if we issue more than two credentials per day.
-    auto message_id = token_no_longer_valid
-                          ? IDS_BRAVE_VPN_PURCHASE_TOKEN_NOT_VALID
-                          : IDS_BRAVE_VPN_PURCHASE_CREDENTIALS_FETCH_FAILED;
+    // 2. The cached credential is considered good but vendor side has an error.
+    // That could be a network outage or a server side error on vendor side.
     SetPurchasedState(GetCurrentEnvironment(), PurchasedState::FAILED,
-                      l10n_util::GetStringUTF8(message_id));
+                      l10n_util::GetStringUTF8(
+                          IDS_BRAVE_VPN_PURCHASE_CREDENTIALS_FETCH_FAILED));
 #endif
     return;
   }

components/brave_vpn/browser/brave_vpn_service.h

@@ -253,6 +253,7 @@ class BraveVpnService :
   std::unique_ptr<BraveVPNServiceDelegate> delegate_;
   base::RepeatingTimer p3a_timer_;
   base::OneShotTimer subs_cred_refresh_timer_;
+  bool out_of_credentials = false;
   base::WeakPtrFactory<BraveVpnService> weak_ptr_factory_{this};
 };
 

components/brave_vpn/common/mojom/brave_vpn.mojom

@@ -114,6 +114,7 @@ enum PurchasedState {
   LOADING,
   SESSION_EXPIRED,
   FAILED,
+  OUT_OF_CREDENTIALS,
 };
 
 struct PurchasedInfo {

components/brave_vpn/resources/panel/components/main-panel/index.tsx

@@ -106,6 +106,7 @@ function MainPanel() {
   const isSelectingRegion = useSelector((state) => state.isSelectingRegion)
   const connectionStatus = useSelector((state) => state.connectionStatus)
   const expired = useSelector((state) => state.expired)
+  const outOfCredentials = useSelector((state) => state.outOfCredentials)
   const regions = useSelector((state) => state.regions)
 
   const onSelectRegionButtonClick = () => {
@@ -184,6 +185,15 @@ function MainPanel() {
             <SessionExpiredContent />
           </S.StyledAlert>
         )}
+        {outOfCredentials && (
+          <S.StyledAlert
+            type='warning'
+            mode='full'
+            hideIcon
+          >
+            <div slot='title'>OUT OF CREDENTIALS</div>
+          </S.StyledAlert>
+        )}
         <S.RegionSelectorButton
           type='button'
           onClick={onSelectRegionButtonClick}

components/brave_vpn/resources/panel/state/actions.ts

@@ -24,6 +24,7 @@ export type showMainViewPayload = {
   regions: Region[]
   connectionStatus: ConnectionState
   expired: boolean
+  outOfCredentials: boolean
 }
 
 export type initializedPayload = {
@@ -45,6 +46,7 @@ export const connectionFailed = createAction('connectionFailed')
 export const initialize = createAction('initialize')
 export const purchaseConfirmed = createAction('purchaseConfirmed')
 export const purchaseExpired = createAction('purchaseExpired')
+export const outOfCredentials = createAction('outOfCredentials')
 export const showSellView = createAction('showSellView')
 export const showLoadingView = createAction('showLoadingView')
 export const resetConnectionState = createAction('resetConnectionState')

components/brave_vpn/resources/panel/state/async.ts

@@ -70,7 +70,8 @@ handler.on(Actions.purchaseConfirmed.getType(), async (store) => {
         state === ConnectionState.CONNECT_FAILED
           ? ConnectionState.DISCONNECTED
           : state /* Treat connection failure on startup as disconnected */,
-      expired: false
+      expired: false,
+      outOfCredentials: false
     })
   )
 })
@@ -86,7 +87,25 @@ handler.on(Actions.purchaseExpired.getType(), async (store) => {
       currentRegion,
       regions,
       connectionStatus: ConnectionState.DISCONNECTED,
-      expired: true
+      expired: true,
+      outOfCredentials: false
+    })
+  )
+})
+
+handler.on(Actions.outOfCredentials.getType(), async (store) => {
+  const [{ currentRegion }, { regions }] = await Promise.all([
+    getPanelBrowserAPI().serviceHandler.getSelectedRegion(),
+    getPanelBrowserAPI().serviceHandler.getAllRegions()
+  ])
+
+  store.dispatch(
+    Actions.showMainView({
+      currentRegion,
+      regions,
+      connectionStatus: ConnectionState.DISCONNECTED,
+      expired: false,
+      outOfCredentials: true
     })
   )
 })

components/brave_vpn/resources/panel/state/reducer.ts

@@ -13,6 +13,7 @@ type RootState = {
   hasError: boolean
   isSelectingRegion: boolean
   expired: boolean
+  outOfCredentials: boolean
   connectionStatus: ConnectionState
   regions: Region[]
   currentRegion: Region
@@ -25,6 +26,7 @@ const defaultState: RootState = {
   hasError: false,
   isSelectingRegion: false,
   expired: false,
+  outOfCredentials: false,
   connectionStatus: ConnectionState.DISCONNECTED,
   regions: [],
   currentRegion: new Region(),
@@ -148,6 +150,7 @@ reducer.on(Actions.showMainView, (state, payload): RootState => {
   return {
     ...state,
     expired: payload.expired,
+    outOfCredentials: payload.outOfCredentials,
     currentRegion: payload.currentRegion,
     regions: payload.regions,
     connectionStatus: payload.connectionStatus,

components/brave_vpn/resources/panel/state/store.ts

@@ -32,6 +32,9 @@ const observer = {
       case PurchasedState.SESSION_EXPIRED:
         store.dispatch(Actions.purchaseExpired())
         break
+      case PurchasedState.OUT_OF_CREDENTIALS:
+        store.dispatch(Actions.outOfCredentials())
+        break
       case PurchasedState.FAILED:
         store.dispatch(Actions.purchaseFailed({
           state: PurchasedState.FAILED, stateDescription: description