fix(organisation): disable delete button when active subscription exists (#7809)

Author: afsuyadi

frontend/web/components/pages/organisation-settings/tabs/general-tab/sections/DeleteOrganisation.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useHistory } from 'react-router-dom'
+import { planNames } from 'common/utils/utils'
 import { Organisation } from 'common/types/responses'
 import { useDeleteOrganisationWithToast } from 'components/pages/organisation-settings/hooks'
 import ConfirmRemoveOrganisation from 'components/modals/ConfirmRemoveOrganisation'
@@ -37,6 +38,9 @@ export const DeleteOrganisation = ({
       'p-0',
     )
   }
+  const isDeleteButtonDisabled =
+    Utils.getPlanName(organisation.subscription?.plan ?? '') !==
+      planNames.free && !organisation.subscription?.cancellation_date
 
   return (
     <>
@@ -53,10 +57,18 @@ export const DeleteOrganisation = ({
           data-test='delete-org-btn'
           onClick={handleDelete}
           theme='danger'
-          disabled={isLoading}
+          disabled={isLoading || isDeleteButtonDisabled}
         >
           {isLoading ? 'Deleting...' : 'Delete Organisation'}
         </Button>
+        {isDeleteButtonDisabled && (
+          <div className='col-md-7'>
+            <p className='text-danger'>
+              You need to cancel your active subscriptions before deleting your
+              organisation.
+            </p>
+          </div>
+        )}
       </Row>
     </>
   )