Files
notesnook/apps/mobile/app/components/intro/index.js

214 lines
22 KiB
JavaScript
Raw Normal View History

2022-08-30 16:13:11 +05:00
/* This file is part of the Notesnook project (https://notesnook.com/)
*
* Copyright (C) 2022 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 <http://www.gnu.org/licenses/>.
*/
2022-08-29 16:19:17 +05:00
import React, { useEffect } from "react";
import {
Dimensions,
Image,
TouchableOpacity,
useWindowDimensions,
View
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
2022-08-29 16:19:17 +05:00
import umami from "../../common/analytics";
import { useNavigationFocus } from "../../hooks/use-navigation-focus";
import { DDS } from "../../services/device-detection";
import SettingsService from "../../services/settings";
import { useSettingStore } from "../../stores/use-setting-store";
import { useThemeStore } from "../../stores/use-theme-store";
import { getElevation } from "../../utils";
import { tabBarRef } from "../../utils/global-refs";
import { SIZE } from "../../utils/size";
import { Button } from "../ui/button";
import { SvgView } from "../ui/svg";
import { BouncingView } from "../ui/transitions/bouncing-view";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
2021-02-08 12:55:12 +05:00
let SVG_D =
'<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="485.83373" height="483.5" viewBox="0 0 485.83373 483.5" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M677.54186,336.34717H597.80041a11.47812,11.47812,0,0,1-9.06567-4.39356h0a11.62154,11.62154,0,0,1-2.17652-9.96777,201.63052,201.63052,0,0,0-.00049-93.647,11.62425,11.62425,0,0,1,2.17676-9.96729,11.47753,11.47753,0,0,1,9.06592-4.39355h79.74145a11.6235,11.6235,0,0,1,11.439,9.75537,337.96108,337.96108,0,0,1,0,102.8584A11.6235,11.6235,0,0,1,677.54186,336.34717Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><path d="M597.80041,219.978a5.51264,5.51264,0,0,0-4.35449,2.1084,5.65943,5.65943,0,0,0-1.05371,4.85351,207.656,207.656,0,0,1,.00048,96.44531,5.65638,5.65638,0,0,0,1.053,4.85254l.00049.00049a5.5112,5.5112,0,0,0,4.35425,2.10889h79.74145a5.58248,5.58248,0,0,0,5.50879-4.667,331.9854,331.9854,0,0,0,0-101.03516,5.58248,5.58248,0,0,0-5.50879-4.667Z" transform="translate(-357.08314 -208.25)" fill="#fff"/><path d="M660.14054,248.82872h-41.845a6.00633,6.00633,0,0,1-5.99977-5.99977v-2.34463a6.00633,6.00633,0,0,1,5.99977-5.99977h41.845a6.00633,6.00633,0,0,1,5.99976,5.99977V242.829A6.00632,6.00632,0,0,1,660.14054,248.82872Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><path d="M660.14054,278.4545h-41.845a6.00632,6.00632,0,0,1-5.99977-5.99976V270.1101a6.00632,6.00632,0,0,1,5.99977-5.99976h41.845a6.00632,6.00632,0,0,1,5.99976,5.99976v2.34464A6.00632,6.00632,0,0,1,660.14054,278.4545Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><path d="M660.14054,308.08029h-41.845a6.00633,6.00633,0,0,1-5.99977-5.99977v-2.34463a6.00632,6.00632,0,0,1,5.99977-5.99976h41.845a6.00632,6.00632,0,0,1,5.99976,5.99976v2.34463A6.00632,6.00632,0,0,1,660.14054,308.08029Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><path d="M827.54186,412.34717H747.80041a11.47812,11.47812,0,0,1-9.06567-4.39356h0a11.62154,11.62154,0,0,1-2.17652-9.96777,201.63052,201.63052,0,0,0-.00049-93.647,11.62425,11.62425,0,0,1,2.17676-9.96729,11.47753,11.47753,0,0,1,9.06592-4.39355h79.74145a11.6235,11.6235,0,0,1,11.439,9.75537,337.96108,337.96108,0,0,1,0,102.8584A11.6235,11.6235,0,0,1,827.54186,412.34717Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><path d="M747.80041,295.978a5.51264,5.51264,0,0,0-4.35449,2.1084,5.65943,5.65943,0,0,0-1.05371,4.85351,207.656,207.656,0,0,1,.00048,96.44531,5.65638,5.65638,0,0,0,1.053,4.85254l.00049.00049a5.5112,5.5112,0,0,0,4.35425,2.10889h79.74145a5.58248,5.58248,0,0,0,5.50879-4.667,331.9854,331.9854,0,0,0,0-101.03516,5.58248,5.58248,0,0,0-5.50879-4.667Z" transform="translate(-357.08314 -208.25)" fill="#fff"/><path d="M668.54186,498.84717H588.80041a11.97546,11.97546,0,0,1-9.45825-4.584,12.1192,12.1192,0,0,1-2.27-10.394,201.13112,201.13112,0,0,0-.00049-93.41357,12.12077,12.12077,0,0,1,2.27026-10.39356,11.97561,11.97561,0,0,1,9.4585-4.584h79.74145a12.12667,12.12667,0,0,1,11.93311,10.1792,338.45925,338.45925,0,0,1,0,103.01074A12.12668,12.12668,0,0,1,668.54186,498.84717Z" transform="translate(-357.08314 -208.25)" fill="#f2f2f2"/><path d="M810.14054,339.82872h-41.845a6.00633,6.00633,0,0,1-5.99977-5.99977v-2.34463a6.00633,6.00633,0,0,1,5.99977-5.99977h41.845a6.00633,6.00633,0,0,1,5.99976,5.99977V333.829A6.00632,6.00632,0,0,1,810.14054,339.82872Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><path d="M810.14054,369.4545h-41.845a6.00632,6.00632,0,0,1-5.99977-5.99976V361.1101a6.00632,6.00632,0,0,1,5.99977-5.99976h41.845a6.00632,6.00632,0,0,1,5.99976,5.99976v2.34464A6.00632,6.00632,0,0,1,810.14054,369.4545Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><circle cx="271.81102" cy="228.5" r="23" fill="#fff"/><path d="M639.89416,433.75h-8v-8a3,3,0,0,0-6,0v8h-8a3,3,0,0,0,0,6h8v8a3,3,0,0,0,6,0v-8h8a3,3,0,0,0,0-6Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><path d="M657.89416,225.25h-42a4.50508,4.50508,0,0,1-4.5-4.5v-8a4.50508,4.50508,0,0,1,4.5-4.5h42a4.50508,4.50508,0,0,1,4.5,4.5v8A4.50508,4.50508,0,0,1,657.89416,225.25Z" transform="translate(-357.08314 -208.25)" fill="#ccc"/><path d="M809.89416,
2022-01-22 09:32:23 +05:00
export const SVG_Z =
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245.487 113.9115"><g transform="translate(15.9581 -70.1437)"><path fill="#f2f2f2" d="M181.8672 183.796H88.3134v-54.8973l-.43-.2765 15.1857-14.7907a41.4878 41.4878 0 0 1 28.6939-11.8174l27.916-.2551.04.0477 22.2131 26.426-.0655.7316z" style="stroke-width:.264583"/><path fill="#fff" d="M105.9334 112.1178h55.9519v.5292h-55.9519zM100.3772 117.6741h55.9519v.5292h-55.9519z" style="stroke-width:.264583"/><path fill="#fff" d="M178.6826 154.0514h10.1706v8.9897h-10.1706z" data-name="Rectangle 371" style="stroke-width:.264583"/><path fill="#fff" d="M178.6826 138.4916h10.1706v8.8471h-10.1706z" data-name="Rectangle 372" style="stroke-width:.264583"/><path fill="#f2f2f2" d="M166.653 102.649h9.1202v31.5648h-9.1202z" style="stroke-width:.264583"/><path fill="#e6e6e6" d="M181.8672 183.7957h-50.0656v-36.3798a35.3975 35.3975 0 0 1 8.4588-22.9515l19.3804-22.7213 22.2264 26.4599z" style="stroke-width:.264583"/><path fill="#fff" d="M155.3064 156.4369h10.1706v8.9897h-10.1706z" data-name="Rectangle 374" style="stroke-width:.264583"/><path fill="#fff" d="M155.3064 140.8768h10.1706v8.8471h-10.1706z" data-name="Rectangle 375" style="stroke-width:.264583"/><path fill="#fff" d="M106.7252 154.0514h10.1706v8.9897h-10.1706z" data-name="Rectangle 378" style="stroke-width:.264583"/><path fill="#fff" d="M106.7252 138.4916h10.1706v8.8471h-10.1706z" data-name="Rectangle 379" style="stroke-width:.264583"/><path fill="#f2f2f2" d="M91.7626 85.332h11.0675v38.3117H91.7626z" style="stroke-width:.264583"/><path fill="#f2f2f2" d="M110.199 183.7954H-3.295v-66.6167l-.5047-.325.119-.116 20.73-20.1916A41.863 41.863 0 0 1 46.0038 84.621l37.2782-.3406.0402.0477 26.9535 32.0651-.0773.8764z" style="stroke-width:.264583"/><path fill="#e6e6e6" d="M110.199 183.7954H49.4881V134.88a29.9322 29.9322 0 0 1 7.1528-19.408l26.6087-31.1956 26.9492 32.0815Z" style="stroke-width:.264583"/><path fill="#fff" d="M80.3413 150.6172h9.8174v8.6775h-9.8174zM80.3413 135.5359h9.8174v8.6775h-9.8174z" data-name="Rectangle 381" style="stroke-width:.264583"/><path fill="#fff" d="M19.0243 147.7216H31.369v10.9112H19.0243z" data-name="Rectangle 385" style="stroke-width:.264583"/><path fill="#fff" d="M19.0243 128.8356H31.369v10.7381H19.0243z" data-name="Rectangle 386" style="stroke-width:.264583"/><ellipse cx="20.8891" cy="154.324" fill="#3f3d56" data-name="Ellipse 519" rx="8.7979" ry="17.9515" style="stroke-width:.264583"/><path fill="#808080" d="M21.7016 183.7075c-3.5237-21.1402-.0354-42.2063 0-42.4164l.6856.1162c-.0355.209-3.5036 21.1635 0 42.1862z" data-name="Path 2702" style="fill:#999;stroke-width:.264583"/><path fill="#808080" d="M-54.7406 146.1809h9.0223v.6953h-9.0223z" data-name="Rectangle 388" style="fill:#b3b3b3;stroke-width:.264583" transform="rotate(-28.142)"/><path fill="#808080" d="M-129.2795 83.128h.6953v9.0226h-.6953z" data-name="Rectangle 389" style="fill:#b3b3b3;stroke-width:.264583" transform="rotate(-61.842)"/><ellipse cx="-.4146" cy="141.6901" fill="#808080" data-name="Ellipse 520" rx="12.6968" ry="25.9067" style="fill:#333;stroke-width:.264583"/><path fill="#3f3d56" d="M.9996 184.0552c-5.0784-30.47-.0514-60.829 0-61.1323l.5056.0857c-.0513.3025-5.0636 30.5798 0 60.9624z" data-name="Path 2703" style="fill:#e6e6e6;stroke-width:.264583"/><path fill="#3f3d56" d="M-67.7316 125.3486h13.0209v.513h-13.0209z" data-name="Rectangle 390" style="fill:#ccc;stroke-width:.264583" transform="rotate(-28.142)"/><path fill="#3f3d56" d="M-129.3145 54.7885h.513v13.0209h-.513z" data-name="Rectangle 391" style="fill:#b3b3b3;stroke-width:.264583" transform="rotate(-61.842)"/><path fill="#3f3d56" d="m159.149 89.5463 2.7831-2.2262c-2.1621-.2381-3.0506.9406-3.413 1.874-1.6892-.7014-3.5283.2178-3.5283.2178l5.5687 2.0217a4.2137 4.2137 0 0 0-1.4097-1.8876z" data-name="Path 2708" style="stroke-width:.264583"/><path fill="#3f3d56" d="m108.853 72.401 2.7831-2.2262c-2.1621-.2381-3.0506.9406-3.413 1.874-1.6892-.7013-3.5283.2178-3.5283.2178l5.5687 2.0217a4.214 4.214 0 0 0-1.4105-1.8873z" data-name="Path 2709" style="stroke-width:.264583"/><path fill="#3f3d56" d="
2022-01-22 09:32:23 +05:00
const Intro = ({ navigation }) => {
const colors = useThemeStore((state) => state.colors);
const introCompleted = useSettingStore(
(state) => state.settings.introCompleted
);
const isTelemetryEnabled = useSettingStore(
(state) => state.settings.telemetry
);
const { height } = useWindowDimensions();
2022-07-05 14:33:48 +05:00
const insets = useSafeAreaInsets();
useNavigationFocus(navigation, {
onFocus: () => {
tabBarRef.current.lock();
}
});
2022-01-25 15:12:10 +05:00
2021-02-08 12:55:12 +05:00
useEffect(() => {
2022-03-03 15:09:30 +05:00
if (!introCompleted) {
umami.pageView("/welcome", "", []);
2021-06-26 08:47:52 +05:00
}
2022-03-03 15:09:30 +05:00
}, [introCompleted]);
2021-02-08 12:55:12 +05:00
return (
2022-07-05 14:33:48 +05:00
<View
2022-08-08 23:35:48 +05:00
testID="notesnook.splashscreen"
2022-07-05 14:33:48 +05:00
style={{
width: "100%",
height: "100%",
justifyContent: "center",
alignItems: "center",
2022-07-05 14:33:48 +05:00
marginTop: insets.top
}}
>
<Image
source={require("../../assets/images/notesnook.png")}
2022-07-05 14:33:48 +05:00
style={{
width: 40,
height: 40,
position: "absolute",
2022-07-05 14:33:48 +05:00
top: 0
}}
/>
<View
style={{
flexGrow: 1,
alignItems: "center",
justifyContent: "center",
2022-07-05 14:33:48 +05:00
marginBottom: 100
}}
>
<SvgView
width={height / 4 > 200 ? 200 : height / 4}
height={height / 4 > 200 ? 200 : height / 4}
src={SVG_D}
/>
<View
style={{
marginTop: 40,
marginBottom: 20,
maxWidth: "80%",
2022-07-05 14:33:48 +05:00
opacity: 0.8
}}
>
<Heading>Safe & encrypted notes</Heading>
<Paragraph size={SIZE.md + 4}>
{"Write with freedom.\nNever compromise on\nprivacy again."}
</Paragraph>
2022-07-05 14:33:48 +05:00
</View>
</View>
2022-04-20 17:55:47 +05:00
<View
style={{
width: "100%",
2022-07-05 14:33:48 +05:00
zIndex: 20,
position: "absolute",
2022-07-05 14:33:48 +05:00
bottom: height / 10
2022-01-22 12:57:05 +05:00
}}
>
2022-07-05 14:33:48 +05:00
<TouchableOpacity
activeOpacity={1}
2021-02-08 12:55:12 +05:00
style={{
flexDirection: "row",
alignSelf: "center",
width: "90%",
2022-07-05 14:33:48 +05:00
marginBottom: 12,
paddingHorizontal: 12,
justifyContent: "center",
2022-07-05 14:33:48 +05:00
padding: 12,
maxWidth: 500
}}
onPress={async () => {
await SettingsService.set({ telemetry: !isTelemetryEnabled });
2022-01-22 12:57:05 +05:00
}}
>
2022-07-05 14:33:48 +05:00
<Icon
size={SIZE.lg}
name={
isTelemetryEnabled ? "checkbox-marked" : "checkbox-blank-outline"
}
2022-07-05 14:33:48 +05:00
color={isTelemetryEnabled ? colors.accent : colors.icon}
/>
<Paragraph
2021-04-10 08:59:08 +05:00
style={{
2022-07-05 14:33:48 +05:00
flexShrink: 1,
marginLeft: 12
2022-01-22 12:57:05 +05:00
}}
2022-07-05 14:33:48 +05:00
size={SIZE.md}
2022-01-22 12:57:05 +05:00
>
Help improve Notesnook by sending completely anonymized{" "}
2022-07-05 14:33:48 +05:00
<Heading size={SIZE.md}>private analytics and bug reports.</Heading>
</Paragraph>
</TouchableOpacity>
2021-02-08 12:55:12 +05:00
2022-07-05 14:33:48 +05:00
<Button
fontSize={SIZE.md}
height={45}
width={250}
onPress={async () => {
navigation.navigate("AppLock", {
2022-07-05 14:33:48 +05:00
welcome: true
});
2022-01-25 15:12:10 +05:00
umami.pageView("/home", "/welcome");
2022-07-05 14:33:48 +05:00
}}
style={{
paddingHorizontal: 24,
alignSelf: "center",
2022-07-05 14:33:48 +05:00
borderRadius: 100,
...getElevation(5)
}}
type="accent"
title="Get started"
/>
2022-04-20 17:55:47 +05:00
</View>
2022-07-05 14:33:48 +05:00
<BouncingView
style={{
position: "absolute",
2022-07-11 13:00:22 +05:00
bottom: DDS.isTab ? -300 : -100,
2022-07-05 14:33:48 +05:00
zIndex: -1
}}
duration={3000}
>
<SvgView
width={Dimensions.get("window").width}
height={Dimensions.get("window").width}
2022-07-05 14:33:48 +05:00
src={SVG_Z}
/>
</BouncingView>
</View>
2021-02-08 12:55:12 +05:00
);
};
2022-02-28 13:48:59 +05:00
export default Intro;
2022-02-07 22:21:31 +05:00
/**
* 1. Welcome Screen
* 2. Select privacy mode
* 3. Ask to Sign up
* 4. Sign up
* 5. Home Screen
*/