feat: business removal from map

Makefile

@@ -3,3 +3,6 @@ check-code:
 
 test:
 	yarn test
+
+codegen:
+	yarn dev:codegen

components/account/business-map-update.tsx

@@ -16,16 +16,18 @@ const isValidBusinessInfo = ({ title, coordinates }: AccountBusinessInfo) =>
 const BusinessMapUpdate: React.FC<{
   accountDetails: AccountData
   update: (info: AccountBusinessInfo) => void
+  deleteBusiness: (username: string) => void
   updating: boolean
   loading: boolean
-}> = ({ accountDetails, update, updating = false, loading = false }) => {
+}> = ({ accountDetails, update, deleteBusiness, updating = false, loading = false }) => {
   const data = accountDetails
 
   const [title, setTitle] = useState(data?.title || "")
   const [latitude, setLatitude] = useState<number | "">(data?.coordinates?.latitude || "")
   const [longitude, setLongitude] = useState<number | "">(
     data?.coordinates?.longitude || "",
   )
+  const [username] = useState<string>(data?.username || "")
 
   const emptyClass = loading ? "filter blur-sm animate-pulse" : ""
 
@@ -54,6 +56,17 @@ const BusinessMapUpdate: React.FC<{
     alert("Invalid business info")
   }
 
+  const submitDelete: React.FormEventHandler<HTMLFormElement> = async (event) => {
+    event.preventDefault()
+
+    if (deleteBusiness) {
+      deleteBusiness(username)
+      return
+    }
+
+    alert("Invalid username")
+  }
+
   return (
     <div className="shadow p-6 min-w-0 rounded-lg shadow-xs overflow-hidden bg-white grid grid-cols-1 gap-4">
       <form className="grid grid-cols-2 gap-4" onSubmit={submit}>
@@ -122,6 +135,16 @@ const BusinessMapUpdate: React.FC<{
           </button>
         </div>
       </form>
+      <form className="grid grid-cols-2 gap-4" onSubmit={submitDelete}>
+        <div className={`${emptyClass} flex items-end justify-end`}>
+          <button
+            type="submit"
+            className="mb-0 w-full bg-blue-400 hover:bg-red-500 text-white font-bold p-2 my-4 border border-blue-500 rounded disabled:opacity-50"
+          >
+            {"Delete"}
+          </button>
+        </div>
+      </form>
     </div>
   )
 }

components/account/index.tsx

@@ -22,6 +22,7 @@ import {
   ACCOUNTS_ADD_USD_WALLET,
   ACCOUNT_UPDATE_LEVEL,
   BUSINESS_UPDATE_MAP_INFO,
+  BUSINESS_DELETE_MAP,
 } from "../../graphql/mutations"
 import { AccountLevel, AccountStatus, WalletCurrency } from "../../graphql/types"
 
@@ -153,6 +154,23 @@ function AccountDetails() {
     },
   )
 
+  const [deleteBusiness] = useMutation(
+    BUSINESS_DELETE_MAP,
+    {
+      onCompleted({ businessDeleteMapInfo }) {
+        if (businessDeleteMapInfo.accountDetails) {
+          updateData(businessDeleteMapInfo.accountDetails)
+          const usernameOrPhone =
+            businessDeleteMapInfo.accountDetails.username ??
+            businessDeleteMapInfo.accountDetails.owner.phone
+          alert(`${usernameOrPhone}'s business has been deleted successfully from map`)
+        }
+      },
+      onError: reportError,
+      fetchPolicy: "no-cache",
+    },
+  )
+
   const loading = loadingAccountByPhone || loadingAccountByUsername
 
   const usernameOrPhone = data?.username ?? data?.owner.phone
@@ -218,6 +236,14 @@ function AccountDetails() {
     alert("Username is required")
   }
 
+  const deleteBusinessDetails = (username: string) => {
+    if (!username) {
+      return
+    }
+    const input = { username }
+    return deleteBusiness({ variables: { input } })
+  }
+
   return (
     <>
       <SearchHeader
@@ -254,6 +280,7 @@ function AccountDetails() {
               <BusinessMapUpdate
                 accountDetails={data}
                 update={changeBusinessMapDetails}
+                deleteBusiness={deleteBusinessDetails}
                 updating={loadingBusinessMap}
                 loading={loading}
               />