remove extra bottom sheet in checkout page make all them inside the page iteslef

src/components/InputCard.tsx

@@ -0,0 +1,43 @@
+import { Form, Input } from "antd";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import { updateOrder } from "features/order/orderSlice";
+import { useAppDispatch } from "redux/hooks";
+
+interface InputCardProps {
+  title: string;
+  name: string;
+  placeholder: string;
+  value: string;
+}
+
+export default function InputCard({
+  title,
+  name,
+  placeholder,
+  value,
+}: InputCardProps) {
+  const dispatch = useAppDispatch();
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(updateOrder({ [name]: e.target.value }));
+  };
+  return (
+    <>
+      <ProInputCard title={title} dividerStyle={{ margin: "5px 0 0 0" }}>
+        <Form.Item
+          label={title}
+          name={name}
+          style={{ position: "relative", top: -5 }}
+        >
+          <Input
+            placeholder={placeholder}
+            size="large"
+            autoFocus={false}
+            style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
+            value={value}
+            onChange={handleChange}
+          />
+        </Form.Item>
+      </ProInputCard>
+    </>
+  );
+}

src/components/ProPhoneInput.tsx

@@ -1,6 +1,5 @@
 import { Form } from "antd";
 import useFormInstance from "antd/es/form/hooks/useFormInstance";
-import { TitleProps } from "antd/es/typography/Title";
 import { PhoneNumberUtil } from "google-libphonenumber";
 import { FunctionComponent, useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -8,16 +7,20 @@ import PhoneInput from "react-phone-input-2";
 import { useAppSelector } from "redux/hooks";
 import { ProBlack1 } from "ThemeConstants";
 
-interface ProPhoneInput extends TitleProps {
+interface ProPhoneInput {
   propName?: string;
   label?: string;
   getValueCallback?: (value: string) => void;
+  value?: string;
+  onChange?: (value: string) => void;
 }
 
 const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
   propName,
   label,
   getValueCallback,
+  value,
+  onChange,
 }) => {
   const form = useFormInstance();
   const { t } = useTranslation();
@@ -51,8 +54,9 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
         onChange={(value) => {
           form.setFieldValue(propName, value);
           getValueCallback?.(value);
+          onChange?.(value);
         }}
-        phone={form.getFieldValue(propName)}
+        phone={value || form.getFieldValue(propName)}
         themeName={themeName}
         placeholder={t("login.mobileNumber")}
         propName={propName}