Skip to content

Commit

Permalink
v1.19.0 - Add payment processing for chat alerts
Browse files Browse the repository at this point in the history
  • Loading branch information
@DispatchCommit
DispatchCommit committed May 24, 2020
1 parent 31ee819 commit f0ed427
Show file tree
Hide file tree
Showing 7 changed files with 215 additions and 86 deletions.
4 changes: 2 additions & 2 deletions components/Chat/ChatInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion components/Chat/ChatMessages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
240 changes: 176 additions & 64 deletions components/Payment/ChatCoin.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>

Expand All @@ -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: '',
};
},
Expand All @@ -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 () {
Expand All @@ -143,7 +259,3 @@
},
};
</script>

<style lang='scss'>
</style>
Loading

0 comments on commit f0ed427

Please sign in to comment.