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

package/src/screens/Login/index.tsx

@@ -0,0 +1,215 @@
+import React, { useEffect, useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableWithoutFeedback,
+  Keyboard,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+import { StackNavigationProp } from "@react-navigation/stack";
+import DeviceInfo from "react-native-device-info";
+import styles from "./styles";
+import { RootStackParamList } from "../../../src-app/types/navigation";
+import Images from "../../../src-app/constants/Images";
+import { generateOtpRequest, resetAuthState } from "../../../src-app/redux/authSlice";
+import { useAppDispatch } from "../../../src-app/hooks/useAppDispatch";
+import {
+  CustomButton,
+  CustomImage,
+  CustomLoader,
+  CustomMessagePopUp,
+  Footer,
+} from "../../../src-app/components";
+import { SafeAreaView } from "react-native-safe-area-context";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useAppSelector } from "../../../src-app/hooks/useAppSelector";
+import { RouteProp, useRoute } from "@react-navigation/native";
+import {
+  LOGIN_WELCOME_BACK_TITLE,
+  LOGIN_ENTER_MOBILE_TITLE,
+  LOGIN_SIGNIN_OR_SIGNUP_SUBTITLE,
+  LOGIN_BTN_SEND_OTP,
+  LOGIN_BTN_VERIFY,
+  SEND_OTP_LOADER,
+} from "../../../src-app/constants/Messages";
+import { colors } from "../../../src-app/styles/colors";
+
+type LoginNavigationProp = StackNavigationProp<RootStackParamList, "Login">;
+type LoginRouteProp = RouteProp<RootStackParamList, "Login">; 
+
+interface Props {
+  navigation: LoginNavigationProp;
+}
+
+const Login: React.FC<Props> = ({ navigation }) => {
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [isReturningUser, setIsReturningUser] = useState(false);
+  const route = useRoute<LoginRouteProp>();
+
+  const dispatch = useAppDispatch();
+  const otpError = useAppSelector((state) => state.auth.otpError);
+  const otpLoading = useAppSelector((state) => state.auth.otpLoading);
+  const otpData = useAppSelector((state) => state.auth.otpData);
+  const [messagepopUpVisible, setMessagepopUpVisible] = useState(false);
+  const [isOtpRequestTriggered, setIsOtpRequestTriggered] = useState(false);
+  const [deviceId, setDeviceId] = useState<string>("");
+
+  const handlePhoneChange = (text: string) => {
+  const digitsOnly = text.replace(/[^0-9]/g, ""); 
+  setPhoneNumber(digitsOnly);
+};
+
+  // Decide which UI to show
+  useEffect(() => {
+    (async () => {
+      if (route?.params?.isReturning === true) {
+        setIsReturningUser(true);
+        return;
+      }
+      const hasLoggedInOnce = await AsyncStorage.getItem("HAS_LOGGED_IN_ONCE");
+      setIsReturningUser(hasLoggedInOnce === "true");
+    })();
+  }, [route?.params?.isReturning]);
+
+  const titleText = isReturningUser ? LOGIN_WELCOME_BACK_TITLE: LOGIN_ENTER_MOBILE_TITLE;
+  const subTitleText = isReturningUser ? LOGIN_SIGNIN_OR_SIGNUP_SUBTITLE: "";
+  const buttonText = isReturningUser ? LOGIN_BTN_SEND_OTP : LOGIN_BTN_VERIFY;
+
+  useEffect(() => {
+    if (otpError) {
+      setMessagepopUpVisible(true);
+    }
+  }, [otpError]);
+
+  useEffect(() => {
+    const getDeviceId = async () => {
+      try {
+        const id = await DeviceInfo.getUniqueId();
+        const device_id = String(id);
+        setDeviceId(device_id);
+        console.log("device_id", device_id);
+      } catch (error) {
+        console.log("Error getting device ID:", error);
+      }
+    };
+
+    getDeviceId();
+  }, []);
+
+  const handleGenerateOtp =  () => {
+
+    dispatch(
+      generateOtpRequest({
+        client_name: "iOSApp",
+        client_series: "1930",
+        client_version: "17.2",
+        device_id: deviceId,
+        mobile: phoneNumber,
+        is_hppl_login: true,
+      })
+    );
+  };
+
+  useEffect(() => {
+    dispatch(resetAuthState("otpData"));
+    dispatch(resetAuthState("otpError"));
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (isOtpRequestTriggered) {
+      if (!otpLoading && otpData && !otpError) {
+        AsyncStorage.setItem("HAS_LOGGED_IN_ONCE", "true");
+        navigation.navigate("OTPVerification", { phoneNumber });
+        setIsOtpRequestTriggered(false);
+      }
+      if (otpError) {
+        setMessagepopUpVisible(true);
+        setIsOtpRequestTriggered(false);
+      }
+    }
+  }, [isOtpRequestTriggered, otpData, otpError, otpLoading, navigation, phoneNumber]);
+
+  const handleVerify = () => {
+    if (phoneNumber.length >= 10) {
+      setIsOtpRequestTriggered(true);
+      dispatch(resetAuthState("otpData"));
+      dispatch(resetAuthState("otpError"));
+      handleGenerateOtp();
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.container} edges={["top", "bottom"]}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <ScrollView
+          contentContainerStyle={styles.scrollContainer}
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+          bounces={false}
+        >
+          <View style={styles.content}>
+            <CustomImage source={Images.topWave} imgStyle={styles.topShape} />
+            <CustomImage
+              source={Images.bottomWave}
+              imgStyle={styles.bottomShape}
+            />
+
+            <CustomImage source={Images?.logo} imgStyle={styles.logoSection} />
+
+            <View style={styles.formSection}>
+              <Text style={[[styles.formTitle, isReturningUser && styles.formTitleLarge]]}>{titleText}</Text>
+              {Boolean(subTitleText) && (
+                <Text style={styles.formSubtitle}>{subTitleText}</Text>
+              )}
+
+              <View style={styles.inputContainer}>
+                <View style={styles.countryCodeSection}>
+                  <Text style={styles.countryCodeText}>+91</Text>
+                  <CustomImage
+                    source={Images?.greyDownArrow}
+                    imgStyle={styles.arrow}
+                  />
+                </View>
+                <View style={styles.divider} />
+                <TextInput
+                  style={styles.phoneInput}
+                  placeholder="Mobile number"
+                  placeholderTextColor={colors.otpPlaceholderMobile}
+                  value={phoneNumber}
+                  onChangeText={handlePhoneChange}
+                  keyboardType={Platform.OS === "ios" ? "number-pad" : "numeric"}
+                  maxLength={10}
+                />
+              </View>
+            </View>
+
+            <CustomButton
+              title={buttonText}
+              onPress={handleVerify}
+              disabled={phoneNumber.length < 10}
+              customButtonContainerStyle={styles.buttonContainer}
+            />
+
+            <Footer />
+          </View>
+          <CustomMessagePopUp
+            title="Error"
+            message={otpError || ""}
+            visible={messagepopUpVisible}
+            onClose={() => {
+              setMessagepopUpVisible(false);
+              dispatch(resetAuthState("otpError"));
+            }}
+            icon={Images.pendingIcon}
+          />
+        </ScrollView>
+      </TouchableWithoutFeedback>
+      <CustomLoader loading={!!otpLoading} text={SEND_OTP_LOADER} fullScreen />
+    </SafeAreaView>
+  );
+};
+
+export default Login;

package/src/screens/Login/styles.ts

@@ -0,0 +1,134 @@
+import { Platform, StyleSheet, Dimensions } from 'react-native';
+import { SCALE, VSCALE, MSCALE } from '../../../src-app/constants/Scaling';
+import FontFamily from '../../../src-app/constants/Fonts';
+
+const { height: screenHeight } = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  content: {
+    flex: 1,
+    // position: 'relative',
+    position: 'relative',
+    // paddingBottom: VSCALE(40), 
+  },
+  topShape: {
+    position: 'absolute',
+    width: '100%',
+    height: VSCALE(250),
+    left: SCALE(70),
+    top: 0,
+    zIndex: -1,
+  },
+
+  formSubtitle: {
+  fontFamily: FontFamily.LEXEND_REGULAR,
+  fontSize: MSCALE(12),
+  color: '#6B7280',
+  marginBottom: VSCALE(16),
+},
+formTitleLarge: {
+    fontFamily: FontFamily.LEXEND_SEMIBOLD,  // or LEXEND_BOLD
+    fontSize: 28,  
+    marginBottom: VSCALE(8),                          // use fixed 28 to be obvious
+  },
+
+  bottomShape: {
+    position: 'absolute',
+    width: '100%',
+    height: VSCALE(200),
+    left: SCALE(-50),
+    bottom: VSCALE(0),
+    zIndex: -1,
+  },
+  logoSection: {
+    width: SCALE(177),
+    height: VSCALE(182),
+    resizeMode: 'contain',
+    alignSelf: 'center',
+    marginTop: screenHeight > 700 ? VSCALE(100) : VSCALE(80),
+  },
+  hindustanPencilsLogo: {
+    width: SCALE(180),
+    height: VSCALE(60),
+    resizeMode: 'contain',
+  },
+  formSection: {
+    paddingHorizontal: SCALE(20),
+    justifyContent: 'center',
+    marginTop: VSCALE(10),
+  },
+  formTitle: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: MSCALE(14),
+    color: '#1F2937',
+    marginBottom: VSCALE(16),
+    textTransform: 'capitalize',
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: SCALE(1),
+    borderColor: '#D1D5DB',
+    borderRadius: SCALE(12),
+    backgroundColor: '#FFFFFF',
+    height: VSCALE(50),
+    paddingHorizontal: SCALE(20),
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: VSCALE(1),
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: SCALE(2),
+    elevation: 2,
+  },
+  countryCodeSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SCALE(8),
+  },
+  countryCodeText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: MSCALE(14),
+    color: '#1F2937',
+  },
+  divider: {
+    width: SCALE(1),
+    height: VSCALE(24),
+    backgroundColor: '#D1D5DB',
+    marginHorizontal: SCALE(16),
+  },
+  phoneInput: {
+    flex: 1,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: MSCALE(14),
+    color: '#1F2937',
+    height: '100%',
+    paddingVertical: 0,
+  },
+  arrow: {
+    height: VSCALE(4),
+    width: SCALE(8),
+    resizeMode: 'contain',
+  },
+  buttonContainer: {
+    paddingHorizontal: SCALE(20),
+    marginBottom: VSCALE(20),
+  },
+  footer: {
+    paddingBottom: Platform.OS === 'ios' ? VSCALE(0) : VSCALE(0),
+    paddingTop: VSCALE(10),
+    alignItems: 'center',
+  },
+  scrollContainer: {
+    flexGrow: 1,
+    // justifyContent: 'space-between',
+  }
+  
+});
+
+export default styles;

package/src/screens/MyCart/MyCart.constants.ts

@@ -0,0 +1,13 @@
+export const MY_CART = "My Cart"
+export const CONTINUE_SHOPPING = "Continue Shopping"
+export const DELIVERY_ADDRESS = "DeliveryAddress"
+export const PAYMENT_METHOD = "PaymentMethod"
+export const MyCart = "MyCart"
+export const EVOUCHER = 'EVOUCHER'
+export const E_VOUCHER = "E-VOUCHER"
+export const VIRTUAL = "VIRTUAL"
+export const PHYSICAL = "PHYSICAL"
+export const DELIVER = "DELIVER"
+export const SHIPPED = "SHIPPED"
+export const MERCHANDISE = "MERCHANDISE"
+export const Checkout = "Checkout"

package/src/screens/MyCart/index.tsx

@@ -0,0 +1,318 @@
+import { View, Text, TouchableOpacity, ScrollView} from 'react-native';
+import React, {useCallback, useEffect, useState } from 'react';
+import styles from './styles';
+import { RouteProp, useFocusEffect, useIsFocused, useRoute } from '@react-navigation/native';
+import { AppStackParamList } from '../../../src-app/types/navigation';
+import MobileHeader from '../../../src-app/components/MobileHeader';
+import CustomImage from '../../../src-app/components/CustomImage';
+import { useAppDispatch } from '../../../src-app/hooks/useAppDispatch';
+import { deleteCartRequest,updateCartRequest,viewMyCartRequest,dashboardInfoRequest,
+} from '../../../src-app/redux/authSlice';
+import { useAppSelector } from '../../../src-app/hooks/useAppSelector';
+import { RootState } from '../../../src-app/redux/store';
+import Images from '../../../src-app/constants/Images';
+import { CustomButton, CustomLoader, QuantityModal} from '../../../src-app/components';
+import { AMOUNT_TO_BE_PAID, EMPTY_CART_SUBTITLE, EMPTY_CART_TITLE, ITEM_DELETE_CANCEL, ITEM_DELETE_CONFIRM, ITEM_DELETE_TITLE, POINTS, REMAINING_AMOUNT } from '../../../src-app/constants/Messages';
+import ConfirmPopup from '../../../src-app/components/ConfirmPopup';
+import { colors } from '../../../src-app/styles/colors';
+import { handleCustomGoBack } from '../../../src-app/utils/navigationUtils';
+import { ROUTES } from '../../../src-app/constants/Routes';
+import { useHardwareBack } from '../../../src-app/utils/useHardwareBack';
+import { Checkout, CONTINUE_SHOPPING, DELIVER, DELIVERY_ADDRESS, E_VOUCHER, EVOUCHER, MERCHANDISE, MY_CART, PAYMENT_METHOD, PHYSICAL, SHIPPED, VIRTUAL } from './MyCart.constants';
+
+
+interface MyCartProps {
+  navigation?: any;
+}
+
+type MyCartRouteProp = RouteProp<AppStackParamList, 'MyCart'>;
+
+const MyCart: React.FC<MyCartProps> = ({ navigation }) => {
+  const route = useRoute<MyCartRouteProp>();
+  const from = route.params?.from;
+  const id = route.params?.id;
+  const dispatch = useAppDispatch();
+  const isFocus = useIsFocused();
+  const [visible, setVisible] = useState(false);
+  const [selectedQty, setSelectedQty] = useState<number | null>(null);
+  const [selectedItem, setSelectedItem] = useState<any | null>(null);
+  const cartId = useAppSelector((state: RootState) => state.auth.cartId);
+  const [selectedQuantity, setSelectedQuantity] = useState<number | null>(null);
+
+  const { viewMyCartData, viewMyCartLoading } = useAppSelector(
+    (state: RootState) => state.auth,
+  );
+  const [confirmVisible, setConfirmVisible] = useState(false);
+  const [itemToDelete, setItemToDelete] = useState<any | null>(null);
+
+
+  const cartNeedsAddress = (items: any[] = []) => {
+    if (!Array.isArray(items) || items?.length === 0) return false;
+
+    const isPhysical = (it: any) => {
+      const t = (it?.product?.product_type || '').toString().toUpperCase();
+      if (t.includes(EVOUCHER) || t.includes(E_VOUCHER) || t.includes(VIRTUAL)) return false;
+      if (t.includes(PHYSICAL) || t.includes(DELIVER) || t.includes(SHIPPED) || t.includes(MERCHANDISE)) return true;
+
+      if (it?.requires_address === true) return true;
+      if (it?.requires_address === false) return false;
+
+      return false;
+    };
+
+    return items?.some(isPhysical);
+  };
+
+  useFocusEffect(
+  useCallback(() => {
+    return () => {
+      setConfirmVisible(false);
+    };
+  }, [])
+);
+
+
+  useEffect(() => {
+    setSelectedQty(viewMyCartData?.items?.[0]?.quantity);
+  }, [viewMyCartData]);
+
+  useEffect(() => {
+    dispatch(dashboardInfoRequest({}));
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (isFocus) {
+      if (cartId) {
+        dispatch(viewMyCartRequest({ id: cartId }));
+      }
+    }
+  }, [dispatch, cartId, isFocus]);
+
+  const handleQuantitySelect = (quantity: number) => {
+    setSelectedQuantity(quantity);
+    setSelectedQty(quantity);
+  };
+
+  const handleItem = async (item: any) => {
+    setSelectedItem(item);
+    setSelectedQuantity(item.quantity);
+  };
+  
+  const handleUpdate = () => {
+    dispatch(
+      updateCartRequest({
+        id: cartId,
+        item: {
+          product_variation_id: selectedItem?.variation?.id,
+          quantity: selectedQty,
+          shipping_address: {
+            email: selectedItem?.shipping_address?.email,
+            phone_numbers: selectedItem?.shipping_address?.phone_numbers[0],
+          },
+        },
+        skip_payable_validation: true,
+      }),
+    );
+    setVisible(false);
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+  };
+  const askDelete = (item: any) => {
+    setItemToDelete(item);
+    setConfirmVisible(true);
+  };
+
+  const confirmDelete = () => {
+    if (itemToDelete && cartId) {
+      dispatch(
+        deleteCartRequest({
+          id: cartId,
+          item: { product_variation_id: itemToDelete?.variation?.id },
+        }),
+      );
+    }
+    setConfirmVisible(false);
+    setItemToDelete(null);
+  };
+
+  const renderItem = ({ item }: any) => (
+    <View style={styles.productRow}>
+      <View style={styles.productLeft}>
+        <View style={styles.left}>
+          <View style={styles.productImageContainer}>
+            {item?.product?.image?.image?.url ? (
+              <CustomImage
+                source={{ uri: item?.product?.image?.image?.url }}
+                imgStyle={styles.productImage}
+              />
+            ) : (
+              <View
+                style={[styles.productImage, { backgroundColor: colors.productimagebackground }]}
+              />
+            )}
+          </View>
+          <View style={styles.productDetails}>
+            <Text numberOfLines={2} style={styles.productName}>
+              {item?.name}
+            </Text>
+            <Text style={[styles.productQuantity, { fontSize: 12 }]}>
+              {item?.product?.product_type}
+            </Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          activeOpacity={0.7}
+          style={styles.iconRow}
+          onPress={() => askDelete(item)}
+        >
+          <CustomImage source={Images.delete} imgStyle={styles.deleteIcon} />
+        </TouchableOpacity>
+
+      </View>
+      <View style={styles.row}>
+        <TouchableOpacity
+          activeOpacity={0.7}
+          style={styles.productQuantityContainer}
+          onPress={() => {
+            handleItem(item);
+            setVisible(true);
+          }}
+        >
+          <Text style={styles.productQuantity}>
+            Qty :{' '}
+            <Text style={styles.productQuantityText}>{item?.quantity}</Text>
+          </Text>
+          <CustomImage source={Images.greyDownArrow} imgStyle={styles.icon} />
+        </TouchableOpacity>
+        <Text style={styles.productPoints}>{item?.amount_cents / 100} {POINTS}</Text>
+      </View>
+    </View>
+  );
+
+  const isEmpty = !viewMyCartData?.items || viewMyCartData.items?.length === 0;
+
+  const handleGoBack = () => {
+    // In SDK, Redeem and Dashboard are tabs, so navigate directly to them
+    const from = route.params?.from;
+    if (from === ROUTES.REDEEM) {
+      navigation.navigate(ROUTES.REDEEM);
+      return true;
+    }
+    if (navigation.canGoBack()) {
+      navigation.goBack();
+      return true;
+    }
+    // Fallback to Dashboard tab
+    navigation.navigate(ROUTES.DashboardTab, { screen: ROUTES.DASHBOARD });
+    return true;
+  };
+  
+  useHardwareBack(handleGoBack)
+
+  return (
+    <View style={styles.container}>
+      <MobileHeader
+        title={MY_CART}
+        showBack
+        onBack={() => handleGoBack()}
+        disableSafeAreaPadding={true}
+      />
+
+      {viewMyCartLoading ? (
+        <CustomLoader loading={viewMyCartLoading} />
+      ) : isEmpty ? (
+        <View style={styles.container}>
+          <View style={styles.emptyCartCenter}>
+            <Text style={styles.emptyCartTitle}>{EMPTY_CART_TITLE}</Text>
+            <Text style={styles.emptyCartSubtitle}>
+              {EMPTY_CART_SUBTITLE}
+            </Text>
+          </View>
+
+          <View style={styles.emptyCartButtonContainer}>
+            <CustomButton
+              title={CONTINUE_SHOPPING}
+              onPress={() => navigation.navigate(ROUTES.REDEEM)}
+            />
+          </View>
+        </View>
+
+
+      ) : (
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.contentContainer}
+        >
+          <View style={styles.content}>
+            {viewMyCartData?.items?.map?.((item: any, index: number) => (
+              <React.Fragment key={item?.id ?? String(index)}>
+                {renderItem({ item })}
+              </React.Fragment>
+            ))}
+          </View>
+        </ScrollView>
+      )}
+
+
+      {!!viewMyCartData?.items?.length && (
+        <View style={styles.stickyButtonContainer}>
+          <View style={styles.bottomContent}>
+            <View style={styles.bottomRow}>
+              <Text style={styles.leftText}>{REMAINING_AMOUNT}</Text>
+              <Text style={styles.rightText}>
+                {viewMyCartData?.total_amount_cents / 100} {POINTS}
+              </Text>
+            </View>
+            <View style={styles.separator} />
+            <View style={styles.bottomRow}>
+              <Text style={styles.amountText}>{AMOUNT_TO_BE_PAID}</Text>
+              <Text style={styles.amountPoints}>
+                {viewMyCartData?.total_amount_cents / 100} {POINTS}
+              </Text>
+            </View>
+          </View>
+          <CustomButton
+            title={Checkout}
+            onPress={() => {
+              const items = viewMyCartData?.items || [];
+              const needsAddress = cartNeedsAddress(items);
+
+              if (needsAddress) {
+                navigation.navigate(DELIVERY_ADDRESS);
+              } else {
+                navigation.navigate(PAYMENT_METHOD , { skipAddress: true });
+              }
+            }}
+            disabled={false}
+          />
+
+        </View>
+      )}
+
+      <QuantityModal
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onSelectQuantity={handleQuantitySelect}
+        onCancel={handleCancel}
+        onUpdate={handleUpdate}
+        selectedQuantity={selectedQuantity ?? 1}
+      />
+      <ConfirmPopup
+        visible={confirmVisible}
+        onClose={() => {
+          setConfirmVisible(false);
+          setItemToDelete(null);
+        }}
+        onConfirm={confirmDelete}
+        title={ITEM_DELETE_TITLE}
+        confirmText={ITEM_DELETE_CONFIRM}
+        cancelText={ITEM_DELETE_CANCEL}
+      />
+
+    </View>
+  );
+};
+
+export default MyCart;