feat: renamed old frontend and fixed some minor bugs

frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/PmtMethodsSection.tsx

@@ -0,0 +1,47 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { useAddOrgPmtMethod } from "@app/hooks/api";
+
+import { PmtMethodsTable } from "./PmtMethodsTable";
+
+export const PmtMethodsSection = () => {
+  const { currentOrg } = useOrganization();
+  const { mutateAsync, isPending } = useAddOrgPmtMethod();
+
+  const handleAddPmtMethodBtnClick = async () => {
+    if (!currentOrg?.id) return;
+    const url = await mutateAsync({
+      organizationId: currentOrg.id,
+      success_url: window.location.href,
+      cancel_url: window.location.href
+    });
+
+    window.location.href = url;
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-8 flex items-center">
+        <h2 className="flex-1 text-xl font-semibold text-white">Payment methods</h2>
+        <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Billing}>
+          {(isAllowed) => (
+            <Button
+              onClick={handleAddPmtMethodBtnClick}
+              colorSchema="secondary"
+              isLoading={isPending}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              isDisabled={!isAllowed}
+            >
+              Add method
+            </Button>
+          )}
+        </OrgPermissionCan>
+      </div>
+      <PmtMethodsTable />
+    </div>
+  );
+};