Skip to content

Commit

Permalink
✨ Auto-recharge: save changes (#4866)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Oct 17, 2023
1 parent 07f518f commit b43b2d4
Show file tree
Hide file tree
Showing 6 changed files with 113 additions and 84 deletions.
151 changes: 89 additions & 62 deletions services/static-webserver/client/source/class/osparc/desktop/credits/AutoRecharge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,7 @@ qx.Class.define("osparc.desktop.credits.AutoRecharge", {
},

members: {
__lowerThreshold: null,
__paymentAmount: null,
__nTopUps: null,
__paymentMethod: null,
__form: null,

_createChildControlImpl: function(id) {
let control;
Expand All @@ -62,50 +59,64 @@ qx.Class.define("osparc.desktop.credits.AutoRecharge", {
this._add(control);
break;
case "auto-recharge-form":
control = this.__getAutoRechargeOptions();
control = this.__getAutoRechargeForm();
this._add(control);
break;
case "enable-auto-recharge-button":
control = this.__getEnableAutoRechargeButton();
this._add(control);
break;
case "buttons-layout-2":
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
this._add(control);
break;
case "save-auto-recharge-button":
control = this.__getSaveAutoRechargeButton();
control.exclude();
this._add(control);
this.getChildControl("buttons-layout-2").add(control);
break;
case "disable-auto-recharge-button":
control = this.__getDisableAutoRechargeButton();
control.exclude();
this._add(control);
this.getChildControl("buttons-layout-2").add(control);
break;
}
return control || this.base(arguments, id);
},

__buildLayout: function() {
this.getChildControl("auto-recharge-title");
this.getChildControl("auto-recharge-description");
this.getChildControl("auto-recharge-form");
this.getChildControl("enable-auto-recharge-button");
this.getChildControl("save-auto-recharge-button");
this.getChildControl("disable-auto-recharge-button");
},

__applyWallet: function(wallet) {
let myAccessRights = null;
if (wallet) {
myAccessRights = wallet.getMyAccessRights();
if (myAccessRights["write"]) {
this.__populateForms();
this.__requestData();
}
}
this.setEnabled(Boolean(myAccessRights && myAccessRights["write"]));
},

__populateForms: function() {
__requestData: function() {
const wallet = this.getWallet();
// populate the payment methods
osparc.desktop.credits.Utils.getPaymentMethods(wallet.getWalletId())
.then(paymentMethods => {
this.__paymentMethod.removeAll();
const paymentMethodSB = this.__form.getItem("paymentMethod");
paymentMethodSB.removeAll();
paymentMethods.forEach(paymentMethod => {
let label = paymentMethod.cardHolderName;
label += " ";
label += paymentMethod.cardNumberMasked.substr(paymentMethod.cardNumberMasked.length - 9);
const lItem = new qx.ui.form.ListItem(label, null, paymentMethod.idr);
this.__paymentMethod.add(lItem);
paymentMethodSB.add(lItem);
});
});

Expand All @@ -116,69 +127,62 @@ qx.Class.define("osparc.desktop.credits.AutoRecharge", {
}
};
osparc.data.Resources.fetch("auto-recharge", "get", params)
.then(data => {
this.__lowerThreshold.setValue(data["minBalanceInUsd"]);
this.__paymentAmount.setValue(data["topUpAmountInUsd"]);
this.__nTopUps.setValue(data["topUpCountdown"] ? data["topUpCountdown"] : -1);
osparc.desktop.credits.Utils.getPaymentMethod(data["paymentMethodId"])
.then(paymentMethod => {
if (paymentMethod) {
console.log("paymentMethod", paymentMethod);
this.__paymentMethod.getSelectables().forEach(selectable => {
console.log("selectable", selectable);
});
}
});

if (data["enabled"]) {
this.getChildControl("enable-auto-recharge-button").exclude();
this.getChildControl("save-auto-recharge-button").show();
this.getChildControl("disable-auto-recharge-button").show();
} else {
this.getChildControl("enable-auto-recharge-button").show();
this.getChildControl("save-auto-recharge-button").exclude();
this.getChildControl("disable-auto-recharge-button").exclude();
}
})
.then(arData => this.__populateForm(arData))
.catch(err => console.error(err.message));
},

__buildLayout: function() {
this.getChildControl("auto-recharge-title");
this.getChildControl("auto-recharge-description");
this.getChildControl("auto-recharge-form");
this.getChildControl("enable-auto-recharge-button");
this.getChildControl("save-auto-recharge-button");
this.getChildControl("disable-auto-recharge-button");
__populateForm: function(arData) {
this.__form.getItem("minBalanceInUsd").setValue(arData["minBalanceInUsd"]);
this.__form.getItem("topUpAmountInUsd").setValue(arData["topUpAmountInUsd"]);
this.__form.getItem("topUpCountdown").setValue(arData["topUpCountdown"] ? arData["topUpCountdown"] : -1);
const paymentMethodSB = this.__form.getItem("paymentMethod");
const paymentMethodFound = paymentMethodSB.getSelectables().find(selectable => selectable.getModel() === arData["paymentMethodId"]);
if (paymentMethodFound) {
paymentMethodSB.setSelection([paymentMethodFound]);
}

if (arData["enabled"]) {
this.getChildControl("enable-auto-recharge-button").exclude();
this.getChildControl("save-auto-recharge-button").show();
this.getChildControl("disable-auto-recharge-button").show();
} else {
this.getChildControl("enable-auto-recharge-button").show();
this.getChildControl("save-auto-recharge-button").exclude();
this.getChildControl("disable-auto-recharge-button").exclude();
}
},

__getAutoRechargeOptions: function() {
__getAutoRechargeForm: function() {
const form = this.__form = new qx.ui.form.Form();

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 ($):"),
value: this.tr("When balance goes below (US$):"),
font: "text-14"
});
layout.add(lowerThresholdLabel);

const lowerThresholdField = this.__lowerThreshold = new qx.ui.form.Spinner().set({
const lowerThresholdField = new qx.ui.form.Spinner().set({
minimum: 0,
maximum: 10000,
maxWidth: 200
});
form.add(lowerThresholdField, null, null, "minBalanceInUsd");
layout.add(lowerThresholdField);

const balanceBackLabel = new qx.ui.basic.Label().set({
value: this.tr("Top up with ($):"),
value: this.tr("Top up with (US$):"),
font: "text-14"
});
layout.add(balanceBackLabel);

const paymentAmountField = this.__paymentAmount = new qx.ui.form.Spinner().set({
const paymentAmountField = new qx.ui.form.Spinner().set({
minimum: 0,
maximum: 10000,
maxWidth: 200
});
form.add(paymentAmountField, null, null, "topUpAmountInUsd");
layout.add(paymentAmountField);

const nTopUpsLabel = new qx.ui.basic.Label().set({
Expand All @@ -187,11 +191,12 @@ qx.Class.define("osparc.desktop.credits.AutoRecharge", {
});
layout.add(nTopUpsLabel);

const nTopUpsField = this.__nTopUps = new qx.ui.form.Spinner().set({
const nTopUpsField = new qx.ui.form.Spinner().set({
minimum: -1,
maximum: 100,
maxWidth: 200
});
form.add(nTopUpsField, null, null, "topUpCountdown");
layout.add(nTopUpsField);

const label = new qx.ui.basic.Label().set({
Expand All @@ -200,27 +205,28 @@ qx.Class.define("osparc.desktop.credits.AutoRecharge", {
});
layout.add(label);

const paymentMethods = this.__paymentMethod = new qx.ui.form.SelectBox().set({
const paymentMethods = new qx.ui.form.SelectBox().set({
maxWidth: 200
});
form.add(paymentMethods, null, null, "paymentMethod");
layout.add(paymentMethods);

return layout;
},

__getFieldsData: function() {
return {
minBalanceInUsd: this.__lowerThreshold.getValue(),
topUpAmountInUsd: this.__paymentAmount.getValue(),
topUpCountdown: this.__nTopUps.getValue(),
paymentMethodId: this.__paymentMethod.getSelection()[0].getModel()
minBalanceInUsd: this.__form.getItem("minBalanceInUsd").getValue(),
topUpAmountInUsd: this.__form.getItem("topUpAmountInUsd").getValue(),
topUpCountdown: this.__form.getItem("topUpCountdown").getValue(),
paymentMethodId: this.__form.getItem("paymentMethod").getSelection()[0].getModel()
};
},

__getEnableAutoRechargeButton: function() {
const enableAutoRechargeBtn = new osparc.ui.form.FetchButton().set({
label: this.tr("Enable Auto Recharge"),
font: "text-16",
label: this.tr("Enable"),
font: "text-14",
appearance: "strong-button",
maxWidth: 200,
center: true
Expand All @@ -235,8 +241,10 @@ qx.Class.define("osparc.desktop.credits.AutoRecharge", {
};
params.data["enabled"] = true;
osparc.data.Resources.fetch("auto-recharge", "put", params)
.then(() => {
this.__populateForms();
.then(arData => {
this.__populateForm(arData);
const msg = this.tr("Auto recharge was successfully enabled");
osparc.FlashMessenger.getInstance().logAs(msg, "INFO");
})
.finally(() => enableAutoRechargeBtn.setFetching(false));
});
Expand All @@ -246,18 +254,35 @@ qx.Class.define("osparc.desktop.credits.AutoRecharge", {
__getSaveAutoRechargeButton: function() {
const saveAutoRechargeBtn = new osparc.ui.form.FetchButton().set({
label: this.tr("Save changes"),
font: "text-16",
font: "text-14",
appearance: "strong-button",
maxWidth: 200,
center: true
});
saveAutoRechargeBtn.addListener("execute", () => {
saveAutoRechargeBtn.setFetching(true);
const params = {
url: {
walletId: this.getWallet().getWalletId()
},
data: this.__getFieldsData()
};
params.data["enabled"] = true;
osparc.data.Resources.fetch("auto-recharge", "put", params)
.then(arData => {
this.__populateForm(arData);
const msg = this.tr("Changes on the Auto recharge were successfully saved");
osparc.FlashMessenger.getInstance().logAs(msg, "INFO");
})
.finally(() => saveAutoRechargeBtn.setFetching(false));
});
return saveAutoRechargeBtn;
},

__getDisableAutoRechargeButton: function() {
const disableAutoRechargeBtn = new osparc.ui.form.FetchButton().set({
label: this.tr("Disable Auto Recharge"),
font: "text-16",
label: this.tr("Disable"),
font: "text-14",
appearance: "danger-button",
maxWidth: 200,
center: true
Expand All @@ -272,8 +297,10 @@ qx.Class.define("osparc.desktop.credits.AutoRecharge", {
};
params.data["enabled"] = false;
osparc.data.Resources.fetch("auto-recharge", "put", params)
.then(() => {
this.__populateForms();
.then(arData => {
this.__populateForm(arData);
const msg = this.tr("Auto recharge was successfully disabled");
osparc.FlashMessenger.getInstance().logAs(msg, "INFO");
})
.finally(() => disableAutoRechargeBtn.setFetching(false));
});
Expand Down
22 changes: 10 additions & 12 deletions services/static-webserver/client/source/class/osparc/desktop/credits/OneTimePayment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,8 @@ qx.Class.define("osparc.desktop.credits.OneTimePayment", {
this.__buildLayout();

this.initTotalPrice();
const creditPrice = osparc.store.Store.getInstance().getCreditPrice();
if (creditPrice) {
this.setCreditPrice(creditPrice);
}
const store = osparc.store.Store.getInstance();
store.bind("creditPrice", this, "creditPrice");
},

properties: {
Expand Down Expand Up @@ -133,19 +131,19 @@ qx.Class.define("osparc.desktop.credits.OneTimePayment", {
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 (US$):"),
font: "text-14"
});
vLayout.add(label);

const layout = new qx.ui.container.Composite(new qx.ui.layout.HBox(0));
const hLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(0));

const lessBtn = new qx.ui.form.Button().set({
label: this.tr("-"),
width: 25
});
lessBtn.addListener("execute", () => this.setTotalPrice(this.getTotalPrice()-1));
layout.add(lessBtn);
hLayout.add(lessBtn);

const paymentAmountField = new qx.ui.form.TextField().set({
width: 100,
Expand All @@ -156,16 +154,16 @@ qx.Class.define("osparc.desktop.credits.OneTimePayment", {
converter: val => val.toString()
});
paymentAmountField.addListener("changeValue", e => this.setTotalPrice(Number(e.getData())));
layout.add(paymentAmountField);
hLayout.add(paymentAmountField);

const moreBtn = new qx.ui.form.Button().set({
label: this.tr("+"),
width: 25
});
moreBtn.addListener("execute", () => this.setTotalPrice(this.getTotalPrice()+1));
layout.add(moreBtn);
hLayout.add(moreBtn);

vLayout.add(layout);
vLayout.add(hLayout);

return vLayout;
},
Expand All @@ -188,7 +186,7 @@ qx.Class.define("osparc.desktop.credits.OneTimePayment", {
font: "text-16"
});
this.bind("totalPrice", totalPriceLabel, "value", {
converter: totalPrice => (totalPrice ? totalPrice.toFixed(2) : 0).toString() + " $"
converter: totalPrice => (totalPrice ? totalPrice.toFixed(2) : 0).toString() + " US$"
});
layout.add(totalPriceLabel, {
row,
Expand Down Expand Up @@ -228,7 +226,7 @@ qx.Class.define("osparc.desktop.credits.OneTimePayment", {
font: "text-14"
});
this.bind("creditPrice", creditPriceLabel, "value", {
converter: nCredits => nCredits + " $"
converter: nCredits => nCredits + " US$"
});
layout.add(creditPriceLabel, {
row,
Expand Down
13 changes: 8 additions & 5 deletions services/static-webserver/client/source/class/osparc/store/StaticInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,14 @@ qx.Class.define("osparc.store.StaticInfo", {
const rTag = this.getValue("vcsReleaseTag");
const rDate = this.getValue("vcsReleaseDate");
const rUrl = this.getValue("vcsReleaseUrl");
return {
"tag": rTag,
"date": rDate,
"url": rUrl
};
if (rTag && rDate && rUrl) {
return {
"tag": rTag,
"date": rDate,
"url": rUrl
};
}
return null;
},

getMaxNumberDyNodes: function() {
Expand Down
Loading

0 comments on commit b43b2d4

Please sign in to comment.