initial commit
This commit is contained in:
65
client/common-client-plugin.js
Normal file
65
client/common-client-plugin.js
Normal file
@ -0,0 +1,65 @@
|
||||
const subPage = require("./pages/subscription");
|
||||
const successPage = require("./pages/success");
|
||||
const cancelPage = require("./pages/cancel");
|
||||
|
||||
async function register({
|
||||
registerHook,
|
||||
peertubeHelpers,
|
||||
registerClientRoute,
|
||||
}) {
|
||||
|
||||
/**
|
||||
* Add link admin page
|
||||
*/
|
||||
registerHook({
|
||||
target: "action:router.navigation-end",
|
||||
handler: async (params) => {
|
||||
if (params.path.startsWith("/my-account")) {
|
||||
if (document.getElementById("subscription-link")) return;
|
||||
|
||||
let href = "/p/my-subscription";
|
||||
|
||||
// Get menu container
|
||||
const menuContainer = document.getElementsByClassName("sub-menu")[0];
|
||||
|
||||
// Create link
|
||||
const content = `
|
||||
<a _ngcontent-dke-c79="" id="subscription-link" routerlinkactive="active" class="sub-menu-entry ng-star-inserted" href="${href}">
|
||||
${await peertubeHelpers.translate("Storage")}
|
||||
</a>
|
||||
`;
|
||||
|
||||
// Create node for it
|
||||
const nodeLink = document.createElement("div");
|
||||
nodeLink.innerHTML = content.trim();
|
||||
|
||||
// Insert to menu container
|
||||
menuContainer.appendChild(nodeLink.firstChild);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// Register routes
|
||||
registerClientRoute({
|
||||
route: "my-subscription",
|
||||
onMount: ({ rootEl }) => {
|
||||
subPage.showPage({rootEl, peertubeHelpers});
|
||||
},
|
||||
});
|
||||
|
||||
registerClientRoute({
|
||||
route: "subscription-success",
|
||||
onMount: ({ rootEl }) => {
|
||||
successPage.showPage({rootEl, peertubeHelpers});
|
||||
},
|
||||
});
|
||||
|
||||
registerClientRoute({
|
||||
route: "subscription-cancel",
|
||||
onMount: ({ rootEl }) => {
|
||||
cancelPage.showPage({rootEl, peertubeHelpers});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export { register };
|
16
client/pages/cancel.js
Normal file
16
client/pages/cancel.js
Normal file
@ -0,0 +1,16 @@
|
||||
async function showPage({ rootEl, peertubeHelpers }) {
|
||||
// Redirect to login page if not auth
|
||||
if (!peertubeHelpers.isLoggedIn()) return (window.location.href = "/login");
|
||||
|
||||
const settings = await peertubeHelpers.getSettings();
|
||||
const description = await peertubeHelpers.markdownRenderer.enhancedMarkdownToHTML(settings["sell-cancel-description"]);
|
||||
|
||||
rootEl.innerHTML = `
|
||||
<div class="orion-content text-center mt-5">
|
||||
<h1>${await peertubeHelpers.translate("Subscription canceled.")}</h1>
|
||||
<p>${description}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
export { showPage };
|
157
client/pages/subscription.js
Normal file
157
client/pages/subscription.js
Normal file
@ -0,0 +1,157 @@
|
||||
async function showPage({ rootEl, peertubeHelpers }) {
|
||||
// Redirect to login page if not auth
|
||||
if (!peertubeHelpers.isLoggedIn()) return (window.location.href = "/login");
|
||||
|
||||
const { translate } = peertubeHelpers;
|
||||
const loading = await peertubeHelpers.translate("Loading");
|
||||
rootEl.innerHTML = loading + "...";
|
||||
|
||||
// Get settings
|
||||
const settings = await peertubeHelpers.getSettings();
|
||||
const currency = settings['sell-currency'];
|
||||
const description = await peertubeHelpers.markdownRenderer.enhancedMarkdownToHTML(settings["sell-description"]);
|
||||
const plans = [];
|
||||
|
||||
for(let i = 1; i <= 5; i++) {
|
||||
const name = settings["plan-" + i + "-name"];
|
||||
const key = settings["plan-" + i + "-key"];
|
||||
const storage = settings["plan-" + i + "-storage"];
|
||||
const price = settings["plan-" + i + "-price"];
|
||||
|
||||
plans.push({
|
||||
name: name,
|
||||
key: key,
|
||||
storage: storage,
|
||||
price: price
|
||||
});
|
||||
}
|
||||
|
||||
// Fetch session id and subscribed plan (if any)
|
||||
let session_id = null, sub_plan = null;
|
||||
const response = await fetch(peertubeHelpers.getBaseRouterRoute() + "/get-session-id", {
|
||||
method: "GET",
|
||||
headers: peertubeHelpers.getAuthHeader(),
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
// If have error
|
||||
if (!data || !data.status || (data.status && data.status !== "success")) {
|
||||
peertubeHelpers.notifier.error(data.message || "Unknown error");
|
||||
}else{
|
||||
session_id = data?.data?.session_id;
|
||||
sub_plan = data?.data?.sub_plan;
|
||||
}
|
||||
|
||||
rootEl.innerHTML = `
|
||||
<div class="orion-content text-center">
|
||||
<h1>${await peertubeHelpers.translate("Choose your Subscription")}</h1>
|
||||
<p>${description.length ? description : await peertubeHelpers.translate("You want tu spport us ? Or need more space ? Your in the right place!")}</p>
|
||||
<div class="mt-5">
|
||||
<div class="row">
|
||||
${(await Promise.all(plans.map(async (plan) =>
|
||||
`<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form method="POST" action="#" class="orionSubscriptionForm">
|
||||
<h3 class="card-title">${plan.name}</h3>
|
||||
<h4>${plan.price}${currency} /${await peertubeHelpers.translate("month")}</h4>
|
||||
<p class="card-text">${plan.storage} ${await peertubeHelpers.translate("GB Storage")}</p>
|
||||
|
||||
<input type="hidden" name="lookup_key" value="${plan.key}">
|
||||
<button class="btn btn-primary" type="submit">${await peertubeHelpers.translate("Subscribe")}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`))).join("")}
|
||||
</div>
|
||||
|
||||
<p><i>${await translate("Secure payment with Stripe")}</i></p>
|
||||
</div>
|
||||
|
||||
${session_id ? `
|
||||
<div class="mt-5">
|
||||
<form method="POST" action="#" id="formManageSub">
|
||||
<input type="hidden" id="session-id" name="session_id" value="${session_id}" />
|
||||
<button id="checkout-and-portal-button" type="submit" class="btn btn-primary">${await translate("Manage my Subscription")}</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
` : ""}
|
||||
|
||||
${sub_plan ? `
|
||||
<p><i><b>${await translate("Your current plan")}</b>: ${sub_plan.name}, ${sub_plan.price}${currency} /${await peertubeHelpers.translate("month")}, ${sub_plan.storage} ${await peertubeHelpers.translate("GB Storage")}</i></p>
|
||||
` : ""}
|
||||
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
const checkForListen = () => {
|
||||
document.querySelectorAll(".orionSubscriptionForm").length === 3 ? listenSubmitSubscription(peertubeHelpers) : setTimeout(() => checkForListen(), 1000);
|
||||
};
|
||||
checkForListen();
|
||||
}
|
||||
|
||||
function listenSubmitSubscription(peertubeHelpers) {
|
||||
const baseUrl = peertubeHelpers.getBaseRouterRoute();
|
||||
|
||||
// Sub
|
||||
document.querySelectorAll(".orionSubscriptionForm").forEach(el => {
|
||||
el.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const form = new URLSearchParams(new FormData(e.target));
|
||||
fetch(baseUrl + "/create-checkout-session", {
|
||||
method: "POST",
|
||||
headers: peertubeHelpers.getAuthHeader(),
|
||||
body: form,
|
||||
}).then((res) => res.json()).then((data) => {
|
||||
if(!data || !data.status || data.status !== "success") {
|
||||
peertubeHelpers.notifier.error(data.message || "Unknown error");
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href = data.data.redirectUrl;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
peertubeHelpers.notifier.error(err);
|
||||
})
|
||||
|
||||
} catch (error) {
|
||||
peertubeHelpers.notifier.error(error);
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
// Manage sub
|
||||
document.getElementById("formManageSub")?.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const form = new URLSearchParams(new FormData(e.target));
|
||||
fetch(baseUrl + "/create-portal-session", {
|
||||
method: "POST",
|
||||
headers: peertubeHelpers.getAuthHeader(),
|
||||
body: form,
|
||||
}).then((res) => res.json()).then((data) => {
|
||||
if(!data || !data.status || data.status !== "success") {
|
||||
peertubeHelpers.notifier.error(data.message || "Unknown error");
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href = data.data.redirectUrl;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
peertubeHelpers.notifier.error(err);
|
||||
})
|
||||
|
||||
} catch (error) {
|
||||
peertubeHelpers.notifier.error(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export { showPage };
|
85
client/pages/success.js
Normal file
85
client/pages/success.js
Normal file
@ -0,0 +1,85 @@
|
||||
async function showPage({ rootEl, peertubeHelpers }) {
|
||||
// Redirect to login page if not auth
|
||||
if (!peertubeHelpers.isLoggedIn()) return (window.location.href = "/login");
|
||||
|
||||
const loading = await peertubeHelpers.translate("Loading");
|
||||
rootEl.innerHTML = loading + "...";
|
||||
|
||||
const { translate } = peertubeHelpers;
|
||||
const description = await peertubeHelpers.markdownRenderer.enhancedMarkdownToHTML(settings["sell-thx-description"]);
|
||||
|
||||
rootEl.innerHTML = `
|
||||
<div class="orion-content text-center mt-5">
|
||||
<h1>${await peertubeHelpers.translate("Subscription succesfull!")}</h1>
|
||||
|
||||
<div class="mt-5">
|
||||
<form action="#" method="POST" class="orionSubscriptionForm">
|
||||
<input type="hidden" id="session-id" name="session_id" value="" />
|
||||
<button id="checkout-and-portal-button" type="submit" class="btn btn-primary">${await translate("Manage my Subscription")}</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p>${description}</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
setTimeout(() => listenSubmitSubscription(peertubeHelpers), 1000);
|
||||
}
|
||||
|
||||
function listenSubmitSubscription(peertubeHelpers) {
|
||||
const baseUrl = peertubeHelpers.getBaseRouterRoute();
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
if(params.has("session_id")) {
|
||||
document.getElementById("session-id").value = params.get("session_id");
|
||||
localStorage.setItem("orion-sub-session-id", params.get("session_id"));
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("session_id", params.get("session_id"));
|
||||
|
||||
const form = new URLSearchParams(formData);
|
||||
|
||||
fetch(baseUrl + "/save-session-id", {
|
||||
method: "POST",
|
||||
headers: peertubeHelpers.getAuthHeader(),
|
||||
body: form,
|
||||
}).then((res) => res.json()).then((data) => {
|
||||
if(!data || !data.status || data.status !== "success") {
|
||||
peertubeHelpers.notifier.error(data.message || "Unknown error");
|
||||
}
|
||||
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
peertubeHelpers.notifier.error(err);
|
||||
})
|
||||
}
|
||||
|
||||
document.querySelector(".orionSubscriptionForm").addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const form = new URLSearchParams(new FormData(e.target));
|
||||
fetch(baseUrl + "/create-portal-session", {
|
||||
method: "POST",
|
||||
headers: peertubeHelpers.getAuthHeader(),
|
||||
body: form,
|
||||
}).then((res) => res.json()).then((data) => {
|
||||
if(!data || !data.status || data.status !== "success") {
|
||||
peertubeHelpers.notifier.error(data.message || "Unknown error");
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href = data.data.redirectUrl;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
peertubeHelpers.notifier.error(err);
|
||||
})
|
||||
|
||||
} catch (error) {
|
||||
peertubeHelpers.notifier.error(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export { showPage };
|
Reference in New Issue
Block a user