122 lines
3.6 KiB
TypeScript
122 lines
3.6 KiB
TypeScript
import ProText from "components/ProText";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import BackIcon from "components/Icons/BackIcon";
|
|
import NextIcon from "components/Icons/NextIcon";
|
|
import CarIcon from "components/Icons/CarIcon";
|
|
import { Button, Card } from "antd";
|
|
import styles from "../checkout.module.css";
|
|
import { useState } from "react";
|
|
import { CarBottomSheet } from "./CarBottomSheet";
|
|
|
|
export function CarCard() {
|
|
const { t } = useTranslation();
|
|
const { isRTL } = useAppSelector((state) => state.locale);
|
|
const [isCarBottomSheetOpen, setIsCarBottomSheetOpen] = useState(false);
|
|
const { plateCar } = useAppSelector((state) => state.order);
|
|
|
|
return (
|
|
<>
|
|
<Card
|
|
onClick={() => {
|
|
setIsCarBottomSheetOpen(true);
|
|
}}
|
|
>
|
|
<div className={styles.carCard}>
|
|
<Button
|
|
shape="circle"
|
|
icon={<CarIcon />}
|
|
style={{
|
|
backgroundColor: "var(--background)",
|
|
border: "none",
|
|
width: 32,
|
|
height: 32,
|
|
minWidth: 32,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.1)",
|
|
}}
|
|
/>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 4,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<ProText
|
|
style={{
|
|
fontWeight: 500,
|
|
fontStyle: "Medium",
|
|
fontSize: 18,
|
|
lineHeight: "140%",
|
|
color: "#333333",
|
|
}}
|
|
>
|
|
{t("checkout.addCarDetails")}
|
|
</ProText>
|
|
|
|
{plateCar ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 10,
|
|
marginTop: 6,
|
|
}}
|
|
>
|
|
<ProText
|
|
style={{
|
|
fontWeight: 400,
|
|
fontStyle: "Regular",
|
|
fontSize: 16,
|
|
lineHeight: "140%",
|
|
color: "#777580",
|
|
}}
|
|
>{t("checkout.carPlateNumber")}:</ProText>
|
|
<div
|
|
style={{
|
|
backgroundColor: "#FFC600",
|
|
color: "#333333",
|
|
padding: "3px 14px",
|
|
borderRadius: "20px",
|
|
fontSize: 15,
|
|
fontWeight: 600,
|
|
fontStyle: "SemiBold",
|
|
letterSpacing: "0.8px",
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
boxShadow: "0 2px 6px rgba(255, 198, 0, 0.25)",
|
|
fontFamily: "monospace",
|
|
}}
|
|
>
|
|
{plateCar}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<ProText
|
|
style={{
|
|
fontWeight: 400,
|
|
fontStyle: "Regular",
|
|
fontSize: 16,
|
|
lineHeight: "140%",
|
|
color: "#777580",
|
|
}}
|
|
>
|
|
{t("checkout.soTheRestaurantCanRecognizeYourCarWhenYouArrive")}
|
|
</ProText>
|
|
)}
|
|
</div>
|
|
{isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
|
|
</div>
|
|
</Card>
|
|
<CarBottomSheet
|
|
isOpen={isCarBottomSheetOpen}
|
|
onClose={() => setIsCarBottomSheetOpen(false)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|