From 65c058051919c8c5288e2fabc84346a87c5d4f6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Tue, 26 Jul 2022 08:50:27 +0100
Subject: [PATCH] fix: pro flow stripe integration refinements (#1149)

---
 .../src/component/admin/billing/Billing.tsx   | 20 ++++++++++++++++---
 .../BillingInformation/BillingInformation.tsx |  4 ++--
 .../__snapshots__/routes.test.tsx.snap        |  2 +-
 frontend/src/component/menu/routes.ts         |  2 +-
 .../useInstanceStatus/useInstanceStatus.ts    |  6 ++++++
 5 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/frontend/src/component/admin/billing/Billing.tsx b/frontend/src/component/admin/billing/Billing.tsx
index c57975f5a1..2e82f5d8aa 100644
--- a/frontend/src/component/admin/billing/Billing.tsx
+++ b/frontend/src/component/admin/billing/Billing.tsx
@@ -1,6 +1,6 @@
 import AdminMenu from '../menu/AdminMenu';
 import { PageContent } from 'component/common/PageContent/PageContent';
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import AccessContext from 'contexts/AccessContext';
@@ -12,14 +12,28 @@ import { BillingHistory } from './BillingHistory/BillingHistory';
 import useInvoices from 'hooks/api/getters/useInvoices/useInvoices';
 
 export const Billing = () => {
-    const { instanceStatus, isBilling } = useInstanceStatus();
+    const {
+        instanceStatus,
+        isBilling,
+        refetchInstanceStatus,
+        refresh,
+        loading,
+    } = useInstanceStatus();
     const { invoices } = useInvoices();
     const { hasAccess } = useContext(AccessContext);
 
+    useEffect(() => {
+        const hardRefresh = async () => {
+            await refresh();
+            refetchInstanceStatus();
+        };
+        hardRefresh();
+    }, [refetchInstanceStatus, refresh]);
+
     return (
         <div>
             <AdminMenu />
-            <PageContent header="Billing">
+            <PageContent header="Billing" isLoading={loading}>
                 <ConditionallyRender
                     condition={isBilling}
                     show={
diff --git a/frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx b/frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx
index 5ca1a22328..6564441ad1 100644
--- a/frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx
+++ b/frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx
@@ -40,7 +40,7 @@ export const BillingInformation: FC<IBillingInformationProps> = ({
     return (
         <Grid item xs={12} md={5}>
             <StyledInfoBox>
-                <StyledTitle variant="body1">Billing Information</StyledTitle>
+                <StyledTitle variant="body1">Billing information</StyledTitle>
                 <ConditionallyRender
                     condition={inactive}
                     show={
@@ -54,7 +54,7 @@ export const BillingInformation: FC<IBillingInformationProps> = ({
                 <StyledInfoLabel>
                     {inactive
                         ? 'Once we have received your billing information we will upgrade your trial within 1 business day'
-                        : 'These changes may take up to 1 business day and they will be visible on your next invoice'}
+                        : 'Update your credit card and business information and change which email address we send invoices to'}
                 </StyledInfoLabel>
                 <StyledDivider />
                 <StyledInfoLabel>
diff --git a/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap b/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap
index 914c091b0e..9a49a194d8 100644
--- a/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap
+++ b/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap
@@ -480,7 +480,7 @@ exports[`returns all baseRoutes 1`] = `
     },
     "parent": "/admin",
     "path": "/admin-invoices",
-    "title": "Invoices",
+    "title": "Billing & invoices",
     "type": "protected",
   },
   {
diff --git a/frontend/src/component/menu/routes.ts b/frontend/src/component/menu/routes.ts
index 70a1ec1af7..06ba81a1c8 100644
--- a/frontend/src/component/menu/routes.ts
+++ b/frontend/src/component/menu/routes.ts
@@ -518,7 +518,7 @@ export const routes: IRoute[] = [
     {
         path: '/admin-invoices',
         parent: '/admin',
-        title: 'Invoices',
+        title: 'Billing & invoices',
         component: FlaggedBillingRedirect,
         type: 'protected',
         menu: { adminSettings: true, isEnterprise: true },
diff --git a/frontend/src/hooks/api/getters/useInstanceStatus/useInstanceStatus.ts b/frontend/src/hooks/api/getters/useInstanceStatus/useInstanceStatus.ts
index 48e0279a0e..e483cfe02b 100644
--- a/frontend/src/hooks/api/getters/useInstanceStatus/useInstanceStatus.ts
+++ b/frontend/src/hooks/api/getters/useInstanceStatus/useInstanceStatus.ts
@@ -7,6 +7,7 @@ import { useEffect } from 'react';
 export interface IUseInstanceStatusOutput {
     instanceStatus?: IInstanceStatus;
     refetchInstanceStatus: () => void;
+    refresh: () => Promise<void>;
     isBilling: boolean;
     loading: boolean;
     error?: Error;
@@ -33,9 +34,14 @@ export const useInstanceStatus = (): IUseInstanceStatusOutput => {
         InstancePlan.TEAM,
     ];
 
+    const refresh = async (): Promise<void> => {
+        await fetch(formatApiPath('api/instance/refresh'));
+    };
+
     return {
         instanceStatus: data,
         refetchInstanceStatus: refetch,
+        refresh,
         isBilling: billingPlans.includes(data?.plan ?? InstancePlan.UNKNOWN),
         loading,
         error,