From f0ed427c6ce5a34e5f10f710b977969d06776ebf Mon Sep 17 00:00:00 2001
From: DispatchCommit <dispatchcommit@gmail.com>
Date: Sun, 24 May 2020 16:39:46 -0700
Subject: [PATCH] v1.19.0 - Add payment processing for chat alerts

---
 components/Chat/ChatInput.vue          |   4 +-
 components/Chat/ChatMessages/index.vue |   3 +-
 components/Payment/ChatCoin.vue        | 240 ++++++++++++++++++-------
 components/Payment/Checkout.vue        |  34 +++-
 components/Payment/v-braintree.vue     |   7 +-
 package.json                           |   2 +-
 store/index.js                         |  11 +-
 7 files changed, 215 insertions(+), 86 deletions(-)

diff --git a/components/Chat/ChatInput.vue b/components/Chat/ChatInput.vue
index 481a8a69..8595cbba 100644
--- a/components/Chat/ChatInput.vue
+++ b/components/Chat/ChatInput.vue
@@ -46,10 +46,10 @@
 
       <!-- Chat Coin -->
       <v-menu
-        v-if="false"
+        v-if="true"
         v-model="showChatCoins"
         :close-on-content-click="false"
-        transition="slide-x-transition"
+        transition="slide-y-reverse-transition"
         :max-width="320"
         top
         right
diff --git a/components/Chat/ChatMessages/index.vue b/components/Chat/ChatMessages/index.vue
index 9f1301f1..f0ee2c57 100644
--- a/components/Chat/ChatMessages/index.vue
+++ b/components/Chat/ChatMessages/index.vue
@@ -48,7 +48,8 @@
                 text
                 border="left"
                 :color="msg.color"
-                class="my-2"
+                class="my-1"
+                style="font-size: 14px"
               >{{ msg.message }}</v-alert>
             </div>
           </template>
diff --git a/components/Payment/ChatCoin.vue b/components/Payment/ChatCoin.vue
index 483f205c..bb7767ce 100644
--- a/components/Payment/ChatCoin.vue
+++ b/components/Payment/ChatCoin.vue
@@ -6,10 +6,10 @@
       color="primary"
       class="d-flex align-center justify-space-between pl-2"
     >
-      <h5 class="black--text body-2">
+      <h4 class="black--text body-2">
         <v-icon color="black">local_atm</v-icon>
         Coin Store
-      </h5>
+      </h4>
       <v-btn
         color="black"
         text
@@ -23,71 +23,156 @@
 
     <div class="pa-3">
 
-      <v-btn
-        class="d-flex mb-3"
-        color="primary"
-        light
-        block
-        @click.prevent="openBuyMenu ( '500', 5 )"
+      <!-- Purchase Pop Up -->
+      <v-dialog
+        v-model="showPurchasePopup"
+        width="500"
       >
-        500 Coin - $5
-      </v-btn>
+        <template v-slot:activator="{ on }">
 
-      <v-btn
-        class="d-flex mb-3"
-        color="primary"
-        light
-        block
-        @click.prevent="openBuyMenu ( '1000', 10 )"
-      >
-        1000 Coin - $10
-      </v-btn>
+          <v-btn
+            class="d-flex mb-3"
+            color="green"
+            v-on="on"
+            @click.prevent="openBuyMenu ( '100', 10 )"
+            small
+            block
+          >
+            Buy 100 Coins - $10
+          </v-btn>
 
-      <div>
-        Balance: <span class="headline">{{ balance }}</span> coins
-      </div>
+        </template>
 
-    </div>
+        <v-card colr="grey darken-4">
+          <v-card-title
+            class="title primary black--text"
+            primary-title
+          >
+            ${{ this.amount }} - Buy 100 Coins
+          </v-card-title>
 
-    <!-- Purchase Pop Up -->
-    <v-dialog
-      v-model="showPurchasePopup"
-      width="500"
-    >
-      <template v-slot:activator="{ on }">
+          <v-card-text>
+            <checkout
+              :productId="productId"
+              :amount="amount"
+              :token="token"
+              :paypal="true"
+              :url="url"
+              :btn-class="'v-btn theme--light yellow'"
+            />
+          </v-card-text>
+        </v-card>
+      </v-dialog>
+
+      <!-- Coin Balance -->
+      <v-alert
+        color="white"
+        class="mb-0"
+        text
+      >
+        <div class="d-flex justify-space-between align-end">
+          <div class="mr-2">Balance: </div>
+          <div>
+            <span class="headline">{{ coins }}</span> coins
+          </div>
+        </div>
+      </v-alert>
+
+      <div>
         <v-btn
-          color="primary"
-          class="black--text"
-          v-on="on"
+          class="d-flex mt-3"
+          color="red"
+          outlined
+          small
           block
-          @click.stop="showPurchasePopup = !showPurchasePopup"
+          :disabled="coins === 0"
+          @click="openRedeemMenu( 'red' )"
         >
-          <v-icon class="mr-2">shop</v-icon>
-          Buy Coins
+          Red Alert 11
         </v-btn>
-      </template>
-
-      <v-card colr="grey darken-4">
-        <v-card-title
-          class="title primary black--text"
-          primary-title
+        <v-btn
+          class="d-flex mt-3"
+          color="blue"
+          outlined
+          small
+          block
+          :disabled="coins === 0"
+          @click="openRedeemMenu( 'blue' )"
         >
-          Buy Coins
-        </v-card-title>
-
-        <v-card-text>
-          <checkout
-            :productId="productId"
-            :amount="amount"
-            :token="token"
-            :paypal="false"
-            :url="url"
-            :btn-class="'v-btn theme--light yellow'"
-          />
-        </v-card-text>
-      </v-card>
-    </v-dialog>
+          Blue Alert 09
+        </v-btn>
+        <v-btn
+          class="d-flex mt-3"
+          color="grey"
+          outlined
+          small
+          block
+          :disabled="coins === 0"
+          @click="openRedeemMenu( 'grey' )"
+        >
+          Grey Alert 07
+        </v-btn>
+      </div>
+
+      <!-- For creating chat alerts -->
+      <v-dialog
+        v-model="redeemAlertPopup"
+        width="500"
+      >
+        <v-card colr="grey darken-4">
+          <v-sheet
+            tile
+            color="primary"
+            class="d-flex align-center justify-space-between pl-2"
+          >
+            <h4 class="black--text body-2">
+              <v-icon color="black">warning</v-icon>
+              Create {{ alertColor.toUpperCase() }} Chat Alert
+            </h4>
+            <v-btn
+              color="black"
+              text
+              icon
+              pa-0
+              @click="redeemAlertPopup = false"
+            >
+              <v-icon color="black">close</v-icon>
+            </v-btn>
+          </v-sheet>
+
+          <div class="pa-3">
+            <v-text-field
+              v-model="alertMessage"
+              :color="alertColor"
+              label="Message..."
+              single-line
+              outlined
+              dense
+              clearable
+              counter="600"
+            ></v-text-field>
+
+            <div class="d-flex align-end mt-3">
+              <div class="grey--text overline">Hello Senator</div>
+              <v-spacer></v-spacer>
+              <v-btn
+                class="d-flex ml-2"
+                color="primary"
+                small
+                @click="createAlert"
+              >Create</v-btn>
+              <v-btn
+                class="d-flex ml-2"
+                color="red"
+                small
+                @click="redeemAlertPopup = false"
+              >Cancel</v-btn>
+            </div>
+          </div>
 
+        </v-card>
+      </v-dialog>
+    </div>
   </v-card>
 </template>
 
@@ -107,12 +192,16 @@
     data () {
       return {
         showPurchasePopup: false,
+        redeemAlertPopup: false,
         token: 'production_ndjvk9d7_4q2xfsbyxjmm8brs',
         server: 'https://api.bitwave.tv',
-        endpoint: 'v1/payments/checkout',
+        endpoint: 'api/payment/coins/checkout',
 
         amount: null,
         productId: null,
+
+        alertColor: 'grey',
+        alertMessage: '',
       };
     },
 
@@ -126,15 +215,42 @@
         this.amount = amount;
         this.showPurchasePopup = true;
       },
+
+      openRedeemMenu ( color ) {
+        this.redeemAlertPopup = true;
+        this.alertColor = color;
+      },
+
+      async createAlert () {
+        try {
+          await this.$axios.post(
+            'https://api.bitwave.tv/api/store/alerts/checkout',
+            {
+              username: this.user.username,
+              uid: this.user.uid,
+              color: this.alertColor,
+              message: this.alertMessage,
+            }
+          );
+          this.redeemAlertPopup = false;
+          this.alertMessage = '';
+          this.close();
+        } catch ( error ) {
+          console.error( error.message );
+          this.$toast.error( error.message, { duration: 2500, icon: 'error', position: 'top-center' } );
+        }
+      },
     },
 
     computed: {
       ...mapGetters({
-        getBalance: VStore.$getters.getBalance,
+        isAuth     : VStore.$getters.isAuth,
+        user       : VStore.$getters.getUser,
+        getCoins : VStore.$getters.getCoins,
       }),
 
-      balance () {
-        return this.getBalance > 1000 ? `${(this.getBalance / 1000).toFixed( 1 )}k` : this.getBalance;
+      coins () {
+        return this.getCoins > 1000 ? `${(this.getCoins / 1000).toFixed( 1 )}k` : this.getCoins;
       },
 
       url () {
@@ -143,7 +259,3 @@
     },
   };
 </script>
-
-<style lang='scss'>
-
-</style>
diff --git a/components/Payment/Checkout.vue b/components/Payment/Checkout.vue
index ec747344..4616ff8c 100644
--- a/components/Payment/Checkout.vue
+++ b/components/Payment/Checkout.vue
@@ -1,7 +1,12 @@
 <template>
     <div>
-        <!-- Make a purchase -->
+      <div class="mt-3 grey--text caption">NOTE: All purchases support bitwave media directly currently. Additional monetization options for streamers is in progress.</div>
+      <div class="mt-3 grey--text caption"><i>coins are nonrefundable and cannot be redeemed for cash value.</i></div>
+      <div class="mt-3 grey--text caption">Donations within the last 30 days are eligable for credit.<br>Email support@bitwave.tv for assistance.</div>
+
+      <!-- Make a purchase -->
       <div ref="dropin"></div>
+
       <v-alert
         :value="error"
         type="error"
@@ -17,7 +22,7 @@
         Thanks for your purchase!
       </v-alert>
 
-      <div class="d-flex">
+      <div class="d-flex mt-3">
         <v-spacer/>
         <v-btn
           ref="submit"
@@ -36,6 +41,8 @@
 
 <script>
   import dropIn from 'braintree-web-drop-in';
+  import { mapGetters } from 'vuex';
+  import { VStore } from '@/store';
 
   export default {
     name: 'Checkout',
@@ -61,7 +68,7 @@
       },
       btnText: {
         type: String,
-        default: 'Buy Now'
+        default: 'Buy Coins'
       },
       btnClass: {
         type: String,
@@ -108,7 +115,8 @@
         try {
           const response = await this.$axios.post( this.url, {
             nonce: nonce,
-            username: this.username,
+            username: this.user.username,
+            uid: this.user.uid,
             amount: this.amount,
           });
 
@@ -122,7 +130,7 @@
             this.$ga.event({
               eventCategory : 'merchant',
               eventAction   : 'purchased coins',
-              eventLabel    : this.productId,
+              eventLabel    : 'coins',
               eventValue    : this.amount,
             });
           } else {
@@ -140,22 +148,30 @@
       }
     },
 
-    computed: {},
+    computed: {
+      ...mapGetters({
+        isAuth     : VStore.$getters.isAuth,
+        user       : VStore.$getters.getUser,
+        getBalance : VStore.$getters.getCoins,
+      }),
+    },
 
     mounted () {
       // Create config
       const config = {
         authorization: this.token,
         container: this.$refs.dropin,
-        locale: this.locale
+        locale: this.locale,
+        paypal: { flow: 'vault' },
+        /*paypalCredit: { flow: 'vault' },*/
       };
 
       // If PayPal is available
-      if ( this.paypal ) {
+      /*if ( this.paypal ) {
         config.paypal = {
           flow: 'vault'
         }
-      }
+      }*/
 
       // Create drop-in
       dropIn.create( config, ( createErr, instance ) => {
diff --git a/components/Payment/v-braintree.vue b/components/Payment/v-braintree.vue
index 5bbf29f0..c3fcd8cc 100644
--- a/components/Payment/v-braintree.vue
+++ b/components/Payment/v-braintree.vue
@@ -149,15 +149,16 @@
       let config = {
         authorization: this.token,
         container: this.$refs.dropin,
-        locale: this.locale
+        locale: this.locale,
+        paypal: { flow: 'vault' },
       };
 
       // If Paypal is available
-      if ( this.paypal ) {
+      /*if ( this.paypal ) {
         config.paypal = {
           flow: 'vault'
         }
-      }
+      }*/
 
       // Create dropin
       dropIn.create( config, ( createErr, instance ) => {
diff --git a/package.json b/package.json
index e9c4b8ad..085b59a2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bitwave.tv",
-  "version": "1.18.8",
+  "version": "1.19.0",
   "description": "An open platform live streaming service for creators to freely express themselves.",
   "author": "Dispatch",
   "scripts": {
diff --git a/store/index.js b/store/index.js
index eb2e6748..eecf33e7 100644
--- a/store/index.js
+++ b/store/index.js
@@ -49,7 +49,7 @@ const $getters = {
   getUser      : 'GET_USER',
   getUsername  : 'GET_USERNAME',
   getStreamKey : 'GET_STREAM_KEY',
-  getBalance   : 'GET_BALANCE',
+  getCoins     : 'GET_COINS',
   getChannel   : 'GET_CHANNEL',
 
   getSidebarData : 'GET_SIDEBAR_DATA',
@@ -111,7 +111,7 @@ export const state = () => ({
 
   [$states.channelsViewers] : [],
   [$states.userlist]        : [],
-  [$states.showAll]         : false,
+  [$states.showAll]         : true,
 
   [$states.pwaPrompt]       : null,
 });
@@ -226,12 +226,11 @@ export const getters = {
       && user.role === 'admin';
   },
 
-  [$getters.getBalance] ( state ) {
+  [$getters.getCoins] ( state ) {
     const user = state[$states.user];
     return user
-      && user.hasOwnProperty( 'balance' )
-      && user.balance
-      || 0;
+      && user.hasOwnProperty( 'coins' )
+      && user.coins || 0;
   },
 
   [$getters.getPWaPrompt] ( state ) {