Next portion of updates for payments segment

Author: birdofpreyru

.exchange-rates.cache

@@ -1 +1 @@
-{"disclaimer":"Usage subject to terms: https://openexchangerates.org/terms","license":"https://openexchangerates.org/license","timestamp":1508252400,"base":"USD","rates":{"AED":3.67295,"AFN":68.196355,"ALL":113.805,"AMD":481.015,"ANG":1.785451,"AOA":165.9225,"ARS":17.4049,"AUD":1.27689,"AWG":1.789995,"AZN":1.6965,"BAM":1.6627,"BBD":2,"BDT":80.847,"BGN":1.665071,"BHD":0.377295,"BIF":1751,"BMD":1,"BND":1.357691,"BOB":6.911694,"BRL":3.179029,"BSD":1,"BTC":0.000179013155,"BTN":64.859789,"BWP":10.285155,"BYN":1.960449,"BZD":2.016196,"CAD":1.257377,"CDF":1570,"CHF":0.980124,"CLF":0.023185,"CLP":623.5,"CNH":6.61575,"CNY":6.622232,"COP":2943.44,"CRC":570.561142,"CUC":1,"CUP":25.5,"CVE":94.1,"CZK":21.927767,"DJF":178.77,"DKK":6.335027,"DOP":47.7,"DZD":114.2625,"EGP":17.6649,"ERN":15.328867,"ETB":27.25,"EUR":0.851,"FJD":2.028901,"FKP":0.759366,"GBP":0.759366,"GEL":2.479675,"GGP":0.759366,"GHS":4.397,"GIP":0.759366,"GMD":47.425,"GNF":9001,"GTQ":7.344248,"GYD":207.165,"HKD":7.80835,"HNL":23.451826,"HRK":6.3888,"HTG":62.983403,"HUF":261.97525,"IDR":13498.427033,"ILS":3.5147,"IMP":0.759366,"INR":65.0133,"IQD":1168.3,"IRR":33870.025328,"ISK":105.732492,"JEP":0.759366,"JMD":127.822183,"JOD":0.710005,"JPY":112.336375,"KES":103.3,"KGS":68.509873,"KHR":4045.75,"KMF":419.219527,"KPW":900,"KRW":1130.8475,"KWD":0.30216,"KYD":0.833536,"KZT":333.84,"LAK":8321,"LBP":1510,"LKR":153.63,"LRD":118.262619,"LSL":13.415629,"LYD":1.367153,"MAD":9.44245,"MDL":17.3597,"MGA":3065.25,"MKD":52.415,"MMK":1365.1,"MNT":2455.179651,"MOP":8.04209,"MRO":365.06315,"MUR":33.901,"MVR":15.409873,"MWK":725.645,"MXN":19.084733,"MYR":4.2221,"MZN":60.994761,"NAD":13.445,"NGN":357,"NIO":30.284298,"NOK":7.952578,"NPR":103.915774,"NZD":1.396724,"OMR":0.38502,"PAB":1,"PEN":3.244443,"PGK":3.196491,"PHP":51.33,"PKR":105.35,"PLN":3.596345,"PYG":5638.4,"QAR":3.805,"RON":3.900611,"RSD":101.409994,"RUB":57.458,"RWF":834.6,"SAR":3.749884,"SBD":7.798197,"SCR":13.658738,"SDG":6.678245,"SEK":8.158446,"SGD":1.356602,"SHP":0.759366,"SLL":7648.75,"SOS":591,"SRD":7.448,"SSP":130.0769,"STD":20801.590148,"SVC":8.7521,"SYP":514.98499,"SZL":13.418336,"THB":33.125,"TJS":8.80211,"TMT":3.499986,"TND":2.475901,"TOP":2.235236,"TRY":3.67093,"TTD":6.705696,"TWD":30.213,"TZS":2245,"UAH":26.460994,"UGX":3660.9,"USD":1,"UYU":29.415851,"UZS":8056,"VEF":10.03165,"VND":22726.06796,"VUV":104.954849,"WST":2.501332,"XAF":558.219707,"XAG":0.0587028,"XAU":0.00077817,"XCD":2.70255,"XDR":0.708893,"XOF":558.219707,"XPD":0.00101318,"XPF":101.551367,"XPT":0.0010747,"YER":250.3,"ZAR":13.446541,"ZMW":9.695,"ZWL":322.355011}}
+{"disclaimer":"Usage subject to terms: https://openexchangerates.org/terms","license":"https://openexchangerates.org/license","timestamp":1508320800,"base":"USD","rates":{"AED":3.673018,"AFN":68.128,"ALL":113.77,"AMD":480.465,"ANG":1.7834,"AOA":165.9225,"ARS":17.336766,"AUD":1.278672,"AWG":1.790501,"AZN":1.689,"BAM":1.6616,"BBD":2,"BDT":82.351,"BGN":1.665518,"BHD":0.377085,"BIF":1752.55,"BMD":1,"BND":1.357196,"BOB":6.903811,"BRL":3.1579,"BSD":1,"BTC":0.000186473497,"BTN":64.935987,"BWP":10.273488,"BYN":1.958245,"BZD":2.014074,"CAD":1.253285,"CDF":1562.881563,"CHF":0.981081,"CLF":0.023185,"CLP":622.423602,"CNH":6.624705,"CNY":6.62395,"COP":2949.33,"CRC":570.455,"CUC":1,"CUP":25.5,"CVE":93.95,"CZK":21.89831,"DJF":178.77,"DKK":6.339415,"DOP":47.313359,"DZD":114.3225,"EGP":17.634,"ERN":15.191062,"ETB":27.052062,"EUR":0.851629,"FJD":2.046698,"FKP":0.759579,"GBP":0.759579,"GEL":2.481206,"GGP":0.759579,"GHS":4.395998,"GIP":0.759579,"GMD":47.45,"GNF":8929.15,"GTQ":7.335827,"GYD":206.925,"HKD":7.807972,"HNL":23.424588,"HRK":6.392998,"HTG":62.9125,"HUF":262.505,"IDR":13508.120071,"ILS":3.511228,"IMP":0.759579,"INR":65.1415,"IQD":1166.95,"IRR":34216.446723,"ISK":105.64657,"JEP":0.759579,"JMD":127.68,"JOD":0.709001,"JPY":112.7525,"KES":103.46,"KGS":68.54048,"KHR":4035.45,"KMF":418.832027,"KPW":900,"KRW":1131.57,"KWD":0.302227,"KYD":0.832646,"KZT":333.424074,"LAK":8290.35,"LBP":1506.85,"LKR":153.545,"LRD":118.347343,"LSL":13.4005,"LYD":1.365585,"MAD":9.48341,"MDL":17.335624,"MGA":3056.2,"MKD":52.439856,"MMK":1363.5,"MNT":2453.525814,"MOP":8.036355,"MRO":364.675,"MUR":34.0805,"MVR":15.400126,"MWK":726.17,"MXN":18.80613,"MYR":4.22137,"MZN":60.880666,"NAD":13.4005,"NGN":356.5,"NIO":30.248971,"NOK":7.960645,"NPR":103.795,"NZD":1.403916,"OMR":0.38502,"PAB":1,"PEN":3.244494,"PGK":3.171515,"PHP":51.441,"PKR":105.28,"PLN":3.60395,"PYG":5631.85,"QAR":3.6391,"RON":3.903674,"RSD":101.517649,"RUB":57.371,"RWF":833.635,"SAR":3.7502,"SBD":7.792911,"SCR":13.381152,"SDG":6.670684,"SEK":8.171241,"SGD":1.358402,"SHP":0.759579,"SLL":7643.328121,"SOS":577.95,"SRD":7.448,"SSP":130.0769,"STD":20829.200481,"SVC":8.742198,"SYP":514.97499,"SZL":13.402242,"THB":33.14925,"TJS":8.79525,"TMT":3.50998,"TND":2.473794,"TOP":2.224732,"TRY":3.685404,"TTD":6.69697,"TWD":30.20775,"TZS":2248.5,"UAH":26.431,"UGX":3656.65,"USD":1,"UYU":29.382962,"UZS":8054.25,"VEF":10.104074,"VND":22720.753308,"VUV":106.413334,"WST":2.532373,"XAF":558.632113,"XAG":0.05896852,"XAU":0.00078099,"XCD":2.70255,"XDR":0.708893,"XOF":558.632113,"XPD":0.00102149,"XPF":101.626392,"XPT":0.00107992,"YER":250.319142,"ZAR":13.50018,"ZMW":9.676382,"ZWL":322.355011}}

src/shared/actions/page/sandbox/payments/editor.js

@@ -4,6 +4,21 @@
 
 import { createActions } from 'redux-actions';
 
+export const STATE = {
+  NEW_PAYMENT: 'NEW_PAYMENT',
+  PAID: 'PAID',
+  WAITING: 'WAITING',
+};
+
+/**
+ * Payload creator for the action that selects the specified billing account.
+ * @param {Number} accountId
+ * @return {Number} Payload.
+ */
+function selectBillingAccount(accountId) {
+  return accountId;
+}
+
 /**
  * Payload creator for the action that selects the specified project.
  * @param {String} projectId
@@ -13,12 +28,63 @@ function selectProject(projectId) {
   return projectId;
 }
 
+/**
+ * Payload creator for the action that switches page states. See STATE enum.
+ * @param {String} state
+ * @return {String}
+ */
+function setPageState(state) {
+  return state;
+}
+
+/**
+ * Payload creator for the action that sets the payment amount.
+ * @param {Number} amount Payment amount in USD.
+ * @return {Number}
+ */
+function setPaymentAmount(amount) {
+  return amount;
+}
+
+/**
+ * Payload creator for the action that sets the payment assignee.
+ * @param {String} username
+ * @return {String}
+ */
+function setPaymentAssignee(username) {
+  return username;
+}
+
+/**
+ * Payload creator for the action that sets the payment description.
+ * @param {String} description
+ * @return {String} Action payload.
+ */
+function setPaymentDescription(description) {
+  return description;
+}
+
+/**
+ * Payload creator for the action that sets the payment title.
+ * @param {String} title
+ * @return {String} Action payload.
+ */
+function setPaymentTitle(title) {
+  return title;
+}
+
 export default createActions({
   PAGE: {
     SANDBOX: {
       PAYMENTS: {
         EDITOR: {
+          SELECT_BILLING_ACCOUNT: selectBillingAccount,
           SELECT_PROJECT: selectProject,
+          SET_PAGE_STATE: setPageState,
+          SET_PAYMENT_AMOUNT: setPaymentAmount,
+          SET_PAYMENT_ASSIGNEE: setPaymentAssignee,
+          SET_PAYMENT_DESCRIPTION: setPaymentDescription,
+          SET_PAYMENT_TITLE: setPaymentTitle,
         },
       },
     },

src/shared/components/sandbox/payments/Confirmation/index.jsx

@@ -2,13 +2,17 @@
  * Payment confirmation.
  */
 
+import PT from 'prop-types';
 import React from 'react';
 import { Button, PrimaryButton } from 'components/buttons';
 import Background from '../Background';
 
 import './style.scss';
 
-export default function Confirmation() {
+export default function Confirmation({
+  amount,
+  assignee,
+}) {
   return (
     <Background>
       <div styleName="container">
@@ -20,13 +24,14 @@ export default function Confirmation() {
           </p>
           <div styleName="paycheck">
             <div styleName="info">
-              <p styleName="user"><strong>$200</strong> paid to <strong styleName="name">Sky</strong></p>
+              <p styleName="user"><strong>${amount}</strong> paid to <strong styleName="name">{assignee}</strong></p>
               <p styleName="task">Develop a new project submit button logic for the main page.</p>
             </div>
           </div>
           <div styleName="actions">
             <Button
-              to="/sandbox/payments/123"
+              // TODO: Demands some more logic here.
+              to="/sandbox/payments/new"
             >Make another payment</Button>
             <PrimaryButton
               to="/sandbox/payments"
@@ -37,3 +42,8 @@ export default function Confirmation() {
     </Background>
   );
 }
+
+Confirmation.propTypes = {
+  amount: PT.number.isRequired,
+  assignee: PT.string.isRequired,
+};

src/shared/components/sandbox/payments/Editor/index.jsx

@@ -2,6 +2,8 @@
  * Payment editor.
  */
 
+import _ from 'lodash';
+import LoadingIndicator from 'components/LoadingIndicator';
 import PT from 'prop-types';
 import React from 'react';
 import Select from 'components/Select';
@@ -13,10 +15,103 @@ import Background from '../Background';
 import './style.scss';
 
 export default function Editor({
+  makePayment,
+  paymentAmount,
+  paymentAssignee,
+  paymentDescription,
+  paymentTitle,
+  projectDetails,
   projects,
+  selectedBillingAccountId,
   selectedProjectId,
   selectProject,
+  setPaymentAmount,
+  setPaymentAssignee,
+  setPaymentDescription,
+  setPaymentTitle,
 }) {
+  let content;
+  if (!projectDetails) content = <LoadingIndicator />;
+  else {
+    const billingAccounts = _.get(projectDetails, 'billingAccountIds', [])
+      .map(id => ({ label: id, value: id }));
+    content = billingAccounts.length ? (
+      <div styleName="field">
+        <div styleName="field">
+          <span styleName="label">Billing account</span>
+          <Select
+            autoBlur
+            options={billingAccounts}
+            value={selectedBillingAccountId}
+          />
+        </div>
+        <div styleName="fieldGap" />
+        <div styleName="field">
+          <span styleName="label">Title</span>
+          <input
+            onChange={e => setPaymentTitle(e.target.value)}
+            placeholder="Topcoder payment"
+            value={paymentTitle}
+          />
+        </div>
+        <div styleName="field">
+          <span styleName="label">Description</span>
+          <textarea
+            onChange={e => setPaymentDescription(e.target.value)}
+            placeholder="payment is for ..."
+            rows={3}
+            value={paymentDescription}
+          />
+        </div>
+        <div styleName="field">
+          <span styleName="label">Assign to</span>
+          <div styleName="withPrefix">
+            <div styleName="prefix">
+              <div styleName="avatarPrefix" >
+                <Avatar />
+              </div>
+            </div>
+            <input
+              onChange={e => setPaymentAssignee(e.target.value)}
+              placeholder="Type handle to assign member"
+              value={paymentAssignee}
+            />
+          </div>
+        </div>
+        <div styleName="field">
+          <span styleName="label">Amount</span>
+          <div styleName="withPrefix">
+            <div styleName="prefix">
+              <div styleName="textPrefix">$</div>
+            </div>
+            <input
+              onChange={e => setPaymentAmount(Number(e.target.value))}
+              placeholder="0"
+              type="number"
+              value={String(paymentAmount)}
+            />
+          </div>
+        </div>
+        <div styleName="action">
+          { paymentAmount
+            && paymentAssignee
+            && paymentDescription
+            && paymentTitle ? (
+              <PrimaryButton
+                onClick={makePayment}
+                // to="/sandbox/payments/123/done"
+              >Pay now</PrimaryButton>
+            ) : null
+          }
+        </div>
+      </div>
+    ) : (
+      <div styleName="field">
+        This project has no associated billing accounts yet
+      </div>
+    );
+  }
+
   return (
     <Background escapeButton>
       <div styleName="container">
@@ -33,52 +128,30 @@ export default function Editor({
               value={Number(selectedProjectId)}
             />
           </div>
-          <div styleName="field">
-            <span styleName="label">Billing account</span>
-            <Select autoBlur />
-          </div>
-          <div styleName="fieldGap" />
-          <div styleName="field">
-            <span styleName="label">Title</span>
-            <input placeholder="Topcoder payment" />
-          </div>
-          <div styleName="field">
-            <span styleName="label">Description</span>
-            <textarea rows={3} placeholder="payment is for ..." />
-          </div>
-          <div styleName="field">
-            <span styleName="label">Assign to</span>
-            <div styleName="withPrefix">
-              <div styleName="prefix">
-                <div styleName="avatarPrefix" >
-                  <Avatar />
-                </div>
-              </div>
-              <input placeholder="Type handle to assign member" />
-            </div>
-          </div>
-          <div styleName="field">
-            <span styleName="label">Amount</span>
-            <div styleName="withPrefix">
-              <div styleName="prefix">
-                <div styleName="textPrefix">$</div>
-              </div>
-              <input placeholder="0" />
-            </div>
-          </div>
-          <div styleName="action">
-            <PrimaryButton
-              to="/sandbox/payments/123/done"
-            >Pay now</PrimaryButton>
-          </div>
+          {content}
         </div>
       </div>
     </Background>
   );
 }
 
+Editor.defaultProps = {
+  projectDetails: null,
+};
+
 Editor.propTypes = {
+  makePayment: PT.func.isRequired,
+  paymentAmount: PT.number.isRequired,
+  paymentAssignee: PT.string.isRequired,
+  paymentDescription: PT.string.isRequired,
+  paymentTitle: PT.string.isRequired,
+  projectDetails: PT.shape(),
   projects: PT.arrayOf(PT.object).isRequired,
+  selectedBillingAccountId: PT.number.isRequired,
   selectedProjectId: PT.number.isRequired,
   selectProject: PT.func.isRequired,
+  setPaymentAmount: PT.func.isRequired,
+  setPaymentAssignee: PT.func.isRequired,
+  setPaymentDescription: PT.func.isRequired,
+  setPaymentTitle: PT.func.isRequired,
 };

src/shared/components/sandbox/payments/Listing/PaymentRow/index.jsx

@@ -2,6 +2,7 @@
  * Payment row in payments listing.
  */
 
+import _ from 'lodash';
 import PT from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router-dom';
@@ -27,7 +28,7 @@ export default function PaymentRow({ challenge }) {
         </TrackAbbreviationTooltip>
       </td>
       <td styleName="name"><Link to="/sandbox/payments/123">{challenge.name}</Link></td>
-      <td styleName="price">{`$${challenge.prizes[0]}`}</td>
+      <td styleName="price">{`$${_.get(challenge, 'prizes[0]', '-')}`}</td>
       <td><Avatar styleName="memberAvatar" /><span styleName="memberName">{challenge.member || 'TOPCODER'}</span></td>
       <td><PaymentStatus status={challenge.status} text={challenge.status} /></td>
     </tr>