srs-heritage-chatbot 1.0.0

package/lib/commonjs/components/productCard.js

@@ -0,0 +1,688 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductCard = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _AppContext = require("../contexts/AppContext");
+var _Ionicons = _interopRequireDefault(require("react-native-vector-icons/Ionicons"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ProductCard = ({
+  prod,
+  onFocusQuantityInput,
+  messageId
+}) => {
+  var _prod$inventory_info3, _prod$inventory_info4, _prod$inventory_info5;
+  (0, _react.useEffect)(() => {
+    console.log('What is prod: ', prod);
+  }, []);
+  const {
+    onProductCardClick,
+    onAddToCartClick,
+    sessionId,
+    data,
+    ADD_TO_CART_URL
+  } = (0, _react.useContext)(_AppContext.AppContext);
+  const [keyboardVisible, setKeyboardVisible] = (0, _react.useState)(false);
+  // Validation: Check for incomplete product information
+  const hasValidProductDetails = () => {
+    if (!prod || !prod.product_details) {
+      return false;
+    }
+    const details = prod.product_details;
+    if (!details.product_name || !details.part_number || !details.image_url) {
+      return false;
+    }
+    return true;
+  };
+  const hasValidInventoryInfo = () => {
+    if (!prod.inventory_info || !prod.inventory_info.info_by_uom) {
+      return false;
+    }
+    const uomData = prod.inventory_info.info_by_uom;
+    const uomKeys = Object.keys(uomData);
+    if (uomKeys.length === 0) {
+      return false;
+    }
+
+    // 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 hasValidPricing;
+  };
+
+  // Return null if product lacks essential information
+  if (!hasValidProductDetails()) {
+    return null;
+  }
+  const [selectedUom, setSelectedUom] = (0, _react.useState)(() => {
+    var _prod$inventory_info;
+    if ((_prod$inventory_info = prod.inventory_info) !== null && _prod$inventory_info !== void 0 && _prod$inventory_info.info_by_uom) {
+      const availableUoms = Object.keys(prod.inventory_info.info_by_uom);
+      const defaultUom = prod.inventory_info.default_uom;
+      return availableUoms.includes(defaultUom) ? defaultUom : availableUoms[0];
+    }
+    return 'EA';
+  });
+
+  // Helper function to get min_pack_qty, defaulting to 1 if not applicable
+  const getMinPackQtyForUom = uomKey => {
+    var _prod$inventory_info2;
+    const minPackStr = (_prod$inventory_info2 = prod.inventory_info) === null || _prod$inventory_info2 === void 0 || (_prod$inventory_info2 = _prod$inventory_info2.info_by_uom) === null || _prod$inventory_info2 === void 0 || (_prod$inventory_info2 = _prod$inventory_info2[uomKey]) === null || _prod$inventory_info2 === void 0 ? void 0 : _prod$inventory_info2.min_pack_qty;
+    if (minPackStr) {
+      const minPackNum = parseFloat(minPackStr);
+      if (!isNaN(minPackNum) && minPackNum > 1.0) {
+        // Round to 2 decimal places for decimal min pack quantities
+        return Math.round(minPackNum * 100) / 100;
+      }
+    }
+    return 1; // Default min pack quantity for individual purchase
+  };
+  const uoms = (_prod$inventory_info3 = prod.inventory_info) !== null && _prod$inventory_info3 !== void 0 && _prod$inventory_info3.info_by_uom ? Object.keys(prod.inventory_info.info_by_uom) : ['EA'];
+  const uomInfo = ((_prod$inventory_info4 = prod.inventory_info) === null || _prod$inventory_info4 === void 0 || (_prod$inventory_info4 = _prod$inventory_info4.info_by_uom) === null || _prod$inventory_info4 === void 0 ? void 0 : _prod$inventory_info4[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 : '';
+
+  // maxQuantity is for display purposes only now
+  const maxQuantity = Math.floor(uomInfo.quantity_available || 0);
+  const valid = ((_prod$inventory_info5 = prod.inventory_info) === null || _prod$inventory_info5 === void 0 ? void 0 : _prod$inventory_info5.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 currentMinPackQtyForSelectedUom = getMinPackQtyForUom(selectedUom);
+  const [quantity, setQuantity] = (0, _react.useState)(0);
+  const [quantityText, setQuantityText] = (0, _react.useState)('0'); // Track the text input separately
+
+  // Add keyboard listeners to detect when keyboard appears/disappears
+  (0, _react.useEffect)(() => {
+    const keyboardDidShowListener = _reactNative.Keyboard.addListener('keyboardDidShow', () => {
+      setKeyboardVisible(true);
+      // Scroll to this product card when the keyboard appears
+      if (onFocusQuantityInput) {
+        onFocusQuantityInput(prod.part_number);
+      }
+    });
+    const keyboardDidHideListener = _reactNative.Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardVisible(false);
+    });
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+    };
+  }, []);
+
+  // Called on every keystroke in the quantity input
+  const handleQuantityChange = text => {
+    const rawValue = text.trim();
+
+    // Update the text display immediately
+    setQuantityText(rawValue);
+
+    // Handle empty input
+    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;
+    }
+    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);
+    } else {
+      // Invalid input, reset quantity but keep the text for user feedback
+      setQuantity(0);
+    }
+  };
+
+  // Called when the quantity input loses focus (onEndEditing)
+  const handleQuantityBlur = () => {
+    var _prod$inventory_info6;
+    const isProdValid = ((_prod$inventory_info6 = prod.inventory_info) === null || _prod$inventory_info6 === void 0 ? void 0 : _prod$inventory_info6.is_valid) || false;
+
+    // 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;
+      }
+    }
+
+    // Only basic validation - don't auto-correct to min pack quantities
+    if (!isProdValid) {
+      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;
+    }
+
+    // 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
+  };
+  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;
+      } else if (minPackForUom <= 1) {
+        // If min pack is 1 or less, just increment by min pack
+        newQuantity = prevQuantity + minPackForUom;
+      } else {
+        // Find the next valid multiple of min pack quantity
+        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;
+        } else {
+          newQuantity = nextMultiple;
+        }
+      }
+
+      // Round to 2 decimal places to handle decimal min pack quantities
+      const finalQuantity = Math.round(newQuantity * 100) / 100;
+      setQuantityText(finalQuantity.toString());
+      return finalQuantity;
+    });
+  };
+  const decrementQuantity = () => {
+    const uomForCalc = selectedUom;
+    const minPackForUom = getMinPackQtyForUom(uomForCalc);
+    setQuantity(prevQuantity => {
+      if (prevQuantity === 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;
+
+        // 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);
+        } else {
+          // If not a perfect multiple, go to the lower multiple
+          newQuantity = prevMultiple;
+        }
+      }
+
+      // Round to 2 decimal places to handle decimal min pack quantities
+      const finalQuantity = Math.round(newQuantity * 100) / 100;
+      setQuantityText(finalQuantity.toString());
+      return finalQuantity;
+    });
+  };
+  const handleAddToCart = () => {
+    if (!valid) {
+      return;
+    }
+    const executeAddToCartLogic = qtyToAdd => {
+      try {
+        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,
+          quantity: qtyToAdd,
+          uom: selectedUom,
+          is_sale: isOnSale,
+          discount_string: discount,
+          message_id: messageId
+        };
+        console.log('add to cart payload', payload);
+        fetch(ADD_TO_CART_URL, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(payload)
+        }).then(response => {
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+          return response.json();
+        }).then(data => {
+          console.log('log addToCart response', data);
+        }).catch(error => {
+          console.log('log addToCart error', error);
+        });
+      } catch (error) {
+        console.log('log addToCart error', error);
+      }
+      onAddToCartClick({
+        selectedUom: selectedUom,
+        quantity: qtyToAdd,
+        product: prod
+      });
+    };
+
+    // If user hasn't changed the default quantity (0), default to 1 for add-to-cart
+    let requestedQty = quantity;
+    if (requestedQty <= 0) {
+      requestedQty = 1;
+      setQuantity(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;
+      _reactNative.Alert.alert(`Item #${prod.part_number} is sold in multiples of ${currentMinPackQtyForSelectedUom} ${selectedUom}`, `The quantity will be rounded up to ${roundedResult} ${selectedUom} in your cart. Do you want to proceed?`, [{
+        text: 'Cancel',
+        onPress: () => {
+          // Keep the user's input, don't reset to 0
+        },
+        style: 'cancel'
+      }, {
+        text: 'Proceed',
+        onPress: () => {
+          setQuantity(roundedResult); // Set quantity to the adjusted amount
+          executeAddToCartLogic(roundedResult); // Proceed with adding to cart
+        }
+      }], {
+        cancelable: true
+      } // User can dismiss the alert by tapping outside on Android
+      );
+    } else {
+      // No rounding needed, or item is sold individually (min pack <= 1)
+      // Proceed with the current quantity (which is > 0 at this point)
+      executeAddToCartLogic(requestedQty);
+    }
+  };
+  const handleProductClick = () => {
+    const prodWithSku = {
+      ...prod,
+      sku: prod.product_details.sku // Using the SKU from product_details
+    };
+    console.log('Product clicked:', JSON.stringify(prodWithSku, null, 2));
+    onProductCardClick(prodWithSku);
+  };
+  const handleUomChange = newUom => {
+    setSelectedUom(newUom);
+
+    // Always set quantity to 0 when UOM changes
+    setQuantity(0);
+    setQuantityText('0');
+  };
+  const openUomPicker = () => {
+    if (_reactNative.Platform.OS === 'ios') {
+      _reactNative.ActionSheetIOS.showActionSheetWithOptions({
+        options: [...uoms, 'Cancel'],
+        cancelButtonIndex: uoms.length,
+        title: 'Select Unit'
+      }, buttonIndex => {
+        if (buttonIndex !== uoms.length) {
+          handleUomChange(uoms[buttonIndex]);
+        }
+      });
+    } else if (_reactNative.Platform.OS === 'android') {
+      // Android implementation
+      const buttons = uoms.map(uom => ({
+        text: uom,
+        onPress: () => handleUomChange(uom)
+      }));
+
+      // Add cancel button
+      buttons.push({
+        text: 'Cancel',
+        style: 'cancel'
+      });
+      _reactNative.Alert.alert('Select Unit', '', buttons, {
+        cancelable: true
+      });
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.card
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.row
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.leftColumn
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: handleProductClick
+  }, isOnSale && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.saleTag
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.saleTagText
+  }, "SALE")), /*#__PURE__*/_react.default.createElement(_reactNative.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')
+  })), valid && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.priceContainer
+  }, isOnSale ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.originalPrice,
+    allowFontScaling: false
+  }, "$", Number(grossPrice).toLocaleString('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.salePrice,
+    allowFontScaling: false
+  }, "$", Number(netPrice).toLocaleString('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.perUnit
+  }, "/ ", selectedUom)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.price,
+    allowFontScaling: false
+  }, "$", Number(grossPrice).toLocaleString('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.perUnit
+  }, "/ ", selectedUom))), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.availability
+  }, maxQuantity === 0 ? '0 available' : maxQuantity > 1000 ? '1000+ available' : `${maxQuantity} available`))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.rightColumn
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: handleProductClick
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.productName
+  }, prod.product_details.product_name)), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.details
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.boldText
+  }, "MFG # "), prod.product_details.manufacturer_id), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.details
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.boldText
+  }, "Part # "), prod.part_number), discountsArray.length > 0 && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.discountContainer
+  }, discountsArray.map((discount, index) => /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    key: index,
+    style: styles.discountText
+  }, discount))), discountsString == 0 && discountsString !== '' && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.discountText
+  }, discountsString), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.inputRow
+  }, uoms.length > 1 ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.uomSelectorContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.inputLabel
+  }, "Unit"), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: styles.dropdownButton,
+    onPress: openUomPicker,
+    disabled: !valid
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.dropdownButtonText
+  }, selectedUom))) : null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.quantityContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.inputLabel
+  }, "Qty", ' ', currentMinPackQtyForSelectedUom > 1 ? `(Sold in multiples of ${currentMinPackQtyForSelectedUom})` : ''), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.quantityInputContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: styles.quantityButton,
+    onPress: decrementQuantity,
+    disabled: !valid || quantity <= 0
+  }, /*#__PURE__*/_react.default.createElement(_Ionicons.default, {
+    name: "remove",
+    size: 18,
+    color: valid && quantity > 0 ? '#367cb6' : 'rgba(0, 0, 0, 0.23)'
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
+    value: quantityText,
+    onChangeText: handleQuantityChange,
+    onEndEditing: handleQuantityBlur,
+    keyboardType: "numeric",
+    style: styles.quantityInput,
+    editable: valid,
+    underlineColorAndroid: "transparent",
+    autoCorrect: false,
+    autoCapitalize: "none",
+    caretHidden: false,
+    contextMenuHidden: true,
+    disableFullscreenUI: true,
+    defaultValue: "0"
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: styles.quantityButton,
+    onPress: incrementQuantity,
+    disabled: !valid
+  }, /*#__PURE__*/_react.default.createElement(_Ionicons.default, {
+    name: "add",
+    size: 18,
+    color: valid ? '#367cb6' : 'rgba(0, 0, 0, 0.23)'
+  }))))), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: handleAddToCart,
+    disabled: !valid,
+    style: [styles.addToCartButton, valid ? styles.activeButton : styles.disabledButton]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.buttonText, valid ? styles.activeText : styles.disabledText]
+  }, "Add to Cart")))));
+};
+exports.ProductCard = ProductCard;
+const styles = _reactNative.StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    width: '100%',
+    padding: 12,
+    paddingHorizontal: 16,
+    borderRadius: 12,
+    marginBottom: 5
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-start'
+  },
+  leftColumn: {
+    width: '25%',
+    alignItems: 'center',
+    position: 'relative'
+  },
+  rightColumn: {
+    width: '75%',
+    paddingLeft: 12
+  },
+  image: {
+    width: 80,
+    height: 80,
+    resizeMode: 'contain',
+    marginBottom: 5
+  },
+  saleTag: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    backgroundColor: 'red',
+    borderRadius: 4,
+    paddingVertical: 2,
+    paddingHorizontal: 5,
+    zIndex: 1
+  },
+  saleTagText: {
+    color: '#fff',
+    fontSize: 10,
+    fontWeight: 'bold'
+  },
+  price: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#161616',
+    textAlign: 'center',
+    textBreakStrategy: 'simple',
+    alignSelf: 'stretch',
+    lineHeight: 20,
+    includeFontPadding: false,
+    textAlignVertical: 'center'
+  },
+  priceContainer: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 2
+  },
+  originalPrice: {
+    fontSize: 14,
+    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',
+    lineHeight: 22,
+    includeFontPadding: false,
+    textAlignVertical: 'center'
+  },
+  perUnit: {
+    fontSize: 12,
+    color: 'gray',
+    textAlign: 'center'
+  },
+  availability: {
+    fontSize: 12,
+    color: 'gray',
+    textAlign: 'center',
+    marginTop: 3
+  },
+  productName: {
+    fontSize: 16,
+    fontWeight: 'medium',
+    color: '#161616',
+    marginBottom: 5,
+    textDecorationLine: 'underline',
+    textDecorationColor: '#367CB6'
+  },
+  details: {
+    fontSize: 13,
+    color: '#555',
+    marginTop: 3
+  },
+  boldText: {
+    fontWeight: 'bold'
+  },
+  discountContainer: {
+    marginTop: 5,
+    marginBottom: 5
+  },
+  discountText: {
+    fontSize: 13,
+    color: '#e41e31',
+    fontWeight: '500',
+    marginTop: 3
+  },
+  inputRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginTop: 10,
+    marginBottom: 10
+  },
+  uomSelectorContainer: {
+    marginRight: 10
+  },
+  inputLabel: {
+    fontSize: 12,
+    color: 'rgba(0, 0, 0, 0.6)',
+    marginBottom: 4
+  },
+  dropdownButton: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.23)',
+    borderRadius: 4,
+    paddingHorizontal: 10,
+    height: 40,
+    minWidth: 80
+  },
+  dropdownButtonText: {
+    fontSize: 14,
+    color: '#555',
+    marginRight: 8
+  },
+  quantityContainer: {
+    flex: 1
+  },
+  quantityInputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 40,
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.23)',
+    borderRadius: 4
+  },
+  quantityButton: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  quantityInput: {
+    flex: 1,
+    height: 40,
+    textAlign: 'center',
+    paddingHorizontal: 5,
+    fontSize: 14,
+    minWidth: 40,
+    color: '#000'
+  },
+  addToCartButton: {
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+    marginTop: 5
+  },
+  activeButton: {
+    backgroundColor: '#367cb6'
+  },
+  disabledButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.23)'
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: 'bold'
+  },
+  activeText: {
+    color: '#fff'
+  },
+  disabledText: {
+    color: 'rgba(0, 0, 0, 0.60)'
+  }
+});
+//# sourceMappingURL=productCard.js.map