add a new premium dialog

2025-12-22 22:49:45 +01:00 · 2020-11-14 13:53:19 +05:00
parent 1199768eee
commit a4663048f6
8 changed files with 234 additions and 70 deletions
--- 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,
--- 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: '}
          </Text>
        )}

--- a/apps/mobile/src/components/ActionSheetComponent/GetPremium.js
+++ 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 (
+    <Animated.View
+      style={{
+        position: 'absolute',
+        backgroundColor: colors.accent,
+        zIndex: 999,
+        ...getElevation(10),
+        padding: 12,
+        borderRadius: 5,
+        flexDirection: 'row',
+        alignSelf: 'center',
+		justifyContent: 'space-between',
+		top:offset,
+        transform: [
+          {
+            translateX: translate,
+          },
+        ],
+      }}>
+      <Heading size={SIZE.md} color="white" style={{maxWidth: '75%', paddingRight: 6}}>
+        {msg.title}
+        {'\n'}
+        <Paragraph color="white">{msg.desc}</Paragraph>
+      </Heading>
+
+      <Button
+        onPress={async () => {
+          close();
+          await sleep(300);
+          eSendEvent(eOpenPremiumDialog);
+        }}
+        width={80}
+        title="Get Now"
+        type="inverted"
+      />
+    </Animated.View>
+  );
+};
--- a/apps/mobile/src/components/ActionSheetComponent/index.js
+++ b/apps/mobile/src/components/ActionSheetComponent/index.js
@@ -19,6 +19,7 @@ import {
  sendNoteEditedEvent,
  ToastEvent,
 } from '../../services/EventManager';
+import PremiumService from '../../services/PremiumService';
 import {
  ACCENT,
  COLOR_SCHEME,
@@ -27,11 +28,15 @@ import {
  setColorScheme,
 } from '../../utils/Colors';
 import {db} from '../../utils/DB';
-import {eOpenLoginDialog, eOpenMoveNoteDialog} from '../../utils/Events';
-import { deleteItems } from '../../utils/functions';
+import {
+  eOpenLoginDialog,
+  eOpenMoveNoteDialog,
+  eShowGetPremium,
+} from '../../utils/Events';
+import {deleteItems} from '../../utils/functions';
 import {MMKV} from '../../utils/mmkv';
 import {opacity, ph, pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
-import {timeConverter} from '../../utils/TimeUtils';
+import {sleep, timeConverter} from '../../utils/TimeUtils';
 import {Button} from '../Button';
 import {PremiumTag} from '../Premium/PremiumTag';
 import {PressableButton} from '../PressableButton';
@@ -40,6 +45,7 @@ import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 import {ActionSheetColorsSection} from './ActionSheetColorsSection';
 import {ActionSheetTagsSection} from './ActionSheetTagsSection';
+import {GetPremium} from './GetPremium';
 const w = Dimensions.get('window').width;

 export const ActionSheetComponent = ({
@@ -174,11 +180,10 @@ export const ActionSheetComponent = ({
      func: async () => {
        close();
        try {
-          await deleteItems(note)
-        } catch(e) {
+          await deleteItems(note);
+        } catch (e) {
          console.log(e);
        }
-     
      },
    },
    {
@@ -423,36 +428,44 @@ export const ActionSheetComponent = ({
    }
  };

-  const onPressVaultButton = () => {
-    if (!premiumUser) {
-      close('premium');
-      return;
-    }
-    if (!note.id) return;
+  const onPressVaultButton = async () => {
+    await PremiumService.verify(
+      () => {
+        if (!note.id) return;

-    if (note.locked) {
-      close('unlock');
-    } else {
-      db.vault
-        .add(note.id)
-        .then(() => {
-          sendNoteEditedEvent(note.id, false, true);
-          close();
-        })
-        .catch(async (e) => {
-          switch (e.message) {
-            case db.vault.ERRORS.noVault:
-              close('novault');
-              break;
-            case db.vault.ERRORS.vaultLocked:
-              close('locked');
-              break;
-            case db.vault.ERRORS.wrongPassword:
+        if (note.locked) {
+          close('unlock');
+        } else {
+          db.vault
+            .add(note.id)
+            .then(() => {
+              sendNoteEditedEvent(note.id, false, true);
              close();
-              break;
-          }
+            })
+            .catch(async (e) => {
+              switch (e.message) {
+                case db.vault.ERRORS.noVault:
+                  close('novault');
+                  break;
+                case db.vault.ERRORS.vaultLocked:
+                  close('locked');
+                  break;
+                case db.vault.ERRORS.wrongPassword:
+                  close();
+                  break;
+              }
+            });
+        }
+      },
+      () => {
+        eSendEvent(eShowGetPremium, {
+          context: 'sheet',
+          title: 'Get Notesnook Pro',
+          desc:
+            'With Notesnook Pro you can add notes to your vault and do so much more! Get it now.',
        });
-    }
+      },
+    );
  };

  return (
@@ -467,6 +480,7 @@ export const ActionSheetComponent = ({
        backgroundColor: colors.bg,
        paddingHorizontal: 0,
      }}>
+      <GetPremium context="sheet" close={close} offset={-110} />
      {!note.id && !note.dateCreated ? (
        <Paragraph style={{marginVertical: 10}}>
          Start writing to save your note.
@@ -635,10 +649,16 @@ export const ActionSheetComponent = ({
        </PressableButton>
      ) : null}

-      {hasColors && note.id ? <ActionSheetColorsSection item={note} /> : null}
+      {hasColors && note.id ? (
+        <ActionSheetColorsSection close={close} item={note} />
+      ) : null}

      {hasTags ? (
-        <ActionSheetTagsSection item={note} localRefresh={localRefresh} />
+        <ActionSheetTagsSection
+          close={close}
+          item={note}
+          localRefresh={localRefresh}
+        />
      ) : null}

      {columnItems.length > 0 ? (
--- a/apps/mobile/src/components/Button/index.js
+++ b/apps/mobile/src/components/Button/index.js
@@ -21,6 +21,11 @@ const BUTTON_TYPES = {
    text: 'white',
    selected: 'accent',
  },
+  inverted: {
+    primary: 'bg',
+    text: 'accent',
+    selected: 'bg',
+  },
 };

 export const Button = ({
@@ -61,7 +66,7 @@ export const Button = ({
          style={{
            marginRight: 0,
          }}
-          color={color[BUTTON_TYPES[type].text]}
+          color={colors[BUTTON_TYPES[type].text]}
          size={SIZE.md}
        />
      )}
--- a/apps/mobile/src/components/SimpleList/index.js
+++ b/apps/mobile/src/components/SimpleList/index.js
@@ -169,6 +169,7 @@ const SimpleList = ({
            onPress={placeholderData.action}
            title={placeholderData.button}
            icon="plus"
+            type="transparent"
            fontSize={SIZE.md}
          />
        )}
--- a/apps/mobile/src/services/PremiumService.js
+++ b/apps/mobile/src/services/PremiumService.js
@@ -4,7 +4,7 @@ import { eSendEvent } from "./EventManager";

 let premiumStatus = null;

-function setPremiumStatus(status) {
+async function setPremiumStatus(status) {
 	try {
 		let user = await db.user.get();
 		if (!user || !user.id) {
@@ -17,12 +17,17 @@ function setPremiumStatus(status) {
 	  }
 }

-async function verify(callback) {
+async function verify(callback,error) {
  try {
 	let user = await db.user.get();
 	
    if (!user || !user.id) {
-      eSendEvent(eOpenPremiumDialog);
+      if (error) {
+        error();
+        return;
+      }
+
+      eSendEvent( eOpenPremiumDialog);
      return;
    } else {
      if (!callback) console.warn('You must provide a callback function');
--- a/apps/mobile/src/utils/Events.js
+++ b/apps/mobile/src/utils/Events.js
@@ -119,4 +119,6 @@ export const eOpenSortDialog = '559';
 export const eCloseSortDialog = '560';

 export const eOpenJumpToDialog = '561';
-export const eCloseJumpToDialog = '562';
+export const eCloseJumpToDialog = '562';
+
+export const eShowGetPremium = '563';