Merge branch 'ios-subscription' into dev

gustavotoyota · gustavotoyota · commit 3f4135dfc3d4 · 2023-11-18T22:46:37.000-04:00
diff --git a/apps/client/src-capacitor/android/app/capacitor.build.gradle b/apps/client/src-capacitor/android/app/capacitor.build.gradle
@@ -12,6 +12,7 @@ dependencies {
     implementation project(':capacitor-app')
     implementation project(':capacitor-clipboard')
     implementation project(':capacitor-splash-screen')
+    implementation project(':revenuecat-purchases-capacitor')
 
 }
 
diff --git a/apps/client/src-capacitor/android/app/src/main/assets/capacitor.plugins.json b/apps/client/src-capacitor/android/app/src/main/assets/capacitor.plugins.json
@@ -10,5 +10,9 @@
 	{
 		"pkg": "@capacitor/splash-screen",
 		"classpath": "com.capacitorjs.plugins.splashscreen.SplashScreenPlugin"
+	},
+	{
+		"pkg": "@revenuecat/purchases-capacitor",
+		"classpath": "com.revenuecat.purchases.capacitor.PurchasesPlugin"
 	}
 ]
diff --git a/apps/client/src-capacitor/android/capacitor.settings.gradle b/apps/client/src-capacitor/android/capacitor.settings.gradle
@@ -10,3 +10,6 @@ project(':capacitor-clipboard').projectDir = new File('../../../../node_modules/
 
 include ':capacitor-splash-screen'
 project(':capacitor-splash-screen').projectDir = new File('../../../../node_modules/.pnpm/@capacitor+splash-screen@5.0.6_@capacitor+core@5.5.1/node_modules/@capacitor/splash-screen/android')
+
+include ':revenuecat-purchases-capacitor'
+project(':revenuecat-purchases-capacitor').projectDir = new File('../../../../node_modules/.pnpm/@revenuecat+purchases-capacitor@7.1.1_@capacitor+core@5.5.1/node_modules/@revenuecat/purchases-capacitor/android')
diff --git a/apps/client/src-capacitor/ios/App/App.xcodeproj/project.pbxproj b/apps/client/src-capacitor/ios/App/App.xcodeproj/project.pbxproj
@@ -359,7 +359,7 @@
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.productivity";
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.0.8;
+				MARKETING_VERSION = 1.0.15;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = app.deepnotes;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -386,7 +386,7 @@
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.productivity";
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.0.8;
+				MARKETING_VERSION = 1.0.15;
 				PRODUCT_BUNDLE_IDENTIFIER = app.deepnotes;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";
diff --git a/apps/client/src-capacitor/ios/App/Podfile b/apps/client/src-capacitor/ios/App/Podfile
@@ -14,6 +14,7 @@ def capacitor_pods
   pod 'CapacitorApp', :path => '../../../../../node_modules/.pnpm/@capacitor+app@5.0.6_@capacitor+core@5.5.1/node_modules/@capacitor/app'
   pod 'CapacitorClipboard', :path => '../../../../../node_modules/.pnpm/@capacitor+clipboard@5.0.6_@capacitor+core@5.5.1/node_modules/@capacitor/clipboard'
   pod 'CapacitorSplashScreen', :path => '../../../../../node_modules/.pnpm/@capacitor+splash-screen@5.0.6_@capacitor+core@5.5.1/node_modules/@capacitor/splash-screen'
+  pod 'RevenuecatPurchasesCapacitor', :path => '../../../../../node_modules/.pnpm/@revenuecat+purchases-capacitor@7.1.1_@capacitor+core@5.5.1/node_modules/@revenuecat/purchases-capacitor'
 end
 
 target 'App' do
diff --git a/apps/client/src-capacitor/package.json b/apps/client/src-capacitor/package.json
@@ -10,7 +10,8 @@
     "@capacitor/clipboard": "^5.0.6",
     "@capacitor/core": "^5.5.1",
     "@capacitor/ios": "^5.5.1",
-    "@capacitor/splash-screen": "^5.0.6"
+    "@capacitor/splash-screen": "^5.0.6",
+    "@revenuecat/purchases-capacitor": "^7.1.1"
   },
   "private": true
 }
diff --git a/apps/client/src/layouts/HomeLayout/Footer.vue b/apps/client/src/layouts/HomeLayout/Footer.vue
@@ -41,7 +41,6 @@
           <div class="footer-header">Product</div>
 
           <router-link
-            v-if="!($q.platform.is.capacitor && $q.platform.is.ios)"
             :to="{ name: 'pricing' }"
             class="footer-item"
           >
diff --git a/apps/client/src/layouts/HomeLayout/Header/Header.vue b/apps/client/src/layouts/HomeLayout/Header/Header.vue
@@ -80,7 +80,6 @@
           <Gap style="width: 32px" />
 
           <DeepBtn
-            v-if="!($q.platform.is.capacitor && $q.platform.is.ios)"
             label="Pricing"
             flat
             class="toolbar-btn"
diff --git a/apps/client/src/layouts/HomeLayout/Header/RightButtons/RightMenu.vue b/apps/client/src/layouts/HomeLayout/Header/RightButtons/RightMenu.vue
@@ -64,7 +64,6 @@
 
           <template v-if="uiStore().width < BREAKPOINT_LG_MIN">
             <q-item
-              v-if="!($q.platform.is.capacitor && $q.platform.is.ios)"
               clickable
               :to="{ name: 'pricing' }"
             >
diff --git a/apps/client/src/layouts/PagesLayout/MainContent/DisplayPage/DisplayScreens/DisplayNonFreePageScreen.vue b/apps/client/src/layouts/PagesLayout/MainContent/DisplayPage/DisplayScreens/DisplayNonFreePageScreen.vue
@@ -2,15 +2,13 @@
   <div>This page was created with the Pro plan.</div>
   <div>Upgrade your subscription to access this page.</div>
 
-  <template v-if="!($q.platform.is.capacitor && $q.platform.is.ios)">
-    <Gap style="height: 16px" />
+  <Gap style="height: 16px" />
 
-    <DeepBtn
-      label="See subscription plans"
-      color="primary"
-      :href="multiModePath('/pricing')"
-    />
-  </template>
+  <DeepBtn
+    label="See subscription plans"
+    color="primary"
+    :href="multiModePath('/pricing')"
+  />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/client/src/layouts/PagesLayout/MainContent/DisplayPage/DisplayScreens/DisplayProPlanRequiredScreen.vue b/apps/client/src/layouts/PagesLayout/MainContent/DisplayPage/DisplayScreens/DisplayProPlanRequiredScreen.vue
@@ -4,15 +4,13 @@
     <div>Access private groups with a Pro plan subscription.</div>
   </div>
 
-  <template v-if="!($q.platform.is.capacitor && $q.platform.is.ios)">
-    <Gap style="height: 16px" />
+  <Gap style="height: 16px" />
 
-    <DeepBtn
-      label="See subscription plans"
-      color="primary"
-      :href="multiModePath('/pricing')"
-    />
-  </template>
+  <DeepBtn
+    label="See subscription plans"
+    color="primary"
+    :href="multiModePath('/pricing')"
+  />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/client/src/layouts/PagesLayout/MainToolbar/AccountPopup.vue b/apps/client/src/layouts/PagesLayout/MainToolbar/AccountPopup.vue
@@ -56,7 +56,6 @@
       </template>
 
       <q-item
-        v-if="!($q.platform.is.capacitor && $q.platform.is.ios)"
         clickable
         v-close-popup
         :href="multiModePath('/pricing')"
diff --git a/apps/client/src/pages/home/Account/Account.vue b/apps/client/src/pages/home/Account/Account.vue
@@ -30,7 +30,6 @@
             </q-item>
 
             <q-item
-              v-if="!($q.platform.is.capacitor && $q.platform.is.ios)"
               style="height: 60px"
               clickable
               :to="{ name: 'account/billing' }"
diff --git a/apps/client/src/pages/home/Account/AccountItems.vue b/apps/client/src/pages/home/Account/AccountItems.vue
@@ -11,7 +11,6 @@
   </q-item>
 
   <q-item
-    v-if="!($q.platform.is.capacitor && $q.platform.is.ios)"
     clickable
     :to="{ name: 'account/billing' }"
     style="padding: 16px 20px; font-size: 16px"
diff --git a/apps/client/src/pages/home/Account/Billing/Billing.vue b/apps/client/src/pages/home/Account/Billing/Billing.vue
@@ -28,18 +28,61 @@
       type="submit"
       @click="createPortalSession()"
     />
+
+    <template v-if="$q.platform.is.capacitor && $q.platform.is.ios">
+      <Gap style="height: 16px" />
+
+      <DeepBtn
+        label="Restore Apple purchases"
+        color="secondary"
+        @click="
+          async () => {
+            try {
+              const customerInfo = await Purchases.restorePurchases();
+
+              $q.notify({
+                message: 'Apple purchases restored successfully.',
+                color: 'positive',
+              });
+            } catch (error) {
+              handleError(error);
+            }
+          }
+        "
+      />
+    </template>
   </div>
 
   <LoadingOverlay v-if="loading" />
 </template>
 
 <script setup lang="ts">
+import { LOG_LEVEL, Purchases } from '@revenuecat/purchases-capacitor';
 import { watchUntilTrue } from '@stdlib/vue';
+import { handleError } from 'src/code/utils/misc';
 
 useMeta(() => ({
   title: 'Billing - Account - DeepNotes',
 }));
 
+if (
+  process.env.CLIENT &&
+  $quasar().platform.is.capacitor &&
+  $quasar().platform.is.ios
+) {
+  document.addEventListener(
+    'deviceready',
+    async () => {
+      await Purchases.setLogLevel({ level: LOG_LEVEL.DEBUG }); // Enable to get debug logs
+      await Purchases.configure({
+        apiKey: process.env.REVENUECAT_PUBLIC_APPLE_API_KEY,
+        appUserID: authStore().userId,
+      });
+    },
+    false,
+  );
+}
+
 const loading = ref(true);
 
 onMounted(async () => {
diff --git a/apps/client/src/pages/home/Index/Index.vue b/apps/client/src/pages/home/Index/Index.vue
@@ -150,17 +150,15 @@
         </div>
       </div>
 
-      <template v-if="!($q.platform.is.capacitor && $q.platform.is.ios)">
-        <Gap style="height: 170px" />
+      <Gap style="height: 170px" />
 
-        <div style="display: flex; justify-content: center">
-          <BillingFrequencyToggle v-model="billingFrequency" />
-        </div>
+      <div style="display: flex; justify-content: center">
+        <BillingFrequencyToggle v-model="billingFrequency" />
+      </div>
 
-        <Gap style="height: 48px" />
+      <Gap style="height: 48px" />
 
-        <PricingSection :billing-frequency="billingFrequency" />
-      </template>
+      <PricingSection :billing-frequency="billingFrequency" />
 
       <div>
         <Gap style="height: 150px" />
diff --git a/apps/client/src/pages/home/Pricing/Pricing.vue b/apps/client/src/pages/home/Pricing/Pricing.vue
@@ -114,7 +114,7 @@
           color="primary"
           type="submit"
           style="flex: 1"
-          @click="createCheckoutSession()"
+          @click="choosePlan()"
         />
 
         <DeepBtn
@@ -123,7 +123,7 @@
           color="primary"
           type="submit"
           style="flex: 1"
-          @click="createPortalSession()"
+          @click="manageSubscription()"
         />
       </PlanCard>
     </div>
@@ -135,7 +135,13 @@
 </template>
 
 <script setup lang="ts">
-import { watchUntilTrue } from '@stdlib/vue';
+import {
+  LOG_LEVEL,
+  Purchases,
+  PURCHASES_ERROR_CODE,
+} from '@revenuecat/purchases-capacitor';
+import { createSmartComputed, watchUntilTrue } from '@stdlib/vue';
+import { handleError } from 'src/code/utils/misc';
 
 import PlanCard from './PlanCard.vue';
 
@@ -147,12 +153,53 @@ const plan = computed(() =>
 
 const loading = ref(true);
 
+if (
+  process.env.CLIENT &&
+  $quasar().platform.is.capacitor &&
+  $quasar().platform.is.ios &&
+  authStore().loggedIn
+) {
+  document.addEventListener(
+    'deviceready',
+    async () => {
+      await Purchases.setLogLevel({ level: LOG_LEVEL.DEBUG }); // Enable to get debug logs
+      await Purchases.configure({
+        apiKey: process.env.REVENUECAT_PUBLIC_APPLE_API_KEY,
+        appUserID: authStore().userId,
+      });
+    },
+    false,
+  );
+}
+
+const offerings = createSmartComputed({
+  get: async () => {
+    try {
+      const offerings = await Purchases.getOfferings();
+
+      mainLogger.info('Offerings: %o', offerings);
+
+      return offerings;
+    } catch (error) {
+      handleError(error);
+    }
+  },
+});
+
 onMounted(async () => {
   await watchUntilTrue(() => !internals.realtime.globalCtx.loading);
 
   loading.value = false;
 });
 
+async function choosePlan() {
+  if ($quasar().platform.is.capacitor && $quasar().platform.is.ios) {
+    await buyPackage();
+  } else {
+    await createCheckoutSession();
+  }
+}
+
 async function createCheckoutSession() {
   const { checkoutSessionUrl } =
     await trpcClient.users.account.stripe.createCheckoutSession.mutate({
@@ -162,6 +209,40 @@ async function createCheckoutSession() {
   window.open(checkoutSessionUrl, '_blank');
 }
 
+async function buyPackage() {
+  try {
+    const packages = (await offerings?.getAsync())?.current?.availablePackages;
+
+    let pkg;
+
+    if (billingFrequency.value === 'monthly') {
+      pkg = packages?.find((pkg) => pkg.identifier === '$rc_monthly')!;
+    } else {
+      pkg = packages?.find((pkg) => pkg.identifier === '$rc_annual')!;
+    }
+
+    await Purchases.purchasePackage({
+      aPackage: pkg,
+    });
+  } catch (error: any) {
+    if (error.code === PURCHASES_ERROR_CODE.PURCHASE_CANCELLED_ERROR) {
+      // Purchase cancelled
+    } else {
+      // Error making purchase
+
+      handleError(error);
+    }
+  }
+}
+
+async function manageSubscription() {
+  if ($quasar().platform.is.capacitor && $quasar().platform.is.ios) {
+    await buyPackage();
+  } else {
+    await createPortalSession();
+  }
+}
+
 async function createPortalSession() {
   const { portalSessionUrl } =
     await trpcClient.users.account.stripe.createPortalSession.mutate();

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@ dependencies {`
`12`	`12`	`implementation project(':capacitor-app')`
`13`	`13`	`implementation project(':capacitor-clipboard')`
`14`	`14`	`implementation project(':capacitor-splash-screen')`
	`15`	`+ implementation project(':revenuecat-purchases-capacitor')`
`15`	`16`
`16`	`17`	`}`
`17`	`18`
Original file line number	Diff line number	Diff line change
`@@ -10,5 +10,9 @@`
`10`	`10`	`{`
`11`	`11`	`"pkg": "@capacitor/splash-screen",`
`12`	`12`	`"classpath": "com.capacitorjs.plugins.splashscreen.SplashScreenPlugin"`
	`13`	`+ },`
	`14`	`+ {`
	`15`	`+ "pkg": "@revenuecat/purchases-capacitor",`
	`16`	`+ "classpath": "com.revenuecat.purchases.capacitor.PurchasesPlugin"`
`13`	`17`	`}`
`14`	`18`	`]`
-Original file line number
+Diff line change
 include ':capacitor-splash-screen'
 project(':capacitor-splash-screen').projectDir = new File('../../../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@capacitor/splash-screen/android')
++
 +include ':revenuecat-purchases-capacitor'
 +project(':revenuecat-purchases-capacitor').projectDir = new File('../../../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@revenuecat/purchases-capacitor/android')
-Original file line number
+Diff line change
   pod 'CapacitorApp', :path => '../../../../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@capacitor/app'
   pod 'CapacitorClipboard', :path => '../../../../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@capacitor/clipboard'
   pod 'CapacitorSplashScreen', :path => '../../../../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@capacitor/splash-screen'
 +  pod 'RevenuecatPurchasesCapacitor', :path => '../../../../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@revenuecat/purchases-capacitor'
 end
 target 'App' do
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,6 @@`
`41`	`41`	`<div class="footer-header">Product</div>`
`42`	`42`
`43`	`43`	`<router-link`
`44`		`- v-if="!($q.platform.is.capacitor && $q.platform.is.ios)"`
`45`	`44`	`:to="{ name: 'pricing' }"`
`46`	`45`	`class="footer-item"`
`47`	`46`	`>`
Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,6 @@`
`64`	`64`
`65`	`65`	`<template v-if="uiStore().width < BREAKPOINT_LG_MIN">`
`66`	`66`	`<q-item`
`67`		`- v-if="!($q.platform.is.capacitor && $q.platform.is.ios)"`
`68`	`67`	`clickable`
`69`	`68`	`:to="{ name: 'pricing' }"`
`70`	`69`	`>`