Made Tip User Reusable

qortal-ui-core/language/us.json

@@ -587,7 +587,8 @@
       "bcchange14": "Forward",
       "bcchange15": "Message Forwarded",
       "bcchange16": "Choose Recipient or Search for One Below",
-      "bcchange17": "FORWARDED"
+      "bcchange17": "FORWARDED",
+      "bcchange18": "Tip User"
    },
    "grouppage": {
       "gchange1": "Qortal Groups",

qortal-ui-plugins/plugins/core/components/ChatPage.js

@@ -1462,12 +1462,10 @@ class ChatPage extends LitElement {
     async updated(changedProperties) {
         if (changedProperties && changedProperties.has('userLanguage')) {
             const userLang = changedProperties.get('userLanguage')
-
-            if(userLang){
+            if (userLang) {
                 await new Promise(r => setTimeout(r, 100));
                 this.chatEditorPlaceholder = this.isReceipient === true ? `Message ${this._chatId}` : `${get("chatpage.cchange8")}`;
-            }
-            
+            }       
         }
 
         if (changedProperties && changedProperties.has('chatId') && changedProperties.get('chatId')) {
@@ -1479,7 +1477,6 @@ class ChatPage extends LitElement {
                 this.chatEditor.disable();
             }
         }
-        
     }
 
 async getName (recipient) {
@@ -1533,6 +1530,7 @@ async getName (recipient) {
         chatId=${this.chatId}
         .messages=${this.messagesRendered} 
         .escapeHTML=${escape} 
+        .chatEditor=${this.chatEditor}
         .getOldMessage=${this.getOldMessage}
         .setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
         .setEditedMessageObj=${(val) => this.setEditedMessageObj(val)}

qortal-ui-plugins/plugins/core/components/ChatRightPanel.js

@@ -410,7 +410,7 @@ class ChatRightPanel extends LitElement {
             }}
              style=${this.openTipUser ? "display: block" : "display: none"}>
              <tip-user
-                .openUserInfo=${this.openUserInfo}
+                .closeTipUser=${this.openUserInfo}
                 .chatEditor=${this.chatEditor}
                 .userName=${this.userName}
                 .setOpenTipUser=${(val) => this.setOpenTipUser(val)}

qortal-ui-plugins/plugins/core/components/ChatScroller.js

@@ -8,6 +8,8 @@ import { Epml } from "../../../epml";
 import './LevelFounder.js';
 import './NameMenu.js';
 import './ChatModals.js';
+import './WrapperModal';
+import './TipUser'
 import '@vaadin/icons';
 import '@vaadin/icon';
 import '@material/mwc-button';
@@ -36,8 +38,11 @@ class ChatScroller extends LitElement {
             isLoadingMessages: { type: Boolean},
             setIsLoadingMessages: {attribute: false},
             chatId: { type: String },
+            chatEditor: { type: Object },
             setForwardProperties: { attribute: false },
             setOpenPrivateMessage: { attribute: false },
+            openTipUser: { type: Boolean },
+            userName: { type: String }
         }
     }
 
@@ -48,12 +53,17 @@ class ChatScroller extends LitElement {
         this.messages = []
         this._upObserverhandler = this._upObserverhandler.bind(this)
         this._downObserverHandler = this._downObserverHandler.bind(this)
+        this.setOpenTipUser = this.setOpenTipUser.bind(this)
+        this.setUserName = this.setUserName.bind(this)
         this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
         this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")   
+        this.openTipUser = false;
+        this.userName = "";
     }
 
-
     render() {
+        console.log(6, "chat scroller here");
+        console.log(this.openTipUser, "openTipUser here");
         let formattedMessages = this.messages.reduce((messageArray, message, index) => {
             const lastGroupedMessage = messageArray[messageArray.length - 1];
             let timestamp;
@@ -117,12 +127,27 @@ class ChatScroller extends LitElement {
                             .setToggledMessage=${this.setToggledMessage}
                             .setForwardProperties=${this.setForwardProperties}
                             .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
-                            >
+                            .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
+                            .setUserName=${(val) => this.setUserName(val)}>
                             </message-template>`
                     )
                 })}
                 <div id='downObserver'></div>
             </ul>
+            <wrapper-modal
+            .onClickFunc=${() => {
+                this.openTipUser = false;
+                this.chatEditor.enable();
+            }}
+            style=${this.openTipUser ? "display: block;" : "display: none;"}>
+                <tip-user
+                    .closeTipUser=${!this.openTipUser}
+                    .chatEditor=${this.chatEditor}
+                    .focusChatEditor=${this.focusChatEditor}
+                    .userName=${this.userName}
+                    .setOpenTipUser=${(val) => this.setOpenTipUser(val)}>
+                </tip-user>
+            </wrapper-modal>
         `
     }
 
@@ -133,6 +158,9 @@ class ChatScroller extends LitElement {
         if(changedProperties.has('chatId') && changedProperties.get('chatId')){
             return true
         }
+        if(changedProperties.has('openTipUser')){
+            return true
+        }
         // Only update element if prop1 changed.
         return changedProperties.has('messages');
       }
@@ -148,6 +176,15 @@ class ChatScroller extends LitElement {
         toggledMessage = message;
     }
 
+    setOpenTipUser(props) {
+        this.openTipUser = props;
+        this.chatEditor.disable();
+    }
+
+    setUserName(props) {
+        this.userName = props;
+    }
+
     async firstUpdated() {
         this.emojiPicker.on('emoji', selection => {
 
@@ -240,10 +277,12 @@ class MessageTemplate extends LitElement {
             isFirstMessage: { type: Boolean },
             isSingleMessageInGroup: { type: Boolean },
             isLastMessageInGroup: { type: Boolean },
-            setToggledMessage: {attribute: false},
-            setForwardProperties: {attribute: false},
-            viewImage: {type: Boolean},
-            setOpenPrivateMessage : { attribute: false }
+            setToggledMessage: { attribute: false },
+            setForwardProperties: { attribute: false },
+            viewImage: { type: Boolean },
+            setOpenPrivateMessage : { attribute: false },
+            setOpenTipUser: { attribute: false },
+            setUserName: { attribute: false }
         }
     }
 
@@ -538,6 +577,8 @@ class MessageTemplate extends LitElement {
                                 .setForwardProperties=${this.setForwardProperties}
                                 ?firstMessageInChat=${this.messageObj.firstMessageInChat}
                                 .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
+                                .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
+                                .setUserName=${(val) => this.setUserName(val)}
                             > 
                             </chat-menu>
                         </div>
@@ -643,7 +684,9 @@ class ChatMenu extends LitElement {
             sendMessageForward: { attribute: false },
             setForwardProperties: { attribute: false },
             firstMessageInChat: { type: Boolean },
-            setOpenPrivateMessage: { attribute: false }
+            setOpenPrivateMessage: { attribute: false },
+            setOpenTipUser: { attribute: false },
+            setUserName: { attribute: false },
         }
     }
 
@@ -789,6 +832,19 @@ class ChatMenu extends LitElement {
                     </div>
                     `
                 ) : html`<div></div>`}
+                ${this.myAddress !== this.originalMessage.sender ? (
+                    html`
+                    <div 
+                    class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`}
+                    data-text="${translate("blockpage.bcchange18")}" 
+                    @click=${() => {
+                    this.setOpenTipUser(true);
+                    this.setUserName(this.originalMessage.sender);
+                    }}>
+                        <vaadin-icon icon="vaadin:dollar" slot="icon"></vaadin-icon>
+                    </div>
+                    `
+                ) : html`<div></div>`}
                 <div class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} data-text="${translate("blockpage.bcchange10")}" @click="${() => this.showBlockIconFunc(true)}">
                     <vaadin-icon icon="vaadin:ellipsis-dots-h" slot="icon"></vaadin-icon>
                 </div>

qortal-ui-plugins/plugins/core/components/TipUser.js

@@ -15,11 +15,12 @@ export class TipUser extends LitElement {
         chatEditor: { type: Object },
         walletBalance: { type: Number },
         sendMoneyLoading: { type: Boolean },
-        openUserInfo: { type: Boolean },
+        closeTipUser: { type: Boolean },
         btnDisable: { type: Boolean },
         errorMessage: { type: String },
         successMessage: { type: String },
-        setOpenTipUser: { attribute: false }
+        setOpenTipUser: { attribute: false },
+        focusChatEditor: { attribute: false }
         }
 	}
 
@@ -39,8 +40,8 @@ export class TipUser extends LitElement {
     }
 
     updated(changedProperties) {
-        if (changedProperties && changedProperties.has("openUserInfo")) {
-            if (this.openUserInfo) {
+        if (changedProperties && changedProperties.has("closeTipUser")) {
+            if (this.closeTipUser) {
                 this.shadowRoot.getElementById("amountInput").value = "";
                 this.errorMessage = "";
                 this.successMessage = "";
@@ -221,6 +222,7 @@ export class TipUser extends LitElement {
             setTimeout(() => {
                 this.setOpenTipUser(false);
                 this.chatEditor.enable();
+                this.focusChatEditor();
                 this.successMessage = "";
             }, 3000);
         } else {
@@ -234,8 +236,7 @@ export class TipUser extends LitElement {
     }
 
   render() {
-    console.log(5, "Tip User Here");
-    console.log(this.openUserInfo, "openUserInfo here");
+    console.log(7, "Tip User Here");
     return html`
       <div class="tip-user-header">      
         <img src="/img/qort.png" width="32" height="32">