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

package/src-app/components/ProfileField.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import FontFamily from '../constants/Fonts';
+
+interface ProfileFieldProps {
+  label: string;
+  value: string;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+}
+
+const ProfileField: React.FC<ProfileFieldProps> = ({
+  label,
+  value,
+  containerStyle,
+  labelStyle,
+}) => {
+  return (
+    <View style={[styles.inputContainer, containerStyle]}>
+      <Text style={[styles.label, labelStyle]}>{label}</Text>
+      <Text style={[styles.label, labelStyle]}>{value}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  inputContainer: {
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    borderRadius: 12,
+    backgroundColor: '#F3F4F7',
+    paddingHorizontal: 20,
+    marginBottom: '7%',
+  },
+  content: {
+    padding: 20,
+  },
+  label: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: 400,
+    color: '#6B7280',
+    paddingVertical: 10,
+  },
+});
+
+export default ProfileField;

package/src-app/components/QuantityModal/index.tsx

@@ -0,0 +1,113 @@
+import React, { useRef, useEffect, useState } from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import styles from './styles';
+import CustomButton from '../CustomButton';
+import { VSCALE } from '../../constants/Scaling';
+import { colors } from '../../styles/colors';
+
+interface OTPModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onSelectQuantity: (quantity: number, index: number) => void;
+  onCancel: () => void;
+  onUpdate: () => void;
+  selectedQuantity: number;
+}
+
+const QuantityModal: React.FC<OTPModalProps> = ({
+  visible,
+  onClose,
+  onSelectQuantity,
+  onCancel,
+  onUpdate,
+  selectedQuantity,
+}) => {
+  const scrollViewRef = useRef<ScrollView>(null);
+  const [isButtonClicked, setIsButtonClicked] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (visible && selectedQuantity !== null) {
+      const defaultIndex = selectedQuantity - 1;
+      setIsButtonClicked(defaultIndex);
+
+      // Scroll to selected item
+      setTimeout(() => {
+        scrollViewRef.current?.scrollTo({
+          x: defaultIndex * VSCALE(45),
+          animated: true,
+        });
+      }, 100);
+    }
+  }, [visible, selectedQuantity]);
+
+  const quantityArray = Array.from({ length: 20 }, (_, i) => i + 1);
+
+  const handleQuantity = (quantity: number, index: number) => {
+    setIsButtonClicked(index);
+    onSelectQuantity(quantity, index);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <View style={styles.absoluteContainer} pointerEvents="box-none">
+      <TouchableWithoutFeedback onPress={onClose}>
+        <View style={styles.overlay} />
+      </TouchableWithoutFeedback>
+      <View style={styles.modalContainer}>
+        <View style={styles.handleBar} />
+        <Text style={styles.title}>Quantity</Text>
+
+        <ScrollView
+          ref={scrollViewRef}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ paddingHorizontal: 10 }}
+        >
+          {quantityArray.map((item, index) => (
+            <TouchableOpacity
+              key={index}
+              activeOpacity={0.7}
+              onPress={() => handleQuantity(item, index)}
+              style={[
+                styles.quantityContainer,
+                isButtonClicked === index &&
+                  styles.quantityContainerActive,
+              ]}
+            >
+              <Text style={styles.amountPoints}>{item}</Text>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+
+        <View style={styles.row}>
+          <CustomButton
+            customButtonContainerStyle={{ width: VSCALE(120) }}
+            buttonStyle={{
+              backgroundColor: 'white',
+              borderWidth: 1,
+              borderColor: colors.black,
+            }}
+            title="Cancel"
+            onPress={onCancel}
+            textStyle={{ color: colors.black, left: VSCALE(0) }}
+          />
+          <CustomButton
+            customButtonContainerStyle={{ width: VSCALE(120) }}
+            title="Update"
+            onPress={onUpdate}
+            textStyle={{ right: VSCALE(0) }}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default QuantityModal;

package/src-app/components/QuantityModal/styles.ts

@@ -0,0 +1,84 @@
+import { Platform, StyleSheet, Dimensions } from 'react-native';
+import FontFamily from '../../constants/Fonts';
+import { VSCALE, SCALE } from '../../constants/Scaling';
+import { colors } from '../../styles/colors';
+
+const { height: screenHeight, width: screenWidth } = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  absoluteContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: screenWidth,
+    height: screenHeight,
+    justifyContent: 'flex-end',
+    zIndex: 50000,
+    elevation: 50000,
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContainer: {
+    width: '100%',
+    maxWidth: '100%',
+    height: Platform.OS === 'ios' ? VSCALE(230) : VSCALE(250),
+    backgroundColor: '#FFFFFF',
+    borderTopLeftRadius: SCALE(30),
+    borderTopRightRadius: SCALE(30),
+    paddingHorizontal: SCALE(20),
+    paddingTop: VSCALE(15),
+  },
+  handleBar: {
+    width: SCALE(48),
+    height: VSCALE(4),
+    backgroundColor: colors.outline,
+    borderRadius: SCALE(6),
+    alignSelf: 'center',
+    marginBottom: VSCALE(27),
+  },
+  title: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(16),
+    fontWeight: '500',
+    color: colors.black,
+    textTransform: 'capitalize',
+    marginBottom: VSCALE(20),
+  },
+  amountPoints: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(16),
+    fontWeight: '600',
+    color: colors.black,
+    textTransform: 'capitalize',
+  },
+  quantityContainer: {
+    borderWidth: 1,
+    borderColor: colors.outline ,
+    borderRadius: SCALE(8),
+    marginRight: SCALE(10),
+    width: SCALE(54),
+    height: VSCALE(40),
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.lightbgColor,
+    right: VSCALE(8),
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  quantityContainerActive: {
+    borderColor: colors.darkGrey ,
+  },
+});
+
+export default styles;

package/src-app/components/TabBarIcons.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import { View } from "react-native";
+import Svg, { Path, G, Defs, ClipPath, Rect } from "react-native-svg";
+
+interface IconProps {
+  color: string;
+  focused?: boolean;
+}
+
+export const HomeIcon: React.FC<IconProps> = ({ color }) => (
+  <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M9.50012 17.6772C9.22398 17.6772 9.00012 17.9011 9.00012 18.1772C9.00012 18.4533 9.22398 18.6772 9.50012 18.6772H14.5001C14.7762 18.6772 15.0001 18.4533 15.0001 18.1772C15.0001 17.9011 14.7762 17.6772 14.5001 17.6772H9.50012Z"
+      fill={color}
+      stroke={color}
+      strokeWidth="0.366869"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.1688 2.75291C12.8972 1.74903 11.1028 1.74903 9.83124 2.75291L3.33124 7.88449C2.49051 8.54823 2 9.56041 2 10.6316V18.6778C2 20.6108 3.567 22.1778 5.5 22.1778H18.5C20.433 22.1778 22 20.6108 22 18.6778V10.6316C22 9.56041 21.5095 8.54823 20.6688 7.88449L14.1688 2.75291ZM10.4509 3.53779C11.3592 2.82073 12.6408 2.82073 13.5491 3.53779L20.0491 8.66937C20.6496 9.14347 21 9.86646 21 10.6316V18.6778C21 20.0585 19.8807 21.1778 18.5 21.1778H5.5C4.11929 21.1778 3 20.0585 3 18.6778V10.6316C3 9.86646 3.35036 9.14347 3.95089 8.66937L10.4509 3.53779Z"
+      fill={color}
+      stroke={color}
+      strokeWidth="0.366869"
+    />
+  </Svg>
+);
+
+export const RedeemIcon: React.FC<IconProps> = ({ color }) => (
+  <Svg width="24" height="24" viewBox="0 0 25 25" fill="none">
+    <Path
+      d="M12.4999 15.0107C12.9167 15.0107 13.2548 15.3489 13.2548 15.7656V19.2031C13.2548 19.6199 12.9167 19.958 12.4999 19.958C12.0831 19.958 11.745 19.6199 11.745 19.2031V15.7656C11.745 15.3489 12.0831 15.0107 12.4999 15.0107Z"
+      fill={color}
+      stroke="white"
+      strokeWidth="0.209524"
+    />
+    <Path
+      d="M21.0938 14.595C21.5105 14.595 21.8486 14.9331 21.8486 15.3499V18.7874C21.8486 21.0988 19.9677 22.9797 17.6562 22.9797H7.34375C5.03231 22.9797 3.15137 21.0988 3.15137 18.7874V15.3499C3.15137 14.9331 3.48948 14.595 3.90625 14.595C4.32302 14.595 4.66113 14.9331 4.66113 15.3499V18.7874C4.66113 20.2668 5.86431 21.47 7.34375 21.47H17.6562C19.1357 21.47 20.3389 20.2668 20.3389 18.7874V15.3499C20.3389 14.9331 20.677 14.595 21.0938 14.595Z"
+      fill={color}
+      stroke="white"
+      strokeWidth="0.209524"
+    />
+    <Path
+      d="M15.0781 1.60449C16.9157 1.60449 18.4111 3.09992 18.4111 4.9375C18.4111 5.54416 18.2474 6.11294 17.9629 6.60352L17.8711 6.76074H20.9219C22.2856 6.76074 23.3955 7.87066 23.3955 9.23438V10.9531C23.3955 12.3168 22.2856 13.4268 20.9219 13.4268H4.07812C2.71441 13.4268 1.60449 12.3168 1.60449 10.9531V9.23438C1.60449 7.87066 2.71441 6.76074 4.07812 6.76074H7.12891L7.03711 6.60352C6.75262 6.11294 6.58887 5.54416 6.58887 4.9375C6.58887 3.09992 8.0843 1.60449 9.92188 1.60449C10.9163 1.60449 11.8104 2.04276 12.4219 2.73633L12.5 2.82617L12.5781 2.73633C13.1896 2.04276 14.0837 1.60449 15.0781 1.60449ZM4.07812 8.27051C3.54641 8.27051 3.11426 8.70266 3.11426 9.23438V10.9531C3.11426 11.4848 3.54641 11.917 4.07812 11.917H20.9219C21.4536 11.917 21.8857 11.4848 21.8857 10.9531V9.23438C21.8857 8.70266 21.4536 8.27051 20.9219 8.27051H13.2549V9.23438C13.2549 9.65115 12.9168 9.98926 12.5 9.98926C12.0832 9.98926 11.7451 9.65115 11.7451 9.23438V8.27051H4.07812ZM9.92188 3.11426C8.9163 3.11426 8.09863 3.93192 8.09863 4.9375C8.09863 5.94308 8.9163 6.76074 9.92188 6.76074H11.7451V4.9375C11.7451 3.93192 10.9275 3.11426 9.92188 3.11426ZM15.0781 3.11426C14.0725 3.11426 13.2549 3.93192 13.2549 4.9375V6.76074H15.0781C16.0837 6.76074 16.9014 5.94308 16.9014 4.9375C16.9014 3.93192 16.0837 3.11426 15.0781 3.11426Z"
+      fill={color}
+      stroke="white"
+      strokeWidth="0.209524"
+    />
+  </Svg>
+);
+
+export const PersonIcon: React.FC<IconProps> = ({ color }) => (
+  <Svg width="20" height="20" viewBox="0 0 21 21" fill="none">
+    <G clipPath="url(#clip0_249_5095)">
+      <Path
+        d="M11.3046 10.8402C9.00489 10.8402 7.13452 8.96988 7.13452 6.67012C7.13452 4.37036 9.00489 2.5 11.3046 2.5C13.6044 2.5 15.4748 4.37036 15.4748 6.67012C15.4748 8.96988 13.6044 10.8402 11.3046 10.8402ZM11.3046 3.81452C9.73196 3.81452 8.45168 5.0948 8.45168 6.66749C8.45168 8.24017 9.72932 9.52308 11.3046 9.52308C12.88 9.52308 14.1576 8.24281 14.1576 6.67012C14.1576 5.09743 12.8773 3.81452 11.3046 3.81452Z"
+        fill={color}
+      />
+      <Path
+        d="M11.3044 20.5001C9.54998 20.5001 7.89036 20.105 6.63116 19.3858C5.25605 18.6008 4.5 17.5154 4.5 16.33C4.5 15.1445 5.25605 14.0592 6.63116 13.2742C7.89036 12.5524 9.54998 12.1572 11.3044 12.1572C13.0589 12.1572 14.7185 12.5524 15.9777 13.2715C17.3528 14.0566 18.1089 15.1419 18.1089 16.3273C18.1089 17.5128 17.3528 18.5981 15.9777 19.3832C14.7185 20.1023 13.0589 20.5001 11.3044 20.5001ZM11.3044 13.4744C9.77653 13.4744 8.34873 13.8089 7.28447 14.4175C6.73653 14.731 5.81716 15.3948 5.81716 16.33C5.81716 17.2625 6.73653 17.929 7.28447 18.2425C8.34873 18.851 9.7739 19.1856 11.3044 19.1856C12.835 19.1856 14.2601 18.851 15.3244 18.2425C15.8723 17.929 16.7917 17.2652 16.7917 16.33C16.7917 15.3974 15.8723 14.731 15.3244 14.4175C14.2601 13.8089 12.8323 13.4744 11.3044 13.4744Z"
+        fill={color}
+      />
+    </G>
+    <Defs>
+      <ClipPath id="clip0_249_5095">
+        <Rect
+          width="20"
+          height="20"
+          fill="white"
+          transform="translate(0.5 0.5)"
+        />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+export const HelpIcon: React.FC<IconProps> = ({ color }) => (
+  <View
+    style={{
+      width: 20,
+      height: 20,
+      padding: 1,
+      justifyContent: "center",
+      alignItems: "center",
+    }}
+  >
+    <Svg width="18" height="18" viewBox="0 0 18 19" fill="none">
+      <Path
+        d="M9.00021 0.500707C8.25536 0.489042 7.51359 0.62176 6.82047 0.894992C6.12334 1.1698 5.48815 1.57939 4.94962 2.10045C4.41109 2.62152 3.97912 3.24352 3.68145 3.93124C3.38378 4.61896 3.22569 5.3593 3.21437 6.1086C3.21435 6.11111 3.21435 6.11362 3.21437 6.11613V9.49895C3.21437 9.66946 3.2821 9.83298 3.40266 9.95355C3.52323 10.0741 3.68674 10.1419 3.85724 10.1419C4.02774 10.1419 4.19125 10.0741 4.31181 9.95355C4.43237 9.83298 4.5001 9.66946 4.50011 9.49895V6.12618C4.50887 5.54601 4.63124 4.97354 4.86173 4.44105C5.09219 3.90858 5.42663 3.4281 5.84361 3.02463C6.26059 2.62119 6.75281 2.30318 7.29258 2.0904C7.83234 1.87763 8.40756 1.77362 8.98766 1.78402C8.99603 1.78418 9.0044 1.78418 9.01277 1.78402C9.59286 1.77362 10.1681 1.87763 10.7078 2.0904C11.2476 2.30318 11.7398 2.62119 12.1568 3.02463C12.5738 3.42809 12.9082 3.90856 13.1387 4.44105C13.3691 4.97364 13.4916 5.54607 13.5003 6.12618V9.49895C13.5003 9.66946 13.5681 9.83298 13.6886 9.95355C13.8092 10.0741 13.9727 10.1419 14.1432 10.1419C14.3137 10.1419 14.4772 10.0741 14.5978 9.95355C14.7183 9.83298 14.7861 9.66946 14.7861 9.49895V6.11613C14.7861 6.11362 14.7861 6.11111 14.7861 6.1086C14.7748 5.35925 14.6165 4.61887 14.319 3.93124C14.0213 3.24353 13.5894 2.62152 13.0508 2.10045C12.5123 1.57939 11.8771 1.1698 11.1799 0.894992C10.4868 0.62176 9.74506 0.489042 9.00021 0.500707Z"
+        fill={color}
+      />
+      <Path
+        d="M1.92862 6.92676C1.41735 6.92676 0.926532 7.1303 0.565024 7.49182C0.203519 7.85335 0 8.3442 0 8.85549V11.4271C0 11.9384 0.203519 12.4293 0.565024 12.7908C0.926532 13.1523 1.41735 13.3559 1.92862 13.3559H3.21436C3.55512 13.3559 3.88246 13.2202 4.12342 12.9792C4.3644 12.7382 4.5001 12.4108 4.5001 12.07V8.21258C4.5001 7.8718 4.3644 7.54444 4.12342 7.30346C3.88246 7.06247 3.55512 6.92676 3.21436 6.92676H1.92862ZM1.92862 8.21258H3.21436V12.07H1.92862C1.75787 12.07 1.59483 12.0024 1.47408 11.8817C1.35334 11.7609 1.28574 11.5979 1.28574 11.4271V8.85549C1.28574 8.68473 1.35334 8.52168 1.47408 8.40093C1.59483 8.28019 1.75787 8.21258 1.92862 8.21258Z"
+        fill={color}
+      />
+      <Path
+        d="M14.7856 6.92676C14.4449 6.92676 14.1175 7.06255 13.8766 7.30346C13.6358 7.54438 13.4999 7.87173 13.4999 8.21258V12.07C13.4999 12.4109 13.6358 12.7382 13.8766 12.9792C14.1175 13.2201 14.4449 13.3559 14.7856 13.3559H16.0714C16.5826 13.3559 17.0734 13.1524 17.435 12.7908C17.7964 12.4293 18 11.9385 18 11.4271V8.85549C18 8.34413 17.7964 7.85331 17.435 7.49182C17.0734 7.13021 16.5826 6.92676 16.0714 6.92676H14.7856ZM14.7856 8.21258H16.0714C16.2421 8.21258 16.4053 8.28028 16.5259 8.40093C16.6467 8.52172 16.7142 8.6848 16.7142 8.85549V11.4271C16.7142 11.5978 16.6467 11.7609 16.5259 11.8817C16.4053 12.0023 16.2421 12.07 16.0714 12.07H14.7856V8.21258Z"
+        fill={color}
+      />
+      <Path
+        d="M14.1426 10.1411C13.9721 10.1411 13.8086 10.2089 13.688 10.3294C13.5674 10.45 13.4997 10.6135 13.4997 10.784V13.6771C13.4997 14.1889 13.2966 14.6789 12.9347 15.0408C12.5728 15.4027 12.0828 15.6059 11.5711 15.6059C11.4006 15.6059 11.2371 15.6736 11.1165 15.7942C10.996 15.9147 10.9282 16.0783 10.9282 16.2488C10.9282 16.4193 10.996 16.5828 11.1165 16.7034C11.2371 16.8239 11.4006 16.8917 11.5711 16.8917C12.4233 16.8917 13.2411 16.5526 13.8437 15.9499C14.4464 15.3472 14.7855 14.5294 14.7855 13.6771V10.784C14.7854 10.6135 14.7177 10.45 14.5972 10.3294C14.4766 10.2089 14.3131 10.1411 14.1426 10.1411Z"
+        fill={color}
+      />
+      <Path
+        d="M8.03606 13.9995C7.43955 13.9995 6.86574 14.2357 6.44395 14.6575C6.0221 15.0793 5.78601 15.6532 5.78601 16.2497C5.78601 16.8462 6.0221 17.4201 6.44395 17.8419C6.86574 18.2637 7.43955 18.4999 8.03606 18.4999H9.96468C10.5612 18.4999 11.135 18.2637 11.5568 17.8419C11.9786 17.4201 12.2147 16.8462 12.2147 16.2497C12.2147 15.6532 11.9786 15.0793 11.5568 14.6575C11.135 14.2357 10.5612 13.9995 9.96468 13.9995H8.03606ZM8.03606 15.2853H9.96468C10.2207 15.2853 10.4667 15.3856 10.6477 15.5666C10.8287 15.7476 10.929 15.9937 10.929 16.2497C10.929 16.5057 10.8287 16.7518 10.6477 16.9328C10.4667 17.1138 10.2207 17.2141 9.96468 17.2141H8.03606C7.78008 17.2141 7.53403 17.1138 7.35301 16.9328C7.17206 16.7518 7.07175 16.5057 7.07175 16.2497C7.07175 15.9937 7.17206 15.7476 7.35301 15.5666C7.53403 15.3856 7.78008 15.2853 8.03606 15.2853Z"
+        fill={color}
+      />
+    </Svg>
+  </View>
+);

package/src-app/components/TextInput.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import {
+  TextInput as RNTextInput,
+  View,
+  Text,
+  StyleSheet,
+  TextInputProps,
+  ViewStyle,
+} from "react-native";
+import {spacing, typography, borderRadius } from "../styles/shared";
+import { colors } from "../styles/colors";
+
+interface CustomTextInputProps extends TextInputProps {
+  label?: string;
+  error?: string;
+  containerStyle?: ViewStyle;
+  variant?: "default" | "outlined";
+}
+
+const TextInput: React.FC<CustomTextInputProps> = ({
+  label,
+  error,
+  containerStyle,
+  variant = "outlined",
+  style,
+  ...props
+}) => {
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {label && <Text style={styles.label}>{label}</Text>}
+      <RNTextInput
+        style={[styles.input, styles[variant], error && styles.error, style]}
+        placeholderTextColor={colors.onSurfaceVariant}
+        {...props}
+      />
+      {error && <Text style={styles.errorText}>{error}</Text>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: spacing.md,
+  },
+  label: {
+    ...typography.bodySmall,
+    color: colors.onSurface,
+    marginBottom: spacing.xs,
+    fontWeight: "500",
+  },
+  input: {
+    ...typography.body,
+    color: colors.onSurface,
+    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.lg,
+    borderRadius: borderRadius.md,
+    textAlignVertical: "center",
+  },
+  default: {
+    backgroundColor: colors.surface,
+    borderWidth: 1,
+    borderColor: colors.outline,
+  },
+  outlined: {
+    backgroundColor: colors.background,
+    borderWidth: 1,
+    borderColor: colors.outline,
+  },
+  error: {
+    borderColor: colors.error,
+  },
+  errorText: {
+    ...typography.caption,
+    color: colors.error,
+    marginTop: spacing.xs,
+  },
+});
+
+export default TextInput;

package/src-app/components/ToastConfig.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { BaseToast } from 'react-native-toast-message';
+import type { ToastConfig, ToastConfigParams } from 'react-native-toast-message';
+
+export const toastConfig: ToastConfig = {
+  success: ({ text1, text2, ...rest }: ToastConfigParams<any>) => (
+    <BaseToast
+      {...rest}
+      style={{
+        borderLeftColor: '#4CAF50',
+        paddingVertical: 8,
+        height:42,
+      }}
+      contentContainerStyle={{
+        paddingHorizontal: 15,
+        flexShrink: 1,
+      }}
+      text1={text1}
+      text2={text2}
+      text1Style={{
+        fontSize: 12,
+        fontWeight: '600',
+        color: '#000',
+      }}
+      text2Style={{
+        fontSize: 14,
+        color: '#444',
+        flexWrap: 'wrap',
+        flexShrink: 1,
+      }}
+    />
+  ),
+  error: ({ text1, text2, ...rest }: ToastConfigParams<any>) => (
+    <BaseToast
+      {...rest}
+      style={{
+        borderLeftColor: '#F44336',
+        paddingVertical: 8,
+        height: 42,
+      }}
+      contentContainerStyle={{
+        paddingHorizontal: 15,
+        flexShrink: 1,
+      }}
+      text1={text1}
+      text2={text2}
+      text1Style={{
+        fontSize: 12,
+        fontWeight: '600',
+        color: '#000',
+      }}
+      text2Style={{
+        fontSize: 14,
+        color: '#444',
+        flexWrap: 'wrap',
+        flexShrink: 1,
+      }}
+    />
+  ),
+};

package/src-app/components/index.ts

@@ -0,0 +1,18 @@
+export { default as Footer } from './Footer';
+export { default as CustomButton } from './CustomButton';
+export { default as CustomImage } from './CustomImage';
+export { default as CustomCard } from './CustomCard';
+export { default as CustomProductCard } from './CustomProductCard';
+export { default as AmountModal } from './AmountBreakDownModal';
+export { default as FilterModal } from './FilterModal';
+export { default as QuantityModal } from './QuantityModal';
+export { default as CustomLoader } from './CustomLoader';
+export { default as CustomMessagePopUp } from './CustomMessagePopUp';
+export { default as NoDataFound } from './NoDataFound';
+export { default as Logout } from './Logout';
+export { default as CustomError } from './CustomError';
+
+
+
+
+

package/src-app/config/env.ts

@@ -0,0 +1,22 @@
+// SDK does not use react-native-config - it receives config from host app via bridge
+// Default API URLs for SDK standalone usage
+const DEFAULT_API_URL = 'https://staging-admin.zaggle.in';
+const DEFAULT_API_URL1 = 'https://staging-propel.zaggle.in';
+
+const ENV = {
+  appName: 'Propel SDK',
+  apiUrl: DEFAULT_API_URL,
+  apiUrl1: DEFAULT_API_URL1,
+  enableDebug: false,
+};
+
+// Allow runtime override of API URLs (used by SDK)
+// Ignores placeholder/example URLs to prevent misconfiguration
+export const setApiUrl = (url: string) => {
+  if (url && !url.includes('example.com') && !url.includes('placeholder')) {
+    ENV.apiUrl = url;
+    ENV.apiUrl1 = url;
+  }
+};
+
+export default ENV;

package/src-app/constants/Fonts.ts

@@ -0,0 +1,12 @@
+const FontFamily = {
+  LEXEND_BLACK: 'Lexend-Black',
+  LEXEND_BOLD: 'Lexend-Bold',
+  LEXEND_EXTRABOLD: 'Lexend-ExtraBold',
+  LEXEND_EXTRALIGHT: 'Lexend-ExtraLight',
+  LEXEND_LIGHT: 'Lexend-Light',
+  LEXEND_MEDIUM: 'Lexend-Medium',
+  LEXEND_REGULAR: 'Lexend-Regular',
+  LEXEND_SEMIBOLD: 'Lexend-SemiBold',
+  LEXEND_THIN: 'Lexend-Thin',
+};
+export default FontFamily;

package/src-app/constants/Formatter.ts

@@ -0,0 +1,39 @@
+// Exact fixed decimals (always shows trailing zeros)
+export const toFixedSafe = (value: unknown, digits = 1): string => {
+  const n = Number(value);
+  if (!Number.isFinite(n)) return (0).toFixed(digits);
+  return n.toFixed(digits);
+};
+
+// Up to N decimals (no unnecessary trailing zeros); with grouping
+export const toMaxDecimals = (
+  value: unknown,
+  max = 1,
+  min = 0,
+  locale?: string
+): string => {
+  const n = Number(value);
+  const opts: Intl.NumberFormatOptions = {
+    maximumFractionDigits: max,
+    minimumFractionDigits: min,
+    useGrouping: true,
+  };
+  return Number.isFinite(n)
+    ? n.toLocaleString(locale, opts)
+    : (0).toLocaleString(locale, opts);
+};
+
+// Cents → Points helpers
+export const pointsFromCentsFixed = (cents: unknown, digits = 1): string =>
+  toFixedSafe(Number(cents) / 100, digits);
+
+export const pointsFromCentsMax = (
+  cents: unknown,
+  max = 1,
+  min = 0,
+  locale?: string
+): string => toMaxDecimals(Number(cents) / 100, max, min, locale);
+
+export const formatPointsRange = (minPoints: number, maxPoints: number) => {
+  return `${Math.round(minPoints / 100)} - ${Math.round(maxPoints / 100)} Points`;
+};

package/src-app/constants/HtmlSanitization.ts

@@ -0,0 +1,46 @@
+export const HTML_SANITIZATION_PATTERNS = {
+    STYLE_TAGS: /<style[^>]*>[\s\S]*?<\/style>/gi,
+    SPAN_OPEN: /<span[^>]*>/gi,
+    SPAN_CLOSE: /<\/span>/gi,
+    MSO_NORMAL_CLASS: /class="MsoNormal"/gi,
+    O_P_TAG: /<o:p>.*?<\/o:p>/gi,
+    SUP_TAG: /<sup[^>]*>[\s\S]*?<\/sup>/gi,
+    SUB_TAG: /<sub[^>]*>[\s\S]*?<\/sub>/gi,
+    EMPTY_P: /<p>\s*<\/p>/gi,
+    FONT_OPEN: /<font[^>]*>/gi,
+    FONT_CLOSE: /<\/font>/gi,
+  
+    TABLE_OPEN: /<table[^>]*>/gi,
+    TABLE_CLOSE: /<\/table>/gi,
+    TR_OPEN: /<tr[^>]*>/gi,
+    TR_CLOSE: /<\/tr>/gi,
+    TD_OPEN: /<td[^>]*>/gi,
+    TD_CLOSE: /<\/td>/gi,
+    TBODY_OPEN: /<tbody[^>]*>/gi,
+    TBODY_CLOSE: /<\/tbody>/gi,
+    P_OPEN: /<p[^>]*>/gi,
+    P_CLOSE: /<\/p>/gi,
+  
+    DIV_BR: /<div><br\s*\/?><\/div>/gi,
+    BR: /<br\s*\/?>/gi,
+    EMPTY_DIV: /<div>\s*<\/div>/gi,
+  
+    SUP_INLINE: /<sup[^>]*>.*?<\/sup>/gi,
+  
+    STYLE_ATTRIBUTES: /\sstyle="[^"]*"/gi,
+    ID_ATTRIBUTES: /\sid="[^"]*"/gi,
+    CLASS_ATTRIBUTES: /\sclass="[^"]*"/gi,
+    TITLE_ATTRIBUTES: /\stitle="[^"]*"/gi,
+  
+    NBSP: /&nbsp;/gi,
+    MULTI_SPACE: /\s{2,}/g,
+  
+    DIV_OPEN: /<div>/gi,
+    DIV_CLOSE: /<\/div>/gi,
+  };
+export const CUSTOM_RENDERER_STYLES = {
+  IMAGE_CONTAINER: {
+    alignItems: "center" as const,
+    marginVertical: 10,
+  },
+};