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

/* 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/>.
 */

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";
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";

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,

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="

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();
  const insets = useSafeAreaInsets();
  useNavigationFocus(navigation, {
    onFocus: () => {
      tabBarRef.current.lock();
    }
  });

  useEffect(() => {
    if (!introCompleted) {
      umami.pageView("/welcome", "", []);
    }
  }, [introCompleted]);

  return (
    <View
      testID="notesnook.splashscreen"
      style={{
        width: "100%",
        height: "100%",
        justifyContent: "center",
        alignItems: "center",
        marginTop: insets.top
      }}
    >
      <Image
        source={require("../../assets/images/notesnook.png")}
        style={{
          width: 40,
          height: 40,
          position: "absolute",
          top: 0
        }}
      />
      <View
        style={{
          flexGrow: 1,
          alignItems: "center",
          justifyContent: "center",
          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%",
            opacity: 0.8
          }}
        >
          <Heading>Safe & encrypted notes</Heading>
          <Paragraph size={SIZE.md + 4}>
            {"Write with freedom.\nNever compromise on\nprivacy again."}
          </Paragraph>
        </View>
      </View>

      <View
        style={{
          width: "100%",
          zIndex: 20,
          position: "absolute",
          bottom: height / 10
        }}
      >
        <TouchableOpacity
          activeOpacity={1}
          style={{
            flexDirection: "row",
            alignSelf: "center",
            width: "90%",
            marginBottom: 12,
            paddingHorizontal: 12,
            justifyContent: "center",
            padding: 12,
            maxWidth: 500
          }}
          onPress={async () => {
            await SettingsService.set({ telemetry: !isTelemetryEnabled });
          }}
        >
          <Icon
            size={SIZE.lg}
            name={
              isTelemetryEnabled ? "checkbox-marked" : "checkbox-blank-outline"
            }
            color={isTelemetryEnabled ? colors.accent : colors.icon}
          />

          <Paragraph
            style={{
              flexShrink: 1,
              marginLeft: 12
            }}
            size={SIZE.md}
          >
            Help improve Notesnook by sending completely anonymized{" "}
            <Heading size={SIZE.md}>private analytics and bug reports.</Heading>
          </Paragraph>
        </TouchableOpacity>

        <Button
          fontSize={SIZE.md}
          height={45}
          width={250}
          onPress={async () => {
            navigation.navigate("AppLock", {
              welcome: true
            });

            umami.pageView("/home", "/welcome");
          }}
          style={{
            paddingHorizontal: 24,
            alignSelf: "center",
            borderRadius: 100,
            ...getElevation(5)
          }}
          type="accent"
          title="Get started"
        />
      </View>

      <BouncingView
        style={{
          position: "absolute",
          bottom: DDS.isTab ? -300 : -100,
          zIndex: -1
        }}
        duration={3000}
      >
        <SvgView
          width={Dimensions.get("window").width}
          height={Dimensions.get("window").width}
          src={SVG_Z}
        />
      </BouncingView>
    </View>
  );
};

export default Intro;

/**
 * 1. Welcome Screen
 * 2. Select privacy mode
 * 3. Ask to Sign up
 * 4. Sign up
 * 5. Home Screen
 */