Button Click Handler is not working

[Tech-Kishan]

Other Development Issue

Summary

Describe the issue
We have customized a button where we can see some TOP Products of that store, and once i get my product and i click onto that product button it will added to the cart but as of now i can only see the product but I'm not being able to add the product to the cart by clicking onto that product.

Version and Error Info
Commerce SDK Version: 9.47
Exception/Error Details: Product is not being added after i click onto the product in Dialog List

Screenshots

This is my HTML Code :

This code below belongs to Product Opertaion Handler :

This code belongs to the Type Script of Selection Dialog box where we can see out products and toggle between the Product by Name And ID :

export default class ProductSelectionDialog extends Dialogs.ExtensionTemplatedDialogBase {

public toggleSwitchSortOrder: Controls.IToggle;
public sortByName: ko.Observable<boolean>;  
public selectedValue: ko.Observable<string>;  

public convertedListItemsByName: ko.ObservableArray<IListInputDialogItem>;
public convertedListItemsByItemId: ko.ObservableArray<IListInputDialogItem>;
public convertedListItemsSorted: ko.ObservableArray<KeyValue>;

private _resolve: ProductSelectionDialogResolve;

constructor() {
    super();
    //this.itemClickHandler = ko.observable(this);
    this.sortByName = ko.observable(false);    
    this.selectedValue = ko.observable("");    

    this.convertedListItemsByName = ko.observableArray([]);
    this.convertedListItemsByItemId = ko.observableArray([]);

    this.convertedListItemsSorted = ko.observableArray([]);
}

public onReady(element: HTMLElement): void {
    // bind
    ko.applyBindings(this, element);
    let toggleSwitchSortOrderOptions: Controls.IToggleOptions = {
        tabIndex: 0,
        enabled: true,
        checked: false,
        labelOn: "Sort by Item Number",
        labelOff: "Sort by Item Name"
    }

    let toggleRootElem: HTMLDivElement = element.querySelector("#toggleSwitchSortOrder") as HTMLDivElement;
    this.toggleSwitchSortOrder = this.context.controlFactory.create(this.context.logger.getNewCorrelationId(), "Toggle", toggleSwitchSortOrderOptions, toggleRootElem);
    this.toggleSwitchSortOrder.addEventListener("CheckedChanged", (eventData: { checked: boolean }) => {
        this.toggleSwitchSortOrderChanged(eventData.checked);
    });
}

public open(_listItems: IEntities.ITopProduct[]): Promise<IEntities.IDialogResult> {
    let promise: Promise<IEntities.IDialogResult> = new Promise<IEntities.IDialogResult>((resolve: ProductSelectionDialogResolve, reject: ProductSelectionDialogReject) => {
        /* List data that you may want to display */
        let listItems: IEntities.ITopProduct[] = _listItems;

        //console.log('Initial listItems:', listItems); // Log initial list items

        listItems = listItems.sort(this.compareItemId); 
        /* Convert your list data into an array of IListInputDialogItem */
        this.convertedListItemsByItemId(
            listItems.map((listItem: IEntities.ITopProduct): IListInputDialogItem => {
                let convertedListItem: IListInputDialogItem = {
                    label: listItem.ProductName + "    (" + listItem.ItemId + ")", // string to be displayed for the given item
                    value: listItem.Product // list data item that the string label represents
                };
                return convertedListItem;
            })
        );

        //console.log('convertedListItemsByItemId:', this.convertedListItemsByItemId()); // Log converted list items by ItemId

        listItems = listItems.sort(this.compareName); 
        this.convertedListItemsByName(
            listItems.map((listItem: IEntities.ITopProduct): IListInputDialogItem => {
                let convertedListItem: IListInputDialogItem = {
                    label: listItem.ProductName + "    (" + listItem.ItemId + ")", // string to be displayed for the given item
                    value: listItem.Product // list data item that the string label represents
                };
                return convertedListItem;
            })
        );

        //console.log('convertedListItemsByName:', this.convertedListItemsByName()); // Log converted list items by Name
        

        this._resolve = resolve;

        let option: Dialogs.ITemplatedDialogOptions = {
            title: "Select a Top Product",
            //button1: {
            //    id: "btnOk",
            //    label: "OK",
            //    isPrimary: true,
            //    onClick: this.btnOkClickHandler.bind(this)
            //    },
            button2: {
                id: "btnCancel",
                label: "Cancel", 
                onClick: this.btnCancelClickHandler.bind(this)
            }
        };

        this.openDialog(option);
    });

    return promise;
}

public itemClickHandler(selection?: any): boolean {
    this.selectedValue(selection.data.value);
    //alert("ceçilen:" + this.selectedValue());
    this.resolvePromise({
        productId: this.selectedValue()
    });
    this.closeDialog();
    return true;
}

private btnCancelClickHandler(): boolean {
    this.resolvePromise({
        productId: ""
    });
    return true;
}

private resolvePromise(result: IEntities.IDialogResult): void {
    setTimeout(this._resolve, 10000);
    if (ObjectExtensions.isFunction(this._resolve)) {
        this._resolve(<IEntities.IDialogResult>{
            productId: this.selectedValue()
        });
        this._resolve = null;
    }
}

//change sort order
private toggleSwitchSortOrderChanged(checked: boolean): void {
    this.sortByName(checked);
}

compareName = function (emp1: IEntities.ITopProduct, emp2: IEntities.ITopProduct) {
    if (emp1.ProductName > emp2.ProductName) { return 1; }
    if (emp1.ProductName < emp2.ProductName) { return -1; }
    return 0;
} 

compareItemId = function (emp1: IEntities.ITopProduct, emp2: IEntities.ITopProduct) {
    if (emp1.ItemId > emp2.ItemId) { return 1; }
    if (emp1.ItemId < emp2.ItemId) { return -1; }
    return 0;
} 

}

export class KeyValue {
Text: string;
Value: any;

constructor(text: string, value: any) {
    this.Text = text;
    this.Value = value;
}

}