Continued creating the payment page
This commit is contained in:
Tiago Ribeiro
@@ -8,6 +8,7 @@ interface Props {
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
defaultValue?: string | number;
|
||||
value?: string | number;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
name: string;
|
||||
@@ -20,6 +21,7 @@ export default function Input({
|
||||
placeholder,
|
||||
name,
|
||||
required = false,
|
||||
value,
|
||||
defaultValue,
|
||||
className,
|
||||
roundness = "full",
|
||||
@@ -69,6 +71,7 @@ export default function Input({
|
||||
type={type}
|
||||
name={name}
|
||||
disabled={disabled}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
min={type === "number" ? 0 : undefined}
|
||||
placeholder={placeholder}
|
||||
|
||||
@@ -12,13 +12,16 @@ import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@t
|
||||
import {CURRENCIES} from "@/resources/paypal";
|
||||
import {BsTrash} from "react-icons/bs";
|
||||
import axios from "axios";
|
||||
import {useState} from "react";
|
||||
import {useEffect, useState} from "react";
|
||||
import {AgentUser, CorporateUser, User} from "@/interfaces/user";
|
||||
import UserCard from "@/components/UserCard";
|
||||
import Modal from "@/components/Modal";
|
||||
import clsx from "clsx";
|
||||
import useUsers from "@/hooks/useUsers";
|
||||
import Checkbox from "@/components/Low/Checkbox";
|
||||
import Button from "@/components/Low/Button";
|
||||
import Select from "react-select";
|
||||
import Input from "@/components/Low/Input";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
||||
const user = req.session.user;
|
||||
@@ -52,8 +55,126 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
||||
|
||||
const columnHelper = createColumnHelper<Payment>();
|
||||
|
||||
const PaymentCreator = () => {
|
||||
const [corporate, setCorporate] = useState<CorporateUser>();
|
||||
const [price, setPrice] = useState<number>(0);
|
||||
const [currency, setCurrency] = useState<string>("EUR");
|
||||
const [commission, setCommission] = useState<number>(0);
|
||||
const [referralAgent, setReferralAgent] = useState<AgentUser>();
|
||||
|
||||
const {users} = useUsers();
|
||||
|
||||
useEffect(() => {
|
||||
if (!corporate) return setReferralAgent(undefined);
|
||||
if (!corporate.corporateInformation?.referralAgent) return setReferralAgent(undefined);
|
||||
|
||||
const referralAgent = users.find((u) => u.id === corporate.corporateInformation.referralAgent);
|
||||
setReferralAgent(referralAgent as AgentUser | undefined);
|
||||
}, [corporate, users]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8">
|
||||
<h1 className="text-2xl font-semibold">New Payment</h1>
|
||||
<form className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Corporate account *</label>
|
||||
<Select
|
||||
className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
|
||||
options={(users.filter((u) => u.type === "corporate") as CorporateUser[]).map((user) => ({
|
||||
value: user.id,
|
||||
meta: user,
|
||||
label: `${user.corporateInformation.companyInformation.name} - ${user.email}`,
|
||||
}))}
|
||||
defaultValue={{value: "undefined", label: "Select an account"}}
|
||||
onChange={(value) => console.log((value as any)?.meta ?? undefined)}
|
||||
styles={{
|
||||
control: (styles) => ({
|
||||
...styles,
|
||||
paddingLeft: "4px",
|
||||
border: "none",
|
||||
outline: "none",
|
||||
":focus": {
|
||||
outline: "none",
|
||||
},
|
||||
}),
|
||||
option: (styles, state) => ({
|
||||
...styles,
|
||||
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
|
||||
color: state.isFocused ? "black" : styles.color,
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 w-full">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Price *</label>
|
||||
<div className="w-full grid grid-cols-5 gap-2">
|
||||
<Input
|
||||
name="paymentValue"
|
||||
onChange={(e) => setPrice(e ? parseInt(e) : 0)}
|
||||
type="number"
|
||||
defaultValue={0}
|
||||
className="col-span-3"
|
||||
/>
|
||||
<Select
|
||||
className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
|
||||
options={CURRENCIES.map(({label, currency}) => ({value: currency, label}))}
|
||||
defaultValue={{value: "EUR", label: "Euro"}}
|
||||
onChange={(value) => setCurrency(value?.value || "EUR")}
|
||||
styles={{
|
||||
control: (styles) => ({
|
||||
...styles,
|
||||
paddingLeft: "4px",
|
||||
border: "none",
|
||||
outline: "none",
|
||||
":focus": {
|
||||
outline: "none",
|
||||
},
|
||||
}),
|
||||
option: (styles, state) => ({
|
||||
...styles,
|
||||
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
|
||||
color: state.isFocused ? "black" : styles.color,
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 w-full">
|
||||
<div className="flex flex-col w-full gap-3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Commission *</label>
|
||||
<Input name="commission" onChange={(e) => setCommission(e ? parseInt(e) : 0)} type="number" defaultValue={0} />
|
||||
</div>
|
||||
<div className="flex flex-col w-full gap-3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Commission Value*</label>
|
||||
<Input
|
||||
name="commissionValue"
|
||||
value={`${(commission / 100) * price} ${CURRENCIES.find((c) => c.currency === currency)?.label}`}
|
||||
onChange={() => null}
|
||||
type="text"
|
||||
defaultValue={0}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col w-full gap-3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Country Manager *</label>
|
||||
<Input
|
||||
name="referralAgent"
|
||||
value={referralAgent ? `${referralAgent.name} - ${referralAgent.email}` : "No country manager"}
|
||||
onChange={() => null}
|
||||
type="text"
|
||||
defaultValue={"No country manager"}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function PaymentRecord() {
|
||||
const [selectedUser, setSelectedUser] = useState<User>();
|
||||
const [isCreatingPayment, setIsCreatingPayment] = useState(false);
|
||||
|
||||
const {user} = useUser({redirectTo: "/login"});
|
||||
const {users} = useUsers();
|
||||
@@ -193,6 +314,16 @@ export default function PaymentRecord() {
|
||||
</>
|
||||
</Modal>
|
||||
|
||||
<Modal isOpen={isCreatingPayment} onClose={() => setIsCreatingPayment(false)}>
|
||||
<PaymentCreator />
|
||||
</Modal>
|
||||
|
||||
<div className="w-full flex flex-end justify-between p-2">
|
||||
<h1 className="text-2xl font-semibold">Payment Record</h1>
|
||||
<Button className="w-full max-w-[200px]" variant="outline" onClick={() => setIsCreatingPayment(true)}>
|
||||
New Payment
|
||||
</Button>
|
||||
</div>
|
||||
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
|
||||
<thead>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
|
||||
Reference in New Issue
Block a user