add start-your-trail dialog

apps/mobile/src/components/DialogManager/index.js

@@ -1,19 +1,40 @@
-import React, { Component } from 'react';
-import { Platform } from 'react-native';
-import { eSubscribeEvent, eUnSubscribeEvent, openVault } from '../../services/eventManager';
-import { eCloseActionSheet, eCloseAddNotebookDialog, eCloseAddTopicDialog, eCloseLoginDialog, eCloseMoveNoteDialog, eCloseSimpleDialog, eOnLoadNote, eOpenActionSheet, eOpenAddNotebookDialog, eOpenAddTopicDialog, eOpenLoginDialog, eOpenMoveNoteDialog, eOpenSimpleDialog } from '../../services/events';
-import { DDS, hexToRGBA } from '../../utils/utils';
+import React, {Component} from 'react';
+import {Platform} from 'react-native';
+import {
+  eSubscribeEvent,
+  eUnSubscribeEvent,
+  openVault,
+} from '../../services/eventManager';
+import {
+  eCloseActionSheet,
+  eCloseAddNotebookDialog,
+  eCloseAddTopicDialog,
+  eCloseLoginDialog,
+  eCloseMoveNoteDialog,
+  eCloseSimpleDialog,
+  eOnLoadNote,
+  eOpenActionSheet,
+  eOpenAddNotebookDialog,
+  eOpenAddTopicDialog,
+  eOpenLoginDialog,
+  eOpenMoveNoteDialog,
+  eOpenSimpleDialog,
+  eOpenPremiumDialog,
+  eClosePremiumDialog
+} from '../../services/events';
+import {DDS, hexToRGBA} from '../../utils/utils';
 import ActionSheet from '../ActionSheet';
-import { ActionSheetComponent } from '../ActionSheetComponent';
-import { AddNotebookDialog } from '../AddNotebookDialog';
-import { AddTopicDialog } from '../AddTopicDialog';
-import { Dialog } from '../Dialog';
+import {ActionSheetComponent} from '../ActionSheetComponent';
+import {AddNotebookDialog} from '../AddNotebookDialog';
+import {AddTopicDialog} from '../AddTopicDialog';
+import {Dialog} from '../Dialog';
 import MergeEditor from '../MergeEditor';
-import { VaultDialog } from '../VaultDialog';
-import { moveNoteEvent } from './recievers';
-import { TEMPLATE_DELETE, TEMPLATE_PERMANANT_DELETE } from './templates';
+import {VaultDialog} from '../VaultDialog';
+import {moveNoteEvent} from './recievers';
+import {TEMPLATE_DELETE, TEMPLATE_PERMANANT_DELETE} from './templates';
 import MoveNoteDialog from '../MoveNoteDialog';
 import LoginDialog from '../LoginDialog';
+import PremiumDialog from '../Premium/PremiumDialog';
 
 export class DialogManager extends Component {
   constructor(props) {
@@ -117,6 +138,9 @@ export class DialogManager extends Component {
 
     eSubscribeEvent(eOpenLoginDialog, this.showLoginDialog);
     eSubscribeEvent(eCloseLoginDialog, this.hideLoginDialog);
+    
+    eSubscribeEvent(eOpenPremiumDialog, this.showPremiumDialog);
+    eSubscribeEvent(eClosePremiumDialog, this.hidePremiumDialog);
   }
 
   componentWillUnmount() {
@@ -139,8 +163,20 @@ export class DialogManager extends Component {
 
     eUnSubscribeEvent(eOpenLoginDialog, this.showLoginDialog);
     eUnSubscribeEvent(eCloseLoginDialog, this.hideLoginDialog);
+
+    eUnSubscribeEvent(eOpenPremiumDialog, this.showPremiumDialog);
+    eUnSubscribeEvent(eClosePremiumDialog, this.hidePremiumDialog);
   }
 
+  showPremiumDialog = () => {
+    this.premiumDialog.open();
+  };
+
+  hidePremiumDialog = () => {
+    this.premiumDialog.close();
+  };
+  
+
   showLoginDialog = () => {
     this.loginDialog.open();
   };
@@ -295,7 +331,7 @@ export class DialogManager extends Component {
         <MoveNoteDialog
           ref={ref => (this.moveNoteDialog = ref)}
           colors={colors}
-        /> 
+        />
 
         <AddTopicDialog
           ref={ref => (this.addTopicsDialog = ref)}
@@ -312,8 +348,9 @@ export class DialogManager extends Component {
           toEdit={item}
           colors={colors}
         />
+        <PremiumDialog ref={ref => this.premiumDialog = ref}  colors={colors} />
 
-       <LoginDialog colors={colors} ref={ref => (this.loginDialog = ref)} /> 
+        <LoginDialog colors={colors} ref={ref => (this.loginDialog = ref)} />
 
         <MergeEditor />
       </>

apps/mobile/src/components/Premium/PremiumDialog.js

@@ -0,0 +1,205 @@
+import React from 'react';
+import {Modal, TouchableOpacity, View, Text, FlatList} from 'react-native';
+import * as Animatable from 'react-native-animatable';
+import {DDS, getElevation} from '../../utils/utils';
+import {SIZE, WEIGHT, opacity, pv} from '../../common/common';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import NavigationService from '../../services/NavigationService';
+import {eSendEvent} from '../../services/eventManager';
+import {eCloseSideMenu} from '../../services/events';
+
+class PremiumDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+      animated: false,
+    };
+    this.routeIndex = 0;
+    this.count = 0;
+  }
+
+  open() {
+    this.setState({
+      visible: true,
+    });
+  }
+
+  close() {
+    this.setState({
+      visible: false,
+    });
+  }
+
+  render() {
+    const {visible, animated} = this.state;
+    const {colors} = this.props;
+    return (
+      <Modal
+        animated={true}
+        animationType="fade"
+        visible={visible}
+        transparent={true}>
+        <Animatable.View
+          transition={['opacity', 'scaleX', 'scaleY']}
+          useNativeDriver={true}
+          duration={300}
+          iterationCount={1}
+          style={{
+            flex: 1,
+            backgroundColor: 'rgba(0,0,0,0.3)',
+            width: '100%',
+            height: '100%',
+            alignSelf: 'center',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}>
+          <TouchableOpacity
+            onPress={() => this.close()}
+            style={{
+              width: '100%',
+              height: '100%',
+              position: 'absolute',
+              zIndex: 1,
+            }}
+          />
+
+          <View
+            style={{
+              width: '90%',
+              backgroundColor: colors.bg,
+              elevation: 5,
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              padding: 12,
+              borderRadius: 5,
+              zIndex: 2,
+            }}>
+            <Text
+              style={{
+                fontSize: SIZE.lg,
+                fontFamily: WEIGHT.bold,
+                color: colors.pri,
+                paddingVertical: 20,
+              }}>
+              Unlock Premium Features
+            </Text>
+
+            <Text
+              style={{
+                fontSize: SIZE.xxxl + 10,
+                fontFamily: WEIGHT.medium,
+                color: colors.pri,
+                paddingVertical: 15,
+              }}>
+              6.99
+              <Text
+                style={{
+                  color: colors.accent,
+                  fontSize: 12,
+                }}>
+                /month
+              </Text>
+            </Text>
+            <FlatList
+              data={[
+                'Sync across unlimted devices',
+                'Zero-knowledge encryption',
+                'Organize your notes using notebooks, tags and colors',
+                'Rich-text editor for all your note taking needs',
+                'Secure local vault',
+              ]}
+              renderItem={({item, index}) => (
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    justifyContent: 'flex-start',
+                    alignItems: 'center',
+                    paddingVertical: 5,
+                  }}>
+                  <Icon name="check" size={SIZE.md} color={colors.accent} />
+
+                  <Text
+                    style={{
+                      marginLeft: 10,
+                      fontFamily: WEIGHT.regular,
+                      fontSize: SIZE.sm,
+                      maxWidth: '80%',
+                    }}>
+                    {item}
+                  </Text>
+                </View>
+              )}
+            />
+
+            <TouchableOpacity
+              activeOpacity={opacity}
+              style={{
+                padding: pv + 2,
+                borderRadius: 5,
+                marginTop: 10,
+                marginHorizontal: 12,
+                marginBottom: 10,
+                alignItems: 'center',
+                width: '100%',
+              }}>
+              <Text
+                style={{
+                  fontSize: SIZE.sm,
+                  fontFamily: WEIGHT.medium,
+                  color: colors.accent,
+                  textAlign: 'center',
+                }}>
+                Buy Now
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              activeOpacity={opacity}
+              onPress={() => {
+                this.close();
+                eSendEvent(eCloseSideMenu);
+                NavigationService.navigate('Signup', {
+                  root: true,
+                  fromHome: true,
+                });
+              }}
+              style={{
+                ...getElevation(3),
+                padding: pv + 2,
+                backgroundColor: colors.accent,
+                borderRadius: 5,
+                marginTop: 10,
+                marginHorizontal: 12,
+                marginBottom: 10,
+                alignItems: 'center',
+                width: '100%',
+              }}>
+              <Text
+                style={{
+                  fontSize: SIZE.sm,
+                  fontFamily: WEIGHT.medium,
+                  color: 'white',
+                  textAlign: 'center',
+                }}>
+                Start your 14 day trial today
+              </Text>
+            </TouchableOpacity>
+            <Text
+              style={{
+                fontSize: SIZE.xxs,
+                fontFamily: WEIGHT.medium,
+                color: colors.pri,
+                paddingBottom: 10,
+                textAlign: 'center',
+              }}>
+              No credit card required
+            </Text>
+          </View>
+        </Animatable.View>
+      </Modal>
+    );
+  }
+}
+
+export default PremiumDialog;