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

2025-12-02 01:51:14 +03:00
parent cf5babeaa5
commit 2af2c34826
8 changed files with 266 additions and 43 deletions
--- a/src/pages/checkout/components/GiftCard.tsx
+++ b/src/pages/checkout/components/GiftCard.tsx
@@ -0,0 +1,114 @@
+import { Checkbox, Form, Input } from "antd";
+import ProInputCard from "components/ProInputCard/ProInputCard";
+import ProPhoneInput from "components/ProPhoneInput";
+import ProText from "components/ProText";
+import { selectCart, updateOrder } from "features/order/orderSlice";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+
+const { TextArea } = Input;
+
+export function GiftCard() {
+  const { t } = useTranslation();
+  const { order } = useAppSelector(selectCart);
+  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}
+          onChange={(e) => {
+            dispatch(updateOrder({ ...order, senderName: 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?.senderPhone}
+          onChange={(e) => {
+            dispatch(updateOrder({ ...order, senderPhone: e.target.value }));
+          }}
+        />
+      </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 }));
+          }}
+        >
+          <ProText>{t("address.keepMyNameSecret")}</ProText>
+        </Checkbox>
+      </Form.Item>
+    </ProInputCard>
+    </>
+  );
+}