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

package/src-app/styles/colors.ts

@@ -0,0 +1,85 @@
+export const colors = {
+
+ 
+  primary: '#DC2626', 
+  primaryDark: '#B91C1C', 
+  secondary: '#00ADBB', 
+  success: '#22C55E', 
+  warning: '#F59E0B', 
+  error: '#EF4444', 
+  background: '#FFFFFF',
+  surface: '#F9FAFB', 
+  surfaceVariant: '#F3F4F6', 
+  onSurface: '#111827', 
+  onSurfaceVariant: '#6B7280', 
+  outline: '#D1D5DB', 
+  outlineVariant: '#E5E7EB', 
+  shadow: 'rgba(0, 0, 0, 0.1)',
+  green: '#34AA44',
+  red: '#ED3B41',
+  orange: '#FF8A08',
+  black: '#1F2937',
+  white: '#FFFFFF',
+  darkGrey: '#DC291E',
+  lightbgColor : '#F3F4F773',
+  errorbgColor : '#FFECEF',
+  placeholderColor : '#9CA3AF',
+  errorAlertColor : '#FEF2F2',
+  verifyButtonText : '#FFFFFF',
+  logOutTitle: '#1F2937',
+  btnOutlinedcolor: '#0F172A',
+  // Dashboard specific colors
+  timeText: '#000000',
+  avatarText: '#1F2937',
+  greeting: '#6B7280',
+  cartBadgeBackground: '#DC291E',
+  cartBadgeText: '#DC291E',
+  cartBackground: 'rgba(255, 255, 255, 0.45)',
+  avatarBackground: 'rgba(0, 173, 187, 0.2)',
+  pointsValue: '#101820',
+  pointsLabel: '#1F2937',
+  redeemButton: '#DC291E',
+  redeemButtonText: '#FFFFFF',
+  statCardBackground: '#F6F6F6',
+  statValue: '#101820',
+  statLabel: '#101820',
+  actionBorder: '#ECEDF0',
+  actionBackground: '#FFFFFF',
+  actionLabel: '#1F2937',
+  rewardsTitle: '#1F2937',
+  rewardsSubtitle: '#6B7280',
+  viewAllButton: '#DC291E',
+  viewAllButtonText: '#FFFFFF',
+  otpPlaceholderMobile:  '#6B7280',
+  // ProductDetails specific colors
+  productImageBackground: '#ECECEC',
+  variantBorder: '#D1D5DB',
+  variantBackground: 'rgba(243, 244, 247, 0.45)',
+  variantSelectedBackground: 'rgba(237, 59, 65, 0.05)',
+  dividerBackground: 'rgba(209, 213, 219, 0.45)',
+  shadowColor: 'rgba(75, 85, 98, 0.20)',
+  darkText: '#333',
+  deliveryText: '#219493',
+  disableButton: '#ccc',
+  // PaymentMethod specific colors
+  paymentBorderColor: '#F3F4F7',
+  paymentBackgroundGray: '#F3F4F7',
+  paymentSeparatorBorder: 'rgba(209, 213, 219, 0.65)',
+  paymentSubText: '#4B5563',
+  transparent: 'transparent',
+  // Profile specific colors
+  profileBackground: '#FFFFFF',
+  profileTextPrimary: '#101820',
+  profileTextSecondary: '#6B7280',
+  profileSeparator: '#F3F4F7',
+  profileLogout: '#DC291E',
+  // OrderDetails specific colors
+  orderDetailsBackground: '#FFF',
+  orderDetailsText: '#1F2937',
+  orderDetailsSecondaryText: '#6B7280',
+  orderDetailsBorder: '#ccc',
+  orderDetailsSupportBackground: '#F3F4F7',
+  orderDetailsShadow: 'rgba(75, 85, 98, 0.10)',
+  orderDetailsSeparator: 'rgba(209, 213, 219, 0.65)',
+  productimagebackground: '#eee',
+};

package/src-app/styles/shared.ts

@@ -0,0 +1,112 @@
+import { StyleSheet, Dimensions, Platform } from 'react-native';
+import { SCALE } from '../constants/Scaling';
+import { colors } from './colors';
+
+const { width, height } = Dimensions.get('window');
+
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+  MARGIN_PERCENT: {
+    XS: '4%',
+    SM: '6%',
+    MD: '8%',
+    LG: '10%',
+    XL: '12%',
+    XXL: '20%',
+  },
+  LEFT_POSITION: {
+    TOP_SHAPE: Platform.OS === 'android' ? SCALE(48) : SCALE(50),
+  },
+};
+
+export const borderRadius = {
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  xxl: 24,
+  full: 9999,
+};
+
+export const typography = {
+  h1: {
+    fontSize: 24,
+    fontWeight: '600' as '600',
+    lineHeight: 28,
+  },
+  h2: {
+    fontSize: 20,
+    fontWeight: '600' as '600',
+    lineHeight: 24,
+  },
+  h3: {
+    fontSize: 18,
+    fontWeight: '500' as '500',
+    lineHeight: 22,
+  },
+  body: {
+    fontSize: 16,
+    fontWeight: '400' as '400',
+    lineHeight: 20,
+  },
+  bodySmall: {
+    fontSize: 14,
+    fontWeight: '400' as '400',
+    lineHeight: 18,
+  },
+  caption: {
+    fontSize: 12,
+    fontWeight: '400' as '400',
+    lineHeight: 16,
+  },
+  button: {
+    fontSize: 14,
+    fontWeight: '600' as '600',
+    lineHeight: 18,
+  },
+};
+
+export const shadows = StyleSheet.create({
+  small: {
+    shadowColor: colors.shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  medium: {
+    shadowColor: colors.shadow,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  large: {
+    shadowColor: colors.shadow,
+    shadowOffset: {
+      width: 0,
+      height: 8,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 16,
+    elevation: 8,
+  },
+});
+
+export const layout = {
+  screenWidth: width,
+  screenHeight: height,
+  headerHeight: 60,
+  tabBarHeight: 80,
+};

package/src-app/types/authTypes.ts

@@ -0,0 +1,155 @@
+export interface generateOtpPayload {
+  client_name: string;
+  client_series: string;
+  client_version: string;
+  device_id: string;
+  mobile: string;
+  is_hppl_login: boolean;
+}
+
+export interface VerifyMobileOtpPayload {
+  client_key: string;
+  client_name: string;
+  client_series: string;
+  client_type: string;
+  client_version: string;
+  device_id: string;
+  fcm_token: string;
+  otp: string;
+  username: string;
+  is_hppl_login: boolean;
+}
+
+export interface UploadProfileImagePayload {
+  name: string;
+  Image: string;
+}
+
+export interface RedemptionHistoryPayload {
+  client_id: string;
+  transaction_type: string;
+}
+
+export interface CreateAddressPayload {
+  address: {
+    city: string;
+    country: {
+      id: string;
+      name: string;
+    };
+    email: string;
+    landmark: string;
+    line: string;
+    name: string;
+    phone_numbers: string[];
+    state: string;
+    zip_code: string;
+  };
+  address_type: string;
+}
+
+export interface UpdateAddressPayload {
+  id: string;
+  address: {
+    city: string;
+    country: {
+      id: string;
+      name: string;
+    };
+    email: string;
+    landmark: string;
+    line: string;
+    name: string;
+    phone_numbers: string[];
+    state: string;
+    zip_code: string;
+  };
+  address_type: string;
+}
+
+export interface UpdateCartPayload {
+  item: {
+    product_variation_id: string;
+    quantity: number;
+    shipping_address: {
+      email: string;
+      phone_numbers: string;
+    };
+  };
+  skip_payable_validation: boolean;
+}
+
+export interface AddToCartPayload {
+  order: {
+    items: [
+      {
+        free_field_value: string;
+        product_variation_id: string;
+        quantity: number;
+        shipping_address: {
+          email: string;
+          phone_numbers: string;
+        };
+      }
+    ];
+    zaggle_card_client_id: string;
+  };
+  skip_payable_validation: boolean;
+}
+export interface MyOrdersPayload { }
+
+export interface CheckoutPayload {
+  amount_cents: number;
+  client_id: string;
+  order_id: string;
+  redeem_propel_points: boolean;
+  redirect: string;
+  payment_method?: string;
+  transactions: [
+    {
+      amount_cents: number;
+      payment_method: string;
+    }
+  ];
+}
+
+export interface DeliverHerePayload {
+  skip_payable_validation: boolean,
+  order: {
+    shipping: {
+      shipping_method: string
+    },
+    shipping_address: {
+      zip_code: string,
+      city: string,
+      name: string,
+      latitude: string | null,
+      longitude: string | null,
+      state: string,
+      line: string,
+      country: {
+        id: string,
+        name: string
+      },
+      phone_numbers: string[],
+      id: string,
+      email: string
+    },
+    billing_address: {
+      zip_code: string,
+      city: string,
+      name: string,
+      latitude: string | null,
+      longitude: string | null,
+      state: string,
+      line: string,
+      country: {
+        id: string,
+        name: string
+      },
+      phone_numbers: string[],
+      id: string,
+      email: string
+    }
+  }
+}

package/src-app/types/navigation.ts

@@ -0,0 +1,99 @@
+export type RootStackParamList = {
+  Onboarding: undefined;
+  Login: { isReturning?: boolean } | undefined;
+  OTPVerification: { phoneNumber: string };
+  VerificationComplete: undefined;
+  MainTabs: undefined;
+  MyProfile: undefined;
+  MyOrders: { from?: string };
+};
+
+export type TabParamList = {
+  DashboardTab: {
+    screen: keyof AppStackParamList;
+    params?: any;
+  };
+  Redeem: undefined;
+  Profile: undefined;
+  Help: { from?: string };
+  MyOrders: { from?: string };
+};
+
+export interface ProductData {
+  id: string;
+  title: string;
+  subtitle?: string;
+  points: string;
+  image?: string;
+  category: string;
+  logo?: string;
+  backgroundColor?: string;
+  variants?: string[];
+  description?: string;
+  redemptionTerms?: string;
+  shoppingTerms?: string;
+  imageUrl: string;
+}
+
+export type CardItem = {
+  id: string;
+  order_no: string;
+  date: string;
+  status: 'success' | 'failed' | 'processing' | 'dispatched' | 'pending';
+  totalPoints: number;
+  items: {
+    id: string;
+    product: ProductItem;
+    quantity: number;
+    amount_cents: number;
+  }[];
+  grand_total: number;
+  discount_cents?: number;
+  shipping_address?: {
+    line: string;
+    city: string;
+    state: string;
+    zip_code: string;
+    country: {
+      name: string;
+    };
+    email: string;
+    phone_numbers: string[];
+  };
+  shipment_status?: string;
+  created_at?: string;
+};
+
+export type ProductItem = {
+  id: string;
+  name: string;
+  description: string;
+  denomination: number;
+  quantity: number;
+  points: number;
+  image: string;
+  deliveryDetails: DeliveryDetails;
+};
+
+export type DeliveryDetails = {
+  address: string;
+  email: string;
+  phone: string;
+};
+
+export type AppStackParamList = {
+  RedemptionHistory: { from?: string; exitToHost?: boolean };
+  MyOrders: { from?: string };
+  OrderDetails: { item: CardItem };
+  FAQ: { from?: string };
+  TnC: { from?: string };
+  ProductDetail: { product: ProductData; from?: string };
+  PointsLog: undefined;
+  Dashboard: undefined;
+  MyEVouchers: undefined;
+  MyCart: { product: ProductData; from?: string };
+  DeliveryAddress: { from?: string };
+  NewDeliveryAddress: { item?: any };
+  PaymentMethod: { item?: any };
+  TransactionSuccessful: { item?: any };
+} & TabParamList;

package/src-app/utils/Validation.ts

@@ -0,0 +1,48 @@
+// src/utils/validation.ts
+import * as Yup from 'yup';
+
+export const isValidEmail = (str: string): boolean => {
+  const v = str.trim();
+  const re = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+  return re.test(v);
+};
+
+
+export const extractLineAndLandmark = (str: string = '') => {
+  let line = '';
+  let landmark = '';
+
+  const parts = str.split('\n');
+  parts.forEach(part => {
+    if (part.startsWith('Line:')) {
+      line = part.replace('Line:', '').trim();
+    }
+    if (part.startsWith('Landmark:')) {
+      landmark = part.replace('Landmark:', '').trim();
+    }
+  });
+
+  return { line, landmark };
+};
+
+export const formSchema = Yup.object().shape({
+  fullName: Yup.string()
+    .min(5, 'Full name must be at least 5 characters')
+    .required('Full name is required'),
+  mobileNumber: Yup.string()
+    .matches(/^[0-9]{10}$/, 'Mobile number must be 10 digits')
+    .required('Mobile number is required'),
+  email: Yup.string()
+    .email('Invalid email format')
+    .required('Email is required'),
+  address: Yup.string().required('Address is required'),
+  landmark: Yup.string()
+    .min(5, 'Landmark must be at least 5 characters')
+    .required('Landmark is required'),
+  city: Yup.string().required('City is required'),
+  state: Yup.string().required('State is required'),
+  pincode: Yup.string()
+    .matches(/^[0-9]{6}$/, 'Pincode must be 6 digits')
+    .required('Pincode is required'),
+});
+

package/src-app/utils/filterPins.ts

@@ -0,0 +1,29 @@
+import { Linking } from "react-native";
+
+export const FILTER = "filter";
+export const MAP = "map";
+export const REDUCE = "reduce";
+export const PUSH = "push";
+
+export const RENDER_KEYS = {
+  IMG: "img",
+  LINK: "a",
+};
+
+export const FALLBACK_TEXT = {
+  link: "Click here",
+};
+
+export const URL_REGEX = /^https?:\/\//i;
+
+export const handleLinkPress = (href?: string) => {
+  if (href && URL_REGEX.test(href)) {
+    Linking.openURL(href).catch((err) =>
+      console.log("Failed to open URL:", err)
+    );
+  } else {
+    console.log("Invalid or missing href:", href);
+  }
+};
+
+export const IGNORED_DOM_TAGS = ["sup", "sub", "span", "colgroup"];

package/src-app/utils/navigationUtils.ts

@@ -0,0 +1,43 @@
+/**
+ * Navigation Utilities
+ * 
+ * Handles back navigation for SDK screens.
+ * Tries goBack() first; if that can't navigate, uses the map/fallback.
+ */
+
+export const handleCustomGoBack = (
+  navigation: any,
+  route: any,
+  options?: {
+    map?: Record<string, string>; 
+    fallback?: string;
+    onDeepLinkExit?: () => boolean;
+  }
+) => {
+  // Deep link exit takes priority
+  if (options?.onDeepLinkExit) {
+    options.onDeepLinkExit();
+    return true;
+  }
+
+  // Try goBack() first if navigator has history
+  if (navigation.canGoBack()) {
+    navigation.goBack();
+    return true;
+  }
+
+  // Fallback: use the map to determine destination based on current route
+  const currentRouteName = route?.name;
+  if (options?.map && currentRouteName && options.map[currentRouteName]) {
+    navigation.navigate(options.map[currentRouteName]);
+    return true;
+  }
+
+  // Last resort: navigate to fallback screen
+  if (options?.fallback) {
+    navigation.navigate(options.fallback);
+    return true;
+  }
+
+  return false;
+};

package/src-app/utils/useHardwareBack.ts

@@ -0,0 +1,21 @@
+import { useFocusEffect } from "@react-navigation/native";
+import { useCallback } from "react";
+import { BackHandler } from "react-native";
+
+export const useHardwareBack = (onBackPress: () => boolean | void) => {
+  useFocusEffect(
+    useCallback(() => {
+      const backAction = () => {
+        const handled = onBackPress();
+        return handled ?? true;
+      };
+
+      const subscription = BackHandler.addEventListener(
+        "hardwareBackPress",
+        backAction
+      );
+
+      return () => subscription.remove();
+    }, [onBackPress])
+  );
+};