150 lines
3.9 KiB
TypeScript
150 lines
3.9 KiB
TypeScript
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";
|
|
import { AddCarBottomSheet } from "components/CustomBottomSheet/AddCarBottomSheet";
|
|
import { updatePlateCar } from "features/order/orderSlice";
|
|
import { useAppDispatch } from "redux/hooks";
|
|
|
|
interface CarBottomSheetProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function CarBottomSheet({ isOpen, onClose }: CarBottomSheetProps) {
|
|
const { t } = useTranslation();
|
|
const [value, setValue] = useState<string | null>(null);
|
|
const [isAddCarOpen, setIsAddCarOpen] = useState(false);
|
|
const dispatch = useAppDispatch();
|
|
|
|
const handleCancel = () => {
|
|
setValue(null);
|
|
onClose();
|
|
};
|
|
|
|
const handleSave = () => {
|
|
dispatch(updatePlateCar(value || ""));
|
|
onClose();
|
|
};
|
|
|
|
const handleAddCarClick = () => {
|
|
setIsAddCarOpen(true);
|
|
};
|
|
|
|
const handleAddCarClose = () => {
|
|
setIsAddCarOpen(false);
|
|
// Reopen CarBottomSheet when AddCarBottomSheet closes
|
|
// The parent component should handle reopening, but we'll ensure state is correct
|
|
};
|
|
|
|
const handleAddCarSave = () => {
|
|
dispatch(updatePlateCar(value || ""));
|
|
// After saving, close AddCarBottomSheet which will trigger reopening CarBottomSheet
|
|
setIsAddCarOpen(false);
|
|
};
|
|
|
|
// Show AddCarBottomSheet when it's open, otherwise show CarBottomSheet
|
|
if (isAddCarOpen) {
|
|
return (
|
|
<AddCarBottomSheet
|
|
isOpen={isAddCarOpen}
|
|
onClose={handleAddCarClose}
|
|
onSave={handleAddCarSave}
|
|
/>
|
|
);
|
|
}
|
|
|
|
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={handleAddCarClick}
|
|
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>
|
|
);
|
|
}
|