fix icon

README.md

@@ -12,7 +12,7 @@ This plugin allow you to sell storage space to your users using Stripe subscript
 Payments are automated with Stripe.
 
 ## Getting Started <a name = "getting_started"></a>
-This is the NCD fork of the [peertube-plugin-orion-sell-storage](https://git.ncd-serv.fr/ncd/Peertube-plugins/src/branch/master/peertube-plugin-ncd-sell-storage) PeerTube plugin. This fork at inception allows you to add five packages rather than the original three. Everything else is pretty much left as-is, unless I decide to work on it more.
+This is the NCD fork of the [peertube-plugin-orion-sell-storage](https://git.orion-serv.fr/ncd/Peertube-plugins/src/branch/master/peertube-plugin-ncd-sell-storage) PeerTube plugin. This fork at inception allows you to add five packages rather than the original three. Everything else is pretty much left as-is, unless I decide to work on it more.
 Check [Prerequisites](#Prerequisites) to install this plugin
 
 ### Prerequisites
@@ -26,6 +26,13 @@ Check [Prerequisites](#Prerequisites) to install this plugin
 - Search for "ncd-sell-storage"
 - Click Install near the plugin name
 
+## If installing locally
+ - Clone Git repository
+ - cd peertube-plugin-ncd-sell-storage
+ - yarn
+ - yarn build
+ - Install via PeerTube CLI
+
 ### Configuration
 You need to configuration the plugin to work.
 Create an account on https://stripe.com to start.
@@ -34,11 +41,15 @@ Create an account on https://stripe.com to start.
 In your Stripe dashboard, you can test in "Test mode", and go live by unchecking "Test mode" in the top right.
 To go in live mode, you need to fill form in Stripe side. We recommand you to test in Test mode the integration before go in live.
 
+# Note: If you perform a transaction in Test Mode, you'll need to manually clear the subscription status because the webhook will not send back the correct validation response, meaning the changes will take effect but nothing will be charged. Use a dedicated test account.
+
 First, go to the Developer tab, and navigate to "API Keys". Grab your Secret API key, and insert it in your plugin settings.
 After that, always in the Developer tab, navigate to Webhook and create a webhook.
 
 An example of webhook URL is available in your plugin settings.
-Its like https://your-instance.tld/plugins/ncd-sell-storage/1.0.0/router/webhook
+Its like https://your-instance.tld/plugins/ncd-sell-storage/1.1.2/router/webhook
+
+# Note: If you update the plugin, you'll have to update the webhook link in Stripe. Don't forget this!
 
 Keep in mind, you need to update the webhook URL on stripe-side for each new plugin version, because the version is in the URL.
 Now, configure your Currency and Page description in the plugin settings.
@@ -46,7 +57,7 @@ Now, configure your Currency and Page description in the plugin settings.
 Its time to add your Plans! In stripe, go to Product page, and add new product. Set a name, description and the price.
 After creation, go in this new Product and grab the "API ID" near the price field.
 
-Now, you can continue configure your Plan (1, 2, 3) in the plugin settings.
+Now, you can continue configure your Plan (1, 2, 3, 4, 5) in the plugin settings.
 Repeat this process for each plans. Add new product, and grab the API ID corresponding to this price to insert it in your Product ID field, in the plugin settings.
 
 ## Usage <a name = "usage"></a>

client/common-client-plugin.js

@@ -7,35 +7,45 @@ async function register({
   peertubeHelpers,
   registerClientRoute,
 }) {
-  
   /**
    * Add link admin page
    */
+
   registerHook({
-    target: "action:router.navigation-end",
-    handler: async (params) => {
-      if (params.path.startsWith("/my-account")) {
-        if (document.getElementById("ncd-subscription-link")) return;
-
-        let href = "/p/ncd-my-subscription";
-
-        // Get menu container
-        const menuContainer = document.getElementsByClassName("sub-menu")[0];
-
-        // Create link
-        const content = `
-          <a _ngcontent-dke-c79="" id="ncd-subscription-link" routerlinkactive="active" class="sub-menu-entry ng-star-inserted" href="${href}">
-            ${await peertubeHelpers.translate("NCTV Storage")}
-          </a>
-        `;
-
-        // Create node for it
-        const nodeLink = document.createElement("div");
-        nodeLink.innerHTML = content.trim();
-
-        // Insert to menu container
-        menuContainer.appendChild(nodeLink.firstChild);
+    target: "filter:left-menu.links.create.result",
+    handler: (links) => {
+      if (!Array.isArray(links)) {
+        return links;
       }
+      let myLibraryLinks;
+      // Searching the 'in-my-library' entry.
+      for (const link of links) {
+        if (typeof link !== "object") {
+          continue;
+        }
+        if (!("key" in link)) {
+          continue;
+        }
+        if (link.key === "in-my-library" || link.key === "my-video-space") {
+          myLibraryLinks = link;
+          break;
+        }
+      }
+      if (!myLibraryLinks) {
+        return links;
+      }
+      if (!Array.isArray(myLibraryLinks.links)) {
+        return links;
+      }
+
+      const label = "NCTV Storage";
+      myLibraryLinks.links.unshift({
+        label,
+        shortLabel: label,
+        path: "/p/ncd-my-subscription",
+        icon: "film",
+      });
+      return links;
     },
   });
 
@@ -43,23 +53,23 @@ async function register({
   registerClientRoute({
     route: "ncd-my-subscription",
     onMount: ({ rootEl }) => {
-      subPage.showPage({rootEl, peertubeHelpers});
+      subPage.showPage({ rootEl, peertubeHelpers });
     },
   });
 
   registerClientRoute({
     route: "ncd-subscription-success",
     onMount: ({ rootEl }) => {
-      successPage.showPage({rootEl, peertubeHelpers});
+      successPage.showPage({ rootEl, peertubeHelpers });
     },
   });
 
   registerClientRoute({
     route: "ncd-subscription-cancel",
     onMount: ({ rootEl }) => {
-      cancelPage.showPage({rootEl, peertubeHelpers});
+      cancelPage.showPage({ rootEl, peertubeHelpers });
     },
   });
 }
 
-export { register };
+export { register };

client/pages/subscription.js

@@ -12,7 +12,7 @@ async function showPage({ rootEl, peertubeHelpers }) {
     const description = await peertubeHelpers.markdownRenderer.enhancedMarkdownToHTML(settings["sell-description"]);
     const plans = [];
 
-    for(let i = 1; i <= 5; i++) {
+    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"];
@@ -33,23 +33,25 @@ async function showPage({ rootEl, peertubeHelpers }) {
         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{
+    } else {
         session_id = data?.data?.session_id;
         sub_plan = data?.data?.sub_plan;
     }
 
     rootEl.innerHTML = `
         <div class="ncd-content text-center">
-            <h1>${await peertubeHelpers.translate("Choose your Storage Plan")}</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">
+        <h1>${await peertubeHelpers.translate("Choose your Storage Plan")}</h1>
+        <h5><i>To subscribe to a storage plan with cryptocurrency (BTC, ETH, XMR), <a href="/about/contact">contact us</a>.</i></h5>
+        <h6><i>Note: Cryptocurrency prices are 25% higher to cover transaction fees.</i></h6>
+            <!-- <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" style="max-width: 90%; margin: 0 auto;">
                 <div class="row">
                     ${(await Promise.all(plans.map(async (plan) =>
-                        `<div class="col-sm-12 col-md-6 col-lg-4"  style="margin-bottom: 1rem;">
+        `<div class="col-sm-12 col-md-6 col-lg-4"  style="margin-bottom: 1rem;">
                             <div class="card">
                                 <div class="card-body">
                                     <form method="POST" action="#" class="ncdSubscriptionForm">
@@ -65,22 +67,24 @@ async function showPage({ rootEl, peertubeHelpers }) {
                         </div>
                     `))).join("")}
                 </div>
-
-                <p><i>${await translate("Secure transaction 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>
+            <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}, ${currency}${sub_plan.price} /${await peertubeHelpers.translate("month")}, ${sub_plan.storage} ${await peertubeHelpers.translate("GB Storage")}</i></p>
+
+                <div>
+                <a href="https://billing.stripe.com/p/login/aEUg0YcdE3ff9j2cMM" target="_blank" style="font-size: 1.25rem; background-color: #0083f5; color: white; border-radius: 0.25rem; padding: 0.5rem 0.75rem; margin-top: 1.25rem;">Manage Subcription</a>
+                <div>
             ` : ""}
                     
         </div>
@@ -100,7 +104,7 @@ function listenSubmitSubscription(peertubeHelpers) {
     document.querySelectorAll(".ncdSubscriptionForm").forEach(el => {
         el.addEventListener("submit", (e) => {
             e.preventDefault();
-    
+
             try {
                 const form = new URLSearchParams(new FormData(e.target));
                 fetch(baseUrl + "/create-checkout-session", {
@@ -108,17 +112,17 @@ function listenSubmitSubscription(peertubeHelpers) {
                     headers: peertubeHelpers.getAuthHeader(),
                     body: form,
                 }).then((res) => res.json()).then((data) => {
-                    if(!data || !data.status || data.status !== "success") {
+                    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);
             }
@@ -137,17 +141,17 @@ function listenSubmitSubscription(peertubeHelpers) {
                 headers: peertubeHelpers.getAuthHeader(),
                 body: form,
             }).then((res) => res.json()).then((data) => {
-                if(!data || !data.status || data.status !== "success") {
+                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);
         }

main.js

@@ -151,7 +151,7 @@ async function register({
       const INSTANCE_URL = "https://" + req.get('host');
 
       // For demonstration purposes, we're using the Checkout session to retrieve the customer ID.
-      // Typically this is stored alongside the authenticated user in your database.
+      // Typically this is stored alongside the authenticated user in your database. (psql) users -> userID ->
       const { session_id } = req.body;
       const checkoutSession = await stripe.checkout.sessions.retrieve(session_id);
     

package.json

@@ -1,7 +1,7 @@
 {
   "name": "peertube-plugin-ncd-sell-storage",
   "description": "NCD fork of the peertube-plugin-orion-sell-storage to sell storage to users using Stripe",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "author": "matty",
   "bugs": "https://gitea.nicecrew.digital/matty/peertube-plugin-ncd-sell-storage",
   "clientScripts": [