[87614a5] | 1 | import React from 'react'
|
---|
| 2 |
|
---|
| 3 | import { useSelector, useDispatch } from 'react-redux'
|
---|
| 4 | import { setStyle } from '../redux/reducers/styleSlice';
|
---|
| 5 |
|
---|
| 6 | import { AiOutlineClose } from 'react-icons/ai';
|
---|
| 7 | import { setPlayer } from '../redux/reducers/playerSlice';
|
---|
| 8 |
|
---|
| 9 | import axios from 'axios';
|
---|
| 10 |
|
---|
| 11 | const ManageCredits = () => {
|
---|
| 12 | const playerState = useSelector(state => state.player);
|
---|
| 13 | const styleState = useSelector(state => state.style);
|
---|
| 14 |
|
---|
| 15 | const dispatch = useDispatch();
|
---|
| 16 |
|
---|
[433e0c5] | 17 | function close(action = '') {
|
---|
[87614a5] | 18 | dispatch(setStyle({
|
---|
| 19 | ...styleState.style,
|
---|
| 20 | displayManageCreditsScreen: false,
|
---|
[433e0c5] | 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,
|
---|
[55701f0] | 46 | text: `Withdrew $${Math.min(styleState.style.withdrawModalInputs.amount, playerState.player.credits)} successfully`,
|
---|
[433e0c5] | 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: '',
|
---|
[87614a5] | 72 | }))
|
---|
| 73 | }
|
---|
| 74 |
|
---|
| 75 | function buyCredits() {
|
---|
[433e0c5] | 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 | })
|
---|
[87614a5] | 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>
|
---|
[433e0c5] | 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>
|
---|
[87614a5] | 178 | </div>
|
---|
| 179 | </div>
|
---|
| 180 | </div>
|
---|
| 181 | )
|
---|
[433e0c5] | 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 | }
|
---|
[87614a5] | 209 | }
|
---|
| 210 |
|
---|
| 211 | export default ManageCredits |
---|