Skip to content

Commit

Permalink
Payment gateway within App (ITISFoundation#4933)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Oct 26, 2023
1 parent 783e50b commit bb4c273
Show file tree
Hide file tree
Showing 4 changed files with 180 additions and 148 deletions.
25 changes: 2 additions & 23 deletions services/static-webserver/client/source/class/osparc/desktop/credits/BillingCenter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,6 @@ qx.Class.define("osparc.desktop.credits.BillingCenter", {
__activityPage: null,
__transactionsPage: null,
__usagePage: null,
__buyCredits: null,
__transactionsTable: null,

__getOverviewPage: function() {
Expand All @@ -103,17 +102,7 @@ qx.Class.define("osparc.desktop.credits.BillingCenter", {
overview.set({
margin: 10
});
overview.addListener("buyCredits", e => {
this.__openBuyCredits();
const {
walletId
} = e.getData();
const store = osparc.store.Store.getInstance();
const found = store.getWallets().find(wallet => wallet.getWalletId() === parseInt(walletId));
if (found) {
this.__buyCredits.setWallet(found);
}
});
overview.addListener("buyCredits", () => this.__openBuyCredits());
overview.addListener("toWallets", () => this.openWallets());
overview.addListener("toActivity", () => this.__openActivity());
overview.addListener("toTransactions", () => this.__openTransactions());
Expand All @@ -136,17 +125,7 @@ qx.Class.define("osparc.desktop.credits.BillingCenter", {
walletsView.set({
margin: 10
});
walletsView.addListener("buyCredits", e => {
this.__openBuyCredits();
const {
walletId
} = e.getData();
const store = osparc.store.Store.getInstance();
const found = store.getWallets().find(wallet => wallet.getWalletId() === parseInt(walletId));
if (found) {
this.__buyCredits.setWallet(found);
}
});
walletsView.addListener("buyCredits", () => this.__openBuyCredits());
page.add(walletsView);
return page;
},
Expand Down
254 changes: 131 additions & 123 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 @@ -234,26 +234,6 @@ qx.Class.define("osparc.desktop.credits.OneTimePayment", {
});
row++;

const walletTitle = new qx.ui.basic.Label().set({
value: "Credit Account",
font: "text-14"
});
layout.add(walletTitle, {
row,
column: 0
});
const walletLabel = new qx.ui.basic.Label().set({
font: "text-14"
});
this.bind("wallet", walletLabel, "value", {
converter: wallet => wallet ? wallet.getName() : this.tr("Select Credit Account")
});
layout.add(walletLabel, {
row,
column: 1
});
row++;

return layout;
},

Expand All @@ -265,113 +245,141 @@ qx.Class.define("osparc.desktop.credits.OneTimePayment", {
maxWidth: 150,
center: true
});
buyBtn.addListener("execute", () => this.__startPayment());
return buyBtn;
},

const buyingBtn = () => {
buyBtn.set({
fetching: true,
label: this.tr("Buying...")
});
__buyingCredits: function(isBuying) {
const buyBtn = this.getChildControl("buy-button");
buyBtn.set({
fetching: isBuying,
label: isBuying ? this.tr("Buying...") : this.tr("Buy Credits")
});
},

__paymentCompleted: function(paymentData) {
this.__buyingCredits(false);

if (paymentData["completedStatus"]) {
const msg = this.tr("Payment ") + osparc.utils.Utils.onlyFirstsUp(paymentData["completedStatus"]);
switch (paymentData["completedStatus"]) {
case "SUCCESS":
osparc.FlashMessenger.getInstance().logAs(msg, "INFO");
break;
case "PENDING":
osparc.FlashMessenger.getInstance().logAs(msg, "WARNING");
break;
case "CANCELED":
case "FAILED":
osparc.FlashMessenger.getInstance().logAs(msg, "ERROR");
break;
default:
console.error("completedStatus unknown");
break;
}
}
this.fireEvent("transactionCompleted");
},

__cancelPayment: function(paymentId) {
this.__buyingCredits(false);

const wallet = this.getWallet();
// inform backend
const params = {
url: {
walletId: wallet.getWalletId(),
paymentId
}
};
const buyCreditsBtn = () => {
buyBtn.set({
fetching: false,
label: this.tr("Buy Credits")
});
osparc.data.Resources.fetch("payments", "cancelPayment", params);
},

__windowClosed: function(paymentId) {
const msg = this.tr("The window was closed. Try again and follow the instructions inside the opened window.");
osparc.FlashMessenger.getInstance().logAs(msg, "WARNING");
this.__cancelPayment(paymentId);
},

__startPayment: function() {
this.__buyingCredits(true);

const wallet = this.getWallet();
const nCredits = this.getNCredits();
const totalPrice = this.getTotalPrice();
const params = {
url: {
walletId: wallet.getWalletId()
},
data: {
priceDollars: totalPrice,
osparcCredits: nCredits
}
};
buyBtn.addListener("execute", () => {
const nCredits = this.getNCredits();
const totalPrice = this.getTotalPrice();
const wallet = this.getWallet();
buyingBtn();

const params = {
url: {
walletId: wallet.getWalletId()
},
data: {
priceDollars: totalPrice,
osparcCredits: nCredits
}
};
osparc.data.Resources.fetch("payments", "startPayment", params)
.then(data => {
const paymentId = data["paymentId"];
const url = data["paymentFormUrl"];
const options = {
width: 400,
height: 400,
top: 200,
left: 100,
scrollbars: false
};
const modal = true;
const useNativeModalDialog = false; // this allow using the Blocker

const pgWindow = osparc.desktop.credits.PaymentGatewayWindow.popUp(
url,
"pgWindow",
options,
modal,
useNativeModalDialog
);

// Listen to socket event
const socket = osparc.wrapper.WebSocket.getInstance();
const slotName = "paymentCompleted";
socket.on(slotName, jsonString => {
const paymentData = JSON.parse(jsonString);
if (paymentData["completedStatus"]) {
const msg = this.tr("Payment ") + osparc.utils.Utils.onlyFirstsUp(paymentData["completedStatus"]);
switch (paymentData["completedStatus"]) {
case "SUCCESS":
osparc.FlashMessenger.getInstance().logAs(msg, "INFO");
// demo purposes
wallet.setCreditsAvailable(wallet.getCreditsAvailable() + nCredits);
break;
case "PENDING":
osparc.FlashMessenger.getInstance().logAs(msg, "WARNING");
break;
case "CANCELED":
case "FAILED":
osparc.FlashMessenger.getInstance().logAs(msg, "ERROR");
break;
default:
console.error("completedStatus unknown");
break;
}
}
socket.removeSlot(slotName);
buyCreditsBtn();
pgWindow.close();
this.fireEvent("transactionCompleted");
});

const cancelPayment = () => {
socket.removeSlot(slotName);
buyCreditsBtn();
// inform backend
const params2 = {
url: {
walletId: wallet.getWalletId(),
paymentId
}
};
osparc.data.Resources.fetch("payments", "cancelPayment", params2);
};
// Listen to close window event (Bug: it doesn't work)
pgWindow.onbeforeunload = () => {
const msg = this.tr("The window was close. Try again and follow the instructions inside the opened window.");
osparc.FlashMessenger.getInstance().logAs(msg, "WARNING");
cancelPayment();
};
})
.catch(err => {
console.error(err);
osparc.FlashMessenger.logAs(err.message, "ERROR");
buyCreditsBtn();
osparc.data.Resources.fetch("payments", "startPayment", params)
.then(data => {
const paymentId = data["paymentId"];
const url = data["paymentFormUrl"];
const stayWithinApp = true;
const pgWindow = stayWithinApp ? this.__popUpPaymentGateway(paymentId, url) : this.__popUpPaymentGatewayOld(paymentId, url);

// Listen to socket event
const socket = osparc.wrapper.WebSocket.getInstance();
const slotName = "paymentCompleted";
socket.on(slotName, jsonString => {
const paymentData = JSON.parse(jsonString);
this.__paymentCompleted(paymentData);
socket.removeSlot(slotName);
pgWindow.close();
});
});
return buyBtn;
})
.catch(err => {
console.error(err);
osparc.FlashMessenger.logAs(err.message, "ERROR");
this.__buyingCredits(false);
});
},

__popUpPaymentGateway: function(paymentId, url) {
const options = {
width: 400,
height: 600
};

const pgWindow = osparc.desktop.credits.PaymentGatewayWindow.popUp(
url,
"Buy Credits",
options
);
// listen to "tap" instead of "execute": the "execute" is not propagated
pgWindow.getChildControl("close-button").addListener("tap", () => this.__windowClosed(paymentId));

return pgWindow;
},

__popUpPaymentGatewayOld: function(paymentId, url) {
const options = {
width: 400,
height: 600,
top: 100,
left: 200,
scrollbars: false
};
const modal = true;
const useNativeModalDialog = false; // this allow using the Blocker

const pgWindow = osparc.desktop.credits.PaymentGatewayWindow.popUpOld(
url,
"pgWindow",
options,
modal,
useNativeModalDialog
);

// Listen to close window event (Bug: it doesn't work)
pgWindow.onbeforeunload = () => this.__windowClosed(paymentId);

return pgWindow;
}
}
});
9 changes: 8 additions & 1 deletion services/static-webserver/client/source/class/osparc/desktop/credits/PaymentGatewayWindow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,14 @@ qx.Class.define("osparc.desktop.credits.PaymentGatewayWindow", {
type: "static",

statics: {
popUp: function(url, id, options, modal, useNativeModalDialog) {
popUp: function(url, title, options) {
const iframe = new qx.ui.embed.Iframe(url);
return osparc.ui.window.Window.popUpInWindow(iframe, title, options.width, options.height).set({
clickAwayClose: false
});
},

popUpOld: function(url, id, options, modal, useNativeModalDialog) {
const blocker = qx.bom.Window.getBlocker();
blocker.setBlockerColor("#FFF");
blocker.setBlockerOpacity(0.6);
Expand Down
40 changes: 39 additions & 1 deletion ...ices/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethods.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,10 +100,48 @@ qx.Class.define("osparc.desktop.paymentMethods.PaymentMethods", {
}
};
osparc.data.Resources.fetch("paymentMethods", "init", params)
.then(() => this.__fetchPaymentMethods());
.then(data => {
this.__popUpPaymentGateway(data["paymentMethodId"], data["paymentMethodFormUrl"]);
this.__fetchPaymentMethods();
});
}
},

__cancelPaymentMethod: function(paymentMethodId) {
const wallet = this.getWallet();
// inform backend
const params = {
url: {
walletId: wallet.getWalletId(),
paymentMethodId
}
};
osparc.data.Resources.fetch("paymentMethods", "cancel", params);
},

__windowClosed: function(paymentMethodId) {
const msg = this.tr("The window was closed. Try again and follow the instructions inside the opened window.");
osparc.FlashMessenger.getInstance().logAs(msg, "WARNING");
this.__cancelPaymentMethod(paymentMethodId);
},

__popUpPaymentGateway: function(paymentMethodId, url) {
const options = {
width: 400,
height: 600
};

const pgWindow = osparc.desktop.credits.PaymentGatewayWindow.popUp(
url,
"Add payment method",
options
);
// listen to "tap" instead of "execute": the "execute" is not propagated
pgWindow.getChildControl("close-button").addListener("tap", () => this.__windowClosed(paymentMethodId));

return pgWindow;
},

__fetchPaymentMethods: function() {
const listLayout = this.getChildControl("payment-methods-list-layout");
listLayout.removeAll();
Expand Down

0 comments on commit bb4c273

Please sign in to comment.