Progress

2020-02-05 17:45:48 -05:00
parent df346596cf
commit fa66d082f8
22 changed files with 553 additions and 480 deletions
--- a/app/javascript/gabsocial/components/panel/promo_panel.js
+++ b/app/javascript/gabsocial/components/panel/promo_panel.js
@@ -0,0 +1,85 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import classNames from 'classnames/bind'
+import { me } from '../../initial_state';
+import Icon from '../icon'
+import PanelLayout from './panel_layout'
+
+const messages = defineMessages({
+  pro: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
+  donation: { id: 'promo.donation', defaultMessage: 'Make a Donation' },
+  store: { id: 'promo.store', defaultMessage: 'Store - Buy Merch' },
+  apps: { id: 'promo.gab_apps', defaultMessage: 'Gab Apps' },
+})
+
+const mapStateToProps = state => {
+  return {
+    isPro: state.getIn(['accounts', me, 'is_pro']),
+  };
+};
+
+export default
+@injectIntl
+@connect(mapStateToProps)
+class PromoPanel extends PureComponent {
+
+  static propTypes = {
+    isPro: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { isPro, intl } = this.props
+
+    const cx = classNames.bind(styles)
+
+    const items = [
+      {
+        text: intl.formatMessage(messages.pro),
+        href: 'https://pro.gab.com',
+        icon: 'arrow-up',
+        conditions: isPro,
+        highlighted: true,
+      },
+      {
+        text: intl.formatMessage(messages.donation),
+        href: 'https://shop.dissenter.com/category/donations',
+        icon: 'heart',
+      },
+      {
+        text: intl.formatMessage(messages.store),
+        href: 'https://shop.dissenter.com',
+        icon: 'shopping-cart',
+      },
+      {
+        text: intl.formatMessage(messages.apps),
+        href: 'https://apps.gab.com',
+        icon: 'th',
+      }
+    ]
+
+    return (
+      <PanelLayout>
+        {
+          items.map((item, i) => {
+            if (item.conditions === false) return null
+
+            const classes = cx({
+              default: true,
+              borderColorSubtle: i !== items.length - 1,
+              borderBottom1PX: i !== items.length - 1,
+            })
+
+            return (
+              <div key={`promo-panel-item-${i}`} className={classes}>
+                <a className={[styles.default, styles.text, styles.colorBlack, styles.noUnderline, styles.paddingVertical10PX, styles.alignItemsCenter].join(' ')} href={item.href}>
+                  <Icon id={item.icon} height='13px' width='13px' className={[styles.flex, styles.marginRight10PX].join(' ')} />
+                  {item.text}
+                </a>
+              </div>
+            )
+          })
+        }
+      </PanelLayout>
+    )
+  }
+}