|
|
import React, { useState, useEffect } from "react"; |
|
|
import { |
|
|
View, |
|
|
Text, |
|
|
TextInput, |
|
|
TouchableOpacity, |
|
|
ScrollView, |
|
|
Modal, |
|
|
StyleSheet, |
|
|
Platform, |
|
|
Image, |
|
|
} from "react-native"; |
|
|
import { Picker } from "@react-native-picker/picker"; |
|
|
import AddressIcon from "../../components/AddressIcon"; |
|
|
import BackIcon from "../../components/BackIcon"; |
|
|
import widthUtils from "../../utils/widthUtils"; |
|
|
import FileEditIcon from "../../components/FileEditIcon"; |
|
|
import PlusIcon from "../../components/PlusIconIcon"; |
|
|
import { |
|
|
addressApi, |
|
|
addressData, |
|
|
AddressItem, |
|
|
} from "../../services/api/addressApi"; |
|
|
import { useNavigation } from "@react-navigation/native"; |
|
|
import { NativeStackNavigationProp } from "@react-navigation/native-stack"; |
|
|
import { eventBus } from "../../utils/eventBus"; |
|
|
import LocationPinIcon from "../../components/LocationPinIcon"; |
|
|
import fontSize from "../../utils/fontsizeUtils"; |
|
|
import { |
|
|
ordersApi, |
|
|
OrderData, |
|
|
AddressDataItem, |
|
|
DomesticShippingFeeData, |
|
|
} from "../../services/api/orders"; |
|
|
import AsyncStorage from "@react-native-async-storage/async-storage"; |
|
|
|
|
|
export function Recipient({ |
|
|
route, |
|
|
}: { |
|
|
route: { params: { items: { cart_item_id: number }[] } }; |
|
|
}) { |
|
|
const navigation = useNavigation<NativeStackNavigationProp<any>>(); |
|
|
const [showModal, setShowModal] = useState(false); |
|
|
const [orderData, setOrderData] = useState<OrderData>(); |
|
|
const [formData, setFormData] = useState({ |
|
|
firstName: "", |
|
|
lastName: "", |
|
|
phone: "", |
|
|
whatsapp: "", |
|
|
sameAsPhone: false, |
|
|
setDefault: false, |
|
|
}); |
|
|
|
|
|
const [shippingMethod, setShippingMethod] = useState("sea"); |
|
|
const [warehouse, setWarehouse] = useState<number>(); |
|
|
const [arrival, setArrival] = useState("-"); |
|
|
const [addressList, setAddressList] = useState<AddressItem[]>(); |
|
|
const [defaultAddress, setDefaultAddress] = useState<addressData>(); |
|
|
const [addressId, setAddressId] = useState<number>(); |
|
|
const [freightForwarderAddress, setFreightForwarderAddress] = |
|
|
useState<AddressDataItem>(); |
|
|
const [domesticShippingFee, setDomesticShippingFee] = |
|
|
useState<DomesticShippingFeeData>(); |
|
|
const [tabs, setTabs] = useState([ |
|
|
{ |
|
|
id: "Online Payment", |
|
|
label: "Online Payment", |
|
|
}, |
|
|
{ |
|
|
id: "Offline Payment", |
|
|
label: "Offline Payment", |
|
|
}, |
|
|
]); |
|
|
const [currentTab, setCurrentTab] = useState("Online Paymen"); |
|
|
|
|
|
const getAddress = async () => { |
|
|
const response = await addressApi.addressesDefault(); |
|
|
setAddressId(response.address_id); |
|
|
setDefaultAddress(response); |
|
|
}; |
|
|
|
|
|
const getAddressList = async () => { |
|
|
const response = await addressApi.getAddress(); |
|
|
setAddressList(response.items); |
|
|
}; |
|
|
|
|
|
const getOrders = async () => { |
|
|
const country = (await AsyncStorage.getItem("@selected_country")) as string; |
|
|
setWarehouse(JSON.parse(country).name); |
|
|
const params = route.params; |
|
|
const data = { |
|
|
items: params.items, |
|
|
}; |
|
|
const response = await ordersApi.getOrders(data); |
|
|
setOrderData(response); |
|
|
}; |
|
|
|
|
|
const getFreightForwarderAddress = async () => { |
|
|
const response = await ordersApi.freightForwarderAddress(1); |
|
|
setWarehouse(response.current_country_address.country as number); |
|
|
setFreightForwarderAddress(response); |
|
|
}; |
|
|
|
|
|
const getDomesticShippingFee = async () => { |
|
|
const data = { |
|
|
items: route.params.items, |
|
|
}; |
|
|
const response = await ordersApi.calcDomesticShippingFee(data); |
|
|
|
|
|
setDomesticShippingFee(response); |
|
|
}; |
|
|
|
|
|
useEffect(() => { |
|
|
getAddress(); |
|
|
getAddressList(); |
|
|
getOrders(); |
|
|
getFreightForwarderAddress(); |
|
|
getDomesticShippingFee(); |
|
|
const listener = (data: any) => { |
|
|
if (data.type === "add") { |
|
|
data.address_id = new Date().getTime(); |
|
|
setAddressList((prevList) => [data, ...(prevList || [])]); |
|
|
} else { |
|
|
console.log(data); |
|
|
} |
|
|
}; |
|
|
eventBus.on("address-added", listener); |
|
|
return () => { |
|
|
eventBus.off("address-added", listener); |
|
|
}; |
|
|
}, []); |
|
|
|
|
|
const [paymentMethod, setPaymentMethod] = useState<string | null>(null); |
|
|
const [currency, setCurrency] = useState("usd"); |
|
|
const [actualPayment, setActualPayment] = useState<string | null>(null); |
|
|
const [mobileNumber, setMobileNumber] = useState(""); |
|
|
const [countryCode, setCountryCode] = useState("225"); |
|
|
|
|
|
const balance = 245.0; |
|
|
const exchangeRates = { usd: 1, eur: 0.885 }; |
|
|
|
|
|
const getOrderAmount = () => { |
|
|
// 模拟总金额，可加入实际订单计算逻辑 |
|
|
const baseAmount = parseFloat(shippingFee.replace("$", "")) || 0; |
|
|
return 100 + baseAmount; // 示例：商品 $100 + 运费 |
|
|
}; |
|
|
|
|
|
const [couponModalVisible, setCouponModalVisible] = useState(false); |
|
|
const [appliedCoupons, setAppliedCoupons] = useState([]); |
|
|
const [orderTotal, setOrderTotal] = useState(121.97); |
|
|
const [originalTotal] = useState(121.97); |
|
|
const [subtotal] = useState(96.47); |
|
|
const [domesticShipping] = useState(25.5); |
|
|
const [internationalShipping] = useState(45.0); |
|
|
|
|
|
const validCoupons = { |
|
|
WELCOME10: { discount: 10, type: "percent", name: "Welcome 10% Off" }, |
|
|
SAVE20: { discount: 20, type: "fixed", name: "$20 Off" }, |
|
|
FREESHIP: { discount: 25.5, type: "fixed", name: "Free Domestic Shipping" }, |
|
|
}; |
|
|
|
|
|
const addCoupon = (code) => { |
|
|
if (appliedCoupons.find((c) => c.code === code)) { |
|
|
alert("This coupon is already applied."); |
|
|
return; |
|
|
} |
|
|
|
|
|
const couponInfo = validCoupons[code]; |
|
|
const newCoupons = [ |
|
|
...appliedCoupons, |
|
|
{ |
|
|
code: code, |
|
|
name: couponInfo.name, |
|
|
discount: couponInfo.discount, |
|
|
type: couponInfo.type, |
|
|
}, |
|
|
]; |
|
|
|
|
|
setAppliedCoupons(newCoupons); |
|
|
updateTotalWithDiscounts(newCoupons); |
|
|
}; |
|
|
|
|
|
const removeCoupon = (code) => { |
|
|
const newCoupons = appliedCoupons.filter((c) => c.code !== code); |
|
|
setAppliedCoupons(newCoupons); |
|
|
updateTotalWithDiscounts(newCoupons); |
|
|
}; |
|
|
|
|
|
const updateTotalWithDiscounts = (coupons) => { |
|
|
let totalDiscount = 0; |
|
|
|
|
|
coupons.forEach((coupon) => { |
|
|
if (coupon.type === "percent") { |
|
|
totalDiscount += (subtotal * coupon.discount) / 100; |
|
|
} else { |
|
|
totalDiscount += coupon.discount; |
|
|
} |
|
|
}); |
|
|
|
|
|
totalDiscount = Math.min(totalDiscount, subtotal + domesticShipping); |
|
|
const newTotal = originalTotal - totalDiscount; |
|
|
setOrderTotal(newTotal); |
|
|
}; |
|
|
|
|
|
const isCouponApplied = (code) => { |
|
|
return appliedCoupons.some((c) => c.code === code); |
|
|
}; |
|
|
|
|
|
// 判断有没有地址 |
|
|
const addRessHandel = () => { |
|
|
if (defaultAddress) { |
|
|
setShowModal(true); |
|
|
} else { |
|
|
navigation.navigate("AddRess"); |
|
|
} |
|
|
}; |
|
|
const [expanded, setExpanded] = useState(false); |
|
|
|
|
|
const toggleExpanded = () => { |
|
|
setExpanded(!expanded); |
|
|
}; |
|
|
|
|
|
const deleteAddress = async (address_id: number) => { |
|
|
setAddressList( |
|
|
addressList?.filter((item) => item.address_id !== address_id) |
|
|
); |
|
|
addressApi.deleteAddress(address_id); |
|
|
}; |
|
|
const changeCountryHandel = async (value: number) => { |
|
|
const data = { |
|
|
items: route.params.items, |
|
|
country_code: value, |
|
|
}; |
|
|
const response = await ordersApi.calcShippingFee(data); |
|
|
if (orderData) { |
|
|
setOrderData({ |
|
|
...orderData, |
|
|
shipping_fee_sea: response?.total_shipping_fee_sea, |
|
|
shipping_fee_air: response?.total_shipping_fee_air, |
|
|
}); |
|
|
} |
|
|
}; |
|
|
|
|
|
return ( |
|
|
<View style={styles.mainContainer}> |
|
|
<ScrollView style={styles.container}> |
|
|
{/* Header */} |
|
|
<View style={styles.header}> |
|
|
<TouchableOpacity onPress={() => navigation.goBack()}> |
|
|
<BackIcon size={20} /> |
|
|
</TouchableOpacity> |
|
|
<Text style={styles.title}>Checkout</Text> |
|
|
</View> |
|
|
|
|
|
{/* Recipient Info */} |
|
|
<View style={styles.section}> |
|
|
<View style={styles.sectionHeader}> |
|
|
<Text style={styles.sectionIcon}>👤</Text> |
|
|
<Text style={styles.sectionTitle}>Recipient Information</Text> |
|
|
</View> |
|
|
|
|
|
{defaultAddress && ( |
|
|
<View style={styles.recipientInfo}> |
|
|
<View style={styles.recipientInfoIcon}> |
|
|
<AddressIcon size={25} /> |
|
|
</View> |
|
|
<View style={styles.recipientInfoText}> |
|
|
<Text style={{ fontSize: fontSize(16), color: "#a0a5ab" }}> |
|
|
{defaultAddress?.receiver_first_name} .{" "} |
|
|
{defaultAddress?.receiver_last_name} |
|
|
</Text> |
|
|
<Text style={{ fontSize: fontSize(20), paddingVertical: 4 }}> |
|
|
{defaultAddress?.country} |
|
|
</Text> |
|
|
<Text style={{ fontSize: fontSize(16), color: "#a0a5ab" }}> |
|
|
{defaultAddress?.receiver_phone} |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
)} |
|
|
<TouchableOpacity style={styles.addRecipient} onPress={addRessHandel}> |
|
|
<Text style={styles.addRecipientIcon}>＋</Text> |
|
|
<Text style={styles.addRecipientText}> |
|
|
Add Recipient Information |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
<View style={styles.border}></View> |
|
|
|
|
|
{/* Shipping Method */} |
|
|
<View style={styles.section}> |
|
|
<View style={styles.sectionHeader}> |
|
|
<Text style={styles.sectionIcon}>🚢</Text> |
|
|
<Text style={styles.sectionTitle}>Shipping Method</Text> |
|
|
</View> |
|
|
<View style={styles.shippingOptions}> |
|
|
{[ |
|
|
{ |
|
|
id: "sea", |
|
|
label: "Sea Shipping", |
|
|
icon: "🚢", |
|
|
detail: "Economical", |
|
|
}, |
|
|
{ |
|
|
id: "air", |
|
|
label: "Air Shipping", |
|
|
icon: "✈️", |
|
|
detail: "Express", |
|
|
}, |
|
|
].map((option, index) => ( |
|
|
<TouchableOpacity |
|
|
key={option.id} |
|
|
style={[ |
|
|
styles.shippingCard, |
|
|
shippingMethod === option.id && styles.shippingCardSelected, |
|
|
]} |
|
|
onPress={() => { |
|
|
setShippingMethod(option.id); |
|
|
}} |
|
|
> |
|
|
{index === 0 && ( |
|
|
<View style={styles.locationPin}> |
|
|
<LocationPinIcon size={20} /> |
|
|
</View> |
|
|
)} |
|
|
<Text style={styles.shippingIcon}>{option.icon}</Text> |
|
|
<Text style={styles.shippingLabel}>{option.label}</Text> |
|
|
<Text style={styles.shippingDetail}>{option.detail}</Text> |
|
|
</TouchableOpacity> |
|
|
))} |
|
|
</View> |
|
|
</View> |
|
|
<View style={styles.border}></View> |
|
|
|
|
|
{/* Warehouse Selection */} |
|
|
<View style={styles.section}> |
|
|
<View style={styles.sectionHeader}> |
|
|
<Text style={styles.sectionIcon}>🏭</Text> |
|
|
<Text style={styles.sectionTitle}>Delivery Warehouse</Text> |
|
|
</View> |
|
|
<View style={{ marginTop: 12 }}> |
|
|
<View style={styles.selectBox}> |
|
|
<Text style={styles.selectLabel}>Select a warehouse:</Text> |
|
|
<View style={styles.selectWrapper}> |
|
|
<Picker |
|
|
selectedValue={warehouse} |
|
|
onValueChange={(value) => { |
|
|
setWarehouse(value); |
|
|
changeCountryHandel(value); |
|
|
}} |
|
|
> |
|
|
{freightForwarderAddress?.other_addresses.map( |
|
|
(item, index) => ( |
|
|
<Picker.Item |
|
|
label={item.country} |
|
|
value={item.country_code} |
|
|
key={index} |
|
|
/> |
|
|
) |
|
|
)} |
|
|
</Picker> |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
{warehouse && ( |
|
|
<View style={styles.shippingInfo}> |
|
|
<Text style={styles.shippingInfoRow}> |
|
|
<Text style={styles.shippingInfoLabel}> |
|
|
Estimated Arrival:{" "} |
|
|
</Text> |
|
|
<Text style={{ flex: 1, textAlign: "left", marginLeft: 10 }}> |
|
|
{shippingMethod === "sea" |
|
|
? orderData?.shipping_fee_sea_time |
|
|
: orderData?.shipping_fee_air_time} |
|
|
</Text> |
|
|
</Text> |
|
|
|
|
|
<View style={styles.shippingInfoRow}> |
|
|
<Text style={styles.shippingInfoLabel}> |
|
|
International Fee:{" "} |
|
|
</Text> |
|
|
<Text |
|
|
style={{ |
|
|
color: "#ff6000", |
|
|
flex: 1, |
|
|
textAlign: "left", |
|
|
marginLeft: 10, |
|
|
fontWeight: "600", |
|
|
}} |
|
|
> |
|
|
{shippingMethod === "sea" |
|
|
? orderData?.shipping_fee_sea |
|
|
: orderData?.shipping_fee_air} |
|
|
</Text> |
|
|
|
|
|
<Text style={{ color: "#ff6000" }}>(Cash on Delivery)</Text> |
|
|
</View> |
|
|
</View> |
|
|
)} |
|
|
</View> |
|
|
</View> |
|
|
<View style={styles.border}></View> |
|
|
<View style={styles.section}> |
|
|
<View style={styles.sectionHeader}> |
|
|
<Text style={styles.sectionIcon}>💳</Text> |
|
|
<Text style={styles.sectionTitle}>Payment Method</Text> |
|
|
</View> |
|
|
<View style={styles.paymentOptions}> |
|
|
<View style={styles.paymentOption}> |
|
|
<Text style={styles.paymentLabel}>Online Payment</Text> |
|
|
</View> |
|
|
<View style={styles.paymentOption}> |
|
|
<Text style={styles.paymentLabel}>Offline Payment</Text> |
|
|
</View> |
|
|
</View> |
|
|
<View> |
|
|
{/* {[ |
|
|
{ id: "balance", icon: "💰", label: "Account Balance" }, |
|
|
{ id: "mobile_money", icon: "📱", label: "Mobile Money" }, |
|
|
{ id: "paypal", icon: "🅿️", label: "PayPal" }, |
|
|
{ id: "card", icon: "💳", label: "Credit/Debit Card" }, |
|
|
].map((option) => ( |
|
|
<TouchableOpacity |
|
|
key={option.id} |
|
|
style={[ |
|
|
styles.paymentOption, |
|
|
paymentMethod === option.id && styles.paymentSelected, |
|
|
]} |
|
|
onPress={() => { |
|
|
setPaymentMethod(option.id); |
|
|
}} |
|
|
> |
|
|
<Text style={styles.paymentIcon}>{option.icon}</Text> |
|
|
<Text style={styles.paymentLabel}>{option.label}</Text> |
|
|
</TouchableOpacity> |
|
|
))} */} |
|
|
{tabs.map((item, index) => ( |
|
|
<TouchableOpacity |
|
|
key={index} |
|
|
onPress={() => { |
|
|
setCurrentTab(item.id); |
|
|
}} |
|
|
> |
|
|
<View style={styles.tabContainer}> |
|
|
<Text style={styles.paymentLabel}>{item.label}</Text> |
|
|
</View> |
|
|
</TouchableOpacity> |
|
|
))} |
|
|
|
|
|
{/* Mobile Money 表单 */} |
|
|
{paymentMethod === "mobile_money" && ( |
|
|
<View style={styles.mobileForm}> |
|
|
<Text style={styles.formLabel}>Mobile Number</Text> |
|
|
<View style={{ flexDirection: "row", alignItems: "center" }}> |
|
|
<TouchableOpacity |
|
|
onPress={() => { |
|
|
const next = |
|
|
countryCode === "225" |
|
|
? "234" |
|
|
: countryCode === "234" |
|
|
? "233" |
|
|
: "225"; |
|
|
setCountryCode(next); |
|
|
}} |
|
|
> |
|
|
<Text style={styles.countryCode}>{countryCode}</Text> |
|
|
</TouchableOpacity> |
|
|
<TextInput |
|
|
style={[styles.input, { flex: 1, marginLeft: 10 }]} |
|
|
keyboardType="phone-pad" |
|
|
placeholder="Enter your number" |
|
|
value={mobileNumber} |
|
|
onChangeText={setMobileNumber} |
|
|
/> |
|
|
</View> |
|
|
</View> |
|
|
)} |
|
|
|
|
|
{/* PayPal Currency 切换 */} |
|
|
{paymentMethod === "paypal" && ( |
|
|
<View style={{ marginTop: 12 }}> |
|
|
<Text style={styles.formLabel}>Select Currency</Text> |
|
|
<View style={{ flexDirection: "row", marginTop: 8 }}> |
|
|
{["usd", "eur"].map((cur) => ( |
|
|
<TouchableOpacity |
|
|
key={cur} |
|
|
onPress={() => { |
|
|
setCurrency(cur); |
|
|
}} |
|
|
style={[ |
|
|
styles.currencyButton, |
|
|
currency === cur && styles.currencyButtonSelected, |
|
|
]} |
|
|
> |
|
|
<Text |
|
|
style={{ color: currency === cur ? "#ff6000" : "#333" }} |
|
|
> |
|
|
{cur.toUpperCase()} |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
))} |
|
|
</View> |
|
|
</View> |
|
|
)} |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
<View style={styles.border}></View> |
|
|
|
|
|
<View style={styles.section}> |
|
|
<View style={styles.section1}> |
|
|
<View style={styles.sectionHeader1}> |
|
|
<Text style={styles.sectionIcon1}>📦</Text> |
|
|
<Text style={styles.sectionTitle1}>Order Summary</Text> |
|
|
</View> |
|
|
|
|
|
<View style={styles.setOrderContent}> |
|
|
<Text style={styles.noCouponsMessage}> |
|
|
Products({orderData?.items.length} items) |
|
|
</Text> |
|
|
<TouchableOpacity onPress={toggleExpanded}> |
|
|
<Text style={styles.sectionAction}> |
|
|
{expanded ? "Hide Details" : "View Details"} |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
<View |
|
|
style={[styles.orderItems, expanded && styles.orderItemsExpanded]} |
|
|
> |
|
|
{orderData?.items.map((item) => ( |
|
|
<View key={item.sku_id} style={styles.orderItem}> |
|
|
{item.sku_image_url ? ( |
|
|
<Image |
|
|
source={{ uri: item.sku_image_url }} |
|
|
style={styles.itemImage} |
|
|
/> |
|
|
) : ( |
|
|
<View style={styles.itemImagePlaceholder} /> |
|
|
)} |
|
|
|
|
|
<View style={styles.itemDetails}> |
|
|
<Text style={styles.itemName} numberOfLines={2}> |
|
|
{item.product_name} |
|
|
</Text> |
|
|
{item.attributes.map((attribute) => ( |
|
|
<Text |
|
|
style={styles.itemVariant} |
|
|
key={attribute?.value} |
|
|
numberOfLines={1} |
|
|
> |
|
|
{attribute?.attribute_name}: {attribute?.value} |
|
|
</Text> |
|
|
))} |
|
|
<Text style={styles.itemQuantity}> |
|
|
Qty: {item.quantity} |
|
|
</Text> |
|
|
</View> |
|
|
|
|
|
<View style={styles.itemPrices}> |
|
|
<Text style={styles.itemPrice}>${item?.total_price}</Text> |
|
|
<Text style={styles.itemShipping}> |
|
|
{/* +${item?.shipping.toFixed(2)} domestic */} |
|
|
</Text> |
|
|
<Text style={styles.shippingNote}> |
|
|
Supplier to warehouse shipping |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
))} |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
<View style={styles.border}></View> |
|
|
<View style={styles.section}> |
|
|
<View style={styles.section1}> |
|
|
<View style={styles.sectionHeader1}> |
|
|
<Text style={styles.sectionIcon1}>🎟️</Text> |
|
|
<Text style={styles.sectionTitle1}>Coupons</Text> |
|
|
<TouchableOpacity onPress={() => setCouponModalVisible(true)}> |
|
|
<Text style={[styles.sectionAction, { marginRight: 12 }]}> |
|
|
Select |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
|
|
|
<View style={styles.sectionContent}> |
|
|
{appliedCoupons.length === 0 ? ( |
|
|
<Text style={styles.noCouponsMessage}> |
|
|
No coupons applied. Click "Select" to browse available |
|
|
coupons. |
|
|
</Text> |
|
|
) : null} |
|
|
|
|
|
<View style={styles.appliedCoupons}> |
|
|
{appliedCoupons.map((coupon) => ( |
|
|
<View key={coupon.code} style={styles.couponTag}> |
|
|
<Text style={styles.couponTagName}>{coupon.name}</Text> |
|
|
<Text style={styles.couponTagDiscount}> |
|
|
{coupon.type === "percent" |
|
|
? `${coupon.discount}% Off` |
|
|
: `$${coupon.discount.toFixed(2)} Off`} |
|
|
</Text> |
|
|
<TouchableOpacity onPress={() => removeCoupon(coupon.code)}> |
|
|
<Text style={styles.couponDelete}>×</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
))} |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
<View style={styles.priceBox}> |
|
|
<View style={styles.priceBox1}> |
|
|
<Text>Subtotal</Text> |
|
|
<Text>{orderData?.total_amount}</Text> |
|
|
</View> |
|
|
<View style={styles.priceBox1}> |
|
|
<Text>Domestic Shipping</Text> |
|
|
{domesticShippingFee?.currency ? ( |
|
|
<Text>{domesticShippingFee?.total_shipping_fee}</Text> |
|
|
) : ( |
|
|
<Text>报价中...</Text> |
|
|
)} |
|
|
</View> |
|
|
|
|
|
<View style={styles.priceBox1}> |
|
|
<Text>Estimated International Shipping</Text> |
|
|
<Text> |
|
|
{shippingMethod === "sea" |
|
|
? orderData?.shipping_fee_sea |
|
|
: orderData?.shipping_fee_air} |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
{/* 实际支付金额 */} |
|
|
<View style={styles.actualPaymentBox}> |
|
|
<View style={styles.actualPaymentBox1}> |
|
|
<Text |
|
|
style={{ |
|
|
fontSize: fontSize(18), |
|
|
fontWeight: "600", |
|
|
color: "#000", |
|
|
}} |
|
|
> |
|
|
Total |
|
|
</Text> |
|
|
<Text |
|
|
style={{ |
|
|
fontSize: fontSize(18), |
|
|
fontWeight: "600", |
|
|
color: "#ff6000", |
|
|
}} |
|
|
> |
|
|
{( |
|
|
(orderData?.total_amount ?? 0) + |
|
|
(shippingMethod === "sea" |
|
|
? orderData?.shipping_fee_sea ?? 0 |
|
|
: orderData?.shipping_fee_air ?? 0) + |
|
|
(domesticShippingFee?.total_shipping_fee ?? 0) |
|
|
).toFixed(2)} |
|
|
</Text> |
|
|
</View> |
|
|
<View style={styles.remarks}> |
|
|
<Text style={styles.remarksText}> |
|
|
+ $ |
|
|
{shippingMethod === "sea" |
|
|
? orderData?.shipping_fee_sea |
|
|
: orderData?.shipping_fee_air}{" "} |
|
|
Estimated International Shipping |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
{/* Coupon Modal */} |
|
|
<Modal |
|
|
visible={couponModalVisible} |
|
|
animationType="slide" |
|
|
transparent={true} |
|
|
onRequestClose={() => setCouponModalVisible(false)} |
|
|
> |
|
|
<View style={styles.couponModal}> |
|
|
<View style={styles.couponModalContainer}> |
|
|
<View style={styles.couponModalHeader}> |
|
|
<Text style={styles.couponModalTitle}> |
|
|
Available Coupons |
|
|
</Text> |
|
|
<TouchableOpacity |
|
|
onPress={() => setCouponModalVisible(false)} |
|
|
> |
|
|
<Text style={styles.couponModalClose}>×</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
|
|
|
<ScrollView style={styles.couponModalBody}> |
|
|
<View style={styles.availableCoupons}> |
|
|
<View style={styles.couponCard}> |
|
|
<View style={styles.couponInfo}> |
|
|
<Text style={styles.couponName}>Welcome 10% Off</Text> |
|
|
<Text style={styles.couponDiscount}> |
|
|
10% off your total order |
|
|
</Text> |
|
|
<Text style={styles.couponExpiry}> |
|
|
Valid until: 31/12/2023 |
|
|
</Text> |
|
|
</View> |
|
|
<TouchableOpacity |
|
|
style={[ |
|
|
styles.couponUseBtn, |
|
|
isCouponApplied("WELCOME10") && |
|
|
styles.couponUsedBtn, |
|
|
]} |
|
|
onPress={() => addCoupon("WELCOME10")} |
|
|
disabled={isCouponApplied("WELCOME10")} |
|
|
> |
|
|
<Text style={styles.couponUseBtnText}> |
|
|
{isCouponApplied("WELCOME10") ? "Used" : "Use"} |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
|
|
|
<View style={styles.couponCard}> |
|
|
<View style={styles.couponInfo}> |
|
|
<Text style={styles.couponName}>$20 Off</Text> |
|
|
<Text style={styles.couponDiscount}> |
|
|
$20 off your order over $100 |
|
|
</Text> |
|
|
<Text style={styles.couponExpiry}> |
|
|
Valid until: 30/11/2023 |
|
|
</Text> |
|
|
</View> |
|
|
<TouchableOpacity |
|
|
style={[ |
|
|
styles.couponUseBtn, |
|
|
isCouponApplied("SAVE20") && styles.couponUsedBtn, |
|
|
]} |
|
|
onPress={() => addCoupon("SAVE20")} |
|
|
disabled={isCouponApplied("SAVE20")} |
|
|
> |
|
|
<Text style={styles.couponUseBtnText}> |
|
|
{isCouponApplied("SAVE20") ? "Used" : "Use"} |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
|
|
|
<View style={styles.couponCard}> |
|
|
<View style={styles.couponInfo}> |
|
|
<Text style={styles.couponName}> |
|
|
Free Domestic Shipping |
|
|
</Text> |
|
|
<Text style={styles.couponDiscount}> |
|
|
Free domestic shipping on your order |
|
|
</Text> |
|
|
<Text style={styles.couponExpiry}> |
|
|
Valid until: 15/12/2023 |
|
|
</Text> |
|
|
</View> |
|
|
<TouchableOpacity |
|
|
style={[ |
|
|
styles.couponUseBtn, |
|
|
isCouponApplied("FREESHIP") && styles.couponUsedBtn, |
|
|
]} |
|
|
onPress={() => addCoupon("FREESHIP")} |
|
|
disabled={isCouponApplied("FREESHIP")} |
|
|
> |
|
|
<Text style={styles.couponUseBtnText}> |
|
|
{isCouponApplied("FREESHIP") ? "Used" : "Use"} |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
</View> |
|
|
</ScrollView> |
|
|
</View> |
|
|
</View> |
|
|
</Modal> |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
{/* Modal 表单 */} |
|
|
<Modal visible={showModal} animationType="slide" transparent> |
|
|
<View style={styles.modalOverlay}> |
|
|
<View style={styles.formContainer}> |
|
|
<View style={styles.formHeader}> |
|
|
<Text style={styles.formTitle}>选择收件人</Text> |
|
|
</View> |
|
|
|
|
|
<View style={styles.formBody}> |
|
|
<View style={styles.container1}> |
|
|
<View style={styles.recipientSelectionContainer}> |
|
|
<View style={styles.recipientSelectorContainer}> |
|
|
<View> |
|
|
<ScrollView |
|
|
style={{ height: 300 }} |
|
|
showsVerticalScrollIndicator={false} |
|
|
> |
|
|
{addressList?.map((item) => ( |
|
|
<View key={item.address_id}> |
|
|
<TouchableOpacity |
|
|
onPress={() => { |
|
|
setAddressId(item.address_id); |
|
|
}} |
|
|
> |
|
|
<View |
|
|
style={[ |
|
|
styles.userCardContainer, |
|
|
addressId === item.address_id |
|
|
? styles.addressItemSelected |
|
|
: styles.addressItemNoSelected, |
|
|
]} |
|
|
> |
|
|
<View style={styles.userInfoCard}> |
|
|
<View style={styles.userCardInfo2}> |
|
|
<Text |
|
|
style={styles.userCardInfo} |
|
|
numberOfLines={1} |
|
|
ellipsizeMode="tail" |
|
|
> |
|
|
{item.country}{" "} |
|
|
{item.receiver_first_name} .{" "} |
|
|
{item.receiver_last_name} |
|
|
</Text> |
|
|
<Text |
|
|
style={styles.userCardInfo1} |
|
|
numberOfLines={1} |
|
|
ellipsizeMode="tail" |
|
|
> |
|
|
{item.receiver_phone} |
|
|
</Text> |
|
|
<View style={styles.addressEmit}> |
|
|
<Text>设置默认地址</Text> |
|
|
<TouchableOpacity |
|
|
onPress={() => |
|
|
deleteAddress(item.address_id) |
|
|
} |
|
|
> |
|
|
<Text>删除</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
</View> |
|
|
{item.is_default === 1 && ( |
|
|
<View style={styles.centeredBoxWithText}> |
|
|
<Text |
|
|
style={styles.blueHeadingTextStyle} |
|
|
> |
|
|
默认 |
|
|
</Text> |
|
|
</View> |
|
|
)} |
|
|
</View> |
|
|
<TouchableOpacity |
|
|
onPress={() => { |
|
|
setShowModal(false), |
|
|
navigation.navigate("AddRess", { |
|
|
address: item, |
|
|
}); |
|
|
}} |
|
|
> |
|
|
<View style={styles.svgContainer}> |
|
|
<FileEditIcon size={24} /> |
|
|
</View> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
))} |
|
|
</ScrollView> |
|
|
|
|
|
<TouchableOpacity |
|
|
onPress={() => { |
|
|
setShowModal(false), navigation.navigate("AddRess"); |
|
|
}} |
|
|
> |
|
|
<View style={styles.cardContainerWithTextAndIcon1}> |
|
|
<View style={styles.addCardRecipientText}> |
|
|
<PlusIcon size={24} /> |
|
|
|
|
|
<Text style={styles.addCard}>新增收件人</Text> |
|
|
</View> |
|
|
</View> |
|
|
</TouchableOpacity> |
|
|
|
|
|
{/* Placeholder for additional button component */} |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
<View style={styles.actionButtonsContainer}> |
|
|
{/* Cancel Button */} |
|
|
<TouchableOpacity |
|
|
style={styles.cancelButtonStyle} |
|
|
onPress={() => setShowModal(false)} |
|
|
> |
|
|
<Text style={styles.cancelButtonText}>取消</Text> |
|
|
</TouchableOpacity> |
|
|
|
|
|
{/* Confirm Button */} |
|
|
<TouchableOpacity |
|
|
style={styles.confirmButtonStyle} |
|
|
onPress={() => { |
|
|
setShowModal(false), |
|
|
setDefaultAddress( |
|
|
addressList?.find( |
|
|
(item) => item.address_id === addressId |
|
|
) |
|
|
); |
|
|
}} |
|
|
> |
|
|
<Text style={styles.confirmButtonText}>确认</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</Modal> |
|
|
|
|
|
<View style={styles.border}></View> |
|
|
|
|
|
<TouchableOpacity |
|
|
style={styles.bottomButton} |
|
|
disabled={!domesticShippingFee?.currency} |
|
|
onPress={() => { |
|
|
console.log(123); |
|
|
}} |
|
|
> |
|
|
<View style={styles.bottomButtonContent}> |
|
|
<Text style={styles.bottomButtonText}> |
|
|
{domesticShippingFee?.currency ? "确认订单" : "报价中..."} |
|
|
</Text> |
|
|
</View> |
|
|
</TouchableOpacity> |
|
|
</ScrollView> |
|
|
</View> |
|
|
); |
|
|
} |
|
|
|
|
|
const styles = StyleSheet.create({ |
|
|
mainContainer: { |
|
|
flex: 1, |
|
|
backgroundColor: "#fff", |
|
|
}, |
|
|
container: { flex: 1, backgroundColor: "#fff" }, |
|
|
header: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
padding: 16, |
|
|
backgroundColor: "#fff", |
|
|
elevation: 3, |
|
|
}, |
|
|
back: { fontSize: fontSize(20), marginRight: 16 }, |
|
|
title: { |
|
|
fontSize: fontSize(18), |
|
|
fontWeight: "500", |
|
|
flex: 1, |
|
|
textAlign: "center", |
|
|
}, |
|
|
|
|
|
section: { |
|
|
backgroundColor: "#fff", |
|
|
borderRadius: 8, |
|
|
paddingLeft: 16, |
|
|
paddingRight: 16, |
|
|
}, |
|
|
sectionHeader: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
paddingTop: 12, |
|
|
paddingBottom: 12, |
|
|
}, |
|
|
sectionIcon: { marginRight: 8, fontSize: fontSize(18) }, |
|
|
sectionTitle: { flex: 1, fontSize: fontSize(15), fontWeight: "500" }, |
|
|
sectionAction: { |
|
|
color: "#ff6000", |
|
|
fontSize: fontSize(13), |
|
|
fontWeight: "500", |
|
|
}, |
|
|
paymentOptions:{ |
|
|
flexDirection: "row", |
|
|
justifyContent: "space-between", |
|
|
alignItems: "center", |
|
|
width: "100%", |
|
|
}, |
|
|
recipientInfo: { |
|
|
backgroundColor: "#fff", |
|
|
borderRadius: 8, |
|
|
paddingHorizontal: 12, |
|
|
paddingVertical: 12, |
|
|
borderWidth: 1, |
|
|
borderColor: "#ccc", |
|
|
width: "100%", |
|
|
marginBottom: 12, |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
}, |
|
|
recipientInfoIcon: { |
|
|
marginRight: 12, |
|
|
}, |
|
|
recipientInfoText: { |
|
|
flex: 1, |
|
|
fontSize: fontSize(18), |
|
|
}, |
|
|
|
|
|
addRecipient: { |
|
|
borderWidth: 1, |
|
|
borderColor: "#ccc", |
|
|
padding: 12, |
|
|
borderRadius: 6, |
|
|
flexDirection: "row", |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
backgroundColor: "#fafafa", |
|
|
}, |
|
|
addRecipientIcon: { |
|
|
fontSize: fontSize(20), |
|
|
color: "#ff6000", |
|
|
marginRight: 6, |
|
|
}, |
|
|
addRecipientText: { fontSize: fontSize(14), color: "#666" }, |
|
|
|
|
|
shippingOptions: { |
|
|
flexDirection: "row", |
|
|
gap: 10, |
|
|
justifyContent: "space-between", |
|
|
marginTop: 12, |
|
|
}, |
|
|
shippingCard: { |
|
|
flex: 1, |
|
|
alignItems: "center", |
|
|
padding: 12, |
|
|
borderRadius: 6, |
|
|
borderWidth: 1, |
|
|
borderColor: "#e0e0e0", |
|
|
backgroundColor: "#fff", |
|
|
}, |
|
|
shippingCardSelected: { borderColor: "#ff6000", backgroundColor: "#fff8f3" }, |
|
|
shippingIcon: { fontSize: fontSize(22), marginBottom: 6 }, |
|
|
shippingLabel: { fontSize: fontSize(14), fontWeight: "500" }, |
|
|
shippingDetail: { fontSize: fontSize(12), color: "#888", marginTop: 3 }, |
|
|
|
|
|
selectBox: { marginBottom: 12 }, |
|
|
selectLabel: { fontSize: fontSize(14), marginBottom: 6, color: "#666" }, |
|
|
selectWrapper: { |
|
|
borderWidth: 1, |
|
|
borderColor: "#ddd", |
|
|
borderRadius: 6, |
|
|
overflow: "hidden", |
|
|
backgroundColor: "#fff", |
|
|
}, |
|
|
shippingInfo: { |
|
|
marginTop: 12, |
|
|
padding: 12, |
|
|
backgroundColor: "#f9f9f9", |
|
|
borderRadius: 6, |
|
|
}, |
|
|
shippingInfoRow: { |
|
|
fontSize: fontSize(13), |
|
|
marginBottom: 6, |
|
|
color: "#333", |
|
|
flexDirection: "row", |
|
|
justifyContent: "space-between", |
|
|
}, |
|
|
shippingInfoLabel: { |
|
|
color: "#777", |
|
|
fontWeight: "500", |
|
|
fontSize: fontSize(13), |
|
|
color: "#333", |
|
|
}, |
|
|
|
|
|
modalOverlay: { |
|
|
flex: 1, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
backgroundColor: "rgba(0,0,0,0.5)", |
|
|
}, |
|
|
formContainer: { |
|
|
width: "90%", |
|
|
maxHeight: "90%", |
|
|
backgroundColor: "#fff", |
|
|
borderRadius: 12, |
|
|
overflow: "hidden", |
|
|
}, |
|
|
formHeader: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
padding: 16, |
|
|
}, |
|
|
closeButton: { fontSize: fontSize(20), color: "#555" }, |
|
|
formTitle: { |
|
|
flex: 1, |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "500", |
|
|
textAlign: "center", |
|
|
}, |
|
|
|
|
|
formBody: { padding: 16 }, |
|
|
formGroup: { marginBottom: 16 }, |
|
|
formLabel: { marginBottom: 6, fontSize: fontSize(14), color: "#666" }, |
|
|
input: { |
|
|
borderWidth: 1, |
|
|
borderColor: "#ddd", |
|
|
borderRadius: 6, |
|
|
padding: 12, |
|
|
fontSize: fontSize(14), |
|
|
backgroundColor: "#fff", |
|
|
}, |
|
|
|
|
|
checkboxRow: { flexDirection: "row", alignItems: "center", marginTop: 8 }, |
|
|
checkboxLabel: { marginLeft: 8, fontSize: fontSize(13), color: "#666" }, |
|
|
switchRow: { |
|
|
flexDirection: "row", |
|
|
justifyContent: "space-between", |
|
|
alignItems: "center", |
|
|
marginTop: 10, |
|
|
}, |
|
|
|
|
|
formFooter: { padding: 16 }, |
|
|
confirmButton: { backgroundColor: "#0945b5", borderRadius: 6, padding: 14 }, |
|
|
confirmText: { |
|
|
color: "#fff", |
|
|
textAlign: "center", |
|
|
fontSize: fontSize(15), |
|
|
fontWeight: "500", |
|
|
}, |
|
|
paymentOption: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
borderWidth: 1, |
|
|
borderColor: "#ddd", |
|
|
padding: 12, |
|
|
borderRadius: 6, |
|
|
width: "50%", |
|
|
}, |
|
|
paymentSelected: { |
|
|
borderColor: "#ff6000", |
|
|
backgroundColor: "#fff8f3", |
|
|
}, |
|
|
|
|
|
paymentIcon: { fontSize: fontSize(20), marginRight: 10 }, |
|
|
paymentLabel: { fontSize: fontSize(14), fontWeight: "500" }, |
|
|
tabContainer: { |
|
|
width: 100, |
|
|
flexDirection: "row", |
|
|
}, |
|
|
mobileForm: { marginTop: 12 }, |
|
|
countryCode: { |
|
|
paddingVertical: 12, |
|
|
paddingHorizontal: 14, |
|
|
backgroundColor: "#f0f0f0", |
|
|
borderRadius: 6, |
|
|
borderWidth: 1, |
|
|
borderColor: "#ccc", |
|
|
}, |
|
|
|
|
|
currencyButton: { |
|
|
flex: 1, |
|
|
paddingVertical: 10, |
|
|
alignItems: "center", |
|
|
borderWidth: 1, |
|
|
borderColor: "#ccc", |
|
|
borderRadius: 6, |
|
|
marginRight: 10, |
|
|
backgroundColor: "#fff", |
|
|
}, |
|
|
currencyButtonSelected: { |
|
|
borderColor: "#ff6000", |
|
|
backgroundColor: "#fff8f3", |
|
|
}, |
|
|
|
|
|
actualPaymentBox: { |
|
|
padding: 12, |
|
|
borderRadius: 6, |
|
|
backgroundColor: "#fff8f4", |
|
|
}, |
|
|
actualPaymentBox1: { |
|
|
flexDirection: "row", |
|
|
justifyContent: "space-between", |
|
|
alignItems: "center", |
|
|
}, |
|
|
remarks: { |
|
|
marginTop: 6, |
|
|
}, |
|
|
remarksText: { |
|
|
color: "#666", |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "500", |
|
|
}, |
|
|
|
|
|
section1: { |
|
|
backgroundColor: "#fff", |
|
|
borderRadius: 8, |
|
|
overflow: "hidden", |
|
|
marginTop: 12, |
|
|
...Platform.select({ |
|
|
ios: { |
|
|
shadowColor: "#000", |
|
|
shadowOffset: { width: 0, height: 1 }, |
|
|
shadowOpacity: 0.03, |
|
|
shadowRadius: 3, |
|
|
}, |
|
|
android: { |
|
|
elevation: 1, |
|
|
}, |
|
|
}), |
|
|
}, |
|
|
sectionHeader1: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
paddingTop: 12, |
|
|
paddingBottom: 12, |
|
|
borderBottomWidth: 1, |
|
|
borderBottomColor: "#f5f5f5", |
|
|
}, |
|
|
sectionIcon1: { |
|
|
fontSize: fontSize(18), |
|
|
marginRight: 10, |
|
|
color: "#666", |
|
|
}, |
|
|
setOrderContent: { |
|
|
flexDirection: "row", |
|
|
justifyContent: "space-between", |
|
|
alignItems: "center", |
|
|
paddingTop: 12, |
|
|
paddingBottom: 12, |
|
|
paddingHorizontal: 12, |
|
|
}, |
|
|
sectionTitle1: { |
|
|
fontSize: fontSize(15), |
|
|
fontWeight: "500", |
|
|
flex: 1, |
|
|
}, |
|
|
sectionAction1: { |
|
|
color: "#ff6000", |
|
|
fontSize: fontSize(13), |
|
|
fontWeight: "500", |
|
|
}, |
|
|
sectionContent: { |
|
|
paddingTop: 16, |
|
|
paddingBottom: 16, |
|
|
}, |
|
|
noCouponsMessage: { |
|
|
color: "#888", |
|
|
fontSize: fontSize(13), |
|
|
marginBottom: 10, |
|
|
}, |
|
|
|
|
|
// Applied coupons styles |
|
|
appliedCoupons: { |
|
|
flexDirection: "row", |
|
|
flexWrap: "wrap", |
|
|
}, |
|
|
couponTag: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
backgroundColor: "#fff8f3", |
|
|
borderWidth: 1, |
|
|
borderStyle: "dashed", |
|
|
borderColor: "#ff6000", |
|
|
borderRadius: 4, |
|
|
padding: 8, |
|
|
marginRight: 10, |
|
|
marginBottom: 10, |
|
|
}, |
|
|
couponTagName: { |
|
|
color: "#ff6000", |
|
|
fontWeight: "500", |
|
|
marginRight: 8, |
|
|
fontSize: fontSize(13), |
|
|
}, |
|
|
couponTagDiscount: { |
|
|
color: "#ff6000", |
|
|
fontSize: fontSize(13), |
|
|
}, |
|
|
couponDelete: { |
|
|
color: "#777", |
|
|
fontSize: fontSize(16), |
|
|
marginLeft: 8, |
|
|
}, |
|
|
|
|
|
// Coupon modal styles |
|
|
couponModal: { |
|
|
flex: 1, |
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)", |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
}, |
|
|
couponModalContainer: { |
|
|
backgroundColor: "#fff", |
|
|
width: "90%", |
|
|
maxHeight: "80%", |
|
|
borderRadius: 12, |
|
|
overflow: "hidden", |
|
|
}, |
|
|
couponModalHeader: { |
|
|
padding: 15, |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
justifyContent: "space-between", |
|
|
borderBottomWidth: 1, |
|
|
borderBottomColor: "#f0f0f0", |
|
|
}, |
|
|
couponModalTitle: { |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "500", |
|
|
}, |
|
|
couponModalClose: { |
|
|
fontSize: fontSize(20), |
|
|
color: "#777", |
|
|
}, |
|
|
couponModalBody: { |
|
|
padding: 15, |
|
|
}, |
|
|
|
|
|
// Available coupons styles |
|
|
availableCoupons: { |
|
|
gap: 12, |
|
|
}, |
|
|
couponCard: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
justifyContent: "space-between", |
|
|
padding: 12, |
|
|
backgroundColor: "#fff8f3", |
|
|
borderWidth: 1, |
|
|
borderStyle: "dashed", |
|
|
borderColor: "#ff6000", |
|
|
borderRadius: 8, |
|
|
}, |
|
|
couponInfo: { |
|
|
flex: 1, |
|
|
}, |
|
|
couponName: { |
|
|
fontWeight: "500", |
|
|
color: "#ff6000", |
|
|
fontSize: fontSize(15), |
|
|
marginBottom: 3, |
|
|
}, |
|
|
couponDiscount: { |
|
|
fontSize: fontSize(13), |
|
|
color: "#666", |
|
|
}, |
|
|
couponExpiry: { |
|
|
fontSize: fontSize(11), |
|
|
color: "#999", |
|
|
marginTop: 4, |
|
|
}, |
|
|
couponUseBtn: { |
|
|
backgroundColor: "#ff6000", |
|
|
paddingVertical: 6, |
|
|
paddingHorizontal: 16, |
|
|
borderRadius: 4, |
|
|
fontWeight: "500", |
|
|
marginLeft: 10, |
|
|
}, |
|
|
couponUsedBtn: { |
|
|
backgroundColor: "#ccc", |
|
|
}, |
|
|
couponUseBtnText: { |
|
|
color: "white", |
|
|
fontSize: fontSize(13), |
|
|
fontWeight: "500", |
|
|
}, |
|
|
orderItems: { |
|
|
maxHeight: 0, |
|
|
overflow: "hidden", |
|
|
}, |
|
|
orderItemsExpanded: { |
|
|
maxHeight: 1000, // Arbitrary large number to accommodate all items |
|
|
}, |
|
|
orderItem: { |
|
|
flexDirection: "row", |
|
|
padding: 16, |
|
|
borderBottomWidth: 1, |
|
|
borderBottomColor: "#f5f5f5", |
|
|
}, |
|
|
itemImage: { |
|
|
width: widthUtils(70, 70).width, |
|
|
height: widthUtils(70, 70).height, |
|
|
borderRadius: 6, |
|
|
marginRight: 12, |
|
|
borderWidth: 1, |
|
|
borderColor: "#eee", |
|
|
}, |
|
|
itemImagePlaceholder: { |
|
|
width: widthUtils(70, 70).width, |
|
|
height: widthUtils(70, 70).height, |
|
|
borderRadius: 6, |
|
|
marginRight: 12, |
|
|
borderWidth: 1, |
|
|
borderColor: "#eee", |
|
|
backgroundColor: "#f1f1f1", |
|
|
}, |
|
|
itemDetails: { |
|
|
flex: 1, |
|
|
}, |
|
|
itemName: { |
|
|
fontSize: fontSize(14), |
|
|
lineHeight: 18, |
|
|
}, |
|
|
itemVariant: { |
|
|
fontSize: fontSize(12), |
|
|
color: "#666", |
|
|
backgroundColor: "#f7f7f7", |
|
|
paddingVertical: 3, |
|
|
paddingHorizontal: 6, |
|
|
borderRadius: 4, |
|
|
marginTop: 6, |
|
|
alignSelf: "flex-start", |
|
|
}, |
|
|
itemQuantity: { |
|
|
fontSize: fontSize(12), |
|
|
color: "#666", |
|
|
marginTop: 4, |
|
|
}, |
|
|
itemPrices: { |
|
|
alignItems: "flex-end", |
|
|
fontSize: fontSize(13), |
|
|
color: "#555", |
|
|
}, |
|
|
itemPrice: { |
|
|
fontWeight: "600", |
|
|
color: "#ff6000", |
|
|
fontSize: fontSize(15), |
|
|
marginBottom: 5, |
|
|
}, |
|
|
itemShipping: { |
|
|
fontSize: fontSize(12), |
|
|
color: "#777", |
|
|
}, |
|
|
shippingNote: { |
|
|
fontSize: fontSize(11), |
|
|
color: "#888", |
|
|
marginTop: 2, |
|
|
fontStyle: "italic", |
|
|
}, |
|
|
priceBox: { |
|
|
borderRadius: 10, |
|
|
}, |
|
|
priceBox1: { |
|
|
justifyContent: "space-between", |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
padding: 12, |
|
|
borderBottomWidth: 1, |
|
|
borderBottomColor: "#f5f5f5", |
|
|
}, |
|
|
container1: { |
|
|
width: "100%", |
|
|
}, |
|
|
recipientSelectionContainer: { |
|
|
flexDirection: "column", |
|
|
alignItems: "stretch", |
|
|
justifyContent: "flex-start", |
|
|
}, |
|
|
recipientSelectorContainer: { |
|
|
flexDirection: "column", |
|
|
alignItems: "stretch", |
|
|
justifyContent: "flex-start", |
|
|
}, |
|
|
recipientSelectionTitle: { |
|
|
alignSelf: "center", |
|
|
fontSize: fontSize(20), |
|
|
lineHeight: fontSize(22), |
|
|
fontFamily: "PingFang SC", |
|
|
fontWeight: "600", |
|
|
color: "black", |
|
|
}, |
|
|
userCardContainer1: { |
|
|
marginTop: 20, |
|
|
}, |
|
|
addressItemSelected: { |
|
|
borderColor: "#002fa7", |
|
|
borderWidth: 2, |
|
|
}, |
|
|
addressItemNoSelected: { |
|
|
borderColor: "#d0d0d0", |
|
|
borderWidth: 2, |
|
|
}, |
|
|
userCardContainer: { |
|
|
flexDirection: "row", |
|
|
gap: 8, |
|
|
alignItems: "flex-start", |
|
|
justifyContent: "space-between", |
|
|
width: "100%", |
|
|
paddingTop: 15, |
|
|
paddingRight: 10, |
|
|
paddingBottom: 10, |
|
|
paddingLeft: 11, |
|
|
backgroundColor: "white", |
|
|
borderRadius: 5, |
|
|
marginBottom: 10, |
|
|
}, |
|
|
userInfoCard: { |
|
|
flexDirection: "row", |
|
|
alignItems: "flex-start", |
|
|
justifyContent: "flex-start", |
|
|
flex: 1, |
|
|
marginRight: 8, |
|
|
}, |
|
|
userCardInfo2: { |
|
|
flex: 1, |
|
|
marginRight: 8, |
|
|
}, |
|
|
userCardInfo: { |
|
|
fontSize: fontSize(18), |
|
|
lineHeight: fontSize(22), |
|
|
fontFamily: "PingFang SC", |
|
|
fontWeight: "500", |
|
|
color: "black", |
|
|
flex: 1, |
|
|
}, |
|
|
userCardInfo1: { |
|
|
fontSize: fontSize(18), |
|
|
lineHeight: fontSize(22), |
|
|
fontFamily: "PingFang SC", |
|
|
fontWeight: "500", |
|
|
color: "#6b7280", |
|
|
marginTop: 10, |
|
|
flex: 1, |
|
|
width: "100%", |
|
|
}, |
|
|
centeredBoxWithText: { |
|
|
flexDirection: "column", |
|
|
alignItems: "stretch", |
|
|
justifyContent: "center", |
|
|
height: 26, |
|
|
paddingRight: 11, |
|
|
paddingLeft: 11, |
|
|
marginLeft: 8, |
|
|
backgroundColor: "#edf3ff", |
|
|
borderRadius: 5, |
|
|
}, |
|
|
blueHeadingTextStyle: { |
|
|
fontSize: fontSize(13), |
|
|
fontFamily: "PingFang SC", |
|
|
fontWeight: "500", |
|
|
color: "#002fa7", |
|
|
}, |
|
|
svgContainer: { |
|
|
width: widthUtils(24, 24).width, |
|
|
height: widthUtils(24, 24).height, |
|
|
color: "#0051ff", |
|
|
marginLeft: "auto", |
|
|
}, |
|
|
addressEmit: { |
|
|
paddingTop: 10, |
|
|
flexDirection: "row", |
|
|
gap: 10, |
|
|
}, |
|
|
cardContainerWithTextAndIcon: { |
|
|
flexDirection: "row", |
|
|
gap: 8, |
|
|
alignItems: "flex-start", |
|
|
justifyContent: "space-between", |
|
|
width: "100%", |
|
|
paddingTop: 16, |
|
|
paddingRight: 10, |
|
|
paddingBottom: 19, |
|
|
paddingLeft: 11, |
|
|
marginTop: 12, |
|
|
backgroundColor: "white", |
|
|
borderWidth: 1, |
|
|
borderColor: "#d0d0d0", |
|
|
borderRadius: 5, |
|
|
}, |
|
|
cardContainerWithTextAndIcon1: { |
|
|
gap: 8, |
|
|
justifyContent: "space-between", |
|
|
width: "100%", |
|
|
paddingTop: 16, |
|
|
paddingRight: 10, |
|
|
paddingBottom: 19, |
|
|
paddingLeft: 11, |
|
|
marginTop: 12, |
|
|
backgroundColor: "white", |
|
|
borderWidth: 1, |
|
|
borderColor: "#d0d0d0", |
|
|
borderStyle: "dashed", |
|
|
borderRadius: 5, |
|
|
alignItems: "center", |
|
|
flexDirection: "row", |
|
|
}, |
|
|
addCardRecipientText: { |
|
|
width: "100%", |
|
|
textAlign: "center", |
|
|
fontSize: fontSize(16), |
|
|
lineHeight: fontSize(22), |
|
|
fontFamily: "PingFang SC", |
|
|
fontWeight: "500", |
|
|
alignItems: "center", |
|
|
flexDirection: "row", |
|
|
justifyContent: "center", |
|
|
}, |
|
|
addCard: { |
|
|
alignItems: "center", |
|
|
color: "#002fa7", |
|
|
}, |
|
|
actionButtonsContainer: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
marginTop: 20, |
|
|
width: "100%", |
|
|
justifyContent: "center", |
|
|
gap: 20, |
|
|
}, |
|
|
cancelButtonStyle: { |
|
|
width: "40%", |
|
|
height: widthUtils(50, 160).height, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
fontFamily: "Source Han Sans CN", |
|
|
fontSize: fontSize(16), |
|
|
lineHeight: fontSize(22), |
|
|
fontWeight: "500", |
|
|
color: "#333333", |
|
|
backgroundColor: "#f2f3f5", |
|
|
borderRadius: 25, |
|
|
}, |
|
|
confirmButtonStyle: { |
|
|
width: "40%", |
|
|
height: widthUtils(50, 160).height, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
fontFamily: "Source Han Sans CN", |
|
|
fontSize: fontSize(16), |
|
|
lineHeight: fontSize(22), |
|
|
fontWeight: "500", |
|
|
color: "white", |
|
|
backgroundColor: "#002fa7", |
|
|
borderRadius: 25, |
|
|
}, |
|
|
cancelButtonText: { |
|
|
fontFamily: "Source Han Sans CN", |
|
|
fontSize: fontSize(16), |
|
|
lineHeight: fontSize(22), |
|
|
fontWeight: "500", |
|
|
color: "#333333", |
|
|
}, |
|
|
confirmButtonText: { |
|
|
fontFamily: "Source Han Sans CN", |
|
|
fontSize: fontSize(16), |
|
|
lineHeight: fontSize(22), |
|
|
fontWeight: "500", |
|
|
color: "white", |
|
|
}, |
|
|
locationPin: { |
|
|
position: "absolute", |
|
|
top: 8, |
|
|
right: 8, |
|
|
zIndex: 1, |
|
|
}, |
|
|
border: { |
|
|
height: 6, |
|
|
backgroundColor: "#f5f5f5", |
|
|
marginTop: 12, |
|
|
}, |
|
|
bottomButton: { |
|
|
width: "100%", |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
marginTop: 12, |
|
|
paddingHorizontal: 16, |
|
|
marginBottom: 12, |
|
|
backgroundColor: "#fff", |
|
|
}, |
|
|
bottomButtonContent: { |
|
|
backgroundColor: "#ff611a", |
|
|
width: "100%", |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
paddingVertical: 16, |
|
|
borderRadius: 25, |
|
|
}, |
|
|
bottomButtonText: { |
|
|
color: "#fff", |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "500", |
|
|
}, |
|
|
});
|
|
|
|
