Restyle org name change section

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx

@@ -3,9 +3,11 @@ import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
-import Button from "@app/components/basic/buttons/Button";
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import { FormControl,Input } from "@app/components/v2";
+import { 
+    Button,
+    FormControl,
+    Input} from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { 
     useGetOrgBillingDetails,
@@ -26,7 +28,7 @@ export const CompanyNameSection = () => {
         resolver: yupResolver(schema)
     });
     const { data } = useGetOrgBillingDetails(currentOrg?._id ?? "");
-    const updateOrgBillingDetails = useUpdateOrgBillingDetails();
+    const { mutateAsync, isLoading } = useUpdateOrgBillingDetails();
     
     useEffect(() => {
         if (data) {
@@ -40,7 +42,7 @@ export const CompanyNameSection = () => {
         try {
             if (!currentOrg?._id) return;
             if (name === "") return;
-            await updateOrgBillingDetails.mutateAsync({
+            await mutateAsync({
                 name,
                 organizationId: currentOrg._id
             });
@@ -82,15 +84,13 @@ export const CompanyNameSection = () => {
                     name="name"
                 />
             </div>
-            <div className="inline-block">
-                <Button
-                    text="Save"
-                    type="submit"
-                    color="mineshaft"
-                    size="md"
-                    onButtonPressed={() => console.log("Saved company name")}
-                />
-            </div>
+            <Button
+                type="submit"
+                colorSchema="secondary"
+                isLoading={isLoading}
+            >
+                Save
+            </Button>
         </form>
     );
 }

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/InvoiceEmailSection.tsx

@@ -3,9 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
-import Button from "@app/components/basic/buttons/Button";
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import {
+  Button,
   FormControl,
   Input} from "@app/components/v2";
 import { useOrganization } from "@app/context";
@@ -28,7 +28,7 @@ export const InvoiceEmailSection = () => {
         resolver: yupResolver(schema)
     });
     const { data } = useGetOrgBillingDetails(currentOrg?._id ?? "");
-    const updateOrgBillingDetails = useUpdateOrgBillingDetails();
+    const { mutateAsync, isLoading } = useUpdateOrgBillingDetails();
 
     useEffect(() => {
         if (data) {
@@ -43,7 +43,7 @@ export const InvoiceEmailSection = () => {
             if (!currentOrg?._id) return;
             if (email === "") return;
 
-            await updateOrgBillingDetails.mutateAsync({
+            await mutateAsync({
                 email,
                 organizationId: currentOrg._id
             });
@@ -85,15 +85,13 @@ export const InvoiceEmailSection = () => {
                     name="email"
                 />
             </div>
-            <div className="inline-block">
-                <Button
-                    text="Save"
-                    type="submit"
-                    color="mineshaft"
-                    size="md"
-                    onButtonPressed={() => console.log("Saved email address")}
-                />
-            </div>
+            <Button
+                type="submit"
+                colorSchema="secondary"
+                isLoading={isLoading}
+            >
+                Save
+            </Button>
         </form>
     );
 }

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx

@@ -1,6 +1,10 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
 
-import Button from "@app/components/basic/buttons/Button";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  Button
+} from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useAddOrgPmtMethod } from "@app/hooks/api";
 
@@ -8,11 +12,11 @@ import { PmtMethodsTable } from "./PmtMethodsTable";
 
 export const PmtMethodsSection = () => {
     const { currentOrg } = useOrganization();
-    const addOrgPmtMethod = useAddOrgPmtMethod();
+    const { mutateAsync, isLoading } = useAddOrgPmtMethod();
     
     const handleAddPmtMethodBtnClick = async () => {
         if (!currentOrg?._id) return;
-        const url = await addOrgPmtMethod.mutateAsync({
+        const url = await mutateAsync({
             organizationId: currentOrg._id,
             success_url: window.location.href,
             cancel_url: window.location.href
@@ -27,16 +31,14 @@ export const PmtMethodsSection = () => {
                 <h2 className="text-xl font-semibold flex-1 text-white">
                     Payment Methods
                 </h2>
-                <div className="inline-block">
-                    <Button
-                        text="Add method"
-                        type="submit"
-                        color="mineshaft"
-                        size="md"
-                        icon={faPlus}
-                        onButtonPressed={handleAddPmtMethodBtnClick}
-                    />
-                </div>
+                <Button
+                    onClick={handleAddPmtMethodBtnClick}
+                    colorSchema="secondary"
+                    isLoading={isLoading}
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                >
+                    Add method
+                </Button>
             </div>
             <PmtMethodsTable />
         </div>

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx

@@ -1,6 +1,9 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
 
-import Button from "@app/components/basic/buttons/Button";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button } from "@app/components/v2";
+// import Button from "@app/components/basic/buttons/Button";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { TaxIDModal } from "./TaxIDModal";
@@ -17,16 +20,13 @@ export const TaxIDSection = () => {
                 <h2 className="text-xl font-semibold flex-1 text-white">
                     Tax ID
                 </h2>
-                <div className="inline-block">
-                    <Button
-                        text="Add Tax ID"
-                        type="submit"
-                        color="mineshaft"
-                        size="md"
-                        icon={faPlus}
-                        onButtonPressed={() => handlePopUpOpen("addTaxID")}
-                    />
-                </div>
+                <Button
+                    onClick={() => handlePopUpOpen("addTaxID")}
+                    colorSchema="secondary"
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                >
+                    Add method
+                </Button>
             </div>
             <TaxIDTable />
             <TaxIDModal