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

package/src/screens/OrdersDetails/index.tsx

@@ -0,0 +1,333 @@
+import React, { useState } from 'react';
+import { View, Text, ScrollView, TouchableOpacity, Image } from 'react-native';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RouteProp } from '@react-navigation/native';
+import { AppStackParamList, ProductItem } from '../../../src-app/types/navigation';
+import styles from './styles';
+import { AmountModal, CustomImage } from '../../../src-app/components';
+import Images from '../../../src-app/constants/Images';
+import { colors } from '../../../src-app/styles/colors';
+import MobileHeader from '../../../src-app/components/MobileHeader';
+import { pointsFromCentsFixed } from '../../../src-app/constants/Formatter';
+import { DATE, DISCOUNTED_AMOUNT, EMAIL, ORDER_DETAILS_SUPPORT_EMAIL, ORDER_DETAILS_SUPPORT_HOURS, ORDER_DETAILS_SUPPORT_INTRO, ORDER_DETAILS_SUPPORT_PHONE, ORDER_NO, PHONE, REMAINING_AMOUNT } from '../../../src-app/constants/Messages';
+
+type OrderDetailsNavigationProp = StackNavigationProp<
+  AppStackParamList,
+  'OrderDetails'
+>;
+
+type OrderDetailsRouteProp = RouteProp<AppStackParamList, 'OrderDetails'>;
+
+interface Props {
+  navigation: OrderDetailsNavigationProp;
+  route: OrderDetailsRouteProp;
+}
+
+interface Product {
+  id: string;
+  product: ProductItem;
+  quantity: number;
+  amount_cents: number;
+}
+
+interface OrderDetails {
+  id: string;
+  orderNumber: string;
+  date: string;
+  status: 'failed' | 'dispatched' | 'pending';
+  totalPoints: number;
+  products: Product[];
+}
+
+const OrderDetails: React.FC<Props> = ({ navigation, route }) => {
+  const { item } = route.params;
+  const [amountModalVisible, setAmountModalVisible] = useState(false);
+
+  const extractAddress = (str: string) => {
+    const parts = str.split("\n");
+
+    let houseNo = "";
+    let landmark = "";
+
+    parts.forEach(part => {
+      const [key, value] = part.split(":").map(s => s.trim());
+      if (key?.toLowerCase() === "line") {
+        houseNo = value;
+      } else if (key?.toLowerCase() === "landmark") {
+        landmark = value;
+      }
+    });
+
+    return { houseNo, landmark };
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status?.toLowerCase()) {
+      case 'failed':
+        return (
+          <CustomImage source={Images?.crossIcon} imgStyle={[styles.icon]} />
+        );
+      case 'dispatched':
+        return (
+          <CustomImage source={Images?.tickIcon} imgStyle={[styles.icon]} />
+        );
+      case 'complete':
+      case 'confirmed':
+        return (
+          <CustomImage source={Images?.tickIcon} imgStyle={[styles.icon]} />
+        );
+      case 'pending':
+      case 'Pending':
+        return (
+          <CustomImage source={Images?.pendingIcon} imgStyle={[styles.icon]} />
+        );
+      case 'partial':
+        return (
+          <CustomImage source={Images?.pendingIcon} imgStyle={[styles.icon]} />
+        );
+      default:
+        return null;
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    console.log('📦 getStatusColor - status:', status);
+    switch (status?.toLowerCase()) {
+      case 'failed':
+        return colors.red;
+      case 'dispatched':
+        return colors.green;
+      case 'pending':
+        return colors.orange;
+      case 'partial':
+        return colors.orange;
+      case 'confirmed':
+        return colors.green;
+      case 'complete':
+      case 'Complete':
+        return colors.green;
+      default:
+        return colors.orderDetailsText;
+    }
+  };
+
+  const getStatusText = (status: string) => {
+    switch (status?.toLowerCase()) {
+      case 'failed':
+        return 'Failed';
+      case 'dispatched':
+        return 'Dispatched';
+      case 'pending':
+        return 'Pending';
+      case 'partial':
+        return 'Partial';
+      case 'cancelled':
+        return 'Cancelled';
+      case 'confirmed':
+        return 'Confirmed';
+      case 'complete':
+        return 'Complete';
+      default:
+        return status || '';
+    }
+  };
+
+  const getStatusGradient = (status: string) => {
+    switch (status?.toLowerCase()) {
+      case 'failed':
+        return 'https://cdn.builder.io/api/v1/image/assets/TEMP/61e5ff7f60286acb4e138d6e523d999f5735f77c?width=786';
+      case 'partial':
+        return 'https://cdn.builder.io/api/v1/image/assets/TEMP/61e5ff7f60286acb4e138d6e523d999f5735f77c?width=786';
+      case 'dispatched':
+        return 'https://cdn.builder.io/api/v1/image/assets/TEMP/dd74efefe610e5bdc765d8bdc4edebd6aca28fde?width=786';
+      case 'pending':
+        return 'https://cdn.builder.io/api/v1/image/assets/TEMP/9403c4dddd88735d6767058bb115da7d3d749746?width=786';
+      case 'complete':
+      case 'Complete':
+      case 'confirmed':
+        return 'https://cdn.builder.io/api/v1/image/assets/TEMP/dd74efefe610e5bdc765d8bdc4edebd6aca28fde?width=786';
+      default:
+        return 'https://cdn.builder.io/api/v1/image/assets/TEMP/61e5ff7f60286acb4e138d6e523d999f5735f77c?width=786';
+    }
+  };
+
+const toUrlString = (raw: any): string | null => {
+  if (typeof raw === 'string') return raw;
+  if (raw?.uri && typeof raw.uri === 'string') return raw.uri;
+  if (raw?.url && typeof raw.url === 'string') return raw.url;
+  if (raw?.image?.url && typeof raw.image.url === 'string') return raw.image.url;
+  return null;
+};
+
+
+  const renderProduct = (product: Product, index: number) => {
+    const raw = product?.product?.image;           
+    const url = toUrlString(raw);    
+    
+    return(              
+    <View key={product.id}>
+      <View style={styles.productSection}>
+        <View style={styles.productRow}>
+          <View style={styles.productLeft}>
+            <View style={styles.productImageContainer}>
+              {url ? (
+                  <Image source={{ uri: url }} style={styles.productImage} />
+                ) : (
+                  <CustomImage source={Images.placeholder} imgStyle={styles.productImage} />
+                )}
+            </View>
+            <View style={styles.productDetails}>
+              <Text style={styles.productName}>{product?.product?.name}</Text>
+              <Text style={styles.productDescription}>
+                {product?.product?.description}
+              </Text>
+              <View style={styles.productMetadata}>
+                <Text style={styles.productDenomination}>
+                  Denomination : {product?.product?.denomination}
+                </Text>
+                <Text style={styles.productQuantity}>
+                  Qty : {product?.quantity}
+                </Text>
+                <Text style={styles.productPoints}>
+                  {pointsFromCentsFixed(product?.amount_cents, 1)} Points
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        {item?.shipping_address && (
+          <View style={styles.deliverySection}>
+            <Text style={styles.deliveryTitle}>Delivery Details</Text>
+            <Text style={styles.deliveryAddress}>
+              {(() => {
+                const address = extractAddress(item?.shipping_address?.line);
+                return `${address.houseNo}, ${address.landmark}, ${item?.shipping_address?.city}, ${item?.shipping_address?.state}, ${item?.shipping_address?.zip_code} , ${item?.shipping_address?.country?.name}`.trim();
+              })()}
+
+            </Text>
+            <View style={styles.contactRow}>
+              <Text style={styles.contactInfo}>
+                {item?.shipping_address?.email}
+              </Text>
+              <Text style={styles.contactInfo}>
+                {`+91 ` + item?.shipping_address?.phone_numbers[0]}
+              </Text>
+            </View>
+          </View>
+        )}
+      </View>
+
+      {index < item.items.length - 1 && <View style={styles.separator} />}
+    </View>
+  )};
+
+  const formatDate = (isoDate: string) => {
+    const date = new Date(isoDate);
+    const day = date.toLocaleString('en-GB', { day: '2-digit' });
+    const month = date.toLocaleString('en-GB', { month: 'short' });
+    const year = date.getFullYear();
+    return `${day} ${month}, ${year}`;
+  };
+  return (
+    <View style={styles.container}>
+      <MobileHeader
+        title="Order Details"
+        showBack
+        onBack={() => {
+          if (navigation.canGoBack()) {
+            navigation.goBack();
+          } else {
+            navigation.navigate('MyOrders' as never);
+          }
+        }}
+        disableSafeAreaPadding={true}
+      />
+
+      <View style={styles.statusSection}>
+        <Image
+          source={{ uri: getStatusGradient(item?.status || 'pending') }}
+          style={styles.statusBackgroundImage}
+        />
+        <View style={styles.statusContent}>
+          <View style={styles.statusHeader}>
+            <View style={styles.statusLeft}>
+              {getStatusIcon(item?.status || 'pending')}
+              <Text style={[styles.statusText, { color: getStatusColor(item?.status || 'pending') }]}>
+                {getStatusText(item?.status || 'pending')}
+              </Text>
+            </View>
+            <TouchableOpacity
+              style={styles.pointsSection}
+              activeOpacity={0.7}
+              onPress={() => {
+                setAmountModalVisible(true);
+              }}
+            >
+              <Text style={styles.totalPoints}>{pointsFromCentsFixed(item?.grand_total, 1)} Points</Text>
+              <CustomImage
+                source={Images.i_blackIcon}
+                imgStyle={[styles.icon, { width: 16, height: 16 }]}
+              />
+            </TouchableOpacity>
+          </View>
+          <View style={styles.orderMeta}>
+            <View style={[styles.orderInfo]}>
+              <Text style={styles.orderLabel}>{ORDER_NO}</Text>
+              <Text style={styles.orderValue}>{item?.order_no}</Text>
+            </View>
+            <View style={styles.orderInfo}>
+              <Text style={styles.orderLabel}>{DATE}</Text>
+              <Text style={styles.orderValue}>
+                {item?.created_at ? formatDate(item.created_at) : 'N/A'}
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        <View style={styles.productsContainer}>
+          {item.items.map((product, index) => renderProduct(product, index))}
+        </View>
+
+        <View style={styles.supportSection}>
+          <Text style={styles.supportIntro}>
+            {ORDER_DETAILS_SUPPORT_INTRO}
+          </Text>
+          <View style={styles.supportContact}>
+            <Text style={styles.supportLabel}>{EMAIL}</Text>
+            <Text style={styles.supportValue}>{ORDER_DETAILS_SUPPORT_EMAIL}</Text>
+          </View>
+          <View style={styles.supportContact}>
+            <Text style={styles.supportLabel}>{PHONE}</Text>
+            <Text style={styles.supportValue}>{ORDER_DETAILS_SUPPORT_PHONE}</Text>
+          </View>
+          <Text style={styles.supportHours}>
+            {ORDER_DETAILS_SUPPORT_HOURS}
+          </Text>
+        </View>
+      </ScrollView>
+
+      {amountModalVisible && (
+        <AmountModal
+          visible={amountModalVisible}
+          onClose={() => setAmountModalVisible(false)}
+          item={{
+            discount_cents: item?.discount_cents || 0,
+            grand_total: item?.grand_total,
+            total_amount_cents: item?.grand_total,
+          }}
+          label_1={REMAINING_AMOUNT}
+          label_2={DISCOUNTED_AMOUNT}
+        />
+      )}
+    </View>
+  );
+};
+
+export default OrderDetails;

package/src/screens/OrdersDetails/styles.ts

@@ -0,0 +1,262 @@
+import { StyleSheet } from 'react-native';
+import FontFamily from '../../../src-app/constants/Fonts';
+import { colors } from '../../../src-app/styles/colors';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.orderDetailsBackground,
+  },
+
+  statusSection: {
+    maxWidth: 393,
+    width: '100%',
+    alignSelf: 'center',
+    position: 'relative',
+    height: 105,
+    marginBottom: 20,
+    marginTop:20
+  },
+  statusBackgroundImage: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: '100%',
+    height: 105,
+    resizeMode: 'cover',
+  },
+
+  statusContent: {
+    position: 'absolute',
+    top: 0,
+    left: 20,
+    right: 20,
+    paddingVertical: 16,
+    gap: 16,
+  },
+  statusHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  statusLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  statusText: {
+    fontSize: 16,
+    fontWeight: '500',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    textTransform: 'capitalize',
+  },
+  pointsSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  totalPoints: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: colors.orderDetailsText,
+    fontFamily: FontFamily.LEXEND_SEMIBOLD,
+  },
+  orderMeta: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  orderInfo: {
+    gap: 4,
+  },
+  orderLabel: {
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.orderDetailsSecondaryText,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    textTransform: 'capitalize',
+  },
+  orderValue: {
+    fontSize: 12,
+    fontWeight: '400',
+    color: colors.orderDetailsText,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingBottom: 100,
+    maxWidth: 393,
+    width: '100%',
+    alignSelf: 'center',
+  },
+  productsContainer: {
+    paddingHorizontal: 20,
+  },
+  productSection: {
+    paddingVertical: 12,
+    gap: 24,
+  },
+  productRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+  },
+  productLeft: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 12,
+    flex: 1,
+  },
+  productImageContainer: {
+    width: 81,
+    height: 60,
+    backgroundColor: colors.orderDetailsBackground,
+    borderRadius: 6.75,
+    shadowColor: colors.orderDetailsShadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 1,
+    shadowRadius: 3.84,
+    elevation: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 0.25,
+    borderColor: colors.orderDetailsBorder,
+  },
+  productImage: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
+  productDetails: {
+    flex: 1,
+    height: 54,
+    justifyContent: 'space-between',
+  },
+  productName: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: colors.orderDetailsText,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  productDescription: {
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.orderDetailsSecondaryText,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  productMetadata: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 16,
+    justifyContent: 'space-between',
+  },
+  productDenomination: {
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.orderDetailsSecondaryText,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  productQuantity: {
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.orderDetailsSecondaryText,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  productPoints: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: colors.orderDetailsText,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    bottom: 3,
+  },
+  deliverySection: {
+    gap: 8,
+  },
+  deliveryTitle: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: colors.orderDetailsText,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  deliveryAddress: {
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.orderDetailsSecondaryText,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    lineHeight: 13.5,
+  },
+  contactRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    gap: 4,
+  },
+  contactInfo: {
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.orderDetailsSecondaryText,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  separator: {
+    height: 1.2,
+    backgroundColor: 'transparent',
+    marginVertical: 8,
+    width: '100%',
+    alignSelf: 'center',
+    borderTopWidth: 1,
+    borderTopColor: colors.orderDetailsSeparator,
+  },
+  supportSection: {
+    backgroundColor: colors.orderDetailsSupportBackground,
+    borderRadius: 8,
+    padding: 12,
+    margin: 20,
+    gap: 12,
+  },
+  supportIntro: {
+    fontSize: 12,
+    fontWeight: '400',
+    color: colors.orderDetailsSecondaryText,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    lineHeight: 16.2,
+  },
+  supportContact: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  supportLabel: {
+    fontSize: 12,
+    fontWeight: '400',
+    color: colors.orderDetailsSecondaryText,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    lineHeight: 16.2,
+  },
+  supportValue: {
+    fontSize: 12,
+    fontWeight: '400',
+    color: colors.orderDetailsText,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    lineHeight: 16.2,
+  },
+  supportHours: {
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.orderDetailsSecondaryText,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    lineHeight: 13.5,
+  },
+  icon: {
+    height: 18,
+    width: 18,
+  },
+});
+
+export default styles;