@propel-nsl/propel-react-native-sdk 1.0.0

package/src/screens/PaymentMethod/index.tsx

@@ -0,0 +1,389 @@
+import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
+import React, { useEffect, useState, useCallback } from 'react';
+import { useFocusEffect } from '@react-navigation/native';
+import styles from './styles';
+import MobileHeader from '../../../src-app/components/MobileHeader';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { AppStackParamList } from '../../../src-app/types/navigation';
+import { AmountModal, CustomImage, CustomLoader, CustomMessagePopUp } from '../../../src-app/components';
+import OTPModal from '../../../src-app/components/OTPModal';
+import Images from '../../../src-app/constants/Images';
+import Svg, { Path } from 'react-native-svg';
+import { useAppDispatch } from '../../../src-app/hooks/useAppDispatch';
+import {
+  checkoutRequest,
+  dashboardInfoRequest,
+  resetAuthState,
+  viewMyCartRequest,
+  myOrdersGenerateOtpRequest,
+  myOrdersValidateOtpRequest,
+} from '../../../src-app/redux/authSlice';
+import { RootState } from '../../../src-app/redux/store';
+import { useAppSelector } from '../../../src-app/hooks/useAppSelector';
+import { useRoute, RouteProp } from '@react-navigation/native';
+
+import { colors } from '../../../src-app/styles/colors';
+import Toast from 'react-native-toast-message';
+import { ERROR, INSUFFICIENT_BALANCE, OTP_SUBTITLE, OTP_TITLE, PROCESSING_ORDER, SUCCESS } from '../../../src-app/constants/Messages';
+
+const extractLineAndLandmark = (address: string) => {
+  const raw = (address || '').replace(/\\n/g, '\n');
+  const lineMatch = raw.match(/Line:\s*(.*?)(\n|$)/);
+  const landmarkMatch = raw.match(/Landmark:\s*(.*)/);
+  const Line = lineMatch ? lineMatch[1].trim() : '';
+  const Landmark = landmarkMatch ? landmarkMatch[1].trim() : '';
+  return { Line, Landmark };
+};
+
+const PaymentMethod: React.FC<{
+  navigation: StackNavigationProp<AppStackParamList>;
+}> = ({ navigation }) => {
+  const [showPointsBreakdown, setShowPointsBreakdown] = useState(false);
+  const [showPointsApply, setShowPointsApply] = useState(false);
+  const [amountModalVisible, setAmountModalVisible] = useState(false);
+  const [checkoutPoints, setCheckoutPoints] = useState<number>(0);
+  const [showOtpModal, setShowOtpModal] = useState(false);
+  const [pendingCheckoutPayload, setPendingCheckoutPayload] = useState<any>(null);
+  const dispatch = useAppDispatch();
+  const [showLoader, setShowLoader] = useState(false);
+
+  const {
+    viewMyCartData,
+    dashboardInfoData,
+    cartId,
+    checkoutSuccessMessage,
+    checkoutError,
+    myOrdersGenerateOtpLoading,
+    myOrdersGenerateOtpError,
+    myOrdersValidateOtpLoading,
+    myOrdersValidateOtpError,
+    myOrdersValidateOtpData,
+  } = useAppSelector((state: RootState) => state.auth);
+
+  const route = useRoute<
+    RouteProp<{ PaymentMethod: { item?: { line: string }; skipAddress?: boolean } }, 'PaymentMethod'>
+  >();
+  const item = route.params?.item;
+  const skipAddress = !!route.params?.skipAddress;
+  const { Line, Landmark } = extractLineAndLandmark(item?.line || '');
+
+  useEffect(() => {
+    if (checkoutSuccessMessage) {
+      setShowLoader(false);
+      Toast.show({
+        type: SUCCESS,
+        text1: checkoutSuccessMessage,
+      });
+      dispatch(resetAuthState('checkoutSuccessMessage'));
+      navigation.navigate('TransactionSuccessful', {
+        item: checkoutPoints,
+      });
+    }
+  }, [checkoutSuccessMessage, navigation, checkoutPoints, dispatch]);
+
+  useEffect(() => {
+    dispatch(dashboardInfoRequest({}));
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (cartId) {
+      dispatch(viewMyCartRequest({ id: cartId }));
+    }
+  }, [cartId, dispatch]);
+
+  useEffect(() => {
+  //  if (!skipAddress && myOrdersValidateOtpData && pendingCheckoutPayload) 
+    if (myOrdersValidateOtpData && pendingCheckoutPayload && cartId){
+    setShowOtpModal(false);
+    setShowLoader(true);
+    // Use current cartId from Redux state to ensure we have the latest cart ID
+    const checkoutPayload = {
+      ...pendingCheckoutPayload,
+      orderId: cartId,
+      order_id: cartId,
+    };
+    dispatch(checkoutRequest(checkoutPayload));
+    setPendingCheckoutPayload(null);
+  } 
+}, [myOrdersValidateOtpData, pendingCheckoutPayload, cartId, dispatch]);
+
+
+  return (
+    <View style={styles.container}>
+      <MobileHeader
+        title="Select Payment Method"
+        showBack
+        onBack={() => {
+          if (navigation.canGoBack()) {
+            navigation.goBack();
+          } else {
+            navigation.navigate('MyCart' as never);
+          }
+        }}
+        disableSafeAreaPadding={true}
+      />
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <View style={styles.content}>
+          <View style={styles.separator} />
+
+          {/* Address block should be hidden for e-voucher only orders */}
+          {!skipAddress && (
+            <View style={styles.inputContainer}>
+              <CustomImage source={Images.location} imgStyle={styles.icon} />
+              <View style={styles.addressContainer}>
+                <View style={styles.addressTextContainer}>
+                  <Text numberOfLines={1} style={styles.label}>{dashboardInfoData?.name} </Text>
+                  <Text style={styles.pipe}>|</Text>
+                  <Text numberOfLines={1} style={styles.address}>
+                    {Line} {Landmark}
+                  </Text>
+                </View>
+                <TouchableOpacity
+                  activeOpacity={0.7}
+                  onPress={() => navigation.goBack()}
+                  style={styles.changeButtonContainer}
+                >
+                  <Text numberOfLines={1} style={styles.touchable}>
+                    Change
+                  </Text>
+                  <View style={styles.underline} />
+                </TouchableOpacity>
+              </View>
+            </View>
+
+          )}
+
+          <View style={styles.pointsContainer}>
+            <View style={styles.headerRow}>
+              <Text style={styles.label}>Total Amount Payable</Text>
+              <TouchableOpacity
+                style={styles.row}
+                activeOpacity={0.7}
+                onPress={() => setShowPointsBreakdown(!showPointsBreakdown)}
+              >
+                <Text style={styles.pointsText}>
+                  {viewMyCartData?.amount_cents / 100} Points
+                </Text>
+                <CustomImage
+                  source={
+                    showPointsBreakdown ? Images.upArrow : Images.downArrow
+                  }
+                  imgStyle={styles.arrowIcon}
+                />
+              </TouchableOpacity>
+            </View>
+            {showPointsBreakdown && (
+              <View style={styles.expandSection}>
+                <View style={styles.pointsBreakdown}>
+                  <View style={styles.breakdownRow}>
+                    <Text style={styles.subLabel}>Order Amount</Text>
+                    <Text style={styles.subLabel}>
+                      {viewMyCartData?.amount_cents / 100}
+                    </Text>
+                  </View>
+                  {/* Hide Delivery Charges when skipping address */}
+                  {/* {!skipAddress && (
+                    <View style={styles.breakdownRow}>
+                      <Text style={styles.subLabel}>Delivery Charges</Text>
+                      <Text style={styles.subLabel}>
+                        {viewMyCartData?.shipping_fee_cents}
+                      </Text>
+                    </View>
+                  )} */}
+                </View>
+              </View>
+            )}
+          </View>
+
+          <Text style={styles.balanceText}>Pay Balance</Text>
+          <View style={styles.balancepointsContainer}>
+            <View style={styles.headerRow}>
+              <Text style={[styles.label, { color: 'black' }]}>
+                {viewMyCartData?.total_amount_cents / 100} Apna Points
+              </Text>
+              <TouchableOpacity
+                style={styles.row}
+                activeOpacity={0.7}
+                onPress={() => {
+                  setShowPointsApply(!showPointsApply);
+                }}
+              >
+                <Text style={styles.applytext}>
+                  {showPointsApply ? 'Remove' : 'Apply'}
+                </Text>
+              </TouchableOpacity>
+            </View>
+            {showPointsApply ? (
+              <View style={styles.applyRow}>
+                <CustomImage
+                  source={Images.successTick}
+                  imgStyle={styles.tickIcon}
+                />
+                <Text
+                  style={[
+                    styles.applicableSuccessText,
+                    {
+                      color: colors.green,
+                    },
+                  ]}
+                >
+                  {`Applied out of ${dashboardInfoData?.current_balance}`}
+                </Text>
+              </View>
+            ) : (
+              <Text
+                style={[
+                  styles.applicableText,
+                  {
+                    color: colors.onSurfaceVariant,
+                  },
+                ]}
+              >
+                {`Applicable out of ${dashboardInfoData?.current_balance}`}
+              </Text>
+            )}
+
+            {showPointsApply && (
+              <View style={styles.expandSection}>
+              </View>
+            )}
+          </View>
+        </View>
+      </ScrollView>
+      <View style={styles.bottomCTA}>
+        <View style={styles.priceSection}>
+          <Text style={styles.priceText}>
+            {viewMyCartData?.total_amount_cents / 100} points
+          </Text>
+          <TouchableOpacity
+            activeOpacity={0.7}
+            style={styles.viewDetailsButton}
+            onPress={() => setAmountModalVisible(true)}
+          >
+            <Text style={styles.viewDetailsText}>View Details</Text>
+            <Svg width="10" height="6" viewBox="0 0 10 6" fill="none">
+              <Path
+                d="M9 5L5 1L1 5"
+                stroke="#DC291E"
+                strokeWidth="1.6"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </Svg>
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity
+          activeOpacity={0.7}
+          style={[
+            styles.addToCartButton,
+            !showPointsApply && { backgroundColor: colors.disableButton },
+          ]}
+          disabled={!showPointsApply}
+          onPress={() => {
+            dispatch(resetAuthState('myOrdersValidateOtpData'));
+            dispatch(resetAuthState('myOrdersValidateOtpError'));
+            const points = viewMyCartData?.total_amount_cents ? viewMyCartData.total_amount_cents / 100 : 0;
+            const balance = dashboardInfoData?.current_balance || 0;
+            setCheckoutPoints(points);
+            if (points > balance) {
+              Toast.show({
+              type: ERROR,
+              text1: INSUFFICIENT_BALANCE,
+            });
+            return; 
+            }
+            const payload = {
+              orderId: cartId,
+              amount_cents: 0,
+              client_id: '7b170ef2-c0a0-4968-a832-d308d54a8419',
+              order_id: cartId,
+              redeem_propel_points: true,
+              redirect: '',
+              payment_method: 'third_party_points',
+              transactions: [
+                {
+                  amount_cents: 0, 
+                  payment_method: 'zaggleOption',
+                },
+              ],
+              skipAddress,
+            };
+
+               
+
+  
+            setPendingCheckoutPayload(payload);
+
+            dispatch(
+              myOrdersGenerateOtpRequest({
+              order_id: cartId,
+              otp_type: 'orders_confirm_otp',
+              })
+          );
+            setShowOtpModal(true);
+            
+          }}
+        >
+          <Text style={styles.addToCartText}>Continue</Text>
+        </TouchableOpacity>
+      </View>
+
+      {amountModalVisible && (
+        <AmountModal
+          visible={amountModalVisible}
+          onClose={() => setAmountModalVisible(false)}
+          item={{
+            discount_cents: skipAddress ? 0 : viewMyCartData?.shipping_fee_cents,
+            grand_total: viewMyCartData?.total_amount_cents,
+            total_amount_cents: viewMyCartData?.total_amount_cents,
+          }}
+          label_1="Order Amount"
+          label_2="Delivery Charges"
+        />
+      )}
+      {checkoutError && (
+  <CustomMessagePopUp
+    title="Error"
+    message={checkoutError}
+    visible={!!checkoutError}
+    onClose={() => {    
+      setShowLoader(false);   // ✅ hide loader on failure
+      dispatch(resetAuthState('checkoutError'));
+    }}
+  />
+)}
+     <OTPModal
+        visible={showOtpModal}
+        onClose={() => {
+          setShowOtpModal(false);
+          setPendingCheckoutPayload(null);
+        }}
+        onResend={() => dispatch(
+  myOrdersGenerateOtpRequest({
+    order_id: cartId,
+    otp_type: 'orders_confirm_otp',
+  }))}
+        onVerify={(otp: string) => {
+  if (otp && otp.trim()) {
+    dispatch(
+      myOrdersValidateOtpRequest({
+        order_id: cartId,
+        otp,
+        otp_type: 'orders_confirm_otp',
+        next: pendingCheckoutPayload,
+      })
+    );
+  }
+}}
+        loading={!!myOrdersGenerateOtpLoading || !!myOrdersValidateOtpLoading}
+        errorMessage={myOrdersValidateOtpError || myOrdersGenerateOtpError}
+        title={OTP_TITLE}
+        subtitle={OTP_SUBTITLE}
+      />
+     {showLoader && <CustomLoader message={PROCESSING_ORDER} />}
+
+    </View>
+  );
+};
+
+export default PaymentMethod;

package/src/screens/PaymentMethod/styles.ts

@@ -0,0 +1,246 @@
+import {StyleSheet } from 'react-native';
+import FontFamily from '../../../src-app/constants/Fonts';
+import { SCALE } from '../../../src-app/constants/Scaling';
+import { colors } from '../../../src-app/styles/colors';
+import leftOffset from '../../../src-app/constants/offSets';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.white,
+  },
+  content: {
+    padding: 20,
+    flex: 1,
+  },
+  separator: {
+    height: 1.2,
+    backgroundColor: colors.transparent,
+    width: '100%',
+    alignSelf: 'center',
+    borderTopWidth: 1,
+    borderTopColor: colors.paymentSeparatorBorder,
+    marginBottom: '5%',
+  },
+  inputContainer: {
+    borderWidth: 1,
+    borderColor: colors.paymentBorderColor,
+    borderRadius: 12,
+    backgroundColor: colors.white,
+    paddingHorizontal: 20,
+    marginBottom: '7%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingVertical: 15,
+  },
+  pointsContainer: {
+    borderWidth: 1,
+    borderColor: colors.paymentBorderColor,
+    borderRadius: 12,
+    backgroundColor: colors.paymentBackgroundGray,
+    paddingHorizontal: 20,
+    marginBottom: '7%',
+    paddingVertical: 15,
+  },
+  balancepointsContainer: {
+    borderWidth: 1,
+    borderColor: colors.paymentBorderColor,
+    borderRadius: 12,
+    backgroundColor: colors.white,
+    paddingHorizontal: 20,
+    marginBottom: '7%',
+    paddingVertical: 15,
+    marginTop: 10,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+  },
+  label: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: 400,
+    color: colors.onSurfaceVariant,
+    maxWidth: SCALE(150),
+  },
+  applicableText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: 400,
+    color: colors.onSurfaceVariant,
+    marginTop: 5,
+  },
+  applicableSuccessText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: 400,
+    color: colors.onSurfaceVariant,
+  },
+  address: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: 400,
+    color: colors.onSurfaceVariant,
+    width: SCALE(120),
+    right: 5,
+  },
+  icon: {
+    height: 14,
+    width: 10,
+    resizeMode: 'contain',
+  },
+  tickIcon: {
+    height: 20,
+    width: 20,
+    resizeMode: 'contain',
+  },
+  touchable: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 10,
+    fontWeight: 500,
+    color: colors.darkGrey,
+  },
+  applytext: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: 500,
+    color: colors.darkGrey,
+  },
+  underline: {
+    height: 1.2,
+    width: 35,
+    alignSelf: 'center',
+    borderTopWidth: 1,
+    borderTopColor: colors.darkGrey,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  applyRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2,
+    marginTop: 5,
+  },
+  pointsText: {
+    fontFamily: FontFamily.LEXEND_MEDIUM,
+    fontSize: 14,
+    fontWeight: '600',
+    color: colors.onSurface,
+  },
+  balanceText: {
+    fontFamily: FontFamily.LEXEND_SEMIBOLD,
+    fontSize: 14,
+    fontWeight: '600',
+    color: colors.black,
+  },
+  arrowIcon: {
+    height: 12,
+    width: 12,
+    resizeMode: 'contain',
+  },
+  pointsBreakdown: {
+    width: '100%',
+  },
+  breakdownRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  expandSection: {
+    marginTop: 10,
+    paddingTop: 10,
+  },
+  subLabel: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    color: colors.paymentSubText,
+    marginBottom: 4,
+  },
+
+  total: {
+    fontFamily: FontFamily.LEXEND_MEDIUM,
+    fontSize: 13,
+    color: colors.onSurface,
+    marginTop: 6,
+  },
+  bottomCTA: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    backgroundColor: colors.white,
+    shadowColor: colors.shadowColor,
+    shadowOffset: {
+      width: 0,
+      height: 0,
+    },
+    shadowOpacity: 1,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+  priceSection: {
+    gap: 8,
+  },
+  priceText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 20,
+    fontWeight: '600',
+    color: colors.black,
+  },
+  viewDetailsButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  viewDetailsText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 10,
+    fontWeight: '500',
+    color: colors.darkGrey,
+  },
+  addToCartButton: {
+    width: 180,
+    height: 52,
+    backgroundColor: colors.darkGrey,
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  addToCartText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 14,
+    fontWeight: '600',
+    color: colors.white,
+  },
+  addressContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  addressTextContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  changeButtonContainer: {
+    alignItems: 'center',
+    minWidth: 50,
+    left: leftOffset
+  },
+  pipe: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: 400,
+    color: colors.onSurfaceVariant,
+    right:SCALE(2)
+  },
+});
+
+export default styles;