94 lines
3.8 KiB
TypeScript
94 lines
3.8 KiB
TypeScript
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 { observer } from "mobx-react-lite";
|
|
|
|
|
|
const getStepStyle = (active: boolean) => ({
|
|
borderColor: active ? "#00879E" : "#D1D5DB", // tailwind: gray-300
|
|
textColor: active ? "#00879E" : "#9CA3AF", // tailwind: gray-400
|
|
bgColor: active ? "#00879E" : "#D1D5DB",
|
|
iconText: active ? "text-[#00879E]" : "text-gray-400",
|
|
opacity: active ? "opacity-100" : "opacity-30"
|
|
});
|
|
|
|
interface Props {
|
|
mainState: PricePlanDetailState
|
|
formState: RatePlanFormState
|
|
}
|
|
|
|
const CreateRatePlan = observer(({
|
|
mainState,
|
|
formState
|
|
}: Props) => {
|
|
const isRatePlanActive = mainState.getFlow() >= 1;
|
|
const isPriceActive = mainState.getFlow() >= 2;
|
|
|
|
const ratePlanStyle = getStepStyle(isRatePlanActive);
|
|
const priceStyle = getStepStyle(isPriceActive);
|
|
|
|
return (
|
|
<>
|
|
<div className={`flex flex-col items-center text-center ${ratePlanStyle.opacity}`}>
|
|
<div
|
|
className="relative w-24 h-24 cursor-pointer rounded-full bg-white flex items-center justify-center"
|
|
style={{ borderWidth: "4px", borderColor: ratePlanStyle.borderColor }}
|
|
onClick={() => {
|
|
formState.setOpen(true)
|
|
}}
|
|
>
|
|
<svg
|
|
className={`w-10 h-10 ${ratePlanStyle.iconText}`}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path d="M4 4h16v16H4V4z" />
|
|
<path d="M8 8h8M8 12h8M8 16h8" />
|
|
</svg>
|
|
<span
|
|
className="absolute -top-2 -right-2 w-6 h-6 rounded-full text-white text-sm font-bold flex items-center justify-center"
|
|
style={{ backgroundColor: ratePlanStyle.bgColor }}
|
|
>
|
|
+
|
|
</span>
|
|
</div>
|
|
<span className={`mt-2 font-medium`} style={{ color: ratePlanStyle.textColor }}>
|
|
Rate Plan
|
|
</span>
|
|
</div>
|
|
|
|
<div className={`text-3xl`} style={{ color: isPriceActive ? "#00879E" : "#D1D5DB", opacity: isPriceActive ? 1 : 0.3 }}>
|
|
→
|
|
</div>
|
|
|
|
<div className={`flex flex-col items-center text-center ${priceStyle.opacity}`}>
|
|
<div
|
|
className="relative w-24 h-24 rounded-full bg-white flex items-center justify-center"
|
|
style={{ borderWidth: "4px", borderColor: priceStyle.borderColor }}
|
|
>
|
|
<svg
|
|
className={`w-10 h-10 ${priceStyle.iconText}`}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path d="M12 8c-2.21 0-4 1.79-4 4 0 1.84 1.28 3.39 3 3.87V18h2v-2.13c1.72-.48 3-2.03 3-3.87 0-2.21-1.79-4-4-4z" />
|
|
</svg>
|
|
<span
|
|
className="absolute -top-2 -right-2 w-6 h-6 rounded-full text-white text-sm font-bold flex items-center justify-center"
|
|
style={{ backgroundColor: priceStyle.bgColor }}
|
|
>
|
|
+
|
|
</span>
|
|
</div>
|
|
<span className={`mt-2 font-medium`} style={{ color: priceStyle.textColor }}>
|
|
Price
|
|
</span>
|
|
</div>
|
|
</>
|
|
);
|
|
})
|
|
|
|
export default CreateRatePlan |