LWC Component that communicates with the CPQ QLE via the EasyXDM library.

index.html

<template>
    <lightning-card>
    
        <pre>{debugVal}</pre>

        <div slot="footer">
            <lightning-button
                name={saveBtn}
                variant="brand-outline"
                label="Save"
                onclick={handleButtonClick}>
            </lightning-button>

            <lightning-button
                name={cancelBtn}
                variant="destructive"
                label="Cancel"
                onclick={handleButtonClick}>
            </lightning-button>
        </div>
    </lightning-card>
</template>

indexController.js

import { LightningElement, api } from 'lwc';

export default class Index extends LightningElement {

    @api xdm;
    @api cd;
    
    get debugVal(){
        return JSON.stringify(this.cd, null, 4);
    }

    get cancelBtn(){
        return 'close_btn';
    }

    get saveBtn(){
        return 'save_btn';
    }

    handleButtonClick(event){
        if(event.target.name === this.cancelBtn){

            let rpc = new this.xdm.Rpc({},{
                remote: {
                    postMessage: {}
                },
                local: {
                    postMessage: function (message) { }
                }
            });

            /* 
                If you set the action to "reload" and pass the configData back to CPQ then the entire QLE 
                will reload and the changes you made on the server with your component should be there (but make sure)
            */
            // let configData = JSON.parse(JSON.stringify(this.cd))
            // configData.actions.push('reload');
            // rpc.postMessage(JSON.stringify(configData));

            // passing null back to CPQ will close the popup and keep the QLE in whatever
            rpc.postMessage(null);
        }
        else if(event.target.name === this.saveBtn){
            alert('SAVE');
        }
    }
}