From 6dad47ffb13b50f4e4fe4b9accbadfd04d456c84 Mon Sep 17 00:00:00 2001
From: Sung Won Cho <sung@monomax.sh>
Date: Tue, 26 Nov 2019 17:22:09 +0800
Subject: [PATCH] Update features

---
 web/src/components/Header/SearchBar/index.tsx | 10 ++-----
 web/src/components/Icons/{Box.js => Box.tsx}  |  3 +-
 .../Subscription/Plan/{Core.js => Core.tsx}   |  6 ++--
 .../Plan/{Plan.module.scss => Plan.scss}      |  0
 .../Subscription/Plan/{Pro.js => Pro.tsx}     |  6 ++--
 .../Plan/{internal.js => internal.tsx}        | 24 +++++++++++++---
 web/src/components/Subscription/index.tsx     | 28 ++++++-------------
 7 files changed, 38 insertions(+), 39 deletions(-)
 rename web/src/components/Icons/{Box.js => Box.tsx} (96%)
 rename web/src/components/Subscription/Plan/{Core.js => Core.tsx} (87%)
 rename web/src/components/Subscription/Plan/{Plan.module.scss => Plan.scss} (100%)
 rename web/src/components/Subscription/Plan/{Pro.js => Pro.tsx} (88%)
 rename web/src/components/Subscription/Plan/{internal.js => internal.tsx} (85%)

diff --git a/web/src/components/Header/SearchBar/index.tsx b/web/src/components/Header/SearchBar/index.tsx
index bc7123b6..bef8ea0e 100644
--- a/web/src/components/Header/SearchBar/index.tsx
+++ b/web/src/components/Header/SearchBar/index.tsx
@@ -24,7 +24,7 @@ import * as filtersLib from 'jslib/helpers/filters';
 import * as queriesLib from 'jslib/helpers/queries';
 import { getSearchDest } from 'web/libs/search';
 import { usePrevious } from 'web/libs/hooks';
-import { useFilters, useSelector } from '../../../store';
+import { useFilters } from '../../../store';
 import SearchInput from '../../Common/SearchInput';
 import AdvancedPanel from './AdvancedPanel';
 import styles from './SearchBar.scss';
@@ -41,19 +41,13 @@ const SearchBar: React.FunctionComponent<Props> = ({ location, history }) => {
   const [value, setValue] = useState(initialValue);
   const [expanded, setExpanded] = useState(false);
 
-  const { user } = useSelector(state => {
-    return {
-      user: state.auth.user.data
-    };
-  });
-
   const handleSearch = useCallback(
     (queryText: string) => {
       const queries = queriesLib.parse(queryText);
       const dest = getSearchDest(location, queries);
       history.push(dest);
     },
-    [history, location, user]
+    [history, location]
   );
 
   const prevFilters = usePrevious(filters);
diff --git a/web/src/components/Icons/Box.js b/web/src/components/Icons/Box.tsx
similarity index 96%
rename from web/src/components/Icons/Box.js
rename to web/src/components/Icons/Box.tsx
index 8dd8c47c..59d6bedc 100644
--- a/web/src/components/Icons/Box.js
+++ b/web/src/components/Icons/Box.tsx
@@ -41,8 +41,9 @@ SOFTWARE.
 */
 
 import React from 'react';
+import { IconProps } from './types';
 
-const Icon = ({ fill, width, height, className }) => {
+const Icon = ({ fill, width, height, className }: IconProps) => {
   const h = `${height}px`;
   const w = `${width}px`;
 
diff --git a/web/src/components/Subscription/Plan/Core.js b/web/src/components/Subscription/Plan/Core.tsx
similarity index 87%
rename from web/src/components/Subscription/Plan/Core.js
rename to web/src/components/Subscription/Plan/Core.tsx
index 92b0047c..dc9d5848 100644
--- a/web/src/components/Subscription/Plan/Core.js
+++ b/web/src/components/Subscription/Plan/Core.tsx
@@ -18,14 +18,14 @@
 
 import React from 'react';
 
-import BoxIcon from '../../Icons/Box';
+import BookIcon from '../../Icons/Book';
 import Plan from './internal';
 
 const selfHostedPerks = [
   {
     id: 'own-machine',
-    icon: <BoxIcon width="16" height="16" fill="#6e6e6e" />,
-    value: 'Host on your own machine'
+    icon: <BookIcon width={16} height={16} fill="#6e6e6e" className="" />,
+    value: 'Ideal for occasional note taking'
   }
 ];
 
diff --git a/web/src/components/Subscription/Plan/Plan.module.scss b/web/src/components/Subscription/Plan/Plan.scss
similarity index 100%
rename from web/src/components/Subscription/Plan/Plan.module.scss
rename to web/src/components/Subscription/Plan/Plan.scss
diff --git a/web/src/components/Subscription/Plan/Pro.js b/web/src/components/Subscription/Plan/Pro.tsx
similarity index 88%
rename from web/src/components/Subscription/Plan/Pro.js
rename to web/src/components/Subscription/Plan/Pro.tsx
index 26638191..8830af52 100644
--- a/web/src/components/Subscription/Plan/Pro.js
+++ b/web/src/components/Subscription/Plan/Pro.tsx
@@ -25,12 +25,12 @@ import GlobeIcon from '../../Icons/Globe';
 const proPerks = [
   {
     id: 'hosted',
-    icon: <ServerIcon width="16" height="16" fill="#4d4d8b" />,
-    value: 'Fully hosted and managed'
+    icon: <ServerIcon width={16} height={16} fill="#4d4d8b" />,
+    value: 'Ideal for maximizing memory retention'
   },
   {
     id: 'support',
-    icon: <GlobeIcon width="16" height="16" fill="#4d4d8b" />,
+    icon: <GlobeIcon width={16} height={16} fill="#4d4d8b" />,
     value: 'Support the Dnote community and development'
   }
 ];
diff --git a/web/src/components/Subscription/Plan/internal.js b/web/src/components/Subscription/Plan/internal.tsx
similarity index 85%
rename from web/src/components/Subscription/Plan/internal.js
rename to web/src/components/Subscription/Plan/internal.tsx
index 682375fe..36baa930 100644
--- a/web/src/components/Subscription/Plan/internal.js
+++ b/web/src/components/Subscription/Plan/internal.tsx
@@ -19,9 +19,25 @@
 import React from 'react';
 import classnames from 'classnames';
 
-import styles from './Plan.module.scss';
+import styles from './Plan.scss';
 
-function Plan({
+interface Perk {
+  id: string;
+  icon: JSX.Element;
+  value: string;
+}
+
+interface Props {
+  name: string;
+  price: string;
+  bottomContent: string;
+  ctaContent: React.ReactElement;
+  interval?: string;
+  perks: Perk[];
+  wrapperClassName: string;
+}
+
+const Plan: React.FunctionComponent<Props> = ({
   name,
   price,
   bottomContent,
@@ -29,7 +45,7 @@ function Plan({
   interval,
   perks,
   wrapperClassName
-}) {
+}) => {
   return (
     <div className={classnames(styles.wrapper, wrapperClassName)}>
       <div
@@ -63,6 +79,6 @@ function Plan({
       {bottomContent}
     </div>
   );
-}
+};
 
 export default Plan;
diff --git a/web/src/components/Subscription/index.tsx b/web/src/components/Subscription/index.tsx
index 5c029cfa..d1b9cd7b 100644
--- a/web/src/components/Subscription/index.tsx
+++ b/web/src/components/Subscription/index.tsx
@@ -36,11 +36,7 @@ const proFeatures = [
   },
   {
     id: 'host',
-    label: <div>Hosting</div>
-  },
-  {
-    id: 'auto',
-    label: <div>Automatic update and migration</div>
+    label: <div>Automated Spaced Repetition</div>
   },
   {
     id: 'email-support',
@@ -49,6 +45,10 @@ const proFeatures = [
 ];
 
 const baseFeatures = [
+  {
+    id: 'oss',
+    label: <div>Open source</div>
+  },
   {
     id: 'sync',
     label: <div>Multi-device sync</div>
@@ -57,25 +57,13 @@ const baseFeatures = [
     id: 'cli',
     label: <div>Command line interface</div>
   },
-  {
-    id: 'atom',
-    label: <div>Atom plugin</div>
-  },
   {
     id: 'web',
-    label: <div>Web client</div>
-  },
-  {
-    id: 'digest',
-    label: <div>Automated email digest</div>
+    label: <div>Web application</div>
   },
   {
     id: 'ext',
-    label: <div>Firefox/Chrome extension</div>
-  },
-  {
-    id: 'foss',
-    label: <div>Free and open source</div>
+    label: <div>Chrome/Firefox extension</div>
   },
   {
     id: 'forum-support',
@@ -130,7 +118,7 @@ const Subscription: React.FunctionComponent<Props> = () => {
       <div className={styles.hero}>
         <div className="container">
           <h1 className={styles.heading}>
-            You can self-host or sign up for the hosted version.
+            Dnote has simple plans for everyone.
           </h1>
         </div>
       </div>