working on car card & car view BS

2026-01-05 23:30:03 +03:00
parent c8bf8ff621
commit 20ef4f416c
14 changed files with 658 additions and 29 deletions
--- a/src/pages/checkout/components/CarBottomSheet.tsx
+++ b/src/pages/checkout/components/CarBottomSheet.tsx
@@ -0,0 +1,112 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet";
+import { colors } from "ThemeConstants";
+import { Button, Card } from "antd";
+import CarRatioGroups from "./CarRatioGroups/CarRatioGroups";
+import PlusIcon from "components/Icons/PlusIcon";
+import styles from "../checkout.module.css";
+
+interface CarBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function CarBottomSheet({ isOpen, onClose }: CarBottomSheetProps) {
+  const { t } = useTranslation();
+  const [value, setValue] = useState<string | null>(null);
+
+  const handleCancel = () => {
+    setValue(null);
+    onClose();
+  };
+
+  const handleSave = () => {
+    onClose();
+    setValue(value);
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={handleCancel}
+      title={t("checkout.addCarDetails")}
+      initialSnap={1}
+      height={575}
+      snapPoints={[575]}
+    >
+      <Card title={t("car.selectCar")} style={{ marginTop: 24 }}>
+        <CarRatioGroups
+          options={[
+            {
+              label: "",
+              value: "7CAB1",
+              price: "7CAB1",
+            },
+            {
+              label: "Buy one get one free, Min order : SDG 5,000",
+              value: "7CAB2",
+              price: "7CAB2",
+            },
+            {
+              label: "30% off on select items, Min order : SDG 15,000",
+              value: "7CABO",
+              price: "7CABO",
+            },
+          ]}
+          value={value || undefined}
+          onRatioClick={(value) => setValue(value)}
+          optionsStyle={{
+            fontSize: 12,
+            fontWeight: 500,
+            color: "#5F6C7B",
+          }}
+          valueStyle={{
+            fontSize: 12,
+            fontWeight: 500,
+            color: colors.primary,
+          }}
+        />
+        <Button
+          style={{
+            fontWeight: 600,
+            fontStyle: "SemiBold",
+            fontSize: 14,
+            lineHeight: "140%",
+            letterSpacing: 0,
+            width: "100%",
+            color: "#5F6C7B",
+            marginTop: 16,
+          }}
+          onClick={handleSave}
+          disabled={!value}
+          icon={<PlusIcon color="#5F6C7B" dimension="16" className={styles.plusIcon} />}
+        >
+          {t("car.addCar")}
+        </Button>
+      </Card>
+
+      <div
+        style={{
+          display: "flex",
+          gap: 12,
+          marginTop: 20,
+        }}
+      >
+        <Button
+          type="primary"
+          style={{
+            flex: 1,
+            boxShadow: "none",
+            height: 48,
+            width: "100%",
+          }}
+          onClick={handleSave}
+          disabled={!value}
+        >
+          {t("checkout.save")}
+        </Button>
+      </div>
+    </ProBottomSheet>
+  );
+}