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,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}
       >

src/pages/checkout/components/GiftCard.tsx

@@ -14,101 +14,99 @@ export function GiftCard() {
   const dispatch = useAppDispatch();
   return (
     <>
-    <ProInputCard title={t("address.giftDetails")}> 
+      <ProInputCard title={t("address.giftDetails")}>
-      
+        <ProPhoneInput
-
+          propName="receiverPhone"
-      <ProPhoneInput
+          label={t("address.receiverPhone")}
-        propName="receiverPhone"
+          value={order?.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}
           onChange={(e) => {
-            dispatch(updateOrder({ ...order, senderName: e.target.value }));
+            dispatch(updateOrder({ ...order, receiverPhone: e }));
           }}
         />
-      </Form.Item>
 
-      <Form.Item
+        <Form.Item name="message" label={t("address.message")}>
-        name="senderName"
+          <TextArea
-        label={t("address.senderName")}
+            placeholder={t("address.message")}
-        rules={[{ required: true, message: "" }]}
+            size="large"
-        colon={false}
+            style={{
-      >
+              fontSize: 14,
-        <Input
+              borderRadius: 10,
-          placeholder={t("address.senderName")}
+            }}
-          size="large"
+            rows={2}
-          style={{
+            autoFocus={false}
-            fontSize: 14,
+            value={order?.message}
-            height: 50,
+            onChange={(e) => {
-          }}
+              dispatch(updateOrder({ ...order, message: e.target.value }));
-          autoFocus={false}
+            }}
+          />
+        </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
+        <Form.Item
-        propName="senderPhone"
+          name="senderEmail"
-        label={t("address.receiverPhone")}
+          label={t("address.senderEmail")}
-      />
+          rules={[{ required: true, message: "" }]}
-
+          colon={false}
-      <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 }));
-          }}
         >
-          <ProText>{t("address.keepMyNameSecret")}</ProText>
+          <Input
-        </Checkbox>
+            placeholder={t("address.senderEmail")}
-      </Form.Item>
+            size="large"
-    </ProInputCard>
+            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>
     </>
   );
 }