From 3bcb4a881e3bb58e741de8bb8a0a661dede0d8ae Mon Sep 17 00:00:00 2001
From: Yaroslav Grishajev <ygrishajev@gmail.com>
Date: Mon, 25 Nov 2024 10:13:48 +0100
Subject: [PATCH] fix(billing): ensure checkout pricing is displayed correctly

---
 .../get-started/GetStartedStepper.tsx         |  2 +-
 .../src/components/home/YourAccount.tsx       |  2 +-
 .../TopUpAmountPicker.tsx                     | 80 +++++++++++--------
 .../components/wallet/ManagedWalletPopup.tsx  |  2 +-
 .../src/queries/useProvidersQuery.ts          | 16 ----
 5 files changed, 50 insertions(+), 52 deletions(-)

diff --git a/apps/deploy-web/src/components/get-started/GetStartedStepper.tsx b/apps/deploy-web/src/components/get-started/GetStartedStepper.tsx
index e264fc36a..97a8f9899 100644
--- a/apps/deploy-web/src/components/get-started/GetStartedStepper.tsx
+++ b/apps/deploy-web/src/components/get-started/GetStartedStepper.tsx
@@ -104,7 +104,7 @@ export const GetStartedStepper: React.FunctionComponent = () => {
 
           <div className="my-4 flex items-center space-x-4">
             {isManagedWallet && (
-              <TopUpAmountPicker popoverClassName="absolute md:min-w-max">
+              <TopUpAmountPicker popoverClassName="absolute md:min-w-max" mdMode="hover">
                 <LoginRequiredLink
                   className={cn("hover:no-underline", buttonVariants({ variant: "outline", className: "mr-2 border-primary" }))}
                   href="/api/proxy/v1/checkout"
diff --git a/apps/deploy-web/src/components/home/YourAccount.tsx b/apps/deploy-web/src/components/home/YourAccount.tsx
index 3e4ad0359..f5fb9dd4f 100644
--- a/apps/deploy-web/src/components/home/YourAccount.tsx
+++ b/apps/deploy-web/src/components/home/YourAccount.tsx
@@ -230,7 +230,7 @@ export const YourAccount: React.FunctionComponent<Props> = ({ isLoadingBalances,
                 </Link>
               )}
               {isManagedWallet && (
-                <TopUpAmountPicker>
+                <TopUpAmountPicker className="mt-4 inline-flex flex-col" mdMode="hover">
                   <LoginRequiredLink
                     className={cn(buttonVariants({ variant: "default" }))}
                     href="/api/proxy/v1/checkout"
diff --git a/apps/deploy-web/src/components/top-up-amount-picker/TopUpAmountPicker.tsx b/apps/deploy-web/src/components/top-up-amount-picker/TopUpAmountPicker.tsx
index 66abd64ff..8932fe92a 100644
--- a/apps/deploy-web/src/components/top-up-amount-picker/TopUpAmountPicker.tsx
+++ b/apps/deploy-web/src/components/top-up-amount-picker/TopUpAmountPicker.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import { Button, buttonVariants } from "@akashnetwork/ui/components";
 import { cn } from "@akashnetwork/ui/utils";
+import { useMediaQuery } from "@mui/material";
+import { useTheme as useMuiTheme } from "@mui/material/styles";
 import { MoreHoriz } from "iconoir-react";
 
 import { LoginRequiredLink } from "@src/components/user/LoginRequiredLink";
@@ -10,43 +12,55 @@ import { FCWithChildren } from "@src/types/component";
 
 interface TopUpAmountPickerProps {
   popoverClassName?: string;
-  fullWidth?: boolean;
+  className?: string;
+  mdMode: "hover" | "click";
 }
 
-export const TopUpAmountPicker: FCWithChildren<TopUpAmountPickerProps> = ({ children, popoverClassName, fullWidth }) => {
+export const TopUpAmountPicker: FCWithChildren<TopUpAmountPickerProps> = ({ children, popoverClassName, className, mdMode }) => {
   const user = useUser();
+  const [isOpened, setIsOpened] = React.useState(false);
   const { data = [] } = useStripePricesQuery({ enabled: !!user?.userId });
+  const muiTheme = useMuiTheme();
+  const isSmallScreen = useMediaQuery(muiTheme.breakpoints.down("md"));
+  const isOnClick = mdMode === "click" || isSmallScreen;
 
-  return data.length > 1 ? (
-    <span className={cn({ "w-full": fullWidth }, "group relative")}>
-      <span className={cn({ "w-full": fullWidth }, "inline-flex content-center")}>
-        {children}
-        <Button size="icon" variant="ghost" className="ml-2 min-w-max rounded-full md:hidden">
-          <MoreHoriz />
-        </Button>
-      </span>
-      <div
-        className={cn(
-          "opacity-1 invisible max-h-0 overflow-hidden rounded bg-white transition-all duration-200 ease-out group-hover:visible group-hover:max-h-24 group-hover:opacity-100",
-          popoverClassName
-        )}
-      >
-        {data.map(price => {
-          return (
-            <LoginRequiredLink
-              key={price.unitAmount || "custom"}
-              className={cn("mr-1 mt-2", buttonVariants({ variant: "default" }))}
-              href={`/api/proxy/v1/checkout${price.isCustom ? "" : `?amount=${price.unitAmount}`}`}
-              message="Sign In or Sign Up to add funds to your balance"
-            >
-              {price.isCustom ? "Custom" : "$"}
-              {price.unitAmount}
-            </LoginRequiredLink>
-          );
-        })}
-      </div>
-    </span>
-  ) : (
-    <>{children}</>
+  return (
+    <div className={cn("group relative", className)}>
+      {data.length > 1 ? (
+        <>
+          <div className="flex">
+            {children}
+            {isOnClick && (
+              <Button size="icon" variant="ghost" className="ml-2 min-w-max rounded-full" onClick={() => setIsOpened(prev => !prev)}>
+                <MoreHoriz />
+              </Button>
+            )}
+          </div>
+          <div
+            className={cn(
+              "opacity-1 invisible max-h-0 overflow-hidden rounded bg-white transition-all duration-200 ease-out hover:opacity-100",
+              { "visible max-h-24": isOpened && isOnClick, "group-hover:visible group-hover:max-h-24": !isOnClick },
+              popoverClassName
+            )}
+          >
+            {data.map(price => {
+              return (
+                <LoginRequiredLink
+                  key={price.unitAmount || "custom"}
+                  className={cn("mr-1 mt-2", buttonVariants({ variant: "default" }))}
+                  href={`/api/proxy/v1/checkout${price.isCustom ? "" : `?amount=${price.unitAmount}`}`}
+                  message="Sign In or Sign Up to add funds to your balance"
+                >
+                  {price.isCustom ? "Custom" : "$"}
+                  {price.unitAmount}
+                </LoginRequiredLink>
+              );
+            })}
+          </div>
+        </>
+      ) : (
+        <>{children}</>
+      )}
+    </div>
   );
 };
diff --git a/apps/deploy-web/src/components/wallet/ManagedWalletPopup.tsx b/apps/deploy-web/src/components/wallet/ManagedWalletPopup.tsx
index 8cd24fcac..71fc6d259 100644
--- a/apps/deploy-web/src/components/wallet/ManagedWalletPopup.tsx
+++ b/apps/deploy-web/src/components/wallet/ManagedWalletPopup.tsx
@@ -71,7 +71,7 @@ export const ManagedWalletPopup: React.FC<ManagedWalletPopupProps> = ({ walletBa
       )}
 
       <div className="flex flex-col items-center justify-end space-y-2 pt-2">
-        <TopUpAmountPicker fullWidth>
+        <TopUpAmountPicker mdMode="click" className="w-full">
           <Button onClick={whenLoggedIn(goToCheckout, "Sign In or Sign Up to add funds")} variant="outline" className="w-full space-x-2">
             <HandCard />
             <span>Add Funds</span>
diff --git a/apps/deploy-web/src/queries/useProvidersQuery.ts b/apps/deploy-web/src/queries/useProvidersQuery.ts
index 57b20a50b..5fd03e886 100644
--- a/apps/deploy-web/src/queries/useProvidersQuery.ts
+++ b/apps/deploy-web/src/queries/useProvidersQuery.ts
@@ -108,19 +108,3 @@ async function getProviderRegions(): Promise<Array<ApiProviderRegion>> {
 export function useProviderRegions(options = {}) {
   return useQuery(QueryKeys.getProviderRegionsKey(), () => getProviderRegions(), options);
 }
-
-async function getTrialProviders() {
-  const response = await axios.get(ApiUrlService.trialProviders());
-
-  return response.data;
-}
-
-export function useTrialProviders(options = {}) {
-  return useQuery<Array<string>>(QueryKeys.getTrialProvidersKey(), () => getTrialProviders(), {
-    ...options,
-    refetchInterval: false,
-    refetchIntervalInBackground: false,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false
-  });
-}