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
@@ -47,7 +47,9 @@ First, go to the Developer tab, and navigate to "API Keys". Grab your Secret API
 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.1.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.
@@ -55,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;
     },
   });
 

client/pages/subscription.js

@@ -45,8 +45,10 @@ async function showPage({ rootEl, peertubeHelpers }) {
     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">
+        <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;">
@@ -65,8 +67,6 @@ async function showPage({ rootEl, peertubeHelpers }) {
                         </div>
                     `))).join("")}
                 </div>
-
-                <p><i>${await translate("Secure transaction with Stripe")}</i></p>
             </div>
             
             ${session_id ? `
@@ -75,12 +75,16 @@ async function showPage({ rootEl, peertubeHelpers }) {
                     <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>

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);