Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-22 22:49:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

redesign premium dialog

Browse Source
This commit is contained in:
ammarahm-ed
2020-09-24 14:57:21 +05:00
parent 6791a97ca5
commit 6ac6fc8451
1 changed files with 172 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
apps/mobile/src/components/Premium/PremiumDialog.js
View File

@@ -1,189 +1,237 @@
import React from 'react'; import React, {createRef} from 'react';
import {FlatList, Modal, Text, TouchableOpacity, View} from 'react-native'; import {
import * as Animatable from 'react-native-animatable'; FlatList,
Modal,
ScrollView,
Text,
TouchableOpacity,
View,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {opacity, pv, SIZE, WEIGHT} from '../../common/common'; import {opacity, pv, SIZE, WEIGHT} from '../../common/common';
import {eSendEvent} from '../../services/eventManager'; import {eSendEvent} from '../../services/eventManager';
import {eCloseSideMenu} from '../../services/events'; import {eCloseSideMenu, eOpenLoginDialog} from '../../services/events';
import NavigationService from '../../services/NavigationService'; import NavigationService from '../../services/NavigationService';
import {db, getElevation, h, itemSkus, w} from '../../utils/utils';
import ActionSheet from '../ActionSheet';
import {Button} from '../Button'; import {Button} from '../Button';
import Seperator from '../Seperator'; import Seperator from '../Seperator';
import * as RNIap from 'react-native-iap';
class PremiumDialog extends React.Component { class PremiumDialog extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
visible: false, visible: true,
animated: false, animated: false,
user: null,
product: null,
}; };
this.routeIndex = 0; this.routeIndex = 0;
this.count = 0; this.count = 0;
this.actionSheetRef = createRef();
} }
open() { open() {
this.setState({ this.actionSheetRef.current?._setModalVisible();
visible: true,
});
} }
close() { close() {
this.actionSheetRef.current?._setModalVisible(false);
}
async componentDidMount() {
let u = await db.user.get();
let prod = await RNIap.getSubscriptions(itemSkus);
console.log(prod);
this.setState({ this.setState({
visible: false, user: u && u.Id ? u : null,
product: prod[0],
}); });
this.actionSheetRef.current?._setModalVisible(true);
}
componentDidUpdate() {
this.actionSheetRef.current?._setModalVisible(true);
} }
render() { render() {
const {visible, animated} = this.state; const {visible, animated} = this.state;
const {colors} = this.props; const {colors} = this.props;
return ( return (
<Modal <ActionSheet
animated={true} containerStyle={{
animationType="fade" backgroundColor: colors.bg,
visible={visible} width: '100%',
transparent={true}> alignSelf: 'center',
<Animatable.View borderRadius: 10,
transition={['opacity', 'scaleX', 'scaleY']} }}
useNativeDriver={true} gestureEnabled={true}
duration={300} ref={this.actionSheetRef}
iterationCount={1} initialOffsetFromBottom={1}>
<View
style={{ style={{
flex: 1, width: w,
backgroundColor: 'rgba(0,0,0,0.3)', backgroundColor: colors.bg,
width: '100%', justifyContent: 'space-between',
height: '100%', paddingHorizontal: 12,
alignSelf: 'center', borderRadius: 10,
justifyContent: 'center', paddingTop: 10,
alignItems: 'center',
}}> }}>
<TouchableOpacity <Text
onPress={() => this.close()} style={{
fontSize: SIZE.xl,
fontFamily: WEIGHT.bold,
color: colors.heading,
paddingBottom: 20,
paddingTop: 20,
}}>
Notesnook Pro
</Text>
<ScrollView
style={{ style={{
width: '100%', width: '100%',
height: '100%', maxHeight: h * 0.5,
position: 'absolute',
zIndex: 1,
}} }}
/> nestedScrollEnabled={true}
showsVerticalScrollIndicator={false}>
<View {[
style={{ {
width: '90%', title: 'Sync Across Multiple Devices',
backgroundColor: colors.bg, description:
elevation: 5, 'Securely sync your notes on any device, Android, iOS, Windows, MacOS, Linux and Web!',
justifyContent: 'space-between', },
alignItems: 'center', {
padding: 12, title: 'Zero Knowledge',
borderRadius: 5, description:
zIndex: 2, 'No sneaking, no stealing. We give all the keys for your data to you. Privacy is not just a word to us. We use industry-grade XChaChaPoly1305 and Argon2 which is miles ahead other solutions making sure your data is secure and private even a million years from now.',
}}> },
<Text {
style={{ title: 'Organize Note Like Never Before',
fontSize: SIZE.lg, description:
fontFamily: WEIGHT.bold, 'Organize your notes using notebooks, tags and colors. Add notes to favorites for quick access. Pin most important notes and notebooks on top for quick access. You can also pin notes and notebooks to quickly access them!',
color: colors.heading, },
paddingVertical: 20, {
}}> title: 'Full Rich Text Editor with Markdown',
Unlock Premium Features description:
</Text> 'Unleash the power of a complete Rich Text Editor in your notes app. You can add images,links and even embed videos! We have even added full markdown support!',
},
<Text {
style={{ title: 'Export Notes',
fontSize: SIZE.xxxl + 10, description:
fontFamily: WEIGHT.medium, 'You can export your notes as PDF, Markdown, Plain text or HTML file.',
color: colors.pri, },
paddingVertical: 15, {
}}> title: 'Backup and Restore',
6.99 description:
<Text 'Backup and restore your notes anytime into your phone storage. You can encrypt all your backups if required!',
},
].map((item) => (
<View
key={item.title}
style={{ style={{
color: colors.accent, paddingVertical: 5,
fontSize: 12, marginBottom: 10,
}}> }}>
/month
</Text>
</Text>
<FlatList
data={[
'Sync across unlimted devices on any platform',
'Zero-knowledge encryption',
'Organize your notes using notebooks, tags and colors',
'Rich-text editor for all your note taking needs',
'Secure local vault',
]}
keyExtractor={(item, index) => item}
renderItem={({item, index}) => (
<View <View
style={{ style={{
alignItems: 'flex-start',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'flex-start', justifyContent: 'flex-start',
alignItems: 'center', flexWrap: 'wrap',
paddingVertical: 5, width: '100%',
}}> }}>
<Icon name="check" size={SIZE.lg} color={colors.accent} /> <Icon
name="checkbox-marked-circle"
size={SIZE.lg}
color={colors.accent}
/>
<Text <Text
style={{ style={{
marginLeft: 10, marginLeft: 10,
fontFamily: WEIGHT.regular, fontFamily: WEIGHT.regular,
fontSize: SIZE.sm, fontSize: SIZE.md,
maxWidth: '80%', maxWidth: '85%',
color: colors.heading,
}}> }}>
{item} {item.title} {'\n'}
<Text
style={{
marginLeft: 10,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs + 1,
maxWidth: '85%',
color: colors.icon,
}}>
{item.description}
</Text>
</Text> </Text>
</View> </View>
)} </View>
/> ))}
</ScrollView>
<TouchableOpacity <Seperator />
activeOpacity={opacity}
<View
style={{
padding: 5,
borderRadius: 10,
backgroundColor: colors.shade,
paddingHorizontal: 12,
}}>
<Text
style={{ style={{
padding: pv + 2, fontSize: SIZE.xl,
borderRadius: 5, fontFamily: WEIGHT.bold,
marginTop: 10, color: colors.accent,
marginHorizontal: 12,
marginBottom: 10,
alignItems: 'center',
width: '100%',
}}> }}>
{!this.state.user ? 'Try Now' : 'Upgrade Now'}
{'\n'}
<Text <Text
style={{ style={{
fontSize: SIZE.lg, fontSize: 12,
fontFamily: WEIGHT.medium, color: colors.pri,
color: colors.accent, fontFamily: WEIGHT.regular,
textAlign: 'center',
}}> }}>
BUY NOW Start your 14 Day Free Trial (no credit card needed)
</Text> </Text>
</TouchableOpacity> </Text>
<Text
<Seperator /> style={{
fontSize: SIZE.xl,
fontFamily: WEIGHT.medium,
color: colors.pri,
paddingVertical: 15,
}}>
{this.state.product?.localizedPrice}
<Text
style={{
color: colors.accent,
fontSize: 12,
}}>
/mo
</Text>
</Text>
<Button <Button
onPress={() => { onPress={() => {
this.close(); if (!this.state.user) {
eSendEvent(eCloseSideMenu); this.close();
NavigationService.navigate('Signup', { setTimeout(() => {
root: true, eSendEvent(eOpenLoginDialog);
fromHome: true, }, 400);
}); } else {
// Request
}
}} }}
title="Start your 14 day trial" title={this.state.user ? 'Buy Subscription' : 'Sign Up Now'}
height={50} height={50}
width="100%" width="100%"
/> />
<Text
style={{
fontSize: SIZE.xxs,
fontFamily: WEIGHT.medium,
color: colors.pri,
paddingBottom: 10,
textAlign: 'center',
}}>
No credit card required
</Text>
</View> </View>
</Animatable.View> </View>
</Modal> </ActionSheet>
); );
} }
} }