Fakultas Ilmu Komputer UI

Skip to content
GitLab
Commit 4b0f0c52 authored by Ilma Ainur Rohma's avatar Ilma Ainur Rohma
Browse files

Merge branch 'ilmarohma/35/redesign-detail-transaksi' into 'dev' 

PBI 12 : Redesign Detail Transaksi

Closes #35

See merge request !22
parents ec303d40 86af42d0
Pipeline #80341 passed with stages
in 4 minutes and 40 seconds
Expand all Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ 4b0f0c52
This diff is collapsed.
package.json
View file @ 4b0f0c52
......@@ -27,7 +27,8 @@
"react-moment": "^0.9.7",
"react-number-format": "^4.4.1",
"react-promise-tracker": "^2.1.0",
"react-toastify": "^7.0.3"
"react-toastify": "^7.0.3",
"reactstrap": "^8.9.0"
},
"scripts": {
"start": "cross-env REACT_APP_BASE_URL=$(grep REACT_APP_BASE_URL .env_var | cut -d '=' -f2) parcel public/index.html",
......@@ -80,8 +81,8 @@
"jest-fetch-mock": "^3.0.3",
"jest-sonar-reporter": "^2.0.0",
"mutationobserver-shim": "^0.3.5",
"parcel": "1.12.3",
"parcel-bundler": "1.12.3",
"parcel": "^2.0.0-beta.2",
"parcel-bundler": "^1.12.5",
"prettier": "^2.0.5",
"regenerator-runtime": "^0.13.5"
},
......
src/index.js
View file @ 4b0f0c52
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
src/page/transaksi/DetailTransaksi.jsx
View file @ 4b0f0c52
......@@ -3,8 +3,8 @@ import useFetchSingleData from "../../utils/useFetchSingleData";
import { css } from "@emotion/core";
import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import PhoneIcon from "@material-ui/icons/Phone";
import PhotoIcon from "@material-ui/icons/Photo";
import ContactsIcon from "@material-ui/icons/Contacts";
import ImageIcon from '@material-ui/icons/Image';
import LocationOnIcon from '@material-ui/icons/LocationOn';
import { Link, navigate } from "@reach/router";
import PersonIcon from "@material-ui/icons/Person";
import Table from "@material-ui/core/Table";
......@@ -23,9 +23,12 @@ import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import FormStatus from "./FormStatus";
import { Container, Row, Col } from 'reactstrap';
import "moment-timezone";
import Moment from "react-moment";
const DetailTransaksi = ({ idTransaksi }) => {
const url = `${process.env.REACT_APP_BASE_URL}/transactions/${idTransaksi}/`;
const [transaction, error] = useFetchSingleData(url);
......@@ -62,7 +65,6 @@ const DetailTransaksi = ({ idTransaksi }) => {
margin: 2rem 3rem 3rem 3rem;
flex-direction: column;
justify-content: space-around;
height: 125vh;
`}
>
{error && <ErrorDiv>Something error</ErrorDiv>}
......@@ -93,129 +95,225 @@ const DetailTransaksi = ({ idTransaksi }) => {
KELOLA TRANSAKSI
</div>
</div>
<div
css={css`
font-size: 1.5rem;
display: flex;
align-content: space-between;
`}
>
<div
css={css`
display: flex;
`}
>
<div
<br></br><br></br>
<Container>
<Row style={{paddingBottom:8}}>
<Col md="4">
<div
css={css`
margin-right: 1rem;
font-size: 1.5rem;
display: flex;
align-content: space-between;
font-weight: bold;
`}
>
Kode Transaksi
</div>
</Col>
<Col md="3">
<div
css={css`
margin-right: 1rem;
font-size: 1.5rem;
display: flex;
align-content: space-between;
font-weight: bold;
`}
>
<div>: {transaction.transaction_number}</div>
</div>
</Col>
<Col md="5">
{transaction.transaction_status !== "005" &&
transaction.transaction_status !== "006" &&
transaction.transaction_status !== "007" && (
<FormStatus
{...{
idTransaksi,
defaultStatus: transaction.transaction_status,
paymentMethod: transaction.payment_method,
}}
/>
)}
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="4">
<div
css={css`
margin-right: 1rem;
font-size: 1.5rem;
`}
>
Kode Transaksi:
Status
</div>
<div>{transaction.transaction_number}</div>
</div>
{transaction.transaction_status !== "005" &&
transaction.transaction_status !== "006" &&
transaction.transaction_status !== "007" && (
<FormStatus
{...{
idTransaksi,
defaultStatus: transaction.transaction_status,
paymentMethod: transaction.payment_method,
}}
/>
)}
</div>
<div
css={css`
font-size: 1.5rem;
display: flex;
`}
>
<div
css={css`
</Col>
<Col md="8">
<div
css={css`
margin-right: 1rem;
`}
>
Status:{" "}
</div>
<Status
label={transaction.readable_transaction_status}
status={transaction.transaction_status}
/>
</div>
<div
css={css`
font-size: 1.2rem;
display: flex;
`}
>
<div
css={css`
margin-right: 0.5rem;
`}
>
Tanggal Pembuatan:{" "}
</div>
<div>{<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={transaction.created_at} />}</div>
</div>
<div
css={css`
font-size: 1.2rem;
display: flex;
`}
>
<div
css={css`
margin-right: 0.5rem;
`}
>
Tanggal Update:{" "}
</div>
<div>{<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={transaction.updated_at} />}</div>
</div>
<div
css={css`
display: flex;
font-size: 1.2rem;
align-items: baseline;
`}
>
<PersonIcon style={{ color: "FFC80A" }} />
<Link to={`/pengguna/${transaction.user}`}>
{transaction.user_full_name} / {transaction.user_username}
</Link>
</div>
<div
css={css`
display: flex;
font-size: 1.2rem;
align-items: baseline;
`}
>
<PhoneIcon style={{ color: "FFC80A" }} />
<div>{transaction.user_phone_number}</div>
</div>
<div
css={css`
display: flex;
flex-direction: column;
`}
>
<div
css={css`
font-size: 1.2rem;
`}
>
<ContactsIcon style={{ color: "FFC80A", marginRight: "4px" }} />
{`${transaction.shipping_address},
RT ${transaction.shipping_neighborhood},
RW ${transaction.shipping_hamlet},
Kelurahan ${transaction.shipping_urban_village},
Kecamatan ${transaction.shipping_sub_district}`}
</div>
</div>
font-size: 1.5rem;
display: flex;
`}
> :{" "}
<Status
label={transaction.readable_transaction_status}
status={transaction.transaction_status}
/>
</div>
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="4">
<div
css={css`
font-size: 1.2rem;
margin-right: 0.5rem;
`}
>
Tanggal Pembuatan
</div>
</Col>
<Col md="8">
<div
css={css`
font-size: 1.2rem;
margin-right: 0.5rem;
`}
>
: {<Moment format={"DD MMMM YYYY HH:mm"} tz="Asia/Jakarta" date={transaction.created_at} />}
</div>
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="4">
<div
css={css`
font-size: 1.2rem;
margin-right: 0.5rem;
`}
>
Tanggal Pembaruan
</div>
</Col>
<Col md="8">
<div
css={css`
font-size: 1.2rem;
margin-right: 0.5rem;
`}
>
: {<Moment format={"DD MMMM YYYY HH:mm"} tz="Asia/Jakarta" date={transaction.updated_at} />}
</div>
</Col>
</Row> <br></br>
<Row style={{paddingBottom:8}}>
<Col>
<div
css={css`
margin-right: 1rem;
font-size: 1.5rem;
display: flex;
align-content: space-between;
font-weight: bold;
`}
>
Identitas Pembeli
</div>
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="1">
<div
css={css`
font-size: 1.2rem;
align-items: baseline;
`}
>
<PersonIcon style={{ color: "2C5EDD" }} />
</div>
</Col>
<Col md="11">
<div
css={css`
font-size: 1.2rem;
align-items: baseline;
`}
>
<Link to={`/pengguna/${transaction.user}`}>
{transaction.user_full_name} / {transaction.user_username}
</Link>
</div>
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="1">
<div
css={css`
font-size: 1.2rem;
align-items: baseline;
`}
>
<PhoneIcon style={{ color: "2C5EDD" }} />
</div>
</Col>
<Col md="11">
<div
css={css`
font-size: 1.2rem;
align-items: baseline;
`}
>
<div>{transaction.user_phone_number}</div>
</div>
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="1">
<div
css={css`
font-size: 1.2rem;
align-items: baseline;
`}
>
<LocationOnIcon style={{ color: "2C5EDD" }} />
</div>
</Col>
<Col md="11">
<div
css={css`
font-size: 1.2rem;
align-items: baseline;
`}
>
<div>
{`${transaction.shipping_address},
RT ${transaction.shipping_neighborhood},
RW ${transaction.shipping_hamlet},
Kelurahan ${transaction.shipping_urban_village},
Kecamatan ${transaction.shipping_sub_district}`}
</div>
</div>
</Col>
</Row> <br></br>
<Row style={{paddingBottom:8}}>
<Col>
<div
css={css`
margin-right: 1rem;
font-size: 1.5rem;
display: flex;
align-content: space-between;
font-weight: bold;
`}
>
Detail Pembayaran
</div>
</Col>
</Row>
</Container>
<br></br>
<TableContainer component={Paper}>
<Table aria-label="simple table">
<TableHead>
......@@ -270,133 +368,163 @@ const DetailTransaksi = ({ idTransaksi }) => {
</TableRow>
</TableBody>
</Table>
</TableContainer>
<div
css={css`
display: flex;
flex-direction: column;
`}
>
{" "}
<div
css={css`
font-size: 1.4rem;
font-weight: bold;
`}
>
Detail Pembayaran
</div>
</TableContainer> <br></br>
<Container>
{transaction.payment_method === "COD" && (
<div
css={css`
font-size: 1.3rem;
`}
>
Jenis Pembayaran: Cash On Delivery
<Row style={{paddingBottom:8}}>
<Col md="4">
Jenis Pembayaran:
</Col>
<Col md="8">
: Cash On Delivery
</Col>
</Row>
</div>
)}
{transaction.payment_method === "TRF" && (
<div
css={css`
font-size: 1.3rem;
`}
css={css`
font-size: 1.3rem;
`}
>
Jenis Pembayaran: Transfer
{transaction.proof_of_payment === null ? (
<div>
{transaction.proof_of_payment === null ? (
<div>User belum mengirimkan bukti pembayaran</div>
) : (
<div
<Row style={{paddingBottom:8}}>
<Col md="3">
Jenis Pembayaran
</Col>
<Col md="6">
: Transfer
</Col>
</Row>
<Row><Col style={{color:"red"}}>
<div
css={css`
display: flex;
flex-direction: column;
`}
font-size: 1rem;
`}
>
User belum mengirimkan bukti pembayaran
</div>
</Col></Row>
</div>
):(
<div>
<Row style={{paddingBottom:8}}>
<Col md="4">
Jenis Pembayaran
</Col>
<Col md="6">
: Transfer
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="4">
<div
css={css`
margin-right: 1rem;
font-size: 1.2rem;
`}
>
Nama Pengirim
</div>
</Col>
<Col md="6">
<div
css={css`
display: flex;
margin-right: 1rem;
font-size: 1.2rem;
align-items: baseline;
`}
>
<div
css={css`
margin-right: 1rem;
`}
>
Nama Pengirim:{" "}
</div>
<div>{transaction.user_bank_account_name}</div>
: {transaction.user_bank_account_name}
</div>
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="4">
<div
css={css`
display: flex;
margin-right: 1rem;
font-size: 1.2rem;
align-items: baseline;
`}
>
<div
css={css`
margin-right: 1rem;
`}
>
Nama Bank Pengirim:{" "}
</div>
<div>{transaction.user_bank_account_name}</div>
Nama Bank Pengirim
</div>
</Col>
<Col md="6">
<div
css={css`
display: flex;
margin-right: 1rem;
font-size: 1.2rem;
align-items: baseline;
`}
>
<div
css={css`
margin-right: 1rem;
`}
>
Nama Bank dan Pemilik Rekening Tujuan:
</div>
<div>
{transaction.transfer_destination_bank_name} -{" "}
: {transaction.user_bank_name}
</div>
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="4">
<div
css={css`
margin-right: 1rem;
font-size: 1.2rem;
`}
>
Rekening Tujuan
</div>
</Col>
<Col md="6">
<div
css={css`
margin-right: 1rem;
font-size: 1.2rem;
`}
>
: {transaction.transfer_destination_bank_name} -{" "}
{transaction.transfer_destination_bank_account_name}
</div>
</div>
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="4">
<div
css={css`
display: flex;
margin-right: 1rem;
font-size: 1.2rem;
align-items: baseline;
`}
>