feat: unlink the enterprise learner in non blocking manner

src/components/app/data/services/enterpriseCustomerUser.js

@@ -204,3 +204,14 @@ export async function updateUserCsodParams({ data }) {
   const url = `${getConfig().LMS_BASE_URL}/integrated_channels/api/v1/cornerstone/save-learner-information`;
   return getAuthenticatedHttpClient().post(url, data);
 }
+
+/**
+ * Helper function to uunlink enterprise customer user by making a POST API request.
+ * @param {Object} params - The parameters object.
+ * @param {Object} params.enterpriseCustomerUser - The enterprise customer user that should be unlinked.
+ * @returns {Promise} - A promise that resolves when the active enterprise customer user is unlinked.
+ */
+export async function postUnlinkUserFromEnterprise(enterpriseCustomerUserUUID, userEmail) {
+  const url = `${getConfig().LMS_BASE_URL}/enterprise/api/v1/enterprise-customer/${enterpriseCustomerUserUUID}/unlink_users/`;
+  return getAuthenticatedHttpClient().post(url, { user_emails: [userEmail], is_relinkable: true });
+}

src/components/expired-subscription-modal/index.jsx

@@ -2,22 +2,32 @@ import {
   useToggle, AlertModal, Button, ActionRow,
 } from '@openedx/paragon';
 import DOMPurify from 'dompurify';
-import { useSubscriptions } from '../app/data';
+import { useContext } from 'react';
+import { AppContext } from '@edx/frontend-platform/react';
+import { postUnlinkUserFromEnterprise, useEnterpriseCustomer, useSubscriptions } from '../app/data';
 
 const ExpiredSubscriptionModal = () => {
   const { data: { customerAgreement } } = useSubscriptions();
+  const {
+    authenticatedUser: { email: userEmail },
+  } = useContext(AppContext);
+  const { data: enterpriseCustomer } = useEnterpriseCustomer();
+
   const [isOpen] = useToggle(true);
   if (!customerAgreement?.hasCustomLicenseExpirationMessaging) {
     return null;
   }
+  const onClickHandler = () => {
+    postUnlinkUserFromEnterprise(enterpriseCustomer.uuid, userEmail);
+  };
   return (
     <AlertModal
       title={<h3 className="mb-2">{customerAgreement.modalHeaderText}</h3>}
       isOpen={isOpen}
       isBlocking
       footerNode={(
         <ActionRow>
-          <Button href={customerAgreement.urlForButtonInModal}>
+          <Button href={customerAgreement.urlForButtonInModal} onClick={onClickHandler}>
             {customerAgreement.buttonLabelInModal}
           </Button>
         </ActionRow>
@@ -31,6 +41,7 @@ const ExpiredSubscriptionModal = () => {
         ),
       }}
       />
+      <p>{userEmail}{enterpriseCustomer.uuid}</p>
     </AlertModal>
   );
 };