@jescon-technologies/react-native-ui-kit 0.0.4 → 0.0.6

package/src/CustomComponents/SwipableProductCard.js

@@ -0,0 +1,246 @@
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import { Global } from '../../../../../src/Common/Global';
+import { CButtonShadow, isNUQ } from '../CommonStyle/ComponentFunctions';
+import { SwipeRow } from 'react-native-swipe-list-view';
+
+const SwipableProductCard = ({
+    data,
+    argumentname,
+    renderLeftActions,
+    renderRightActions,
+    navigation,
+    type,
+}) => (
+    <SwipeRow
+        disableLeftSwipe={false}
+        disableRightSwipe={false}
+        leftOpenValue={190}
+        rightOpenValue={-190}
+        swipeToClosePercent={10}
+        swipeToOpenPercent={10}
+    >
+        {/* Hidden Row (Swipe Actions) */}
+        <View style={{
+            borderWidth: 0,
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            minHeight: normalize(70),
+        }}>
+            <View style={{ flex: 1, alignItems: 'flex-start' }}>
+                {renderLeftActions && renderLeftActions(data)}
+            </View>
+            <View style={{ flex: 1, alignItems: 'flex-end' }}>
+                {renderRightActions && renderRightActions(data)}
+            </View>
+        </View>
+
+        {/* Main Content */}
+        <TouchableOpacity
+            onLongPress={() => {
+                const pdfUrl =
+                    argumentname == 3
+                        ? `${APIURL}fljrcommonbill/jrcommonbreport/AMAGDBI01.dbo.rnjrinsuproductdetail(${data.code || data?.insuproduct},${Global.userData.suuser})/0/ProductDetail`
+                        : `${APIURL}fljrcommonbill/jrcommonbreport/AMAGDBI01.dbo.rnjrinsusupplier(${data.code},${Global.userData.suuser})/0/SupplierDetail`;
+
+                isNUQ(type) ? navigation.navigate('CProductPhysicalQuantityScreen', {
+                    productCode: data?.insuproduct || 0,
+                }) : navigation.navigate('PDFScreen', { pdfSource: pdfUrl });
+            }}
+        >
+            <View
+                style={{
+                    backgroundColor: '#faeeeb',
+                    marginHorizontal: normalize(10),
+                    marginBottom: normalize(10),
+                    borderRadius: normalize(5),
+                    shadowColor: Global.AppTheme.primary_color,
+                    shadowOffset: { width: 4, height: 4 },
+                    shadowOpacity: 0.6,
+                    shadowRadius: 10,
+                    elevation: 8,
+                    ...CButtonShadow(),
+                }}
+            >
+                <View style={{ flexDirection: 'row', minHeight: normalize(40) }}>
+                    <View
+                        style={{
+                            backgroundColor: isNUQ(data?.color) ? data?.color : '#870808',
+                            width: normalize(10),
+                            height: '100%',
+                            borderStartStartRadius: normalize(5),
+                            borderStartEndRadius: normalize(5),
+                        }}
+                    />
+                    <View
+                        style={{
+                            padding: normalize(3),
+                            flexDirection: 'row',
+                            justifyContent: 'space-between',
+                            alignItems: 'flex-start',
+                        }}
+                    >
+                        <View style={{ width: '80%', justifyContent: 'center' }}>
+                            {/* Product/Supplier name and code */}
+                            {isNUQ(argumentname == 3 ? data.productname : data.suppliername) && data.code ? (
+                                <Text
+                                    numberOfLines={3}
+                                    style={{
+                                        fontSize: normalize(12.5),
+                                        paddingLeft: normalize(5),
+                                        fontWeight: 'bold',
+                                        color: Global.AppTheme.primary_color,
+                                    }}
+                                >
+                                    {data.code} - {argumentname == 3 ? data.productname : data.suppliername}
+                                    {argumentname == 3 && data.classificationname ? ` (${data.classificationname})` : ''}
+                                </Text>
+                            ) : null}
+
+                            {isNUQ(argumentname == 3 ? data.productname : data.suppliername) && type ? (
+                                <Text
+                                    numberOfLines={3}
+                                    style={{
+                                        fontSize: normalize(12.5),
+                                        paddingLeft: normalize(5),
+                                        fontWeight: 'bold',
+                                        color: Global.AppTheme.primary_color,
+                                    }}
+                                >
+                                    {data.code} - {argumentname == 3 ? data.productname : data.suppliername}
+                                    {argumentname == 3 && data.classificationname ? ` (${data.classificationname})` : ''}
+                                </Text>
+                            ) : null}
+
+                            {/* Marketing division */}
+                            {isNUQ(argumentname == 3 && data.marketingdivisionname) ? (
+                                <Text
+                                    numberOfLines={3}
+                                    style={{
+                                        fontSize: normalize(10),
+                                        paddingLeft: normalize(5),
+                                        color: Global.AppTheme.primary_color,
+                                    }}
+                                >
+                                    {argumentname == 3 && data.marketingdivisionname}
+                                </Text>
+                            ) : null}
+                            {/* Tax name */}
+                            {isNUQ(argumentname == 3 && data.taxname) ? (
+                                <Text
+                                    numberOfLines={3}
+                                    style={{
+                                        fontSize: normalize(10),
+                                        paddingLeft: normalize(5),
+                                        color: Global.AppTheme.primary_color,
+                                    }}
+                                >
+                                    {argumentname == 3 && data.taxname}
+                                </Text>
+                            ) : null}
+                            {/* Designation and gst no */}
+                            {argumentname == 8 ? (
+                                <View style={{ flexDirection: 'row' }}>
+                                    {isNUQ(data.designation) ? (
+                                        <View
+                                            style={{
+                                                flexDirection: 'row',
+                                                alignItems: 'center',
+                                                paddingLeft: normalize(5),
+                                            }}
+                                        >
+                                            <Icons.FontAwesome5 name={'user-tie'} size={normalize(11)} color={'#094485'} />
+                                            <Text
+                                                numberOfLines={1}
+                                                style={{
+                                                    fontSize: 10,
+                                                    color: '#555',
+                                                    marginLeft: normalize(5),
+                                                }}
+                                            >
+                                                {data.designation}
+                                            </Text>
+                                        </View>
+                                    ) : null}
+                                    {isNUQ(data.gstno) ? (
+                                        <View
+                                            style={{
+                                                flexDirection: 'row',
+                                                alignItems: 'center',
+                                                paddingLeft: normalize(5),
+                                            }}
+                                        >
+                                            <Icons.FontAwesome5 name={'mobile'} size={normalize(11)} color={'#094485'} />
+                                            <Text
+                                                numberOfLines={1}
+                                                style={{
+                                                    fontSize: 10,
+                                                    color: '#555',
+                                                    marginLeft: normalize(5),
+                                                }}
+                                            >
+                                                {data.gstno}
+                                            </Text>
+                                        </View>
+                                    ) : null}
+                                </View>
+                            ) : null}
+                            {/* Email and phone number */}
+                            {argumentname == 8 ? (
+                                <View style={{ flexDirection: 'row' }}>
+                                    {isNUQ(data.email) ? (
+                                        <View
+                                            style={{
+                                                flexDirection: 'row',
+                                                alignItems: 'center',
+                                                paddingLeft: normalize(5),
+                                            }}
+                                        >
+                                            <Icons.FontAwesome5 name={'envelope'} size={normalize(11)} color={'#094485'} />
+                                            <Text
+                                                numberOfLines={1}
+                                                style={{
+                                                    fontSize: 10,
+                                                    color: '#555',
+                                                    marginLeft: normalize(5),
+                                                }}
+                                            >
+                                                {data.email}
+                                            </Text>
+                                        </View>
+                                    ) : null}
+                                    {isNUQ(data.phoneno) ? (
+                                        <View
+                                            style={{
+                                                flexDirection: 'row',
+                                                alignItems: 'center',
+                                                paddingLeft: normalize(5),
+                                            }}
+                                        >
+                                            <Icons.FontAwesome5 name={'mobile'} size={normalize(11)} color={'#094485'} />
+                                            <Text
+                                                numberOfLines={1}
+                                                style={{
+                                                    fontSize: 10,
+                                                    color: '#555',
+                                                    marginLeft: normalize(5),
+                                                }}
+                                            >
+                                                {data.phoneno}
+                                            </Text>
+                                        </View>
+                                    ) : null}
+                                </View>
+                            ) : null}
+                        </View>
+                    </View>
+                </View>
+            </View>
+        </TouchableOpacity>
+    </SwipeRow>
+);
+
+export default SwipableProductCard;

package/src/CustomComponents/SwipableProductImageCard.js

@@ -0,0 +1,254 @@
+import React, { useContext, useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Dimensions,
+  StyleSheet,
+  Image as RNImage,
+  ActivityIndicator,
+} from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import { Global } from '../../../../../src/Common/Global';
+import { CButtonShadow, isNUQ, notifyMessage } from '../CommonStyle/ComponentFunctions';
+import { SwipeRow } from 'react-native-swipe-list-view';
+import STextInputNew from '../Components/STextInputNew';
+import ContextBio from '../ContextAPI/ContextBio';
+
+const SwipableProductImageCard = ({
+  data,
+  argumentname,
+  renderLeftActions,
+  renderRightActions,
+  navigation,
+  type,
+}) => {
+  const [uploading, setUploading] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(Date.now()); // used for forcing image refresh
+  const { invoiceData, setInvoiceData } = useContext(ContextBio);
+
+  const handlePress = () => {
+    const pdfUrl =
+      argumentname == 3
+        ? `${APIURL}fljrcommonbill/jrcommonbreport/AMAGDBI01.dbo.rnjrinsuproductdetail(${data.code || data?.insuproduct
+        },${Global.userData.suuser})/0/ProductDetail`
+        : `${APIURL}fljrcommonbill/jrcommonbreport/AMAGDBI01.dbo.rnjrinsusupplier(${data.code},${Global.userData.suuser})/0/SupplierDetail`;
+
+    isNUQ(type)
+      ? navigation.navigate('CProductPhysicalQuantityScreen', {
+        productCode: data?.insuproduct || 0,
+      })
+      : navigation.navigate('PDFScreen', { pdfSource: pdfUrl });
+  };
+
+  return (
+    <SwipeRow
+      disableLeftSwipe={false}
+      disableRightSwipe={false}
+      leftOpenValue={190}
+      rightOpenValue={-190}
+      swipeToClosePercent={10}
+      swipeToOpenPercent={10}
+    >
+      {/* Hidden Row (Swipe Actions) */}
+      <View style={{
+        borderWidth: 0,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        minHeight: normalize(70),
+      }}>
+        <View style={{ flex: 1, alignItems: 'flex-start' }}>
+          {renderLeftActions && renderLeftActions(data)}
+        </View>
+        <View style={{ flex: 1, alignItems: 'flex-end' }}>
+          {renderRightActions && renderRightActions(data)}
+        </View>
+      </View>
+
+      {/* Main Content */}
+      <TouchableOpacity onPress={handlePress} activeOpacity={0.8}>
+        <View style={styles.cardContainer}>
+          <View style={styles.cardContent}>
+            {/* Left color indicator */}
+            <View
+              style={[
+                styles.colorIndicator,
+                { backgroundColor: isNUQ(data?.color) ? data?.color : '#870808' },
+              ]}
+            />
+
+            {/* Main content */}
+            <View style={styles.textContainer}>
+              {isNUQ(
+                argumentname == 3 ? data.productname : data.suppliername,
+              ) &&
+                data.code && (
+                  <Text style={styles.titleText} numberOfLines={3}>
+                    {data.code} -{' '}
+                    {argumentname == 3 ? data.productname : data.suppliername}
+                    {argumentname == 3 && data.classificationname
+                      ? ` (${data.classificationname})`
+                      : ''}
+                  </Text>
+                )}
+
+              {/* HSN Code input */}
+              <View style={styles.hsnContainer}>
+                <STextInputNew
+                  data={{
+                    borderWidth: 1,
+                    value: data.hsncode,
+                    borderColor: 'lightgrey',
+                    elevation: 0,
+                    borderRadius: 5,
+                    fontWeight: 'normal',
+                    color: 'black',
+                    itemwidth: Dimensions.get('screen').width * 0.5,
+                    paddingTop: 5,
+                    paddingBottom: 5,
+                    height: Dimensions.get('screen').height * 0.03,
+                    textAlign: 'center',
+                    marginTop: normalize(2),
+                    marginHorizontal: normalize(2),
+                    fontSize: normalize(10),
+                    placeholder: 'hsncode',
+                  }}
+                  callBack={val => {
+                    data.hsncode = val;
+                    data.flag = 2;
+                    setInvoiceData(prevData => ({
+                      ...prevData,
+                      EditStatus: true,
+                    }));
+                  }}
+                />
+              </View>
+            </View>
+
+            {/* Image upload button */}
+            <TouchableOpacity
+              style={styles.imageContainer}
+              onPress={() => {
+                navigation.navigate('FileExplorer', {
+                  data: [{ savedimages: '' }],
+                  visibility: 1, // only image
+                  eventData: null,
+                  callBack: updated => {
+                    if (updated.savedimages) {
+                      const fileName = updated.savedimages.toLowerCase();
+                      console.log('jjjjjjj',JSON.stringify(fileName));
+                      if (!fileName.endsWith('.png')) {
+                        notifyMessage('Only PNG images are allowed.');
+                        return;
+                      }
+
+                      setUploading(true);
+                      data.productimage = updated.savedimages;
+                      data.flag = 2;
+                      setInvoiceData(prevData => ({
+                        ...prevData,
+                        EditStatus: true,
+                      }));
+                      setTimeout(() => {
+                        setUploading(false);
+                        setRefreshKey(Date.now()); // bust cache
+                      }, 400);
+                    }
+                  },
+                });
+              }}>
+              {uploading ? (
+                <ActivityIndicator size="small" color="#094485" />
+              ) : isNUQ(data?.productimage) ? (
+                <RNImage
+                  key={refreshKey}
+                  style={styles.productImage}
+                  source={{
+                    uri: `${APIURL}invfile/getFile/image/${data.productimage}?t=${refreshKey}`,
+                  }}
+                  resizeMode="cover"
+                />
+              ) : (
+                <View style={styles.cameraIcon}>
+                  <Icons.FontAwesome5
+                    name="camera"
+                    color="#094485"
+                    size={normalize(20)}
+                  />
+                  <Text style={{ fontSize: normalize(5), fontWeight: 'bold' }}>
+                    PNG ONLY
+                  </Text>
+                </View>
+              )}
+            </TouchableOpacity>
+
+          </View>
+        </View>
+      </TouchableOpacity>
+    </SwipeRow>
+  );
+};
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    backgroundColor: '#faeeeb',
+    marginHorizontal: normalize(10),
+    marginBottom: normalize(10),
+    borderRadius: normalize(5),
+    shadowColor: Global.AppTheme.primary_color,
+    shadowOffset: { width: 4, height: 4 },
+    shadowOpacity: 0.6,
+    shadowRadius: 10,
+    elevation: 8,
+    ...CButtonShadow(),
+  },
+  cardContent: {
+    flexDirection: 'row',
+    minHeight: normalize(40),
+  },
+  colorIndicator: {
+    width: normalize(10),
+    height: '100%',
+    borderTopLeftRadius: normalize(5),
+    borderBottomLeftRadius: normalize(5),
+  },
+  textContainer: {
+    flex: 1,
+    paddingVertical: normalize(8),
+    paddingHorizontal: normalize(5),
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: normalize(12.5),
+    fontWeight: 'bold',
+    color: Global.AppTheme.primary_color,
+    marginBottom: normalize(4),
+  },
+  hsnContainer: {
+    flexDirection: 'row',
+    marginTop: normalize(2),
+  },
+  imageContainer: {
+    width: normalize(50),
+    height: normalize(50),
+    backgroundColor: 'white',
+    borderRadius: normalize(35),
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: normalize(5),
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+  },
+  productImage: {
+    width: '100%',
+    height: '100%',
+    borderRadius: normalize(35),
+  },
+  cameraIcon: {
+    padding: normalize(10),
+  },
+});
+
+export default SwipableProductImageCard;