hide unnecessary elements

src/pages/checkout/components/CarCard.tsx

@@ -13,11 +13,15 @@ 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);
-      }}>
+      <Card
+        onClick={() => {
+          setIsCarBottomSheetOpen(true);
+        }}
+      >
         <div className={styles.carCard}>
           <Button
             shape="circle"
@@ -54,17 +58,56 @@ export function CarCard() {
               {t("checkout.addCarDetails")}
             </ProText>
 
-            <ProText
-              style={{
-                fontWeight: 400,
-                fontStyle: "Regular",
-                fontSize: 16,
-                lineHeight: "140%",
-                color: "#777580",
-              }}
-            >
-              {t("checkout.soTheRestaurantCanRecognizeYourCarWhenYouArrive")}
-            </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>