Merge branch 'main' into refactor/frontend-setup

frontend/__tests__/components/features/payment/payment-form.test.tsx

@@ -78,12 +78,6 @@ describe("PaymentForm", () => {
     expect(createCheckoutSessionSpy).toHaveBeenCalledWith(50.13);
   });
 
-  it("should render the payment method link", async () => {
-    renderPaymentForm();
-
-    screen.getByTestId("payment-methods-link");
-  });
-
   it("should disable the top-up button if the user enters an invalid amount", async () => {
     const user = userEvent.setup();
     renderPaymentForm();
@@ -155,7 +149,7 @@ describe("PaymentForm", () => {
       renderPaymentForm();
 
       const topUpInput = await screen.findByTestId("top-up-input");
-      await user.type(topUpInput, "20"); // test assumes the minimum is 25
+      await user.type(topUpInput, "9"); // test assumes the minimum is 10
 
       const topUpButton = screen.getByText("Add credit");
       await user.click(topUpButton);

frontend/__tests__/utils/amount-is-valid.test.ts

@@ -24,9 +24,15 @@ describe("amountIsValid", () => {
     });
 
     test("when an amount less than the minimum is passed", () => {
-      // test assumes the minimum is 25
-      expect(amountIsValid("24")).toBe(false);
-      expect(amountIsValid("24.99")).toBe(false);
+      // test assumes the minimum is 10
+      expect(amountIsValid("9")).toBe(false);
+      expect(amountIsValid("9.99")).toBe(false);
+    });
+
+    test("when an amount more than the maximum is passed", () => {
+      // test assumes the minimum is 25000
+      expect(amountIsValid("25001")).toBe(false);
+      expect(amountIsValid("25000.01")).toBe(false);
     });
   });
 });

frontend/src/components/features/payment/payment-form.tsx

@@ -5,7 +5,6 @@ import { cn } from "#/utils/utils";
 import MoneyIcon from "#/icons/money.svg?react";
 import { SettingsInput } from "../settings/settings-input";
 import { BrandButton } from "../settings/brand-button";
-import { HelpLink } from "../settings/help-link";
 import { LoadingSpinner } from "#/components/shared/loading-spinner";
 import { amountIsValid } from "#/utils/amount-is-valid";
 
@@ -80,13 +79,6 @@ export function PaymentForm() {
           {isPending && <LoadingSpinner size="small" />}
         </div>
       </div>
-
-      <HelpLink
-        testId="payment-methods-link"
-        href="https://stripe.com/"
-        text="Manage payment methods on"
-        linkText="Stripe"
-      />
     </form>
   );
 }

frontend/src/components/shared/buttons/all-hands-logo-button.tsx

@@ -12,7 +12,7 @@ export function AllHandsLogoButton({ onClick }: AllHandsLogoButtonProps) {
       ariaLabel="All Hands Logo"
       onClick={onClick}
     >
-      <AllHandsLogo width={34} height={23} />
+      <AllHandsLogo width={34} height={34} />
     </TooltipButton>
   );
 }

frontend/src/utils/amount-is-valid.ts

@@ -1,10 +1,12 @@
-const MINIMUM_AMOUNT = 25;
+const MINIMUM_AMOUNT = 10;
+const MAXIMUM_AMOUNT = 25_000;
 
 export const amountIsValid = (amount: string) => {
   const float = parseFloat(amount);
   if (Number.isNaN(float)) return false;
   if (float < 0) return false;
   if (float < MINIMUM_AMOUNT) return false;
+  if (float > MAXIMUM_AMOUNT) return false;
 
   return true;
 };