fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working on delivery flow

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-11-02 19:54:38 +03:00
parent 9a6ba5cf75
commit b2c00ee27e
2 changed files with 129 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/components/ProPhoneInput.tsx
View File

@@ -22,56 +22,89 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({ phone, setPhone }) =>
label={t("login.phone")}
rules={[
{ required: true, message: "" },
{ type: "number", message: "" },
{
validator: (_, value) => {
if (!value || value.length <= 3) {
return Promise.reject(new Error(""));
}
return Promise.resolve();
},
},
]}
normalize={(value) => {
if (value && setPhone) {
setPhone(value);
}
return value;
}}
>
<div className="pro-phone-input">
<PhoneInput
country={"om"}
inputStyle={{
borderRadius: 1000,
height: 50,
width: "100%",
color: themeName === "light" ? "#000" : "#FFF",
backgroundColor: themeName === "light" ? "#FFF" : ProBlack1,
textAlign: isRTL ? "right" : "left",
direction: isRTL ? "rtl" : "ltr",
paddingLeft: "50px",
paddingRight: "50px",
borderColor: themeName === "light" ? "#d9d9d9" : "#363636",
}}
placeholder={t("login.mobileNumber")}
value={phone}
buttonStyle={{
backgroundColor: "transparent",
border: 0,
borderLeft: "1px solid #363636",
borderRadius: 0,
position: "relative",
...(isRTL && {
top: -25,
right: 25,
}),
...(!isRTL && {
top: -25,
}),
}}
onBlur={(e) => setPhone(e.target.value)}
autocompleteSearch
inputProps={{
id: "phone", // Required for accessibility & autofill
name: "phone",
required: true,
autoFocus: false,
autoComplete: "tel",
type: "tel",
inputMode: "numeric",
pattern: "[0-9]*",
}}
/>
</div>
<PhoneInputWrapper
phone={phone}
themeName={themeName}
isRTL={isRTL}
placeholder={t("login.mobileNumber")}
/>
</Form.Item>
);
};
const PhoneInputWrapper = ({ phone, themeName, isRTL, placeholder, value, onChange }: {
phone: string;
themeName: string;
isRTL: boolean;
placeholder: string;
value?: string;
onChange?: (value: string) => void;
}) => {
return (
<div className="pro-phone-input">
<PhoneInput
country={"om"}
inputStyle={{
borderRadius: 1000,
height: 50,
width: "100%",
color: themeName === "light" ? "#000" : "#FFF",
backgroundColor: themeName === "light" ? "#FFF" : ProBlack1,
textAlign: isRTL ? "right" : "left",
direction: isRTL ? "rtl" : "ltr",
paddingLeft: "50px",
paddingRight: "50px",
borderColor: themeName === "light" ? "#d9d9d9" : "#363636",
}}
placeholder={placeholder}
value={value || phone}
onChange={(value) => {
onChange?.(value);
}}
buttonStyle={{
backgroundColor: "transparent",
border: 0,
borderLeft: "1px solid #363636",
borderRadius: 0,
position: "relative",
...(isRTL && {
top: -25,
right: 25,
}),
...(!isRTL && {
top: -25,
}),
}}
autocompleteSearch
inputProps={{
id: "phone", // Required for accessibility & autofill
name: "phone",
required: true,
autoFocus: false,
autoComplete: "tel",
type: "tel",
inputMode: "numeric",
pattern: "[0-9]*",
}}
/>
</div>
);
};
export default ProPhoneInput;

52
src/pages/checkout/hooks/useOrder.ts
View File

@@ -34,6 +34,7 @@ export default function useOrder() {
officeDetails,
orderType,
giftDetails,
location,
} = useAppSelector(selectCart);
const highestLoyaltyItem = useAppSelector(selectHighestPricedLoyaltyItem);
const { useLoyaltyPoints } = useAppSelector(selectCart);
@@ -42,13 +43,24 @@ export default function useOrder() {
const [createOrder] = useCreateOrderMutation();
const getDeliveryMethod = useCallback(() => {
if (orderType === OrderType.Delivery) return 1;
if (orderType === OrderType.Pickup) return 2;
if (orderType === OrderType.DineIn) return 3;
if (orderType === OrderType.Gift) return 10;
if (orderType === OrderType.ScheduledOrder) return 9;
if (orderType === OrderType.ToRoom) return 5;
if (orderType === OrderType.ToOffice) return 4;
return undefined;
}, [orderType]);
const handleCreateOrder = useCallback(() => {
createOrder({
phone: mobilenumber || phone || giftDetails?.senderPhone,
couponID: coupon,
discountAmount: 0,
comment: specialRequest,
delivery_method: "3",
delivery_method: getDeliveryMethod(),
timeslot: "",
table_id: tables[0],
deliveryType: orderType,
@@ -73,6 +85,11 @@ export default function useOrder() {
use_loylaty: useLoyaltyPoints && highestLoyaltyItem ? 1 : 0,
useWallet: 0,
tip,
userCoordinates:
location?.lat && location?.lng
? `${location?.lat},${location?.lng}`
: "",
delivery_address: location?.address,
...(orderType === OrderType.Gift
? {
receiverName: giftDetails?.receiverName,
@@ -106,6 +123,37 @@ export default function useOrder() {
.catch((error: any) => {
console.error("Create Order failed:", error);
});
}, [createOrder, mobilenumber, phone, giftDetails?.senderPhone, giftDetails?.receiverName, giftDetails?.receiverPhone, giftDetails?.message, giftDetails?.isSecret, giftDetails?.senderEmail, giftDetails?.senderName, coupon, specialRequest, tables, orderType, restaurantID, items, officeDetails?.officeNo, user_uuid, estimateTime, orderPrice, useLoyaltyPoints, highestLoyaltyItem, tip, t, navigate, subdomain, dispatch]);
}, [
createOrder,
mobilenumber,
phone,
giftDetails?.senderPhone,
giftDetails?.receiverName,
giftDetails?.receiverPhone,
giftDetails?.message,
giftDetails?.isSecret,
giftDetails?.senderEmail,
giftDetails?.senderName,
coupon,
specialRequest,
tables,
orderType,
restaurantID,
items,
officeDetails?.officeNo,
user_uuid,
estimateTime,
orderPrice,
useLoyaltyPoints,
highestLoyaltyItem,
tip,
location?.lat,
location?.lng,
location?.address,
t,
navigate,
subdomain,
dispatch,
]);
return { handleCreateOrder };
}