Fix Stripe modal on short viewports (#20251)

* Fix Stripe modal on short viewports * Update components/dashboard/src/components/billing/AddPaymentMethodModal.tsx Co-authored-by: Aminur Rahman <[email protected]> --------- Co-authored-by: Aminur Rahman <[email protected]>
gitpod-io · Oct 1, 2024 · 9934171 · 9934171
1 parent 538e66f
commit 9934171
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/components/dashboard/src/components/Modal.tsx b/components/dashboard/src/components/Modal.tsx
@@ -182,10 +182,11 @@ export const ModalHeader: FC<ModalHeaderProps> = ({ children }) => {
 
 type ModalBodyProps = {
     children: ReactNode;
+    className?: string;
     hideDivider?: boolean;
 };
 
-export const ModalBody: FC<ModalBodyProps> = ({ children, hideDivider = false }) => {
+export const ModalBody: FC<ModalBodyProps> = ({ children, hideDivider = false, className }) => {
     return (
         // Allows the first tabbable element in the body to receive focus on mount
         <AutoFocusInside
@@ -194,6 +195,7 @@ export const ModalBody: FC<ModalBodyProps> = ({ children, hideDivider = false })
                 {
                     "border-t border-b mt-2 py-4": !hideDivider,
                 },
+                className,
             )}
         >
             {children}

diff --git a/components/dashboard/src/components/billing/AddPaymentMethodModal.tsx b/components/dashboard/src/components/billing/AddPaymentMethodModal.tsx
@@ -13,8 +13,8 @@ import { useStripePromise } from "./use-stripe-promise";
 import { LoadingButton } from "@podkit/buttons/LoadingButton";
 import { useMutation } from "@tanstack/react-query";
 import { useStripeAppearance } from "./use-stripe-appearance";
-import DropDown from "../DropDown";
-import { useCurrency } from "../../payment-context";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@podkit/select/Select";
+import { Currency, useCurrency } from "../../payment-context";
 import Alert from "../Alert";
 
 type Props = {
@@ -58,6 +58,8 @@ function AddPaymentMethodForm({ attributionId }: { attributionId: string }) {
     const elements = useElements();
     const { currency, setCurrency } = useCurrency();
 
+    const currencySymbol = currency === "EUR" ? "€" : "$";
+
     const confirmPayment = useMutation(async () => {
         const attrId = AttributionId.parse(attributionId);
         if (!stripe || !elements || !attrId) {
@@ -80,7 +82,7 @@ function AddPaymentMethodForm({ attributionId }: { attributionId: string }) {
             }
         } catch (error) {
             console.error("Unable to confirm payment method.", error);
-            let message = error?.message || String(error) || "Unable to confirm your payment method.";
+            const message = error?.message || String(error) || "Unable to confirm your payment method.";
             throw new Error(message);
         }
     });
@@ -94,11 +96,14 @@ function AddPaymentMethodForm({ attributionId }: { attributionId: string }) {
     );
 
     return (
-        <form onSubmit={handleSubmit}>
+        <form
+            onSubmit={handleSubmit}
+            className="flex flex-col max-h-[calc(100dvh-3rem)] min-[576px]:max-h-[calc(100dvh-6rem)] overflow-hidden"
+        >
             <ModalBody>
                 <Alert type="message" className="mb-4">
-                    This card will be used for future charges. We'll be placing a 1.00 hold on it that we'll immediately
-                    release in order to verify your payment method.
+                    This card will be used for future charges. We'll be placing a {currencySymbol}1.00 hold on it that
+                    we'll immediately release in order to verify your payment method.
                 </Alert>
                 <PaymentElement id="payment-element" />
                 <AddressElement id="address-element" options={{ mode: "billing", display: { name: "organization" } }} />
@@ -115,21 +120,20 @@ function AddPaymentMethodForm({ attributionId }: { attributionId: string }) {
             >
                 <div className="flex items-center space-x-1">
                     <span>Currency:</span>
-                    <DropDown
-                        customClasses="w-32"
-                        renderAsLink={true}
-                        activeEntry={currency}
-                        entries={[
-                            {
-                                title: "EUR",
-                                onClick: () => setCurrency("EUR"),
-                            },
-                            {
-                                title: "USD",
-                                onClick: () => setCurrency("USD"),
-                            },
-                        ]}
-                    />
+                    <Select
+                        value={currency}
+                        onValueChange={(currency) => {
+                            setCurrency(currency as Currency);
+                        }}
+                    >
+                        <SelectTrigger className="w-24">
+                            <SelectValue placeholder="Currency" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="EUR">EUR</SelectItem>
+                            <SelectItem value="USD">USD</SelectItem>
+                        </SelectContent>
+                    </Select>
                 </div>
                 <LoadingButton type="submit" disabled={!stripe} loading={confirmPayment.isLoading}>
                     Confirm