separate payment methods page

src/packages/frontend/account/account-page.tsx

@@ -29,6 +29,7 @@ import { labels } from "@cocalc/frontend/i18n";
 import PurchasesPage from "@cocalc/frontend/purchases/purchases-page";
 import PayAsYouGoPage from "@cocalc/frontend/purchases/payg-page";
 import PaymentsPage from "@cocalc/frontend/purchases/payments-page";
+import PaymentMethodsPage from "@cocalc/frontend/purchases/payment-methods-page";
 import StatementsPage from "@cocalc/frontend/purchases/statements-page";
 import SubscriptionsPage from "@cocalc/frontend/purchases/subscriptions-page";
 import { SupportTickets } from "@cocalc/frontend/support";
@@ -154,6 +155,15 @@ export const AccountPage: React.FC = () => {
         ),
         children: active_page === "payments" && <PaymentsPage />,
       });
+      items.push({
+        key: "payment-methods",
+        label: (
+          <span>
+            <Icon name="credit-card" /> Payment Methods
+          </span>
+        ),
+        children: active_page === "payment-methods" && <PaymentMethodsPage />,
+      });
       items.push({
         key: "statements",
         label: (

src/packages/frontend/purchases/address.tsx

@@ -80,6 +80,14 @@ function StripeAddressElement({ style, onFinished }: { style?; onFinished? }) {
           theme: "stripe",
         },
         loader: "never",
+        fields: {
+          phone: "always",
+        },
+        validation: {
+          phone: {
+            required: "never",
+          },
+        },
       }}
       stripe={loadStripe()}
     >

src/packages/frontend/purchases/payment-methods-page.tsx

@@ -0,0 +1,9 @@
+import PaymentMethods from "./payment-methods";
+
+export default function PaymentsPage() {
+  return (
+    <div>
+      <PaymentMethods />
+    </div>
+  );
+}

src/packages/frontend/purchases/payments-page.tsx

@@ -1,10 +1,8 @@
 import Payments from "./payments";
-import PaymentMethods from "./payment-methods";
 
 export default function PaymentsPage() {
   return (
     <div>
-      <PaymentMethods />
       <Payments />
     </div>
   );

src/packages/next/components/account/navtab.tsx

@@ -118,6 +118,11 @@ export default function AccountNavTab({ style }: Props) {
         <A href="/settings/payments">Payments</A>,
         "credit-card",
       ),
+      menuItem(
+        "payment-methods",
+        <A href="/settings/payment-methods">Payment Methods</A>,
+        "credit-card",
+      ),
       menuItem(
         "statements",
         <A href="/settings/statements">Statements</A>,