cart & checkout: apply validation based on required inputs in each service & add phone input in checkout page

src/pages/checkout/components/phoneCard.tsx

@@ -0,0 +1,27 @@
+import { Form, Input } from "antd";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import { selectCart, updatePhone } from "features/order/orderSlice";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+
+export default function PhoneCard() {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { phone } = useAppSelector(selectCart);
+  return (
+    <>
+      <ProInputCard title={t("checkout.phoneNumber")}>
+        <Form.Item name="phone" required rules={[{ required: true }]}>
+          <Input
+            placeholder={t("checkout.phoneNumber")}
+            size="large"
+            autoFocus={false}
+            style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
+            value={phone}
+            onChange={(e) => dispatch(updatePhone(e.target.value))}
+          />
+        </Form.Item>
+      </ProInputCard>
+    </>
+  );
+}