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

import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  TextInput,
  ScrollView,
  Alert,
  ActivityIndicator,
} from "react-native";
import useCreateOrderStore from "../../store/createOrder";
import BackIcon from "../../components/BackIcon";
import { useNavigation, useRoute, RouteProp } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { useState, useEffect } from "react";
import useUserStore from "../../store/user";
import { Order } from "../../services/api/orders";
import { payApi } from "../../services/api/payApi";

// Define the param list for navigation
type RootStackParamList = {
  PreviewOrder: {
    data: Order;
    payMethod: string;
    currency: string;
    amount: number;
  };
  Pay: { payUrl: string };
};

export const PreviewOrder = () => {
  const { orderData, setOrderData } = useCreateOrderStore();
  const navigation =
    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  const [phoneNumber, setPhoneNumber] = useState("");
  const [showPhoneInput, setShowPhoneInput] = useState(false);
  const route = useRoute<RouteProp<RootStackParamList, "PreviewOrder">>();
  const [loading, setLoading] = useState(false);
  const { user } = useUserStore();

  useEffect(() => {
    if (!user.user_id) {
      return Alert.alert("检查您未登录");
    }
    if (route.params.payMethod === "Brainnel Pay(Mobile Money)") {
      setShowPhoneInput(true);
    } else {
      setShowPhoneInput(false);
    }
  }, [route.params.payMethod, user.user_id]);

  const handleSubmit = () => {
    if (showPhoneInput && !phoneNumber) {
      // Show error or alert if needed
      console.log("Phone number is required for Mobile Money");
      return;
    }

    console.log(route.params.currency);

    const data = {
      order_id: route.params.data.order_id,
      method: route.params.payMethod,
      currency: route.params.currency
        ? route.params.currency
        : route.params.data.currency,
      amount: route.params.data.actual_amount,
    };
    setLoading(true);

    payApi
      .getPayInfo(data)
      .then((res) => {
        if (res.success) {
          ``;
          navigation.navigate("Pay", {
            payUrl: res.payment_url,
          });
        }
      })
      .catch((err) => {
        setLoading(false);
        Alert.alert("支付失败");
      })
      .finally(() => {
        setLoading(false);
      });

    // navigation.navigate('Pay', {
    //   orderId: user.user_id,
    //   payMethod: route.params.payMethod,

    // })
  };

  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <View style={styles.backIconContainer}>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <BackIcon size={20} />
          </TouchableOpacity>
        </View>

        <Text style={styles.titleHeading}>立即支付</Text>
      </View>

      <ScrollView style={styles.scrollContainer}>
        <View style={styles.mainContent}>
          {/* Payment Method Section */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>支付方式</Text>
            <View style={styles.paymentMethodContainer}>
              <Text style={styles.paymentMethodText}>
                {route.params.payMethod}
              </Text>
            </View>

            {showPhoneInput && (
              <View style={styles.phoneInputContainer}>
                <Text style={styles.phoneInputLabel}>请输入手机号码</Text>
                <TextInput
                  style={styles.phoneInput}
                  value={phoneNumber}
                  onChangeText={setPhoneNumber}
                  placeholder="输入手机号码"
                  keyboardType="phone-pad"
                />
              </View>
            )}
          </View>

          {/* Order Info Section */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>支付信息</Text>

            <View style={styles.infoRow}>
              <Text style={styles.infoLabel}>姓名</Text>
              <Text style={styles.infoValue}>
                {route.params?.data.receiver_name || "N/A"}
              </Text>
            </View>

            <View style={styles.infoRow}>
              <Text style={styles.infoLabel}>手机号</Text>
              <Text style={styles.infoValue}>
                {route.params?.data.receiver_phone || "N/A"}
              </Text>
            </View>

            {route.params.data?.whatsapp_number && (
              <View style={styles.infoRow}>
                <Text style={styles.infoLabel}>WhatsApp</Text>
                <Text style={styles.infoValue}>
                  {route.params.data?.whatsapp_number}
                </Text>
              </View>
            )}

            <View style={styles.infoRow}>
              <Text style={styles.infoLabel}>国家</Text>
              <Text style={styles.infoValue}>
                {route.params?.data.receiver_country || "N/A"}
              </Text>
            </View>

            <View style={styles.infoRow}>
              <Text style={styles.infoLabel}>收货地址</Text>
              <Text style={styles.infoValue}>
                {route.params?.data.receiver_address || "N/A"}
              </Text>
            </View>

            <View style={styles.infoRow}>
              <Text style={styles.infoLabel}>订单金额</Text>
              <Text style={styles.infoValue}>
                {route.params.data.actual_amount || "N/A"} {user.currency}
              </Text>
            </View>

            <View style={styles.infoRow}>
              <Text style={styles.infoLabel}>运费</Text>
              <Text style={styles.infoValue}>
                {(
                  route.params.data.domestic_shipping_fee +
                  route.params.data.shipping_fee
                ).toFixed(2) || "N/A"}{" "}
                {user.currency}
              </Text>
            </View>
          </View>

          {/* Order Summary Section */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>订单总额</Text>
            <View style={styles.totalRow}>
              <Text style={styles.totalLabel}>总金额</Text>
              <Text style={styles.totalValue}>
                {route.params.amount} {route.params.currency}
              </Text>
            </View>
          </View>
        </View>
      </ScrollView>

      <View style={styles.submitButtonContainer}>
        <TouchableOpacity
          style={[
            styles.primaryButtonStyle,
            (!showPhoneInput || (showPhoneInput && phoneNumber)) && !loading
              ? {}
              : styles.disabledButtonStyle,
          ]}
          onPress={handleSubmit}
          disabled={(showPhoneInput && !phoneNumber) || loading}
        >
          {loading ? (
            <ActivityIndicator size="small" color="#ffffff" />
          ) : (
            <Text style={styles.buttonText}>确认支付</Text>
          )}
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f7f7fa",
  },
  scrollContainer: {
    flex: 1,
  },
  mainContent: {
    padding: 16,
  },
  submitButtonContainer: {
    paddingHorizontal: 16,
    paddingVertical: 20,
    backgroundColor: "white",
    borderTopWidth: 1,
    borderTopColor: "#eaeaea",
  },
  primaryButtonStyle: {
    width: "100%",
    height: 50,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#002fa7",
    borderRadius: 25,
    shadowColor: "#002fa7",
    shadowOffset: { width: 0, height: 3 },
    shadowOpacity: 0.2,
    shadowRadius: 5,
    elevation: 5,
  },
  buttonText: {
    color: "white",
    fontWeight: "600",
    fontSize: 16,
    fontFamily: "PingFang SC",
  },
  disabledButtonStyle: {
    backgroundColor: "#c0c0c0",
    shadowOpacity: 0,
  },
  titleContainer: {
    width: "100%",
    padding: 16,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundColor: "#fff",
    borderBottomWidth: 1,
    borderBottomColor: "#eaeaea",
  },
  backIconContainer: {
    position: "absolute",
    left: 16,
  },
  titleHeading: {
    fontWeight: "600",
    fontSize: 18,
    color: "#333",
    fontFamily: "PingFang SC",
  },
  section: {
    backgroundColor: "#fff",
    borderRadius: 12,
    padding: 16,
    marginBottom: 16,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
    elevation: 2,
  },
  sectionTitle: {
    fontSize: 17,
    fontWeight: "600",
    color: "#333",
    marginBottom: 16,
    fontFamily: "PingFang SC",
  },
  paymentMethodContainer: {
    backgroundColor: "#f8f8f8",
    padding: 12,
    borderRadius: 8,
    borderLeftWidth: 4,
    borderLeftColor: "#002fa7",
  },
  paymentMethodText: {
    fontSize: 15,
    color: "#333",
    fontFamily: "PingFang SC",
  },
  phoneInputContainer: {
    marginTop: 16,
  },
  phoneInputLabel: {
    fontSize: 15,
    color: "#666",
    marginBottom: 8,
    fontFamily: "PingFang SC",
  },
  phoneInput: {
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 8,
    padding: 12,
    fontSize: 15,
    backgroundColor: "#fff",
    fontFamily: "PingFang SC",
  },
  infoRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: "#f0f0f0",
  },
  infoLabel: {
    fontSize: 15,
    color: "#666",
    fontFamily: "PingFang SC",
  },
  infoValue: {
    fontSize: 15,
    color: "#333",
    textAlign: "right",
    maxWidth: "60%",
    fontFamily: "PingFang SC",
  },
  totalRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingVertical: 12,
  },
  totalLabel: {
    fontSize: 16,
    fontWeight: "600",
    color: "#333",
    fontFamily: "PingFang SC",
  },
  totalValue: {
    fontSize: 20,
    fontWeight: "700",
    color: "#002fa7",
    fontFamily: "PingFang SC",
  },
});