devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated the payment records screen for the corporate to make sure they can't see agent related stuff

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-01-09 17:26:37 +00:00
parent f8f8ee5e13
commit 271364a939
2 changed files with 95 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/PaymentAssetManager.tsx
View File

@@ -14,7 +14,6 @@ const PaymentAssetManager = (props: {
type: FilesStorage; type: FilesStorage;
reload: () => void; reload: () => void;
paymentId: string; paymentId: string;
canEdit: boolean;
}) => { }) => {
const {asset, permissions, type, paymentId} = props; const {asset, permissions, type, paymentId} = props;
@@ -122,14 +121,10 @@ const PaymentAssetManager = (props: {
return ( return (
<> <>
<BsDownload onClick={downloadAsset} /> <BsDownload onClick={downloadAsset} />
{props.canEdit && ( <BsArrowRepeat onClick={() => fileInputReplaceRef.current?.click()} />
<> <BsTrash onClick={deleteAsset} />
<BsArrowRepeat onClick={() => fileInputReplaceRef.current?.click()} /> {renderFileInput((e: Event) => handleFileChange(e, "patch"), fileInputReplaceRef)}
<BsTrash onClick={deleteAsset} /> {renderFileInput((e: Event) => handleFileChange(e, "post"), fileInputRef)}
{renderFileInput((e: Event) => handleFileChange(e, "patch"), fileInputReplaceRef)}
{renderFileInput((e: Event) => handleFileChange(e, "post"), fileInputRef)}
</>
)}
</> </>
); );
} }
@@ -137,7 +132,7 @@ const PaymentAssetManager = (props: {
return <span className="loading loading-infinity w-8" />; return <span className="loading loading-infinity w-8" />;
} }
return props.canEdit ? ( return permissions === "write" ? (
<> <>
<BsUpload onClick={() => fileInputRef.current?.click()} /> <BsUpload onClick={() => fileInputRef.current?.click()} />
{renderFileInput((e: Event) => handleFileChange(e, "post"), fileInputRef)} {renderFileInput((e: Event) => handleFileChange(e, "post"), fileInputRef)}

164
src/pages/payment-record.tsx
View File

@@ -139,7 +139,7 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
<div className="w-full grid grid-cols-5 gap-2"> <div className="w-full grid grid-cols-5 gap-2">
<Input name="paymentValue" onChange={() => {}} type="number" value={price} defaultValue={0} className="col-span-3" disabled /> <Input name="paymentValue" onChange={() => {}} type="number" value={price} defaultValue={0} className="col-span-3" disabled />
<Select <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" className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-mti-gray-platinum/40 text-mti-gray-dim cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
options={CURRENCIES.map(({label, currency}) => ({value: currency, label}))} options={CURRENCIES.map(({label, currency}) => ({value: currency, label}))}
defaultValue={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}} defaultValue={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
onChange={() => {}} onChange={() => {}}
@@ -346,6 +346,11 @@ export default function PaymentRecord() {
]); ]);
}, [corporateTransfer]); }, [corporateTransfer]);
useEffect(() => {
if (user && user.type === "corporate") return setCorporate(user);
if (user && user.type === "agent") return setAgent(user);
}, [user]);
const updatePayment = (payment: Payment, key: string, value: any) => { const updatePayment = (payment: Payment, key: string, value: any) => {
axios axios
.patch(`api/payments/${payment.id}`, {...payment, [key]: value}) .patch(`api/payments/${payment.id}`, {...payment, [key]: value})
@@ -390,7 +395,6 @@ export default function PaymentRecord() {
reload={reload} reload={reload}
permissions={info.row.original.isPaid ? "read" : "write"} permissions={info.row.original.isPaid ? "read" : "write"}
asset={info.row.original.corporateTransfer} asset={info.row.original.corporateTransfer}
canEdit={!info.row.original.isPaid}
paymentId={info.row.original.id} paymentId={info.row.original.id}
type="corporate" type="corporate"
/> />
@@ -410,7 +414,6 @@ export default function PaymentRecord() {
permissions="read" permissions="read"
asset={info.row.original.commissionTransfer} asset={info.row.original.commissionTransfer}
paymentId={info.row.original.id} paymentId={info.row.original.id}
canEdit={!info.row.original.isPaid}
type="commission" type="commission"
/> />
</div> </div>
@@ -429,7 +432,6 @@ export default function PaymentRecord() {
permissions="read" permissions="read"
asset={info.row.original.corporateTransfer} asset={info.row.original.corporateTransfer}
paymentId={info.row.original.id} paymentId={info.row.original.id}
canEdit={!info.row.original.isPaid}
type="corporate" type="corporate"
/> />
</div> </div>
@@ -445,7 +447,6 @@ export default function PaymentRecord() {
permissions={info.row.original.isPaid ? "read" : "write"} permissions={info.row.original.isPaid ? "read" : "write"}
asset={info.row.original.commissionTransfer} asset={info.row.original.commissionTransfer}
paymentId={info.row.original.id} paymentId={info.row.original.id}
canEdit={!info.row.original.isPaid}
type="commission" type="commission"
/> />
</div> </div>
@@ -464,7 +465,6 @@ export default function PaymentRecord() {
permissions="write" permissions="write"
asset={info.row.original.corporateTransfer} asset={info.row.original.corporateTransfer}
paymentId={info.row.original.id} paymentId={info.row.original.id}
canEdit={!info.row.original.isPaid}
type="corporate" type="corporate"
/> />
</div> </div>
@@ -480,7 +480,6 @@ export default function PaymentRecord() {
permissions="write" permissions="write"
asset={info.row.original.commissionTransfer} asset={info.row.original.commissionTransfer}
paymentId={info.row.original.id} paymentId={info.row.original.id}
canEdit={!info.row.original.isPaid}
type="commission" type="commission"
/> />
</div> </div>
@@ -635,7 +634,7 @@ export default function PaymentRecord() {
<Checkbox <Checkbox
isChecked={value} isChecked={value}
onChange={(e) => { onChange={(e) => {
if (user?.type === agent || value) return null; if (user?.type === agent || user?.type === "corporate" || value) return null;
if (!info.row.original.commissionTransfer || !info.row.original.corporateTransfer) if (!info.row.original.commissionTransfer || !info.row.original.corporateTransfer)
return alert("All files need to be uploaded to consider it paid!"); return alert("All files need to be uploaded to consider it paid!");
if (!confirm(`Are you sure you want to consider this payment paid?`)) return null; if (!confirm(`Are you sure you want to consider this payment paid?`)) return null;
@@ -798,17 +797,30 @@ export default function PaymentRecord() {
</div> </div>
)} )}
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full"> <div className={clsx("grid grid-cols-1 md:grid-cols-2 gap-8 w-full", user.type !== "corporate" && "lg:grid-cols-3")}>
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Corporate account *</label> <label className="font-normal text-base text-mti-gray-dim">Corporate account *</label>
<Select <Select
isClearable isClearable={user.type !== "corporate"}
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" className={clsx(
"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
user.type === "corporate" && "!bg-mti-gray-platinum/40 !text-mti-gray-dim !cursor-not-allowed",
)}
options={(users.filter((u) => u.type === "corporate") as CorporateUser[]).map((user) => ({ options={(users.filter((u) => u.type === "corporate") as CorporateUser[]).map((user) => ({
value: user.id, value: user.id,
meta: user, meta: user,
label: `${user.corporateInformation.companyInformation.name || user.name} - ${user.email}`, label: `${user.corporateInformation.companyInformation.name || user.name} - ${user.email}`,
}))} }))}
defaultValue={
user.type === "corporate"
? {
value: user.id,
meta: user,
label: `${user.corporateInformation.companyInformation.name || user.name} - ${user.email}`,
}
: undefined
}
isDisabled={user.type === "corporate"}
onChange={(value) => setCorporate((value as any)?.meta ?? undefined)} onChange={(value) => setCorporate((value as any)?.meta ?? undefined)}
styles={{ styles={{
control: (styles) => ({ control: (styles) => ({
@@ -828,40 +840,42 @@ export default function PaymentRecord() {
}} }}
/> />
</div> </div>
<div className="flex flex-col gap-3 w-full"> {user.type !== "corporate" && (
<label className="font-normal text-base text-mti-gray-dim">Country manager *</label> <div className="flex flex-col gap-3 w-full">
<Select <label className="font-normal text-base text-mti-gray-dim">Country manager *</label>
isClearable <Select
isDisabled={user.type === "agent"} isClearable
className={clsx( isDisabled={user.type === "agent"}
"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 rounded-full border border-mti-gray-platinum focus:outline-none", className={clsx(
user.type === "agent" ? "bg-mti-gray-platinum/40" : "bg-white", "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 rounded-full border border-mti-gray-platinum focus:outline-none",
)} user.type === "agent" ? "bg-mti-gray-platinum/40" : "bg-white",
options={(users.filter((u) => u.type === "agent") as AgentUser[]).map((user) => ({ )}
value: user.id, options={(users.filter((u) => u.type === "agent") as AgentUser[]).map((user) => ({
meta: user, value: user.id,
label: `${user.name} - ${user.email}`, meta: user,
}))} label: `${user.name} - ${user.email}`,
value={agent ? {value: agent?.id, label: `${agent.name} - ${agent.email}`} : undefined} }))}
onChange={(value) => setAgent(value !== null ? (value as any).meta : undefined)} value={agent ? {value: agent?.id, label: `${agent.name} - ${agent.email}`} : undefined}
styles={{ onChange={(value) => setAgent(value !== null ? (value as any).meta : undefined)}
control: (styles) => ({ styles={{
...styles, control: (styles) => ({
paddingLeft: "4px", ...styles,
border: "none", paddingLeft: "4px",
outline: "none", border: "none",
":focus": {
outline: "none", outline: "none",
}, ":focus": {
}), outline: "none",
option: (styles, state) => ({ },
...styles, }),
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white", option: (styles, state) => ({
color: state.isFocused ? "black" : styles.color, ...styles,
}), backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
}} color: state.isFocused ? "black" : styles.color,
/> }),
</div> }}
/>
</div>
)}
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Paid</label> <label className="font-normal text-base text-mti-gray-dim">Paid</label>
<Select <Select
@@ -917,37 +931,39 @@ export default function PaymentRecord() {
}} }}
/> />
</div> </div>
<div className="flex flex-col gap-3 w-full"> {user.type !== "corporate" && (
<label className="font-normal text-base text-mti-gray-dim">Commission transfer</label> <div className="flex flex-col gap-3 w-full">
<Select <label className="font-normal text-base text-mti-gray-dim">Commission transfer</label>
isClearable <Select
className={clsx( isClearable
"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 rounded-full border border-mti-gray-platinum focus:outline-none", className={clsx(
)} "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 rounded-full border border-mti-gray-platinum focus:outline-none",
options={IS_FILE_SUBMITTED_OPTIONS} )}
value={IS_FILE_SUBMITTED_OPTIONS.find((e) => e.value === commissionTransfer)} options={IS_FILE_SUBMITTED_OPTIONS}
onChange={(value) => { value={IS_FILE_SUBMITTED_OPTIONS.find((e) => e.value === commissionTransfer)}
if (value) return setCommissionTransfer(value.value); onChange={(value) => {
setCommissionTransfer(null); if (value) return setCommissionTransfer(value.value);
}} setCommissionTransfer(null);
styles={{ }}
control: (styles) => ({ styles={{
...styles, control: (styles) => ({
paddingLeft: "4px", ...styles,
border: "none", paddingLeft: "4px",
outline: "none", border: "none",
":focus": {
outline: "none", outline: "none",
}, ":focus": {
}), outline: "none",
option: (styles, state) => ({ },
...styles, }),
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white", option: (styles, state) => ({
color: state.isFocused ? "black" : styles.color, ...styles,
}), backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
}} color: state.isFocused ? "black" : styles.color,
/> }),
</div> }}
/>
</div>
)}
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Corporate transfer</label> <label className="font-normal text-base text-mti-gray-dim">Corporate transfer</label>
<Select <Select