mobile: fix navigation when changing plan

apps/mobile/app/components/paywall/index.tsx

@@ -44,7 +44,6 @@ import Config from "react-native-config";
 import * as RNIap from "react-native-iap";
 import { SafeAreaView } from "react-native-safe-area-context";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { WebView } from "react-native-webview";
 import ToggleSwitch from "toggle-switch-react-native";
 import {
   ANDROID_POLICE_SVG,
@@ -75,7 +74,6 @@ import { IconButton } from "../ui/icon-button";
 import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { ToastManager } from "../../services/event-manager";
 
 const Steps = {
   select: 1,
@@ -606,7 +604,9 @@ After trying all the privacy security oriented note taking apps, for the price a
         <BuyPlan
           planId={pricingPlans.currentPlan?.id as string}
           productId={
-            annualBilling
+            annualBilling &&
+            pricingPlans.user?.subscription.productId !==
+              `notesnook.${pricingPlans?.currentPlan?.id as string}.yearly`
               ? Config.GITHUB_RELEASE === "true"
                 ? "yearly"
                 : `notesnook.${pricingPlans?.currentPlan?.id as string}.yearly`
@@ -626,22 +626,6 @@ After trying all the privacy security oriented note taking apps, for the price a
             setStep(Steps.finish);
           }}
         />
-      ) : step === Steps.buyWeb ? (
-        <View
-          style={{
-            flex: 1
-          }}
-        >
-          <WebView
-            source={{
-              html: `
-             <button onclick="function() { window.ReactNativeWebView.postMessage(JSON.stringify({
-                success:true
-             })) }" /> 
-              `
-            }}
-          />
-        </View>
       ) : step === Steps.finish ? (
         <View
           style={{
@@ -997,11 +981,6 @@ const PricingPlanCard = ({
       });
   }, [pricingPlans, plan, product, WebPlan]);
 
-  console.log(
-    pricingPlans?.user?.subscription.productId,
-    pricingPlans?.currentPlan?.id
-  );
-
   const isSubscribed =
     product?.productId &&
     pricingPlans?.user?.subscription.productId.includes(plan.id) &&
@@ -1011,17 +990,6 @@ const PricingPlanCard = ({
     <TouchableOpacity
       activeOpacity={0.8}
       onPress={() => {
-        if (
-          isSubscribed &&
-          pricingPlans?.user?.subscription.productId === product.productId
-        ) {
-          ToastManager.show({
-            message: "You are already subscribed to this plan.",
-            type: "info"
-          });
-          return;
-        }
-
         pricingPlans?.selectPlan(plan.id);
         setStep(Steps.buy);
       }}
@@ -1058,24 +1026,6 @@ const PricingPlanCard = ({
         </View>
       ) : null}
 
-      {isSubscribed ? (
-        <View
-          style={{
-            backgroundColor: colors.primary.accent,
-            borderRadius: defaultBorderRadius,
-            paddingHorizontal: 6,
-            alignItems: "center",
-            justifyContent: "center",
-            height: 25,
-            alignSelf: "flex-start"
-          }}
-        >
-          <Heading color={colors.static.white} size={AppFontSize.xs}>
-            {strings.currentPlan()}
-          </Heading>
-        </View>
-      ) : null}
-
       <View>
         <Heading size={AppFontSize.md}>
           {plan.name}{" "}
@@ -1171,6 +1121,25 @@ const PricingPlanCard = ({
                   )}
             </Paragraph>
           )}
+
+          {isSubscribed ? (
+            <View
+              style={{
+                backgroundColor: colors.primary.accent,
+                borderRadius: defaultBorderRadius,
+                paddingHorizontal: 6,
+                alignItems: "center",
+                justifyContent: "center",
+                height: 25,
+                alignSelf: "flex-start",
+                marginTop: DefaultAppStyles.GAP_VERTICAL
+              }}
+            >
+              <Heading color={colors.static.white} size={AppFontSize.xs}>
+                {strings.currentPlan()}
+              </Heading>
+            </View>
+          ) : null}
         </View>
       )}
     </TouchableOpacity>

apps/mobile/app/components/sheets/buy-plan/index.tsx

@@ -20,7 +20,7 @@ import { Plan } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import dayjs from "dayjs";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { ScrollView, Text, TouchableOpacity, View } from "react-native";
 import Config from "react-native-config";
 import * as RNIap from "react-native-iap";
@@ -28,6 +28,7 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { WebView } from "react-native-webview";
 import { db } from "../../../common/database";
 import usePricingPlans from "../../../hooks/use-pricing-plans";
+import { ToastManager } from "../../../services/event-manager";
 import { openLinkInBrowser } from "../../../utils/functions";
 import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
@@ -274,7 +275,7 @@ export const BuyPlan = (props: {
           }}
         />
 
-        <Heading
+        <Paragraph
           style={{
             textAlign: "center"
           }}
@@ -284,8 +285,8 @@ export const BuyPlan = (props: {
           {is5YearPlanSelected
             ? strings.oneTimePurchase()
             : strings.cancelAnytimeAlt()}
-        </Heading>
+        </Paragraph>
-        <Heading
+        <Paragraph
           style={{
             textAlign: "center"
           }}
@@ -314,7 +315,7 @@ export const BuyPlan = (props: {
           >
             {strings.subTerms[3]()}
           </Text>
-        </Heading>
+        </Paragraph>
       </View>
     </ScrollView>
   );
@@ -358,11 +359,18 @@ const ProductItem = (props: {
     <TouchableOpacity
       style={{
         flexDirection: "row",
-        gap: 10
+        gap: 10,
+        opacity: isSubscribed ? 0.5 : 1
       }}
       activeOpacity={0.9}
       onPress={() => {
-        if (isSubscribed) return;
+        if (isSubscribed) {
+          ToastManager.show({
+            message: strings.alreadySubscribed(),
+            type: "info"
+          });
+          return;
+        }
         if (!product) return;
         props.pricingPlans.selectProduct(
           isGithubRelease

packages/intl/locale/en.po

@@ -7140,6 +7140,10 @@ msgstr "Yes, you can cancel your trial anytime. No questions asked."
 msgid "You also agree to recieve marketing emails from us which you can opt-out of from app settings."
 msgstr "You also agree to recieve marketing emails from us which you can opt-out of from app settings."
 
+#: src/strings.ts:2587
+msgid "You are already subscribed to this plan."
+msgstr "You are already subscribed to this plan."
+
 #: src/strings.ts:2238
 msgid "You are editing \"{notebookTitle}\"."
 msgstr "You are editing \"{notebookTitle}\"."

packages/intl/locale/pseudo-LOCALE.po

@@ -7091,6 +7091,10 @@ msgstr ""
 msgid "You also agree to recieve marketing emails from us which you can opt-out of from app settings."
 msgstr ""
 
+#: src/strings.ts:2587
+msgid "You are already subscribed to this plan."
+msgstr ""
+
 #: src/strings.ts:2238
 msgid "You are editing \"{notebookTitle}\"."
 msgstr ""

packages/intl/src/strings.ts

@@ -2583,5 +2583,6 @@ Use this if changes from other devices are not appearing on this device. This wi
   thankYouForPurchase: () => t`Thank you for the purchase`,
   changePlan: () => t`Change plan`,
   contactSupportToChangePlan: () =>
-    t`You have made a one time purchase. To change your plan please contact support.`
+    t`You have made a one time purchase. To change your plan please contact support.`,
+  alreadySubscribed: () => t`You are already subscribed to this plan.`
 };