From 37e7d44587ab6ba4db422cefe92ea4b75faec9ec Mon Sep 17 00:00:00 2001 From: Ammar Ahmed Date: Tue, 21 Apr 2026 11:44:13 +0500 Subject: [PATCH] mobile: update ui for paywall flow --- apps/mobile/app/assets/images/assets.js | 131 ++ apps/mobile/app/components/paywall/common.ts | 24 + .../app/components/paywall/compare-plans.tsx | 181 +++ .../app/components/paywall/faq-item.tsx | 73 ++ apps/mobile/app/components/paywall/index.tsx | 1078 +++++------------ .../app/components/paywall/plan-card.tsx | 332 +++++ .../app/components/paywall/review-item.tsx | 84 ++ .../app/components/sheets/buy-plan/index.tsx | 585 +++++---- apps/mobile/app/hooks/use-pricing-plans.ts | 8 +- apps/mobile/app/utils/size/index.js | 2 +- apps/mobile/fonts/MaterialCommunityIcons.ttf | Bin 27084 -> 27204 bytes apps/mobile/scripts/optimize-fonts.mjs | 3 +- packages/intl/locale/en.po | 82 +- packages/intl/locale/pseudo-LOCALE.po | 72 +- packages/intl/src/strings.ts | 32 +- 15 files changed, 1621 insertions(+), 1066 deletions(-) create mode 100644 apps/mobile/app/components/paywall/common.ts create mode 100644 apps/mobile/app/components/paywall/compare-plans.tsx create mode 100644 apps/mobile/app/components/paywall/faq-item.tsx create mode 100644 apps/mobile/app/components/paywall/plan-card.tsx create mode 100644 apps/mobile/app/components/paywall/review-item.tsx diff --git a/apps/mobile/app/assets/images/assets.js b/apps/mobile/app/assets/images/assets.js index 2f7a1c4bf..336ea015b 100644 --- a/apps/mobile/app/assets/images/assets.js +++ b/apps/mobile/app/assets/images/assets.js @@ -179,3 +179,134 @@ export const INTRO_ILLUSTRATION = ` + + + + + + +`; + +export const TRUST_BAR_SVG = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; diff --git a/apps/mobile/app/components/paywall/common.ts b/apps/mobile/app/components/paywall/common.ts new file mode 100644 index 000000000..1b9dd4660 --- /dev/null +++ b/apps/mobile/app/components/paywall/common.ts @@ -0,0 +1,24 @@ +/* +This file is part of the Notesnook project (https://notesnook.com/) + +Copyright (C) 2023 Streetwriters (Private) Limited + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program. If not, see . +*/ +export const Steps = { + select: 1, + buy: 2, + finish: 3, + buyWeb: 4 +}; diff --git a/apps/mobile/app/components/paywall/compare-plans.tsx b/apps/mobile/app/components/paywall/compare-plans.tsx new file mode 100644 index 000000000..d02dd0687 --- /dev/null +++ b/apps/mobile/app/components/paywall/compare-plans.tsx @@ -0,0 +1,181 @@ +/* +This file is part of the Notesnook project (https://notesnook.com/) + +Copyright (C) 2023 Streetwriters (Private) Limited + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program. If not, see . +*/ + +import { getFeaturesTable } from "@notesnook/common"; +import { strings } from "@notesnook/intl"; +import { useThemeColors } from "@notesnook/theme"; +import React from "react"; +import { ScrollView, useWindowDimensions, View } from "react-native"; +import Icon from "react-native-vector-icons/MaterialCommunityIcons"; +//@ts-ignore +import usePricingPlans from "../../hooks/use-pricing-plans"; +import { AppFontSize } from "../../utils/size"; +import { Button } from "../ui/button"; +import Heading from "../ui/typography/heading"; +import Paragraph from "../ui/typography/paragraph"; +import { Steps } from "./common"; + +export const ComparePlans = React.memo( + (props: { + pricingPlans?: ReturnType; + setStep: (step: number) => void; + }) => { + const { colors } = useThemeColors(); + const { width } = useWindowDimensions(); + const isTablet = width > 600; + + return ( + + + {["Features", "Free", "Essential", "Pro", "Believer"].map( + (plan, index) => ( + + {plan} + + ) + )} + + + {getFeaturesTable().map((item, keyIndex) => { + return ( + + {item.map((featureItem, index) => ( + + {typeof featureItem === "string" ? ( + + {featureItem as string} + + ) : ( + <> + {typeof featureItem.caption === "string" || + typeof featureItem.caption === "number" ? ( + + {featureItem.caption === "infinity" + ? "∞" + : featureItem.caption} + + ) : typeof featureItem.caption === "boolean" ? ( + <> + {featureItem.caption === true ? ( + + ) : ( + + )} + + ) : null} + + )} + + ))} + + ); + })} + + + {["features", "free", "essential", "pro", "believer"].map( + (plan, index) => ( + + {plan !== "free" && plan !== "features" ? ( +