handle upgrade call

wso2 · May 5, 2024 · 51033a7 · 51033a7
1 parent b710b86
commit 51033a7
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 35 deletions.
diff --git a/petcare-sample/b2c/web-app/petdesk/web/react/src/components/UserMenu.tsx b/petcare-sample/b2c/web-app/petdesk/web/react/src/components/UserMenu.tsx
@@ -33,18 +33,18 @@ export default function MenuListComposition(props: {
     user: BasicUserInfo;
     signout: (callback?: (response: boolean) => void) => Promise<boolean>;
     setIsBillingWariningOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    isUpgraded: boolean;
+    setisUpgraded: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
-    const { user, signout, setIsBillingWariningOpen } = props;
+    const { isUpgraded, setisUpgraded, user, signout, setIsBillingWariningOpen } = props;
     const [userMenuOpen, setUserMenuOpen] = React.useState(false);
     const [settingsOpen, setSettingsOpen] = React.useState(false);
     const [billingOpen, setBillingOpen] = React.useState(false);
     const { getAccessToken } = useAuthContext();
     const [enabled, setEnabled] = React.useState(false);
     const [email, setEmail] = React.useState(user.email);
-    const [isUpgraded, setisUpgraded] = React.useState(false);
 
     const handleToggle = () => {
-        checkUpgrade();
         setUserMenuOpen((prevOpen) => !prevOpen);
     };
 
@@ -86,30 +86,6 @@ export default function MenuListComposition(props: {
         });    
     }
 
-    const checkUpgrade = () => {
-        async function getUpgradeDetail() {
-            const accessToken = await getAccessToken();
-            try {
-                const response = await getUpgrade(accessToken);
-                if (response.data instanceof Object) {
-                    if (response.data.isUpgraded) {
-                        setisUpgraded(true);
-                    } else {
-                        setisUpgraded(false);
-                    }
-                }
-            } catch (error) {
-                setisUpgraded(false);
-                //if error is Error: Network Error set isUpgraded to true
-                if (error.toString().includes("Error: Network Error") || error.toString().includes("status code 503")){
-                    setisUpgraded(true);
-                }
-                console.error('Error during upgrade process:', error);
-            }
-        }
-        getUpgradeDetail();
-    };
-
     return (
         <><div className="user-menu-div">
             <button className="menu-btn" onClick={handleToggle}>
@@ -199,7 +175,7 @@ export default function MenuListComposition(props: {
                     enabled={enabled} email={email} setEnabled={setEnabled} setEmail={setEmail} />
             </div>
             <div>
-                <GetBilling isUpgraded={isUpgraded} setisUpgraded={setisUpgraded} user={user} handleBilling={handleBilling} checkUpgrade={checkUpgrade} isOpen={billingOpen} setIsOpen={setBillingOpen} />
+                <GetBilling isUpgraded={isUpgraded} setisUpgraded={setisUpgraded} user={user} handleBilling={handleBilling} isOpen={billingOpen} setIsOpen={setBillingOpen} />
             </div>
         </>
     );

diff --git a/petcare-sample/b2c/web-app/petdesk/web/react/src/pages/billing.tsx b/petcare-sample/b2c/web-app/petdesk/web/react/src/pages/billing.tsx
@@ -32,11 +32,10 @@ interface BillingProps {
     isOpen: boolean;
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
     handleBilling: () => Promise<AxiosResponse<BillingInfo, any>>;
-    checkUpgrade: () => void;
 }
 
 export default function GetBilling(props: BillingProps) {
-    const { user, isUpgraded, setisUpgraded, isOpen, setIsOpen, handleBilling, checkUpgrade } = props;
+    const { user, isUpgraded, setisUpgraded, isOpen, setIsOpen, handleBilling } = props;
     const { getAccessToken } = useAuthContext();
 
     const [cardName, setCardName] = useState("");
@@ -91,9 +90,12 @@ export default function GetBilling(props: BillingProps) {
                     expiryDate: expiryDate,
                     securityCode: securityCode
                 };
-                await postBilling(accessToken, payload);
-                await postUpgrade(accessToken, user);
-                setisUpgraded(true);
+                await postUpgrade(accessToken, user).then(async (result) => {
+                    await postBilling(accessToken, payload);
+                    setisUpgraded(true);
+                }).catch((error) => {
+                    console.log("Upgrade error: ", error);
+                });
                 setIsOpen(false);
             }
         }
@@ -104,7 +106,6 @@ export default function GetBilling(props: BillingProps) {
         //if session strage has billing true, then open the billing dialog
         const billingExists = sessionStorage.getItem("billing") !== null;
         if (billingExists) {
-            checkUpgrade();
             const billing = sessionStorage.getItem("billing");
             if (billing === "true") {
                 setBillingInfo();

diff --git a/petcare-sample/b2c/web-app/petdesk/web/react/src/pages/home.tsx b/petcare-sample/b2c/web-app/petdesk/web/react/src/pages/home.tsx
@@ -35,6 +35,7 @@ import PetCard from "./Pets/PetCard";
 import { getPets } from "../components/getPetList/get-pets";
 import MenuListComposition from "../components/UserMenu";
 import { getConfig } from "../util/getConfig";
+import { getUpgrade } from "../components/Billing/billing";
 
 interface DerivedState {
     authenticateResponse: BasicUserInfo,
@@ -75,6 +76,7 @@ export const HomePage: FunctionComponent = (): ReactElement => {
     const [pet, setPet] = useState<Pet | null>(null);
     const [thumbnail, setThumbnail] = useState(null);
     const { getAccessToken } = useAuthContext();
+    const [isUpgraded, setisUpgraded] = React.useState(false);
 
     const search = useLocation().search;
     const stateParam = new URLSearchParams(search).get('state');
@@ -128,6 +130,30 @@ export const HomePage: FunctionComponent = (): ReactElement => {
         });    
     }
 
+    const checkUpgrade = () => {
+        async function getUpgradeDetail() {
+            const accessToken = await getAccessToken();
+            try {
+                const response = await getUpgrade(accessToken);
+                if (response.data instanceof Object) {
+                    if (response.data.isUpgraded) {
+                        setisUpgraded(true);
+                    } else {
+                        setisUpgraded(false);
+                    }
+                }
+            } catch (error) {
+                setisUpgraded(false);
+                //if error is Error: Network Error set isUpgraded to true
+                if (error.toString().includes("Error: Network Error") || error.toString().includes("status code 503")){
+                    setisUpgraded(true);
+                }
+                console.error('Error during upgrade process:', error);
+            }
+        }
+        getUpgradeDetail();
+    };
+
     useEffect(() => {
         if (!isAddPetOpen && state.isAuthenticated) {
             getPetList();
@@ -137,6 +163,7 @@ export const HomePage: FunctionComponent = (): ReactElement => {
 
     useEffect(() => {
         if(state.isAuthenticated){
+            checkUpgrade();
             getPetList();
         } 
       }, [state.isAuthenticated]);
@@ -252,7 +279,7 @@ export const HomePage: FunctionComponent = (): ReactElement => {
                     <><nav className="header">
                         <div>
                             {user && (
-                                <MenuListComposition setIsBillingWariningOpen={setIsBillingWariningOpen} user={user} signout={signOut} />
+                                <MenuListComposition isUpgraded={isUpgraded} setisUpgraded={setisUpgraded} setIsBillingWariningOpen={setIsBillingWariningOpen} user={user} signout={signOut} />
                             )}
                         </div>
                         <div className="app-title-style">