From bc0eb5cbf5a776bd7ff537abaa2f39b4cfb47580 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 9 Aug 2023 00:10:47 +0800
Subject: [PATCH] Use RQ mutation for updating billing address in Org V1
 billing settings

---
 .../BillingAddress/BillingAddress.tsx         | 65 ++++++++-----------
 ...zation-customer-profile-update-mutation.ts |  2 +-
 2 files changed, 29 insertions(+), 38 deletions(-)

diff --git a/studio/components/interfaces/Organization/BillingSettings/BillingAddress/BillingAddress.tsx b/studio/components/interfaces/Organization/BillingSettings/BillingAddress/BillingAddress.tsx
index 510117e4e2c..114ca9c2dd0 100644
--- a/studio/components/interfaces/Organization/BillingSettings/BillingAddress/BillingAddress.tsx
+++ b/studio/components/interfaces/Organization/BillingSettings/BillingAddress/BillingAddress.tsx
@@ -5,9 +5,8 @@ import { Button, Form, Input, Listbox } from 'ui'
 
 import NoPermission from 'components/ui/NoPermission'
 import Panel from 'components/ui/Panel'
+import { useOrganizationCustomerProfileUpdateMutation } from 'data/organizations/organization-customer-profile-update-mutation'
 import { useCheckPermissions, useSelectedOrganization, useStore } from 'hooks'
-import { patch } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
 import { COUNTRIES } from './BillingAddress.constants'
 
 export interface BillingAddressProps {
@@ -18,9 +17,30 @@ export interface BillingAddressProps {
 
 const BillingAddress = ({ loading, address, onAddressUpdated }: BillingAddressProps) => {
   const { ui } = useStore()
+  const [isDirty, setIsDirty] = useState(false)
   const selectedOrganization = useSelectedOrganization()
+
   const orgSlug = selectedOrganization?.slug ?? ''
   const { city, country, line1, line2, postal_code, state } = address
+  const initialValues = { city, country, line1, line2, postal_code, state }
+
+  const { mutate: updateCustomer, isLoading: isUpdating } =
+    useOrganizationCustomerProfileUpdateMutation({
+      onSuccess: (updatedCustomer) => {
+        ui.setNotification({
+          category: 'success',
+          message: 'Successfully updated billing address',
+        })
+        setIsDirty(false)
+        onAddressUpdated(updatedCustomer.address)
+      },
+      onError: (error) => {
+        ui.setNotification({
+          category: 'error',
+          message: `Failed to update billing address: ${error.message}`,
+        })
+      },
+    })
 
   const canReadBillingAddress = useCheckPermissions(
     PermissionAction.BILLING_READ,
@@ -31,16 +51,6 @@ const BillingAddress = ({ loading, address, onAddressUpdated }: BillingAddressPr
     'stripe.customer'
   )
 
-  const [isDirty, setIsDirty] = useState(false)
-  const initialValues = {
-    city,
-    country,
-    line1,
-    line2,
-    postal_code,
-    state,
-  }
-
   const onValidate = (values: any) => {
     const errors = {} as any
     if (isEqual(values, initialValues)) {
@@ -51,27 +61,8 @@ const BillingAddress = ({ loading, address, onAddressUpdated }: BillingAddressPr
     return errors
   }
 
-  const onSubmit = async (values: any, { setSubmitting }: any) => {
-    try {
-      setSubmitting(true)
-      const updatedCustomer = await patch(`${API_URL}/organizations/${orgSlug}/customer`, {
-        address: values,
-      })
-      if (updatedCustomer.error) throw updatedCustomer.error
-      ui.setNotification({
-        category: 'success',
-        message: 'Successfully updated billing address',
-      })
-      onAddressUpdated(updatedCustomer.address)
-    } catch (error: any) {
-      ui.setNotification({
-        category: 'error',
-        message: `Failed to update billing address: ${error.message}`,
-      })
-    } finally {
-      setSubmitting(false)
-      setIsDirty(false)
-    }
+  const onSubmit = async (values: any) => {
+    updateCustomer({ slug: orgSlug, address: values })
   }
 
   return (
@@ -96,7 +87,7 @@ const BillingAddress = ({ loading, address, onAddressUpdated }: BillingAddressPr
             validate={onValidate}
             onSubmit={onSubmit}
           >
-            {({ isSubmitting, handleReset }: any) => {
+            {({ handleReset }: any) => {
               return (
                 <>
                   <Panel.Content className="w-3/5 space-y-2">
@@ -172,7 +163,7 @@ const BillingAddress = ({ loading, address, onAddressUpdated }: BillingAddressPr
                       <Button
                         type="default"
                         htmlType="reset"
-                        disabled={!isDirty || isSubmitting || !canUpdateBillingAddress}
+                        disabled={!isDirty || isUpdating || !canUpdateBillingAddress}
                         onClick={() => {
                           handleReset()
                           setIsDirty(false)
@@ -183,8 +174,8 @@ const BillingAddress = ({ loading, address, onAddressUpdated }: BillingAddressPr
                       <Button
                         type="primary"
                         htmlType="submit"
-                        loading={isSubmitting}
-                        disabled={!isDirty || isSubmitting || !canUpdateBillingAddress}
+                        loading={isUpdating}
+                        disabled={!isDirty || isUpdating || !canUpdateBillingAddress}
                       >
                         Save
                       </Button>
diff --git a/studio/data/organizations/organization-customer-profile-update-mutation.ts b/studio/data/organizations/organization-customer-profile-update-mutation.ts
index 41f9b3724f8..47f3cd7a942 100644
--- a/studio/data/organizations/organization-customer-profile-update-mutation.ts
+++ b/studio/data/organizations/organization-customer-profile-update-mutation.ts
@@ -67,7 +67,7 @@ export const useOrganizationCustomerProfileUpdateMutation = ({
     },
     async onError(data, variables, context) {
       if (onError === undefined) {
-        toast.error(`Failed to update billing address: ${data.message}`)
+        toast.error(`Failed to update customer profile: ${data.message}`)
       } else {
         onError(data, variables, context)
       }