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

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

@@ -0,0 +1,54 @@
+import { View, Text, ViewStyle, TextStyle } from "react-native";
+import React from "react";
+import styles from "./styles";
+import CustomImage from "../CustomImage";
+import Images from "../../constants/Images";
+
+interface CustomErrorProps {
+  message: string;
+  mainIcon?: any;
+  closeIcon?: any;
+  onClose?: () => void;
+  containerStyle?: ViewStyle;
+  textStyle?: TextStyle;
+  mainIconStyle?: any;
+  closeIconStyle?: any;
+  showCloseIcon?: boolean;
+  showMainIcon?: boolean;
+}
+
+const CustomError: React.FC<CustomErrorProps> = ({
+  message,
+  mainIcon = Images.warningIcon,
+  closeIcon = Images.redErrorCrossIcon,
+  onClose,
+  containerStyle,
+  textStyle,
+  mainIconStyle,
+  closeIconStyle,
+  showCloseIcon = true,
+  showMainIcon = true,
+}) => {
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {showMainIcon && (
+        <CustomImage
+          source={mainIcon}
+          imgStyle={[styles.imgStyle, mainIconStyle]}
+        />
+      )}
+      <View style={styles.row}>
+        <Text style={[styles.text, textStyle]}>{message}</Text>
+        {showCloseIcon && (
+          <CustomImage
+            source={closeIcon}
+            imgStyle={[styles.icon, closeIconStyle]}
+            onPress={onClose}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default CustomError;

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

@@ -0,0 +1,41 @@
+import { StyleSheet } from "react-native";
+import FontFamily from "../../constants/Fonts";
+import { colors } from "../../styles/colors";
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: colors.red,
+    alignItems: "center",
+    backgroundColor: colors.errorbgColor,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 15
+  },
+  imgStyle: {
+    width: 20,
+    height: 20,
+    resizeMode: "contain",
+  },
+  icon: {
+    width: 9.41,
+    height: 9.01,
+    resizeMode: "contain",
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '85%',
+  },
+  text: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: '400',
+    color: colors.red,
+  }
+});
+
+export default styles;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  Image,
+  StyleProp,
+  TouchableOpacity,
+  GestureResponderEvent,
+} from 'react-native';
+import FastImage, { ImageStyle } from 'react-native-fast-image';
+
+interface ImageProps {
+  source: number | { uri: string };
+  imgStyle?: StyleProp<ImageStyle>;
+  onPress?: (event: GestureResponderEvent) => void;
+}
+
+const CustomImage: React.FC<ImageProps> = ({ source, imgStyle, onPress }) => {
+  const ImageComponent =
+    typeof source === 'number' ? (
+      <Image source={source} style={imgStyle as any} resizeMode="contain" />
+    ) : (
+      <FastImage
+        source={source}
+        style={imgStyle}
+        resizeMode={FastImage.resizeMode.contain}
+      />
+    );
+
+  if (onPress) {
+    return (
+      <TouchableOpacity onPress={onPress}>{ImageComponent}</TouchableOpacity>
+    );
+  }
+
+  return ImageComponent;
+};
+
+export default CustomImage;

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

@@ -0,0 +1,5 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({});
+
+export default styles;

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

@@ -0,0 +1,45 @@
+import { View, ActivityIndicator, Text } from 'react-native';
+import React from 'react';
+import styles from './styles';
+import { colors } from '../../styles/colors';
+
+interface CustomLoaderProps {
+  loading?: boolean;
+  visible?: boolean;
+  size?: 'small' | 'large';
+  color?: string;
+  backgroundColor?: string;
+  opacity?: number;
+  text?: string;
+  fullScreen?: boolean;
+  style?: any;
+}
+
+const CustomLoader: React.FC<CustomLoaderProps> = ({
+  loading,
+  visible = true,
+  size = 'large',
+  color = colors.primary,
+  backgroundColor = 'rgba(255, 255, 255, 0.7)',
+  opacity = 1,
+  text,
+  fullScreen = true,
+  style,
+}) => {
+  const isVisible = loading !== undefined ? loading : visible;
+
+  if (!isVisible) return null;
+
+  const containerStyle = fullScreen
+    ? [styles.fullScreenLoader, { backgroundColor, opacity }, style]
+    : [styles.inlineLoader, { backgroundColor, opacity }, style];
+
+  return (
+    <View style={containerStyle}>
+      <ActivityIndicator size={size} color={color} />
+      {text && <Text style={styles.loadingText}>{text}</Text>}
+    </View>
+  );
+};
+
+export default CustomLoader;

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

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { typography, spacing } from '../../styles/shared';
+import { colors } from '../../styles/colors';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  fullScreenLoader: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    // backgroundColor: 'rgba(255, 255, 255, 0.7)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 100,
+  },
+  inlineLoader: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: spacing.lg,
+    backgroundColor: 'rgba(255, 255, 255, 0.7)',
+  },
+  loadingText: {
+    ...typography.body,
+    color: colors.onSurface,
+    marginTop: spacing.sm,
+    textAlign: 'center',
+  },
+});
+
+export default styles;

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

@@ -0,0 +1,51 @@
+import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import React from 'react';
+import styles from './styles';
+import CustomButton from '../CustomButton';
+import CustomImage from '../CustomImage';
+
+interface CustomMessagePopUpProps {
+  navigation?: any;
+  title: string;
+  message: string;
+  icon?: number | { uri: string };
+  visible: boolean;
+  onClose: () => void;
+}
+
+const CustomMessagePopUp: React.FC<CustomMessagePopUpProps> = ({
+  title,
+  message,
+  visible,
+  onClose,
+  icon,
+}) => {
+  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.iconContainer}>
+          {!!icon && <CustomImage source={icon} imgStyle={styles.icon} />}
+          <Text style={styles.title}>{title}</Text>
+        </View>
+
+        <Text style={styles.message}>{message}</Text>
+
+        <CustomButton
+          title="Close"
+          onPress={onClose}
+          customButtonContainerStyle={styles.customButtonContainer}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default CustomMessagePopUp;

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

@@ -0,0 +1,74 @@
+import { Dimensions, StyleSheet } from 'react-native';
+import FontFamily from '../../constants/Fonts';
+import { colors } from '../../styles/colors';
+
+const { height: screenHeight, width: screenWidth } = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  absoluteContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: screenWidth,
+    height: screenHeight,
+    justifyContent: 'center',
+    alignItems: 'center',
+    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: '33%',
+    backgroundColor: '#FFFFFF',
+    borderRadius: 30,
+    paddingHorizontal: 20,
+    paddingTop: 10,
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginVertical: 15,
+    textAlign: 'center',
+    color: colors.black,
+    fontFamily: FontFamily.LEXEND_BOLD,
+  },
+  message: {
+    fontSize: 16,
+    textAlign: 'center',
+    color: colors.black,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontWeight: '400',
+  },
+  customButtonContainer: {
+    paddingHorizontal: 20,
+  },
+  icon: {
+    width: 20,
+    height: 20,
+    resizeMode: 'contain',
+  },
+  iconContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 10,
+  },
+});
+
+export default styles;

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

@@ -0,0 +1,13 @@
+import { View, Text } from 'react-native';
+import React from 'react';
+import styles from './styles';
+
+const CustomProductCard: React.FC = () => {
+  return (
+    <View>
+      {/* <Text>CustomProductCard</Text> */}
+    </View>
+  );
+};
+
+export default CustomProductCard;

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

@@ -0,0 +1,5 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({});
+
+export default styles;