125 lines
3.8 KiB
TypeScript
125 lines
3.8 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { View, Text, ScrollView, Alert } from 'react-native';
|
|
import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
import { getStyles } from './checkoutPaymentScreen.styles';
|
|
import {
|
|
Header,
|
|
StepProgress,
|
|
PaymentOption,
|
|
PrimaryButton,
|
|
} from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
import { AppStackParamList } from '../../../navigation/appStack';
|
|
import { RootState, useAppDispatch, useAppSelector } from '@store';
|
|
import { getAllPaymentMethodsThunk, placeOrderThunk } from './thunk';
|
|
import { useSelector } from 'react-redux';
|
|
import uuid from 'react-native-uuid';
|
|
import { v4 } from 'react-native-uuid/dist/v4';
|
|
|
|
type CheckoutPaymentNavProp = StackNavigationProp<
|
|
AppStackParamList,
|
|
'CheckoutPaymentScreen'
|
|
>;
|
|
type CheckoutPaymentRouteProp = RouteProp<
|
|
AppStackParamList,
|
|
'CheckoutPaymentScreen'
|
|
>;
|
|
|
|
const CHECKOUT_STEPS = [
|
|
{ key: 'address', label: 'Address' },
|
|
{ key: 'payment', label: 'Payment' },
|
|
{ key: 'confirm', label: 'Confirm' },
|
|
];
|
|
|
|
const PAYMENT_METHODS = [
|
|
{ id: 'upi', type: 'UPI' as const, label: 'UPI (Google Pay, PhonePe)' },
|
|
{ id: 'card', type: 'Card' as const, label: 'Credit / Debit Card' },
|
|
{ id: 'wallet', type: 'Wallet' as const, label: 'Wallet' },
|
|
{ id: 'cod', type: 'COD' as const, label: 'Cash on Delivery' },
|
|
];
|
|
|
|
export const CheckoutPaymentScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const route = useRoute<CheckoutPaymentRouteProp>();
|
|
const navigation = useNavigation<CheckoutPaymentNavProp>();
|
|
const dispatch = useAppDispatch();
|
|
const [selectedMethod, setSelectedMethod] = useState('upi');
|
|
const selectedAddressId = route.params?.selectedAddressId;
|
|
// console.log(selectedAddressId);
|
|
const uuid = v4();
|
|
// console.log(uuid);
|
|
const {
|
|
paymentMethods,
|
|
placeOrderSuccess,
|
|
placeOrderLoading,
|
|
placeOrderError,
|
|
} = useAppSelector((state: RootState) => state.paymentMethods);
|
|
|
|
useEffect(() => {
|
|
dispatch(getAllPaymentMethodsThunk());
|
|
}, [dispatch]);
|
|
|
|
useEffect(() => {
|
|
if (placeOrderSuccess) {
|
|
navigation.navigate('OrderConfirmedScreen', {
|
|
orderId: 'ORD-' + Math.floor(Math.random() * 900000 + 100000),
|
|
});
|
|
} else if (placeOrderError) {
|
|
Alert.alert('Error', placeOrderError);
|
|
}
|
|
}, [placeOrderSuccess, placeOrderError]);
|
|
|
|
// console.log('paymentMethods', paymentMethods);
|
|
|
|
const selectedPaymentMethod = paymentMethods.find(
|
|
item => item.id === selectedMethod,
|
|
);
|
|
|
|
const methodName = selectedPaymentMethod?.code;
|
|
// console.log('methodName', methodName);
|
|
|
|
// useEffect(() => {
|
|
|
|
// },);
|
|
|
|
const handlePlaceOrder = () => {
|
|
dispatch(
|
|
placeOrderThunk({
|
|
addressId: selectedAddressId || '',
|
|
paymentMethodId: selectedMethod,
|
|
paymentMethod: methodName || '',
|
|
orderType: 'DELIVERY',
|
|
idempotencyKey: `idemp-key-${uuid}`,
|
|
}),
|
|
);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Header title="Checkout" onBack={() => navigation.goBack()} />
|
|
<StepProgress steps={CHECKOUT_STEPS} activeStep={1} />
|
|
<ScrollView contentContainerStyle={styles.content}>
|
|
<Text style={styles.sectionTitle}>Select Payment Method</Text>
|
|
{paymentMethods?.map(method => (
|
|
<PaymentOption
|
|
key={method.id}
|
|
label={method.code}
|
|
icon={method.iconUrl}
|
|
isSelected={selectedMethod === method.id}
|
|
onSelect={() => setSelectedMethod(method.id)}
|
|
/>
|
|
))}
|
|
</ScrollView>
|
|
<View style={styles.footer}>
|
|
<PrimaryButton
|
|
title={placeOrderLoading ? 'Placing...' : 'Place Order'}
|
|
onPress={handlePlaceOrder}
|
|
disabled={placeOrderLoading}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|