gift: fix flow and update antd element

src/components/CustomBottomSheet/GiftBottomSheet.tsx

@@ -110,7 +110,7 @@ export function GiftBottomSheet({
 
         <ProPhoneInput
           propName="senderPhone"
-          label={t("address.receiverPhone")}
+          label={t("address.senderPhone")}
         />
 
         <Form.Item

src/components/OrderSummary/OrderSummary.tsx

@@ -43,7 +43,7 @@ export default function OrderSummary() {
       <Card className={`${styles.orderSummary}`}>
         <ProTitle style={{ fontSize: 18 }}>{t("cart.orderSummary")}</ProTitle>
         <Divider style={{ margin: "15px 0 15px 0" }} />
-        <Space direction="vertical" style={{ width: "100%" }}>
+        <Space orientation="vertical" style={{ width: "100%" }}>
           <div className={styles.summaryRow}>
             <ProText type="secondary">{t("cart.basketTotal")}</ProText>
             <ArabicPrice price={subtotal} />

src/components/PaymentMethods/PaymentMethods.tsx

@@ -88,7 +88,7 @@ const PaymentMethods = () => {
           }}
           size="large"
         >
-          <Space direction="vertical" style={{ width: "100%" }}>
+          <Space orientation="vertical" style={{ width: "100%" }}>
             {options.map((option) => (
               <div key={option.value}>
                 <Radio

src/layouts/app/HeaderMenuDrawer.tsx

@@ -69,7 +69,6 @@ export default function HeaderMenuDrawer() {
         maskClosable={false}
         onClose={closeMobileMenu}
         open={mobileMenuOpen}
-        width={isMobile ? "50%" : "25%"}
         styles={{
           body: {
           padding: 0,
@@ -80,6 +79,9 @@ export default function HeaderMenuDrawer() {
               themeName === "dark" ? "#374151" : "#e5e7eb"
             }`,
           },
+          wrapper: {
+            width: isMobile ? "50%" : "25%",
+          },
         }}
         closeIcon={null}
       >

src/pages/checkout/components/GiftCard.tsx

@@ -15,8 +15,6 @@ export function GiftCard() {
   return (
     <>
       <ProInputCard title={t("address.giftDetails")}>
-      
-
         <ProPhoneInput
           propName="receiverPhone"
           label={t("address.receiverPhone")}
@@ -36,9 +34,9 @@ export function GiftCard() {
             }}
             rows={2}
             autoFocus={false}
-          value={order?.senderName}
+            value={order?.message}
             onChange={(e) => {
-            dispatch(updateOrder({ ...order, senderName: e.target.value }));
+              dispatch(updateOrder({ ...order, message: e.target.value }));
             }}
           />
         </Form.Item>
@@ -57,16 +55,20 @@ export function GiftCard() {
               height: 50,
             }}
             autoFocus={false}
-          value={order?.senderPhone}
+            value={order?.senderName}
             onChange={(e) => {
-            dispatch(updateOrder({ ...order, senderPhone: e.target.value }));
+              dispatch(updateOrder({ ...order, senderName: e.target.value }));
             }}
           />
         </Form.Item>
 
         <ProPhoneInput
           propName="senderPhone"
-        label={t("address.receiverPhone")}
+          label={t("address.senderPhone")}
+          value={order?.senderPhone}
+          onChange={(e) => {
+            dispatch(updateOrder({ ...order, senderPhone: e }));
+          }}
         />
 
         <Form.Item
@@ -90,11 +92,7 @@ export function GiftCard() {
           />
         </Form.Item>
 
-      <Form.Item
+        <Form.Item name="isSecret" colon={false}>
-        name="isSecret"
-        rules={[{ required: true, message: "" }]}
-        colon={false}
-      >
           <Checkbox
             style={{
               fontSize: 14,