remove extra bottom sheet in checkout page make all them inside the page iteslef
This commit is contained in:
37
src/pages/checkout/components/CarPlateCard.tsx
Normal file
37
src/pages/checkout/components/CarPlateCard.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import { Form, Input } from "antd";
|
||||
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
|
||||
import { updatePlateCar } from "features/order/orderSlice";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
||||
|
||||
export default function CarPlateCard() {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const plateCar = useAppSelector((state) => state.order.plateCar);
|
||||
return (
|
||||
<>
|
||||
<ProInputCard
|
||||
title={t("cart.plateNumber")}
|
||||
dividerStyle={{ margin: "5px 0 0 0" }}
|
||||
>
|
||||
<Form.Item
|
||||
label={t("cart.plateNumber")}
|
||||
name="plateNumber"
|
||||
style={{ position: "relative", top: -5 }}
|
||||
>
|
||||
<Input
|
||||
placeholder={t("cart.plateNumber")}
|
||||
size="large"
|
||||
autoFocus={false}
|
||||
style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
|
||||
value={plateCar}
|
||||
onChange={(e) => {
|
||||
dispatch(updatePlateCar(e.target.value));
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</ProInputCard>
|
||||
</>
|
||||
);
|
||||
}
|
||||
114
src/pages/checkout/components/GiftCard.tsx
Normal file
114
src/pages/checkout/components/GiftCard.tsx
Normal file
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -13,6 +13,7 @@ import { useCreateOrderMutation } from "redux/api/others";
|
||||
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
||||
import { PAYMENT_CONFIRMATION_URL } from "utils/constants";
|
||||
import { Customer } from "../../otp/types";
|
||||
import { Variant } from "utils/types/appTypes";
|
||||
|
||||
export default function useOrder() {
|
||||
const dispatch = useAppDispatch();
|
||||
@@ -31,15 +32,14 @@ export default function useOrder() {
|
||||
specialRequest,
|
||||
phone,
|
||||
estimateTime,
|
||||
officeDetails,
|
||||
orderType,
|
||||
giftDetails,
|
||||
location,
|
||||
discount,
|
||||
plateCar,
|
||||
pickupTime,
|
||||
pickupDate,
|
||||
pickupType,
|
||||
order,
|
||||
} = useAppSelector(selectCart);
|
||||
const highestLoyaltyItem = useAppSelector(selectHighestPricedLoyaltyItem);
|
||||
const { useLoyaltyPoints } = useAppSelector(selectCart);
|
||||
@@ -70,7 +70,7 @@ export default function useOrder() {
|
||||
});
|
||||
|
||||
createOrder({
|
||||
phone: mobilenumber || phone || giftDetails?.senderPhone,
|
||||
phone: mobilenumber || phone || order?.senderPhone,
|
||||
comment: specialRequest,
|
||||
delivery_method: getDeliveryMethod(),
|
||||
timeslot: "",
|
||||
@@ -85,9 +85,10 @@ export default function useOrder() {
|
||||
extras: i.extras?.map((e) => e.id) || [],
|
||||
extrasgroup: i.extrasgroup || [],
|
||||
order_item_comment: i.comment || "",
|
||||
variant: i.variant?.id || "",
|
||||
variant: (i.variant as Variant)?.id || "",
|
||||
})),
|
||||
office_no: officeDetails?.officeNo || "",
|
||||
office_no: order?.officeNumber || "",
|
||||
room_no: order?.roomNumber || "",
|
||||
vatvalue: 0,
|
||||
...(discount.isDiscount ? { couponID: coupon } : {}),
|
||||
...(discount.isGift ? { discountGiftCode: coupon } : {}),
|
||||
@@ -111,13 +112,13 @@ export default function useOrder() {
|
||||
delivery_address: location?.address,
|
||||
...(orderType === OrderType.Gift
|
||||
? {
|
||||
receiverName: giftDetails?.receiverName,
|
||||
receiverPhone: giftDetails?.receiverPhone,
|
||||
specialMessage: giftDetails?.message,
|
||||
keepNameSecret: giftDetails?.isSecret,
|
||||
senderEmail: giftDetails?.senderEmail,
|
||||
senderPhone: giftDetails?.senderPhone,
|
||||
senderName: giftDetails?.senderName,
|
||||
receiverName: order?.receiverName,
|
||||
receiverPhone: order?.receiverPhone,
|
||||
specialMessage: order?.message,
|
||||
keepNameSecret: order?.isSecret,
|
||||
senderEmail: order?.senderEmail,
|
||||
senderPhone: order?.senderPhone,
|
||||
senderName: order?.senderName,
|
||||
dineType: orderType,
|
||||
}
|
||||
: {}),
|
||||
@@ -166,20 +167,13 @@ export default function useOrder() {
|
||||
createOrder,
|
||||
mobilenumber,
|
||||
phone,
|
||||
giftDetails?.senderPhone,
|
||||
giftDetails?.receiverName,
|
||||
giftDetails?.receiverPhone,
|
||||
giftDetails?.message,
|
||||
giftDetails?.isSecret,
|
||||
giftDetails?.senderEmail,
|
||||
giftDetails?.senderName,
|
||||
specialRequest,
|
||||
getDeliveryMethod,
|
||||
tables,
|
||||
orderType,
|
||||
restaurantID,
|
||||
items,
|
||||
officeDetails?.officeNo,
|
||||
order,
|
||||
discount.isDiscount,
|
||||
discount.isGift,
|
||||
discount.value,
|
||||
|
||||
@@ -10,14 +10,15 @@ import { AddressSummary } from "./components/AddressSummary";
|
||||
import BriefMenu from "./components/BriefMenu";
|
||||
import CheckoutButton from "./components/CheckoutButton";
|
||||
import { GiftDetails } from "./components/GiftDetails";
|
||||
import { OfficeDetails } from "./components/OfficeDetails";
|
||||
import { RoomDetails } from "./components/RoomDetails";
|
||||
import PhoneCard from "./components/phoneCard";
|
||||
import InputCard from "components/InputCard";
|
||||
import { OrderType } from "./hooks/types";
|
||||
import { GiftCard } from "./components/GiftCard";
|
||||
|
||||
export default function CheckoutPage() {
|
||||
const { t } = useTranslation();
|
||||
const [form] = Form.useForm();
|
||||
const { phone } = useAppSelector(selectCart);
|
||||
const { phone, order, orderType } = useAppSelector(selectCart);
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
@@ -31,11 +32,28 @@ export default function CheckoutPage() {
|
||||
<ProHeader>{t("checkout.title")}</ProHeader>
|
||||
<Layout.Content className={styles.checkoutContainer}>
|
||||
<AddressSummary />
|
||||
<RoomDetails />
|
||||
<OfficeDetails />
|
||||
<GiftDetails />
|
||||
<BriefMenu />
|
||||
<PhoneCard />
|
||||
{orderType === OrderType.ToRoom && (
|
||||
<InputCard
|
||||
title={t("address.roomNumber")}
|
||||
name="roomNumber"
|
||||
placeholder={t("address.roomNumber")}
|
||||
value={order?.roomNumber}
|
||||
/>
|
||||
)}
|
||||
{orderType === OrderType.ToOffice && (
|
||||
<InputCard
|
||||
title={t("address.officeNumber")}
|
||||
name="officeNumber"
|
||||
placeholder={t("address.officeNumber")}
|
||||
value={order?.officeNumber}
|
||||
/>
|
||||
)}
|
||||
{orderType === OrderType.Gift && <GiftCard />}
|
||||
{/* <RoomDetails />
|
||||
<OfficeDetails /> */}
|
||||
{/* <GiftDetails /> */}
|
||||
<BriefMenu />
|
||||
<PaymentMethods />
|
||||
<OrderSummary />
|
||||
</Layout.Content>
|
||||
|
||||
Reference in New Issue
Block a user