react-native-srschat 0.1.83 → 0.1.85

package/src/components/productCard.js

@@ -1,13 +1,32 @@
-import React, { useState, useContext, useEffect } from "react";
-import { View, Text, Image, TouchableOpacity, TextInput, StyleSheet, Platform, Keyboard, ActionSheetIOS, Alert } from "react-native";
-import { AppContext } from "../contexts/AppContext";
+import React, { useState, useContext, useEffect } from 'react';
+import {
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  TextInput,
+  StyleSheet,
+  Platform,
+  Keyboard,
+  ActionSheetIOS,
+  Alert,
+} from 'react-native';
+import { AppContext } from '../contexts/AppContext';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 
-
 export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
-  const { onProductCardClick, onAddToCartClick, sessionId, data, ADD_TO_CART_URL } = useContext(AppContext);
-  const [keyboardVisible, setKeyboardVisible] = useState(false);
+  useEffect(() => {
+    console.log('What is prod: ', prod);
+  }, []);
 
+  const {
+    onProductCardClick,
+    onAddToCartClick,
+    sessionId,
+    data,
+    ADD_TO_CART_URL,
+  } = useContext(AppContext);
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
   // Validation: Check for incomplete product information
   const hasValidProductDetails = () => {
     if (!prod || !prod.product_details) {
@@ -37,16 +56,18 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
     // Check if at least one UOM has valid pricing
     const hasValidPricing = uomKeys.some(uom => {
       const uomInfo = uomData[uom];
-      return uomInfo &&
-             typeof uomInfo.gross_price === 'number' &&
-             uomInfo.gross_price > 0;
+      return (
+        uomInfo &&
+        typeof uomInfo.gross_price === 'number' &&
+        uomInfo.gross_price > 0
+      );
     });
 
     return hasValidPricing;
   };
 
   // Return null if product lacks essential information
-  if (!hasValidProductDetails() || !hasValidInventoryInfo()) {
+  if (!hasValidProductDetails()) {
     return null;
   }
 
@@ -56,11 +77,11 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
       const defaultUom = prod.inventory_info.default_uom;
       return availableUoms.includes(defaultUom) ? defaultUom : availableUoms[0];
     }
-    return "EA";
+    return 'EA';
   });
 
   // Helper function to get min_pack_qty, defaulting to 1 if not applicable
-  const getMinPackQtyForUom = (uomKey) => {
+  const getMinPackQtyForUom = uomKey => {
     const minPackStr = prod.inventory_info?.info_by_uom?.[uomKey]?.min_pack_qty;
     if (minPackStr) {
       const minPackNum = parseFloat(minPackStr);
@@ -74,25 +95,30 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
 
   const uoms = prod.inventory_info?.info_by_uom
     ? Object.keys(prod.inventory_info.info_by_uom)
-    : ["EA"];
-  
+    : ['EA'];
+
   const uomInfo = prod.inventory_info?.info_by_uom?.[selectedUom] || {};
   const grossPrice = uomInfo.gross_price || 0;
   const netPrice = uomInfo.net_price || 0;
   const isOnSale = uomInfo.is_on_sale || false;
-  const discountsArray = Array.isArray(uomInfo.discounts) ? uomInfo.discounts : [];
-  const discountsString = uomInfo.discounts ? uomInfo.discounts : "";
-  
+  const discountsArray = Array.isArray(uomInfo.discounts)
+    ? uomInfo.discounts
+    : [];
+  const discountsString = uomInfo.discounts ? uomInfo.discounts : '';
+
   // maxQuantity is for display purposes only now
-  const maxQuantity = Math.floor(uomInfo.quantity_available || 0); 
+  const maxQuantity = Math.floor(uomInfo.quantity_available || 0);
   const valid = prod.inventory_info?.is_valid || false;
+
+  console.log(prod.inventory_info);
+
   // inStock is for display purposes or if specific logic still needs it, but not for quantity restriction
-  const inStock = maxQuantity > 0; 
-  
+  const inStock = maxQuantity > 0;
+
   const currentMinPackQtyForSelectedUom = getMinPackQtyForUom(selectedUom);
 
   const [quantity, setQuantity] = useState(0);
-  const [quantityText, setQuantityText] = useState("0"); // Track the text input separately
+  const [quantityText, setQuantityText] = useState('0'); // Track the text input separately
 
   // Add keyboard listeners to detect when keyboard appears/disappears
   useEffect(() => {
@@ -104,14 +130,14 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
         if (onFocusQuantityInput) {
           onFocusQuantityInput(prod.part_number);
         }
-      }
+      },
     );
-    
+
     const keyboardDidHideListener = Keyboard.addListener(
       'keyboardDidHide',
       () => {
         setKeyboardVisible(false);
-      }
+      },
     );
 
     return () => {
@@ -121,31 +147,31 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
   }, []);
 
   // Called on every keystroke in the quantity input
-  const handleQuantityChange = (text) => {
+  const handleQuantityChange = text => {
     const rawValue = text.trim();
-    
+
     // Update the text display immediately
     setQuantityText(rawValue);
-    
+
     // Handle empty input
-    if (rawValue === "") {
-        setQuantity(0);
-        return;
+    if (rawValue === '') {
+      setQuantity(0);
+      return;
     }
-    
+
     // Allow partial decimal inputs like "." or "1."
-    if (rawValue === "." || rawValue.endsWith(".")) {
-        // Don't update quantity state for partial decimal inputs, just keep the text
-        return;
+    if (rawValue === '.' || rawValue.endsWith('.')) {
+      // Don't update quantity state for partial decimal inputs, just keep the text
+      return;
     }
-    
+
     const numericValue = parseFloat(rawValue);
     if (!isNaN(numericValue) && numericValue >= 0) {
-        // Round to 2 decimal places to handle decimal min pack quantities
-        setQuantity(Math.round(numericValue * 100) / 100);
+      // Round to 2 decimal places to handle decimal min pack quantities
+      setQuantity(Math.round(numericValue * 100) / 100);
     } else {
-        // Invalid input, reset quantity but keep the text for user feedback
-        setQuantity(0);
+      // Invalid input, reset quantity but keep the text for user feedback
+      setQuantity(0);
     }
   };
 
@@ -156,32 +182,32 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
     // Parse the final text input
     const rawValue = quantityText.trim();
     let finalQuantity = 0;
-    
-    if (rawValue !== "") {
-        const numericValue = parseFloat(rawValue);
-        if (!isNaN(numericValue) && numericValue >= 0) {
-            finalQuantity = Math.round(numericValue * 100) / 100;
-        }
+
+    if (rawValue !== '') {
+      const numericValue = parseFloat(rawValue);
+      if (!isNaN(numericValue) && numericValue >= 0) {
+        finalQuantity = Math.round(numericValue * 100) / 100;
+      }
     }
 
     // Only basic validation - don't auto-correct to min pack quantities
     if (!isProdValid) {
-        setQuantity(0);
-        setQuantityText("0");
-        return;
+      setQuantity(0);
+      setQuantityText('0');
+      return;
     }
 
     // Just ensure quantity is not negative, but allow any positive decimal value
     if (finalQuantity < 0) {
-        setQuantity(0);
-        setQuantityText("0");
-        return;
+      setQuantity(0);
+      setQuantityText('0');
+      return;
     }
 
     // Update both states with the final parsed value
     setQuantity(finalQuantity);
     setQuantityText(finalQuantity.toString());
-    
+
     // Keep the user's input as-is for valid products
     // Validation and alerts will happen in handleAddToCart
   };
@@ -189,10 +215,10 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
   const incrementQuantity = () => {
     const uomForCalc = selectedUom;
     const minPackForUom = getMinPackQtyForUom(uomForCalc);
-    
+
     setQuantity(prevQuantity => {
       let newQuantity;
-      
+
       if (prevQuantity === 0) {
         // If starting from 0, go to first min pack
         newQuantity = minPackForUom;
@@ -201,7 +227,8 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
         newQuantity = prevQuantity + minPackForUom;
       } else {
         // Find the next valid multiple of min pack quantity
-        const nextMultiple = Math.ceil(prevQuantity / minPackForUom) * minPackForUom;
+        const nextMultiple =
+          Math.ceil(prevQuantity / minPackForUom) * minPackForUom;
         // If current quantity is already a perfect multiple, go to next multiple
         if (Math.abs(prevQuantity % minPackForUom) < 0.01) {
           newQuantity = prevQuantity + minPackForUom;
@@ -223,19 +250,20 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
 
     setQuantity(prevQuantity => {
       if (prevQuantity === 0) {
-        setQuantityText("0");
+        setQuantityText('0');
         return 0; // Cannot go below 0
       }
 
       let newQuantity;
-      
+
       if (minPackForUom <= 1) {
         // If min pack is 1 or less, just decrement by min pack
         newQuantity = Math.max(0, prevQuantity - minPackForUom);
       } else {
         // Find the previous valid multiple of min pack quantity
-        const prevMultiple = Math.floor(prevQuantity / minPackForUom) * minPackForUom;
-        
+        const prevMultiple =
+          Math.floor(prevQuantity / minPackForUom) * minPackForUom;
+
         // If current quantity is already a perfect multiple, go to previous multiple
         if (Math.abs(prevQuantity % minPackForUom) < 0.01) {
           newQuantity = Math.max(0, prevQuantity - minPackForUom);
@@ -244,7 +272,7 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
           newQuantity = prevMultiple;
         }
       }
-      
+
       // Round to 2 decimal places to handle decimal min pack quantities
       const finalQuantity = Math.round(newQuantity * 100) / 100;
       setQuantityText(finalQuantity.toString());
@@ -253,25 +281,29 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
   };
 
   const handleAddToCart = () => {
-    if (!valid ) {
+    if (!valid) {
       return;
     }
 
-    const executeAddToCartLogic = (qtyToAdd) => {
+    const executeAddToCartLogic = qtyToAdd => {
       try {
-        const discount = discountsString ? discountsString : (Array.isArray(discountsArray) ? discountsArray.join(", ") : "");
+        const discount = discountsString
+          ? discountsString
+          : Array.isArray(discountsArray)
+          ? discountsArray.join(', ')
+          : '';
         const payload = {
           product_name: prod.product_details.product_name,
           time_stamp: new Date().toISOString(),
           user_id: data.user_id,
-          session_id : data.session_id || data.session || sessionId,
+          session_id: data.session_id || data.session || sessionId,
           quantity: qtyToAdd,
           uom: selectedUom,
           is_sale: isOnSale,
           discount_string: discount,
-          message_id: messageId
+          message_id: messageId,
         };
-        console.log("add to cart payload", payload);
+        console.log('add to cart payload', payload);
         fetch(ADD_TO_CART_URL, {
           method: 'POST',
           headers: {
@@ -286,18 +318,18 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
             return response.json();
           })
           .then(data => {
-            console.log("log addToCart response", data);
+            console.log('log addToCart response', data);
           })
           .catch(error => {
-            console.log("log addToCart error", error);
+            console.log('log addToCart error', error);
           });
       } catch (error) {
-        console.log("log addToCart error", error);
+        console.log('log addToCart error', error);
       }
       onAddToCartClick({
         selectedUom: selectedUom,
         quantity: qtyToAdd,
-        product: prod
+        product: prod,
       });
     };
 
@@ -306,12 +338,20 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
     if (requestedQty <= 0) {
       requestedQty = 1;
       setQuantity(1);
-      setQuantityText("1");
+      setQuantityText('1');
     }
 
     // Check if quantity is valid for min pack requirements
-    if (currentMinPackQtyForSelectedUom > 1 && Math.abs(requestedQty % currentMinPackQtyForSelectedUom) > 0.01) {
-      const roundedResult = Math.round(Math.ceil(requestedQty / currentMinPackQtyForSelectedUom) * currentMinPackQtyForSelectedUom * 100) / 100;
+    if (
+      currentMinPackQtyForSelectedUom > 1 &&
+      Math.abs(requestedQty % currentMinPackQtyForSelectedUom) > 0.01
+    ) {
+      const roundedResult =
+        Math.round(
+          Math.ceil(requestedQty / currentMinPackQtyForSelectedUom) *
+            currentMinPackQtyForSelectedUom *
+            100,
+        ) / 100;
 
       Alert.alert(
         `Item #${prod.part_number} is sold in multiples of ${currentMinPackQtyForSelectedUom} ${selectedUom}`,
@@ -332,7 +372,7 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
             },
           },
         ],
-        { cancelable: true } // User can dismiss the alert by tapping outside on Android
+        { cancelable: true }, // User can dismiss the alert by tapping outside on Android
       );
     } else {
       // No rounding needed, or item is sold individually (min pack <= 1)
@@ -340,24 +380,24 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
       executeAddToCartLogic(requestedQty);
     }
   };
-  
+
   const handleProductClick = () => {
     const prodWithSku = {
-        ...prod,
-        sku: prod.product_details.sku // Using the SKU from product_details
+      ...prod,
+      sku: prod.product_details.sku, // Using the SKU from product_details
     };
-    console.log("Product clicked:", JSON.stringify(prodWithSku, null, 2));
-    onProductCardClick(prodWithSku); 
+    console.log('Product clicked:', JSON.stringify(prodWithSku, null, 2));
+    onProductCardClick(prodWithSku);
   };
-  
-  const handleUomChange = (newUom) => {
-    setSelectedUom(newUom); 
+
+  const handleUomChange = newUom => {
+    setSelectedUom(newUom);
 
     // Always set quantity to 0 when UOM changes
     setQuantity(0);
-    setQuantityText("0");
+    setQuantityText('0');
   };
-  
+
   const openUomPicker = () => {
     if (Platform.OS === 'ios') {
       ActionSheetIOS.showActionSheetWithOptions(
@@ -366,34 +406,29 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
           cancelButtonIndex: uoms.length,
           title: 'Select Unit',
         },
-        (buttonIndex) => {
+        buttonIndex => {
           if (buttonIndex !== uoms.length) {
             handleUomChange(uoms[buttonIndex]);
           }
-        }
+        },
       );
     } else if (Platform.OS === 'android') {
       // Android implementation
       const buttons = uoms.map(uom => ({
         text: uom,
-        onPress: () => handleUomChange(uom)
+        onPress: () => handleUomChange(uom),
       }));
-      
+
       // Add cancel button
       buttons.push({
         text: 'Cancel',
-        style: 'cancel'
+        style: 'cancel',
       });
-      
-      Alert.alert(
-        'Select Unit',
-        '',
-        buttons,
-        { cancelable: true }
-      );
+
+      Alert.alert('Select Unit', '', buttons, { cancelable: true });
     }
   };
-  
+
   return (
     <View style={styles.card}>
       {/* Two-column layout */}
@@ -406,53 +441,89 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
                 <Text style={styles.saleTagText}>SALE</Text>
               </View>
             )}
-            <Image source={{ uri: prod.product_details.image_url }} style={styles.image} />
+            <Image
+              source={
+                prod.product_details.image_url
+                  ? { uri: prod.product_details.image_url }
+                  : require('../assets/heritage.png')
+              }
+              style={styles.image}
+              defaultSource={require('../assets/heritage.png')}
+            />
           </TouchableOpacity>
-            {valid && 
+          {valid && (
             <>
-            <View style={styles.priceContainer}>
+              <View style={styles.priceContainer}>
                 {isOnSale ? (
-                <>
-                    <Text style={styles.originalPrice} allowFontScaling={false}>${Number(grossPrice).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</Text>
-                    <Text style={styles.salePrice} allowFontScaling={false}>${Number(netPrice).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</Text>
+                  <>
+                    <Text style={styles.originalPrice} allowFontScaling={false}>
+                      $
+                      {Number(grossPrice).toLocaleString('en-US', {
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 2,
+                      })}
+                    </Text>
+                    <Text style={styles.salePrice} allowFontScaling={false}>
+                      $
+                      {Number(netPrice).toLocaleString('en-US', {
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 2,
+                      })}
+                    </Text>
                     <Text style={styles.perUnit}>/ {selectedUom}</Text>
-                </>
+                  </>
                 ) : (
-                <>
-                    <Text style={styles.price} allowFontScaling={false}>${Number(grossPrice).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</Text>
+                  <>
+                    <Text style={styles.price} allowFontScaling={false}>
+                      $
+                      {Number(grossPrice).toLocaleString('en-US', {
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 2,
+                      })}
+                    </Text>
                     <Text style={styles.perUnit}>/ {selectedUom}</Text>
-                </>
+                  </>
                 )}
-            </View>              
-            <Text style={styles.availability}>
-                {maxQuantity === 0 ? "0 available" : maxQuantity > 1000 ? "1000+ available" : `${maxQuantity} available`}
-            </Text>
+              </View>
+              <Text style={styles.availability}>
+                {maxQuantity === 0
+                  ? '0 available'
+                  : maxQuantity > 1000
+                  ? '1000+ available'
+                  : `${maxQuantity} available`}
+              </Text>
             </>
-            }
+          )}
         </View>
 
         {/* Right Column (Product Details) */}
         <View style={styles.rightColumn}>
           <TouchableOpacity onPress={handleProductClick}>
-            <Text style={styles.productName}>{prod.product_details.product_name}</Text>
+            <Text style={styles.productName}>
+              {prod.product_details.product_name}
+            </Text>
           </TouchableOpacity>
 
           <Text style={styles.details}>
-            <Text style={styles.boldText}>MFG # </Text>{prod.product_details.manufacturer_id}
+            <Text style={styles.boldText}>MFG # </Text>
+            {prod.product_details.manufacturer_id}
           </Text>
           <Text style={styles.details}>
-            <Text style={styles.boldText}>Part # </Text>{prod.part_number}
+            <Text style={styles.boldText}>Part # </Text>
+            {prod.part_number}
           </Text>
 
           {/* Display discounts if available */}
           {discountsArray.length > 0 && (
             <View style={styles.discountContainer}>
               {discountsArray.map((discount, index) => (
-                <Text key={index} style={styles.discountText}>{discount}</Text>
+                <Text key={index} style={styles.discountText}>
+                  {discount}
+                </Text>
               ))}
             </View>
           )}
-          {discountsString == 0 && discountsString !== "" && (
+          {discountsString == 0 && discountsString !== '' && (
             <Text style={styles.discountText}>{discountsString}</Text>
           )}
 
@@ -461,33 +532,36 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
             {uoms.length > 1 ? (
               <View style={styles.uomSelectorContainer}>
                 <Text style={styles.inputLabel}>Unit</Text>
-                <TouchableOpacity 
+                <TouchableOpacity
                   style={styles.dropdownButton}
                   onPress={openUomPicker}
-                  disabled={!valid}
-                >
+                  disabled={!valid}>
                   <Text style={styles.dropdownButtonText}>{selectedUom}</Text>
                 </TouchableOpacity>
               </View>
             ) : null}
-            
+
             <View style={styles.quantityContainer}>
               <Text style={styles.inputLabel}>
-                Qty {currentMinPackQtyForSelectedUom > 1 ? `(Sold in multiples of ${currentMinPackQtyForSelectedUom})` : ''}
+                Qty{' '}
+                {currentMinPackQtyForSelectedUom > 1
+                  ? `(Sold in multiples of ${currentMinPackQtyForSelectedUom})`
+                  : ''}
               </Text>
               <View style={styles.quantityInputContainer}>
-                <TouchableOpacity 
+                <TouchableOpacity
                   style={styles.quantityButton}
                   onPress={decrementQuantity}
-                  disabled={!valid || quantity <= 0}
-                >
-                  <Ionicons 
-                    name="remove" 
-                    size={18} 
-                    color={valid && quantity > 0 ? "#367cb6" : "rgba(0, 0, 0, 0.23)"} 
+                  disabled={!valid || quantity <= 0}>
+                  <Ionicons
+                    name="remove"
+                    size={18}
+                    color={
+                      valid && quantity > 0 ? '#367cb6' : 'rgba(0, 0, 0, 0.23)'
+                    }
                   />
                 </TouchableOpacity>
-                
+
                 <TextInput
                   value={quantityText}
                   onChangeText={handleQuantityChange}
@@ -503,16 +577,15 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
                   disableFullscreenUI={true}
                   defaultValue="0"
                 />
-                
-                <TouchableOpacity 
+
+                <TouchableOpacity
                   style={styles.quantityButton}
                   onPress={incrementQuantity}
-                  disabled={!valid}
-                >
-                  <Ionicons 
-                    name="add" 
-                    size={18} 
-                    color={valid ? "#367cb6" : "rgba(0, 0, 0, 0.23)"}
+                  disabled={!valid}>
+                  <Ionicons
+                    name="add"
+                    size={18}
+                    color={valid ? '#367cb6' : 'rgba(0, 0, 0, 0.23)'}
                   />
                 </TouchableOpacity>
               </View>
@@ -520,15 +593,18 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
           </View>
 
           {/* Add to Cart Button on a new line */}
-          <TouchableOpacity 
-            onPress={handleAddToCart} 
+          <TouchableOpacity
+            onPress={handleAddToCart}
             disabled={!valid}
             style={[
               styles.addToCartButton,
-              valid ? styles.activeButton : styles.disabledButton
-            ]}
-          >
-            <Text style={[styles.buttonText, valid ? styles.activeText : styles.disabledText]}>
+              valid ? styles.activeButton : styles.disabledButton,
+            ]}>
+            <Text
+              style={[
+                styles.buttonText,
+                valid ? styles.activeText : styles.disabledText,
+              ]}>
               Add to Cart
             </Text>
           </TouchableOpacity>
@@ -540,110 +616,110 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
 
 const styles = StyleSheet.create({
   card: {
-    backgroundColor: "#fff",
+    backgroundColor: '#fff',
     width: '100%',
     padding: 12,
     paddingHorizontal: 16,
     borderRadius: 12,
-    marginBottom: 5
+    marginBottom: 5,
   },
   row: {
-    flexDirection: "row",
-    alignItems: "flex-start",
+    flexDirection: 'row',
+    alignItems: 'flex-start',
   },
   leftColumn: {
-    width: "25%",
-    alignItems: "center",
-    position: "relative",
+    width: '25%',
+    alignItems: 'center',
+    position: 'relative',
   },
   rightColumn: {
-    width: "75%",
+    width: '75%',
     paddingLeft: 12,
   },
   image: {
     width: 80,
     height: 80,
-    resizeMode: "contain",
+    resizeMode: 'contain',
     marginBottom: 5,
   },
   saleTag: {
-    position: "absolute",
+    position: 'absolute',
     top: 0,
     left: 0,
-    backgroundColor: "red",
+    backgroundColor: 'red',
     borderRadius: 4,
     paddingVertical: 2,
     paddingHorizontal: 5,
     zIndex: 1,
   },
   saleTagText: {
-    color: "#fff",
+    color: '#fff',
     fontSize: 10,
-    fontWeight: "bold",
+    fontWeight: 'bold',
   },
   price: {
     fontSize: 14,
-    fontWeight: "bold",
-    color: "#161616",
-    textAlign: "center",
-    textBreakStrategy: "simple",
-    alignSelf: "stretch",
+    fontWeight: 'bold',
+    color: '#161616',
+    textAlign: 'center',
+    textBreakStrategy: 'simple',
+    alignSelf: 'stretch',
     lineHeight: 20,
     includeFontPadding: false,
     textAlignVertical: 'center',
   },
   priceContainer: {
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
     paddingHorizontal: 2,
   },
   originalPrice: {
     fontSize: 14,
-    textDecorationLine: "line-through",
-    color: "gray",
-    textAlign: "center",
-    textBreakStrategy: "simple",
+    textDecorationLine: 'line-through',
+    color: 'gray',
+    textAlign: 'center',
+    textBreakStrategy: 'simple',
     lineHeight: 20,
     includeFontPadding: false,
     textAlignVertical: 'center',
   },
   salePrice: {
     fontSize: 16,
-    fontWeight: "bold",
-    color: "red",
-    textAlign: "center",
-    textBreakStrategy: "simple",
+    fontWeight: 'bold',
+    color: 'red',
+    textAlign: 'center',
+    textBreakStrategy: 'simple',
     lineHeight: 22,
     includeFontPadding: false,
     textAlignVertical: 'center',
   },
   perUnit: {
     fontSize: 12,
-    color: "gray",
-    textAlign: "center",
+    color: 'gray',
+    textAlign: 'center',
   },
   availability: {
     fontSize: 12,
-    color: "gray",
-    textAlign: "center",
+    color: 'gray',
+    textAlign: 'center',
     marginTop: 3,
   },
   productName: {
     fontSize: 16,
-    fontWeight: "medium",
-    color: "#161616",
+    fontWeight: 'medium',
+    color: '#161616',
     marginBottom: 5,
-    textDecorationLine: "underline",
-    textDecorationColor: "#367CB6"
+    textDecorationLine: 'underline',
+    textDecorationColor: '#367CB6',
   },
   details: {
     fontSize: 13,
-    color: "#555",
+    color: '#555',
     marginTop: 3,
   },
   boldText: {
-    fontWeight: "bold",
+    fontWeight: 'bold',
   },
   discountContainer: {
     marginTop: 5,
@@ -651,13 +727,13 @@ const styles = StyleSheet.create({
   },
   discountText: {
     fontSize: 13,
-    color: "#e41e31",
-    fontWeight: "500",
+    color: '#e41e31',
+    fontWeight: '500',
     marginTop: 3,
   },
   inputRow: {
-    flexDirection: "row",
-    alignItems: "flex-end",
+    flexDirection: 'row',
+    alignItems: 'flex-end',
     marginTop: 10,
     marginBottom: 10,
   },
@@ -666,7 +742,7 @@ const styles = StyleSheet.create({
   },
   inputLabel: {
     fontSize: 12,
-    color: "rgba(0, 0, 0, 0.6)",
+    color: 'rgba(0, 0, 0, 0.6)',
     marginBottom: 4,
   },
   dropdownButton: {
@@ -689,51 +765,51 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   quantityInputContainer: {
-    flexDirection: "row",
-    alignItems: "center",
+    flexDirection: 'row',
+    alignItems: 'center',
     height: 40,
     borderWidth: 1,
-    borderColor: "rgba(0, 0, 0, 0.23)",
+    borderColor: 'rgba(0, 0, 0, 0.23)',
     borderRadius: 4,
   },
   quantityButton: {
     width: 40,
     height: 40,
-    justifyContent: "center",
-    alignItems: "center",
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   quantityInput: {
     flex: 1,
     height: 40,
-    textAlign: "center",
+    textAlign: 'center',
     paddingHorizontal: 5,
     fontSize: 14,
     minWidth: 40,
-    color: "#000",
+    color: '#000',
   },
   addToCartButton: {
     height: 40,
-    justifyContent: "center",
-    alignItems: "center",
+    justifyContent: 'center',
+    alignItems: 'center',
     borderRadius: 4,
     marginTop: 5,
   },
   activeButton: {
-    backgroundColor: "#367cb6",
+    backgroundColor: '#367cb6',
   },
   disabledButton: {
-    backgroundColor: "transparent",
+    backgroundColor: 'transparent',
     borderWidth: 1,
-    borderColor: "rgba(0, 0, 0, 0.23)",
+    borderColor: 'rgba(0, 0, 0, 0.23)',
   },
   buttonText: {
     fontSize: 14,
-    fontWeight: "bold",
+    fontWeight: 'bold',
   },
   activeText: {
-    color: "#fff",
+    color: '#fff',
   },
   disabledText: {
-    color: "rgba(0, 0, 0, 0.60)",
+    color: 'rgba(0, 0, 0, 0.60)',
   },
 });