@bigbinary/neeto-molecules 5.5.0-beta1 → 5.5.0

package/dist/v2/ProductEmbed.js

@@ -1,24 +1,23 @@
 import { useShallow } from 'zustand/shallow';
-import { useEffect, useState, useMemo, useRef } from 'react';
+import { useEffect, useState, useMemo, useRef, createElement } from 'react';
 import { isPresent, filterBy, hyphenate, noop } from '@bigbinary/neeto-cist';
 import { useLocation, useHistory } from 'react-router-dom';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { t } from 'i18next';
 import { Label, Input, Button, Select, ColorPicker, Checkbox, Switch, Typography, Spinner, Callout } from '@bigbinary/neeto-atoms';
-import classnames from 'classnames';
-import useStateWithDependency from '@bigbinary/neeto-commons-frontend/v2/react-utils/useStateWithDependency';
-import { toPairs, mergeDeepLeft, isEmpty, mergeLeft } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import { t } from 'i18next';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import HelpPopover from './HelpPopover.js';
 import { withImmutableActions, handleMetaClick } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
 import { create } from 'zustand';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { toPairs, mergeDeepLeft, isEmpty, mergeLeft } from 'ramda';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { T as Trash2 } from '../trash-2-hGkzsa87.js';
 import { P as Plus } from '../plus-Bnd2C3yl.js';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import classnames from 'classnames';
 import Codeblock from './Codeblock.js';
 import { globalProps as globalProps$1 } from '@bigbinary/neeto-commons-frontend/v2/initializers';
 import BrowserPreview from './BrowserPreview.js';
@@ -1632,12 +1631,23 @@ var EmbedRenderer = function EmbedRenderer(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isScriptLoading = _useState2[0],
     setIsScriptLoading = _useState2[1];
-  var _useStateWithDependen = useStateWithDependency(function () {
+  var _useState3 = useState(function () {
       return buildDefaultCustomization(options);
-    }, [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];
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    customizations = _useState4[0],
+    setCustomizations = _useState4[1];
+  var iframeUrl = options === null || options === void 0 || (_options$iframe = options.iframe) === null || _options$iframe === void 0 ? void 0 : _options$iframe.iframeUrl;
+  useEffect(function () {
+    setCustomizations(function (prevState) {
+      var _prevState$iframe;
+      return ((_prevState$iframe = prevState.iframe) === null || _prevState$iframe === void 0 ? void 0 : _prevState$iframe.iframeUrl) === iframeUrl ? prevState : _objectSpread$1(_objectSpread$1({}, prevState), {}, {
+        iframe: _objectSpread$1(_objectSpread$1({}, prevState.iframe), {}, {
+          iframeUrl: iframeUrl
+        })
+      });
+    });
+  }, [iframeUrl]);
   var description = customizations[selectedEmbed].description;
   var customization = customizations[selectedEmbed];
   var CustomizationComponent = EMBED_CUSTOMIZATION_COMPONENTS[selectedEmbed];
@@ -1844,7 +1854,8 @@ var ProductEmbed = function ProductEmbed(_ref) {
   var _useLocation = useLocation(),
     search = _useLocation.search;
   var queryParams = new URLSearchParams(search);
-  var selectedEmbed = toCamelCasedString(queryParams.get("type"));
+  var typeFromQueryParams = toCamelCasedString(queryParams.get("type"));
+  var selectedEmbed = Object.values(EMBED_OPTIONS).includes(typeFromQueryParams) && Object.keys(options).includes(typeFromQueryParams) ? typeFromQueryParams : undefined;
   var _useProductEmbedStore = useProductEmbedStore(useShallow(function (store) {
       return {
         setProductEmbedState: store["setProductEmbedState"]
@@ -1857,7 +1868,7 @@ var ProductEmbed = function ProductEmbed(_ref) {
       queryParamsProps: queryParamsProps
     });
   }, []);
-  return selectedEmbed ? /*#__PURE__*/jsx(EmbedRenderer, {
+  return selectedEmbed ? /*#__PURE__*/createElement(EmbedRenderer, {
     className: className,
     customEmbedScriptPath: customEmbedScriptPath,
     customPreviewIframeUrl: customPreviewIframeUrl,
@@ -1869,7 +1880,8 @@ var ProductEmbed = function ProductEmbed(_ref) {
     otherCustomizations: otherCustomizations,
     queryParamsProps: queryParamsProps,
     selectedEmbed: selectedEmbed,
-    supportedLanguages: supportedLanguages
+    supportedLanguages: supportedLanguages,
+    key: id
   }) : /*#__PURE__*/jsx(EmbedSelector, {
     goBackLink: goBackLink,
     options: options,