feat: integrate Patreon

Rule-34 · Jul 27, 2024 · b1756d1 · b1756d1
1 parent 0d9dda0
commit b1756d1
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 28 deletions.
diff --git a/pages/premium/dashboard.vue b/pages/premium/dashboard.vue
@@ -4,7 +4,7 @@
 
   const { $pocketBase } = useNuxtApp()
 
-  const { email, isPremium } = useUserData()
+  const { email, license, isPremium } = useUserData()
 
   const links = [
     {
@@ -24,7 +24,7 @@
     },
     {
       name: 'Backup & Restore',
-      description: 'Backup your saved posts, tag collections and settings',
+      description: 'Backup your tag collections and settings',
       href: '/premium/backup'
     }
   ]
@@ -33,9 +33,49 @@
     // Log out from pocketbase
     $pocketBase.authStore.clear()
 
-    window.location.href = '/premium/sign-in?message=Signed out successfully'
+    window.location.href = '/premium/sign-in'
   }
 
+  const platformOfPurchase = computed(() => {
+    if (!license.value) {
+      return null
+    }
+
+    switch (true) {
+      case license.value.startsWith('SLX-'):
+        return 'Sellix'
+
+      case license.value.startsWith('PATREON-'):
+        return 'Patreon'
+
+      case license.value.length === 35:
+        return 'Gumroad'
+
+      default:
+        throw new Error('Unknown license origin')
+    }
+  })
+
+  const manageSubscriptionLink = computed(() => {
+    if (!platformOfPurchase.value) {
+      return null
+    }
+
+    switch (platformOfPurchase.value) {
+      case 'Sellix':
+        return 'https://alejandroakbal.mysellix.io/customer/auth'
+
+      case 'Patreon':
+        return 'https://www.patreon.com/r34app/membership'
+
+      case 'Gumroad':
+        return 'https://app.gumroad.com/library?query=Rule+34+App'
+
+      default:
+        throw new Error('Unknown platform of purchase')
+    }
+  })
+
   onNuxtReady(() => {
     const route = useRoute()
     const message = route.query.message
@@ -150,12 +190,22 @@
     </section>
 
     <!-- Manage subscription -->
-    <section class="absolute inset-x-0 bottom-0 w-full p-4 text-center">
-      <!-- TODO: Contact support -->
+    <section class="absolute inset-x-0 bottom-0 w-full space-x-2 p-4 text-center">
+      <NuxtLink
+        class="hover:hover-text-util focus-visible:focus-outline-util underline"
+        href="mailto:contact@r34.app"
+        rel="nofollow noopener noreferrer"
+        target="_blank"
+      >
+        <!-- @formatter:off -->
+        Contact support</NuxtLink
+      >
+
+      <span> &middot; </span>
 
       <NuxtLink
+        :href="manageSubscriptionLink"
         class="hover:hover-text-util focus-visible:focus-outline-util underline"
-        href="https://alejandroakbal.mysellix.io/customer/auth"
         rel="nofollow noopener noreferrer"
         target="_blank"
       >

diff --git a/pages/premium/index.vue b/pages/premium/index.vue
@@ -22,23 +22,14 @@
     { title: 'Support the development', additionalInfo: '#support-development' }
   ]
 
-  useHead(
-    {
-      link: [
-        {
-          rel: 'stylesheet',
-          href: 'https://cdn.sellix.io/static/css/embed.css'
-        }
-      ]
-    },
-    {
-      mode: 'client'
-    }
-  )
+  const visibleEl = ref<HTMLElement | null>(null)
+
   const { $script } = useScript('https://cdn.sellix.io/static/js/embed.js', {
     use() {
       return window.initializeSellixEmbed
-    }
+    },
+
+    trigger: useScriptTriggerElement({ trigger: 'visible', el: visibleEl })
   })
 
   $script.then((initializeSellixEmbed) => {
@@ -97,7 +88,7 @@
           <!-- Rating -->
           <NuxtLink
             class="focus-visible:focus-outline-util hover:hover-text-util mt-10 flex flex-col items-center justify-center gap-2.5 pb-4"
-            href="https://gum.co/Rule34App#Ratings"
+            href="https://www.trustpilot.com/review/r34.app"
             rel="nofollow noopener"
             target="_blank"
           >
@@ -111,7 +102,7 @@
             </div>
 
             <!-- TODO: Images of user profiles -->
-            <span> Loved by 2018+ customers</span>
+            <span> Loved by 2163+ customers</span>
           </NuxtLink>
 
           <!-- TODO: Testimonials -->
@@ -209,30 +200,43 @@
                     </div>
                   </div>
 
-                  <button
+                  <NuxtLink
                     aria-describedby="premium-features"
                     class="focus-visible:focus-outline-util hover:hover-text-util rounded-md bg-primary-700 px-3 py-2 text-center text-sm font-semibold leading-6 text-base-content-highlight hover:bg-primary-600 focus-visible:ring-offset-2"
-                    data-sellix-product="668f8f7c7c348"
                     onclick="window._paq?.push(['trackEvent', 'Premium', 'Subscribe Link Click'])"
-                    type="button"
+                    rel="noopener nofollow"
+                    target="_blank"
+                    to="https://www.patreon.com/bePatron?u=135693332"
                   >
                     Get Premium
+                  </NuxtLink>
+
+                  <button
+                    ref="visibleEl"
+                    aria-describedby="premium-features"
+                    class="focus-visible:focus-outline-util hover:hover-text-util hover:hover-bg-util rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 hover:bg-primary-600 focus-visible:ring-offset-2"
+                    data-sellix-product="668f8f7c7c348"
+                    onclick="window._paq?.push(['trackEvent', 'Premium', 'Subscribe Link Click', 'Crypto'])"
+                    type="button"
+                  >
+                    Get Premium with Crypto
                   </button>
 
                   <p class="text-center text-xs leading-6">
                     Subscription managed by
 
                     <NuxtLink
                       class="focus-visible:focus-outline-util hover:hover-text-util"
-                      href="https://sellix.io"
+                      href="https://www.patreon.com"
                       rel="nofollow noopener"
                       target="_blank"
                     >
-                      Sellix
+                      Patreon
                     </NuxtLink>
 
                     <br />
-                    Discreet credit card statement
+
+                    Discreet “PATREON” credit card statement
                   </p>
                 </div>
               </div>