diff --git a/src/Components/ItemCardAction.js b/src/Components/ItemCardAction.js
index c02455ea93709a2a1fc5b00605246c84258ab7bc..e323fd88afe54fdd28a6d67b1e27092b301578b7 100644
--- a/src/Components/ItemCardAction.js
+++ b/src/Components/ItemCardAction.js
@@ -24,6 +24,14 @@ import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
import Button from '@material-ui/core/Button';
import gem from '../img/gamification/gem.svg';
+import SnackbarContent from '@material-ui/core/SnackbarContent';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import axios from 'axios'
+import {apiUrl} from '../../env';
function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
@@ -47,11 +55,21 @@ const GemImg = styled.img`
top: 8px;
padding-right: 5px;
`
+
+const GemSpan = styled.span`
+ color: red;
+`
+
export default function ItemCardAction (props) {
const [success, setSuccess] = useState(false);
const [failure, setFailure] = useState(false);
- const [message, setMessage] = useState("beerarea");
+ const [message, setMessage] = useState("");
const [info, setInfo] = useState(false);
+ const [item_id, setItemID] = useState(0);
+ const [last_operation, setLastOperation] = useState();
+ const [open_dialog, setOpenDialog] = useState(false);
+ const nonPurchaseMessage = <span>Item {last_operation == 'equip' ? 'retirado' : 'equipado'}. <a onClick={revertLastOperation}>Desfazer</a></span>;
+
const handleClose = (snackbar) => {
if (snackbar == 'success')
@@ -62,23 +80,46 @@ export default function ItemCardAction (props) {
setFailure(false);
}
+ const revertLastOperation = () => {
+ manageItemAndShowSnackbar(last_operation == 'equip' ? 'unequip' : 'equip',
+ setInfo,
+ nonPurchaseMessage;
+ 'Erro');
+ }
+
+ const manageItemAndShowSnackbar = (operation, setSnackbar, successMessage, failureMessage) => {
+ axios.patch(apiUrl + '/users/' + operation + '_item?id=' + item_id).then(
+ response => {
+ if (response.status == 200) {
+ setSnackbar(true);
+ setMessage(successMessage);
+ } else {
+ setFailure(true);
+ setMessage(failureMessage);
+ }
+ }
+ );
+ setLastOperation(operation == 'purchase' ? last_operation : (operation == 'equip' ? 'unequip' : 'equip'));
+ }
+
+ const handleClickBuyItem = () => {
+ setOpenDialog(false);
+ manageItemAndShowSnackbar('purchase', setSuccess, <span>Item comprado.</span>,
+ <span>Compra falhou. Tente novamente</span>);
+ }
+
+ const handleDialogClose = () => {
+ setOpenDialog(false);
+ }
+
const handleClick = () => {
// this will become an axios get
- if (props.operation == 'unequip') {
- setInfo(true);
- setMessage("Item retirado");
- }
- else if (props.operation == 'equip') {
- setInfo(true);
- setMessage("Item equipado");
- }
+ if (props.operation == 'unequip')
+ manageItemAndShowSnackbar('unequip', setInfo, nonPurchaseMessage, 'Erro');
+ else if (props.operation == 'equip')
+ manageItemAndShowSnackbar('equip', setInfo, nonPurchaseMessage, 'Erro');
else if (props.operation == 'buy') {
- setSuccess(true);
- setMessage("Item comprado");
- }
- else {
- setFailure(true);
- setMessage("Compra falhou");
+ setOpenDialog(true);
}
}
@@ -104,6 +145,33 @@ export default function ItemCardAction (props) {
{props.operation == 'buy' ? "COMPRAR" :
props.operation == 'equip' ? "USAR" : "TIRAR"}
</span>
+ <Dialog
+ open={open_dialog}
+ onClose={handleClose}
+ aria-labelledby="alert-dialog-title"
+ aria-describedby="alert-dialog-description"
+ >
+ <DialogTitle id="alert-dialog-title">{"Deseja realmente comprar este item?"}</DialogTitle>
+ <DialogContent>
+ <DialogContentText id="alert-dialog-description">
+ <strong>Esta compra não envolve nenhum dinheiro real.</strong>
+
+ <br/><br/>O item que você deseja comprar, <strong>NOME DO ITEM</strong>, custa
+ <GemImg src={gem}/><GemSpan>PREÇO</GemSpan> gemas. Você possui
+ <GemImg src={gem}/><GemSpan><strong>GEMAS</strong></GemSpan> gemas.
+
+ <br/><br/>Comprar este item lhe deixará com <GemImg src={gem}/><GemSpan><strong>TANTAS</strong></GemSpan> gemas.
+ </DialogContentText>
+ </DialogContent>
+ <DialogActions>
+ <Button onClick={handleDialogClose} color="primary">
+ Cancelar
+ </Button>
+ <Button onClick={handleClickBuyItem} color="primary" autoFocus>
+ Comprar
+ </Button>
+ </DialogActions>
+ </Dialog>
</div>
)
}
diff --git a/src/Components/StoreGuide.js b/src/Components/StoreGuide.js
index 03bcf8a2cb6b78f4377c961f224b363fdd0e5901..a4b0f509b11a3c8ab590e397c1fe07e9ba616c5c 100644
--- a/src/Components/StoreGuide.js
+++ b/src/Components/StoreGuide.js
@@ -47,21 +47,38 @@ export default function ItemStoreContainer (props) {
O que são "gemas"?
</StoreTopic>
<StoreBody>
- Aqui eu explico muito bem o que são "gemas"
+ Gemas são moedas virtuais que você ganha usando a plataforma MEC RED (publicando recursos, avaliando recursos, criando conexões, etc) e pode usar para adquirir itens cosméticos para seu perfil, como insígnias e bordas de avatar.
</StoreBody>
<StoreTopic>
- Regras
+ Posso usar dinheiro real para comprar gemas?
</StoreTopic>
<StoreBody>
- 1st RULE: You do not talk about FIGHT CLUB.
- 2nd RULE: You DO NOT talk about FIGHT CLUB.
- 3rd RULE: If someone says "stop" or goes limp, taps out the fight is over.
- 4th RULE: Only two guys to a fight.
- 5th RULE: One fight at a time.
- 6th RULE: No shirts, no shoes.
- 7th RULE: Fights will go on as long as they have to.
- 8th RULE: If this is your first night at FIGHT CLUB, you HAVE to fight.
+ <strong>Não.</strong> Gemas são adquiridas exclusivamente através do uso da plataforma.
</StoreBody>
+ <StoreTopic>
+ Qual a vantagem de usar itens?
+ </StoreTopic>
+ <StoreBody>
+ Os itens são uma maneira de mostrar quem você é, quais os seus interesses e quais foram suas contribuições mais importantes. Nenhum item oferece funcionalidade a mais, de maneira que novos usuários não sofram desvantagem.
+ </StoreBody>
+ <StoreTopic>
+ Como usar
+ </StoreTopic>
+ <StoreBody>
+ As seções da loja dividem os itens por <strong>categoria</strong>.
+ <ul>
+ <li>
+ Itens adquiridos <strong>somente por conquistas</strong> não aparecem
+ na loja (exceto pelos que você já tem);
+ </li>
+ <li>
+ Outros itens podem ser comprados (usando gemas), usados (usar uma borda de avatar, por exemplo) ou tirados (se estiverem sendo usados).
+ </li>
+ </ul>
+ </StoreBody>
+ <h4>
+ Boas compras!
+ </h4>
</CardContent>
</Card>
</Grid>
diff --git a/src/Components/TabPanels/TabPanelStatusEConquistas.js b/src/Components/TabPanels/TabPanelStatusEConquistas.js
index 9b41ad4faeabbf006cca38986d251c5129d025d9..67eeaa52441dd54934a1d1fabd5a77293e87c8e4 100644
--- a/src/Components/TabPanels/TabPanelStatusEConquistas.js
+++ b/src/Components/TabPanels/TabPanelStatusEConquistas.js
@@ -27,7 +27,7 @@ export default function TabPanelStatusEConquistas (props) {
axios.all(
['xp_to_next_lvl', 'percent_to_next_level', 'points', 'xp', 'get_level',
'completed_achievements'].map((r) => {
- return axios.get(apiUrl + '/' + r + '/' + state.currentUser.id);
+ return axios.get(apiUrl + '/' r + '?id=' + state.currentUser.id);
})).then(axios.spread((xp_to_next_lvl, percent_to_next_level, points,
xp, level, completed_achievements) => {
this.setXpToNextLevel(xp_to_next_lvl);
diff --git a/src/Pages/ItemStore.js b/src/Pages/ItemStore.js
index 92d3865724c1656ac49d01e7fdbe801e4ed281be..0487644e38c7988c326324524aae251757127d0a 100644
--- a/src/Pages/ItemStore.js
+++ b/src/Pages/ItemStore.js
@@ -30,10 +30,17 @@ import {apiUrl} from '../env';
const SectionTitle = styled.h3`
font-weight: 100;
+ margin-bottom: 0;
`
+
+const StoreDivider = styled.hr`
+ width: 50px;
+ margin-left: 0;
+`
+
const StoreSection = styled.div`
font-size: 1.5em;
- margin-top: 20px;
+ margin-top: 60px;
margin-bottom: 20px;
`
@@ -49,17 +56,18 @@ export default function ItemStoreContainer (props) {
return axios.get(apiUrl + '/' + 'user_items/index?q={"item_type":'
+ r + ', "op": "none", "unlock_rule": "purchase"}');
})).then(axios.spread((avatar, card, cover, badge) => {
- setAvatarFrames(avatar);
- setCardFrames(card);
- setCoverFrames(cover);
- setBadges(badge);
+ console.log([avatar, card, cover, badge]);
+ //setAvatarFrames(avatar);
+ //setCardFrames(card);
+ //setCoverFrames(cover);
+ //setBadges(badge);
}));
}, [])
var items = [
{
src: "https://upload.wikimedia.org/wikipedia/en/9/90/The_DuckDuckGo_Duck.png",
- action: "equip",
+ action: "buy",
name: "Avatar um",
description: "Descrição | Descrição"
}
@@ -83,18 +91,25 @@ export default function ItemStoreContainer (props) {
</Grid>
<StoreSection>
<SectionTitle>Bordas de avatar</SectionTitle>
+ <StoreDivider/>
<ItemCarousel items={items}/>
</StoreSection>
+
<StoreSection>
<SectionTitle>Insígnias</SectionTitle>
+ <StoreDivider/>
<ItemCarousel items={items}/>
</StoreSection>
+
<StoreSection>
<SectionTitle>Bordas de card</SectionTitle>
+ <StoreDivider/>
<ItemCarousel items={items}/>
</StoreSection>
+
<StoreSection>
<SectionTitle>Bordas de capa de perfil</SectionTitle>
+ <StoreDivider/>
<ItemCarousel items={items}/>
</StoreSection>
</Container>