Add prompt asking user to rate the app on Mac App Store (#222)

public/libs/preferences.js

@@ -54,6 +54,8 @@ const initCachedPreferences = () => {
     inputLang: 'en',
     openOnMenubarShortcut: 'alt+shift+t',
     outputLang: 'zh-CN',
+    ratingCardLastClicked: 0,
+    ratingCardDidRate: false,
     recentLanguages: ['en', 'zh-CN'],
     registered: false,
     showTransliteration: true,

src/components/pages/home/index.js

@@ -2,17 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import CircularProgress from '@material-ui/core/CircularProgress';
 import AppBar from '@material-ui/core/AppBar';
 import Button from '@material-ui/core/Button';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
+import CircularProgress from '@material-ui/core/CircularProgress';
 import IconButton from '@material-ui/core/IconButton';
 import Paper from '@material-ui/core/Paper';
+import SvgIcon from '@material-ui/core/SvgIcon';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
-import SvgIcon from '@material-ui/core/SvgIcon';
 
 import AVStop from '@material-ui/icons/Stop';
 import AVVolumeUp from '@material-ui/icons/VolumeUp';
@@ -64,6 +64,7 @@ import getTrialExpirationTime from '../../../helpers/get-trial-expiration-time';
 
 import Dictionary from './dictionary';
 import History from './history';
+import RatingCard from './rating-card';
 
 const styles = (theme) => ({
   container: {
@@ -379,6 +380,8 @@ class Home extends React.Component {
               </CardActions>
             </Card>
 
+            <RatingCard />
+
             {output.outputDict && output.source === 'translate.googleapis.com' && <Dictionary />}
             {this.renderCountdown()}
           </div>

src/components/pages/home/rating-card.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Button from '@material-ui/core/Button';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+
+import connectComponent from '../../../helpers/connect-component';
+import getLocale from '../../../helpers/get-locale';
+
+import {
+  requestOpenInBrowser,
+  requestSetPreference,
+} from '../../../senders';
+
+const styles = (theme) => ({
+  card: {
+    borderTop: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
+    borderBottom: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
+  },
+  ratingCard: {
+    marginTop: theme.spacing(2),
+  },
+  ratingCardActions: {
+    justifyContent: 'center',
+  },
+});
+
+const RatingCard = ({
+  classes,
+  ratingCardLastClicked,
+  ratingCardDidRate,
+}) => {
+  if (!window.process.mas) return null;
+
+  // time gap between rating card request
+  // 3 months if user has rated the app, 1 week if user has not
+  const gap = ratingCardDidRate ? 3 * 30 * 24 * 60 * 60 * 1000 : 7 * 24 * 60 * 60 * 1000;
+
+  const now = Date.now();
+
+  if (now > ratingCardLastClicked + gap) {
+    return (
+      <Card elevation={0} square className={classNames(classes.card, classes.ratingCard)}>
+        <CardActions className={classes.ratingCardActions}>
+          <Button
+            variant="contained"
+            size="small"
+            color="primary"
+            disableElevation
+            classes={{ label: classes.translateButtonLabel }}
+            onClick={() => {
+              requestSetPreference('ratingCardLastClicked', Date.now());
+              requestSetPreference('ratingCardDidRate', true);
+              requestOpenInBrowser('macappstore://apps.apple.com/app/id1176624652?action=write-review');
+            }}
+          >
+            {getLocale('rateMacAppStore')}
+          </Button>
+          <Button
+            variant="contained"
+            size="small"
+            color="default"
+            disableElevation
+            classes={{ label: classes.translateButtonLabel }}
+            onClick={() => {
+              requestSetPreference('ratingCardLastClicked', Date.now());
+            }}
+          >
+            {getLocale('later')}
+          </Button>
+        </CardActions>
+      </Card>
+    );
+  }
+
+  return null;
+};
+
+RatingCard.defaultProps = {
+  ratingCardLastClicked: 0,
+  ratingCardDidRate: false,
+};
+
+RatingCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  ratingCardLastClicked: PropTypes.number,
+  ratingCardDidRate: PropTypes.bool,
+};
+
+const mapStateToProps = (state) => ({
+  ratingCardLastClicked: state.preferences.ratingCardLastClicked,
+  ratingCardDidRate: state.preferences.ratingCardDidRate,
+});
+
+export default connectComponent(
+  RatingCard,
+  mapStateToProps,
+  null,
+  styles,
+);