From 80dea89173a3a73d708d97f095ea5463333c313f Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Fri, 18 Feb 2022 14:45:38 +0500 Subject: [PATCH] add walkthroughs for pro/trial users --- apps/mobile/src/assets/images/assets.js | 8 +- .../src/components/Auth/changepassword.js | 4 +- .../src/components/Auth/forgotpassword.js | 4 +- apps/mobile/src/components/Auth/login.js | 4 +- apps/mobile/src/components/Auth/signup.js | 36 +++- .../src/components/ListPlaceholders/index.js | 2 +- .../src/components/Menu/MenuListItem.js | 5 +- .../src/components/Premium/component.js | 20 +- .../src/components/Premium/pricingplans.js | 15 +- .../src/components/Walkthrough/index.tsx | 106 ++++++---- .../components/Walkthrough/walkthroughs.tsx | 183 +++++++++++++++++- apps/mobile/src/navigation/RootView.js | 2 +- apps/mobile/src/services/Message.js | 4 +- apps/mobile/src/utils/useAppEvents.js | 29 +-- apps/mobile/src/views/Settings/appearance.js | 176 +++++++++-------- apps/mobile/src/views/Settings/index.js | 12 +- 16 files changed, 432 insertions(+), 178 deletions(-) diff --git a/apps/mobile/src/assets/images/assets.js b/apps/mobile/src/assets/images/assets.js index d104b8995..f76df1e9e 100644 --- a/apps/mobile/src/assets/images/assets.js +++ b/apps/mobile/src/assets/images/assets.js @@ -1124,6 +1124,8 @@ export const ACCENT_SVG = color => ` `; -export const WELCOME_SVG = color => ` - -`; +export const SUPPORT_SVG = () => + ``; + +export const WELCOME_SVG = color => + ``; diff --git a/apps/mobile/src/components/Auth/changepassword.js b/apps/mobile/src/components/Auth/changepassword.js index f849c7182..2a86304e6 100644 --- a/apps/mobile/src/components/Auth/changepassword.js +++ b/apps/mobile/src/components/Auth/changepassword.js @@ -22,7 +22,7 @@ export const ChangePassword = () => { const [loading, setLoading] = useState(false); const changePassword = async () => { - if (error || !oldPassword || !password) { + if (error || !oldPassword.current || !password.current) { ToastEvent.show({ heading: 'All fields required', message: 'Fill all the fields and try again.', @@ -34,7 +34,7 @@ export const ChangePassword = () => { eSendEvent(eCloseProgressDialog); setLoading(true); try { - await db.user.changePassword(oldPassword, password); + await db.user.changePassword(oldPassword.current, password.current); ToastEvent.show({ heading: `Account password updated`, type: 'success', diff --git a/apps/mobile/src/components/Auth/forgotpassword.js b/apps/mobile/src/components/Auth/forgotpassword.js index d34fba9a7..f1925588b 100644 --- a/apps/mobile/src/components/Auth/forgotpassword.js +++ b/apps/mobile/src/components/Auth/forgotpassword.js @@ -24,7 +24,7 @@ export const ForgotPassword = () => { const [sent, setSent] = useState(false); const sendRecoveryEmail = async () => { - if (!email || error) { + if (!email.current || error) { ToastEvent.show({ heading: 'Account email is required.', type: 'error', @@ -38,7 +38,7 @@ export const ForgotPassword = () => { if (lastRecoveryEmailTime && Date.now() - JSON.parse(lastRecoveryEmailTime) < 60000 * 3) { throw new Error('Please wait before requesting another email'); } - await db.user.recoverAccount(email.toLowerCase()); + await db.user.recoverAccount(email.current.toLowerCase()); await MMKV.setItem('lastRecoveryEmailTime', JSON.stringify(Date.now())); ToastEvent.show({ heading: `Check your email to reset password`, diff --git a/apps/mobile/src/components/Auth/login.js b/apps/mobile/src/components/Auth/login.js index 2d42e3a38..66013081f 100644 --- a/apps/mobile/src/components/Auth/login.js +++ b/apps/mobile/src/components/Auth/login.js @@ -1,5 +1,5 @@ import React, { useEffect, useRef, useState } from 'react'; -import { LayoutAnimation, Platform, View } from 'react-native'; +import { Platform, View } from 'react-native'; import { SheetManager } from 'react-native-actions-sheet'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useTracked } from '../../provider'; @@ -31,9 +31,7 @@ export const Login = ({ changeMode }) => { const emailInputRef = useRef(); const passwordInputRef = useRef(); const password = useRef(); - const [focused, setFocused] = useState(false); - const [error, setError] = useState(false); const [loading, setLoading] = useState(false); const insets = useSafeAreaInsets(); diff --git a/apps/mobile/src/components/Auth/signup.js b/apps/mobile/src/components/Auth/signup.js index dd27d92da..d2658c592 100644 --- a/apps/mobile/src/components/Auth/signup.js +++ b/apps/mobile/src/components/Auth/signup.js @@ -8,7 +8,8 @@ import { eSendEvent, ToastEvent } from '../../services/EventManager'; import { clearMessage, setEmailVerifyMessage } from '../../services/Message'; import PremiumService from '../../services/PremiumService'; import { db } from '../../utils/database'; -import { eCloseLoginDialog, eOpenResultDialog } from '../../utils/Events'; +import { eCloseLoginDialog } from '../../utils/Events'; +import { openLinkInBrowser } from '../../utils/functions'; import { SIZE } from '../../utils/SizeUtils'; import { sleep } from '../../utils/TimeUtils'; import umami from '../../utils/umami'; @@ -58,7 +59,7 @@ export const Signup = ({ changeMode, welcome, trial }) => { if (!validateInfo() || error) return; setLoading(true); try { - await db.user.signup(email.toLowerCase(), password); + await db.user.signup(email.current.toLowerCase(), password.current); let user = await db.user.getUser(); setUser(user); setLastSynced(await db.lastSynced()); @@ -214,7 +215,36 @@ export const Signup = ({ changeMode, welcome, trial }) => { marginBottom={5} /> - By signing up, you agree to our terms of service and privacy policy. + By signing up, you agree to our{' '} + { + openLinkInBrowser('https://notesnook.com/tos', colors) + .catch(e => {}) + .then(r => {}); + }} + style={{ + textDecorationLine: 'underline' + }} + color={colors.accent} + > + terms of service{' '} + + and{' '} + { + openLinkInBrowser('https://notesnook.com/privacy', colors) + .catch(e => {}) + .then(r => {}); + }} + style={{ + textDecorationLine: 'underline' + }} + color={colors.accent} + > + privacy policy. + { ); }; -export const SvgToPngView = ({ width, height, src, color, img }) => { +export const SvgToPngView = ({ width = 250, height = 250, src }) => { const [error, setError] = useState(false); return ( diff --git a/apps/mobile/src/components/Menu/MenuListItem.js b/apps/mobile/src/components/Menu/MenuListItem.js index 812475d16..9f82ea375 100644 --- a/apps/mobile/src/components/Menu/MenuListItem.js +++ b/apps/mobile/src/components/Menu/MenuListItem.js @@ -1,16 +1,15 @@ import React, { useEffect, useState } from 'react'; -import { InteractionManager, View } from 'react-native'; +import { View } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; +import ToggleSwitch from 'toggle-switch-react-native'; import { useTracked } from '../../provider'; import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager'; import Navigation from '../../services/Navigation'; -import { getElevation } from '../../utils'; import { normalize, SIZE } from '../../utils/SizeUtils'; import { Button } from '../Button'; import { PressableButton } from '../PressableButton'; import Heading from '../Typography/Heading'; import Paragraph from '../Typography/Paragraph'; -import ToggleSwitch from 'toggle-switch-react-native'; export const MenuListItem = React.memo( ({ item, index, noTextMode, testID, rightBtn }) => { diff --git a/apps/mobile/src/components/Premium/component.js b/apps/mobile/src/components/Premium/component.js index d9acb7e86..f409727fe 100644 --- a/apps/mobile/src/components/Premium/component.js +++ b/apps/mobile/src/components/Premium/component.js @@ -7,8 +7,15 @@ import { DDS } from '../../services/DeviceDetection'; import { eSendEvent, presentSheet } from '../../services/EventManager'; import PremiumService from '../../services/PremiumService'; import { getElevation } from '../../utils'; -import { eOpenLoginDialog, eOpenResultDialog } from '../../utils/Events'; +import { db } from '../../utils/database'; +import { + eClosePremiumDialog, + eCloseProgressDialog, + eOpenLoginDialog, + eOpenResultDialog +} from '../../utils/Events'; import { SIZE } from '../../utils/SizeUtils'; +import { sleep } from '../../utils/TimeUtils'; import umami from '../../utils/umami'; import { ActionIcon } from '../ActionIcon'; import { AuthMode } from '../Auth'; @@ -19,6 +26,7 @@ import Seperator from '../Seperator'; import { Toast } from '../Toast'; import Heading from '../Typography/Heading'; import Paragraph from '../Typography/Paragraph'; +import { Walkthrough } from '../Walkthrough'; import { features } from './features'; import { Group } from './group'; import { PricingPlans } from './pricing-plans'; @@ -146,8 +154,14 @@ export const Component = ({ close, promo, getRef }) => { {userCanRequestTrial ? (