From a4663048f63db61d59a33fe965f95a2159bbefa9 Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Sat, 14 Nov 2020 13:53:19 +0500 Subject: [PATCH] add a new premium dialog --- .../ActionSheetColorsSection.js | 36 ++++--- .../ActionSheetTagsSection.js | 60 ++++++++---- .../ActionSheetComponent/GetPremium.js | 95 +++++++++++++++++++ .../components/ActionSheetComponent/index.js | 90 +++++++++++------- apps/mobile/src/components/Button/index.js | 7 +- .../mobile/src/components/SimpleList/index.js | 1 + apps/mobile/src/services/PremiumService.js | 11 ++- apps/mobile/src/utils/Events.js | 4 +- 8 files changed, 234 insertions(+), 70 deletions(-) create mode 100644 apps/mobile/src/components/ActionSheetComponent/GetPremium.js diff --git a/apps/mobile/src/components/ActionSheetComponent/ActionSheetColorsSection.js b/apps/mobile/src/components/ActionSheetComponent/ActionSheetColorsSection.js index d64b221ec..d93a3a762 100644 --- a/apps/mobile/src/components/ActionSheetComponent/ActionSheetColorsSection.js +++ b/apps/mobile/src/components/ActionSheetComponent/ActionSheetColorsSection.js @@ -4,15 +4,18 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import {useTracked} from '../../provider'; import {Actions} from '../../provider/Actions'; import {DDS} from '../../services/DeviceDetection'; -import {sendNoteEditedEvent} from '../../services/EventManager'; -import { dWidth } from '../../utils'; +import {eSendEvent, sendNoteEditedEvent} from '../../services/EventManager'; +import PremiumService from '../../services/PremiumService'; +import {dWidth} from '../../utils'; import {COLORS_NOTE} from '../../utils/Colors'; import {hexToRGBA, RGB_Linear_Shade} from '../../utils/ColorUtils'; import {db} from '../../utils/DB'; +import { eShowGetPremium } from '../../utils/Events'; import {SIZE} from '../../utils/SizeUtils'; +import { sleep } from '../../utils/TimeUtils'; import {PressableButton} from '../PressableButton'; -export const ActionSheetColorsSection = ({item}) => { +export const ActionSheetColorsSection = ({item,close}) => { const [state, dispatch] = useTracked(); const {colors} = state; const [note, setNote] = useState(item); @@ -49,16 +52,23 @@ export const ActionSheetColorsSection = ({item}) => { opacity={1} key={color.value} onPress={async () => { - let noteColors = note.colors; - - if (noteColors.includes(color.name)) { - await db.notes.note(note.id).uncolor(color.name); - } else { - await db.notes.note(note.id).color(color.name); - } - dispatch({type: Actions.COLORS}); - sendNoteEditedEvent(note.id, false, true); - localRefresh(); + await PremiumService.verify(async () => { + let noteColors = note.colors; + if (noteColors.includes(color.name)) { + await db.notes.note(note.id).uncolor(color.name); + } else { + await db.notes.note(note.id).color(color.name); + } + dispatch({type: Actions.COLORS}); + sendNoteEditedEvent(note.id, false, true); + localRefresh(); + },() => { + eSendEvent(eShowGetPremium,{ + context:'sheet', + title:'Get Notesnook Pro', + desc:'To assign color to a note get Notesnook Pro today.' + }) + }); }} customStyle={{ width: DDS.isTab ? 400 / 10 : dWidth / 10, diff --git a/apps/mobile/src/components/ActionSheetComponent/ActionSheetTagsSection.js b/apps/mobile/src/components/ActionSheetComponent/ActionSheetTagsSection.js index b72de76d5..29842c1f9 100644 --- a/apps/mobile/src/components/ActionSheetComponent/ActionSheetTagsSection.js +++ b/apps/mobile/src/components/ActionSheetComponent/ActionSheetTagsSection.js @@ -2,16 +2,19 @@ import React, {createRef, useCallback, useEffect, useState} from 'react'; import {Text, TextInput, TouchableOpacity, View} from 'react-native'; import {useTracked} from '../../provider'; import {Actions} from '../../provider/Actions'; -import {sendNoteEditedEvent, ToastEvent} from '../../services/EventManager'; +import {eSendEvent, sendNoteEditedEvent, ToastEvent} from '../../services/EventManager'; +import PremiumService from '../../services/PremiumService'; import {db} from '../../utils/DB'; +import { eShowGetPremium } from '../../utils/Events'; import {SIZE, WEIGHT} from '../../utils/SizeUtils'; +import {sleep} from '../../utils/TimeUtils'; const tagsInputRef = createRef(); let prevQuery = null; let tagToAdd = ''; let backPressCount = 0; -export const ActionSheetTagsSection = ({item}) => { +export const ActionSheetTagsSection = ({item, close}) => { const [state, dispatch] = useTracked(); const {colors, tags, premiumUser} = state; const [suggestions, setSuggestions] = useState([]); @@ -42,22 +45,45 @@ export const ActionSheetTagsSection = ({item}) => { return; } - let tag = tagToAdd; - tag = tag.trim(); - if (tag.includes(' ')) { - tag = tag.replace(' ', '_'); - } - if (tag.includes(',')) { - tag = tag.replace(',', ''); + async function add() { + let tag = tagToAdd; + tag = tag.trim(); + if (tag.includes(' ')) { + tag = tag.replace(' ', '_'); + } + if (tag.includes(',')) { + tag = tag.replace(',', ''); + } + + try { + await db.notes.note(note.id).tag(tag); + localRefresh(note.type); + dispatch({type: Actions.TAGS}); + tagsInputRef.current?.setNativeProps({ + text: '', + }); + tagToAdd = ''; + } catch (e) { + ToastEvent.show(e.message, 'error', 'local'); + } } - await db.notes.note(note.id).tag(tag); - localRefresh(note.type); - dispatch({type: Actions.TAGS}); - tagsInputRef.current?.setNativeProps({ - text: '', - }); - tagToAdd = ''; + if ( + tags.length >= 5 && + tags.findIndex((t) => t.title === tagToAdd) === -1 + ) { + await PremiumService.verify(add, () => { + eSendEvent(eShowGetPremium, { + context: 'sheet', + title: 'Get Notesnook Pro', + desc: 'To create more tags for your notes become a Pro user today.', + }); + }); + + return; + } + + await add(); }); useEffect(() => { @@ -171,7 +197,7 @@ export const ActionSheetTagsSection = ({item}) => { fontSize: SIZE.xs, color: colors.pri, }}> - {"Suggested: "} + {'Suggested: '} )} diff --git a/apps/mobile/src/components/ActionSheetComponent/GetPremium.js b/apps/mobile/src/components/ActionSheetComponent/GetPremium.js new file mode 100644 index 000000000..0584b55e8 --- /dev/null +++ b/apps/mobile/src/components/ActionSheetComponent/GetPremium.js @@ -0,0 +1,95 @@ +import React, {useEffect, useState} from 'react'; +import Animated, {Easing} from 'react-native-reanimated'; +import {useTracked} from '../../provider'; +import { + eSendEvent, + eSubscribeEvent, + eUnSubscribeEvent, +} from '../../services/EventManager'; +import {getElevation} from '../../utils'; +import {eOpenPremiumDialog, eShowGetPremium} from '../../utils/Events'; +import { SIZE } from '../../utils/SizeUtils'; +import {sleep} from '../../utils/TimeUtils'; +import {Button} from '../Button'; +import Heading from '../Typography/Heading'; +import Paragraph from '../Typography/Paragraph'; + +const translate = new Animated.Value(-800); + +export const GetPremium = ({close, context = 'global',offset=0}) => { + const [state, dispatch] = useTracked(); + const {colors} = state; + const [msg, setMsg] = useState({ + title: '', + desc: '', + }); + + const open = (event) => { + if (event.context === context) { + setMsg({ + title: event.title, + desc: event.desc, + }); + Animated.timing(translate, { + toValue: 0, + duration: 300, + easing: Easing.inOut(Easing.ease), + }).start(); + + setTimeout(async () => { + Animated.timing(translate, { + toValue: +800, + duration: 150, + easing: Easing.inOut(Easing.ease), + }).start(); + await sleep(200); + translate.setValue(-800); + }, 5000); + } + }; + + useEffect(() => { + eSubscribeEvent(eShowGetPremium, open); + return () => { + eUnSubscribeEvent(eShowGetPremium, open); + }; + }, []); + + return ( + + + {msg.title} + {'\n'} + {msg.desc} + + +