78 lines
3.6 KiB
TypeScript
78 lines
3.6 KiB
TypeScript
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/module/dropdown"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
|
|
import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state"
|
|
import { ChevronDown, Plus, Tickets } from "lucide-react"
|
|
import { observer } from "mobx-react-lite"
|
|
|
|
interface Props {
|
|
mainState: PricePlanDetailState
|
|
ratePlanFormState: RatePlanFormState
|
|
}
|
|
|
|
const RatePlanSection = observer(({ mainState, ratePlanFormState }: Props) => {
|
|
if (mainState.getFlow() < 2) return null
|
|
|
|
return (
|
|
<div className={`p-4 ${mainState.getFlow() ? "col-span-9" : "col-span-12"}`}>
|
|
<div className="flex justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Button className="h-6 rounded-sm" onClick={() => ratePlanFormState.setOpen(true)}>
|
|
<Plus />
|
|
<span>New Rate Plan</span>
|
|
</Button>
|
|
<Button className="h-6" variant="outline">
|
|
<Plus />
|
|
<span>New From Template</span>
|
|
</Button>
|
|
<Button className="h-6" variant="outline">
|
|
<Plus />
|
|
<span>Reservation Rule</span>
|
|
</Button>
|
|
</div>
|
|
<div>
|
|
<Input placeholder="Search Rate Plan Name" className="h-6 placeholder:text-zinc-400" />
|
|
</div>
|
|
</div>
|
|
<ul className="border border-primary mt-8">
|
|
{mainState.getRatePlans().map((item, idx) => (
|
|
<li key={item.getRatePlanName() + idx} className="px-4 py-2 border-b last:border-none">
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex items-center gap-3">
|
|
<Tickets />
|
|
<span>{item.getRatePlanName()}</span>
|
|
</div>
|
|
<ChevronDown
|
|
className={`cursor-pointer transition-transform duration-300 ${item.getIsExpand() ? 'rotate-180' : ''}`}
|
|
onClick={() => item.setIsExpand(!item.getIsExpand())}
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
className={`transition-all duration-300 overflow-hidden ${item.getIsExpand() ? 'max-h-40 opacity-100 mt-5' : 'max-h-0 opacity-0'
|
|
}`}
|
|
>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger>
|
|
<Button className="h-6">
|
|
<Plus />
|
|
Price Version
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuItem>New Version</DropdownMenuItem>
|
|
<DropdownMenuItem>New From Template</DropdownMenuItem>
|
|
<DropdownMenuItem>Shared From Template</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
</div>
|
|
)
|
|
})
|
|
|
|
export default RatePlanSection |