Custom Quick Actions on the LWC page when Modal is created using an Aura component

Quick Actions can’t be used with Lightning Web components. Let’s say that the record page has a button that, when clicked, integrates an Aura component that displays a modal. On the Lightning Web Component page, the coding is complete, and there are custom Quick Actions in use. In order to close the dialogue that has been started, we must follow the actions that are briefly described below.

formIntegration.html
<footer>
<div class="modal-footer slds-modal__footer attach-to-bottom">
<button class="slds-button slds-button_neutral" onclick={closeModal} title="Close" >Cancel</button>
<button class="slds-button slds-button_brand" onclick={handleForm}>Combine And Merge</button>
</div>
</footer>


formIntegration.js
closeModal() {
const closeQA = new CustomEvent('close');
this.dispatchEvent(closeQA);
}

Here above, we are calling an event and passing data to the parent component.
We will now examine the code of the Parent Lightning Component and use one method to close the Quick Action modal.

FormAuraComponent.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickActionWithoutHeader,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name="recordId" type="String"/>
<div class="slds-col modal-header slds-modal__header">
<h2 class="title slds-text-heading--medium">Form</h2>
</div>
<c:FormIntegration aura:id="formIntegration" recordId="{!v.recordId}" onclose="{!c.closeQA}"></c:FormIntegration>
</aura:component>

FormAuraComponent.js
({
closeQA : function(component, event, helper) {
$A.get("e.force:closeQuickAction").fire();
}
})
So, this way, we can make custom Quick Actions on the Lightning Web Component page and use fire events on the Aura component.