water-sys/app/screens/previewOrder/PaymentMethod.tsx

import React, { useState, useEffect } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  Image,
  Alert,
  ActivityIndicator,
} 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 {
  ordersApi,
  OrderData, CreateOrderRequest,
} from "../../services/api/orders";


// Define route params type
type PaymentMethodRouteParams = {
  freight_forwarder_address_id?: number;
};

// Define the root navigation params
type RootStackParamList = {
  PreviewOrder: undefined;
  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[];
}

interface PaymentTab {
  id: string;
  label: string;
  options: PaymentOption[];
}

const PaymentMethodItem = ({
  option,
  isSelected,
  onSelect,
  selectedCurrency,
  onSelectCurrency,
  exchangeRates,
  totalAmount,
  convertedAmount,
  isConverting,
}: {
  option: PaymentOption;
  isSelected: boolean;
  onSelect: () => void;
  selectedCurrency?: string;
  onSelectCurrency?: (currency: string) => void;
  exchangeRates?: {
    usd: number;
    eur: number;
  };
  totalAmount?: number;
  convertedAmount?: number;
  isConverting?: boolean;
}) => (
  <View>
    <TouchableOpacity
      style={[styles.paymentOption, isSelected && styles.paymentSelected]}
      onPress={onSelect}
    >
      <View style={styles.paymentContent}>
        <View style={styles.defaultPaymentContainer}>
          <Text style={styles.paymentIcon}>{option.icon}</Text>
          <Text style={styles.paymentLabel}>{option.label}</Text>
        </View>
        {Array.isArray(option.value) && option.value.length > 0 && (
          <View style={styles.operatorContainer}>
            {option.value.map((op: string) => (
              <View key={op} style={styles.operatorBox}>
                <Text style={styles.operatorText}>{op}</Text>
              </View>
            ))}
          </View>
        )}
      </View>
      <View style={styles.radioButton}>
        <View
          style={[styles.radioInner, isSelected && styles.radioInnerSelected]}
        />
      </View>
    </TouchableOpacity>
    
    {/* Show currency selector directly under PayPal when selected */}
    {isSelected && option.label === "Paypal" && selectedCurrency && onSelectCurrency && exchangeRates && totalAmount && (
      <CurrencySelector
        selectedCurrency={selectedCurrency}
        onSelectCurrency={onSelectCurrency}
        exchangeRates={exchangeRates}
        totalAmount={totalAmount}
        convertedAmount={convertedAmount}
        isConverting={isConverting}
      />
    )}
  </View>
);

// Currency selector component
interface CurrencySelectorProps {
  selectedCurrency: string;
  onSelectCurrency: (currency: string) => void;
  exchangeRates: {
    usd: number;
    eur: number;
  };
  totalAmount: number;
  convertedAmount?: number;
  isConverting?: boolean;
}

const CurrencySelector = ({
  selectedCurrency,
  onSelectCurrency,
  exchangeRates,
  totalAmount,
  convertedAmount = 0,
  isConverting = false,
}: CurrencySelectorProps) => (
  <View style={styles.currencySelectorContainer}>
    <Text style={styles.currencySelectorTitle}>Select Currency</Text>
    <View style={styles.currencyOptions}>
      <TouchableOpacity
        style={[
          styles.currencyOption,
          selectedCurrency === "USD" && styles.selectedCurrencyOption,
        ]}
        onPress={() => onSelectCurrency("USD")}
      >
        <Text style={styles.currencyText}>USD</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={[
          styles.currencyOption,
          selectedCurrency === "EUR" && styles.selectedCurrencyOption,
        ]}
        onPress={() => onSelectCurrency("EUR")}
      >
        <Text style={styles.currencyText}>EUR</Text>
      </TouchableOpacity>
    </View>
    
    <View style={styles.totalContainer}>
    {!isConverting && (
      <Text style={styles.totalText}>
        {selectedCurrency === "USD" ? "$" : "€"}{convertedAmount}
      </Text>
      )}
      {isConverting && (
        <ActivityIndicator size="small" color="#ff6000" style={styles.loadingIndicator} />
      )}
    </View>
  </View>
);

export const PaymentMethod = () => {
  const [tabs, setTabs] = useState<PaymentTab[]>([
    {
      id: "online",
      label: "Online Payment",
      options: [],
    },
    {
      id: "offline",
      label: "Offline Payment",
      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 [expanded, setExpanded] = 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 } = useCreateOrderStore();
  const [selectedCurrency, setSelectedCurrency] = useState("USD");
  const [convertedAmount, setConvertedAmount] = useState(0);
  const [isConverting, setIsConverting] = useState(false);
  const [exchangeRates] = useState({
    usd: 580.00,
    eur: 655.96
  });
  const [totalAmount, setTotalAmount] = useState(121.97);
  const toggleExpanded = () => {
    setExpanded(!expanded);
  };

  const onSelectPayment = (paymentId: string) => {
    if(paymentId === "Paypal"){
      setIsConverting(true);
      payApi.convertCurrency({
        from_currency: user.currency,
        to_currency: selectedCurrency,
        amount: (
          (previewOrder?.total_amount || 0) +
          (createOrderData?.domestic_shipping_fee || 0) +
          (createOrderData?.shipping_fee || 0)
        ),
      }).then((res) => {
        setConvertedAmount(res.converted_amount);
        setIsConverting(false);
      }).catch(error => {
        console.error("Currency conversion failed:", error);
        setIsConverting(false);
      });
    }
    
    setSelectedPayment(paymentId);
  };

  const onSelectCurrency = (currency: string) => {    
    setSelectedCurrency(currency);
    
    // Call the API to convert the currency
    setIsConverting(true);
    payApi.convertCurrency({
      from_currency: user.currency,
      to_currency: currency,
      amount: (
        (previewOrder?.total_amount || 0) +
        (createOrderData?.domestic_shipping_fee || 0) +
        (createOrderData?.shipping_fee || 0)
      ),
    }).then((res) => {
      setConvertedAmount(res.converted_amount);
      setIsConverting(false);
    }).catch(error => {
      console.error("Currency conversion failed:", error);
      setIsConverting(false);
    });
  };

  const getPaymentMethods = async () => {
    try {
      const response = await payApi.getCountryPaymentMethods();

      setPaymentMethods(response);
      // 设置默认支付方式选项
      setTabs([
        {
          id: "online",
          label: "Online Payment",
          options: response.current_country_methods.map((method) => ({
            id: method.key,
            label: method.key,
            icon: getPaymentIcon(method.key),
            value: method.value,
          })),
        },
        {
          id: "offline",
          label: "Offline Payment",
          options: [],
        },
      ]);
    } catch (error) {
      console.error("获取支付方式失败:", error);
    }
  };

  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("请选择支付方式");
      return;
    }
    const items =
      previewOrder?.items.map((item) => ({
        offer_id: item.offer_id,
        cart_item_id: item.cart_item_id,
        sku_id: 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 :
          Number(((previewOrder?.total_amount || 0) + (orderData?.domestic_shipping_fee || 0)
          + (orderData?.shipping_fee || 0)).toFixed(2));
      createOrderData.actual_amount = Number((previewOrder?.total_amount || 0).toFixed(2));
      createOrderData.currency = selectedPayment === 'Paypal' ? selectedCurrency : user.currency;

    }
    setOrderData(createOrderData || {});

    const res = await ordersApi.createOrder(createOrderData as CreateOrderRequest)
    console.log(res)
    navigation.navigate("PreviewOrder");
  };

  return (
    <View style={{ flex: 1, backgroundColor: "#fff" }}>
      <View style={styles.titleContainer}>
        <View style={styles.backIconContainer}>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <BackIcon size={20} />
          </TouchableOpacity>
        </View>

        <Text style={styles.titleHeading}>Payment Method</Text>
      </View>

      {loading ? (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#f77f3a" />
        </View>
      ) : (
        <ScrollView 
          style={[styles.container, { backgroundColor: "#fff" }]} 
          showsVerticalScrollIndicator={false} 
          bounces={false} 
          overScrollMode="never"
        >
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionIcon}>💳</Text>
            <Text style={styles.sectionTitle}>Payment Method</Text>
          </View>

          {/* 选项卡 */}
          <View style={styles.tabContainer}>
            {tabs.map((tab) => (
              <TouchableOpacity
                key={tab.id}
                style={[
                  styles.tabButton,
                  currentTab === tab.id && styles.tabButtonActive,
                ]}
                onPress={() => {        
                  console.log(tab.id);
                  
                  setCurrentTab(tab.id)
                }}
              >
                <Text
                  style={[
                    styles.tabText,
                    currentTab === tab.id && styles.tabTextActive,
                  ]}
                >
                  {tab.label}
                </Text>
              </TouchableOpacity>
            ))}
          </View>

          {/* 支付选项 */}
          <View style={styles.paymentOptions}>
            {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={onSelectCurrency}
                  exchangeRates={exchangeRates}
                  totalAmount={totalAmount}
                  convertedAmount={convertedAmount}
                  isConverting={isConverting}
                />
              ))}
          </View>

          {/* Order Summary Section */}
          <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({previewOrder?.items?.length || 0} items)
                </Text>
                <TouchableOpacity onPress={toggleExpanded}>
                  <Text style={styles.sectionAction}>
                    {expanded ? "Hide Details" : "View Details"}
                  </Text>
                </TouchableOpacity>
              </View>
              <View
                style={[
                  styles.orderItems,
                  expanded && 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}>
                        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>商品总价</Text>
              <View>
                <Text>
                  {previewOrder?.total_amount || 0} {previewOrder?.currency}
                </Text>
              </View>
            </View>
            <View style={styles.priceBox1}>
              <Text>中国运费</Text>
              <View>
                <Text>
                  {createOrderData?.domestic_shipping_fee || 0}{" "}
                  {previewOrder?.currency}
                </Text>
              </View>
            </View>

            <View style={styles.priceBox1}>
              <Text>预计国际运费</Text>
              <View>
                <Text>
                  {createOrderData?.shipping_fee || 0} {previewOrder?.currency}
                </Text>
              </View>
            </View>
          </View>

          {/* 实际支付金额 */}
          <View style={styles.actualPaymentBox}>
            <View style={styles.actualPaymentBox1}>
              <Text
                style={{
                  fontSize: fontSize(18),
                  fontWeight: "600",
                  color: "#000",
                }}
              >
                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}{selectedCurrency === "USD" ? "USD" : "EUR"}
                        </Text>
                      </View>
                  )
              }


              {
                  selectedPayment === 'Paypal' && selectedCurrency === user.currency && (
                      <View style={{flexDirection:'row'}}>
                        <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>
                  )
              }


              {
                  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>

          <View style={styles.submitButtonContainer}>
            <TouchableOpacity
              style={[
                styles.primaryButtonStyle,
                // (isDomesticShippingLoading || domesticShippingFeeData?.total_shipping_fee == null)
                //   ? styles.disabledButtonStyle : {}
              ]}
              onPress={handleSubmit}
              // disabled={isDomesticShippingLoading || domesticShippingFeeData?.total_shipping_fee == null}
            >
              <Text style={styles.buttonText}>创建订单</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    marginTop: 10,
  },
  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: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#CCCCCC",
    justifyContent: "center",
    alignItems: "center",
  },
  radioInner: {
    width: 12,
    height: 12,
    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: 20,
    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: 50,
    justifyContent: "center",
    alignItems: "center",
    fontWeight: "600",
    fontSize: 16,
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "white",
    backgroundColor: "#002fa7",
    borderWidth: 0,
    borderRadius: 25,
  },
  buttonText: {
    color: "white",
    fontWeight: "600",
    fontSize: 16,
    lineHeight: 22,
    fontFamily: "PingFang SC",
  },
  selectedCountryText: {
    padding: 0,
    margin: 0,
    fontWeight: "500",
    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,
  },
});