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

package/src/screens/ProductDetails/index.tsx

@@ -0,0 +1,682 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  Image,
+  SafeAreaView,
+  useWindowDimensions,
+  BackHandler,
+} from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { useNavigation, useRoute, RouteProp, useFocusEffect } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { AppStackParamList } from '../../../src-app/types/navigation';
+import styles from './styles';
+import {
+  AmountModal,
+  CustomImage,
+  CustomLoader,
+  CustomMessagePopUp,
+} from '../../../src-app/components';
+import Images from '../../../src-app/constants/Images';
+import { useAppDispatch } from '../../../src-app/hooks/useAppDispatch';
+import {
+  addToCartRequest,
+  productDetailsByIdRequest,
+  dashboardInfoRequest,
+  resetAuthState,
+} from '../../../src-app/redux/authSlice';
+import { useAppSelector } from '../../../src-app/hooks/useAppSelector';
+import { RootState } from '../../../src-app/redux/store';
+import RenderHTML from 'react-native-render-html';
+import Toast from 'react-native-toast-message';
+import { FALLBACK_TEXT, handleLinkPress, IGNORED_DOM_TAGS, RENDER_KEYS } from '../../../src-app/utils/filterPins';
+import {
+  DAYS,
+  DELIVERY_WITHIN,
+  DESCRIPTION,
+  ERROR,
+  NO_VARIATION_SELECTED,
+  QUANTITY,
+  SELECT_VARIANT,
+  REDEMPTION_TERMS,
+  SHOPPING_HANDLING_TERMS,
+  PRODUCT_DESCRIPTION_NOT_AVAILABLE,
+  REDEMPTION_TERMS_NOT_AVAILABLE,
+  SHOPPING_HANDLING_TERMS_NOT_AVAILABLE,
+  VIEW_DETAILS,
+  ADD_TO_CART,
+  ORDER_AMOUNT,
+  DELIVERY_CHARGES,
+  ERROR_TITLE,
+  ITEM_ADDED_TO_CART_SUCCESSFULLY,
+  SUCCESS
+} from '../../../src-app/constants/Messages';
+import { HTML_SANITIZATION_PATTERNS, CUSTOM_RENDERER_STYLES } from '../../../src-app/constants/HtmlSanitization';
+import { colors } from '../../../src-app/styles/colors';
+import { useHardwareBack } from '../../../src-app/utils/useHardwareBack';
+import { ROUTES } from '../../../src-app/constants/Routes';
+import { handleCustomGoBack } from '../../../src-app/utils/navigationUtils';
+import { isPureText } from '../../../src-app/constants/Text';
+
+
+
+type ProductDetailRouteProp = RouteProp<AppStackParamList, 'ProductDetail'>;
+
+const BackIcon: React.FC = () => (
+  <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M18.9987 11.0007H7.13972L10.7694 6.64111C10.9391 6.43691 11.0208 6.17365 10.9964 5.90925C10.972 5.64484 10.8436 5.40095 10.6394 5.23123C10.4352 5.06151 10.1719 4.97985 9.90755 5.00423C9.64314 5.02861 9.39925 5.15702 9.22953 5.36122L4.22998 11.3607C4.19634 11.4084 4.16626 11.4585 4.13999 11.5107C4.13999 11.5607 4.13999 11.5907 4.06999 11.6407C4.02467 11.7553 4.00094 11.8773 4 12.0006C4.00094 12.1239 4.02467 12.2459 4.06999 12.3606C4.06999 12.4106 4.06999 12.4406 4.13999 12.4906C4.16626 12.5427 4.19634 12.5928 4.22998 12.6406L9.22953 18.64C9.32355 18.7529 9.44128 18.8437 9.57435 18.9059C9.70742 18.9681 9.85257 19.0002 9.99946 19C10.2331 19.0005 10.4595 18.9191 10.6394 18.77C10.7407 18.6861 10.8243 18.583 10.8857 18.4666C10.947 18.3503 10.9848 18.223 10.9969 18.0921C11.009 17.9611 10.9951 17.829 10.9561 17.7034C10.917 17.5778 10.8536 17.4612 10.7694 17.3601L7.13972 13.0005H18.9987C19.2639 13.0005 19.5182 12.8952 19.7057 12.7077C19.8932 12.5201 19.9986 12.2658 19.9986 12.0006C19.9986 11.7354 19.8932 11.4811 19.7057 11.2936C19.5182 11.1061 19.2639 11.0007 18.9987 11.0007Z"
+      fill={colors.black}
+    />
+  </Svg>
+);
+
+const customRenderers = {
+  [RENDER_KEYS.IMG]: ({ TDefaultRenderer, ...props }: any) => (
+    <View style={CUSTOM_RENDERER_STYLES.IMAGE_CONTAINER}>
+      <TDefaultRenderer {...props} />
+    </View>
+  ),
+
+  [RENDER_KEYS.LINK]: ({ TDefaultRenderer, tnode, ...props }: any) => {
+    const href = tnode?.attributes?.href;
+    const text = tnode?.init?.children?.[0]?.data || href || FALLBACK_TEXT.link;
+
+    return (
+      <Text style={styles.link} onPress={() => handleLinkPress(href)}>
+        {text}
+      </Text>
+    );
+  },
+};
+
+const MinusIcon: React.FC = () => (
+  <Svg width="12" height="2" viewBox="0 0 12 2" fill="none">
+    <Path
+      d="M10.8462 1.19976H1.15385C0.515152 1.19976 0 0.663955 0 -0.000244141C0 -0.664443 0.515152 -1.20025 1.15385 -1.20025H10.8462C11.4848 -1.20025 12 -0.664443 12 -0.000244141C12 0.663955 11.4848 1.19976 10.8462 1.19976Z"
+      fill={colors.onSurfaceVariant}
+    />
+  </Svg>
+);
+
+const PlusIcon: React.FC = () => (
+  <Svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+    <Path
+      d="M6 12C5.549 12 5.184 11.6351 5.184 11.1847V0.815305C5.184 0.364898 5.549 0 6 0C6.45 0 6.815 0.364898 6.815 0.815305V11.1847C6.815 11.6351 6.45 12 6 12Z"
+      fill={colors.onSurfaceVariant}
+      stroke={colors.onSurfaceVariant}
+      strokeWidth="0.48"
+    />
+    <Path
+      d="M11.185 6.81522H0.815305C0.364898 6.81522 0 6.45032 0 5.99991C0 5.54951 0.364898 5.18461 0.815305 5.18461H11.185C11.635 5.18461 12 5.54951 12 5.99991C12 6.45032 11.635 6.81522 11.185 6.81522Z"
+      fill={colors.onSurfaceVariant}
+      stroke={colors.onSurfaceVariant}
+      strokeWidth="0.48"
+    />
+  </Svg>
+);
+
+const ChevronUpIcon: React.FC = () => (
+  <Svg width="11" height="7" viewBox="0 0 11 7" fill="none">
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.7803 6.28033C10.4874 6.57322 10.0126 6.57322 9.71967 6.28033L5.75 2.31066L1.78033 6.28033C1.48744 6.57322 1.01256 6.57322 0.719669 6.28033C0.426776 5.98744 0.426776 5.51256 0.719669 5.21967L5.21967 0.71967C5.51256 0.426776 5.98744 0.426776 6.28033 0.71967L10.7803 5.21967C11.0732 5.51256 11.0732 5.98744 10.7803 6.28033Z"
+      fill={colors.onSurfaceVariant}
+      stroke={colors.onSurfaceVariant}
+      strokeWidth="0.2"
+    />
+  </Svg>
+);
+
+const ChevronDownIcon: React.FC = () => (
+  <Svg width="11" height="7" viewBox="0 0 11 7" fill="none">
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0.71967 0.71967C1.01256 0.426777 1.48744 0.426777 1.78033 0.71967L5.75 4.68934L9.71967 0.71967C10.0126 0.426777 10.4874 0.426777 10.7803 0.71967C11.0732 1.01256 11.0732 1.48744 10.7803 1.78033L6.28033 6.28033C5.98744 6.57322 5.51256 6.57322 5.21967 6.28033L0.71967 1.78033C0.426777 1.48744 0.426777 1.01256 0.71967 0.71967Z"
+      fill={colors.onSurfaceVariant}
+      stroke={colors.onSurfaceVariant}
+      strokeWidth="0.2"
+    />
+  </Svg>
+);
+
+const AccordionItem: React.FC<{
+  title: string;
+  content: string;
+  isExpanded: boolean;
+  onToggle: () => void;
+  width: number;
+  renderers: any;
+  sanitizeHtmlContent: (html: string) => string;
+}> = ({
+  title,
+  content,
+  isExpanded,
+  onToggle,
+  width,
+  renderers,
+  sanitizeHtmlContent,
+}) => (
+    <View style={styles.accordionContainer}>
+      <View style={styles.divider} />
+      <TouchableOpacity
+        activeOpacity={0.7}
+        style={styles.accordionHeader}
+        onPress={onToggle}
+      >
+        <Text style={styles.accordionTitle}>{title}</Text>
+        {isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
+      </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}
+          />
+        </View>
+      )}
+    </View>
+  );
+
+const ProductDetail: React.FC = () => {
+  const navigation = useNavigation<StackNavigationProp<AppStackParamList>>();
+  const route = useRoute<ProductDetailRouteProp>();
+  const from = route.params?.from;
+  const id = route.params?.id;
+  const dispatch = useAppDispatch();
+  const [messagepopUpVisible, setMessagepopUpVisible] = useState(false);
+  const {
+    productDetailsByIdData,
+    productDetailsByIdLoading,
+    addToCartError,
+    addToCartData,
+    viewMyCartData,
+  } = useAppSelector((state: RootState) => state.auth);
+  const { dashboardInfoData } = useAppSelector(
+    (state: RootState) => state.auth,
+  );
+  const { width } = useWindowDimensions();
+  const [selectedVariant, setSelectedVariant] = useState('');
+  const [quantity, setQuantity] = useState(1);
+  const [expandedSections, setExpandedSections] = useState({
+    description: true,
+    redemption: true,
+    shopping: false,
+  });
+  const [amountModalVisible, setAmountModalVisible] = useState(false);
+  const [isAddingToCart, setIsAddingToCart] = useState(false);
+
+  const variants = productDetailsByIdData?.variation_types || [];
+
+  const toggleSection = (section: keyof typeof expandedSections) => {
+    setExpandedSections(prev => ({
+      ...prev,
+      [section]: !prev[section],
+    }));
+  };
+
+  useEffect(() => {
+    if (isAddingToCart && addToCartData) {
+      console.log('🛒 Add to cart SUCCESS:', addToCartData);
+      Toast.show({
+        type: SUCCESS,
+        text1: ITEM_ADDED_TO_CART_SUCCESSFULLY,
+      });
+      navigateToCart();
+      setIsAddingToCart(false);
+      dispatch(resetAuthState('addToCartData'));
+    }
+  }, [addToCartData, isAddingToCart, dispatch]);
+
+  const increaseQuantity = () => setQuantity(prev => prev + 1);
+  const decreaseQuantity = () => setQuantity(prev => Math.max(1, prev - 1));
+
+  useEffect(() => {
+    if (addToCartError) {
+      console.log('🛒 Add to cart ERROR:', addToCartError);
+      setMessagepopUpVisible(true);
+      setIsAddingToCart(false);
+    }
+  }, [addToCartError]);
+
+  useEffect(() => {
+    if (id) {
+      console.log('🛒 Loading product details for ID:', id);
+      dispatch(productDetailsByIdRequest({ id: id }));
+    } else {
+      console.log('🛒 No product ID provided');
+      setSelectedVariant('');
+      setQuantity(1);
+    }
+  }, [id, dispatch]);
+
+  useEffect(() => {
+    dispatch(dashboardInfoRequest({}));
+  }, [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>`;
+  };
+
+  const normalize = (v: any) => String(v ?? '').trim().toLowerCase();
+
+  const getSelectedVariation = () => {
+    const allVariations = productDetailsByIdData?.variations || [];
+    const selectNormalized = normalize(selectedVariant);
+
+    if (!allVariations.length) return undefined;
+
+    const match = allVariations.find((v: any) => {
+      const candidateLabels = new Set<string>();
+      candidateLabels.add(normalize(v?.variations_key));
+      candidateLabels.add(normalize(v?.name));
+
+      if (Array.isArray(v?.variation_types)) {
+        v?.variation_types?.forEach?.((t: any) => candidateLabels.add(normalize(t?.value)));
+      }
+      return candidateLabels.has(selectNormalized);
+    });
+
+    return match || allVariations[0];
+  };
+
+  useFocusEffect(
+  useCallback(() => {
+    return () => {
+      setAmountModalVisible(false);
+    };
+  }, [])
+);
+
+
+  useEffect(() => {
+    console.log('🛒 Product data loaded:', {
+      hasData: !!productDetailsByIdData,
+      variations: productDetailsByIdData?.variations?.length || 0,
+      variationTypes: productDetailsByIdData?.variation_types?.length || 0,
+    });
+    
+    const firstValue = productDetailsByIdData?.variation_types?.[0]?.values?.[0];
+    if (firstValue !== undefined && firstValue !== null) {
+      console.log('🛒 Setting selected variant from first value:', firstValue);
+      setSelectedVariant(String(firstValue));
+      return;
+    }
+    const firstVar = productDetailsByIdData?.variations?.[0];
+    if (firstVar) {
+      const fallback = String(firstVar?.variations_key ?? firstVar?.name ?? '');
+      console.log('🛒 Setting selected variant from first variation:', fallback);
+      setSelectedVariant(fallback);
+      return;
+    }
+    console.log('🛒 No variations found, clearing selected variant');
+    setSelectedVariant('');
+  }, [productDetailsByIdData, id]);
+
+  const handleAddToCart = () => {
+    console.log('🛒 Add to Cart button pressed');
+    console.log('🛒 Selected variant:', selectedVariant);
+    console.log('🛒 Quantity:', quantity);
+    
+    const chosen = getSelectedVariation();
+    console.log('🛒 Chosen variation:', chosen);
+    
+    if (!chosen?.id) {
+      console.log('🛒 No variation selected, showing toast');
+      Toast.show({ type: ERROR, text1: NO_VARIATION_SELECTED });
+      return;
+    }
+
+    console.log('🛒 Adding to cart with variation ID:', chosen.id);
+    setIsAddingToCart(true);
+    
+    const cartPayload = {
+      order: {
+        items: [
+          {
+            free_field_value: '',
+            product_variation_id: chosen.id,
+            quantity: quantity,
+            shipping_address: {
+              email: dashboardInfoData?.email,
+              phone_numbers: dashboardInfoData?.phone,
+            },
+          },
+        ],
+        zaggle_card_client_id: dashboardInfoData?.user_client_id,
+      },
+      skip_payable_validation: true,
+    };
+    
+    console.log('🛒 Cart payload:', JSON.stringify(cartPayload, null, 2));
+    
+    dispatch(addToCartRequest(cartPayload));
+  };
+
+  const navigateToCart = () => {
+    console.log('🚀 ProductDetail navigating to MyCart');
+    // In SDK, MyCart is a hidden tab, not nested inside DashboardTab
+    navigation.navigate(ROUTES.MyCart as any);
+  };
+
+  const handleGoBack = () =>
+    handleCustomGoBack(navigation, route, {
+      map: {
+        [ROUTES.REDEEM]: ROUTES.REDEEM,
+      },
+      fallback: ROUTES.DASHBOARD,
+    });
+
+  useHardwareBack(handleGoBack)
+
+
+
+  const selectedVariationForModal = getSelectedVariation();
+
+  const variantLabel = String(
+    selectedVariant ||
+    selectedVariationForModal?.variations_key ||
+    selectedVariationForModal?.name ||
+    ''
+  ).trim();
+
+  const shrinkLabel = isPureText(variantLabel);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <View style={styles.headerContent}>
+          <TouchableOpacity
+            onPress={() => handleGoBack()}
+          >
+            <BackIcon />
+          </TouchableOpacity>
+          <TouchableOpacity
+            activeOpacity={0.7}
+            style={styles.cartBadge}
+            onPress={() => navigateToCart()}
+          >
+            <View style={styles.cartCountContainer}>
+              <Text style={styles.cartCountText}>
+                {viewMyCartData?.items?.length}
+              </Text>
+            </View>
+            <CustomImage source={Images.cart} imgStyle={styles.cartIcon} />
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {productDetailsByIdLoading ? (
+        <CustomLoader visible={productDetailsByIdLoading} />
+      ) : (
+        <>
+          <ScrollView
+            style={styles.scrollContainer}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={{ paddingBottom: 50 }}
+          >
+            <View style={[styles.productImageContainer]}>
+              <Image
+                source={{
+                  uri: productDetailsByIdData?.image?.url,
+                }}
+                style={styles.productImage}
+              />
+            </View>
+
+            <View style={styles.productInfoSection}>
+              <View style={styles.productHeader}>
+                <View style={styles.productTitleContainer}>
+                  <Text style={styles.productTitle}>
+                    {productDetailsByIdData?.name}
+                  </Text>
+                  {productDetailsByIdData?.subtitle && (
+                    <Text style={styles.productSubtitle}>
+                      {productDetailsByIdData?.subtitle}
+                    </Text>
+                  )}
+                </View>
+              </View>
+
+              {variants.length > 0 && (
+                <View style={styles.variantSection}>
+                  <Text style={styles.sectionTitle}>{SELECT_VARIANT}</Text>
+                  <View style={styles.variantGrid}>
+                    <ScrollView
+                      horizontal
+                      showsHorizontalScrollIndicator={false}
+                      contentContainerStyle={styles.variantScrollContainer}
+                    >
+                      {variants?.flatMap((type: any) =>
+                        type?.values?.map((value: string) => (
+                          <TouchableOpacity
+                            key={value}
+                            style={[
+                              styles.variantButton,
+                              selectedVariant === value &&
+                              styles.variantButtonSelected,
+                            ]}
+                            onPress={() => setSelectedVariant(value)}
+                          >
+                            <Text
+                              style={[
+                                styles.variantText,
+                                selectedVariant === value &&
+                                styles.variantTextSelected,
+                              ]}
+                            >
+                              {value}
+                            </Text>
+                          </TouchableOpacity>
+                        ))
+                      )}
+                    </ScrollView>
+                  </View>
+                </View>
+              )}
+
+              <View style={styles.quantitySection}>
+                <Text style={styles.sectionTitle}>{QUANTITY}</Text>
+                <View style={styles.quantityRow}>
+                  <View style={styles.quantitySelector}>
+                    <TouchableOpacity
+                      style={styles.quantityButton}
+                      onPress={decreaseQuantity}
+                    >
+                      <MinusIcon />
+                    </TouchableOpacity>
+                    <Text style={styles.quantityText}>{quantity}</Text>
+                    <TouchableOpacity
+                      style={styles.quantityButton}
+                      onPress={increaseQuantity}
+                    >
+                      <PlusIcon />
+                    </TouchableOpacity>
+                  </View>
+                  {productDetailsByIdData?.delivery_time && (
+                    <View style={styles.deliveryInfo}>
+                      <CustomImage
+                        source={Images.delivery}
+                        imgStyle={styles.deliveryIcon}
+                      />
+                      <Text style={styles.delivery}>
+                        {DELIVERY_WITHIN} {productDetailsByIdData?.delivery_time}{' '}
+                        {DAYS}
+                      </Text>
+                    </View>
+                  )}
+                </View>
+              </View>
+
+              <AccordionItem
+                title={DESCRIPTION}
+                content={
+                  productDetailsByIdData?.description ||
+                  PRODUCT_DESCRIPTION_NOT_AVAILABLE
+                }
+                isExpanded={expandedSections.description}
+                onToggle={() => toggleSection('description')}
+                width={width}
+                renderers={customRenderers}
+                sanitizeHtmlContent={sanitizeHtmlContent}
+              />
+
+              <AccordionItem
+                title={REDEMPTION_TERMS}
+                content={
+                  productDetailsByIdData?.how_to_redeem ||
+                  REDEMPTION_TERMS_NOT_AVAILABLE
+                }
+                isExpanded={expandedSections.redemption}
+                onToggle={() => toggleSection('redemption')}
+                width={width}
+                renderers={customRenderers}
+                sanitizeHtmlContent={sanitizeHtmlContent}
+              />
+
+              <AccordionItem
+                title={SHOPPING_HANDLING_TERMS}
+                content={
+                  productDetailsByIdData?.how_it_works ||
+                  SHOPPING_HANDLING_TERMS_NOT_AVAILABLE
+                }
+                isExpanded={expandedSections.shopping}
+                onToggle={() => toggleSection('shopping')}
+                width={width}
+                renderers={customRenderers}
+                sanitizeHtmlContent={sanitizeHtmlContent}
+              />
+            </View>
+          </ScrollView>
+
+          <View style={styles.bottomCTA}>
+            <View style={styles.priceSection}>
+              <Text
+                style={[styles.priceText, shrinkLabel && styles.priceTextSmall]}
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                adjustsFontSizeToFit={shrinkLabel} 
+                minimumFontScale={0.8}
+              >
+                {variantLabel}
+              </Text>
+              <TouchableOpacity
+                activeOpacity={0.7}
+                style={styles.viewDetailsButton}
+                onPress={() => setAmountModalVisible(true)}
+              >
+                <Text style={styles.viewDetailsText}>{VIEW_DETAILS}</Text>
+                <Svg width="10" height="6" viewBox="0 0 10 6" fill="none">
+                  <Path
+                    d="M9 5L5 1L1 5"
+                    stroke={colors.primary}
+                    strokeWidth="1.6"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </Svg>
+              </TouchableOpacity>
+            </View>
+            <TouchableOpacity
+              activeOpacity={0.7}
+              style={styles.addToCartButton}
+              onPress={() => {
+                console.log('🛒 Add to Cart button PRESSED - onPress triggered');
+                handleAddToCart();
+              }}
+            >
+              <Text style={styles.addToCartText}>{ADD_TO_CART}</Text>
+            </TouchableOpacity>
+          </View>
+        </>
+      )}
+
+      {amountModalVisible && (
+        <AmountModal
+          visible={amountModalVisible}
+          onClose={() => setAmountModalVisible(false)}
+          item={{
+            discount_cents:
+              selectedVariationForModal?.points_required_to_redeem,
+            grand_total: selectedVariationForModal?.price_cents,
+            total_amount_cents: selectedVariationForModal?.price_cents,
+          }}
+          label_1={ORDER_AMOUNT}
+          label_2={DELIVERY_CHARGES}
+        />
+      )}
+
+      <CustomMessagePopUp
+        title={ERROR_TITLE}
+        message={addToCartError || ''}
+        visible={messagepopUpVisible}
+        onClose={() => {
+          setMessagepopUpVisible(false);
+          dispatch(resetAuthState('addToCartError'));
+        }}
+        icon={Images?.pendingIcon}
+      />
+    </SafeAreaView>
+  );
+};
+
+export default ProductDetail;