|
|
import React, { useState, useEffect } from "react"; |
|
|
import { |
|
|
View, |
|
|
Text, |
|
|
TouchableOpacity, |
|
|
StyleSheet, |
|
|
ScrollView, |
|
|
Image, |
|
|
Alert, |
|
|
ActivityIndicator, |
|
|
StatusBar, |
|
|
SafeAreaView, |
|
|
} from "react-native"; |
|
|
import { payApi, PaymentMethodsResponse } from "../../services/api/payApi"; |
|
|
import fontSize from "../../utils/fontsizeUtils"; |
|
|
import BackIcon from "../../components/BackIcon"; |
|
|
import { useNavigation, NavigationProp } from "@react-navigation/native"; |
|
|
import widthUtils from "../../utils/widthUtils"; |
|
|
import useOrderStore from "../../store/order"; |
|
|
import useCreateOrderStore from "../../store/createOrder"; |
|
|
import { useRoute, RouteProp } from "@react-navigation/native"; |
|
|
import useUserStore from "../../store/user"; |
|
|
import { createOrderDataType } from "../../types/createOrder"; |
|
|
import useBurialPointStore from "../../store/burialPoint"; |
|
|
import { getBurialPointData } from "../../store/burialPoint"; |
|
|
import { |
|
|
ordersApi, |
|
|
OrderData, |
|
|
CreateOrderRequest, |
|
|
Order, |
|
|
} from "../../services/api/orders"; |
|
|
import { useTranslation } from "react-i18next"; |
|
|
import CircleOutlineIcon from "../../components/CircleOutlineIcon"; |
|
|
import CheckIcon from "../../components/CheckIcon"; |
|
|
import payMap from "../../utils/payMap"; |
|
|
|
|
|
// Define route params type |
|
|
type PaymentMethodRouteParams = { |
|
|
freight_forwarder_address_id?: number; |
|
|
}; |
|
|
// Define the root navigation params |
|
|
type RootStackParamList = { |
|
|
PreviewOrder: { |
|
|
data: Order; |
|
|
payMethod: string; |
|
|
currency: string; |
|
|
amount: number; |
|
|
}; |
|
|
Pay: { order_id: string }; |
|
|
ShippingFee: { freight_forwarder_address_id?: number }; |
|
|
PaymentMethod: { freight_forwarder_address_id?: number }; |
|
|
PreviewAddress: undefined; |
|
|
AddressList: undefined; |
|
|
// Add other routes as needed |
|
|
}; |
|
|
interface PaymentOption { |
|
|
id: string; |
|
|
label: string; |
|
|
icon: string; |
|
|
value?: string | string[]; |
|
|
key?: string; |
|
|
} |
|
|
interface PaymentTab { |
|
|
id: string; |
|
|
label: string; |
|
|
options: PaymentOption[]; |
|
|
} |
|
|
|
|
|
const PaymentMethodItem = ({ |
|
|
option, |
|
|
isSelected, |
|
|
onSelect, |
|
|
selectedCurrency, |
|
|
onSelectCurrency, |
|
|
exchangeRates, |
|
|
totalAmount, |
|
|
convertedAmount, |
|
|
isConverting, |
|
|
isPaypalExpanded, |
|
|
}: { |
|
|
option: PaymentOption; |
|
|
isSelected: boolean; |
|
|
onSelect: () => void; |
|
|
selectedCurrency?: string; |
|
|
onSelectCurrency?: (currency: string) => void; |
|
|
exchangeRates?: { |
|
|
usd: number; |
|
|
eur: number; |
|
|
}; |
|
|
totalAmount?: number; |
|
|
convertedAmount?: { |
|
|
converted_amount: number; |
|
|
item_key: string; |
|
|
original_amount: number; |
|
|
}[]; |
|
|
isConverting?: boolean; |
|
|
isPaypalExpanded?: boolean; |
|
|
}) => { |
|
|
const { t } = useTranslation(); |
|
|
const { user } = useUserStore(); |
|
|
|
|
|
return ( |
|
|
<View> |
|
|
<TouchableOpacity style={styles.cardContainer} onPress={onSelect}> |
|
|
{option.key === "balance" ? ( |
|
|
<View style={styles.leftInfo}> |
|
|
<View style={styles.blueBox}> |
|
|
<Image |
|
|
source={payMap(option.key) as any} |
|
|
style={styles.operatorImage} |
|
|
/> |
|
|
</View> |
|
|
<Text style={styles.balanceText}> |
|
|
{t("balance.recharge.balance_remaining") || "Balance remaining"} |
|
|
{"\n"} |
|
|
{user.balance} |
|
|
{user.currency} |
|
|
</Text> |
|
|
</View> |
|
|
) : ( |
|
|
<View style={styles.iconRow}> |
|
|
<View style={styles.imageContainer}> |
|
|
<Image |
|
|
source={payMap(option.key || option.id) as any} |
|
|
style={styles.operatorImage} |
|
|
/> |
|
|
{option.key === "mobile_money" && option.value && ( |
|
|
<View style={styles.mobileMoneyTextContainer}> |
|
|
{Array.isArray(option.value) ? ( |
|
|
option.value.map((item, index) => ( |
|
|
<View key={index} style={styles.mobileMoneyImgContainer}> |
|
|
<Image |
|
|
source={payMap(item) as any} |
|
|
style={styles.mobileMoneyImg} |
|
|
/> |
|
|
</View> |
|
|
)) |
|
|
) : ( |
|
|
<Text style={styles.mobileMoneyText}>{option.value}</Text> |
|
|
)} |
|
|
</View> |
|
|
)} |
|
|
</View> |
|
|
</View> |
|
|
)} |
|
|
<View style={styles.checkboxContainer}> |
|
|
<CircleOutlineIcon |
|
|
size={fontSize(24)} |
|
|
strokeColor={isSelected ? "#007efa" : "#C6C6C6"} |
|
|
fillColor={isSelected ? "#007efa" : "transparent"} |
|
|
/> |
|
|
{isSelected && ( |
|
|
<View style={styles.checkmarkContainer}> |
|
|
<CheckIcon size={fontSize(12)} color="#FFFFFF" /> |
|
|
</View> |
|
|
)} |
|
|
</View> |
|
|
</TouchableOpacity> |
|
|
|
|
|
{/* Show currency selector directly under PayPal when selected and expanded */} |
|
|
{isSelected && |
|
|
option.key === "paypal" && |
|
|
isPaypalExpanded && |
|
|
selectedCurrency && |
|
|
onSelectCurrency && |
|
|
exchangeRates && |
|
|
totalAmount && ( |
|
|
<View style={styles.paypalExpandedContainer}> |
|
|
<View style={styles.paypalCurrencyContainer}> |
|
|
<Text style={styles.currencyTitle}> |
|
|
{t("order.select_currency") || "Select Currency"} |
|
|
</Text> |
|
|
<View style={styles.currencyButtonsContainer}> |
|
|
<TouchableOpacity |
|
|
style={[ |
|
|
styles.currencyButton, |
|
|
selectedCurrency === "USD" && styles.currencyButtonActive, |
|
|
]} |
|
|
onPress={() => onSelectCurrency("USD")} |
|
|
> |
|
|
<Text |
|
|
style={[ |
|
|
styles.currencyButtonText, |
|
|
selectedCurrency === "USD" && |
|
|
styles.currencyButtonTextActive, |
|
|
]} |
|
|
> |
|
|
USD |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
<TouchableOpacity |
|
|
style={[ |
|
|
styles.currencyButton, |
|
|
selectedCurrency === "EUR" && styles.currencyButtonActive, |
|
|
]} |
|
|
onPress={() => onSelectCurrency("EUR")} |
|
|
> |
|
|
<Text |
|
|
style={[ |
|
|
styles.currencyButtonText, |
|
|
selectedCurrency === "EUR" && |
|
|
styles.currencyButtonTextActive, |
|
|
]} |
|
|
> |
|
|
EUR |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
|
|
|
{/* Display converted amount */} |
|
|
{isConverting ? ( |
|
|
<View style={styles.convertingContainer}> |
|
|
<ActivityIndicator size="small" color="#007efa" /> |
|
|
<Text style={styles.convertingText}> |
|
|
{t("order.converting") || "Converting..."} |
|
|
</Text> |
|
|
</View> |
|
|
) : convertedAmount && convertedAmount.length > 0 ? ( |
|
|
<View style={styles.convertedAmountContainer}> |
|
|
<Text style={styles.convertedAmountLabel}> |
|
|
{t("order.equivalent_amount") || "Equivalent Amount:"} |
|
|
</Text> |
|
|
<Text style={styles.convertedAmountValue}> |
|
|
{convertedAmount |
|
|
.reduce((acc, item) => acc + item.converted_amount, 0) |
|
|
.toFixed(2)}{" "} |
|
|
{selectedCurrency} |
|
|
</Text> |
|
|
</View> |
|
|
) : null} |
|
|
</View> |
|
|
</View> |
|
|
)} |
|
|
</View> |
|
|
); |
|
|
}; |
|
|
|
|
|
export const PaymentMethod = () => { |
|
|
const { t } = useTranslation(); |
|
|
const [tabs, setTabs] = useState<PaymentTab[]>([ |
|
|
{ |
|
|
id: "online", |
|
|
label: t("order.payment.online"), |
|
|
options: [], |
|
|
}, |
|
|
{ |
|
|
id: "offline", |
|
|
label: t("order.payment.offline"), |
|
|
options: [], |
|
|
}, |
|
|
]); |
|
|
const [currentTab, setCurrentTab] = useState("online"); |
|
|
const [paymentMethods, setPaymentMethods] = |
|
|
useState<PaymentMethodsResponse>(); |
|
|
const [selectedPayment, setSelectedPayment] = useState<string | null>(null); |
|
|
const navigation = useNavigation<NavigationProp<RootStackParamList>>(); |
|
|
const route = |
|
|
useRoute<RouteProp<Record<string, PaymentMethodRouteParams>, string>>(); |
|
|
const [isPaypalExpanded, setIsPaypalExpanded] = useState(false); |
|
|
const order = useOrderStore((state) => state.order); |
|
|
const [previewOrder, setPreviewOrder] = useState<OrderData>(); |
|
|
const [loading, setLoading] = useState(false); |
|
|
const { user } = useUserStore(); |
|
|
const [createOrderData, setCreateOrderData] = useState<createOrderDataType>(); |
|
|
const { items, orderData, setOrderData, resetOrder } = useCreateOrderStore(); |
|
|
const [selectedCurrency, setSelectedCurrency] = useState("USD"); |
|
|
const [convertedAmount, setConvertedAmount] = useState< |
|
|
{ converted_amount: number; item_key: string; original_amount: number }[] |
|
|
>([]); |
|
|
const [isConverting, setIsConverting] = useState(false); |
|
|
const [createLoading, setCreateLoading] = useState(false); |
|
|
const [exchangeRates] = useState({ |
|
|
usd: 580.0, |
|
|
eur: 655.96, |
|
|
}); |
|
|
const [totalAmount, setTotalAmount] = useState(121.97); |
|
|
const { logPaymentConfirm } = useBurialPointStore(); |
|
|
const toggleExpanded = () => { |
|
|
setIsPaypalExpanded(!isPaypalExpanded); |
|
|
}; |
|
|
const onSelectPayment = (paymentId: string) => { |
|
|
if (paymentId === selectedPayment) { |
|
|
// If clicking on already selected paypal, toggle expansion |
|
|
if (paymentId === "paypal") { |
|
|
setIsPaypalExpanded(!isPaypalExpanded); |
|
|
} |
|
|
return; |
|
|
} |
|
|
|
|
|
setSelectedPayment(paymentId); |
|
|
|
|
|
// Auto-expand paypal when selecting it |
|
|
if (paymentId === "paypal") { |
|
|
setIsPaypalExpanded(true); |
|
|
setIsConverting(true); |
|
|
|
|
|
const data = { |
|
|
from_currency: user.currency, |
|
|
to_currency: selectedCurrency, |
|
|
amounts: { |
|
|
total_amount: previewOrder?.total_amount || 0, |
|
|
domestic_shipping_fee: createOrderData?.domestic_shipping_fee || 0, |
|
|
shipping_fee: createOrderData?.shipping_fee || 0, |
|
|
}, |
|
|
}; |
|
|
|
|
|
payApi |
|
|
.convertCurrency(data) |
|
|
.then((res) => { |
|
|
setConvertedAmount(res.converted_amounts_list); |
|
|
setIsConverting(false); |
|
|
}) |
|
|
.catch((error) => { |
|
|
console.error("Currency conversion failed:", error); |
|
|
setIsConverting(false); |
|
|
}); |
|
|
} else { |
|
|
// Close expansion for non-paypal options |
|
|
setIsPaypalExpanded(false); |
|
|
} |
|
|
}; |
|
|
const onSelectCurrency = (currency: string) => { |
|
|
setSelectedCurrency(currency); |
|
|
setIsConverting(true); |
|
|
const data = { |
|
|
from_currency: user.currency, |
|
|
to_currency: currency, |
|
|
amounts: { |
|
|
total_amount: previewOrder?.total_amount || 0, |
|
|
domestic_shipping_fee: createOrderData?.domestic_shipping_fee || 0, |
|
|
shipping_fee: createOrderData?.shipping_fee || 0, |
|
|
}, |
|
|
}; |
|
|
payApi |
|
|
.convertCurrency(data) |
|
|
.then((res) => { |
|
|
setConvertedAmount(res.converted_amounts_list); |
|
|
setIsConverting(false); |
|
|
}) |
|
|
.catch((error) => { |
|
|
console.error("Currency conversion failed:", error); |
|
|
setIsConverting(false); |
|
|
}); |
|
|
}; |
|
|
const getPaymentMethods = async () => { |
|
|
try { |
|
|
setLoading(true); |
|
|
const response = await payApi.getCountryPaymentMethods(); |
|
|
setPaymentMethods(response); |
|
|
// Map payment methods to tabs |
|
|
const onlineMethods = response.current_country_methods.map( |
|
|
(method: any) => ({ |
|
|
id: method.key, |
|
|
label: method.name || method.key, |
|
|
icon: getPaymentIcon(method.key), |
|
|
value: method.value, |
|
|
key: method.key, |
|
|
}) |
|
|
); |
|
|
|
|
|
// For now, use an empty array for offline methods as they're not in the API response |
|
|
const offlineMethods: PaymentOption[] = []; |
|
|
|
|
|
// Update tabs with fetched payment methods |
|
|
setTabs([ |
|
|
{ |
|
|
id: "online", |
|
|
label: t("order.payment.online"), |
|
|
options: onlineMethods, |
|
|
}, |
|
|
{ |
|
|
id: "offline", |
|
|
label: t("order.payment.offline"), |
|
|
options: offlineMethods, |
|
|
}, |
|
|
]); |
|
|
|
|
|
// If there are payment methods, set the first one as selected by default |
|
|
if (onlineMethods.length > 0) { |
|
|
setSelectedPayment(onlineMethods[0].id); |
|
|
} |
|
|
|
|
|
setLoading(false); |
|
|
} catch (error) { |
|
|
console.error("Failed to get payment methods:", error); |
|
|
setLoading(false); |
|
|
} |
|
|
}; |
|
|
const getPaymentIcon = (key: string): string => { |
|
|
switch (key) { |
|
|
case "Brainnel Pay(Mobile Money)": |
|
|
return "💳"; |
|
|
case "Wave": |
|
|
return "💸"; |
|
|
case "Paypal": |
|
|
return "🅿️"; |
|
|
case "Bank Card Payment": |
|
|
return "💳"; |
|
|
default: |
|
|
return "💰"; |
|
|
} |
|
|
}; |
|
|
useEffect(() => { |
|
|
getPaymentMethods(); |
|
|
}, []); |
|
|
useEffect(() => { |
|
|
setLoading(true); |
|
|
if (route.params?.freight_forwarder_address_id) { |
|
|
const data = { |
|
|
country_code: route.params.freight_forwarder_address_id, |
|
|
items: items, |
|
|
}; |
|
|
ordersApi |
|
|
.getOrders(data) |
|
|
.then((res) => { |
|
|
setPreviewOrder(res); |
|
|
setLoading(false); |
|
|
}) |
|
|
.catch(() => { |
|
|
setLoading(false); |
|
|
Alert.alert("Error", "Failed to get preview order"); |
|
|
}); |
|
|
} |
|
|
}, [route.params?.freight_forwarder_address_id]); |
|
|
useEffect(() => { |
|
|
setCreateOrderData({ |
|
|
...orderData, |
|
|
address_id: orderData.address_id, |
|
|
domestic_shipping_fee: orderData.domestic_shipping_fee, |
|
|
shipping_fee: orderData.shipping_fee, |
|
|
transport_type: orderData.transport_type, |
|
|
currency: user.currency, |
|
|
}); |
|
|
console.log("orderData", orderData); |
|
|
}, [orderData]); |
|
|
const handleSubmit = async () => { |
|
|
if (!selectedPayment) { |
|
|
Alert.alert(t("payment.select_payment")); |
|
|
return; |
|
|
} |
|
|
const items = |
|
|
previewOrder?.items.map((item) => ({ |
|
|
offer_id: String(item.offer_id), |
|
|
cart_item_id: item.cart_item_id, |
|
|
sku_id: String(item.sku_id), |
|
|
product_name: item.product_name, |
|
|
product_name_en: item.product_name_en, |
|
|
product_name_ar: item.product_name_ar, |
|
|
product_name_fr: item.product_name_fr, |
|
|
sku_attributes: item.attributes.map((attr) => ({ |
|
|
attribute_name: attr.attribute_name, |
|
|
attribute_value: attr.value, |
|
|
})), |
|
|
sku_image: item.sku_image_url, |
|
|
quantity: item.quantity, |
|
|
unit_price: item.unit_price, |
|
|
total_price: item.total_price, |
|
|
})) || []; |
|
|
if (createOrderData) { |
|
|
createOrderData.items = items; |
|
|
createOrderData.payment_method = selectedPayment; |
|
|
createOrderData.total_amount = |
|
|
selectedPayment === "paypal" |
|
|
? convertedAmount.reduce( |
|
|
(acc, item) => acc + item.converted_amount, |
|
|
0 |
|
|
) |
|
|
: Number( |
|
|
( |
|
|
(previewOrder?.total_amount || 0) + |
|
|
(orderData?.domestic_shipping_fee || 0) + |
|
|
(orderData?.shipping_fee || 0) |
|
|
).toFixed(2) |
|
|
); |
|
|
createOrderData.actual_amount = |
|
|
selectedPayment === "paypal" |
|
|
? convertedAmount.reduce( |
|
|
(acc, item) => acc + item.converted_amount, |
|
|
0 |
|
|
) |
|
|
: Number( |
|
|
( |
|
|
(previewOrder?.total_amount || 0) + |
|
|
(orderData?.domestic_shipping_fee || 0) + |
|
|
(orderData?.shipping_fee || 0) |
|
|
).toFixed(2) |
|
|
); |
|
|
createOrderData.currency = |
|
|
selectedPayment === "paypal" ? selectedCurrency : user.currency; |
|
|
createOrderData.domestic_shipping_fee = |
|
|
selectedPayment === "paypal" |
|
|
? convertedAmount.find( |
|
|
(item) => item.item_key === "domestic_shipping_fee" |
|
|
)?.converted_amount || 0 |
|
|
: orderData?.domestic_shipping_fee; |
|
|
createOrderData.shipping_fee = |
|
|
selectedPayment === "paypal" |
|
|
? convertedAmount.find((item) => item.item_key === "shipping_fee") |
|
|
?.converted_amount || 0 |
|
|
: orderData?.shipping_fee; |
|
|
} |
|
|
setOrderData(createOrderData || {}); |
|
|
const data = { |
|
|
pay_method: selectedPayment, |
|
|
offline_payment: currentTab === "offline" ? 0 : 1, |
|
|
all_price: |
|
|
selectedPayment === "paypal" |
|
|
? convertedAmount.reduce( |
|
|
(acc, item) => acc + item.converted_amount, |
|
|
0 |
|
|
) |
|
|
: Number( |
|
|
( |
|
|
(previewOrder?.total_amount || 0) + |
|
|
(orderData?.domestic_shipping_fee || 0) + |
|
|
(orderData?.shipping_fee || 0) |
|
|
).toFixed(2) |
|
|
), |
|
|
all_quantity: previewOrder?.items?.reduce( |
|
|
(acc, item) => acc + item.quantity, |
|
|
0 |
|
|
), |
|
|
currency: selectedCurrency, |
|
|
shipping_method: orderData?.transport_type || 0, |
|
|
shipping_price_outside: orderData?.shipping_fee || 0, |
|
|
shipping_price_within: orderData?.domestic_shipping_fee || 0, |
|
|
timestamp: new Date().toISOString(), |
|
|
pay_product: JSON.stringify( |
|
|
previewOrder?.items.map((item) => { |
|
|
return { |
|
|
offer_id: item.offer_id, |
|
|
price: item.unit_price, |
|
|
all_price: |
|
|
convertedAmount.find((item) => item.item_key === "total_amount") |
|
|
?.converted_amount || 0, |
|
|
currency: previewOrder.currency, |
|
|
sku: item.attributes.map((sku) => { |
|
|
return { |
|
|
sku_id: item.sku_id, |
|
|
value: sku.value, |
|
|
}; |
|
|
}), |
|
|
quantity: item.quantity, |
|
|
product_name: item.product_name, |
|
|
timestamp: new Date(), |
|
|
product_img: item.sku_image_url, |
|
|
}; |
|
|
}) |
|
|
), |
|
|
}; |
|
|
setCreateLoading(true); |
|
|
|
|
|
ordersApi |
|
|
.createOrder(createOrderData as unknown as CreateOrderRequest) |
|
|
.then((res) => { |
|
|
setCreateLoading(false); |
|
|
logPaymentConfirm( |
|
|
data, |
|
|
navigation.getState().routes[navigation.getState().index - 1] |
|
|
?.name as string |
|
|
); |
|
|
// go to payment preview |
|
|
console.log(getBurialPointData()); |
|
|
|
|
|
navigation.navigate("PreviewOrder", { |
|
|
data: res, |
|
|
payMethod: selectedPayment, |
|
|
currency: |
|
|
selectedPayment === "paypal" ? selectedCurrency : user.currency, |
|
|
amount: |
|
|
selectedPayment === "paypal" |
|
|
? convertedAmount.reduce( |
|
|
(acc, item) => acc + item.converted_amount, |
|
|
0 |
|
|
) |
|
|
: Number( |
|
|
( |
|
|
(previewOrder?.total_amount || 0) + |
|
|
(createOrderData?.domestic_shipping_fee || 0) + |
|
|
(createOrderData?.shipping_fee || 0) |
|
|
).toFixed(2) |
|
|
), |
|
|
}); |
|
|
}) |
|
|
.catch((error) => { |
|
|
setCreateLoading(false); |
|
|
console.error("Error creating order:", error); |
|
|
Alert.alert("Error", "Failed to create order"); |
|
|
}); |
|
|
}; |
|
|
return ( |
|
|
<SafeAreaView style={styles.safeArea}> |
|
|
<StatusBar barStyle="dark-content" backgroundColor="#fff" /> |
|
|
<View style={styles.safeAreaContent}> |
|
|
<View style={styles.titleContainer}> |
|
|
<View style={styles.backIconContainer}> |
|
|
<TouchableOpacity onPress={() => navigation.goBack()}> |
|
|
<BackIcon size={20} /> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
<Text style={styles.titleHeading}>{t("payment.select_payment")}</Text> |
|
|
</View> |
|
|
<View style={styles.container}> |
|
|
{loading ? ( |
|
|
<View style={styles.loadingContainer}> |
|
|
<ActivityIndicator size="large" color="#ff6000" /> |
|
|
</View> |
|
|
) : ( |
|
|
<ScrollView |
|
|
style={styles.scrollContent} |
|
|
showsVerticalScrollIndicator={false} |
|
|
> |
|
|
<View style={styles.mainContent}> |
|
|
<View style={styles.sectionContainer}> |
|
|
<View style={styles.sectionHeaderBottom}> |
|
|
<Text style={styles.sectionTitleBottom}> |
|
|
{t("order.preview.payment_method")} |
|
|
</Text> |
|
|
</View> |
|
|
|
|
|
<View style={styles.tabsContainer}> |
|
|
{tabs.map((tab) => ( |
|
|
<TouchableOpacity |
|
|
key={tab.id} |
|
|
style={[ |
|
|
styles.tabBottom, |
|
|
currentTab === tab.id && styles.activeTab, |
|
|
]} |
|
|
onPress={() => setCurrentTab(tab.id)} |
|
|
> |
|
|
<Text |
|
|
style={[ |
|
|
styles.tabText, |
|
|
currentTab === tab.id && styles.activeTabText, |
|
|
]} |
|
|
> |
|
|
{tab.label} |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
))} |
|
|
</View> |
|
|
|
|
|
<View style={styles.tabContent}> |
|
|
{tabs |
|
|
.find((tab) => tab.id === currentTab) |
|
|
?.options.map((option) => ( |
|
|
<PaymentMethodItem |
|
|
key={option.id} |
|
|
option={option} |
|
|
isSelected={selectedPayment === option.id} |
|
|
onSelect={() => onSelectPayment(option.id)} |
|
|
selectedCurrency={selectedCurrency} |
|
|
onSelectCurrency={ |
|
|
option.id === "paypal" |
|
|
? onSelectCurrency |
|
|
: undefined |
|
|
} |
|
|
exchangeRates={exchangeRates} |
|
|
totalAmount={totalAmount} |
|
|
convertedAmount={convertedAmount} |
|
|
isConverting={isConverting} |
|
|
isPaypalExpanded={isPaypalExpanded} |
|
|
/> |
|
|
))} |
|
|
</View> |
|
|
</View> |
|
|
<View style={styles.sectionContainer}> |
|
|
<View style={styles.sectionHeader1}> |
|
|
<Text style={styles.sectionIcon1}>📦</Text> |
|
|
<Text style={styles.sectionTitle1}> |
|
|
{t("payment.order_summary")} |
|
|
</Text> |
|
|
</View> |
|
|
<View style={styles.setOrderContent}> |
|
|
<Text style={styles.noCouponsMessage}> |
|
|
{t("payment.product_total")}( |
|
|
{previewOrder?.items?.length || 0} items) |
|
|
</Text> |
|
|
<TouchableOpacity onPress={toggleExpanded}> |
|
|
<Text style={styles.sectionAction}> |
|
|
{isPaypalExpanded |
|
|
? t("payment.hide_details") |
|
|
: t("payment.view_details")} |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
<View |
|
|
style={[ |
|
|
styles.orderItems, |
|
|
isPaypalExpanded && styles.orderItemsExpanded, |
|
|
]} |
|
|
> |
|
|
{previewOrder?.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.sku_attributes?.map((attribute) => ( |
|
|
<Text |
|
|
style={styles.itemVariant} |
|
|
key={attribute?.attribute_value} |
|
|
numberOfLines={1} |
|
|
> |
|
|
{attribute?.attribute_name}:{" "} |
|
|
{attribute?.attribute_value} |
|
|
</Text> |
|
|
))} |
|
|
<Text style={styles.itemQuantity}> |
|
|
{t("payment.qty")}: {item.quantity} |
|
|
</Text> |
|
|
</View> |
|
|
<View style={styles.itemPrices}> |
|
|
<Text style={styles.itemPrice}> |
|
|
${item?.total_price} |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
))} |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
<View style={styles.priceBox}> |
|
|
<View style={styles.priceBox1}> |
|
|
<Text>{t("payment.product_total")}</Text> |
|
|
<View> |
|
|
<Text> |
|
|
{selectedPayment === "paypal" |
|
|
? convertedAmount.find( |
|
|
(item) => item.item_key === "total_amount" |
|
|
)?.converted_amount || 0 |
|
|
: previewOrder?.total_amount || 0}{" "} |
|
|
{selectedPayment === "paypal" |
|
|
? selectedCurrency === "USD" |
|
|
? "USD" |
|
|
: "EUR" |
|
|
: previewOrder?.currency} |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
<View style={styles.priceBox1}> |
|
|
<Text>{t("payment.domestic_shipping")}</Text> |
|
|
<View> |
|
|
<Text> |
|
|
{selectedPayment === "paypal" |
|
|
? convertedAmount.find( |
|
|
(item) => item.item_key === "domestic_shipping_fee" |
|
|
)?.converted_amount || 0 |
|
|
: orderData?.domestic_shipping_fee || 0}{" "} |
|
|
{selectedPayment === "paypal" |
|
|
? selectedCurrency === "USD" |
|
|
? "USD" |
|
|
: "EUR" |
|
|
: previewOrder?.currency} |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
<View style={styles.priceBox1}> |
|
|
<Text>{t("payment.international_shipping")}</Text> |
|
|
<View> |
|
|
<Text> |
|
|
{selectedPayment === "paypal" |
|
|
? convertedAmount.find( |
|
|
(item) => item.item_key === "shipping_fee" |
|
|
)?.converted_amount || 0 |
|
|
: orderData?.shipping_fee || 0}{" "} |
|
|
{selectedPayment === "paypal" |
|
|
? selectedCurrency === "USD" |
|
|
? "USD" |
|
|
: "EUR" |
|
|
: previewOrder?.currency} |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
{/* 实际支付金额 */} |
|
|
<View style={styles.actualPaymentBox}> |
|
|
<View style={styles.actualPaymentBox1}> |
|
|
<Text |
|
|
style={{ |
|
|
fontSize: fontSize(18), |
|
|
fontWeight: "600", |
|
|
color: "#000", |
|
|
}} |
|
|
> |
|
|
{t("payment.total")} |
|
|
</Text> |
|
|
{selectedPayment === "paypal" && |
|
|
selectedCurrency !== user.currency && ( |
|
|
<View style={{ flexDirection: "row" }}> |
|
|
<Text |
|
|
style={{ |
|
|
fontSize: fontSize(18), |
|
|
fontWeight: "600", |
|
|
color: "#151515", |
|
|
textDecorationLine: "line-through", |
|
|
}} |
|
|
> |
|
|
{( |
|
|
(previewOrder?.total_amount || 0) + |
|
|
(createOrderData?.domestic_shipping_fee || 0) + |
|
|
(createOrderData?.shipping_fee || 0) |
|
|
).toFixed(2)}{" "} |
|
|
{previewOrder?.currency} |
|
|
</Text> |
|
|
<Text |
|
|
style={{ |
|
|
fontSize: fontSize(18), |
|
|
fontWeight: "600", |
|
|
color: "#ff6000", |
|
|
marginLeft: 10, |
|
|
}} |
|
|
> |
|
|
{convertedAmount |
|
|
.reduce( |
|
|
(acc, item) => acc + item.converted_amount, |
|
|
0 |
|
|
) |
|
|
.toFixed(2)} |
|
|
{selectedCurrency === "USD" ? "USD" : "EUR"} |
|
|
</Text> |
|
|
</View> |
|
|
)} |
|
|
{selectedPayment === "paypal" && |
|
|
selectedCurrency === user.currency && ( |
|
|
<View style={{ flexDirection: "row" }}> |
|
|
<Text |
|
|
style={{ |
|
|
fontSize: fontSize(18), |
|
|
fontWeight: "600", |
|
|
color: "#ff6000", |
|
|
}} |
|
|
> |
|
|
{convertedAmount |
|
|
.reduce( |
|
|
(acc, item) => acc + item.converted_amount, |
|
|
0 |
|
|
) |
|
|
.toFixed(2)} |
|
|
{selectedCurrency === "USD" ? "USD" : "EUR"} |
|
|
</Text> |
|
|
</View> |
|
|
)} |
|
|
{selectedPayment !== "paypal" && ( |
|
|
<Text |
|
|
style={{ |
|
|
fontSize: fontSize(18), |
|
|
fontWeight: "600", |
|
|
color: "#ff6000", |
|
|
}} |
|
|
> |
|
|
{( |
|
|
(previewOrder?.total_amount || 0) + |
|
|
(createOrderData?.domestic_shipping_fee || 0) + |
|
|
(createOrderData?.shipping_fee || 0) |
|
|
).toFixed(2)}{" "} |
|
|
{previewOrder?.currency} |
|
|
</Text> |
|
|
)} |
|
|
</View> |
|
|
</View> |
|
|
</ScrollView> |
|
|
)} |
|
|
<View style={styles.bottomBar}> |
|
|
<TouchableOpacity |
|
|
style={[ |
|
|
styles.submitButton, |
|
|
(!selectedPayment || createLoading || isConverting) && |
|
|
styles.disabledButton, |
|
|
]} |
|
|
onPress={handleSubmit} |
|
|
disabled={!selectedPayment || createLoading || isConverting} |
|
|
> |
|
|
{createLoading ? ( |
|
|
<ActivityIndicator size="small" color="#fff" /> |
|
|
) : isConverting ? ( |
|
|
<Text style={styles.submitButtonText}> |
|
|
{t("payment.converting")} |
|
|
</Text> |
|
|
) : ( |
|
|
<Text style={styles.submitButtonText}> |
|
|
{t("payment.submit_order")} |
|
|
</Text> |
|
|
)} |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</SafeAreaView> |
|
|
); |
|
|
}; |
|
|
const styles = StyleSheet.create({ |
|
|
safeArea: { |
|
|
flex: 1, |
|
|
backgroundColor: "#fff", |
|
|
}, |
|
|
safeAreaContent: { |
|
|
flex: 1, |
|
|
paddingTop: 0, |
|
|
}, |
|
|
container: { |
|
|
flex: 1, |
|
|
backgroundColor: "#fff", |
|
|
}, |
|
|
sectionHeader: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
marginBottom: 15, |
|
|
paddingHorizontal: 15, |
|
|
}, |
|
|
sectionIcon: { |
|
|
fontSize: fontSize(20), |
|
|
marginRight: 8, |
|
|
}, |
|
|
sectionTitle: { |
|
|
fontSize: fontSize(18), |
|
|
fontWeight: "600", |
|
|
color: "#000", |
|
|
}, |
|
|
tabContainer: { |
|
|
flexDirection: "row", |
|
|
marginBottom: 15, |
|
|
borderBottomWidth: 1, |
|
|
borderBottomColor: "#EEEEEE", |
|
|
paddingHorizontal: 15, |
|
|
}, |
|
|
tabButton: { |
|
|
paddingVertical: 10, |
|
|
paddingHorizontal: 15, |
|
|
marginRight: 10, |
|
|
}, |
|
|
tabButtonActive: { |
|
|
borderBottomWidth: 2, |
|
|
borderBottomColor: "#FF5100", |
|
|
}, |
|
|
tabText: { |
|
|
fontSize: fontSize(16), |
|
|
color: "#666", |
|
|
}, |
|
|
tabTextActive: { |
|
|
color: "#FF5100", |
|
|
fontWeight: "500", |
|
|
}, |
|
|
paymentOptions: { |
|
|
marginBottom: 15, |
|
|
paddingHorizontal: 15, |
|
|
}, |
|
|
paymentOption: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
justifyContent: "space-between", |
|
|
padding: 15, |
|
|
backgroundColor: "#F8F8F8", |
|
|
borderRadius: 8, |
|
|
marginBottom: 10, |
|
|
}, |
|
|
paymentSelected: { |
|
|
backgroundColor: "#FFF0E8", |
|
|
borderWidth: 1, |
|
|
borderColor: "#FF5100", |
|
|
}, |
|
|
paymentContent: { |
|
|
flex: 1, |
|
|
}, |
|
|
defaultPaymentContainer: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
}, |
|
|
paymentIcon: { |
|
|
fontSize: fontSize(24), |
|
|
marginRight: 8, |
|
|
}, |
|
|
paymentLabel: { |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "500", |
|
|
}, |
|
|
operatorContainer: { |
|
|
flexDirection: "row", |
|
|
flexWrap: "wrap", |
|
|
marginTop: 8, |
|
|
}, |
|
|
operatorBox: { |
|
|
backgroundColor: "#fff", |
|
|
paddingVertical: 4, |
|
|
paddingHorizontal: 8, |
|
|
borderRadius: 4, |
|
|
marginRight: 8, |
|
|
marginBottom: 4, |
|
|
}, |
|
|
operatorText: { |
|
|
fontSize: fontSize(12), |
|
|
color: "#666", |
|
|
}, |
|
|
radioButton: { |
|
|
width: widthUtils(20, 20).width, |
|
|
height: widthUtils(20, 20).height, |
|
|
borderRadius: 10, |
|
|
borderWidth: 1, |
|
|
borderColor: "#CCCCCC", |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
}, |
|
|
radioInner: { |
|
|
width: widthUtils(12, 12).width, |
|
|
height: widthUtils(12, 12).height, |
|
|
borderRadius: 6, |
|
|
backgroundColor: "transparent", |
|
|
}, |
|
|
radioInnerSelected: { |
|
|
backgroundColor: "#FF5100", |
|
|
}, |
|
|
titleContainer: { |
|
|
width: "100%", |
|
|
padding: 15, |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
justifyContent: "center", |
|
|
position: "relative", |
|
|
backgroundColor: "#fff", |
|
|
}, |
|
|
backIconContainer: { |
|
|
position: "absolute", |
|
|
left: 15, |
|
|
backgroundColor: "#fff", |
|
|
}, |
|
|
titleHeading: { |
|
|
fontWeight: "600", |
|
|
fontSize: fontSize(18), |
|
|
lineHeight: 22, |
|
|
fontFamily: "PingFang SC", |
|
|
color: "black", |
|
|
}, |
|
|
// Order Summary Styles |
|
|
section: { |
|
|
backgroundColor: "#fff", |
|
|
borderRadius: 8, |
|
|
paddingHorizontal: 15, |
|
|
marginTop: 15, |
|
|
}, |
|
|
section1: { |
|
|
backgroundColor: "#fff", |
|
|
borderRadius: 8, |
|
|
overflow: "hidden", |
|
|
}, |
|
|
sectionHeader1: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
paddingTop: 12, |
|
|
paddingBottom: 12, |
|
|
borderBottomWidth: 1, |
|
|
borderBottomColor: "#f5f5f5", |
|
|
}, |
|
|
sectionIcon1: { |
|
|
fontSize: fontSize(18), |
|
|
marginRight: 10, |
|
|
color: "#666", |
|
|
}, |
|
|
sectionTitle1: { |
|
|
fontSize: fontSize(15), |
|
|
fontWeight: "500", |
|
|
flex: 1, |
|
|
}, |
|
|
setOrderContent: { |
|
|
flexDirection: "row", |
|
|
justifyContent: "space-between", |
|
|
alignItems: "center", |
|
|
paddingTop: 12, |
|
|
paddingBottom: 12, |
|
|
paddingHorizontal: 12, |
|
|
}, |
|
|
sectionAction: { |
|
|
color: "#ff6000", |
|
|
fontSize: fontSize(13), |
|
|
fontWeight: "500", |
|
|
}, |
|
|
noCouponsMessage: { |
|
|
color: "#888", |
|
|
fontSize: fontSize(13), |
|
|
}, |
|
|
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, |
|
|
}, |
|
|
priceBox: { |
|
|
borderRadius: 10, |
|
|
marginTop: 15, |
|
|
paddingHorizontal: 15, |
|
|
}, |
|
|
priceBox1: { |
|
|
justifyContent: "space-between", |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
padding: 12, |
|
|
borderBottomWidth: 1, |
|
|
borderBottomColor: "#f5f5f5", |
|
|
}, |
|
|
actualPaymentBox: { |
|
|
padding: 12, |
|
|
borderRadius: 6, |
|
|
backgroundColor: "#fff8f4", |
|
|
marginTop: 15, |
|
|
marginHorizontal: 15, |
|
|
marginBottom: 20, |
|
|
}, |
|
|
actualPaymentBox1: { |
|
|
flexDirection: "row", |
|
|
justifyContent: "space-between", |
|
|
alignItems: "center", |
|
|
}, |
|
|
loadingContainer: { |
|
|
flex: 1, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
backgroundColor: "#fff", |
|
|
}, |
|
|
submitButtonContainer: { |
|
|
paddingRight: 11, |
|
|
paddingLeft: 11, |
|
|
marginTop: 20, |
|
|
marginBottom: 20, |
|
|
}, |
|
|
primaryButtonStyle: { |
|
|
width: "100%", |
|
|
height: widthUtils(50, 50).height, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
fontWeight: "600", |
|
|
fontSize: fontSize(16), |
|
|
lineHeight: 22, |
|
|
fontFamily: "PingFang SC", |
|
|
color: "white", |
|
|
backgroundColor: "#002fa7", |
|
|
borderWidth: 0, |
|
|
borderRadius: 25, |
|
|
}, |
|
|
buttonText: { |
|
|
color: "white", |
|
|
fontWeight: "600", |
|
|
fontSize: fontSize(16), |
|
|
lineHeight: 22, |
|
|
fontFamily: "PingFang SC", |
|
|
}, |
|
|
selectedCountryText: { |
|
|
padding: 0, |
|
|
margin: 0, |
|
|
fontWeight: "500", |
|
|
fontSize: fontSize(16), |
|
|
lineHeight: 22, |
|
|
fontFamily: "PingFang SC", |
|
|
color: "#646472", |
|
|
}, |
|
|
disabledButtonStyle: { |
|
|
backgroundColor: "#ccc", |
|
|
}, |
|
|
currencySelectorContainer: { |
|
|
padding: 15, |
|
|
backgroundColor: "#f9f9f9", |
|
|
borderRadius: 8, |
|
|
marginTop: 5, |
|
|
marginBottom: 15, |
|
|
}, |
|
|
currencySelectorTitle: { |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "600", |
|
|
color: "#000", |
|
|
marginBottom: 15, |
|
|
}, |
|
|
currencyOptions: { |
|
|
flexDirection: "row", |
|
|
marginBottom: 15, |
|
|
}, |
|
|
currencyOption: { |
|
|
flex: 1, |
|
|
padding: 15, |
|
|
borderWidth: 1, |
|
|
borderColor: "#DDDDDD", |
|
|
borderRadius: 4, |
|
|
marginRight: 10, |
|
|
alignItems: "center", |
|
|
justifyContent: "center", |
|
|
}, |
|
|
selectedCurrencyOption: { |
|
|
borderColor: "#002fa7", |
|
|
backgroundColor: "#fff", |
|
|
}, |
|
|
currencyText: { |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "500", |
|
|
color: "#000", |
|
|
}, |
|
|
exchangeRateContainer: { |
|
|
marginBottom: 15, |
|
|
}, |
|
|
exchangeRateText: { |
|
|
fontSize: fontSize(14), |
|
|
color: "#666", |
|
|
marginBottom: 5, |
|
|
}, |
|
|
totalContainer: { |
|
|
marginTop: 10, |
|
|
borderTopWidth: 1, |
|
|
borderTopColor: "#EEEEEE", |
|
|
paddingTop: 10, |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
}, |
|
|
totalText: { |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "600", |
|
|
color: "#ff6000", |
|
|
}, |
|
|
loadingIndicator: { |
|
|
marginLeft: 10, |
|
|
}, |
|
|
header: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
justifyContent: "center", |
|
|
padding: 10, |
|
|
position: "relative", |
|
|
}, |
|
|
backButton: { |
|
|
padding: 5, |
|
|
position: "absolute", |
|
|
left: 10, |
|
|
zIndex: 1, |
|
|
}, |
|
|
headerTitle: { |
|
|
fontSize: fontSize(20), |
|
|
fontWeight: "600", |
|
|
textAlign: "center", |
|
|
}, |
|
|
paymentContainer: { |
|
|
padding: 15, |
|
|
}, |
|
|
tabs: { |
|
|
flexDirection: "row", |
|
|
marginBottom: 15, |
|
|
}, |
|
|
tab: { |
|
|
paddingVertical: 10, |
|
|
paddingHorizontal: 15, |
|
|
marginRight: 10, |
|
|
}, |
|
|
tabActive: { |
|
|
borderBottomWidth: 2, |
|
|
borderBottomColor: "#FF5100", |
|
|
}, |
|
|
bottomBar: { |
|
|
padding: 15, |
|
|
borderTopWidth: 1, |
|
|
borderTopColor: "#f5f5f5", |
|
|
}, |
|
|
submitButton: { |
|
|
width: "100%", |
|
|
height: widthUtils(50, 50).height, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
backgroundColor: "#FF5100", |
|
|
borderRadius: 25, |
|
|
}, |
|
|
submitButtonText: { |
|
|
color: "white", |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "600", |
|
|
}, |
|
|
disabledButton: { |
|
|
backgroundColor: "#ccc", |
|
|
}, |
|
|
scrollContent: { |
|
|
flex: 1, |
|
|
}, |
|
|
mainContent: { |
|
|
flex: 1, |
|
|
}, |
|
|
sectionContainer: { |
|
|
padding: 15, |
|
|
}, |
|
|
sectionHeaderBottom: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
marginBottom: 15, |
|
|
}, |
|
|
sectionIconBottom: { |
|
|
fontSize: fontSize(20), |
|
|
marginRight: 8, |
|
|
}, |
|
|
sectionTitleBottom: { |
|
|
fontSize: fontSize(18), |
|
|
fontWeight: "600", |
|
|
color: "#000", |
|
|
}, |
|
|
tabsContainer: { |
|
|
flexDirection: "row", |
|
|
marginBottom: 15, |
|
|
}, |
|
|
tabBottom: { |
|
|
paddingVertical: 10, |
|
|
paddingHorizontal: 15, |
|
|
marginRight: 10, |
|
|
}, |
|
|
activeTab: { |
|
|
borderBottomWidth: 2, |
|
|
borderBottomColor: "#FF5100", |
|
|
}, |
|
|
activeTabText: { |
|
|
color: "#FF5100", |
|
|
fontWeight: "500", |
|
|
}, |
|
|
tabContent: { |
|
|
marginBottom: 15, |
|
|
}, |
|
|
cardContainer: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
justifyContent: "space-between", |
|
|
paddingHorizontal: 15, |
|
|
paddingVertical: 10, |
|
|
backgroundColor: "#F8F8F8", |
|
|
borderRadius: 8, |
|
|
marginBottom: 10, |
|
|
minHeight: 60, |
|
|
}, |
|
|
leftInfo: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
flex: 1, |
|
|
}, |
|
|
blueBox: { |
|
|
borderRadius: 4, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
marginRight: 10, |
|
|
width: widthUtils(30, 80).width, |
|
|
height: widthUtils(30, 30).height, |
|
|
backgroundColor: "#3955f6", |
|
|
}, |
|
|
operatorImage: { |
|
|
width: widthUtils(30, 80).width, |
|
|
height: widthUtils(30, 30).height, |
|
|
borderRadius: 4, |
|
|
resizeMode: "contain", |
|
|
}, |
|
|
balanceText: { |
|
|
fontSize: fontSize(14), |
|
|
fontWeight: "500", |
|
|
color: "#030303", |
|
|
marginLeft: 10, |
|
|
lineHeight: 18, |
|
|
}, |
|
|
iconRow: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
flex: 1, |
|
|
}, |
|
|
imageContainer: { |
|
|
flexDirection: "column", |
|
|
alignItems: "flex-start", |
|
|
}, |
|
|
mobileMoneyTextContainer: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
marginTop: 5, |
|
|
}, |
|
|
mobileMoneyImgContainer: { |
|
|
width: widthUtils(30, 80).width, |
|
|
height: widthUtils(30, 30).height, |
|
|
borderWidth: 0, |
|
|
marginRight: 5, |
|
|
}, |
|
|
mobileMoneyImg: { |
|
|
width: widthUtils(30, 80).width, |
|
|
height: widthUtils(30, 30).height, |
|
|
borderWidth: 0, |
|
|
resizeMode: "contain", |
|
|
}, |
|
|
mobileMoneyText: { |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "500", |
|
|
color: "#000", |
|
|
}, |
|
|
checkboxContainer: { |
|
|
position: "relative", |
|
|
width: fontSize(24), |
|
|
height: fontSize(24), |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
marginLeft: 10, |
|
|
}, |
|
|
checkmarkContainer: { |
|
|
position: "absolute", |
|
|
top: 0, |
|
|
left: 0, |
|
|
right: 0, |
|
|
bottom: 0, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
}, |
|
|
paypalExpandedContainer: { |
|
|
backgroundColor: "#f8f8f8", |
|
|
borderRadius: 8, |
|
|
marginTop: -5, |
|
|
marginBottom: 10, |
|
|
paddingHorizontal: 15, |
|
|
paddingBottom: 15, |
|
|
}, |
|
|
paypalCurrencyContainer: { |
|
|
padding: 10, |
|
|
}, |
|
|
currencyTitle: { |
|
|
fontSize: fontSize(14), |
|
|
color: "#666", |
|
|
marginBottom: 10, |
|
|
}, |
|
|
currencyButtonsContainer: { |
|
|
flexDirection: "row", |
|
|
marginBottom: 10, |
|
|
}, |
|
|
currencyButton: { |
|
|
paddingVertical: 8, |
|
|
paddingHorizontal: 15, |
|
|
borderRadius: 20, |
|
|
borderWidth: 1, |
|
|
borderColor: "#ddd", |
|
|
marginRight: 10, |
|
|
}, |
|
|
currencyButtonActive: { |
|
|
backgroundColor: "#FFF0E8", |
|
|
borderColor: "#FF5100", |
|
|
}, |
|
|
currencyButtonText: { |
|
|
fontSize: fontSize(14), |
|
|
color: "#333", |
|
|
}, |
|
|
currencyButtonTextActive: { |
|
|
color: "#FF5100", |
|
|
fontWeight: "600", |
|
|
}, |
|
|
convertingContainer: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
justifyContent: "flex-end", |
|
|
marginTop: 10, |
|
|
}, |
|
|
convertingText: { |
|
|
fontSize: fontSize(14), |
|
|
color: "#999", |
|
|
marginLeft: 10, |
|
|
}, |
|
|
convertedAmountContainer: { |
|
|
marginTop: 10, |
|
|
}, |
|
|
convertedAmountLabel: { |
|
|
fontSize: fontSize(14), |
|
|
color: "#666", |
|
|
marginBottom: 5, |
|
|
}, |
|
|
convertedAmountValue: { |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "600", |
|
|
color: "#FF5100", |
|
|
}, |
|
|
});
|
|
|
|
