From 58b225833939925ff7c507759194e10253b403a6 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Thu, 18 Dec 2025 22:49:56 +0300
Subject: [PATCH] gift: fix flow and update antd element

---
 .../CustomBottomSheet/GiftBottomSheet.tsx     |   2 +-
 src/components/OrderSummary/OrderSummary.tsx  |   2 +-
 .../PaymentMethods/PaymentMethods.tsx         |   2 +-
 src/layouts/app/HeaderMenuDrawer.tsx          |   6 +-
 src/pages/checkout/components/GiftCard.tsx    | 168 +++++++++---------
 5 files changed, 90 insertions(+), 90 deletions(-)

diff --git a/src/components/CustomBottomSheet/GiftBottomSheet.tsx b/src/components/CustomBottomSheet/GiftBottomSheet.tsx
index b98edd3..90c4d32 100644
--- a/src/components/CustomBottomSheet/GiftBottomSheet.tsx
+++ b/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
diff --git a/src/components/OrderSummary/OrderSummary.tsx b/src/components/OrderSummary/OrderSummary.tsx
index c123338..baa55ec 100644
--- a/src/components/OrderSummary/OrderSummary.tsx
+++ b/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} />
diff --git a/src/components/PaymentMethods/PaymentMethods.tsx b/src/components/PaymentMethods/PaymentMethods.tsx
index e5a82ad..86aa6cf 100644
--- a/src/components/PaymentMethods/PaymentMethods.tsx
+++ b/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
diff --git a/src/layouts/app/HeaderMenuDrawer.tsx b/src/layouts/app/HeaderMenuDrawer.tsx
index ec7e08a..d159ac0 100644
--- a/src/layouts/app/HeaderMenuDrawer.tsx
+++ b/src/layouts/app/HeaderMenuDrawer.tsx
@@ -69,10 +69,9 @@ export default function HeaderMenuDrawer() {
         maskClosable={false}
         onClose={closeMobileMenu}
         open={mobileMenuOpen}
-        width={isMobile ? "50%" : "25%"}
         styles={{
           body: {
-            padding: 0,
+          padding: 0,
           },
           header: {
             padding: "5px 24px",
@@ -80,6 +79,9 @@ export default function HeaderMenuDrawer() {
               themeName === "dark" ? "#374151" : "#e5e7eb"
             }`,
           },
+          wrapper: {
+            width: isMobile ? "50%" : "25%",
+          },
         }}
         closeIcon={null}
       >
diff --git a/src/pages/checkout/components/GiftCard.tsx b/src/pages/checkout/components/GiftCard.tsx
index 61c8726..6a89f6b 100644
--- a/src/pages/checkout/components/GiftCard.tsx
+++ b/src/pages/checkout/components/GiftCard.tsx
@@ -14,101 +14,99 @@ export function GiftCard() {
   const dispatch = useAppDispatch();
   return (
     <>
-    <ProInputCard title={t("address.giftDetails")}> 
-      
-
-      <ProPhoneInput
-        propName="receiverPhone"
-        label={t("address.receiverPhone")}
-        value={order?.receiverPhone}
-        onChange={(e) => {
-          dispatch(updateOrder({ ...order, receiverPhone: e }));
-        }}
-      />
-
-      <Form.Item name="message" label={t("address.message")}>
-        <TextArea
-          placeholder={t("address.message")}
-          size="large"
-          style={{
-            fontSize: 14,
-            borderRadius: 10,
-          }}
-          rows={2}
-          autoFocus={false}
-          value={order?.senderName}
+      <ProInputCard title={t("address.giftDetails")}>
+        <ProPhoneInput
+          propName="receiverPhone"
+          label={t("address.receiverPhone")}
+          value={order?.receiverPhone}
           onChange={(e) => {
-            dispatch(updateOrder({ ...order, senderName: e.target.value }));
+            dispatch(updateOrder({ ...order, receiverPhone: e }));
           }}
         />
-      </Form.Item>
 
-      <Form.Item
-        name="senderName"
-        label={t("address.senderName")}
-        rules={[{ required: true, message: "" }]}
-        colon={false}
-      >
-        <Input
-          placeholder={t("address.senderName")}
-          size="large"
-          style={{
-            fontSize: 14,
-            height: 50,
-          }}
-          autoFocus={false}
+        <Form.Item name="message" label={t("address.message")}>
+          <TextArea
+            placeholder={t("address.message")}
+            size="large"
+            style={{
+              fontSize: 14,
+              borderRadius: 10,
+            }}
+            rows={2}
+            autoFocus={false}
+            value={order?.message}
+            onChange={(e) => {
+              dispatch(updateOrder({ ...order, message: e.target.value }));
+            }}
+          />
+        </Form.Item>
+
+        <Form.Item
+          name="senderName"
+          label={t("address.senderName")}
+          rules={[{ required: true, message: "" }]}
+          colon={false}
+        >
+          <Input
+            placeholder={t("address.senderName")}
+            size="large"
+            style={{
+              fontSize: 14,
+              height: 50,
+            }}
+            autoFocus={false}
+            value={order?.senderName}
+            onChange={(e) => {
+              dispatch(updateOrder({ ...order, senderName: e.target.value }));
+            }}
+          />
+        </Form.Item>
+
+        <ProPhoneInput
+          propName="senderPhone"
+          label={t("address.senderPhone")}
           value={order?.senderPhone}
           onChange={(e) => {
-            dispatch(updateOrder({ ...order, senderPhone: e.target.value }));
+            dispatch(updateOrder({ ...order, senderPhone: e }));
           }}
         />
-      </Form.Item>
 
-      <ProPhoneInput
-        propName="senderPhone"
-        label={t("address.receiverPhone")}
-      />
-
-      <Form.Item
-        name="senderEmail"
-        label={t("address.senderEmail")}
-        rules={[{ required: true, message: "" }]}
-        colon={false}
-      >
-        <Input
-          placeholder={t("address.senderEmail")}
-          size="large"
-          style={{
-            fontSize: 14,
-            height: 50,
-          }}
-          autoFocus={false}
-          value={order?.senderEmail}
-          onChange={(e) => {
-            dispatch(updateOrder({ ...order, senderEmail: e.target.value }));
-          }}
-        />
-      </Form.Item>
-
-      <Form.Item
-        name="isSecret"
-        rules={[{ required: true, message: "" }]}
-        colon={false}
-      >
-        <Checkbox
-          style={{
-            fontSize: 14,
-          }}
-          autoFocus={false}
-          checked={order?.isSecret}
-          onChange={(e) => {
-            dispatch(updateOrder({ ...order, isSecret: e.target.checked }));
-          }}
+        <Form.Item
+          name="senderEmail"
+          label={t("address.senderEmail")}
+          rules={[{ required: true, message: "" }]}
+          colon={false}
         >
-          <ProText>{t("address.keepMyNameSecret")}</ProText>
-        </Checkbox>
-      </Form.Item>
-    </ProInputCard>
+          <Input
+            placeholder={t("address.senderEmail")}
+            size="large"
+            style={{
+              fontSize: 14,
+              height: 50,
+            }}
+            autoFocus={false}
+            value={order?.senderEmail}
+            onChange={(e) => {
+              dispatch(updateOrder({ ...order, senderEmail: e.target.value }));
+            }}
+          />
+        </Form.Item>
+
+        <Form.Item name="isSecret" colon={false}>
+          <Checkbox
+            style={{
+              fontSize: 14,
+            }}
+            autoFocus={false}
+            checked={order?.isSecret}
+            onChange={(e) => {
+              dispatch(updateOrder({ ...order, isSecret: e.target.checked }));
+            }}
+          >
+            <ProText>{t("address.keepMyNameSecret")}</ProText>
+          </Checkbox>
+        </Form.Item>
+      </ProInputCard>
     </>
   );
 }