LWC Inside Flow With Custom Footer

Lightning Web Component can be invoked via calling it inside a Lightning Screenflow. You might wanted to control the standard lightning flow navigation and have a custom footer. The question is how we can have custom footer within a flow with buttons you want instead of previous, next or submit?
lightning/flowSupport module provides events that enable a component to control flow navigation and notify the flow of changes in attribute values. Let’s create a Lightning Web Component with name lwcInFlow in VS Code and have below files:-

lwcInFlow.html
lwcInFlow.js
lwcInFlow.js-meta.xml

lwcInFlow.html

HTML file of the lwc has record-edit-form to create contact record and have two buttons placed inside footer to submit and refresh the form.

<template>
    <lightning-record-edit-form object-api-name="Contact" onsuccess={handleSuccess}>
        <lightning-messages> </lightning-messages>
        <lightning-input-field field-name="AccountId"></lightning-input-field>
        <lightning-input-field field-name="FirstName"> </lightning-input-field>
        <lightning-input-field field-name="LastName"> </lightning-input-field>
        <lightning-input-field field-name="Email"> </lightning-input-field>
        <footer class="slds-modal__footer">
            <lightning-button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Submit">
            </lightning-button>
            <lightning-button class="slds-m-top_small" onclick={handleRefresh} name="refresh" label="Refresh">
            </lightning-button>
        </footer>
    </lightning-record-edit-form>
</template>

lwcInFlow.js

JS file of the component has imported FlowNavigationFinishEvent and NavigationMixin modules. There are two public properties defined:- availableActions and contactId. The availableActions will have all the available action to perform in Lightning Flow like NEXT, SUBMIT etc.

The file also has button handler to navigate to record and finish the flow.

import { LightningElement, api } from 'lwc';
import { FlowNavigationFinishEvent } from 'lightning/flowSupport';
import { NavigationMixin } from 'lightning/navigation';
export default class LwcInFlow extends NavigationMixin(LightningElement) {
    @api contactId;
    @api availableActions = [];
    handleSuccess(event) {
        this.contactId = event.detail.id;
        this.NavigateToRecord();
    }

    handleRefresh() {
        if (this.availableActions.find((action) => action === 'FINISH')) {
            // navigate to the next screen
            const navigateNextEvent = new FlowNavigationFinishEvent();
            this.dispatchEvent(navigateNextEvent);
        }
    }

    NavigateToRecord() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.contactId,
                objectApiName: 'Contact',
                actionName: 'view'
            }
        });
    }
}

lwcInFlow.js-meta.xml

Xml file of the lightning web component has target attribute as lightning__FlowScreen to expose the component to lightning flow.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
</LightningComponentBundle>