fix: Load billing md after admin login.

src/components/HeaderNav/HeaderNav.jsx

@@ -123,7 +123,9 @@ const HeaderNav = ({ history }) => {
             className={styles.navLink}
             activeClassName={styles.activeNavLink}
             to="/user/login">
-            <Text className={styles.navLinkText}>Log in</Text>
+            <Text className={styles.navLinkText} data-testid="nav-login">
+              Log in
+            </Text>
           </NavLink>
           <NavLink
             className={styles.navLink}

src/hooks/api/useProposalsBatch.js

@@ -142,6 +142,13 @@ export default function useProposalsBatch({
   );
   const hasRemainingTokens = !isEmpty(remainingTokens);
 
+  const missingBillingStatusChangesTokens = useMemo(() => {
+    if (!isAdmin || !isStatusApproved) return [];
+    return tokens.filter((token) =>
+      isEmpty(billingStatusChangesByToken[shortRecordToken(token)])
+    );
+  }, [isAdmin, isStatusApproved, tokens, billingStatusChangesByToken]);
+
   const scanNextStatusTokens = (index, oldTokens) => {
     const status = currentStatuses[index];
     const newTokens = getUnfetchedTokens(
@@ -245,28 +252,44 @@ export default function useProposalsBatch({
         return send(FETCH);
       },
       verify: () => {
-        if (!hasRemainingTokens) return send(RESOLVE, { proposals });
+        if (!hasRemainingTokens && !missingBillingStatusChangesTokens.length)
+          return send(RESOLVE, { proposals });
         const [tokensToFetch, next] = getTokensForProposalsPagination(
           remainingTokens,
           proposalPageSize
         );
-        // If fetch tokens of approved proposals and current user is admin
-        // fetch the billing status changes metadata if doesn't exist in
-        // the redux store.
-        let missingBillingStatusChangesTokens;
+        // If proposals are loaded but there are still missing billing status
+        // changes. It happens when you have a proposal list loaded and then, as
+        // admin, navigate to approved proposals tab.
+        if (missingBillingStatusChangesTokens.length && !tokensToFetch.length) {
+          const [billingsToFetch] = getTokensForProposalsPagination(
+            missingBillingStatusChangesTokens,
+            proposalPageSize
+          );
+          onFetchBillingStatusChanges(billingsToFetch)
+            .then(() => send(VERIFY))
+            .catch((e) => send(REJECT, e));
+          return send(FETCH);
+        }
+        // If fetch tokens of approved proposals and current user is admin, and
+        // there are no billing status changes for the tokensToFetch, fetch the
+        // billing status changes metadata if doesn't exist in the redux store.
+        let missingBatchBillingStatusChangesTokens;
         if (isStatusApproved && isAdmin) {
-          missingBillingStatusChangesTokens = tokensToFetch.filter((token) =>
-            isEmpty(billingStatusChangesByToken[shortRecordToken(token)])
+          missingBatchBillingStatusChangesTokens = tokensToFetch.filter(
+            (token) =>
+              isEmpty(billingStatusChangesByToken[shortRecordToken(token)])
           );
         }
         Promise.all([
-          missingBillingStatusChangesTokens?.length &&
-            onFetchBillingStatusChanges(missingBillingStatusChangesTokens),
-          onFetchProposalsBatch({
-            tokens: tokensToFetch,
-            fetchVoteSummary,
-            fetchProposalSummary
-          })
+          missingBatchBillingStatusChangesTokens?.length &&
+            onFetchBillingStatusChanges(missingBatchBillingStatusChangesTokens),
+          tokensToFetch &&
+            onFetchProposalsBatch({
+              tokens: tokensToFetch,
+              fetchVoteSummary,
+              fetchProposalSummary
+            })
         ])
           .then(([, [fetchedProposals]]) => {
             if (isEmpty(fetchedProposals)) {
@@ -301,7 +324,11 @@ export default function useProposalsBatch({
 
         return send(FETCH);
       },
-      done: () => {}
+      done: () => {
+        if (missingBillingStatusChangesTokens.length) {
+          return send(VERIFY);
+        }
+      }
     },
     initialValues: {
       status: "idle",

teste2e/cypress/e2e/proposal/list.js

@@ -375,3 +375,36 @@ describe("Additional page content", () => {
     cy.findByTestId("sidebar").should("be.visible");
   });
 });
+
+describe("Given some previously loaded approved proposals", () => {
+  beforeEach(() => {
+    cy.ticketvoteMiddleware("inventory", {
+      fixedInventory: {
+        vetted: {
+          approved: ["token01", "token02", "token03", "token04", "token05"]
+        }
+      }
+    });
+    cy.ticketvoteMiddleware("summaries", { amountByStatus: { approved: 5 } });
+    cy.piMiddleware("billingstatuschanges", {
+      amountByStatus: { 3: 5 },
+      billingChangesAmount: 0
+    });
+    cy.recordsMiddleware("records", { status: 2, state: 2 });
+    cy.intercept("/api/v1/login", (req) => {
+      req.reply({});
+    });
+  });
+  it("should fetch the billing changes after admin login", () => {
+    cy.visit("/?tab=approved");
+    cy.wait("@records.records");
+    cy.userEnvironment("admin");
+    cy.findByTestId("nav-login").click();
+    cy.findByLabelText(/email/i).type("[email protected]");
+    cy.findByLabelText(/password/i).type("123123123");
+    cy.findByTestId("login-form-button").click();
+    cy.findByTestId("tab-1").click();
+    cy.wait(1000);
+    cy.get("@pi.billingstatuschanges.all").should("have.length", 1);
+  });
+});

teste2e/cypress/support/core/api.js

@@ -76,9 +76,10 @@ export function recordsReply({
  * @return Inventory map: `{ [state]: { [status]: token } }`
  */
 export function inventoryReply({
-  testParams: { amountByStatus = {}, pageLimit = 20 },
+  testParams: { amountByStatus = {}, pageLimit = 20, fixedInventory },
   requestParams: { state = 2, page }
 }) {
+  if (fixedInventory) return fixedInventory;
   const inventory = new Inventory(amountByStatus, {
     page,
     pageLimit

teste2e/cypress/support/pi/api.js

@@ -1,5 +1,6 @@
 import { chunkByStatusAmount } from "../core/utils";
 import { BillingStatusChanges, Summary } from "./generate";
+import times from "lodash/fp/times";
 
 export const API_BASE_URL = "/api/pi/v1";
 
@@ -85,7 +86,7 @@ export function policyReply() {
  * @returns {Object} summaries map
  */
 export function billingStatusChangesReply({
-  testParams: { amountByStatus },
+  testParams: { amountByStatus, billingChangesAmount = 1 },
   requestParams: { tokens = [] }
 }) {
   const tokensByStatus = chunkByStatusAmount(tokens, amountByStatus);
@@ -95,7 +96,9 @@ export function billingStatusChangesReply({
       ...tokens.reduce(
         (sum, token) => ({
           ...sum,
-          [token]: [new BillingStatusChanges({ status, token })]
+          [token]: times(() => new BillingStatusChanges({ status, token }))(
+            billingChangesAmount
+          )
         }),
         {}
       )