init project portal web

2025-04-15 13:56:54 +07:00
parent 9a25243035
commit 8b15dcebf8
122 changed files with 13965 additions and 1 deletions
--- a/lib/price-plan-detail/view/tab/usage-content/flow/create-rate-plan/index.tsx
+++ b/lib/price-plan-detail/view/tab/usage-content/flow/create-rate-plan/index.tsx
@ -0,0 +1,94 @@
+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