Skip to content

Commit

Permalink
✨ Frontend: Payment methods (#4759)
Browse files Browse the repository at this point in the history
  • Loading branch information
odeimaiz authored Sep 15, 2023
1 parent 4f51fb4 commit 0bf85e1
Show file tree
Hide file tree
Showing 6 changed files with 695 additions and 15 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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": {
Expand All @@ -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":
Expand All @@ -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();
Expand All @@ -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);
Expand All @@ -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];

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
}
}
});
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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";
Expand Down
Original file line number Diff line number Diff line change
@@ -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
});
});
}
}
});
Loading

0 comments on commit 0bf85e1

Please sign in to comment.