From 0bf85e1df26d02fa02c402d465b8cac8ee19c810 Mon Sep 17 00:00:00 2001 From: Odei Maiz <33152403+odeimaiz@users.noreply.github.com> Date: Fri, 15 Sep 2023 15:41:54 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Frontend:=20Payment=20methods=20(#4?= =?UTF-8?q?759)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../source/class/osparc/data/Resources.js | 44 ++++ .../osparc/desktop/credits/BuyCredits.js | 151 ++++++++++-- .../osparc/desktop/credits/UserCenter.js | 19 ++ .../paymentMethods/PaymentMethodDetails.js | 73 ++++++ .../paymentMethods/PaymentMethodListItem.js | 224 ++++++++++++++++++ .../desktop/paymentMethods/PaymentMethods.js | 199 ++++++++++++++++ 6 files changed, 695 insertions(+), 15 deletions(-) create mode 100644 services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethodDetails.js create mode 100644 services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethodListItem.js create mode 100644 services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethods.js diff --git a/services/static-webserver/client/source/class/osparc/data/Resources.js b/services/static-webserver/client/source/class/osparc/data/Resources.js index 30c8b5c680d..57937ae4679 100644 --- a/services/static-webserver/client/source/class/osparc/data/Resources.js +++ b/services/static-webserver/client/source/class/osparc/data/Resources.js @@ -671,6 +671,50 @@ qx.Class.define("osparc.data.Resources", { } } }, + /* + * PAYMENTS METHODS + */ + "payments-methods": { + useCache: false, + endpoints: { + init: { + method: "POST", + url: statics.API + "/wallets/{walletId}/payments-methods:init" + }, + cancel: { + method: "POST", + url: statics.API + "/wallets/{walletId}/payments-methods/{paymentMethodId}:cancel" + }, + get: { + method: "GET", + url: statics.API + "/wallets/{walletId}/payments-methods" + }, + delete: { + method: "DELETE", + url: statics.API + "/wallets/{walletId}/payments-methods/{paymentMethodId}" + } + } + }, + /* + * AUTO RECHARGE + */ + "auto-recharge": { + useCache: false, + endpoints: { + get: { + method: "GET", + url: statics.API + "/wallets/{walletId}/auto-recharge" + }, + start: { + method: "POST", + url: statics.API + "/wallets/{walletId}/auto-recharge" + }, + stop: { + method: "DELETE", + url: statics.API + "/wallets/{walletId}/auto-recharge" + } + } + }, /* * CLUSTERS */ diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/BuyCredits.js b/services/static-webserver/client/source/class/osparc/desktop/credits/BuyCredits.js index 1afa3c4cc36..e5988c09550 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/BuyCredits.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/BuyCredits.js @@ -21,7 +21,10 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", { construct: function() { this.base(arguments); - this._setLayout(new qx.ui.layout.HBox(80)); + const grid = new qx.ui.layout.Grid(80, 50); + grid.setColumnMaxWidth(0, 400); + grid.setColumnMaxWidth(1, 400); + this._setLayout(grid); this.__buildLayout(); @@ -81,14 +84,32 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", { _createChildControlImpl: function(id) { let control; switch (id) { - case "left-side": - control = new qx.ui.container.Composite(new qx.ui.layout.VBox(20)); - this._add(control); + case "wallet-layout": + control = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)); + this._add(control, { + row: 0, + column: 0 + }); + break; + case "explanation-layout": + control = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)); + this._add(control, { + row: 0, + column: 1 + }); break; - case "right-side": - control = new qx.ui.container.Composite(new qx.ui.layout.VBox(20)); + case "one-time-payment-layout": + control = new qx.ui.container.Composite(new qx.ui.layout.VBox(15)); this._add(control, { - flex: 1 + row: 1, + column: 0 + }); + break; + case "auto-recharge-layout": + control = new qx.ui.container.Composite(new qx.ui.layout.VBox(15)); + this._add(control, { + row: 1, + column: 1 }); break; case "wallet-info": { @@ -98,7 +119,7 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", { font: "text-14" }); control.add(label); - this.getChildControl("left-side").add(control); + this.getChildControl("wallet-layout").add(control); break; } case "wallet-selector": @@ -109,9 +130,21 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", { control = this.__getCreditsLeftView(); this.getChildControl("wallet-info").add(control); break; - case "one-time-payment-layout": - control = new qx.ui.container.Composite(new qx.ui.layout.VBox(15)); - this.getChildControl("left-side").add(control); + case "one-time-payment-title": + control = new qx.ui.basic.Label().set({ + value: this.tr("One time payment:"), + font: "text-16" + }); + this.getChildControl("one-time-payment-layout").add(control); + break; + case "one-time-payment-description": + control = new qx.ui.basic.Label().set({ + value: this.tr("A one-off, non-recurring payment."), + font: "text-14", + rich: true, + wrap: true + }); + this.getChildControl("one-time-payment-layout").add(control); break; case "credit-selector": control = this.__getCreditSelector(); @@ -127,7 +160,31 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", { break; case "credits-explanation": control = this.__getCreditsExplanation(); - this.getChildControl("right-side").add(control); + this.getChildControl("explanation-layout").add(control); + break; + case "auto-recharge-title": + control = new qx.ui.basic.Label().set({ + value: this.tr("Auto recharge:"), + font: "text-16" + }); + this.getChildControl("auto-recharge-layout").add(control); + break; + case "auto-recharge-description": + control = new qx.ui.basic.Label().set({ + value: this.tr("Keep your balance running smoothly by automatically setting your credits to be recharged when it runs low."), + font: "text-14", + rich: true, + wrap: true + }); + this.getChildControl("auto-recharge-layout").add(control); + break; + case "auto-recharge-options": + control = this.__getAutoRechargeOptions(); + this.getChildControl("auto-recharge-layout").add(control); + break; + case "auto-recharge-button": + control = this.__getAutoRechargeButton(); + this.getChildControl("auto-recharge-layout").add(control); break; } return control || this.base(arguments, id); @@ -147,17 +204,27 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", { __buildLayout: function() { this.getChildControl("wallet-selector"); this.getChildControl("credits-left-view"); - this.__builyOneTimePayment(); + this.__buildOneTimePayment(); this.getChildControl("credits-explanation"); + this.__buildAutoRecharge(); }, - __builyOneTimePayment: function() { + __buildOneTimePayment: function() { + this.getChildControl("one-time-payment-title"); + this.getChildControl("one-time-payment-description"); this.getChildControl("credit-selector"); this.getChildControl("summary-view"); this.getChildControl("buy-button"); }, + __buildAutoRecharge: function() { + this.getChildControl("auto-recharge-title"); + this.getChildControl("auto-recharge-description"); + this.getChildControl("auto-recharge-options"); + this.getChildControl("auto-recharge-button"); + }, + __applyTotalPrice: function(totalPrice) { let creditPrice = this.self().CREDIT_PRICES[0][1]; @@ -209,7 +276,7 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", { const vLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)); const label = new qx.ui.basic.Label().set({ - value: this.tr("Payment amount:"), + value: this.tr("Payment amount ($):"), font: "text-14" }); vLayout.add(label); @@ -529,6 +596,60 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", { layout.add(label2); return layout; + }, + + __getAutoRechargeOptions: function() { + const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)); + + const lowerThresholdLabel = new qx.ui.basic.Label().set({ + value: this.tr("When balance goes below ($):"), + font: "text-14" + }); + layout.add(lowerThresholdLabel); + + const lowerThresholdField = new qx.ui.form.TextField().set({ + maxWidth: 100, + textAlign: "center", + font: "text-14" + }); + layout.add(lowerThresholdField); + + const balanceBackLabel = new qx.ui.basic.Label().set({ + value: this.tr("Top up with ($):"), + font: "text-14" + }); + layout.add(balanceBackLabel); + + const paymentAmountField = new qx.ui.form.TextField().set({ + maxWidth: 100, + textAlign: "center", + font: "text-14" + }); + layout.add(paymentAmountField); + + const label = new qx.ui.basic.Label().set({ + value: this.tr("Payment Method:"), + font: "text-14" + }); + layout.add(label); + + const paymentMethods = new qx.ui.form.SelectBox().set({ + allowGrowX: false + }); + layout.add(paymentMethods); + + return layout; + }, + + __getAutoRechargeButton: function() { + const autoRechargeBtn = new osparc.ui.form.FetchButton().set({ + label: this.tr("Enable Auto Recharge"), + font: "text-16", + appearance: "strong-button", + maxWidth: 200, + center: true + }); + return autoRechargeBtn; } } }); diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/UserCenter.js b/services/static-webserver/client/source/class/osparc/desktop/credits/UserCenter.js index 26ccf706172..755b8b5e89d 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/UserCenter.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/UserCenter.js @@ -54,6 +54,11 @@ qx.Class.define("osparc.desktop.credits.UserCenter", { tabViews.add(buyCreditsPage); } + if (this.__walletsEnabled) { + const paymentMethodsPage = this.__paymentMethodsPage = this.__getPaymentMethodsPage(); + tabViews.add(paymentMethodsPage); + } + if (this.__walletsEnabled) { const transactionsPage = this.__transactionsPage = this.__getTransactionsPage(); tabViews.add(transactionsPage); @@ -83,6 +88,7 @@ qx.Class.define("osparc.desktop.credits.UserCenter", { __profilePage: null, __walletsPage: null, __buyCreditsPage: null, + __paymentMethodsPage: null, __transactionsPage: null, __usageOverviewPage: null, __buyCredits: null, @@ -205,6 +211,19 @@ qx.Class.define("osparc.desktop.credits.UserCenter", { return page; }, + __getPaymentMethodsPage: function() { + const title = this.tr("Payment Methods"); + const iconSrc = "@FontAwesome5Solid/credit-card/22"; + const page = new osparc.desktop.preferences.pages.BasePage(title, iconSrc); + page.showLabelOnTab(); + const paymentPethods = new osparc.desktop.paymentMethods.PaymentMethods(); + paymentPethods.set({ + margin: 10 + }); + page.add(paymentPethods); + return page; + }, + __getTransactionsPage: function() { const title = this.tr("Transactions"); const iconSrc = "@FontAwesome5Solid/exchange-alt/22"; diff --git a/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethodDetails.js b/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethodDetails.js new file mode 100644 index 00000000000..80fbd659e38 --- /dev/null +++ b/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethodDetails.js @@ -0,0 +1,73 @@ +/* ************************************************************************ + + osparc - the simcore frontend + + https://osparc.io + + Copyright: + 2023 IT'IS Foundation, https://itis.swiss + + License: + MIT: https://opensource.org/licenses/MIT + + Authors: + * Odei Maiz (odeimaiz) + +************************************************************************ */ + +qx.Class.define("osparc.desktop.paymentMethods.PaymentMethodDetails", { + extend: qx.ui.core.Widget, + + construct: function(paymentMethodData) { + this.base(arguments); + + const grid = new qx.ui.layout.Grid(20, 10); + grid.setColumnAlign(0, "right", "middle"); // resource limit value + this._setLayout(grid); + + this.__buildLayout(paymentMethodData); + }, + + statics: { + popUpInWindow: function(paymentMethodData) { + const title = qx.locale.Manager.tr("Payment Method details"); + const paymentMethodDetails = new osparc.desktop.paymentMethods.PaymentMethodDetails(paymentMethodData); + paymentMethodDetails.set({ + padding: 10 + }); + const viewWidth = 300; + const viewHeight = 300; + const win = osparc.ui.window.Window.popUpInWindow(paymentMethodDetails, title, viewWidth, viewHeight); + win.center(); + win.open(); + return win; + } + }, + + members: { + __buildLayout: function(paymentMethodData) { + [ + [this.tr("Holder name"), paymentMethodData["cardHolderName"]], + [this.tr("Type"), paymentMethodData["cardType"]], + [this.tr("Number"), paymentMethodData["cardNumberMasked"]], + [this.tr("Expiration date"), paymentMethodData["expirationMonth"] + "/" + paymentMethodData["expirationYear"]], + [this.tr("Address"), paymentMethodData["streetAddress"]], + [this.tr("ZIP code"), paymentMethodData["zipcode"]], + [this.tr("Country"), paymentMethodData["country"]] + ].forEach((pair, idx) => { + this._add(new qx.ui.basic.Label(pair[0]).set({ + font: "text-14" + }), { + row: idx, + column: 0 + }); + this._add(new qx.ui.basic.Label(pair[1]).set({ + font: "text-14" + }), { + row: idx, + column: 1 + }); + }); + } + } +}); diff --git a/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethodListItem.js b/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethodListItem.js new file mode 100644 index 00000000000..cdf335d9a9b --- /dev/null +++ b/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethodListItem.js @@ -0,0 +1,224 @@ +/* ************************************************************************ + + osparc - the simcore frontend + + https://osparc.io + + Copyright: + 2023 IT'IS Foundation, https://itis.swiss + + License: + MIT: https://opensource.org/licenses/MIT + + Authors: + * Odei Maiz (odeimaiz) + +************************************************************************ */ + +qx.Class.define("osparc.desktop.paymentMethods.PaymentMethodListItem", { + extend: osparc.ui.list.ListItemWithMenu, + + construct: function() { + this.base(arguments); + + const layout = this._getLayout(); + layout.setSpacingX(15); + layout.setColumnFlex(1, 0); + layout.setColumnFlex(2, 0); + layout.setColumnFlex(3, 0); + layout.setColumnFlex(4, 0); + layout.setColumnFlex(5, 1); + layout.setColumnFlex(6, 0); + + this.getChildControl("thumbnail").setSource("@FontAwesome5Solid/credit-card/18"); + + const cardHolderName = this.getChildControl("card-holder-name"); + this.bind("cardHolderName", cardHolderName, "value"); + + const cardType = this.getChildControl("card-type"); + this.bind("cardType", cardType, "value"); + + const cardNumberMasked = this.getChildControl("card-number-masked"); + this.bind("cardNumberMasked", cardNumberMasked, "value"); + + const expirationDate = this.getChildControl("expiration-date"); + this.bind("expirationMonth", expirationDate, "value", { + converter: month => month + "/" + this.getExpirationYear() + }); + this.bind("expirationYear", expirationDate, "value", { + converter: year => this.getExpirationMonth() + "/" + year + }); + + const store = osparc.store.Store.getInstance(); + const walletName = this.getChildControl("wallet-name"); + this.bind("walletId", walletName, "value", { + converter: walletId => { + const found = store.getWallets().find(wallet => wallet.getWalletId() === walletId); + return found ? found.getName() : this.tr("Unknown Credit Account"); + } + }); + + this.__getOptionsMenu(); + }, + + properties: { + walletId: { + check: "Number", + init: null, + nullable: false, + event: "changeWalletId" + }, + + cardHolderName: { + check: "String", + init: "null", + nullable: false, + event: "changeCardHolderName" + }, + + cardType: { + check: "String", + init: "null", + nullable: false, + event: "changeCardType" + }, + + cardNumberMasked: { + check: "String", + init: "null", + nullable: false, + event: "changeCardNumberMasked" + }, + + expirationMonth: { + check: "Number", + init: null, + nullable: false, + event: "changeExpirationMonth" + }, + + expirationYear: { + check: "Number", + init: null, + nullable: false, + event: "changeExpirationYear" + } + }, + + events: { + "openPaymentMethodDetails": "qx.event.type.Data", + "deletePaymentMethod": "qx.event.type.Data" + }, + + members: { + _createChildControlImpl: function(id) { + let control; + switch (id) { + case "card-holder-name": + control = new qx.ui.basic.Label().set({ + font: "text-14" + }); + this._add(control, { + row: 0, + column: 1, + rowSpan: 2 + }); + break; + case "card-type": + control = new qx.ui.basic.Label().set({ + font: "text-14" + }); + this._add(control, { + row: 0, + column: 2, + rowSpan: 2 + }); + break; + case "card-number-masked": + control = new qx.ui.basic.Label().set({ + font: "text-14" + }); + this._add(control, { + row: 0, + column: 3, + rowSpan: 2 + }); + break; + case "expiration-date": + control = new qx.ui.basic.Label().set({ + font: "text-14" + }); + this._add(control, { + row: 0, + column: 4, + rowSpan: 2 + }); + break; + case "wallet-name": + control = new qx.ui.basic.Label().set({ + font: "text-14" + }); + this._add(control, { + row: 0, + column: 5, + rowSpan: 2 + }); + break; + case "options-menu": { + const iconSize = 26; + control = new qx.ui.form.MenuButton().set({ + maxWidth: iconSize, + maxHeight: iconSize, + alignX: "center", + alignY: "middle", + icon: "@FontAwesome5Solid/ellipsis-v/"+(iconSize-11), + focusable: false + }); + this._add(control, { + row: 0, + column: 6, + rowSpan: 2 + }); + break; + } + } + + return control || this.base(arguments, id); + }, + + // overridden + __getOptionsMenu: function() { + const optionsMenu = this.getChildControl("options-menu"); + optionsMenu.show(); + + const menu = new qx.ui.menu.Menu().set({ + position: "bottom-right" + }); + + const viewDetailsButton = new qx.ui.menu.Button(this.tr("View details...")); + viewDetailsButton.addListener("execute", () => this.fireDataEvent("openPaymentMethodDetails", this.getKey())); + menu.add(viewDetailsButton); + + const detelePMButton = new qx.ui.menu.Button(this.tr("Delete Payment Method")); + detelePMButton.addListener("execute", () => { + const msg = this.tr("Are you sure you want to delete the Payment Method?"); + const win = new osparc.ui.window.Confirmation(msg).set({ + confirmText: this.tr("Delete"), + confirmAction: "delete" + }); + win.center(); + win.open(); + win.addListener("close", () => { + if (win.getConfirmed()) { + this.fireDataEvent("deletePaymentMethod", this.getKey()); + } + }); + }, this); + menu.add(detelePMButton); + + optionsMenu.setMenu(menu); + + return menu; + } + } +}); diff --git a/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethods.js b/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethods.js new file mode 100644 index 00000000000..782e0e1d17f --- /dev/null +++ b/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethods.js @@ -0,0 +1,199 @@ +/* ************************************************************************ + + osparc - the simcore frontend + + https://osparc.io + + Copyright: + 2023 IT'IS Foundation, https://itis.swiss + + License: + MIT: https://opensource.org/licenses/MIT + + Authors: + * Odei Maiz (odeimaiz) + +************************************************************************ */ + +qx.Class.define("osparc.desktop.paymentMethods.PaymentMethods", { + extend: qx.ui.core.Widget, + + construct: function() { + this.base(arguments); + + this._setLayout(new qx.ui.layout.VBox(20)); + + this.getChildControl("intro-text"); + this.getChildControl("add-payment-methods-button"); + this.getChildControl("payment-methods-list-layout"); + + this.__fetchPaymentMethods(); + }, + + properties: { + paymentMethods: { + check: "Array", + init: [], + nullable: false, + apply: "__applyPaymentMethods" + } + }, + + members: { + __allPaymentMethods: null, + + _createChildControlImpl: function(id) { + let control; + switch (id) { + case "intro-text": + control = new qx.ui.basic.Label().set({ + value: this.tr("Intro text about payment methods"), + font: "text-14", + rich: true, + wrap: true + }); + this._add(control); + break; + case "add-payment-methods-button": + control = new qx.ui.form.Button().set({ + appearance: "strong-button", + label: this.tr("Add Payment Method"), + icon: "@FontAwesome5Solid/plus/14", + allowGrowX: false + }); + control.addListener("execute", () => this.__addNewPaymentMethod(), this); + this._add(control); + break; + case "payment-methods-list-layout": + control = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)); + this._add(control); + break; + } + return control || this.base(arguments, id); + }, + + __addNewPaymentMethod: function() { + const wallets = osparc.store.Store.getInstance().getWallets(); + wallets.forEach(wallet => { + if (wallet.getMyAccessRights()["write"]) { + const params = { + url: { + walletId: wallet.getWalletId() + } + }; + osparc.data.Resources.fetch("payments-methods", "init", params) + .then(() => this.__fetchPaymentMethods()); + } + }); + }, + + __fetchPaymentMethods: function() { + const listLayout = this.getChildControl("payment-methods-list-layout"); + listLayout.removeAll(); + + listLayout.add(new qx.ui.basic.Label().set({ + value: this.tr("Fetching Payment Methods"), + font: "text-14", + rich: true, + wrap: true + })); + + const promises = []; + const wallets = osparc.store.Store.getInstance().getWallets(); + wallets.forEach(wallet => { + if (wallet.getMyAccessRights() && wallet.getMyAccessRights()["write"]) { + const params = { + url: { + walletId: wallet.getWalletId() + } + }; + promises.push(osparc.data.Resources.fetch("payments-methods", "get", params)); + } + }); + Promise.all(promises) + .then(paymentMethods => { + const allPaymentMethods = []; + paymentMethods.forEach(paymentMethod => allPaymentMethods.push(...paymentMethod)); + listLayout.removeAll(); + if (allPaymentMethods.length) { + listLayout.add(this.__populatePaymentMethodsList(allPaymentMethods)); + } else { + listLayout.add(new qx.ui.basic.Label().set({ + value: this.tr("No Payment Methods found"), + font: "text-14", + rich: true, + wrap: true + })); + } + }) + .catch(err => console.error(err)); + }, + + __populatePaymentMethodsList: function(allPaymentMethods) { + this.__allPaymentMethods = allPaymentMethods; + const paymentMethodsUIList = new qx.ui.form.List().set({ + decorator: "no-border", + spacing: 3, + height: 150, + width: 150, + backgroundColor: "background-main-2" + }); + + const paymentMethodsModel = this.__paymentMethodsModel = new qx.data.Array(); + const paymentMethodsCtrl = new qx.data.controller.List(paymentMethodsModel, paymentMethodsUIList, "name"); + paymentMethodsCtrl.setDelegate({ + createItem: () => new osparc.desktop.paymentMethods.PaymentMethodListItem(), + bindItem: (ctrl, item, id) => { + ctrl.bindProperty("idr", "key", null, item, id); + ctrl.bindProperty("idr", "model", null, item, id); + ctrl.bindProperty("walletId", "walletId", null, item, id); + ctrl.bindProperty("cardHolderName", "cardHolderName", null, item, id); + ctrl.bindProperty("cardType", "cardType", null, item, id); + ctrl.bindProperty("cardNumberMasked", "cardNumberMasked", null, item, id); + ctrl.bindProperty("expirationMonth", "expirationMonth", null, item, id); + ctrl.bindProperty("expirationYear", "expirationYear", null, item, id); + }, + configureItem: item => { + item.addListener("openPaymentMethodDetails", e => this.__openPaymentMethodDetails(e.getData())); + item.addListener("deletePaymentMethod", e => this.__deletePaymentMethod(e.getData())); + } + }); + + paymentMethodsModel.removeAll(); + allPaymentMethods.forEach(paymentMethod => { + const paymentMethodModel = qx.data.marshal.Json.createModel(paymentMethod); + paymentMethodsModel.append(paymentMethodModel); + }); + + const scrollContainer = new qx.ui.container.Scroll(); + scrollContainer.add(paymentMethodsUIList); + + return scrollContainer; + }, + + __findPaymentMethod: function(idr) { + return this.__allPaymentMethods.find(paymentMethod => paymentMethod["idr"] === idr); + }, + + __openPaymentMethodDetails: function(idr) { + const paymentMethod = this.__findPaymentMethod(idr); + if (paymentMethod) { + osparc.desktop.paymentMethods.PaymentMethodDetails.popUpInWindow(paymentMethod); + } + }, + + __deletePaymentMethod: function(idr) { + const paymentMethod = this.__findPaymentMethod(idr); + if (paymentMethod) { + const params = { + url: { + walletId: paymentMethod["walletId"], + paymentMethodId: paymentMethod["idr"] + } + }; + osparc.data.Resources.fetch("payments-methods", "delete", params) + .then(() => this.__fetchPaymentMethods()); + } + } + } +});