redesign premium dialog

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

@@ -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 {opacity, pv, SIZE, WEIGHT} from '../../common/common';
 import {eSendEvent} from '../../services/eventManager';
-import {eCloseSideMenu} from '../../services/events';
+import {eCloseSideMenu, eOpenLoginDialog} from '../../services/events';
 import NavigationService from '../../services/NavigationService';
+import {db, getElevation, h, itemSkus, w} from '../../utils/utils';
+import ActionSheet from '../ActionSheet';
 import {Button} from '../Button';
 import Seperator from '../Seperator';
-
+import * as RNIap from 'react-native-iap';
 class PremiumDialog extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      visible: false,
+      visible: true,
       animated: false,
+      user: null,
+      product: null,
     };
     this.routeIndex = 0;
     this.count = 0;
+    this.actionSheetRef = createRef();
   }
 
   open() {
-    this.setState({
+    this.actionSheetRef.current?._setModalVisible();
-      visible: true,
-    });
   }
 
   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({
-      visible: false,
+      user: u && u.Id ? u : null,
+      product: prod[0],
     });
+    this.actionSheetRef.current?._setModalVisible(true);
+  }
+  componentDidUpdate() {
+    this.actionSheetRef.current?._setModalVisible(true);
   }
 
   render() {
     const {visible, animated} = this.state;
     const {colors} = this.props;
     return (
-      <Modal
+      <ActionSheet
-        animated={true}
+        containerStyle={{
-        animationType="fade"
+          backgroundColor: colors.bg,
-        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',
+          borderRadius: 10,
-            alignItems: 'center',
-          }}>
-          <TouchableOpacity
-            onPress={() => this.close()}
-            style={{
-              width: '100%',
-              height: '100%',
-              position: 'absolute',
-              zIndex: 1,
         }}
-          />
+        gestureEnabled={true}
-
+        ref={this.actionSheetRef}
+        initialOffsetFromBottom={1}>
         <View
           style={{
-              width: '90%',
+            width: w,
             backgroundColor: colors.bg,
-              elevation: 5,
             justifyContent: 'space-between',
-              alignItems: 'center',
+            paddingHorizontal: 12,
-              padding: 12,
+            borderRadius: 10,
-              borderRadius: 5,
+            paddingTop: 10,
-              zIndex: 2,
           }}>
           <Text
             style={{
-                fontSize: SIZE.lg,
+              fontSize: SIZE.xl,
               fontFamily: WEIGHT.bold,
               color: colors.heading,
-                paddingVertical: 20,
+              paddingBottom: 20,
+              paddingTop: 20,
             }}>
-              Unlock Premium Features
+            Notesnook Pro
           </Text>
 
-            <Text
+          <ScrollView
             style={{
-                fontSize: SIZE.xxxl + 10,
+              width: '100%',
-                fontFamily: WEIGHT.medium,
+              maxHeight: h * 0.5,
-                color: colors.pri,
+            }}
-                paddingVertical: 15,
+            nestedScrollEnabled={true}
-              }}>
+            showsVerticalScrollIndicator={false}>
-              6.99
+            {[
-              <Text
+              {
+                title: 'Sync Across Multiple Devices',
+                description:
+                  'Securely sync your notes on any device, Android, iOS, Windows, MacOS, Linux and Web!',
+              },
+              {
+                title: 'Zero Knowledge',
+                description:
+                  '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.',
+              },
+              {
+                title: 'Organize Note Like Never Before',
+                description:
+                  '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!',
+              },
+              {
+                title: 'Full Rich Text Editor with Markdown',
+                description:
+                  '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!',
+              },
+              {
+                title: 'Export Notes',
+                description:
+                  'You can export your notes as PDF, Markdown, Plain text or HTML file.',
+              },
+              {
+                title: 'Backup and Restore',
+                description:
+                  '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={{
-                  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
                   style={{
+                    alignItems: 'flex-start',
                     flexDirection: 'row',
                     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
                     style={{
                       marginLeft: 10,
                       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>
                 </View>
-              )}
+              </View>
-            />
+            ))}
+          </ScrollView>
         
-            <TouchableOpacity
+
-              activeOpacity={opacity}
+          <Seperator />
+
+          <View
             style={{
-                padding: pv + 2,
+              padding: 5,
-                borderRadius: 5,
+              borderRadius: 10,
-                marginTop: 10,
+              backgroundColor: colors.shade,
-                marginHorizontal: 12,
+              paddingHorizontal: 12,
-                marginBottom: 10,
-                alignItems: 'center',
-                width: '100%',
             }}>
             <Text
               style={{
-                  fontSize: SIZE.lg,
+                fontSize: SIZE.xl,
-                  fontFamily: WEIGHT.medium,
+                fontFamily: WEIGHT.bold,
                 color: colors.accent,
-                  textAlign: 'center',
               }}>
-                BUY NOW
+              {!this.state.user ? 'Try Now' : 'Upgrade Now'}
+              {'\n'}
+              <Text
+                style={{
+                  fontSize: 12,
+                  color: colors.pri,
+                  fontFamily: WEIGHT.regular,
+                }}>
+                Start your 14 Day Free Trial (no credit card needed)
+              </Text>
+            </Text>
+            <Text
+              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>
-            </TouchableOpacity>
-
-            <Seperator />
             <Button
               onPress={() => {
+                if (!this.state.user) {
                   this.close();
-                eSendEvent(eCloseSideMenu);
+                  setTimeout(() => {
-                NavigationService.navigate('Signup', {
+                    eSendEvent(eOpenLoginDialog);
-                  root: true,
+                  }, 400);
-                  fromHome: true,
+                } else {
-                });
+                  // Request 
+                }
+              
               }}
-              title="Start your 14 day trial"
+              title={this.state.user ? 'Buy Subscription' : 'Sign Up Now'}
               height={50}
               width="100%"
             />
-
-            <Text
-              style={{
-                fontSize: SIZE.xxs,
-                fontFamily: WEIGHT.medium,
-                color: colors.pri,
-                paddingBottom: 10,
-                textAlign: 'center',
-              }}>
-              No credit card required
-            </Text>
           </View>
-        </Animatable.View>
+        </View>
-      </Modal>
+      </ActionSheet>
     );
   }
 }