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

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  TextInput,
  ScrollView,
  Alert,
  ActivityIndicator,
  Platform,
  StatusBar,
  SafeAreaView
} 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";
import { useTranslation } from "react-i18next";
import fontSize from "../../utils/fontsizeUtils";

// 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();
  const { t } = useTranslation();

  useEffect(() => {
    if (!user.user_id) {
      return Alert.alert(t("order.preview.login_required"));
    }
    if (route.params.payMethod === "Brainnel Pay(Mobile Money)") {
      setShowPhoneInput(true);
    } else {
      setShowPhoneInput(false);
    }
  }, [route.params.payMethod, user.user_id, t]);

  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(t("order.preview.payment_failed"));
      })
      .finally(() => {
        setLoading(false);
      });

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

    // })
  };

  return (
    <SafeAreaView style={[styles.safeArea]}>
      <StatusBar barStyle="dark-content" backgroundColor="#fff" />
      <View style={styles.safeAreaContent}>
        <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}>{t("order.preview.pay_now")}</Text>
          </View>

          <ScrollView style={styles.scrollContainer}>
            <View style={styles.mainContent}>
              {/* Payment Method Section */}
              <View style={styles.section}>
                <Text style={styles.sectionTitle}>{t("order.preview.payment_method")}</Text>
                <View style={styles.paymentMethodContainer}>
                  <Text style={styles.paymentMethodText}>
                    {route.params.payMethod}
                  </Text>
                </View>

                {showPhoneInput && (
                  <View style={styles.phoneInputContainer}>
                    <Text style={styles.phoneInputLabel}>{t("order.preview.enter_phone")}</Text>
                    <TextInput
                      style={styles.phoneInput}
                      value={phoneNumber}
                      onChangeText={setPhoneNumber}
                      placeholder={t("order.preview.phone_placeholder")}
                      keyboardType="phone-pad"
                    />
                  </View>
                )}
              </View>

              {/* Order Info Section */}
              <View style={styles.section}>
                <Text style={styles.sectionTitle}>{t("order.preview.payment_info")}</Text>

                <View style={styles.infoRow}>
                  <Text style={styles.infoLabel}>{t("order.preview.name")}</Text>
                  <Text style={styles.infoValue}>
                    {route.params?.data.receiver_name || "N/A"}
                  </Text>
                </View>

                <View style={styles.infoRow}>
                  <Text style={styles.infoLabel}>{t("order.preview.phone")}</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}>{t("order.preview.country")}</Text>
                  <Text style={styles.infoValue}>
                    {route.params?.data.receiver_country || "N/A"}
                  </Text>
                </View>

                <View style={styles.infoRow}>
                  <Text style={styles.infoLabel}>{t("order.preview.shipping_address")}</Text>
                  <Text style={styles.infoValue}>
                    {route.params?.data.receiver_address || "N/A"}
                  </Text>
                </View>

                <View style={styles.infoRow}>
                  <Text style={styles.infoLabel}>{t("order.preview.order_amount")}</Text>
                  <Text style={styles.infoValue}>
                    {route.params.amount || "N/A"} {route.params.data.currency}
                  </Text>
                </View>

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

              {/* Order Summary Section */}
              <View style={styles.section}>
                <Text style={styles.sectionTitle}>{t("order.preview.order_total")}</Text>
                <View style={styles.totalRow}>
                  <Text style={styles.totalLabel}>{t("order.preview.total_amount")}</Text>
                  <Text style={styles.totalValue}>
                    {route.params.data.actual_amount} {route.params.data.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}>{t("order.preview.confirm_payment")}</Text>
              )}
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#fff',
  },
  safeAreaContent: {
    flex: 1,
    paddingTop: Platform.OS === 'android' ? 0 : 0,
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  scrollContainer: {
    flex: 1,
  },
  mainContent: {
    padding: 15,
  },
  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: fontSize(16),
    fontFamily: "PingFang SC",
  },
  disabledButtonStyle: {
    backgroundColor: "#c0c0c0",
    shadowOpacity: 0,
  },
  titleContainer: {
    width: "100%",
    padding: 15,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundColor: "#fff",
    borderBottomWidth: 1,
    borderBottomColor: "#eaeaea",
  },
  backIconContainer: {
    position: "absolute",
    left: 15,
    backgroundColor: "#fff",
  },
  titleHeading: {
    fontWeight: "600",
    fontSize: fontSize(16),
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "black",
  },
  section: {
    marginBottom: 20,
    backgroundColor: "#fff",
    borderRadius: 8,
    padding: 15,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.22,
    shadowRadius: 2.22,
    elevation: 3,
  },
  sectionTitle: {
    fontSize: fontSize(18),
    fontWeight: "600",
    marginBottom: 15,
    color: "#000",
  },
  paymentMethodContainer: {
    marginTop: 5,
  },
  paymentMethodText: {
    fontSize: fontSize(17),
    color: "#FF6000",
    fontWeight: "500",
  },
  phoneInputContainer: {
    marginTop: 15,
  },
  phoneInputLabel: {
    fontSize: fontSize(15),
    marginBottom: 5,
    color: "#333",
  },
  phoneInput: {
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 5,
    padding: 10,
    fontSize: fontSize(15),
  },
  infoRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 10,
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: "#f0f0f0",
  },
  infoLabel: {
    fontSize: fontSize(15),
    color: "#666",
    flex: 1,
  },
  infoValue: {
    fontSize: fontSize(15),
    color: "#333",
    flex: 2,
    textAlign: "right",
  },
  totalRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingVertical: 12,
  },
  totalLabel: {
    fontSize: fontSize(16),
    fontWeight: "600",
    color: "#333",
    fontFamily: "PingFang SC",
  },
  totalValue: {
    fontSize: fontSize(20),
    fontWeight: "700",
    color: "#002fa7",
    fontFamily: "PingFang SC",
  },
});