@propel-nsl/propel-react-native-sdk 1.1.5 → 1.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propel-nsl/propel-react-native-sdk",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "Propel Mobile SDK - React Native Core",
   "files": [
     "src/",

package/src/screens/PaymentMethod/index.tsx

@@ -270,19 +270,11 @@ const PaymentMethod: React.FC<{
             return; 
             }
             const payload = {
-              orderId: cartId,
               amount_cents: 0,
               client_id: '7b170ef2-c0a0-4968-a832-d308d54a8419',
               order_id: cartId,
-              redeem_propel_points: true,
-              redirect: '',
               payment_method: 'third_party_points',
-              transactions: [
-                {
-                  amount_cents: 0, 
-                  payment_method: 'zaggleOption',
-                },
-              ],
+              transactions: [],
               skipAddress,
             };
             setShowLoader(true);

package/src/screens/ProductDetails/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { Component, useCallback, useEffect, useState } from 'react';
 import {
   View,
   Text,
@@ -145,6 +145,26 @@ const ChevronDownIcon: React.FC = () => (
   </Svg>
 );
 
+class HTMLErrorBoundary extends Component<
+  { fallback?: React.ReactNode; children: React.ReactNode },
+  { hasError: boolean }
+> {
+  state = { hasError: false };
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback ?? (
+        <Text style={{ color: colors.onSurfaceVariant, fontSize: 13 }}>
+          Content could not be displayed.
+        </Text>
+      );
+    }
+    return this.props.children;
+  }
+}
+
 const AccordionItem: React.FC<{
   title: string;
   content: string;
@@ -174,21 +194,23 @@ const AccordionItem: React.FC<{
       </TouchableOpacity>
       {isExpanded && (
         <View style={styles.accordionContent}>
-          <RenderHTML
-            contentWidth={width}
-            source={{
-              html: sanitizeHtmlContent(content ?? ''),
-            }}
-            tagsStyles={{
-              ol: styles.ol,
-              ul: styles.ul,
-              li: styles.li,
-              p: styles.p,
-              div: styles.div,
-            }}
-            renderers={renderers}
-            ignoredDomTags={IGNORED_DOM_TAGS}
-          />
+          <HTMLErrorBoundary>
+            <RenderHTML
+              contentWidth={width}
+              source={{
+                html: sanitizeHtmlContent(content ?? ''),
+              }}
+              tagsStyles={{
+                ol: styles.ol,
+                ul: styles.ul,
+                li: styles.li,
+                p: styles.p,
+                div: styles.div,
+              }}
+              renderers={renderers}
+              ignoredDomTags={IGNORED_DOM_TAGS}
+            />
+          </HTMLErrorBoundary>
         </View>
       )}
     </View>
@@ -271,50 +293,69 @@ const ProductDetail: React.FC = () => {
   }, [dispatch]);
 
   const sanitizeHtmlContent = (html: string): string => {
-    if (!html) return '';
-
-    const cleaned = html
-      .replace(HTML_SANITIZATION_PATTERNS.STYLE_TAGS, '')
-      .replace(HTML_SANITIZATION_PATTERNS.SPAN_OPEN, '')
-      .replace(HTML_SANITIZATION_PATTERNS.SPAN_CLOSE, '')
-      .replace(HTML_SANITIZATION_PATTERNS.MSO_NORMAL_CLASS, '')
-      .replace(HTML_SANITIZATION_PATTERNS.O_P_TAG, '')
-      .replace(HTML_SANITIZATION_PATTERNS.SUP_TAG, '')
-      .replace(HTML_SANITIZATION_PATTERNS.SUB_TAG, '')
-      .replace(HTML_SANITIZATION_PATTERNS.EMPTY_P, '')
-      .replace(HTML_SANITIZATION_PATTERNS.FONT_OPEN, '')
-      .replace(HTML_SANITIZATION_PATTERNS.FONT_CLOSE, '')
-
-      .replace(HTML_SANITIZATION_PATTERNS.TABLE_OPEN, '<div>')
-      .replace(HTML_SANITIZATION_PATTERNS.TABLE_CLOSE, '</div>')
-      .replace(HTML_SANITIZATION_PATTERNS.TR_OPEN, '<div>')
-      .replace(HTML_SANITIZATION_PATTERNS.TR_CLOSE, '</div>')
-      .replace(HTML_SANITIZATION_PATTERNS.TD_OPEN, '<div>')
-      .replace(HTML_SANITIZATION_PATTERNS.TD_CLOSE, '</div>')
-      .replace(HTML_SANITIZATION_PATTERNS.TBODY_OPEN, '<div>')
-      .replace(HTML_SANITIZATION_PATTERNS.TBODY_CLOSE, '</div>')
-      .replace(HTML_SANITIZATION_PATTERNS.P_OPEN, '<div>')
-      .replace(HTML_SANITIZATION_PATTERNS.P_CLOSE, '</div>')
-
-      .replace(HTML_SANITIZATION_PATTERNS.DIV_BR, '</div><div>')
-      .replace(HTML_SANITIZATION_PATTERNS.BR, '</div><div>')
-      .replace(HTML_SANITIZATION_PATTERNS.EMPTY_DIV, '')
-      .replace(HTML_SANITIZATION_PATTERNS.SUP_INLINE, '')
-
-      .replace(HTML_SANITIZATION_PATTERNS.STYLE_ATTRIBUTES, '')
-      .replace(HTML_SANITIZATION_PATTERNS.ID_ATTRIBUTES, '')
-      .replace(HTML_SANITIZATION_PATTERNS.CLASS_ATTRIBUTES, '')
-      .replace(HTML_SANITIZATION_PATTERNS.TITLE_ATTRIBUTES, '')
-
-      .replace(HTML_SANITIZATION_PATTERNS.NBSP, ' ')
-      .replace(HTML_SANITIZATION_PATTERNS.MULTI_SPACE, ' ')
-
-      .replace(HTML_SANITIZATION_PATTERNS.DIV_OPEN, '<p>')
-      .replace(HTML_SANITIZATION_PATTERNS.DIV_CLOSE, '</p>')
-
-      .trim();
-
-    return `<div>${cleaned}</div>`;
+    if (!html) return '<div></div>';
+
+    try {
+      const cleaned = html
+        .replace(/\r\n?/g, '\n')
+        .replace(/<!--[\s\S]*?-->/g, '')
+        .replace(/<!DOCTYPE[^>]*>/gi, '')
+        .replace(/<!(?!--)[\s\S]*?>/g, '')
+
+        .replace(HTML_SANITIZATION_PATTERNS.STYLE_TAGS, '')
+        .replace(HTML_SANITIZATION_PATTERNS.SPAN_OPEN, '')
+        .replace(HTML_SANITIZATION_PATTERNS.SPAN_CLOSE, '')
+        .replace(HTML_SANITIZATION_PATTERNS.MSO_NORMAL_CLASS, '')
+        .replace(HTML_SANITIZATION_PATTERNS.O_P_TAG, '')
+        .replace(HTML_SANITIZATION_PATTERNS.SUP_TAG, '')
+        .replace(HTML_SANITIZATION_PATTERNS.SUB_TAG, '')
+        .replace(HTML_SANITIZATION_PATTERNS.EMPTY_P, '')
+        .replace(HTML_SANITIZATION_PATTERNS.FONT_OPEN, '')
+        .replace(HTML_SANITIZATION_PATTERNS.FONT_CLOSE, '')
+
+        .replace(HTML_SANITIZATION_PATTERNS.TABLE_OPEN, '<div>')
+        .replace(HTML_SANITIZATION_PATTERNS.TABLE_CLOSE, '</div>')
+        .replace(HTML_SANITIZATION_PATTERNS.TR_OPEN, '<div>')
+        .replace(HTML_SANITIZATION_PATTERNS.TR_CLOSE, '</div>')
+        .replace(HTML_SANITIZATION_PATTERNS.TD_OPEN, '<div>')
+        .replace(HTML_SANITIZATION_PATTERNS.TD_CLOSE, '</div>')
+        .replace(HTML_SANITIZATION_PATTERNS.TBODY_OPEN, '<div>')
+        .replace(HTML_SANITIZATION_PATTERNS.TBODY_CLOSE, '</div>')
+        .replace(HTML_SANITIZATION_PATTERNS.P_OPEN, '<div>')
+        .replace(HTML_SANITIZATION_PATTERNS.P_CLOSE, '</div>')
+
+        .replace(HTML_SANITIZATION_PATTERNS.DIV_BR, '</div><div>')
+        .replace(HTML_SANITIZATION_PATTERNS.BR, '</div><div>')
+        .replace(HTML_SANITIZATION_PATTERNS.EMPTY_DIV, '')
+        .replace(HTML_SANITIZATION_PATTERNS.SUP_INLINE, '')
+
+        .replace(HTML_SANITIZATION_PATTERNS.STYLE_ATTRIBUTES, '')
+        .replace(HTML_SANITIZATION_PATTERNS.ID_ATTRIBUTES, '')
+        .replace(HTML_SANITIZATION_PATTERNS.CLASS_ATTRIBUTES, '')
+        .replace(HTML_SANITIZATION_PATTERNS.TITLE_ATTRIBUTES, '')
+
+        .replace(HTML_SANITIZATION_PATTERNS.NBSP, ' ')
+        .replace(/&amp;/gi, 'and')
+        .replace(/&lt;/gi, '<')
+        .replace(/&gt;/gi, '>')
+        .replace(/&quot;/gi, '"')
+        .replace(/&apos;/gi, "'")
+        .replace(/&#0?39;/g, "'")
+        .replace(/&#\d+;/g, '')
+        .replace(/&#x[0-9a-fA-F]+;/g, '')
+        .replace(/&[a-zA-Z]+;/g, ' ')
+        .replace(/&/g, ' ')
+        .replace(HTML_SANITIZATION_PATTERNS.MULTI_SPACE, ' ')
+
+        .replace(HTML_SANITIZATION_PATTERNS.DIV_OPEN, '<p>')
+        .replace(HTML_SANITIZATION_PATTERNS.DIV_CLOSE, '</p>')
+
+        .trim();
+
+      return `<div>${cleaned || ''}</div>`;
+    } catch {
+      return '<div></div>';
+    }
   };
 
   const normalize = (v: any) => String(v ?? '').trim().toLowerCase();

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

@@ -68,6 +68,10 @@ const getStatusIcon = (status: string) => {
       return (
         <CustomImage source={Images?.pendingIcon} imgStyle={[styles.icon]} />
       );
+    case 'cancelled':
+      return (
+        <CustomImage source={Images?.crossIcon} imgStyle={[styles.icon]} />
+      );
     default:
       return null;
   }
@@ -83,6 +87,8 @@ const getStatusColor = (status: string) => {
       return colors.orange;
     case 'partial':
       return colors.orange;
+    case 'cancelled':
+      return colors.red;
     case 'complete':
     case 'confirmed':
       return colors.green;
@@ -100,8 +106,9 @@ const getStatusText = (status: string) => {
     case 'pending':
       return 'Pending';
     case 'partial':
-    case 'cancelled':
       return 'Partial';
+    case 'cancelled':
+      return 'Cancelled';
     case 'complete':
       return 'Complete';
     case 'confirmed':