From ba6d093d1c3e02c5f8eb177a978ea1db387c9ac3 Mon Sep 17 00:00:00 2001
From: hackrush <atulshyan96@gmail.com>
Date: Fri, 28 Jul 2017 05:04:42 +0530
Subject: [PATCH] Added new component form for price, also only tipping form is
 shown when clicked.

---
 ui/js/component/fileActions/view.jsx | 26 +++++++++++++++---
 ui/js/component/priceForm/index.js   |  5 ++++
 ui/js/component/priceForm/view.jsx   | 39 +++++++++++++++++++++++++++
 ui/js/component/tipLink/view.jsx     | 40 ++++++++++++++--------------
 4 files changed, 87 insertions(+), 23 deletions(-)
 create mode 100644 ui/js/component/priceForm/index.js
 create mode 100644 ui/js/component/priceForm/view.jsx

diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx
index 0f006ad60..216202205 100644
--- a/ui/js/component/fileActions/view.jsx
+++ b/ui/js/component/fileActions/view.jsx
@@ -14,6 +14,7 @@ class FileActions extends React.PureComponent {
     super(props);
     this.state = {
       forceShowActions: false,
+      showTipBox: false,
     };
   }
 
@@ -58,6 +59,18 @@ class FileActions extends React.PureComponent {
     this.props.loadVideo(this.props.uri);
   }
 
+  handleTipShow() {
+    this.setState({
+      showTipBox: true,
+    });
+  }
+
+  handleTipHide() {
+    this.setState({
+      showTipBox: false,
+    });
+  }
+
   render() {
     const {
       fileInfo,
@@ -76,6 +89,8 @@ class FileActions extends React.PureComponent {
       claimIsMine,
     } = this.props;
 
+    const { showTipBox } = this.state;
+
     const metadata = fileInfo ? fileInfo.metadata : null,
       openInFolderMessage = platform.startsWith("Mac")
         ? __("Open in Finder")
@@ -166,8 +181,14 @@ class FileActions extends React.PureComponent {
 
     return (
       <section className="file-actions">
-        {content}
-        {showMenu
+        {showTipBox ? "" : content}
+        <TipLink
+          onTipShow={this.handleTipShow.bind(this)}
+          onTipHide={this.handleTipHide.bind(this)}
+          showTipBox={showTipBox}
+          claim={this.props.claim}
+        />
+        {showMenu && !showTipBox
           ? <DropDownMenu>
               <DropDownMenuItem
                 key={0}
@@ -181,7 +202,6 @@ class FileActions extends React.PureComponent {
               />
             </DropDownMenu>
           : ""}
-        <TipLink claim={this.props.claim} />
         <Modal
           type="confirm"
           isOpen={modal == "affirmPurchase"}
diff --git a/ui/js/component/priceForm/index.js b/ui/js/component/priceForm/index.js
new file mode 100644
index 000000000..5370b8ed1
--- /dev/null
+++ b/ui/js/component/priceForm/index.js
@@ -0,0 +1,5 @@
+import React from "react";
+import { connect } from "react-redux";
+import PriceForm from "./view";
+
+export default connect(null, null)(PriceForm);
diff --git a/ui/js/component/priceForm/view.jsx b/ui/js/component/priceForm/view.jsx
new file mode 100644
index 000000000..b4c8318c0
--- /dev/null
+++ b/ui/js/component/priceForm/view.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { FormField } from "component/form";
+
+const PriceForm = props => {
+  const {
+    onFeeChange,
+    onCurrencyChange,
+    defaultFeeValue,
+    defaultCurrencyValue,
+    placeholder,
+    min,
+    step,
+  } = props;
+
+  return (
+    <span>
+      <FormField
+        type="number"
+        min={min}
+        placeholder={placeholder || null}
+        step={step}
+        onChange={onFeeChange}
+        defaultValue={defaultFeeValue}
+        className="form-field__input--inline"
+      />
+      <FormField
+        type="select"
+        onChange={onCurrencyChange}
+        defaultValue={defaultCurrencyValue}
+        className="form-field__input--inline"
+      >
+        <option value="LBC">{__("LBRY credits")}</option>
+        <option value="USD">{__("US Dollars")}</option>
+      </FormField>
+    </span>
+  );
+};
+
+export default PriceForm;
diff --git a/ui/js/component/tipLink/view.jsx b/ui/js/component/tipLink/view.jsx
index 4003cd25d..25740298a 100644
--- a/ui/js/component/tipLink/view.jsx
+++ b/ui/js/component/tipLink/view.jsx
@@ -1,21 +1,20 @@
 import React from "react";
 import Link from "component/link";
 import { FormField } from "component/form";
+import PriceForm from "component/priceForm";
 
 class TipLink extends React.PureComponent {
   constructor(props) {
     super(props);
 
     this.state = {
-      showTipBox: false,
       feeAmount: "1.00",
+      currency: "LBC",
     };
   }
 
   handleTipPublisherButtonClicked() {
-    this.setState({
-      showTipBox: true,
-    });
+    this.props.onTipShow();
   }
 
   handleTipButtonClicked() {
@@ -26,15 +25,11 @@ class TipLink extends React.PureComponent {
     this.props.setAmount(amount);
     this.props.sendToAddress();
 
-    this.setState({
-      showTipBox: false,
-    });
+    this.props.onTipHide();
   }
 
   handleTipCancelButtonClicked() {
-    this.setState({
-      showTipBox: false,
-    });
+    this.props.onTipHide();
   }
 
   handleFeeAmountChange(event) {
@@ -43,12 +38,18 @@ class TipLink extends React.PureComponent {
     });
   }
 
+  handleCurrencyChange(event) {
+    this.setState({
+      currency: event.target.value,
+    });
+  }
+
   render() {
-    const { showTipBox } = this.state;
+    const { showTipBox } = this.props;
 
     let tipLink = (
       <Link
-        label={__("Tip Publisher")}
+        label={__("Tip")}
         button="text"
         icon="icon-gift"
         onClick={this.handleTipPublisherButtonClicked.bind(this)}
@@ -57,15 +58,14 @@ class TipLink extends React.PureComponent {
 
     let tipBox = (
       <span>
-        <FormField
-          type="number"
-          className="form-field__input--inline"
-          step="0.1"
-          placeholder="1.00"
-          defaultValue="1.00"
+        <PriceForm
           min="0.01"
-          postfix={__("LBC")}
-          onChange={event => this.handleFeeAmountChange(event)}
+          placeholder="1.00"
+          step="0.1"
+          onFeeChange={event => this.handleFeeAmountChange(event)}
+          defaultFeeValue="1.00"
+          onCurrencyChange={event => this.handleCurrencyChange(event)}
+          defaultCurrencyValue="LBC"
         />
         {__("  ")}
         <Link