From ff33619865539d662ba0b34ed4e789fb75ddc2e1 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Mon, 22 Nov 2021 15:12:26 +0500
Subject: [PATCH] feat: announcement dialog

---
 .../ActionSheetComponent/BouncingView.js      |  40 +++--
 .../src/components/Announcements/body.js      |  20 +++
 .../src/components/Announcements/cta.js       |  31 ++++
 .../components/Announcements/description.js   |  21 +++
 .../src/components/Announcements/functions.js |  14 ++
 .../src/components/Announcements/index.js     | 163 ++++++++++++++++++
 .../src/components/Announcements/list.js      |  40 +++++
 .../src/components/Announcements/photo.js     |  19 ++
 .../components/Announcements/subheading.js    |  23 +++
 .../src/components/Announcements/title.js     |  21 +++
 .../src/components/Dialog/BaseDialog.js       |   5 +-
 .../src/components/DialogManager/index.js     |   2 +
 .../components/ResultDialog/ProFeatures.js    |   8 +-
 .../src/components/SimpleList/announcement.js |  18 +-
 apps/mobile/src/utils/Events.js               |   5 +-
 15 files changed, 401 insertions(+), 29 deletions(-)
 create mode 100644 apps/mobile/src/components/Announcements/body.js
 create mode 100644 apps/mobile/src/components/Announcements/cta.js
 create mode 100644 apps/mobile/src/components/Announcements/description.js
 create mode 100644 apps/mobile/src/components/Announcements/functions.js
 create mode 100644 apps/mobile/src/components/Announcements/index.js
 create mode 100644 apps/mobile/src/components/Announcements/list.js
 create mode 100644 apps/mobile/src/components/Announcements/photo.js
 create mode 100644 apps/mobile/src/components/Announcements/subheading.js
 create mode 100644 apps/mobile/src/components/Announcements/title.js

diff --git a/apps/mobile/src/components/ActionSheetComponent/BouncingView.js b/apps/mobile/src/components/ActionSheetComponent/BouncingView.js
index d5828495a..d2cddfc81 100644
--- a/apps/mobile/src/components/ActionSheetComponent/BouncingView.js
+++ b/apps/mobile/src/components/ActionSheetComponent/BouncingView.js
@@ -1,30 +1,40 @@
-import React, { useEffect } from 'react';
-import Animated, { Easing, timing } from 'react-native-reanimated';
+import React, {useEffect} from 'react';
+import Animated, {Easing, timing} from 'react-native-reanimated';
+
+export const BouncingView = ({
+  children,
+  style,
+  duration = 600,
+  animated = true
+}) => {
+  const scale = Animated.useValue(!animated ? 1 : 0.9);
 
-export const BouncingView = ({children,style,duration=600}) => {
-  const scale = Animated.useValue(0.9);
- 
   useEffect(() => {
+    if (!animated) return;
     scale.setValue(0.9);
     timing(scale, {
       toValue: 1,
-      duration:duration,
+      duration: duration,
       easing: Easing.elastic(1)
     }).start();
     return () => {
+      if (!animated) return;
       scale.setValue(0.9);
-    }
-  },[])
+    };
+  }, []);
 
   return (
     <Animated.View
-      style={[{
-        transform: [
-          {
-            scale: scale
-          }
-        ]
-      },style]}>
+      style={[
+        {
+          transform: [
+            {
+              scale: !animated ? 1 : scale
+            }
+          ]
+        },
+        style
+      ]}>
       {children}
     </Animated.View>
   );
diff --git a/apps/mobile/src/components/Announcements/body.js b/apps/mobile/src/components/Announcements/body.js
new file mode 100644
index 000000000..3fef67f8d
--- /dev/null
+++ b/apps/mobile/src/components/Announcements/body.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTracked } from '../../provider';
+import Paragraph from '../Typography/Paragraph';
+import { getStyle } from './functions';
+
+
+export const Body = ({text, style = {}}) => {
+  const [state] = useTracked();
+  const colors = state.colors;
+
+  return (
+    <Paragraph
+      style={{
+        paddingHorizontal: 12,
+        ...getStyle(style)
+      }}>
+      {text}
+    </Paragraph>
+  );
+};
\ No newline at end of file
diff --git a/apps/mobile/src/components/Announcements/cta.js b/apps/mobile/src/components/Announcements/cta.js
new file mode 100644
index 000000000..599bb8f0e
--- /dev/null
+++ b/apps/mobile/src/components/Announcements/cta.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useTracked } from '../../provider';
+import { Button } from '../Button';
+import { getStyle } from './functions';
+
+export const Cta = ({actions, style = {}}) => {
+  const [state] = useTracked();
+  const colors = state.colors;
+  return (
+    <View
+      style={{
+        paddingHorizontal: 12,
+        paddingTop: 12,
+        backgroundColor: colors.bg,
+        ...getStyle(style)
+      }}>
+      {actions.map((item, index) => (
+        <Button
+          type={index === 0 ? 'accent' : 'grayBg'}
+          title={item.text}
+          width="100%"
+          onPress={() => {}}
+          style={{
+            marginBottom: 10
+          }}
+        />
+      ))}
+    </View>
+  );
+};
diff --git a/apps/mobile/src/components/Announcements/description.js b/apps/mobile/src/components/Announcements/description.js
new file mode 100644
index 000000000..867bfc221
--- /dev/null
+++ b/apps/mobile/src/components/Announcements/description.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useTracked } from '../../provider';
+import { SIZE } from '../../utils/SizeUtils';
+import Paragraph from '../Typography/Paragraph';
+import { getStyle } from './functions';
+
+
+export const Description = ({text, style = {}}) => {
+  const [state] = useTracked();
+  const colors = state.colors;
+  return (
+    <Paragraph
+      size={SIZE.md}
+      style={{
+        marginHorizontal: 12,
+        ...getStyle(style)
+      }}>
+      {text}
+    </Paragraph>
+  );
+};
diff --git a/apps/mobile/src/components/Announcements/functions.js b/apps/mobile/src/components/Announcements/functions.js
new file mode 100644
index 000000000..59d80b5b8
--- /dev/null
+++ b/apps/mobile/src/components/Announcements/functions.js
@@ -0,0 +1,14 @@
+export const margins = {
+  0: 0,
+  1: 12,
+  2: 20
+};
+
+export const getStyle = style => {
+  if (!style) return {};
+  return {
+    marginTop: margins[style.marginTop] || 0,
+    marginBottom: margins[style.marginBottom] || 0,
+    textAlign: style.textAlign || 'left'
+  };
+};
diff --git a/apps/mobile/src/components/Announcements/index.js b/apps/mobile/src/components/Announcements/index.js
new file mode 100644
index 000000000..3eb42c37c
--- /dev/null
+++ b/apps/mobile/src/components/Announcements/index.js
@@ -0,0 +1,163 @@
+import React, {useEffect, useState} from 'react';
+import {FlatList, View} from 'react-native';
+import {useTracked} from '../../provider';
+import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
+import {
+  eCloseAnnouncementDialog,
+  eOpenAnnouncementDialog
+} from '../../utils/Events';
+import BaseDialog from '../Dialog/base-dialog';
+import {Body} from './body';
+import {Description} from './description';
+import {Photo} from './photo';
+import {SubHeading} from './subheading';
+import {List} from './list';
+import {Title} from './title';
+import {Cta} from './cta';
+import {allowedPlatforms} from '../../provider/stores';
+import {ProFeatures} from '../ResultDialog/pro-features';
+
+const announcement_dialog_info = {
+  body: [
+    {
+      type: 'image',
+      src: 'https://media.istockphoto.com/vectors/flash-sale-promotional-labels-templates-set-special-offer-text-design-vector-id1195558677?s=170667a',
+      caption: 'an image of a bear',
+      style: {}
+    },
+    {
+      type: 'title',
+      text: "Don't miss out on this one!",
+      style: {
+        textAlign: 'center',
+        marginTop: 1
+      }
+    },
+    {
+      type: 'description',
+      text: "It's 50% off on Notesnook Pro today. Grab the offer now before it's too late.",
+      style: {
+        textAlign: 'center',
+        marginBottom: 1
+      }
+    },
+    {
+      type: 'features'
+    }
+    // {
+    //   type: 'subheading',
+    //   text: 'New image tool'
+    // },
+    // {
+    //   type: 'body',
+    //   text: 'But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer.'
+    // },
+    // {
+    //   type: 'list',
+    //   items: [
+    //     {
+    //       text: 'Lorem ipsum dolor sit amet'
+    //     },
+    //     {
+    //       text: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium'
+    //     }
+    //   ]
+    // }
+  ],
+  callToActions: [
+    {
+      text: 'Get 50% Off for One Year',
+      action: 'none',
+      platforms: ['mobile']
+    }
+  ]
+};
+
+const Features = () => {
+  return (
+    <View
+      style={{
+        paddingHorizontal: 12,
+		alignItems:'center',
+		width:'100%'
+      }}>
+      <ProFeatures />
+    </View>
+  );
+};
+
+const renderItems = {
+  title: Title,
+  description: Description,
+  body: Body,
+  cta: Cta,
+  image: Photo,
+  list: List,
+  subheading: SubHeading,
+  features: Features
+};
+
+const renderItem = ({item, index}) => {
+  const Item = renderItems[item.type];
+
+  return <Item {...item} index={index} />;
+};
+
+export const Announcement = () => {
+  const [state] = useTracked();
+  const colors = state.colors;
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    eSubscribeEvent(eOpenAnnouncementDialog, open);
+    eSubscribeEvent(eCloseAnnouncementDialog, close);
+    return () => {
+      eUnSubscribeEvent(eOpenAnnouncementDialog, open);
+      eUnSubscribeEvent(eCloseAnnouncementDialog, close);
+    };
+  }, [visible]);
+
+  const open = () => {
+    setVisible(true);
+  };
+
+  const close = () => {
+    setVisible(false);
+  };
+
+  return (
+    <BaseDialog
+      animated={false}
+      centered={false}
+      bottom={true}
+      visible={visible}>
+      <View
+        style={{
+          width: '100%',
+          backgroundColor: colors.bg,
+          maxHeight: '100%'
+        }}>
+        <FlatList
+          style={{
+            width: '100%'
+          }}
+          data={announcement_dialog_info.body}
+          renderItem={renderItem}
+        />
+
+        <Cta
+          actions={announcement_dialog_info.callToActions.filter(item =>
+            item.platforms.some(
+              platform => allowedPlatforms.indexOf(platform) > -1
+            )
+          )}
+        />
+        <View
+          style={{
+            height: 15
+          }}
+        />
+      </View>
+    </BaseDialog>
+  );
+};
diff --git a/apps/mobile/src/components/Announcements/list.js b/apps/mobile/src/components/Announcements/list.js
new file mode 100644
index 000000000..796f7d7eb
--- /dev/null
+++ b/apps/mobile/src/components/Announcements/list.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { View } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useTracked } from '../../provider';
+import Paragraph from '../Typography/Paragraph';
+import { getStyle } from './functions';
+
+export const List = ({items, listType, style = {}}) => {
+  const [state] = useTracked();
+  const colors = state.colors;
+ 
+  return (
+    <View
+      style={{
+        paddingHorizontal: 12,
+        paddingLeft: listType === 'ordered' ? 25 : 25,
+        ...getStyle(style)
+      }}>
+      {items.map((item, index) => (
+        <View
+          style={{
+            paddingVertical: 6,
+            flexDirection: 'row'
+          }}>
+          {listType === 'ordered' ? (
+            <Paragraph
+              style={{
+                marginRight: 5
+              }}>
+              {index + 1}.
+            </Paragraph>
+          ) : (
+            <Icon size={20} name="circle-small" />
+          )}
+          <Paragraph>{item.text}</Paragraph>
+        </View>
+      ))}
+    </View>
+  );
+};
diff --git a/apps/mobile/src/components/Announcements/photo.js b/apps/mobile/src/components/Announcements/photo.js
new file mode 100644
index 000000000..b1d444f27
--- /dev/null
+++ b/apps/mobile/src/components/Announcements/photo.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Image } from 'react-native';
+import { getStyle } from './functions';
+
+
+export const Photo = ({src, style = {}}) => {
+  return (
+    <Image
+      source={{uri: src}}
+      resizeMode="cover"
+      style={{
+        width: '100%',
+        height: 200,
+        alignSelf: 'center',
+        ...getStyle(style)
+      }}
+    />
+  );
+};
\ No newline at end of file
diff --git a/apps/mobile/src/components/Announcements/subheading.js b/apps/mobile/src/components/Announcements/subheading.js
new file mode 100644
index 000000000..c7bbae4fb
--- /dev/null
+++ b/apps/mobile/src/components/Announcements/subheading.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { useTracked } from '../../provider';
+import { SIZE } from '../../utils/SizeUtils';
+import Heading from '../Typography/Heading';
+import { getStyle } from './functions';
+
+
+export const SubHeading = ({text, style = {}}) => {
+  const [state] = useTracked();
+  const colors = state.colors;
+
+  return (
+    <Heading
+      size={SIZE.md + 2}
+      style={{
+        marginHorizontal: 12,
+        marginTop: 12,
+        ...getStyle(style)
+      }}>
+      {text}
+    </Heading>
+  );
+};
diff --git a/apps/mobile/src/components/Announcements/title.js b/apps/mobile/src/components/Announcements/title.js
new file mode 100644
index 000000000..56285c64e
--- /dev/null
+++ b/apps/mobile/src/components/Announcements/title.js
@@ -0,0 +1,21 @@
+
+import React from 'react';
+import { useTracked } from '../../provider';
+import Heading from '../Typography/Heading';
+import { getStyle } from './functions';
+
+export const Title = ({text, style = {}}) => {
+	const [state] = useTracked();
+	const colors = state.colors;
+  
+	return (
+	  <Heading
+		style={{
+		  marginHorizontal: 12,
+		  marginTop: 12,
+		  ...getStyle(style)
+		}}>
+		{text}
+	  </Heading>
+	);
+  };
\ No newline at end of file
diff --git a/apps/mobile/src/components/Dialog/BaseDialog.js b/apps/mobile/src/components/Dialog/BaseDialog.js
index 46bd7f0ff..e16a9f599 100644
--- a/apps/mobile/src/components/Dialog/BaseDialog.js
+++ b/apps/mobile/src/components/Dialog/BaseDialog.js
@@ -22,9 +22,9 @@ const BaseDialog = ({
   transparent,
   centered = true,
   bottom = false,
-  background = null
+  background = null,
+  animated = true
 }) => {
-  const [state, dispatch] = useTracked();
   const floating = useIsFloatingKeyboard();
 
   return (
@@ -53,6 +53,7 @@ const BaseDialog = ({
           behavior="padding">
           <BouncingView
             duration={400}
+            animated={animated}
             style={[
               styles.backdrop,
               {
diff --git a/apps/mobile/src/components/DialogManager/index.js b/apps/mobile/src/components/DialogManager/index.js
index 84f90cb7c..951e5062c 100644
--- a/apps/mobile/src/components/DialogManager/index.js
+++ b/apps/mobile/src/components/DialogManager/index.js
@@ -25,6 +25,7 @@ import { ActionSheetComponent } from '../ActionSheetComponent';
 import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper';
 import { AddNotebookDialog } from '../AddNotebookDialog';
 import { AddTopicDialog } from '../AddTopicDialog';
+import { Announcement } from '../Announcements';
 import { AttachmentDialog } from '../AttachmentDialog';
 import { Dialog } from '../Dialog';
 import ExportDialog from '../ExportDialog';
@@ -301,6 +302,7 @@ export class DialogManager extends Component {
         <TagsDialog />
         <AttachmentDialog />
         <Expiring/>
+        <Announcement/>
       </>
     );
   }
diff --git a/apps/mobile/src/components/ResultDialog/ProFeatures.js b/apps/mobile/src/components/ResultDialog/ProFeatures.js
index 0a443cd1a..3eaa94a77 100644
--- a/apps/mobile/src/components/ResultDialog/ProFeatures.js
+++ b/apps/mobile/src/components/ResultDialog/ProFeatures.js
@@ -3,7 +3,11 @@ import {View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {useTracked} from '../../provider';
 import {eSendEvent} from '../../services/EventManager';
-import {eCloseProgressDialog, eCloseResultDialog, eOpenPremiumDialog} from '../../utils/Events';
+import {
+  eCloseProgressDialog,
+  eCloseResultDialog,
+  eOpenPremiumDialog
+} from '../../utils/Events';
 import {SIZE} from '../../utils/SizeUtils';
 import {sleep} from '../../utils/TimeUtils';
 import Paragraph from '../Typography/Paragraph';
@@ -47,7 +51,7 @@ export const ProFeatures = ({count = 6}) => {
               marginBottom: 10,
               alignItems: 'center',
               borderRadius: 5,
-              justifyContent:'flex-start'
+              justifyContent: 'flex-start'
             }}>
             <Icon size={SIZE.lg} color={colors.accent} name="check" />
             <Paragraph style={{marginLeft: 5, flexShrink: 1}}>
diff --git a/apps/mobile/src/components/SimpleList/announcement.js b/apps/mobile/src/components/SimpleList/announcement.js
index 910ff9756..a20b1b6b2 100644
--- a/apps/mobile/src/components/SimpleList/announcement.js
+++ b/apps/mobile/src/components/SimpleList/announcement.js
@@ -1,18 +1,18 @@
 import React from 'react';
-import {View} from 'react-native';
-import {useTracked} from '../../provider';
+import { View } from 'react-native';
+import { useTracked } from '../../provider';
 import {
   allowedPlatforms,
   useMessageStore,
   useSelectionStore
 } from '../../provider/stores';
-import {eSendEvent, presentSheet} from '../../services/EventManager';
-import {hexToRGBA, RGB_Linear_Shade} from '../../utils/ColorUtils';
-import {eOpenPremiumDialog, eOpenProgressDialog} from '../../utils/Events';
-import {openLinkInBrowser} from '../../utils/functions';
-import {SIZE} from '../../utils/SizeUtils';
-import {SettingsBackupAndRestore} from '../../views/Settings';
-import {Button} from '../Button';
+import { eSendEvent, presentSheet } from '../../services/EventManager';
+import { hexToRGBA, RGB_Linear_Shade } from '../../utils/ColorUtils';
+import { eOpenPremiumDialog } from '../../utils/Events';
+import { openLinkInBrowser } from '../../utils/functions';
+import { SIZE } from '../../utils/SizeUtils';
+import { SettingsBackupAndRestore } from '../../views/Settings';
+import { Button } from '../Button';
 import Seperator from '../Seperator';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
diff --git a/apps/mobile/src/utils/Events.js b/apps/mobile/src/utils/Events.js
index 57e0e2e1d..5e04d5459 100644
--- a/apps/mobile/src/utils/Events.js
+++ b/apps/mobile/src/utils/Events.js
@@ -134,4 +134,7 @@ export const eCloseTagsDialog = '569';
 export const eOpenAttachmentsDialog = '600';
 export const eCloseAttachmentDialog = '601';
 
-export const eOpenTrialEndingDialog = '602';
\ No newline at end of file
+export const eOpenTrialEndingDialog = '602';
+
+export const eOpenAnnouncementDialog = '603';
+export const eCloseAnnouncementDialog = '604'
\ No newline at end of file