add logic for reward codes

.eslintrc.json

@@ -39,6 +39,7 @@
     "no-return-assign": 0,
     "react/require-default-props": 0,
     "react/jsx-closing-tag-location": 0,
-    "jsx-a11y/no-noninteractive-element-to-interactive-role": 0
+    "jsx-a11y/no-noninteractive-element-to-interactive-role": 0,
+    "class-methods-use-this": 0
   }
 }

package.json

@@ -50,8 +50,8 @@
     "formik": "^0.10.4",
     "hast-util-sanitize": "^1.1.2",
     "keytar": "^4.2.1",
-    "lbry-redux": "lbryio/lbry-redux#fa141b9175500b874bb77da0258e18d902e069b9",
-    "lbryinc": "lbryio/lbryinc#c09aa2645ecccb33c83e9a9545ff119232910f6f",
+    "lbry-redux": "lbryio/lbry-redux#c079b108c3bc4ba2b4fb85fb112b52cfc040c301",
+    "lbryinc": "lbryio/lbryinc#5050001a63bbde1c461c87dbc2b65f330f5aacc9",
     "localforage": "^1.7.1",
     "mammoth": "^1.4.6",
     "mime": "^2.3.1",

src/renderer/component/rewardTile/index.js

@@ -1,5 +1,12 @@
-import React from 'react';
 import { connect } from 'react-redux';
+import { MODALS, doNotify } from 'lbry-redux';
 import RewardTile from './view';
 
-export default connect(null, null)(RewardTile);
+const perform = dispatch => ({
+  openRewardCodeModal: () => dispatch(doNotify({ id: MODALS.REWARD_GENERATED_CODE })),
+});
+
+export default connect(
+  null,
+  perform
+)(RewardTile);

src/renderer/component/rewardTile/view.jsx

@@ -7,6 +7,7 @@ import { rewards } from 'lbryinc';
 import * as icons from 'constants/icons';
 
 type Props = {
+  openRewardCodeModal: () => void,
   reward: {
     id: string,
     reward_title: string,
@@ -19,7 +20,7 @@ type Props = {
 };
 
 const RewardTile = (props: Props) => {
-  const { reward } = props;
+  const { reward, openRewardCodeModal } = props;
   const claimed = !!reward.transaction_id;
 
   return (
@@ -27,6 +28,9 @@ const RewardTile = (props: Props) => {
       <div className="card__title">{reward.reward_title}</div>
       <div className="card__subtitle">{reward.reward_description}</div>
       <div className="card__actions">
+        {reward.reward_type === rewards.TYPE_GENERATED_CODE && (
+          <Button button="primary" onClick={openRewardCodeModal} label={__('Enter Code')} />
+        )}
         {reward.reward_type === rewards.TYPE_REFERRAL && (
           <Button button="primary" navigate="/invite" label={__('Go To Invites')} />
         )}

src/renderer/modal/modalRewardCode/index.js

@@ -0,0 +1,28 @@
+// @flow
+import { connect } from 'react-redux';
+import { doHideNotification } from 'lbry-redux';
+import {
+  makeSelectClaimRewardError,
+  doClaimRewardType,
+  makeSelectIsRewardClaimPending,
+  rewards as REWARD_TYPES,
+} from 'lbryinc';
+import ModalRewardCode from './view';
+
+const select = (state): {} => ({
+  rewardIsPending: makeSelectIsRewardClaimPending()(state, {
+    reward_type: REWARD_TYPES.TYPE_REWARD_CODE,
+  }),
+  error: makeSelectClaimRewardError()(state, { reward_type: REWARD_TYPES.TYPE_REWARD_CODE }),
+});
+
+const perform = dispatch => ({
+  closeModal: () => dispatch(doHideNotification()),
+  submitRewardCode: (code: string) =>
+    dispatch(doClaimRewardType(REWARD_TYPES.TYPE_REWARD_CODE, null, { code })),
+});
+
+export default connect(
+  select,
+  perform
+)(ModalRewardCode);

src/renderer/modal/modalRewardCode/view.jsx

@@ -0,0 +1,81 @@
+// @flow
+import * as React from 'react';
+import { FormRow, FormField } from 'component/common/form';
+import { Modal } from 'modal/modal';
+import Button from 'component/button';
+
+type Props = {
+  closeModal: () => void,
+  error: ?string,
+  rewardIsPending: boolean,
+  submitRewardCode: string => void,
+};
+
+type State = {
+  rewardCode: string,
+};
+
+class ModalRewardCode extends React.PureComponent<Props, State> {
+  constructor() {
+    super();
+
+    this.state = {
+      rewardCode: '',
+    };
+
+    (this: any).handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit() {
+    const { rewardCode } = this.state;
+    const { submitRewardCode } = this.props;
+    submitRewardCode(rewardCode);
+  }
+
+  render() {
+    const { closeModal, rewardIsPending, error } = this.props;
+    const { rewardCode } = this.state;
+
+    return (
+      <Modal
+        isOpen
+        contentLabel={__('Enter Reward Code')}
+        type="confirm"
+        confirmButtonLabel={__('Redeem')}
+        abortButtonLabel={__('Cancel')}
+        onConfirmed={this.handleSubmit}
+        onAborted={closeModal}
+        confirmButtonDisabled={rewardIsPending}
+      >
+        <h3 className="modal__header">{__('Enter Reward Code')}</h3>
+        <div className="card__content">
+          <FormRow>
+            <FormField
+              stretch
+              autoFocus
+              type="text"
+              label={__('Code')}
+              placeholder="0123abc"
+              error={error}
+              value={rewardCode}
+              onChange={e => this.setState({ rewardCode: e.target.value })}
+              helper={
+                <React.Fragment>
+                  {__('Redeem a LBRY generated reward code for LBC')}
+                  {'. '}
+                  <Button
+                    button="link"
+                    href="https://lbry.io/faq/reward-codes"
+                    label={__('Learn more')}
+                  />.
+                </React.Fragment>
+              }
+            />
+          </FormRow>
+        </div>
+      </Modal>
+    );
+  }
+}
+
+export default ModalRewardCode;

src/renderer/modal/modalRouter/view.jsx

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { MODALS } from 'lbry-redux';
 import ModalError from 'modal/modalError';
@@ -27,13 +28,15 @@ import ModalConfirmThumbnailUpload from 'modal/modalConfirmThumbnailUpload';
 import ModalWalletEncrypt from 'modal/modalWalletEncrypt';
 import ModalWalletDecrypt from 'modal/modalWalletDecrypt';
 import ModalWalletUnlock from 'modal/modalWalletUnlock';
+import ModalRewardCode from 'modal/modalRewardCode';
 
 type Props = {
-  modal: string,
+  notification: { id: string },
+  notificationProps: {},
 };
 
 class ModalRouter extends React.PureComponent<Props> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -51,7 +54,7 @@ class ModalRouter extends React.PureComponent<Props> {
   }
 
   showTransitionModals(props) {
-    const { modal, modalProps, openModal, page } = props;
+    const { modal, openModal, page } = props;
 
     if (modal) {
       return;
@@ -80,6 +83,8 @@ class ModalRouter extends React.PureComponent<Props> {
     if (!isWelcomeAcknowledged && user && !user.is_reward_approved && !user.is_identity_verified) {
       return MODALS.WELCOME;
     }
+
+    return undefined;
   }
 
   checkShowEmail(props) {
@@ -92,6 +97,8 @@ class ModalRouter extends React.PureComponent<Props> {
     ) {
       return MODALS.EMAIL_COLLECTION;
     }
+
+    return undefined;
   }
 
   checkShowCreditIntro(props) {
@@ -104,6 +111,8 @@ class ModalRouter extends React.PureComponent<Props> {
     ) {
       return MODALS.INSUFFICIENT_CREDITS;
     }
+
+    return undefined;
   }
 
   isPaidShowPage(props) {
@@ -177,6 +186,8 @@ class ModalRouter extends React.PureComponent<Props> {
         return <ModalWalletDecrypt {...notificationProps} />;
       case MODALS.WALLET_UNLOCK:
         return <ModalWalletUnlock {...notificationProps} />;
+      case MODALS.REWARD_GENERATED_CODE:
+        return <ModalRewardCode {...notificationProps} />;
       default:
         return null;
     }

src/renderer/page/rewards/view.jsx

@@ -7,6 +7,7 @@ import Button from 'component/button';
 import Page from 'component/page';
 import classnames from 'classnames';
 import type { Reward } from 'types/reward';
+import { rewards as REWARD_TYPES } from 'lbryinc';
 
 type Props = {
   doAuth: () => void,
@@ -125,6 +126,14 @@ class RewardsPage extends React.PureComponent<Props> {
           'card--disabled': isNotEligible,
         })}
       >
+        <RewardTile
+          key={REWARD_TYPES.TYPE_GENERATED_CODE}
+          reward={{
+            reward_type: REWARD_TYPES.TYPE_GENERATED_CODE,
+            reward_title: __('Enter a Code'),
+            reward_description: __('Enter a LBRY generated reward code'),
+          }}
+        />
         {rewards.map(reward => <RewardTile key={reward.reward_type} reward={reward} />)}
       </div>
     );

src/renderer/scss/component/_card.scss

@@ -430,15 +430,13 @@
 }
 
 .card__list--rewards {
+  column-count: 2;
+  column-gap: $spacing-vertical * 1/3;
+
   .card {
     display: inline-block;
-    width: calc(50% - 10px);
-    margin-bottom: 20px;
-    vertical-align: top;
-
-    &:not(:nth-child(2n + 1)) {
-      margin-left: 20px;
-    }
+    margin: 0 0 $spacing-vertical * 1/3;
+    width: 100%;
   }
 }
 

src/renderer/scss/component/_modal.scss

@@ -74,8 +74,8 @@
 }
 
 .modal__header {
+  font-size: 2em;
   margin-bottom: $spacing-vertical * 2/3;
-  text-align: center;
 }
 
 .modal__buttons {

webpack.renderer.additions.js

@@ -31,7 +31,7 @@ module.exports = {
   },
   plugins: isDev ? [
     new FilewatcherPlugin({
-      watchFileRegex: [require.resolve('lbry-redux')],
+      watchFileRegex: [require.resolve('lbry-redux'), require.resolve('lbryinc')],
     }),
   ] : [],
 };

yarn.lock

@@ -5662,16 +5662,16 @@ lbry-redux@lbryio/lbry-redux:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"
 
-lbry-redux@lbryio/lbry-redux#fa141b9175500b874bb77da0258e18d902e069b9:
+lbry-redux@lbryio/lbry-redux#c079b108c3bc4ba2b4fb85fb112b52cfc040c301:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/fa141b9175500b874bb77da0258e18d902e069b9"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/c079b108c3bc4ba2b4fb85fb112b52cfc040c301"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"
 
-lbryinc@lbryio/lbryinc#c09aa2645ecccb33c83e9a9545ff119232910f6f:
+lbryinc@lbryio/lbryinc#5050001a63bbde1c461c87dbc2b65f330f5aacc9:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/c09aa2645ecccb33c83e9a9545ff119232910f6f"
+  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/5050001a63bbde1c461c87dbc2b65f330f5aacc9"
   dependencies:
     lbry-redux lbryio/lbry-redux
     reselect "^3.0.0"