196 lines
11 KiB
TypeScript
196 lines
11 KiB
TypeScript
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Input } from "@/components/ui/input"
|
|
import { DatePicker } from "@/components/module/date-picker"
|
|
import Backdrop from "@/components/module/backdrop"
|
|
import { CreatePricePlanPayload } from "../../data/repository"
|
|
import { format } from "date-fns"
|
|
import pricePlanFormStore from "../../store/form-store"
|
|
import { observer } from "mobx-react-lite"
|
|
|
|
interface ModalCreatePriceplanProps {
|
|
ppTypes: Array<{ [key: string]: string }>
|
|
serviceTypes: Array<{ [key: string]: string }>
|
|
onOpenChange: (open: boolean) => void
|
|
onConfirm: (payload: CreatePricePlanPayload) => void
|
|
}
|
|
|
|
const ModalCreatePriceplan = observer(({
|
|
ppTypes,
|
|
serviceTypes,
|
|
onOpenChange,
|
|
onConfirm
|
|
}: ModalCreatePriceplanProps) => {
|
|
|
|
return (
|
|
<Backdrop isOpen={pricePlanFormStore.getIsOpen()} onClose={() => onOpenChange(false)}>
|
|
<Dialog open={pricePlanFormStore.getIsOpen()} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-4xl" style={{ boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px" }}>
|
|
<DialogHeader>
|
|
<DialogTitle>New Price Plan</DialogTitle>
|
|
<DialogDescription></DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<form className="mt-4">
|
|
<section>
|
|
<h3>Basic Information</h3>
|
|
<div className="mt-4 px-4 grid grid-cols-2 gap-2">
|
|
<div>
|
|
<Label htmlFor="priceplan-type">Price Plan Type*</Label>
|
|
<Select value={pricePlanFormStore.getOfferType()} onValueChange={(val) => pricePlanFormStore.setOfferType(val)}>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue id="priceplan-type" placeholder="Select priceplan type" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{ppTypes.map((item) => (
|
|
<SelectItem key={item.id} value={item.id}>
|
|
{item.pricePlanTypeName}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="priceplan-name">Price Plan Name*</Label>
|
|
<Input
|
|
id="priceplan-name"
|
|
placeholder="Input name"
|
|
value={pricePlanFormStore.getOfferName()}
|
|
onChange={(event) => pricePlanFormStore.setOfferName(event.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="priceplan-code">Price Plan Code</Label>
|
|
<Input
|
|
id="priceplan-code"
|
|
placeholder="Input code"
|
|
value={pricePlanFormStore.getPricePlanCode()}
|
|
onChange={(event) => pricePlanFormStore.setPricePlanCode(event.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="service-type">Service Type</Label>
|
|
<Select
|
|
value={pricePlanFormStore.getServiceType()}
|
|
onValueChange={(val) => pricePlanFormStore.setServiceType(val)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue id="service-type" placeholder="Select service type" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{serviceTypes.map((item: any) => (
|
|
<SelectItem key={item.id} value={item.id.toString()}>
|
|
{item.servTypeName}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Label>Valid Period*</Label>
|
|
<div className="flex gap-2">
|
|
<DatePicker
|
|
placeholder="Start Date"
|
|
value={pricePlanFormStore.getBaseValidPeriod()}
|
|
onChange={(date) => pricePlanFormStore.setBaseValidPeriod(date)}
|
|
/>
|
|
<span>-</span>
|
|
<DatePicker placeholder="End Date" value={undefined} />
|
|
</div>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<Label>Remarks</Label>
|
|
<Input
|
|
placeholder="Input notes"
|
|
value={pricePlanFormStore.getRemarks()}
|
|
onChange={(event) => pricePlanFormStore.setRemarks(event.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mt-4">
|
|
<h3>Version Information</h3>
|
|
<div className="mt-4 px-4 grid grid-cols-2 gap-2">
|
|
<div>
|
|
<Label>Valid Period*</Label>
|
|
<div className="flex gap-2">
|
|
<DatePicker
|
|
placeholder="Start Date"
|
|
value={pricePlanFormStore.getVersionValidPeriod()}
|
|
onChange={(date) => pricePlanFormStore.setVersionValidPeriod(date)}
|
|
/>
|
|
<span>-</span>
|
|
<DatePicker placeholder="End Date" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="source-from">Source From</Label>
|
|
<Select
|
|
value={pricePlanFormStore.getSourceFrom()}
|
|
onValueChange={(val) => pricePlanFormStore.setSourceFrom(val)}
|
|
>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue id="source-from" placeholder="Select source from" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="1">Share From</SelectItem>
|
|
<SelectItem value="2">Copy From</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="copy-from">Copy From</Label>
|
|
<Select
|
|
value={pricePlanFormStore.getCopyFrom()}
|
|
onValueChange={(val) => pricePlanFormStore.setCopyFrom(val)}
|
|
>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue id="copy-from" placeholder="Select copy from" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="1">Option 1</SelectItem>
|
|
<SelectItem value="2">Option 2</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</form>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => {
|
|
onOpenChange(false)
|
|
pricePlanFormStore.resetForm
|
|
}}>Cancel</Button>
|
|
<Button
|
|
disabled={!pricePlanFormStore.getOfferType() || !pricePlanFormStore.getOfferName() || !pricePlanFormStore.getBaseValidPeriod() || !pricePlanFormStore.getVersionValidPeriod()}
|
|
onClick={() => onConfirm({
|
|
offerName: pricePlanFormStore.getOfferName(),
|
|
offerType: pricePlanFormStore.getOfferType(),
|
|
pricePlanCode: pricePlanFormStore.getPricePlanCode(),
|
|
serviceType: +pricePlanFormStore.getServiceType(),
|
|
baseValidPeriod: format(pricePlanFormStore.getBaseValidPeriod()!, "yyyy-MM-dd"),
|
|
remarks: pricePlanFormStore.getRemarks(),
|
|
versionValidPeriod: format(pricePlanFormStore.getVersionValidPeriod()!, "yyyy-MM-dd")
|
|
})}
|
|
>
|
|
Submit
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</Backdrop>
|
|
)
|
|
})
|
|
|
|
export default ModalCreatePriceplan |