2023-12-13 00:31:35 +00:00
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 = [ ] ;
2024-04-02 19:43:20 +00:00
for ( let i = 1 ; i <= 5 ; i ++ ) {
2023-12-13 00:31:35 +00:00
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 ( ) ;
2024-04-02 19:43:20 +00:00
2023-12-13 00:31:35 +00:00
// If have error
if ( ! data || ! data . status || ( data . status && data . status !== "success" ) ) {
peertubeHelpers . notifier . error ( data . message || "Unknown error" ) ;
2024-04-02 19:43:20 +00:00
} else {
2023-12-13 00:31:35 +00:00
session _id = data ? . data ? . session _id ;
sub _plan = data ? . data ? . sub _plan ;
}
rootEl . innerHTML = `
2023-12-13 00:42:42 +00:00
< div class = "ncd-content text-center" >
2024-04-02 19:58:58 +00:00
< h1 > $ { await peertubeHelpers . translate ( "Choose your Storage Plan" ) } < / h 1 >
< h4 > < i > To subscribe to a storage plan with cryptocurrency ( BTC , ETH , XMR ) or cancel / update your subscription tier , < a href = "/about/contact" > contact us < /a>.</i > < / h 4 >
<!-- < p > $ { description . length ? description : await peertubeHelpers . translate ( "You want tu spport us ? Or need more space ? Your in the right place!" ) } < / p > - - >
2023-12-13 00:31:35 +00:00
< div class = "mt-5" >
< div class = "row" >
$ { ( await Promise . all ( plans . map ( async ( plan ) =>
2024-04-02 19:43:20 +00:00
` <div class="col-sm-12 col-md-6 col-lg-4" style="margin-bottom: 1rem;">
2023-12-13 00:31:35 +00:00
< div class = "card" >
< div class = "card-body" >
2023-12-13 00:42:42 +00:00
< form method = "POST" action = "#" class = "ncdSubscriptionForm" >
2023-12-13 00:31:35 +00:00
< h3 class = "card-title" > $ { plan . name } < / h 3 >
2023-12-13 15:34:57 +00:00
< h4 > $ { currency } $ { plan . price } / $ { await peertubeHelpers . translate ( "month" ) } < / h 4 >
2023-12-13 00:31:35 +00:00
< 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" ) } < / b u t t o n >
< / f o r m >
< / d i v >
< / d i v >
< / d i v >
` ))).join("")}
< / d i v >
< / d i v >
2024-04-02 19:24:26 +00:00
2024-04-02 19:58:58 +00:00
$ { session _id ? `
2024-04-02 19:43:20 +00:00
< 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" ) } < / b u t t o n >
< / f o r m >
< / d i v >
2024-04-02 19:58:58 +00:00
` : ""}
2024-04-02 19:24:26 +00:00
2023-12-13 00:31:35 +00:00
$ { sub _plan ? `
2023-12-13 15:34:57 +00:00
< p > < i > < b > $ { await translate ( "Your current plan" ) } < /b>: ${sub_plan.name}, ${currency}${sub_plan.price} / $ { await peertubeHelpers . translate ( "month" ) } , $ { sub _plan . storage } $ { await peertubeHelpers . translate ( "GB Storage" ) } < / i > < / p >
2023-12-13 00:31:35 +00:00
` : ""}
< / d i v >
` ;
const checkForListen = ( ) => {
2023-12-13 15:34:57 +00:00
document . querySelectorAll ( ".ncdSubscriptionForm" ) . length === 5 ? listenSubmitSubscription ( peertubeHelpers ) : setTimeout ( ( ) => checkForListen ( ) , 1000 ) ;
2023-12-13 00:31:35 +00:00
} ;
checkForListen ( ) ;
}
function listenSubmitSubscription ( peertubeHelpers ) {
const baseUrl = peertubeHelpers . getBaseRouterRoute ( ) ;
// Sub
2023-12-13 00:42:42 +00:00
document . querySelectorAll ( ".ncdSubscriptionForm" ) . forEach ( el => {
2023-12-13 00:31:35 +00:00
el . addEventListener ( "submit" , ( e ) => {
e . preventDefault ( ) ;
2024-04-02 19:43:20 +00:00
2023-12-13 00:31:35 +00:00
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 ) => {
2024-04-02 19:43:20 +00:00
if ( ! data || ! data . status || data . status !== "success" ) {
2023-12-13 00:31:35 +00:00
peertubeHelpers . notifier . error ( data . message || "Unknown error" ) ;
return ;
}
2024-04-02 19:43:20 +00:00
2023-12-13 00:31:35 +00:00
window . location . href = data . data . redirectUrl ;
} ) . catch ( err => {
console . error ( err ) ;
peertubeHelpers . notifier . error ( err ) ;
} )
2024-04-02 19:43:20 +00:00
2023-12-13 00:31:35 +00:00
} 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 ) => {
2024-04-02 19:43:20 +00:00
if ( ! data || ! data . status || data . status !== "success" ) {
2023-12-13 00:31:35 +00:00
peertubeHelpers . notifier . error ( data . message || "Unknown error" ) ;
return ;
}
2024-04-02 19:43:20 +00:00
2023-12-13 00:31:35 +00:00
window . location . href = data . data . redirectUrl ;
} ) . catch ( err => {
console . error ( err ) ;
peertubeHelpers . notifier . error ( err ) ;
} )
2024-04-02 19:43:20 +00:00
2023-12-13 00:31:35 +00:00
} catch ( error ) {
peertubeHelpers . notifier . error ( error ) ;
}
} ) ;
}
export { showPage } ;