mobile: pricing fixes

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

@@ -141,6 +141,12 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
     };
   }, []);
 
+  const is5YearPlanSelected = (
+    isGithubRelease
+      ? (pricingPlans.selectedProduct as Plan)?.period
+      : (pricingPlans.selectedProduct as RNIap.Product)?.productId
+  )?.includes("5");
+
   return (
     <SafeAreaView
       style={{
@@ -603,7 +609,11 @@ After trying all the privacy security oriented note taking apps, for the price a
           goBack={() => {
             setStep(Steps.select);
           }}
-          goNext={() => {
+          goNext={(product) => {
+            pricingPlans.selectProduct(
+              (product as RNIap.Subscription).productId ||
+                (product as Plan).period
+            );
             setStep(Steps.finish);
           }}
         />
@@ -647,7 +657,11 @@ After trying all the privacy security oriented note taking apps, for the price a
           >
             <AppIcon color={colors.primary.accent} name="check" size={30} />
           </View>
-          <Heading>{strings.thankYouForSubscribing()}</Heading>
+          <Heading>
+            {is5YearPlanSelected
+              ? strings.thankYouForPurchase()
+              : strings.thankYouForSubscribing()}
+          </Heading>
           <Paragraph
             style={{
               textAlign: "center"

apps/mobile/app/components/properties/items.tsx

@@ -248,7 +248,8 @@ export const Items = ({
           testID={"icon-" + item.id}
           style={{
             width: columnItemWidth - 8,
-            alignSelf: "flex-start"
+            alignSelf: "flex-start",
+            gap: DefaultAppStyles.GAP_VERTICAL_SMALL
           }}
         >
           <View
@@ -259,7 +260,9 @@ export const Items = ({
               alignItems: "center",
               borderWidth: 1,
               borderRadius: defaultBorderRadius,
-              borderColor: colors.primary.border,
+              borderColor: item.checked
+                ? item.activeColor || colors.primary.accent
+                : colors.primary.border,
               overflow: "hidden"
             }}
           >
@@ -354,8 +357,8 @@ export const Items = ({
               paginationStyle={{
                 position: "relative",
                 marginHorizontal: 2,
-                marginBottom: 0,
+                marginBottom: -10,
-                marginTop: 0
+                marginTop: 10
               }}
               contentContainerStyle={{
                 justifyContent: "flex-start",

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

@@ -40,7 +40,9 @@ export const BuyPlan = (props: {
   productId: string;
   canActivateTrial?: boolean;
   goBack: () => void;
-  goNext: () => void;
+  goNext: (
+    product: Plan | RNIap.Subscription | RNIap.Product | undefined
+  ) => void;
 }) => {
   const { colors } = useThemeColors();
   const [checkoutUrl, setCheckoutUrl] = useState<string>();
@@ -48,7 +50,7 @@ export const BuyPlan = (props: {
     planId: props.planId,
     productId: props.productId,
     onBuy: () => {
-      props.goNext();
+      props.goNext(pricingPlans.selectedProduct);
     }
   });
 
@@ -78,7 +80,7 @@ export const BuyPlan = (props: {
           try {
             const data = JSON.parse(message.nativeEvent.data);
             if (data.success) {
-              props.goNext();
+              props.goNext(pricingPlans.selectedProduct);
             }
           } catch (e) {}
         }}
@@ -139,7 +141,11 @@ export const BuyPlan = (props: {
         >
           <Heading color={colors.primary.paragraph} size={AppFontSize.sm}>
             {strings.dueToday()}{" "}
-            {pricingPlans.userCanRequestTrial ? (
+            {pricingPlans.hasTrialOffer(
+              props.planId,
+              (pricingPlans?.selectedProduct as RNIap.Product)?.productId ||
+                (pricingPlans?.selectedProduct as Plan)?.period
+            ) ? (
               <Text
                 style={{
                   color: colors.primary.accent
@@ -151,7 +157,11 @@ export const BuyPlan = (props: {
           </Heading>
 
           <Paragraph color={colors.primary.paragraph}>
-            {pricingPlans.userCanRequestTrial
+            {pricingPlans.hasTrialOffer(
+              props.planId,
+              (pricingPlans?.selectedProduct as RNIap.Product)?.productId ||
+                (pricingPlans?.selectedProduct as Plan)?.period
+            )
               ? "FREE"
               : pricingPlans.getStandardPrice(
                   pricingPlans.selectedProduct as RNIap.Subscription

apps/mobile/app/components/ui/sheet/index.js

@@ -70,7 +70,6 @@ const SheetWrapper = ({
       backgroundColor: colors.primary.background,
       zIndex: 10,
       paddingTop: 5,
-      paddingBottom: 0,
       borderTopRightRadius: 15,
       borderTopLeftRadius: 15,
       alignSelf: "center",
@@ -78,9 +77,10 @@ const SheetWrapper = ({
       borderBottomLeftRadius: 0,
       ...getContainerBorder(colors.primary.border, 0.5),
       borderBottomWidth: 0,
-      paddingBottom: isGestureNavigationEnabled
+      paddingBottom:
-        ? insets.bottom
+        isGestureNavigationEnabled && Platform.OS === "android"
-        : insets.bottom || 48
+          ? insets.bottom
+          : 0
     };
   }, [
     colors.primary.background,
@@ -165,8 +165,8 @@ const SheetWrapper = ({
           <View
             style={{
               height:
-                Platform.OS === "ios" && insets.bottom !== 0
+                Platform.OS === "ios" || insets.bottom !== 0
-                  ? insets.bottom + 5
+                  ? insets.bottom
                   : 20
             }}
           />

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

@@ -17,20 +17,20 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import React, { useState } from "react";
 import { LayoutAnimation, View } from "react-native";
 import { MMKV } from "../../common/database/mmkv";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
 import { eCloseSheet } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import walkthroughs, { TStep } from "./walkthroughs";
-import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../utils/styles";
 export const Walkthrough = ({
   steps,
   canSkip = true
@@ -65,7 +65,7 @@ export const Walkthrough = ({
             textAlign: "center"
           }}
         >
-          Notesnook Free plan activated
+          {step.title}
         </Heading>
       ) : null}
       {step.text ? (
@@ -151,7 +151,7 @@ Walkthrough.init = async () => {
 };
 
 Walkthrough.present = async (
-  id: "notebooks" | "trialstarted" | "emailconfirmed" | "prouser",
+  id: "emailconfirmed" | "prouser",
   canSkip = true,
   nopersist?: boolean
 ) => {
@@ -162,7 +162,7 @@ Walkthrough.present = async (
     if (walkthroughState[id]) return;
     Walkthrough.update(id);
   }
-  const walkthrough = walkthroughs[id];
+  const walkthrough = walkthroughs[id]();
   if (!walkthrough) return;
   presentSheet({
     component: <Walkthrough canSkip={canSkip} steps={walkthrough.steps} />,

apps/mobile/app/components/walkthroughs/walkthroughs.tsx

@@ -60,282 +60,7 @@ export type TStep = {
   };
 };
 
-const NotebookWelcome = () => {
+const emailconfirmed: () => { id: string; steps: TStep[] } = () => ({
-  const { colors } = useThemeColors();
-  const data = useRotator([
-    {
-      title: strings.workAndOffice(),
-      description: strings.workAndOfficeDesc(),
-      count: 2
-    },
-    {
-      title: strings.schoolWork(),
-      description: strings.schoolWorkDesc(),
-      count: 5
-    },
-    {
-      title: strings.recipes(),
-      description: strings.recipesDesc(),
-      count: 10
-    }
-  ]);
-
-  return (
-    <View
-      style={{
-        width: "100%",
-        padding: DefaultAppStyles.GAP,
-        backgroundColor: colors.secondary.background,
-        borderRadius: 10,
-        ...getContainerBorder(colors.secondary.background)
-      }}
-    >
-      <View
-        style={{
-          padding: DefaultAppStyles.GAP,
-          width: "100%",
-          backgroundColor: colors.primary.background,
-          ...getElevationStyle(3),
-          borderRadius: 10,
-          marginVertical: DefaultAppStyles.GAP
-        }}
-      >
-        <Heading size={AppFontSize.md} color={colors.primary.heading}>
-          {data?.title}
-        </Heading>
-        <Paragraph>{data?.description}</Paragraph>
-
-        <Paragraph
-          style={{
-            marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
-          }}
-          size={AppFontSize.xs}
-          color={colors.secondary.paragraph}
-        >
-          {strings.dataTypesCamelCase.notebook()} - {data?.count}{" "}
-          {strings.dataTypesPlural.note()}
-        </Paragraph>
-      </View>
-    </View>
-  );
-};
-
-const notebooks: { id: string; steps: TStep[] } = {
-  id: "notebooks",
-  steps: [
-    {
-      title: strings.notebooks(),
-      text: strings.boostProductivityNotebook(),
-      walkthroughItem: () => <NotebookWelcome />,
-      button: {
-        type: "next",
-        title: strings.next()
-      }
-    },
-    {
-      title: strings.notebookNotes(),
-      text: strings.notebookNotesDesc(),
-      walkthroughItem: (colors: any) => (
-        <View
-          style={{
-            width: "100%",
-            padding: DefaultAppStyles.GAP,
-            backgroundColor: colors.secondary.background,
-            borderRadius: 10,
-            ...getContainerBorder(colors.secondary.background)
-          }}
-        >
-          <View
-            style={{
-              padding: DefaultAppStyles.GAP,
-              width: "100%",
-              backgroundColor: colors.primary.background,
-              ...getElevationStyle(3),
-              borderRadius: 10,
-              marginVertical: 12
-            }}
-          >
-            <Heading size={AppFontSize.md} color={colors.primary.heading}>
-              {strings.workAndOffice()}
-            </Heading>
-            <Paragraph>{strings.workAndOfficeDesc()}</Paragraph>
-
-            <Paragraph
-              style={{
-                marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
-              }}
-              size={AppFontSize.xs}
-              color={colors.secondary.paragraph}
-            >
-              {strings.notes(2)}
-            </Paragraph>
-          </View>
-          <View
-            style={{
-              padding: DefaultAppStyles.GAP,
-              width: "90%",
-              backgroundColor: colors.primary.background,
-              borderRadius: 10,
-              alignSelf: "flex-end",
-              marginBottom: DefaultAppStyles.GAP_VERTICAL
-            }}
-          >
-            <Paragraph color={colors.primary.accent}>
-              <Icon
-                color={colors.primary.accent}
-                size={AppFontSize.sm}
-                name="bookmark"
-              />{" "}
-              {strings.tasks()}
-            </Paragraph>
-          </View>
-          <View
-            style={{
-              padding: DefaultAppStyles.GAP,
-              paddingVertical: DefaultAppStyles.GAP_VERTICAL,
-              width: "80%",
-              backgroundColor: colors.primary.background,
-              borderRadius: defaultBorderRadius,
-              alignSelf: "flex-end",
-              marginBottom: DefaultAppStyles.GAP_VERTICAL
-            }}
-          >
-            <Paragraph size={AppFontSize.xs}>
-              <Icon
-                color={colors.primary.icon}
-                size={AppFontSize.sm}
-                name="note"
-              />{" "}
-              {strings.taskAValue()}
-            </Paragraph>
-          </View>
-          <View
-            style={{
-              padding: DefaultAppStyles.GAP,
-              width: "80%",
-              backgroundColor: colors.primary.background,
-              borderRadius: defaultBorderRadius,
-              paddingVertical: DefaultAppStyles.GAP_VERTICAL,
-              alignSelf: "flex-end",
-              marginBottom: DefaultAppStyles.GAP_VERTICAL
-            }}
-          >
-            <Paragraph size={AppFontSize.xs}>
-              <Icon
-                color={colors.primary.icon}
-                size={AppFontSize.sm}
-                name="note"
-              />{" "}
-              {strings.taskBValue()}
-            </Paragraph>
-          </View>
-          <View
-            style={{
-              padding: DefaultAppStyles.GAP,
-              width: "90%",
-              backgroundColor: colors.primary.background,
-              borderRadius: 10,
-              alignSelf: "flex-end",
-              marginBottom: DefaultAppStyles.GAP_VERTICAL
-            }}
-          >
-            <Paragraph color={colors.primary.accent}>
-              <Icon
-                color={colors.primary.accent}
-                size={AppFontSize.sm}
-                name="bookmark"
-              />{" "}
-              {strings.meetings()}
-            </Paragraph>
-          </View>
-        </View>
-      ),
-      button: {
-        type: "next",
-        title: strings.next()
-      }
-    },
-    {
-      title: strings.easyAccess(),
-      text: strings.easyAccessDesc(),
-      walkthroughItem: () => (
-        <View
-          style={{
-            paddingHorizontal: 20,
-            paddingVertical: DefaultAppStyles.GAP_VERTICAL
-          }}
-        >
-          {/* <PinItem
-            isPlaceholder={true}
-            item={
-              {
-                title: strings.tasks(),
-                type: "notebook"
-              } as Notebook
-            }
-            onPress={() => {}}
-          />
-
-          <PinItem
-            isPlaceholder={true}
-            item={
-              {
-                title: strings.workAndOffice(),
-                type: "notebook"
-              } as Notebook
-            }
-            onPress={() => {}}
-          /> */}
-        </View>
-      ),
-      button: {
-        type: "done",
-        title: strings.addFirstNotebook(),
-        action: () => {
-          eSendEvent(eOpenAddNotebookDialog);
-        }
-      }
-    }
-  ]
-};
-
-const trialstarted: { id: string; steps: TStep[] } = {
-  id: "trialstarted",
-  steps: [
-    {
-      title: strings.trialStarted(),
-      text: strings.trialStartedDesc(),
-      walkthroughItem: (colors) => (
-        <SvgView src={LAUNCH_ROCKET(colors.primary.paragraph)} />
-      ),
-      button: {
-        type: "next",
-        title: strings.next()
-      }
-    },
-    {
-      title: strings.joinTheCause(),
-      text: strings.meetPrivacyMinded(),
-      walkthroughItem: (colors) => (
-        <SvgView src={COMMUNITY_SVG(colors.primary.paragraph)} />
-      ),
-      button: {
-        type: "done",
-        title: strings.continue()
-      },
-      actionButton: {
-        text: strings.joinDiscord(),
-        action: () => {
-          Linking.openURL("https://discord.gg/zQBK97EE22").catch(() => {
-            /* empty */
-          });
-        }
-      }
-    }
-  ]
-};
-
-const emailconfirmed: { id: string; steps: TStep[] } = {
   id: "emailconfirmed",
   steps: [
     {
@@ -350,86 +75,29 @@ const emailconfirmed: { id: string; steps: TStep[] } = {
       }
     }
   ]
-};
+});
 
-const Support = () => {
+const prouser: () => { id: string; steps: TStep[] } = () => {
-  return (
+  return {
-    <View
+    id: "prouser",
-      style={{
+    steps: [
-        width: "100%",
+      {
-        alignItems: "center"
+        title: strings.welcomeToPlan(
-      }}
+          planToDisplayName(
-    >
+            useUserStore.getState().user?.subscription?.plan as SubscriptionPlan
-      <Heading>{strings.prioritySupport()}</Heading>
+          )
-      <Paragraph
+        ),
-        style={{
+        text: strings.thankYouPrivacy(),
-          textAlign: "center"
+        walkthroughItem: (colors) => (
-        }}
+          <AppIcon name="check" color={colors.primary.accent} size={50} />
-        size={AppFontSize.md}
+        ),
-      >
+        button: {
-        {strings.weAreAlwaysListening()}
+          type: "done",
-      </Paragraph>
+          title: strings.continue()
-      <Seperator />
+        }
-
-      <Button
-        style={{
-          justifyContent: "flex-start",
-          marginBottom: DefaultAppStyles.GAP_VERTICAL,
-          width: "90%"
-        }}
-        onPress={() => {
-          Linking.openURL("https://discord.gg/zQBK97EE22").catch(() => {
-            /* empty */
-          });
-        }}
-        icon="discord"
-        type="secondary"
-        title={strings.joinDiscord()}
-      />
-
-      <Button
-        style={{
-          justifyContent: "flex-start",
-          marginBottom: DefaultAppStyles.GAP_VERTICAL,
-          width: "90%"
-        }}
-        icon="bug"
-        type="secondary"
-        title={strings.reportAnIssue()}
-      />
-      <Button
-        style={{
-          justifyContent: "flex-start",
-          marginBottom: DefaultAppStyles.GAP_VERTICAL,
-          width: "90%"
-        }}
-        icon="email"
-        type="secondary"
-        title={strings.emailSupport()}
-      />
-    </View>
-  );
-};
-
-const prouser: { id: string; steps: TStep[] } = {
-  id: "prouser",
-  steps: [
-    {
-      title: strings.welcomeToPlan(
-        planToDisplayName(
-          useUserStore.getState().user?.subscription?.plan as SubscriptionPlan
-        )
-      ),
-      text: strings.thankYouPrivacy(),
-      walkthroughItem: (colors) => (
-        <AppIcon name="check" color={colors.primary.accent} size={50} />
-      ),
-      button: {
-        type: "done",
-        title: strings.continue()
       }
-    }
+    ]
-  ]
+  };
 };
 
-export default { notebooks, trialstarted, emailconfirmed, prouser };
+export default { emailconfirmed, prouser };

apps/mobile/app/hooks/use-pricing-plans.ts

@@ -401,6 +401,7 @@ const usePricingPlans = (options?: PricingPlansOptions) => {
           obfuscatedAccountIdAndroid: user.id,
           obfuscatedProfileIdAndroid: user.id,
           sku: product.productId,
+          skus: [product.productId],
           quantity: 1
         });
       }

packages/intl/src/strings.ts

@@ -2579,5 +2579,6 @@ Use this if changes from other devices are not appearing on this device. This wi
   unlimited: () => t`Unlimited`,
   fiveYearPlan: () => t`5 year plan (One time purchase)`,
   educationPlan: () => t`Education plan`,
-  welcomeToPlan: (plan: string) => t`Welcome to Notesnook ${plan}`
+  welcomeToPlan: (plan: string) => t`Welcome to Notesnook ${plan}`,
+  thankYouForPurchase: () => t`Thank you for the purchase`
 };