lock items for free-user

apps/mobile/src/components/ActionSheetComponent/index.js

@@ -27,7 +27,8 @@ import {ACTIONS} from '../../provider/actions';
 import NavigationService from '../../services/NavigationService';
 import {timeConverter, ToastEvent, DDS, db} from '../../utils/utils';
 import {openVault, eSendEvent} from '../../services/eventManager';
-import {refreshNotesPage} from '../../services/events';
+import {refreshNotesPage, eOpenPremiumDialog} from '../../services/events';
+import {PremiumTag} from '../Premium/PremiumTag';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
@@ -42,7 +43,7 @@ export const ActionSheetComponent = ({
   columnItems = [],
 }) => {
   const [state, dispatch] = useTracked();
-  const {colors, tags, currentEditingNote} = state;
+  const {colors, tags, premiumUser} = state;
   const [focused, setFocused] = useState(false);
   const [note, setNote] = useState(
     item
@@ -299,6 +300,12 @@ export const ActionSheetComponent = ({
       name: 'Pin',
       icon: 'tag-outline',
       func: async () => {
+        if (!premiumUser) {
+          eSendEvent(eOpenPremiumDialog);
+          close();
+          return;
+        }
+
         if (!note.id) return;
         if (note.type === 'note') {
           await db.notes.note(note.id).pin();
@@ -316,6 +323,11 @@ export const ActionSheetComponent = ({
       name: 'Favorite',
       icon: 'star',
       func: async () => {
+        if (!premiumUser) {
+          eSendEvent(eOpenPremiumDialog);
+          close();
+          return;
+        }
         if (!note.id) return;
         if (note.type === 'note') {
           await db.notes.note(note.id).favorite();
@@ -333,6 +345,11 @@ export const ActionSheetComponent = ({
       name: 'Add to Vault',
       icon: 'shield',
       func: () => {
+        if (!premiumUser) {
+          eSendEvent(eOpenPremiumDialog);
+          close();
+          return;
+        }
         if (!note.id) return;
 
         if (note.locked) {
@@ -532,15 +549,25 @@ export const ActionSheetComponent = ({
         ) : (
           undefined
         )}
-        {item.check ? (
-          <Icon
-            name={
-              item.on ? 'check-circle-outline' : 'checkbox-blank-circle-outline'
-            }
-            color={item.on ? colors.accent : colors.icon}
-            size={SIZE.lg + 2}
-          />
-        ) : null}
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+          <PremiumTag pro={false} />
+
+          {item.check ? (
+            <Icon
+              name={
+                item.on
+                  ? 'check-circle-outline'
+                  : 'checkbox-blank-circle-outline'
+              }
+              color={item.on ? colors.accent : colors.icon}
+              size={SIZE.lg + 2}
+            />
+          ) : null}
+        </View>
       </TouchableOpacity>
     ) : null;
 
@@ -732,7 +759,11 @@ export const ActionSheetComponent = ({
                 fontSize: SIZE.xs,
                 color: colors.accent,
               }}>
-              Suggestions:{' '}
+              {tags.filter(
+                o => o.count > 1 && !note.tags.find(t => t === o.title),
+              ).length === 0
+                ? ''
+                : 'Suggestions '}
             </Text>
             {tags
               .filter(o => o.count > 1 && !note.tags.find(t => t === o.title))
@@ -797,17 +828,36 @@ export const ActionSheetComponent = ({
               borderWidth: 1.5,
               borderColor: focused ? colors.accent : colors.nav,
               paddingVertical: 5,
+              alignItems: 'center',
             }}>
             <TouchableOpacity
               onPress={() => {
+                if (!premiumUser) {
+                  eSendEvent(eOpenPremiumDialog);
+                  close();
+                  return;
+                }
                 tagsInputRef.current?.focus();
               }}
               style={{
                 position: 'absolute',
                 width: '100%',
                 height: '100%',
-              }}
-            />
+                justifyContent: 'flex-start',
+                alignItems: 'flex-end',
+              }}>
+              {!premiumUser ? (
+                <Text
+                  style={{
+                    color: colors.accent,
+                    fontFamily: WEIGHT.regular,
+                    fontSize: 10,
+                    marginRight: 5,
+                  }}>
+                  PRO
+                </Text>
+              ) : null}
+            </TouchableOpacity>
             {note && note.tags ? note.tags.map(_renderTag) : null}
             <TextInput
               style={{