@asantemedia-org/edwardsvacuum-design-system 1.6.58 → 1.6.63

package/dist/index.esm.js

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown, faChevronRight, faArrowRight } from '@fortawesome/pro-solid-svg-icons';
 import { v4 } from 'uuid';
 import { PhoneInput } from 'react-international-phone';
+import { WidgetInstance } from 'friendly-challenge';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -163,7 +164,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var styles$2 = {"cmp-card":"card-module__cmp-card___45x9k","cmp-card__link":"card-module__cmp-card__link___OdszC","cmp-card__content-wrapper":"card-module__cmp-card__content-wrapper___gh335","cmp-card__content-category-wrapper":"card-module__cmp-card__content-category-wrapper___2vOjQ","cmp-card__content-category-wrapper__colour-edwards-red":"card-module__cmp-card__content-category-wrapper__colour-edwards-red___DYmt8","cmp-card__city-country":"card-module__cmp-card__city-country___dI13-","cmp-card__image-wrapper":"card-module__cmp-card__image-wrapper___IhPHw","placeholderImage":"card-module__placeholderImage___AXOh5","cmp-card--type-card-overlay":"card-module__cmp-card--type-card-overlay___344ul","cmp-card__title-wrapper":"card-module__cmp-card__title-wrapper___XHfZg","cmp-card__date":"card-module__cmp-card__date___7w-Ka","cmp-card__title":"card-module__cmp-card__title___cFKG8","cmp-card__footer":"card-module__cmp-card__footer___xcNXM","cmp-card--type-card-no-image":"card-module__cmp-card--type-card-no-image___G75ye","cmp-card--type-card-product":"card-module__cmp-card--type-card-product___IfqTr","cmp-card--type-card-product__wrapper":"card-module__cmp-card--type-card-product__wrapper___kulaR","cmp-card--type-card-product-no-image__wrapper":"card-module__cmp-card--type-card-product-no-image__wrapper___ot5Xe","cmp-card--type-card-product__image":"card-module__cmp-card--type-card-product__image___Bkb0A","cmp-card--type-card-product__meta":"card-module__cmp-card--type-card-product__meta___a7Tzc","cmp-card--type-card-product__title":"card-module__cmp-card--type-card-product__title___0JMQp","cmp-card--type-card-product__cta":"card-module__cmp-card--type-card-product__cta___qDSNo","cmp-card--type-card-product__prices":"card-module__cmp-card--type-card-product__prices___KWPS7","cmp-card--type-card-product__prices--login":"card-module__cmp-card--type-card-product__prices--login___gMhTo","show_prices":"card-module__show_prices___gjVhn","cmp-card--type-card-panel":"card-module__cmp-card--type-card-panel___95jYv","cmp-card__footer--color-malachite":"card-module__cmp-card__footer--color-malachite___jEnvy","cmp-card__footer--color-amethyst":"card-module__cmp-card__footer--color-amethyst___N55PL","cmp-card__footer--color-smokey-quartz-bright":"card-module__cmp-card__footer--color-smokey-quartz-bright___1mqyn","cmp-card__footer--color-olivine-bright":"card-module__cmp-card__footer--color-olivine-bright___O2urI","cmp-card--type-careers":"card-module__cmp-card--type-careers___Wqzcf","cmp-card--type-product_details":"card-module__cmp-card--type-product_details___vsNOc","cmp-card--type-product_details__product-info":"card-module__cmp-card--type-product_details__product-info___5L009","cmp-card--type-product_details__header":"card-module__cmp-card--type-product_details__header___Vb3-U","cmp-card--type-product_details__header__title":"card-module__cmp-card--type-product_details__header__title___4KSqX","cmp-card--type-product_details__header__product-code":"card-module__cmp-card--type-product_details__header__product-code___zf7yq","cmp-card--type-product_details__header__product-image":"card-module__cmp-card--type-product_details__header__product-image___Kyy35","cmp-card--type-product_details__spares-list":"card-module__cmp-card--type-product_details__spares-list___VQ31R","folding-spares-list":"card-module__folding-spares-list___ls5-n","folding-specification-list":"card-module__folding-specification-list___tIfSl","folding-specification-holder":"card-module__folding-specification-holder___OtcQQ","folding-spares-holder":"card-module__folding-spares-holder___OhMpO"};
+var styles$3 = {"cmp-card":"card-module__cmp-card___45x9k","cmp-card__link":"card-module__cmp-card__link___OdszC","cmp-card__content-wrapper":"card-module__cmp-card__content-wrapper___gh335","cmp-card__content-category-wrapper":"card-module__cmp-card__content-category-wrapper___2vOjQ","cmp-card__content-category-wrapper__colour-edwards-red":"card-module__cmp-card__content-category-wrapper__colour-edwards-red___DYmt8","cmp-card__city-country":"card-module__cmp-card__city-country___dI13-","cmp-card__image-wrapper":"card-module__cmp-card__image-wrapper___IhPHw","placeholderImage":"card-module__placeholderImage___AXOh5","cmp-card--type-card-overlay":"card-module__cmp-card--type-card-overlay___344ul","cmp-card__title-wrapper":"card-module__cmp-card__title-wrapper___XHfZg","cmp-card__date":"card-module__cmp-card__date___7w-Ka","cmp-card__title":"card-module__cmp-card__title___cFKG8","cmp-card__footer":"card-module__cmp-card__footer___xcNXM","cmp-card--type-card-no-image":"card-module__cmp-card--type-card-no-image___G75ye","cmp-card--type-card-product":"card-module__cmp-card--type-card-product___IfqTr","cmp-card--type-card-product__wrapper":"card-module__cmp-card--type-card-product__wrapper___kulaR","cmp-card--type-card-product-no-image__wrapper":"card-module__cmp-card--type-card-product-no-image__wrapper___ot5Xe","cmp-card--type-card-product__image":"card-module__cmp-card--type-card-product__image___Bkb0A","cmp-card--type-card-product__meta":"card-module__cmp-card--type-card-product__meta___a7Tzc","cmp-card--type-card-product__title":"card-module__cmp-card--type-card-product__title___0JMQp","cmp-card--type-card-product__cta":"card-module__cmp-card--type-card-product__cta___qDSNo","cmp-card--type-card-product__prices":"card-module__cmp-card--type-card-product__prices___KWPS7","cmp-card--type-card-product__prices--login":"card-module__cmp-card--type-card-product__prices--login___gMhTo","show_prices":"card-module__show_prices___gjVhn","cmp-card--type-card-panel":"card-module__cmp-card--type-card-panel___95jYv","cmp-card__footer--color-malachite":"card-module__cmp-card__footer--color-malachite___jEnvy","cmp-card__footer--color-amethyst":"card-module__cmp-card__footer--color-amethyst___N55PL","cmp-card__footer--color-smokey-quartz-bright":"card-module__cmp-card__footer--color-smokey-quartz-bright___1mqyn","cmp-card__footer--color-olivine-bright":"card-module__cmp-card__footer--color-olivine-bright___O2urI","cmp-card--type-careers":"card-module__cmp-card--type-careers___Wqzcf","cmp-card--type-product_details":"card-module__cmp-card--type-product_details___vsNOc","cmp-card--type-product_details__product-info":"card-module__cmp-card--type-product_details__product-info___5L009","cmp-card--type-product_details__header":"card-module__cmp-card--type-product_details__header___Vb3-U","cmp-card--type-product_details__header__title":"card-module__cmp-card--type-product_details__header__title___4KSqX","cmp-card--type-product_details__header__product-code":"card-module__cmp-card--type-product_details__header__product-code___zf7yq","cmp-card--type-product_details__header__product-image":"card-module__cmp-card--type-product_details__header__product-image___Kyy35","cmp-card--type-product_details__spares-list":"card-module__cmp-card--type-product_details__spares-list___VQ31R","folding-spares-list":"card-module__folding-spares-list___ls5-n","folding-specification-list":"card-module__folding-specification-list___tIfSl","facet-value-list":"card-module__facet-value-list___HtnIT","facet-value-unit":"card-module__facet-value-unit___b722z","folding-specification-holder":"card-module__folding-specification-holder___OtcQQ","folding-spares-holder":"card-module__folding-spares-holder___OhMpO"};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -315,14 +316,114 @@ var AccordionSection = function (_a) {
   }, shouldRenderChildren ? children : null));
 };
 
+var placholderimg = "3697809e28f9e0fe.png";
+
+/**
+ * Parses delimited facet values into a structured format
+ *
+ * Input format: "pressure_psi|2.90#pressure_inHg|5.91#pressure_bar|0.200"
+ * Where:
+ *   - `#` separates different unit entries
+ *   - `|` separates the unit key from the value
+ */
+/**
+ * Checks if a value is in the delimited facet format
+ */
+var isDelimitedFacetValue = function (value) {
+  if (typeof value !== 'string') return false;
+  // Must contain both # (entry separator) and | (key-value separator)
+  return value.includes('#') && value.includes('|');
+};
+/**
+ * Extracts the display unit from a raw key
+ * e.g., "pressure_psi" -> "psi"
+ * e.g., "volumeFlowRate_l/s" -> "l/s"
+ * e.g., "power_kW" -> "kW"
+ */
+var extractUnit = function (rawKey) {
+  var parts = rawKey.split('_');
+  if (parts.length > 1) {
+    // Return everything after the first underscore (handles units like "m/³h")
+    return parts.slice(1).join('_');
+  }
+  return rawKey;
+};
+/**
+ * Parses a delimited facet string into an array of entries
+ */
+var parseDelimitedFacetValue = function (value) {
+  if (!isDelimitedFacetValue(value)) {
+    return [];
+  }
+  var entries = value.split('#');
+  return entries.map(function (entry) {
+    var _a = entry.split('|'),
+      rawKey = _a[0],
+      val = _a[1];
+    if (!rawKey || val === undefined) return null;
+    return {
+      unit: extractUnit(rawKey),
+      value: val,
+      rawKey: rawKey
+    };
+  }).filter(function (entry) {
+    return entry !== null;
+  });
+};
+
+var styles$2 = {"facet-unit-selector":"FacetUnitSelector-module__facet-unit-selector___1Zdhx","facet-unit-selector__value":"FacetUnitSelector-module__facet-unit-selector__value___E-LAN","facet-unit-selector__unit":"FacetUnitSelector-module__facet-unit-selector__unit___TxIk7","facet-unit-selector__dropdown":"FacetUnitSelector-module__facet-unit-selector__dropdown___Xj3dK"};
+
 // Utility function to retrieve correct SCSS module class names
-var getStyle$1 = function (className) {
+var getStyle$2 = function (className) {
   if (styles$2[className]) return styles$2[className];
   var nestedMatch = Object.keys(styles$2).find(function (key) {
     return key.includes(className);
   });
   return nestedMatch ? styles$2[nestedMatch] : "";
 };
+var FacetUnitSelector = function (_a) {
+  var entries = _a.entries,
+    _b = _a.usePlainClasses,
+    usePlainClasses = _b === void 0 ? false : _b;
+  var _c = useState(0),
+    selectedIndex = _c[0],
+    setSelectedIndex = _c[1];
+  var getClassName = function (name) {
+    return usePlainClasses ? name : getStyle$2(name);
+  };
+  if (!entries || entries.length === 0) return null;
+  var selectedEntry = entries[selectedIndex];
+  var handleUnitChange = function (e) {
+    setSelectedIndex(Number(e.target.value));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: getClassName("facet-unit-selector")
+  }, /*#__PURE__*/React.createElement("span", {
+    className: getClassName("facet-unit-selector__value")
+  }, selectedEntry.value), entries.length > 1 ? /*#__PURE__*/React.createElement("select", {
+    className: getClassName("facet-unit-selector__dropdown"),
+    value: selectedIndex,
+    onChange: handleUnitChange,
+    "aria-label": "Select unit"
+  }, entries.map(function (entry, index) {
+    return /*#__PURE__*/React.createElement("option", {
+      key: entry.rawKey,
+      value: index
+    }, entry.unit);
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: getClassName("facet-unit-selector__unit")
+  }, selectedEntry.unit));
+};
+
+var PLACEHOLDER_INDICATOR = "?placeholder-storybook";
+// Utility function to retrieve correct SCSS module class names
+var getStyle$1 = function (className) {
+  if (styles$3[className]) return styles$3[className];
+  var nestedMatch = Object.keys(styles$3).find(function (key) {
+    return key.includes(className);
+  });
+  return nestedMatch ? styles$3[nestedMatch] : "";
+};
 var cardSizeMapping = function (size) {
   var classSrting;
   if (size === "small") {
@@ -336,22 +437,10 @@ var cardSizeMapping = function (size) {
   }
   return classSrting;
 };
-var getImageUrl = function (imageUrl) {
-  if (imageUrl) {
-    return imageUrl; // If an image URL is provided, use it.
-  }
-  try {
-    // Try loading from local assets (works in Storybook)
-    return require("../../../assets/edwards-webshop-placeholder.png").default.src;
-  } catch (error) {
-    // If that fails, load from node_modules (works in host app)
-    try {
-      return require("@asantemedia-org/edwardsvacuum-design-system/dist/assets/edwards-webshop-placeholder.png").default;
-    } catch (error) {
-      console.error("Placeholder image not found in either local assets or node_modules.", error);
-      return ""; // Fallback empty string if no image is found
-    }
-  }
+// Helper function to check if image is a placeholder (from ACAS-14821)
+var isPlaceholderImg = function (imageUrl) {
+  console.log(imageUrl);
+  return !!imageUrl && imageUrl.indexOf(PLACEHOLDER_INDICATOR) > -1;
 };
 var Card = function (_a) {
   var contentCategoryLabel = _a.contentCategoryLabel,
@@ -367,7 +456,6 @@ var Card = function (_a) {
     cardLink = _a.cardLink,
     city = _a.city,
     country = _a.country,
-    placeholder = _a.placeholder,
     onClick = _a.onClick,
     _b = _a.usePlainClasses,
     usePlainClasses = _b === void 0 ? false : _b;
@@ -379,7 +467,8 @@ var Card = function (_a) {
   var width = cardSizeMapping(size);
   var categoryColour = colour ? usePlainClasses ? "cmp-card__content-category-wrapper__colour-".concat(colour) : getStyle$1("cmp-card__content-category-wrapper__colour-".concat(colour)) : "";
   var cardFooterColour = colour ? usePlainClasses ? "cmp-card__footer--color-".concat(colour) : getStyle$1("cmp-card__footer--color-".concat(colour)) : "";
-  var contentImage = getImageUrl(imageUrl);
+  // Image placeholder fallback logic from ACAS-14821
+  var contentImage = !imageUrl ? placholderimg + PLACEHOLDER_INDICATOR : imageUrl;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(getClassName("cmp-card"), mode, width, className && (usePlainClasses ? className : getStyle$1(className)))
   }, /*#__PURE__*/React.createElement("a", {
@@ -389,7 +478,7 @@ var Card = function (_a) {
   }, /*#__PURE__*/React.createElement("div", {
     className: getClassName("cmp-card__content-wrapper")
   }, cardStyle !== "type-card-panel" && cardStyle !== "type-card-no-image" && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(getClassName("cmp-card__image-wrapper"), " ").concat(!imageUrl || placeholder ? getClassName("placeholderImage") : "")
+    className: "".concat(getClassName("cmp-card__image-wrapper"), " ").concat(isPlaceholderImg(contentImage) ? getClassName("placeholderImage") : "")
   }, /*#__PURE__*/React.createElement("picture", null, /*#__PURE__*/React.createElement("img", {
     src: contentImage,
     alt: imageAlt
@@ -428,7 +517,6 @@ var ProductCard = function (_a) {
     cardLink = _a.cardLink,
     cta = _a.cta,
     cardStyle = _a.cardStyle,
-    placeholder = _a.placeholder,
     onClick = _a.onClick,
     _c = _a.usePlainClasses,
     usePlainClasses = _c === void 0 ? false : _c;
@@ -438,7 +526,8 @@ var ProductCard = function (_a) {
   };
   var width = cardSizeMapping(size);
   var mode = usePlainClasses ? "cmp-card--".concat(cardStyle) : getStyle$1("cmp-card--".concat(cardStyle));
-  var productImage = getImageUrl(imageUrl);
+  // Image placeholder fallback logic from ACAS-14821
+  var productImage = !imageUrl || imageUrl === 'https://uk.my.edwardsvacuum.com?placeholder-storybook' ? placholderimg.src + PLACEHOLDER_INDICATOR : imageUrl;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(getClassName("cmp-card"), mode, width, className)
   }, /*#__PURE__*/React.createElement("a", {
@@ -453,7 +542,7 @@ var ProductCard = function (_a) {
   }, /*#__PURE__*/React.createElement("figure", null, /*#__PURE__*/React.createElement("img", {
     src: productImage,
     alt: imageAlt,
-    className: !imageUrl || placeholder ? "placeholderImage" : undefined
+    className: isPlaceholderImg(productImage) ? "placeholderImage" : ''
   }))), /*#__PURE__*/React.createElement("div", {
     className: getClassName("cmp-card--type-card-product__meta")
   }, /*#__PURE__*/React.createElement("p", {
@@ -473,7 +562,6 @@ var ProductDetailsCard = function (_a) {
     var title = _a.title;
     _a.imageUrl;
     var imageAlt = _a.imageAlt;
-    _a.placeholder;
     _a.onClick;
     var hit = _a.hit,
     facets = _a.facets,
@@ -537,13 +625,20 @@ var ProductDetailsCard = function (_a) {
   }, /*#__PURE__*/React.createElement("ul", {
     className: getClassName("folding-specification-list")
   }, facets && facets.map(function (facet) {
-    return hit[facet.name] && /*#__PURE__*/React.createElement("li", {
+    var facetValue = hit[facet.name];
+    if (!facetValue) return null;
+    // Check if value is in delimited format (e.g., "pressure_psi|2.90#pressure_bar|0.200")
+    var isDelimited = isDelimitedFacetValue(facetValue);
+    return /*#__PURE__*/React.createElement("li", {
       key: facet.name
     }, /*#__PURE__*/React.createElement("strong", null, facet.label), /*#__PURE__*/React.createElement("br", null), facet.returnsHTML ? /*#__PURE__*/React.createElement("span", {
       dangerouslySetInnerHTML: {
-        __html: hit[facet.name]
+        __html: facetValue
       }
-    }) : hit[facet.name]);
+    }) : isDelimited ? /*#__PURE__*/React.createElement(FacetUnitSelector, {
+      entries: parseDelimitedFacetValue(facetValue),
+      usePlainClasses: usePlainClasses
+    }) : facetValue);
   })))), /*#__PURE__*/React.createElement("div", {
     className: getClassName("cmp-card--type-product_details__spares-list")
   }, (hit === null || hit === void 0 ? void 0 : hit.spares) && hit.spares.length > 0 && /*#__PURE__*/React.createElement(AccordionSection, {
@@ -610,7 +705,7 @@ var Button = function (_a) {
   }, props), label);
 };
 
-var PRODUCT_DETAILS = 'productDetails';
+var PRODUCT_DETAILS = "productDetails";
 var DynamicHeading = function (_a) {
   var _b = _a.titleSize,
     titleSize = _b === void 0 ? "h2" : _b,
@@ -621,16 +716,16 @@ var DynamicHeading = function (_a) {
 };
 var getCallToActionProps = function (type, url) {
   var callType = type === null || type === void 0 ? void 0 : type.toLowerCase();
-  var finalUrl = url || '';
-  var target = '';
+  var finalUrl = url || "";
+  var target = "";
   switch (callType) {
-    case 'external':
-      target = '_blank';
+    case "external":
+      target = "_blank";
       break;
-    case 'email':
+    case "email":
       finalUrl = "mailto:".concat(url);
       break;
-    case 'phone':
+    case "phone":
       finalUrl = "tel:".concat(url);
       break;
   }
@@ -649,18 +744,17 @@ var AlgoliaDynamicSearch = function (_a, useScopedStyles, styles) {
     callToActionUrl = _a.callToActionUrl,
     callToActionTargetSelector = _a.callToActionTargetSelector,
     _c = _a.queryType,
-    queryType = _c === void 0 ? 'unknown' : _c,
+    queryType = _c === void 0 ? "unknown" : _c,
     hits = _a.hits,
     hitCta = _a.hitCta,
     showProductPrice = _a.showProductPrice,
     query = _a.query,
     _d = _a.backgroundColour,
-    backgroundColour = _d === void 0 ? '' : _d,
+    backgroundColour = _d === void 0 ? "" : _d,
     _e = _a.maxResults,
     maxResults = _e === void 0 ? 10 : _e,
     _f = _a.isLoading,
     isLoading = _f === void 0 ? false : _f,
-    placeholder = _a.placeholder,
     analytics = _a.analytics,
     facets = _a.facets,
     innerComponents = _a.innerComponents;
@@ -683,12 +777,12 @@ var AlgoliaDynamicSearch = function (_a, useScopedStyles, styles) {
     var backgroundStyles = {
       "dark-grey": {
         buttonStyle: "outlineWhite",
-        containerBackground: getModifierClass('hasStyleGreyBackground'),
+        containerBackground: getModifierClass("hasStyleGreyBackground"),
         textColour: "white"
       },
-      "silver": {
+      silver: {
         buttonStyle: "primary",
-        containerBackground: getModifierClass('hasStyleSilverGradientBackground'),
+        containerBackground: getModifierClass("hasStyleSilverGradientBackground"),
         textColour: "black"
       }
     };
@@ -701,53 +795,53 @@ var AlgoliaDynamicSearch = function (_a, useScopedStyles, styles) {
   if (!hits || hits.length === 0) {
     return null;
   }
-  var baseClass = getClass('');
+  var baseClass = getClass("");
   // Memoize wrapper class names
   var wrapperClasses = useMemo(function () {
-    return [baseClass, widgetStyleProps.containerBackground, isLoading ? getModifierClass('isLoading') : '', queryType === 'content' ? getModifierClass('isQueryContent') : ''].filter(Boolean).join(' ');
+    return [baseClass, widgetStyleProps.containerBackground, isLoading ? getModifierClass("isLoading") : "", queryType === "content" ? getModifierClass("isQueryContent") : ""].filter(Boolean).join(" ");
   }, [baseClass, widgetStyleProps.containerBackground, isLoading, queryType, getModifierClass]);
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses
   }, isLoading && /*#__PURE__*/React.createElement("div", {
-    className: getClass('__placeholder')
+    className: getClass("__placeholder")
   }, /*#__PURE__*/React.createElement("div", {
-    className: getClass('__placeholder__loading')
+    className: getClass("__placeholder__loading")
   })), /*#__PURE__*/React.createElement("div", {
-    className: getClass('__container')
+    className: getClass("__container")
   }, queryType != PRODUCT_DETAILS && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: getClass('__header')
+    className: getClass("__header")
   }, /*#__PURE__*/React.createElement("div", {
-    className: getClass('__header__text')
+    className: getClass("__header__text")
   }, /*#__PURE__*/React.createElement(DynamicHeading, {
     titleSize: titleSize
   }, heading), /*#__PURE__*/React.createElement("p", null, subtext)), callToActionUrl && /*#__PURE__*/React.createElement("div", {
-    className: getClass('__header__cta')
+    className: getClass("__header__cta")
   }, function () {
     var _a = getCallToActionProps(callToActionType, callToActionUrl),
       finalUrl = _a.finalUrl,
       target = _a.target;
-    var isAnchor = !!callToActionTargetSelector || (callToActionType === null || callToActionType === void 0 ? void 0 : callToActionType.toLowerCase()) !== 'internal';
+    var isAnchor = !!callToActionTargetSelector || (callToActionType === null || callToActionType === void 0 ? void 0 : callToActionType.toLowerCase()) !== "internal";
     return /*#__PURE__*/React.createElement(Button$1, {
-      element: isAnchor ? 'a' : 'button',
+      element: isAnchor ? "a" : "button",
       buttonStyle: widgetStyleProps === null || widgetStyleProps === void 0 ? void 0 : widgetStyleProps.buttonStyle,
       label: callToActionText,
       href: isAnchor ? finalUrl : undefined,
       target: target,
-      rel: target === '_blank' ? 'noopener noreferrer' : undefined,
+      rel: target === "_blank" ? "noopener noreferrer" : undefined,
       "data-target-selector": callToActionTargetSelector,
       onClick: !isAnchor ? function () {
         if (finalUrl) {
-          window.open(finalUrl, target || '_self', target === '_blank' ? 'noopener,noreferrer' : undefined);
+          window.open(finalUrl, target || "_self", target === "_blank" ? "noopener,noreferrer" : undefined);
         }
       } : undefined
     });
   }()))), /*#__PURE__*/React.createElement("div", {
-    className: queryType == PRODUCT_DETAILS ? getClass('__cards__cardSingle') : getClass('__cards')
+    className: queryType == PRODUCT_DETAILS ? getClass("__cards__cardSingle") : getClass("__cards")
   }, hits.slice(0, maxResults).map(function (hit, index) {
     var Component = Card$1;
     var title = hit.title;
     var cardStyle = "";
-    var imageUrl = hit.imageUrl || placeholder;
+    var imageUrl = hit.image;
     var hitUtm = new URLSearchParams({
       utm_source: "web",
       utm_medium: "alg",
@@ -791,7 +885,6 @@ var AlgoliaDynamicSearch = function (_a, useScopedStyles, styles) {
       className: cardClassName,
       title: title,
       imageUrl: imageUrl,
-      placeholder: hit.image ? false : true,
       hit: hit,
       cta: hitCta,
       size: "",
@@ -1031,6 +1124,27 @@ var defaultQrFormTranslations = {
   consent_requiredMessage: "Please acknowledge this consent"
 };
 
+var FriendlyCaptcha = function (props) {
+  useEffect(function () {
+    console.log(props.element, "element");
+    if (props.element) {
+      var sdk = new WidgetInstance(props.element, {
+        startMode: "auto",
+        doneCallback: function (solution) {
+          if (props.onComplete) props.onComplete(solution);
+          if (props.doneCallback) props.doneCallback();
+        }
+      });
+      try {
+        sdk.start();
+      } catch (e) {
+        console.error("FriendlyCaptcha initialization failed", e);
+      }
+    }
+  }, [props.element]);
+  return null;
+};
+
 var QrForm = function (props) {
   var _a;
   var _b = useState(0),
@@ -1052,8 +1166,14 @@ var QrForm = function (props) {
   var _g = useState(true);
     _g[0];
     var setIsLoadingCountries = _g[1];
+  var _h = useState(null),
+    captchaElRef = _h[0],
+    setCaptchaElRef = _h[1];
   // Use custom Button component if provided, otherwise use default
   var Button$1 = props.ButtonComponent || Button;
+  var _j = useState(false),
+    showSubmit = _j[0],
+    setShowSubmit = _j[1];
   var i18n = __assign(__assign({}, defaultQrFormTranslations), props);
   var buttonProps = props;
   var consentFields = ((_a = props.consents) === null || _a === void 0 ? void 0 : _a.map(function (consent, index) {
@@ -1070,13 +1190,17 @@ var QrForm = function (props) {
       errorMessage: consent.policyMandatory ? i18n.consent_requiredMessage : ""
     };
   })) || [];
+  useRef(null);
   useEffect(function () {
     var initialValues = {};
     props.fields.forEach(function (field) {
       initialValues[field.name] = field.value || '';
     });
+    initialValues['portalId'] = props.hubspotAppId;
+    initialValues['formId'] = props.hubspotId;
+    initialValues['isChina'] = props.isChina ? "true" : "false";
     setFormValues(initialValues);
-  }, [props.fields]);
+  }, [props.fields, props.hubspotAppId, props.hubspotId, props.isChina]);
   useEffect(function () {
     function loadCountries() {
       return __awaiter(this, void 0, void 0, function () {
@@ -1403,13 +1527,13 @@ var QrForm = function (props) {
       onClick: formNavigate,
       "data-page_target": pageIndex + 1,
       buttonStyle: "primary"
-    }) : /*#__PURE__*/React.createElement(Button$1, {
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null, (!props.captchaKey || showSubmit) && /*#__PURE__*/React.createElement(Button$1, {
       label: i18n === null || i18n === void 0 ? void 0 : i18n.submit,
       onClick: handleSubmit,
       buttonStyle: "primary",
       element: "button",
       type: "submit"
-    }));
+    })));
     if (isPartial) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: "qr-form-fields"
@@ -1443,7 +1567,7 @@ var QrForm = function (props) {
       className: "bullet-point"
     }, /*#__PURE__*/React.createElement("span", null, index + 1)), /*#__PURE__*/React.createElement("h3", null, pageTitles[index]));
   }))), /*#__PURE__*/React.createElement("form", {
-    action: "".concat(props.formAction, "/").concat(props.hubspotAppId, "/").concat(props.hubspotId),
+    action: "".concat(props.formAction),
     onSubmit: handleSubmit
   }, currentPage === 0 && /*#__PURE__*/React.createElement("section", {
     key: 1,
@@ -1472,10 +1596,36 @@ var QrForm = function (props) {
   }), renderFormSection({
     pageIndex: 3,
     sectionTitle: pageTitles[3]
-  }), /*#__PURE__*/React.createElement("input", {
+  }), currentPage === pages.length - 1 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    id: "frc-widget",
+    className: "vtba-friendly-captcha-react",
+    "data-rad": "test",
+    "data-sitekey": props.captchaKey,
+    ref: function (el) {
+      setCaptchaElRef(el);
+    }
+  }), !!props.captchaKey && captchaElRef && /*#__PURE__*/React.createElement(FriendlyCaptcha, {
+    sitekey: props.captchaKey,
+    doneCallback: function () {
+      setShowSubmit(true);
+    },
+    element: captchaElRef
+  })), /*#__PURE__*/React.createElement("input", {
     type: "hidden",
     name: "ip_location",
     value: formValues.ip_location || ''
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    name: "portalId",
+    value: props.hubspotAppId
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    name: "formId",
+    value: props.hubspotId
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    name: "isChina",
+    value: props.isChina ? "true" : "false"
   }))) : /*#__PURE__*/React.createElement("div", {
     className: "qr-form-thank-you-page"
   }, /*#__PURE__*/React.createElement("div", {