Skip to content
This repository has been archived by the owner on Jul 9, 2024. It is now read-only.

Feature/donate page #24

Closed
wants to merge 11 commits into from
Prev Previous commit
Next Next commit
enhance & fixing donate page
  • Loading branch information
Aldiwildan77 committed Jan 5, 2022
commit 578f135e248b9aae2d664079bc30098a7e0d8fcf
12 changes: 9 additions & 3 deletions components/BaseComponents/RupiahFormat/index.jsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,22 @@
import { Text } from '@chakra-ui/react';
import NumberFormat from 'react-number-format';

export default function RupiahFormat(props) {
export default function RupiahFormat({ value, fontWeight, ...rest }) {
return (
<NumberFormat
value={props.value}
{...rest}
value={value}
displayType={'text'}
thousandSeparator={'.'}
prefix={'Rp '}
decimalSeparator={','}
decimalScale={0}
fixedDecimalScale={true}
fontSize={['sm', 'md']}
renderText={(value) => (
<Text fontWeight={fontWeight} fontSize={['sm', 'md']} color='white'>
{value}
</Text>
)}
/>
);
}
8 changes: 7 additions & 1 deletion components/DonatePage/DonateFinish/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,13 @@ export default function DonateFinish({ isOpen, onClose, ...props }) {
sistem memverifikasi pembayaranmu dan kode CC mu akan dikirim
otomatis oleh sistem pada email mu.
</Text>
<ChromaButton as='a' href='/' width='100%' types={typesList.primary}>
<ChromaButton
as='a'
href='/'
width='100%'
types={typesList.primary}
mt='4'
>
Tutup
</ChromaButton>
</ModalBody>
Expand Down
77 changes: 44 additions & 33 deletions components/DonatePage/DonateForm/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,11 @@ import {
NumberInputStepper,
NumberIncrementStepper,
NumberDecrementStepper,
Button,
Select,
Flex,
Spacer,
Text,
Divider,
Box,
} from '@chakra-ui/react';
import Axios from 'axios';
import { useEffect, useState, useRef, useContext } from 'react';
Expand All @@ -25,6 +24,7 @@ import RupiahFormat from '../../BaseComponents/RupiahFormat';
import * as gtag from '../../../lib/gtag';
import { ChromaButton, typesList } from '../../BaseComponents/ChromaButton';
import { DonateContext } from '../../../context/donate';
import { EMAIL_REGEX_PATTERN } from '../../../utils/constant';

export default function DonateForm() {
const [isAlertShown, setIsAlertShown] = useState(false);
Expand All @@ -48,6 +48,11 @@ export default function DonateForm() {
const maxDonationAmount = 2000;
const minDonationAmount = 10;

const onEmailChangeValidator = (email) => {
const pattern = new RegExp(EMAIL_REGEX_PATTERN);
return pattern.test(email);
};

const onFormDonationSubmit = (e) => {
e && e.preventDefault();
recaptchaRef.current.execute();
Expand Down Expand Up @@ -103,8 +108,8 @@ export default function DonateForm() {
const email = e.target.value;
setEmail(email);

if (email.length > 0) {
if (localStorage.getItem('username')) setIsSubmitButtonAllowed(false);
if (email.length > 0 && onEmailChangeValidator(email) && username) {
setIsSubmitButtonAllowed(false);
} else {
setIsSubmitButtonAllowed(true);
}
Expand Down Expand Up @@ -196,6 +201,7 @@ export default function DonateForm() {
onChange={handleEmailChange}
fontSize={['sm', 'md']}
backgroundColor='#24242980'
_focus={{ outline: 'none' }}
/>
</Flex>
</FormControl>
Expand All @@ -211,13 +217,16 @@ export default function DonateForm() {
fontSize={['sm', 'md']}
backgroundColor='#24242980'
>
<NumberInputField fontSize={['sm', 'md']} />
<NumberInputField
fontSize={['sm', 'md']}
_focus={{ outline: 'none' }}
/>
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
<FormHelperText>
<FormHelperText color='whiteAlpha.600'>
* Jumlah pembelian minimum CC adalah 10
</FormHelperText>
</FormControl>
Expand All @@ -229,6 +238,7 @@ export default function DonateForm() {
onChange={(e) => handlePaymentChange(e)}
fontSize={['sm', 'md']}
backgroundColor='#24242980'
_focus={{ outline: 'none' }}
>
{paymentList.map((payment, i) => (
<option
Expand All @@ -242,7 +252,7 @@ export default function DonateForm() {
</option>
))}
</Select>
<FormHelperText>
<FormHelperText color='whiteAlpha.600'>
* Metode pembayaran telah diurutkan berdasarkan biaya admin terendah
</FormHelperText>
</FormControl>
Expand All @@ -264,17 +274,17 @@ export default function DonateForm() {
fontSize={['md', 'lg']}
>
<Flex>
<Text>Subtotal</Text>
<Text fontWeight='light'>Sub Total</Text>
<Spacer />
<RupiahFormat value={subTotal} />
<RupiahFormat value={subTotal} fontWeight='light' />
</Flex>
<Flex>
<Text>Fee</Text>
<Text fontWeight='light'>Fee</Text>
<Spacer />
<RupiahFormat value={totalFee} />
<RupiahFormat value={totalFee} fontWeight='light' />
</Flex>
</Flex>
<Divider mt='4' />
<Box mt='4' />
<Flex
w='100%'
color='white'
Expand All @@ -295,27 +305,28 @@ export default function DonateForm() {
sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
onChange={onReCAPTCHAChange}
/>
<ChromaButton
types={typesList.primary}
width='100%'
type='submit'
isLoading={isSubmitButtonLoading}
fontSize={['sm', 'md']}
onClick={onFormDonationSubmit}
disabled={isSubmitButtonAllowed}
>
Bayar
</ChromaButton>
<ChromaButton
types={typesList.link}
as='a'
href='/wiki/donasi/new'
target='_blank'
width='100%'
mt='4'
>
Butuh Bantuan?
</ChromaButton>
<Flex w='100%' justifyContent='space-between' direction='column'>
<ChromaButton
types={typesList.primary}
type='submit'
isLoading={isSubmitButtonLoading}
fontSize={['sm', 'md']}
onSubmit={onFormDonationSubmit}
disabled={isSubmitButtonAllowed}
>
Bayar
</ChromaButton>
<ChromaButton
types={typesList.link}
as='a'
href='/wiki/donasi/new'
target='_blank'
mt='2'
padding='4'
>
Butuh Bantuan?
</ChromaButton>
</Flex>
</form>
</>
);
Expand Down
10 changes: 5 additions & 5 deletions components/DonatePage/DonateModalUsername/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@ const stateTypes = {
const DonateModalUsername = ({ parentTake, ...props }) => {
const [alertMessage, setAlertMessage] = useState(stateMessages.info.message);
const [alertType, setAlertType] = useState(stateTypes.info);
const [isModalShown, setIsModalShown] = useState(true);
const { username, setUsername } = useContext(DonateContext);
const { username, setUsername, modalUsernameShown, setModalUsernameShown } =
useContext(DonateContext);

const handleOnChangeUsername = (e) => {
setUsername(e.target.value);
Expand Down Expand Up @@ -96,7 +96,7 @@ const DonateModalUsername = ({ parentTake, ...props }) => {
} else {
setAlertType(stateTypes.warning);
setAlertMessage(result.data.message);
setIsModalShown(false);
setModalUsernameShown(false);
setUsername(username);
}
} catch (error) {
Expand All @@ -109,7 +109,7 @@ const DonateModalUsername = ({ parentTake, ...props }) => {
<>
<Modal
size='xl'
isOpen={isModalShown}
isOpen={modalUsernameShown}
isCentered
motionPreset='slideInBottom'
>
Expand Down Expand Up @@ -142,7 +142,7 @@ const DonateModalUsername = ({ parentTake, ...props }) => {
/>
</FormControl>
</ModalBody>
<ModalFooter mt='-4'>
<ModalFooter mb='2'>
<ChromaButton
width='100%'
types={typesList.primary}
Expand Down
15 changes: 1 addition & 14 deletions components/DonatePage/DonateTab/index.jsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,4 @@
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalBody,
ModalCloseButton,
Tabs,
TabList,
TabPanels,
Tab,
TabPanel,
Text,
} from '@chakra-ui/react';
import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react';
import React, { useState } from 'react';

import DonateForm from '../DonateForm';
Expand Down
7 changes: 6 additions & 1 deletion context/donate.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,14 @@ const DonateContext = createContext();

const DonateProvider = ({ children }) => {
const [username, setUsername] = useState('');
const [modalUsernameShown, setModalUsernameShown] = useState(true);

const values = {
username, setUsername, modalUsernameShown, setModalUsernameShown
};

return (
<DonateContext.Provider value={{ username, setUsername }}>
<DonateContext.Provider value={values}>
{children}
</DonateContext.Provider>
);
Expand Down
4 changes: 4 additions & 0 deletions pages/api/donate.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ export default async function handler(req, res) {
return res.status(404).json({ message: 'Not found' });
}
try {
if (!username || !email) {
return res.status(400).json({ message: 'Sistem mendeteksi username atau email kosong, silahkan muat halaman ini kembali.' });
}

const resultCaptcha = await axios({
url: `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.RECAPTCHA_SECRET_KEY}&response=${captchaCode}`,
method: 'POST',
Expand Down
4 changes: 1 addition & 3 deletions pages/donate.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,10 @@ import { DonateProvider } from '../context/donate';
import DonateDescription from '../components/DonatePage/DonateDescription';

const Donate = () => {
const [modalUsernameShown, setModalUsernameShown] = useState(true);

return (
<>
<DonateProvider>
{modalUsernameShown && <DonateModalUsername />}
<DonateModalUsername />
<FloatingActionButton>
<NavigationSection />
<Flex color='white' bg='#15151F'>
Expand Down
50 changes: 1 addition & 49 deletions utils/constant.js
Original file line number Diff line number Diff line change
@@ -1,56 +1,8 @@
import { FaDiscord, FaPlay, FaPoll, FaAward, FaDonate } from 'react-icons/fa';

export const LIST_URL = {
STATUS: 'https://api.mcsrvstat.us/2/mc.chroma-gaming.xyz',
DISCORD: 'https://discord.chroma-gaming.xyz',
VOTE: 'https://minecraft-mp.com/server/268676/vote/',
WIKI: '/wiki',
};

export const ICONS = [
{
text: 'Discord',
id: 'discord',
url: LIST_URL.DISCORD,
target: '_blank',
key: 'link-introduction-discord',
content: <FaDiscord />,
events: {},
},
{
text: 'Donasi',
id: 'donate',
url: '#',
target: '_blank',
key: 'link-introduction-donate',
content: <FaDonate />,
events: {},
},
{
text: 'Play',
id: 'play',
url: '#',
target: '_self',
key: 'link-introduction-play',
content: <FaPlay />,
events: {},
},
{
text: 'Vote',
id: 'vote',
url: LIST_URL.VOTE,
target: '_blank',
key: 'link-introduction-vote',
content: <FaPoll />,
events: {},
},
{
text: 'Wiki',
id: 'wiki',
url: LIST_URL.WIKI,
target: '_blank',
key: 'link-introduction-vote-reward',
content: <FaAward />,
events: {},
},
];
export const EMAIL_REGEX_PATTERN = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i;