source: components/ManageCredits.jsx

main
Last change on this file was 55701f0, checked in by anastasovv <simon@…>, 2 years ago

Added 1 second update_state calls in blackjack

  • Property mode set to 100644
File size: 10.3 KB
Line 
1import React from 'react'
2
3import { useSelector, useDispatch } from 'react-redux'
4import { setStyle } from '../redux/reducers/styleSlice';
5
6import { AiOutlineClose } from 'react-icons/ai';
7import { setPlayer } from '../redux/reducers/playerSlice';
8
9import axios from 'axios';
10
11const ManageCredits = () => {
12 const playerState = useSelector(state => state.player);
13 const styleState = useSelector(state => state.style);
14
15 const dispatch = useDispatch();
16
17 function close(action = '') {
18 dispatch(setStyle({
19 ...styleState.style,
20 displayManageCreditsScreen: false,
21 displayDepositModal: false,
22 displayWithdrawModal: false,
23 depositModalInputs: {
24 name: '',
25 card: '',
26 expire: '',
27 ccv: '',
28 amount: '',
29 },
30 displayWithdrawModal: false,
31 withdrawModalInputs: {
32 citibank: '',
33 iban: '',
34 bic: '',
35 beneficiary: '',
36 address: '',
37 amount: '',
38 },
39 inlineAlertText: '',
40 notification: action === 'deposit' ? {
41 show: true,
42 text: `Deposited $${styleState.style.depositModalInputs.amount} successfully`,
43 status: 'success',
44 } : action === 'withdraw' ? {
45 show: true,
46 text: `Withdrew $${Math.min(styleState.style.withdrawModalInputs.amount, playerState.player.credits)} successfully`,
47 status: 'success',
48 } : {
49 show: false,
50 text: '',
51 status: ''
52 },
53 }))
54 }
55
56
57 function openDepositModal() {
58 dispatch(setStyle({
59 ...styleState.style,
60 displayDepositModal: true,
61 displayWithdrawModal: false,
62 inlineAlertText: '',
63 }))
64 }
65
66 function openWithdrawModal() {
67 dispatch(setStyle({
68 ...styleState.style,
69 displayDepositModal: false,
70 displayWithdrawModal: true,
71 inlineAlertText: '',
72 }))
73 }
74
75 function buyCredits() {
76 axios.post(`/api/postgre`, {
77 action: 'deposit',
78 session_id: localStorage.CAESSINO_SESSION_ID,
79 data: styleState.style.depositModalInputs
80 })
81 .then(res => {
82 if (res.data?.success) {
83 dispatch(setPlayer({
84 ...playerState.player,
85 credits: res.data.credits,
86 }))
87
88 close('deposit');
89 }
90 else {
91 dispatch(setStyle({
92 ...styleState.style,
93 displayManageCreditsScreen: true,
94 inlineAlertText: res.data?.message,
95 }));
96 }
97 })
98 }
99
100 function sellCredits() {
101 axios.post(`/api/postgre`, {
102 action: 'withdraw',
103 session_id: localStorage.CAESSINO_SESSION_ID,
104 data: styleState.style.withdrawModalInputs
105 })
106 .then(res => {
107 if (res.data?.success) {
108 dispatch(setPlayer({
109 ...playerState.player,
110 credits: res.data.credits,
111 }))
112
113 close('withdraw');
114 }
115 else {
116 dispatch(setStyle({
117 ...styleState.style,
118 displayManageCreditsScreen: true,
119 inlineAlertText: res.data?.message,
120 }));
121 }
122 })
123 }
124
125 return (
126 <div className="fullscreen fs-centered manageCreditsScreen" style={{display: styleState.style.displayManageCreditsScreen ? 'block' : 'none'}}>
127 <AiOutlineClose onClick={() => close()} style={{position: 'absolute', top: '20px', right: '20px'}}/>
128 <div>
129 <div>
130 <h2>Manage (In-Game) Credits:</h2>
131 <p>You currently have: ${playerState.player.credits}</p>
132 </div>
133 <div className="main">
134 <div>
135 { styleState.style.displayDepositModal && styleState.style.inlineAlertText.length > 0 && <span className="inlineAlert">{styleState.style.inlineAlertText}</span>}
136 { !styleState.style.displayDepositModal && <button className="primaryButton" onClick={() => openDepositModal()}>Deposit From Credit Card<br/><span>Buy (In-Game) Credits</span></button> }
137 { styleState.style.displayDepositModal && (
138 <div className="fs-inputs-container">
139 <div>
140 <label>Name and Surname</label>
141 <input type="text" className="primaryInput" onChange={(e) => {onChangeDeposit(e, 'name')}} value={styleState.style.depositModalInputs.name} placeholder="John Doe"/>
142 <label>Card Number</label>
143 <input type="text" className="primaryInput" onChange={(e) => {onChangeDeposit(e, 'card')}} value={styleState.style.depositModalInputs.card} placeholder="2333 9298 9821 1111"/>
144 <label>Expire Date</label>
145 <input type="text" className="primaryInput" onChange={(e) => {onChangeDeposit(e, 'expire')}} value={styleState.style.depositModalInputs.expire} placeholder="07/24"/>
146 <label>CCV</label>
147 <input type="text" className="primaryInput" onChange={(e) => {onChangeDeposit(e, 'ccv')}} value={styleState.style.depositModalInputs.ccv} placeholder="337"/>
148 <label><span>Amount</span></label>
149 <input type="text" className="primaryInput" onChange={(e) => {onChangeDeposit(e, 'amount')}} value={styleState.style.depositModalInputs.amount} placeholder="500"/>
150 <button className="primaryButton" onClick={() => buyCredits()}>Deposit</button>
151 </div>
152 </div>
153 )}
154 </div>
155 <div>
156 { styleState.style.displayWithdrawModal && styleState.style.inlineAlertText.length > 0 && <span className="inlineAlert">{styleState.style.inlineAlertText}</span>}
157 { !styleState.style.displayWithdrawModal && <button className="primaryButton" onClick={() => openWithdrawModal()}>Withdraw To Personal Account<br/><span>Sell (In-Game) Credits</span></button> }
158 { styleState.style.displayWithdrawModal && (
159 <div className="fs-inputs-container">
160 <div>
161 <label>Bank name</label>
162 <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'citibank')}} value={styleState.style.withdrawModalInputs.citibank} placeholder="Swedbank"/>
163 <label>IBAN</label>
164 <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'iban')}} value={styleState.style.withdrawModalInputs.iban} placeholder="SE45 5000 0000 0583 9825 7466"/>
165 <label>BIC</label>
166 <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'bic')}} value={styleState.style.withdrawModalInputs.bic} placeholder="SWEDSESSXXX"/>
167 <label>Beneficiary Name</label>
168 <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'beneficiary')}} value={styleState.style.withdrawModalInputs.beneficiary} placeholder="John Doe"/>
169 <label>Bank Address</label>
170 <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'address')}} value={styleState.style.withdrawModalInputs.address} placeholder="Landsvägen 40, Sundbyberg"/>
171 <label><span>Amount</span></label>
172 <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'amount')}} value={styleState.style.withdrawModalInputs.amount} placeholder="500"/>
173 <button className="primaryButton" onClick={() => sellCredits()}>Withdraw</button>
174 </div>
175 </div>
176 )}
177 </div>
178 </div>
179 </div>
180 </div>
181 )
182
183 function onChangeDeposit(e, what) {
184 dispatch(setStyle({
185 ...styleState.style,
186 depositModalInputs: {
187 name: what === 'name' ? e.target.value : styleState.style.depositModalInputs.name,
188 card: what === 'card' ? e.target.value : styleState.style.depositModalInputs.card,
189 expire: what === 'expire' ? e.target.value : styleState.style.depositModalInputs.expire,
190 ccv: what === 'ccv' ? e.target.value : styleState.style.depositModalInputs.ccv,
191 amount: what === 'amount' ? e.target.value : styleState.style.depositModalInputs.amount,
192 }
193 }))
194 }
195
196 function onChangeWithdraw(e, what) {
197 dispatch(setStyle({
198 ...styleState.style,
199 withdrawModalInputs: {
200 citibank: what === 'citibank' ? e.target.value : styleState.style.depositModalInputs.citibank,
201 iban: what === 'iban' ? e.target.value : styleState.style.depositModalInputs.iban,
202 bic: what === 'bic' ? e.target.value : styleState.style.depositModalInputs.bic,
203 beneficiary: what === 'beneficiary' ? e.target.value : styleState.style.depositModalInputs.beneficiary,
204 address: what === 'address' ? e.target.value : styleState.style.depositModalInputs.address,
205 amount: what === 'amount' ? e.target.value : styleState.style.depositModalInputs.amount,
206 }
207 }))
208 }
209}
210
211export default ManageCredits
Note: See TracBrowser for help on using the repository browser.