From 8d19b6a295d5ef82a89e8be9eeed6d3071fcc64b Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Thu, 4 Feb 2021 14:36:05 +0500 Subject: [PATCH] add carousel to permium dialog --- .../src/components/Premium/PremiumDialog.js | 197 ++++++++++-------- 1 file changed, 111 insertions(+), 86 deletions(-) diff --git a/apps/mobile/src/components/Premium/PremiumDialog.js b/apps/mobile/src/components/Premium/PremiumDialog.js index b10994bbb..e0311dbc8 100644 --- a/apps/mobile/src/components/Premium/PremiumDialog.js +++ b/apps/mobile/src/components/Premium/PremiumDialog.js @@ -4,16 +4,19 @@ import * as RNIap from 'react-native-iap'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import {DDS} from '../../services/DeviceDetection'; import {eSendEvent} from '../../services/EventManager'; -import {dHeight, itemSkus} from '../../utils'; +import {dHeight, dWidth, itemSkus} from '../../utils'; import {db} from '../../utils/DB'; import {eOpenLoginDialog} from '../../utils/Events'; import {SIZE} from '../../utils/SizeUtils'; import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper'; import {Button} from '../Button'; import Seperator from '../Seperator'; -import { Toast } from '../Toast'; +import {Toast} from '../Toast'; import Heading from '../Typography/Heading'; import Paragraph from '../Typography/Paragraph'; +import Carousel from 'react-native-snap-carousel'; +import {SvgXml} from 'react-native-svg'; +import {NOTE_SVG} from '../../assets/images/assets'; class PremiumDialog extends React.Component { constructor(props) { super(props); @@ -51,18 +54,50 @@ class PremiumDialog extends React.Component { this.setState({ user: u, }); - await RNIap.initConnection(); + await RNIap.initConnection(); let prod = await RNIap.getSubscriptions(itemSkus); - console.log(prod) + console.log(prod); this.setState({ products: prod, product: prod[0], }); - } catch (e) { - - } + } catch (e) {} } + + features = [ + { + title: 'Cross Platfrom Sync', + 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 Notes 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 too!', + }, + { + 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!', + }, + ]; + render() { const {colors} = this.props; return !this.state.visible ? null : ( @@ -70,9 +105,7 @@ class PremiumDialog extends React.Component { onOpen={async () => { try { await this.getSkus(); - } catch (e) { - - } + } catch (e) {} }} onClose={() => { this.setState({ @@ -96,7 +129,10 @@ class PremiumDialog extends React.Component { paddingTop: 10, alignSelf: 'center', }}> - Notesnook Pro + Notesnook{' '} + + Pro + - {[ - { - title: 'Cross Platfrom Sync', - 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 Notes 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 too!', - }, - { - 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) => ( - + ( - - - - {item.title} {'\n'} - + + + {item.title} + + + {item.description} - + - - ))} + )} + /> @@ -193,10 +207,9 @@ class PremiumDialog extends React.Component { style={{ padding: 5, borderRadius: 10, - backgroundColor: colors.shade, paddingHorizontal: 12, }}> - + {/* {!this.state.user ? 'Try it Now' : 'Upgrade Now'} {'\n'} - - + - {!item.localizedPrice && item.currency + " "}{item.localizedPrice || item.price} + {!item.localizedPrice && item.currency + ' '} + {item.localizedPrice || item.price} /mo ))} - + */}