@bigbinary/neeto-molecules 3.16.76 → 3.16.78

package/dist/cjs/ProductEmbed.js

@@ -7,6 +7,7 @@ var reactRouterDom = require('react-router-dom');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var classnames = require('classnames');
+var useStateWithDependency = require('@bigbinary/neeto-commons-frontend/react-utils/useStateWithDependency');
 var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
 var Button = require('@bigbinary/neetoui/Button');
 var Typography = require('@bigbinary/neetoui/Typography');
@@ -75,7 +76,10 @@ var useProductEmbedStore = zustand.create(reactUtils.withImmutableActions(functi
     queryParams: [INITIAL_QUERY_PARAM],
     queryParamsProps: {
       helpPopoverProps: {},
-      label: ""
+      label: "",
+      keyPlaceholder: "",
+      valuePlaceholder: "",
+      addButtonLabel: ""
     },
     setProductEmbedState: set,
     setQueryParams: function setQueryParams(queryParams) {
@@ -140,8 +144,7 @@ var elementPopupEmbedCode$1 = function elementPopupEmbedCode(_ref5) {
 };
 var iframeEmbedCode$1 = function iframeEmbedCode(_ref6) {
   var id = _ref6.id,
-    customization = _ref6.customization,
-    extraArgs = _ref6.extraArgs;
+    customization = _ref6.customization;
   var height = customization.height,
     width = customization.width,
     iframeTitle = customization.iframeTitle,
@@ -150,8 +153,7 @@ var iframeEmbedCode$1 = function iframeEmbedCode(_ref6) {
   var iframeSrc = buildIframeURL$1({
     id: id,
     iframeUrl: iframeUrl,
-    queryParams: queryParams,
-    extraArgs: extraArgs
+    queryParams: queryParams
   });
   return "\n  <!-- ".concat(globalProps.appName, " iframe embed code begins -->\n  <iframe\n    allowfullscreen\n    height=\"").concat(height, "\"\n    width=\"").concat(width, "\"\n    frameborder=\"0\"\n    title=\"").concat(iframeTitle, "\"\n    src=\"").concat(iframeSrc, "\"\n  />\n  <!-- ").concat(globalProps.appName, " iframe embed code ends -->");
 };
@@ -229,8 +231,7 @@ var elementPopupEmbedCode = function elementPopupEmbedCode(_ref5) {
 };
 var iframeEmbedCode = function iframeEmbedCode(_ref6) {
   var customization = _ref6.customization,
-    id = _ref6.id,
-    extraArgs = _ref6.extraArgs;
+    id = _ref6.id;
   var height = customization.height,
     width = customization.width,
     iframeTitle = customization.iframeTitle,
@@ -239,8 +240,7 @@ var iframeEmbedCode = function iframeEmbedCode(_ref6) {
   var iframeSrc = buildIframeURL$1({
     id: id,
     iframeUrl: iframeUrl,
-    queryParams: queryParams,
-    extraArgs: extraArgs
+    queryParams: queryParams
   });
   return "\n  const App = () => {\n    return (\n      <>\n        {/* ".concat(globalProps.appName, " iframe embed code begins */}\n        <iframe\n          allowFullScreen\n          height=\"").concat(height, "\"\n          width=\"").concat(width, "\"\n          frameBorder=\"0\"\n          title=\"").concat(iframeTitle, "\"\n          src=\"").concat(iframeSrc, "\"\n        />\n        {/* ").concat(globalProps.appName, " iframe embed code ends */}\n      </>\n    );\n  };\n  ");
 };
@@ -285,28 +285,17 @@ var toCamelCasedString = function toCamelCasedString(string) {
 };
 var buildIframeURL$1 = function buildIframeURL(_ref3) {
   var id = _ref3.id,
-    iframeURL = _ref3.iframeURL,
-    queryParams = _ref3.queryParams,
-    extraArgs = _ref3.extraArgs;
-  var url = new URL(iframeURL || "".concat(location.origin, "/embed/").concat(id));
-  if (!queryParams && !extraArgs) return url.toString();
-  if (queryParams) {
-    var parsedQueryParams = JSON.parse(queryParams);
-    Object.entries(parsedQueryParams).forEach(function (_ref4) {
-      var _ref5 = _slicedToArray(_ref4, 2),
-        key = _ref5[0],
-        value = _ref5[1];
-      url.searchParams.append(key, value);
-    });
-  }
-  if (extraArgs) {
-    Object.entries(extraArgs).forEach(function (_ref6) {
-      var _ref7 = _slicedToArray(_ref6, 2),
-        key = _ref7[0],
-        value = _ref7[1];
-      url.searchParams.append(key, value);
-    });
-  }
+    iframeUrl = _ref3.iframeUrl,
+    queryParams = _ref3.queryParams;
+  var url = new URL(iframeUrl || "".concat(location.origin, "/embed/").concat(id));
+  if (!queryParams) return url.toString();
+  var parsedQueryParams = JSON.parse(queryParams);
+  Object.entries(parsedQueryParams).forEach(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+      key = _ref5[0],
+      value = _ref5[1];
+    url.searchParams.append(key, value);
+  });
   return url.toString();
 };
 
@@ -364,7 +353,7 @@ var DynamicQueryParams = function DynamicQueryParams(_ref) {
           "data-testid": "dynamic-query-key-name-input",
           name: "queryParams.".concat(index, ".name"),
           value: param.name,
-          placeholder: t("neetoMolecules.productEmbed.queryParam.keyNamePlaceholder"),
+          placeholder: queryParamsProps.keyPlaceholder || t("neetoMolecules.productEmbed.queryParam.keyNamePlaceholder"),
           onChange: function onChange(e) {
             return handleInputChange(index, "name", e.target.value);
           }
@@ -373,7 +362,7 @@ var DynamicQueryParams = function DynamicQueryParams(_ref) {
           "data-testid": "dynamic-query-key-value-input",
           name: "queryParams.".concat(index, ".value"),
           value: param.value,
-          placeholder: t("neetoMolecules.productEmbed.queryParam.keyValuePlaceholder"),
+          placeholder: queryParamsProps.valuePlaceholder || t("neetoMolecules.productEmbed.queryParam.keyValuePlaceholder"),
           onChange: function onChange(e) {
             return handleInputChange(index, "value", e.target.value);
           }
@@ -389,10 +378,11 @@ var DynamicQueryParams = function DynamicQueryParams(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(Button, {
       className: "my-2",
       "data-cy": "dynamic-query-add-new-button",
+      "data-testid": "dynamic-query-add-new-button",
       icon: Plus,
       iconPosition: "left",
-      label: t("neetoMolecules.productEmbed.queryParam.addQueryParam"),
       style: "link",
+      label: queryParamsProps.addButtonLabel || t("neetoMolecules.productEmbed.queryParam.addQueryParam"),
       onClick: handleAddQueryParam
     })]
   });
@@ -1490,6 +1480,7 @@ injectCss.n(css,{});
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var EmbedRenderer = function EmbedRenderer(_ref) {
+  var _options$iframe;
   var className = _ref.className,
     customEmbedScriptPath = _ref.customEmbedScriptPath,
     customPreviewIframeUrl = _ref.customPreviewIframeUrl,
@@ -1508,12 +1499,12 @@ var EmbedRenderer = function EmbedRenderer(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isScriptLoading = _useState2[0],
     setIsScriptLoading = _useState2[1];
-  var _useState3 = React.useState(function () {
+  var _useStateWithDependen = useStateWithDependency(function () {
       return buildDefaultCustomization(options);
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    customizations = _useState4[0],
-    setCustomizations = _useState4[1];
+    }, [options === null || options === void 0 || (_options$iframe = options.iframe) === null || _options$iframe === void 0 ? void 0 : _options$iframe.iframeUrl]),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    customizations = _useStateWithDependen2[0],
+    setCustomizations = _useStateWithDependen2[1];
   var description = customizations[selectedEmbed].description;
   var customization = customizations[selectedEmbed];
   var CustomizationComponent = EMBED_CUSTOMIZATION_COMPONENTS[selectedEmbed];
@@ -1677,10 +1668,7 @@ var ProductEmbed = function ProductEmbed(_ref) {
     _ref$isQueryParamsEna = _ref.isQueryParamsEnabled,
     isQueryParamsEnabled = _ref$isQueryParamsEna === void 0 ? false : _ref$isQueryParamsEna,
     _ref$queryParamsProps = _ref.queryParamsProps,
-    queryParamsProps = _ref$queryParamsProps === void 0 ? {
-      helpPopoverProps: {},
-      label: ""
-    } : _ref$queryParamsProps,
+    queryParamsProps = _ref$queryParamsProps === void 0 ? {} : _ref$queryParamsProps,
     _ref$options = _ref.options,
     options = _ref$options === void 0 ? {} : _ref$options,
     _ref$extraArgs = _ref.extraArgs,