import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import Button from "../../components/common/Button"; import { Input, Switch, Button as ButtonAnt } from "antd"; import { useAppStore } from "../../store/appStore"; import CartProductBooked from "./childs/CartProductBooked"; import { useCartStore } from "../../store/cartStore"; import { formatNumber } from "../../utils"; import { useUserStore } from "../../store/userStore"; import ShipmentFee from "./childs/ShipmentFee"; import PaymentMethod from "./childs/PaymentMethod"; import { useAccountStore } from "../../store/accountStore"; import { alerts } from "../../utils/alerts"; import OrderSuccess from "./childs/OrderSuccess"; import { IconCart, IconChevronLeft, IconChevronRight, IconDocument, IconFairTrade, IconHome, IconLocation, IconMoney, IconReceipt, } from "../../components/Icon"; import Header from "../../components/Header"; const ConfirmOrder = () => { const navigate = useNavigate(); const { appTheme } = useAppStore((state) => state); const { loading, loadingOrder, cartInfo, shipmentFee, paymentMethod, postListShipperFee, applyDiscount, isUseDiscountPrice, setIsUseDiscountPrice, customerInfo, setCustomerInfo, shipmentInfo, setShipmentInfo, paymentInfo, setPaymentInfo, getPaymentMethods, defaultAddress, setDefaultAddress, codeVoucher, orderCart, } = useCartStore((state) => ({ loading: state.loading, loadingOrder: state.loadingOrder, cartInfo: state.cartInfo, getCart: state.getCart, shipmentFee: state.shipmentFee, paymentMethod: state.paymentMethod, postListShipperFee: state.postListShipperFee, applyDiscount: state.applyDiscount, isUseDiscountPrice: state.isUseDiscountPrice, setIsUseDiscountPrice: state.setIsUseDiscountPrice, customerInfo: state.customerInfo, setCustomerInfo: state.setCustomerInfo, shipmentInfo: state.shipmentInfo, setShipmentInfo: state.setShipmentInfo, paymentInfo: state.paymentInfo, setPaymentInfo: state.setPaymentInfo, getPaymentMethods: state.getPaymentMethods, defaultAddress: state.defaultAddress, setDefaultAddress: state.setDefaultAddress, codeVoucher: state.codeVoucher, orderCart: state.orderCart, })); const { accountInfo } = useAccountStore((state) => state); const { total_final, total_points_can_use, bonus_points_amount_can_use, balance_agency_can_use, balance_collaborator_can_use, product_discount_amount, total_before_discount, total_after_discount, total_shipping_fee, } = cartInfo; const { badges, userAddress, getUserAddress } = useUserStore((state) => ({ badges: state.badges, userAddress: state.userAddress, getUserAddress: state.getUserAddress, })); const [isShowShipmentModal, setIsShowShipmentModal] = useState(false); const [isShowPaymentModal, setIsShowPaymentModal] = useState(false); const [isShowOrderSuccess, setIsShowOrderSuccess] = useState(false); //Handle Apply Discount const handleApplyDiscount = (type: string, value?: boolean | string) => { const info = { ...isUseDiscountPrice, }; info[type] = value; applyDiscount(info); }; const handleCheckbox = (checked: boolean, type: string) => { handleApplyDiscount(type, checked); setIsUseDiscountPrice({ [type]: checked }); }; //Handle Order Product const handleOrder = () => { if (!defaultAddress.id) { alerts.error("Bạn chưa chọn địa chỉ nhận hàng!"); return; } const orderInfo = { is_use_points: isUseDiscountPrice.is_use_points, is_use_balance_collaborator: isUseDiscountPrice.is_use_balance_collaborator, is_use_balance_agency: isUseDiscountPrice.is_use_balance_agency, customer_note: customerInfo.customer_note, code_voucher: codeVoucher, payment_method_id: paymentInfo.payment_method_id, payment_partner_id: paymentInfo.id, customer_address_id: defaultAddress.id, total_shipping_fee: shipmentInfo.fee, shipper_type: shipmentInfo.ship_speed_code, partner_shipper_id: shipmentInfo.partner_id, order_from: 0, from_pos: false, collaborator_by_customer_id: localStorage.getItem("cowc_id") ?? accountInfo.id, }; orderCart(orderInfo, () => { setIsShowOrderSuccess(true); }); }; //Handle Get Address Default const getAddressDefault = () => { const defaultAddressArr = userAddress.filter( (address) => address.is_default ); return defaultAddressArr; }; useEffect(() => { applyDiscount(); getUserAddress(); }, []); useEffect(() => { if (userAddress.length > 0) { const defaultAddressArr = getAddressDefault(); if (defaultAddressArr.length > 0) { if (Object.entries(defaultAddress).length === 0) { setDefaultAddress(defaultAddressArr[0]); postListShipperFee(defaultAddressArr[0].id); } else { postListShipperFee(defaultAddress.id); } } } }, [userAddress]); useEffect(() => { getPaymentMethods(); }, []); useEffect(() => { if ((paymentMethod ?? []).length > 0 && paymentInfo.id === "") { setPaymentInfo({ id: paymentMethod?.[0]?.id, name: paymentMethod?.[0]?.name, payment_method_id: paymentMethod?.[0]?.payment_method_id, }); } }, [paymentMethod]); useEffect(() => { if ((shipmentFee ?? []).length > 0 && shipmentInfo.partner_id === "") { setShipmentInfo({ ...shipmentFee?.[0]?.fee_with_type_ship?.[0], partner_id: shipmentFee?.[0]?.partner_id, name: shipmentFee?.[0]?.name, }); applyDiscount({ total_shipping_fee: shipmentFee?.[0]?.fee_with_type_ship?.[0].fee, }); } }, [shipmentFee]); return (
{ navigate("/cart"); }} >
navigate("/cart-address")} >

Địa chỉ nhận hàng:

{Object.entries(defaultAddress).length > 0 ? (
{`${ defaultAddress.name ? `${defaultAddress.name} | ` : "" }${defaultAddress.phone}`}
{defaultAddress.email ? defaultAddress.email : "Chưa có Email"}
{defaultAddress.address_detail ? defaultAddress.address_detail : "Chưa có địa chỉ chi tiết"}
{`${defaultAddress.wards_name}, ${defaultAddress.district_name}, ${defaultAddress.province_name}`}
) : (
Chưa chọn địa chỉ nhận hàng (nhấn để chọn)
)}
Các mặt hàng đã đặt:
{cartInfo.line_items?.map((item, index) => ( ))}
{userAddress.length > 0 && (
setIsShowShipmentModal(true)} >
Đơn vị vận chuyển ( Nhấn để chọn )
Vận chuyển nhanh
{shipmentInfo.name}
{shipmentInfo.fee > 0 ? formatNumber(shipmentInfo.fee) : 0}đ{" "}
{shipmentInfo.description}
)}
Tin nhắn: setCustomerInfo({ customer_note: e.target.value, }) } />
Tổng số tiền ({cartInfo.line_items?.length} sản phẩm):{" "} {total_before_discount > 0 ? formatNumber(total_before_discount) : 0}{" "} đ
navigate("/voucher-wallet")} >

Shop Voucher:

{codeVoucher !== "" ? codeVoucher : "chọn hoặc nhập mã"}

setIsShowPaymentModal(true)} >

Phương thức thanh toán

{paymentInfo.name}

{" "} Dùng{" "} {total_points_can_use ? formatNumber(total_points_can_use) : 0}{" "} xu

{" "} [ - {bonus_points_amount_can_use ? formatNumber(bonus_points_amount_can_use) : 0} đ]

handleCheckbox(checked, "is_use_points")} className="bg-[#00000073]" />
{badges.status_collaborator === 1 ? (

Dùng số dư CTV

[ - {balance_collaborator_can_use ? formatNumber(balance_collaborator_can_use) : 0} đ]

handleCheckbox(checked, "is_use_balance_collaborator") } className="bg-[#00000073]" />
) : null} {badges.status_agency === 1 ? (

Dùng số dư đại lý

[ - {balance_agency_can_use ? formatNumber(balance_agency_can_use) : 0} đ]

handleCheckbox(checked, "is_use_balance_agency") } className="bg-[#00000073]" />
) : null}

Tạm tính:

{" "} {total_before_discount > 0 ? formatNumber(total_before_discount) : 0}

Giảm giá sản phẩm:

{" "} -{" "} {product_discount_amount > 0 ? formatNumber(product_discount_amount) : 0}

Tổng tiền hàng:

{formatNumber(total_after_discount)}

Tổng tiền vận chuyển:

+ {formatNumber(total_shipping_fee)}

Tổng tiền thanh toán:

{total_final > 0 ? formatNumber(total_final) : 0}

Nhấn 'Đặt hàng' đồng nghĩa với việc bạn đồng ý tuân theo Điều khoản Ikitech

Tổng thanh toán

{total_final ? formatNumber(total_final) : 0} đ

{loadingOrder ? ( Đặt hàng ) : ( Đặt hàng )}
{isShowShipmentModal ? ( ) : null} {isShowPaymentModal ? ( ) : null} {isShowOrderSuccess ? ( ) : null}
); }; export default ConfirmOrder;