@bigbinary/neeto-molecules 5.1.19 → 5.1.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (166) hide show
  1. package/dist/FinderModal.js +56 -9
  2. package/dist/FinderModal.js.map +1 -1
  3. package/dist/IpRestriction.js +2 -3175
  4. package/dist/IpRestriction.js.map +1 -1
  5. package/dist/MadeWith.js +3 -74
  6. package/dist/MadeWith.js.map +1 -1
  7. package/dist/NeetoWidget.js +3 -1958
  8. package/dist/NeetoWidget.js.map +1 -1
  9. package/dist/Onboarding.js +3 -400
  10. package/dist/Onboarding.js.map +1 -1
  11. package/dist/chevron-up-B2_LTx_h.js +15 -0
  12. package/dist/chevron-up-B2_LTx_h.js.map +1 -0
  13. package/dist/cjs/FinderModal.js +54 -7
  14. package/dist/cjs/FinderModal.js.map +1 -1
  15. package/dist/cjs/IpRestriction.js +21 -3194
  16. package/dist/cjs/IpRestriction.js.map +1 -1
  17. package/dist/cjs/MadeWith.js +17 -88
  18. package/dist/cjs/MadeWith.js.map +1 -1
  19. package/dist/cjs/NeetoWidget.js +4 -1959
  20. package/dist/cjs/NeetoWidget.js.map +1 -1
  21. package/dist/cjs/Onboarding.js +3 -400
  22. package/dist/cjs/Onboarding.js.map +1 -1
  23. package/dist/cjs/chevron-up-CpzhFWzM.js +17 -0
  24. package/dist/cjs/chevron-up-CpzhFWzM.js.map +1 -0
  25. package/dist/cjs/copy-CerjTcLL.js +20 -0
  26. package/dist/cjs/copy-CerjTcLL.js.map +1 -0
  27. package/dist/cjs/globe-DawgK2Dx.js +21 -0
  28. package/dist/cjs/globe-DawgK2Dx.js.map +1 -0
  29. package/dist/cjs/index-ARGXqXxG.js +78 -0
  30. package/dist/cjs/index-ARGXqXxG.js.map +1 -0
  31. package/dist/cjs/index-BeqE2JWC.js +3180 -0
  32. package/dist/cjs/index-BeqE2JWC.js.map +1 -0
  33. package/dist/cjs/panel-left-close-CLoRPBWH.js +21 -0
  34. package/dist/cjs/panel-left-close-CLoRPBWH.js.map +1 -0
  35. package/dist/cjs/phone-number-Bza7WGZm.js +315 -0
  36. package/dist/cjs/phone-number-Bza7WGZm.js.map +1 -0
  37. package/dist/cjs/prism-tomorrow-BMFuJ5o1.js +1963 -0
  38. package/dist/cjs/prism-tomorrow-BMFuJ5o1.js.map +1 -0
  39. package/dist/cjs/react-confetti-DdGoyZ0y.js +405 -0
  40. package/dist/cjs/react-confetti-DdGoyZ0y.js.map +1 -0
  41. package/dist/cjs/smartphone-ChvEvl-o.js +36 -0
  42. package/dist/cjs/smartphone-ChvEvl-o.js.map +1 -0
  43. package/dist/cjs/trash-2-CotPjU5n.js +23 -0
  44. package/dist/cjs/trash-2-CotPjU5n.js.map +1 -0
  45. package/dist/cjs/triangle-alert-De-qkUXK.js +27 -0
  46. package/dist/cjs/triangle-alert-De-qkUXK.js.map +1 -0
  47. package/dist/cjs/v2/AuditLogs.js +4 -18
  48. package/dist/cjs/v2/AuditLogs.js.map +1 -1
  49. package/dist/cjs/v2/Builder.js +4 -18
  50. package/dist/cjs/v2/Builder.js.map +1 -1
  51. package/dist/cjs/v2/Codeblock.js +1 -0
  52. package/dist/cjs/v2/Codeblock.js.map +1 -1
  53. package/dist/cjs/v2/CopyToClipboardButton.js +3 -16
  54. package/dist/cjs/v2/CopyToClipboardButton.js.map +1 -1
  55. package/dist/cjs/v2/FinderModal.js +48 -14
  56. package/dist/cjs/v2/FinderModal.js.map +1 -1
  57. package/dist/cjs/v2/FloatingActionMenu.js +1 -0
  58. package/dist/cjs/v2/FloatingActionMenu.js.map +1 -1
  59. package/dist/cjs/v2/Insights.js +344 -0
  60. package/dist/cjs/v2/Insights.js.map +1 -0
  61. package/dist/cjs/v2/IntegrationCard.js +222 -0
  62. package/dist/cjs/v2/IntegrationCard.js.map +1 -0
  63. package/dist/cjs/v2/IpRestriction.js +525 -0
  64. package/dist/cjs/v2/IpRestriction.js.map +1 -0
  65. package/dist/cjs/v2/MadeWith.js +73 -0
  66. package/dist/cjs/v2/MadeWith.js.map +1 -0
  67. package/dist/cjs/v2/Metadata.js +215 -0
  68. package/dist/cjs/v2/Metadata.js.map +1 -0
  69. package/dist/cjs/v2/NavigationHeader.js +1 -0
  70. package/dist/cjs/v2/NavigationHeader.js.map +1 -1
  71. package/dist/cjs/v2/NeetoWidget.js +855 -0
  72. package/dist/cjs/v2/NeetoWidget.js.map +1 -0
  73. package/dist/cjs/v2/Onboarding.js +323 -0
  74. package/dist/cjs/v2/Onboarding.js.map +1 -0
  75. package/dist/cjs/v2/OptionFields.js +1291 -0
  76. package/dist/cjs/v2/OptionFields.js.map +1 -0
  77. package/dist/cjs/v2/PhoneNumber.js +20 -307
  78. package/dist/cjs/v2/PhoneNumber.js.map +1 -1
  79. package/dist/cjs/v2/ProductEmbed.js +1870 -0
  80. package/dist/cjs/v2/ProductEmbed.js.map +1 -0
  81. package/dist/cjs/v2/PublishBlock.js +6 -22
  82. package/dist/cjs/v2/PublishBlock.js.map +1 -1
  83. package/dist/cjs/v2/PublishYourItem.js +60 -0
  84. package/dist/cjs/v2/PublishYourItem.js.map +1 -0
  85. package/dist/cjs/v2/ResponsiveDevicePicker.js +88 -0
  86. package/dist/cjs/v2/ResponsiveDevicePicker.js.map +1 -0
  87. package/dist/cjs/v2/SessionEnvironment.js +479 -0
  88. package/dist/cjs/v2/SessionEnvironment.js.map +1 -0
  89. package/dist/copy-DhbOoOav.js +18 -0
  90. package/dist/copy-DhbOoOav.js.map +1 -0
  91. package/dist/globe-rBiI1CjO.js +19 -0
  92. package/dist/globe-rBiI1CjO.js.map +1 -0
  93. package/dist/index-0jnA7dx6.js +3178 -0
  94. package/dist/index-0jnA7dx6.js.map +1 -0
  95. package/dist/index-DF5MKxql.js +76 -0
  96. package/dist/index-DF5MKxql.js.map +1 -0
  97. package/dist/panel-left-close-37jik3GB.js +19 -0
  98. package/dist/panel-left-close-37jik3GB.js.map +1 -0
  99. package/dist/phone-number-CGZtDB_n.js +291 -0
  100. package/dist/phone-number-CGZtDB_n.js.map +1 -0
  101. package/dist/prism-tomorrow-ZUb2Ikm9.js +1961 -0
  102. package/dist/prism-tomorrow-ZUb2Ikm9.js.map +1 -0
  103. package/dist/react-confetti-BnGq_LBE.js +403 -0
  104. package/dist/react-confetti-BnGq_LBE.js.map +1 -0
  105. package/dist/smartphone-B-jv1y8j.js +33 -0
  106. package/dist/smartphone-B-jv1y8j.js.map +1 -0
  107. package/dist/trash-2-N0F6K63L.js +21 -0
  108. package/dist/trash-2-N0F6K63L.js.map +1 -0
  109. package/dist/triangle-alert-Pkh6pc42.js +25 -0
  110. package/dist/triangle-alert-Pkh6pc42.js.map +1 -0
  111. package/dist/v2/AuditLogs.js +3 -17
  112. package/dist/v2/AuditLogs.js.map +1 -1
  113. package/dist/v2/Builder.js +3 -17
  114. package/dist/v2/Builder.js.map +1 -1
  115. package/dist/v2/Codeblock.js +1 -0
  116. package/dist/v2/Codeblock.js.map +1 -1
  117. package/dist/v2/CopyToClipboardButton.js +2 -15
  118. package/dist/v2/CopyToClipboardButton.js.map +1 -1
  119. package/dist/v2/FinderModal.js +49 -15
  120. package/dist/v2/FinderModal.js.map +1 -1
  121. package/dist/v2/FloatingActionMenu.js +1 -0
  122. package/dist/v2/FloatingActionMenu.js.map +1 -1
  123. package/dist/v2/Insights.js +342 -0
  124. package/dist/v2/Insights.js.map +1 -0
  125. package/dist/v2/IntegrationCard.js +220 -0
  126. package/dist/v2/IntegrationCard.js.map +1 -0
  127. package/dist/v2/IpRestriction.js +504 -0
  128. package/dist/v2/IpRestriction.js.map +1 -0
  129. package/dist/v2/MadeWith.js +52 -0
  130. package/dist/v2/MadeWith.js.map +1 -0
  131. package/dist/v2/Metadata.js +213 -0
  132. package/dist/v2/Metadata.js.map +1 -0
  133. package/dist/v2/NavigationHeader.js +1 -0
  134. package/dist/v2/NavigationHeader.js.map +1 -1
  135. package/dist/v2/NeetoWidget.js +834 -0
  136. package/dist/v2/NeetoWidget.js.map +1 -0
  137. package/dist/v2/Onboarding.js +321 -0
  138. package/dist/v2/Onboarding.js.map +1 -0
  139. package/dist/v2/OptionFields.js +1289 -0
  140. package/dist/v2/OptionFields.js.map +1 -0
  141. package/dist/v2/PhoneNumber.js +20 -287
  142. package/dist/v2/PhoneNumber.js.map +1 -1
  143. package/dist/v2/ProductEmbed.js +1868 -0
  144. package/dist/v2/ProductEmbed.js.map +1 -0
  145. package/dist/v2/PublishBlock.js +5 -21
  146. package/dist/v2/PublishBlock.js.map +1 -1
  147. package/dist/v2/PublishYourItem.js +58 -0
  148. package/dist/v2/PublishYourItem.js.map +1 -0
  149. package/dist/v2/ResponsiveDevicePicker.js +86 -0
  150. package/dist/v2/ResponsiveDevicePicker.js.map +1 -0
  151. package/dist/v2/SessionEnvironment.js +477 -0
  152. package/dist/v2/SessionEnvironment.js.map +1 -0
  153. package/package.json +3 -3
  154. package/types/v2/Insights.d.ts +69 -0
  155. package/types/v2/IntegrationCard.d.ts +30 -0
  156. package/types/v2/IpRestriction.d.ts +5 -0
  157. package/types/v2/MadeWith.d.ts +8 -0
  158. package/types/v2/Metadata.d.ts +26 -0
  159. package/types/v2/MobilePreviewHeader.d.ts +8 -0
  160. package/types/v2/NeetoWidget.d.ts +19 -0
  161. package/types/v2/Onboarding.d.ts +22 -0
  162. package/types/v2/OptionFields.d.ts +55 -0
  163. package/types/v2/ProductEmbed.d.ts +90 -0
  164. package/types/v2/PublishYourItem.d.ts +8 -0
  165. package/types/v2/ResponsiveDevicePicker.d.ts +11 -0
  166. package/types/v2/SessionEnvironment.d.ts +34 -0
@@ -0,0 +1,1870 @@
1
+ 'use strict';
2
+
3
+ var shallow = require('zustand/shallow');
4
+ var React = require('react');
5
+ var neetoCist = require('@bigbinary/neeto-cist');
6
+ var reactRouterDom = require('react-router-dom');
7
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
8
+ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
9
+ var neetoAtoms = require('@bigbinary/neeto-atoms');
10
+ var classnames = require('classnames');
11
+ var useStateWithDependency = require('@bigbinary/neeto-commons-frontend/v2/react-utils/useStateWithDependency');
12
+ var ramda = require('ramda');
13
+ var reactI18next = require('react-i18next');
14
+ var i18next = require('i18next');
15
+ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
16
+ var v2_HelpPopover = require('./HelpPopover.js');
17
+ var reactUtils = require('@bigbinary/neeto-commons-frontend/v2/react-utils');
18
+ var zustand = require('zustand');
19
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
20
+ var jsxRuntime = require('react/jsx-runtime');
21
+ var trash2 = require('../trash-2-CotPjU5n.js');
22
+ var plus = require('../plus-MoDFAiKt.js');
23
+ var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
24
+ var v2_Codeblock = require('./Codeblock.js');
25
+ var initializers = require('@bigbinary/neeto-commons-frontend/v2/initializers');
26
+ var v2_BrowserPreview = require('./BrowserPreview.js');
27
+ var v2_Container = require('./Container.js');
28
+ var v2_Header = require('./Header.js');
29
+ var createLucideIcon = require('../createLucideIcon-DBDhE7kE.js');
30
+ require('../circle-question-mark-kxBMPyWQ.js');
31
+ require('@bigbinary/neeto-commons-frontend/v2/react-utils/useBreakpoints');
32
+ require('react-syntax-highlighter/dist/esm/languages/prism/javascript');
33
+ require('react-syntax-highlighter/dist/esm/prism-light.js');
34
+ require('react-syntax-highlighter/dist/esm/styles/prism');
35
+ require('./CopyToClipboardButton.js');
36
+ require('@bigbinary/neeto-commons-frontend/v2/utils/general');
37
+ require('../check-VgZf0qTr.js');
38
+ require('../copy-CerjTcLL.js');
39
+ require('../index-JY2zVpnv.js');
40
+ require('../_commonjsHelpers-BJu3ubxk.js');
41
+ require('./Breadcrumbs.js');
42
+ require('@bigbinary/neeto-atoms/primitives');
43
+ require('./MoreDropdown.js');
44
+ require('../ellipsis-BcfLTtl5.js');
45
+ require('./Search.js');
46
+ require('@bigbinary/neeto-commons-frontend/v2/react-utils/useFuncDebounce');
47
+ require('@bigbinary/neeto-commons-frontend/v2/react-utils/useQueryParams');
48
+ require('@bigbinary/neeto-commons-frontend/v2/react-utils/useUpdateEffect');
49
+ require('@bigbinary/neeto-commons-frontend/v2/utils');
50
+ require('../search-BBuFYdmG.js');
51
+
52
+ /**
53
+ * @license lucide-react v1.7.0 - ISC
54
+ *
55
+ * This source code is licensed under the ISC license.
56
+ * See the LICENSE file in the root directory of this source tree.
57
+ */
58
+
59
+
60
+ const __iconNode = [
61
+ ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
62
+ ["path", { d: "M19 12H5", key: "x3x0zl" }]
63
+ ];
64
+ const ArrowLeft = createLucideIcon.createLucideIcon("arrow-left", __iconNode);
65
+
66
+ var FLOATING_BUTTON_POSITIONS = [{
67
+ label: i18next.t("neetoMolecules.productEmbed.floatingPopup.position.bottomLeft"),
68
+ value: "bottomLeft"
69
+ }, {
70
+ label: i18next.t("neetoMolecules.productEmbed.floatingPopup.position.bottomRight"),
71
+ value: "bottomRight"
72
+ }];
73
+ var INITIAL_QUERY_PARAM = {
74
+ name: "",
75
+ value: ""
76
+ };
77
+
78
+ /** @type {import("neetocommons/react-utils").ZustandStoreHook} */
79
+ var useProductEmbedStore = zustand.create(reactUtils.withImmutableActions(function (set) {
80
+ return {
81
+ isQueryParamsEnabled: false,
82
+ queryParams: [INITIAL_QUERY_PARAM],
83
+ queryParamsProps: {
84
+ helpPopoverProps: {},
85
+ label: "",
86
+ keyPlaceholder: "",
87
+ valuePlaceholder: "",
88
+ addButtonLabel: ""
89
+ },
90
+ setProductEmbedState: set,
91
+ setQueryParams: function setQueryParams(queryParams) {
92
+ return set({
93
+ queryParams: queryParams
94
+ });
95
+ }
96
+ };
97
+ }));
98
+
99
+ var camelCasedAppName$1 = globalProps.appName.replace(/^neeto/i, "neeto");
100
+ var embedBaseScript = function embedBaseScript(embedScriptLink) {
101
+ return "<script>window.".concat(camelCasedAppName$1, " = window.").concat(camelCasedAppName$1, " || { embed: function(){(").concat(camelCasedAppName$1, ".q=").concat(camelCasedAppName$1, ".q||[]).push(arguments)} };</script>\n <script async\n src=\"").concat(embedScriptLink, "\">\n </script>");
102
+ };
103
+ var embedEnv$1 = function embedEnv() {
104
+ return globalProps.railsEnv !== "production" ? "\n".concat(TAB_STRING, " env: \"").concat(globalProps.railsEnv, "\",") : "";
105
+ };
106
+ var embedQueryParam$1 = function embedQueryParam(queryParams) {
107
+ return queryParams ? "\n".concat(TAB_STRING, " queryParams: ").concat(queryParams, ",") : "";
108
+ };
109
+ var parseExtraArgs$1 = function parseExtraArgs(extraArgs) {
110
+ return ramda.toPairs(extraArgs).map(function (_ref) {
111
+ var _ref2 = _slicedToArray(_ref, 2),
112
+ key = _ref2[0],
113
+ value = _ref2[1];
114
+ return "\n".concat(TAB_STRING, " ").concat(key, ": \"").concat(value, "\"");
115
+ });
116
+ };
117
+ var formatIframeAttributes$1 = function formatIframeAttributes(attributes) {
118
+ return ramda.toPairs(attributes).map(function (_ref3) {
119
+ var _ref4 = _slicedToArray(_ref3, 2),
120
+ key = _ref4[0],
121
+ value = _ref4[1];
122
+ return "\n".concat(TAB_STRING).concat(key, "=\"").concat(value, "\"");
123
+ }).join("");
124
+ };
125
+ var inlineEmbedCode$1 = function inlineEmbedCode(_ref5) {
126
+ var customization = _ref5.customization,
127
+ id = _ref5.id,
128
+ embedScriptLink = _ref5.embedScriptLink,
129
+ extraArgs = _ref5.extraArgs,
130
+ inlineWrapperStyle = _ref5.inlineWrapperStyle,
131
+ iframeStyle = _ref5.iframeStyle,
132
+ queryParams = _ref5.queryParams;
133
+ var elementSelector = customization.elementSelector,
134
+ dynamicHeight = customization.dynamicHeight;
135
+ var processedInlineWrapperStyle = dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value ? removeHeightFromStyle(inlineWrapperStyle) : inlineWrapperStyle;
136
+ return "\n <!-- ".concat(globalProps.appName, " inline embed code begins -->\n <div style=\"").concat(processedInlineWrapperStyle, "\" id=\"").concat(elementSelector, "\">\n <!-- ").concat(globalProps.appName, " widget will be added here -->\n </div>\n ").concat(embedBaseScript(embedScriptLink), "\n <script>\n ").concat(camelCasedAppName$1, ".embed({\n type: \"inline\",\n id: \"").concat(id, "\",\n organization: \"").concat(globalProps.organization.subdomain, "\",\n elementSelector: \"#").concat(elementSelector, "\",\n styles: \"").concat(iframeStyle, "\", ").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n });\n </script>\n <!-- ").concat(globalProps.appName, " inline embed code ends -->");
137
+ };
138
+ var floatingPopupEmbedCode$1 = function floatingPopupEmbedCode(_ref6) {
139
+ var customization = _ref6.customization,
140
+ id = _ref6.id,
141
+ embedScriptLink = _ref6.embedScriptLink,
142
+ extraArgs = _ref6.extraArgs,
143
+ queryParams = _ref6.queryParams;
144
+ var btnTextColor = customization.btnTextColor,
145
+ showIcon = customization.showIcon,
146
+ btnText = customization.btnText,
147
+ btnPosition = customization.btnPosition,
148
+ btnColor = customization.btnColor,
149
+ icon = customization.icon;
150
+ return "\n <!-- ".concat(globalProps.appName, " floating-popup embed code begins -->\n ").concat(embedBaseScript(embedScriptLink), "\n <script>\n ").concat(camelCasedAppName$1, ".embed({\n type: \"floatingPopup\",\n id: \"").concat(id, "\",\n organization: \"").concat(globalProps.organization.subdomain, "\",\n styles: {\n btnTextColor: \"").concat(btnTextColor, "\",\n btnPosition: \"").concat(btnPosition, "\",\n btnColor: \"").concat(btnColor, "\",\n btnText: \"").concat(btnText, "\", ").concat(icon ? "\n".concat(TAB_STRING).concat(TAB_STRING, "showIcon: ").concat(showIcon, ",") : "", "\n },").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n });\n </script>\n <!-- ").concat(globalProps.appName, " floating-popup embed code ends -->");
151
+ };
152
+ var elementPopupEmbedCode$1 = function elementPopupEmbedCode(_ref7) {
153
+ var customization = _ref7.customization,
154
+ id = _ref7.id,
155
+ embedScriptLink = _ref7.embedScriptLink,
156
+ extraArgs = _ref7.extraArgs,
157
+ queryParams = _ref7.queryParams;
158
+ var elementSelector = customization.elementSelector;
159
+ return "\n <!-- This is a demo button, you can use any element on your website instead. -->\n <!-- <button id=\"".concat(elementSelector, "\">Click to open popup</button> -->\n\n <!-- ").concat(globalProps.appName, " element-click embed code begins -->\n ").concat(embedBaseScript(embedScriptLink), "\n <script>\n ").concat(camelCasedAppName$1, ".embed({\n type: \"elementClick\",\n id: \"").concat(id, "\",\n organization: \"").concat(globalProps.organization.subdomain, "\",\n elementSelector: \"#").concat(elementSelector, "\",").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n });\n </script>\n <!-- ").concat(globalProps.appName, " element-click embed code ends -->");
160
+ };
161
+ var iframeEmbedCode$1 = function iframeEmbedCode(_ref8) {
162
+ var id = _ref8.id,
163
+ customization = _ref8.customization,
164
+ queryParams = _ref8.queryParams,
165
+ embedScriptLink = _ref8.embedScriptLink;
166
+ var height = customization.height,
167
+ width = customization.width,
168
+ iframeTitle = customization.iframeTitle,
169
+ iframeUrl = customization.iframeUrl,
170
+ dynamicHeight = customization.dynamicHeight,
171
+ iframeAttributes = customization.iframeAttributes;
172
+ var iframeSrc = buildIframeURL$1({
173
+ id: id,
174
+ iframeUrl: iframeUrl,
175
+ queryParams: queryParams
176
+ });
177
+ var heightAttribute = dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value ? "" : "\n".concat(TAB_STRING, "height=\"").concat(height, "\"");
178
+ return "\n <!-- ".concat(globalProps.appName, " iframe embed code begins -->\n ").concat(dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value && embedScriptLink ? embedBaseScript(embedScriptLink) : "", "\n <iframe\n allowfullscreen").concat(heightAttribute, "\n width=\"").concat(width, "\"\n frameborder=\"0\"\n title=\"").concat(iframeTitle, "\"\n src=\"").concat(iframeSrc, "\"").concat(formatIframeAttributes$1(iframeAttributes), "\n ></iframe>\n <!-- ").concat(globalProps.appName, " iframe embed code ends -->");
179
+ };
180
+ var htmlCodeGenerators = {
181
+ inline: inlineEmbedCode$1,
182
+ floatingPopup: floatingPopupEmbedCode$1,
183
+ elementPopup: elementPopupEmbedCode$1,
184
+ iframe: iframeEmbedCode$1
185
+ };
186
+
187
+ var camelCasedAppName = globalProps.appName.replace(/^neeto/i, "neeto");
188
+ var embedFunctionName = "embed".concat(globalProps.appName);
189
+ var embedScript = function embedScript(scriptLink) {
190
+ return "const embedScript = document.createElement(\"script\");\n embedScript.type = \"module\";\n embedScript.src = \"".concat(scriptLink, "\";\n embedScript.async = true;\n");
191
+ };
192
+ var cleanupFunction = "\n return () => {\n embedScript.onload = null;\n if(window.".concat(camelCasedAppName, ") window.").concat(camelCasedAppName, ".destroy();\n document.body.removeChild(embedScript);\n };");
193
+ var embedEnv = function embedEnv() {
194
+ return globalProps.railsEnv !== "production" ? "\n".concat(TAB_STRING).concat(TAB_STRING, " env: \"").concat(globalProps.railsEnv, "\",") : "";
195
+ };
196
+ var embedQueryParam = function embedQueryParam(queryParams) {
197
+ return queryParams ? "\n".concat(TAB_STRING).concat(TAB_STRING, " queryParams: ").concat(queryParams, ",") : "";
198
+ };
199
+ var parseExtraArgs = function parseExtraArgs(extraArgs) {
200
+ return ramda.toPairs(extraArgs).map(function (_ref) {
201
+ var _ref2 = _slicedToArray(_ref, 2),
202
+ key = _ref2[0],
203
+ value = _ref2[1];
204
+ return "\n".concat(TAB_STRING).concat(TAB_STRING).concat(key, ": \"").concat(value, "\"");
205
+ });
206
+ };
207
+ var formatIframeAttributes = function formatIframeAttributes(attributes) {
208
+ return ramda.toPairs(attributes).map(function (_ref3) {
209
+ var _ref4 = _slicedToArray(_ref3, 2),
210
+ key = _ref4[0],
211
+ value = _ref4[1];
212
+ return "\n".concat(TAB_STRING).concat(TAB_STRING, " ").concat(key, "=\"").concat(value, "\"");
213
+ }).join("");
214
+ };
215
+ var parseInlineStyle = function parseInlineStyle(styleString) {
216
+ return styleString.split(";").map(function (rule) {
217
+ var _rule$split$map = rule.split(":").map(function (s) {
218
+ return s.trim();
219
+ }),
220
+ _rule$split$map2 = _slicedToArray(_rule$split$map, 2),
221
+ key = _rule$split$map2[0],
222
+ value = _rule$split$map2[1];
223
+ return key && value ? "".concat(key, ": \"").concat(value, "\"") : null;
224
+ }).filter(Boolean).join(", ");
225
+ };
226
+ var inlineEmbedCode = function inlineEmbedCode(_ref5) {
227
+ var customization = _ref5.customization,
228
+ id = _ref5.id,
229
+ embedScriptLink = _ref5.embedScriptLink,
230
+ extraArgs = _ref5.extraArgs,
231
+ inlineWrapperStyle = _ref5.inlineWrapperStyle,
232
+ iframeStyle = _ref5.iframeStyle,
233
+ queryParams = _ref5.queryParams;
234
+ var elementSelector = customization.elementSelector,
235
+ dynamicHeight = customization.dynamicHeight;
236
+ var processedInlineWrapperStyle = dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value ? removeHeightFromStyle(inlineWrapperStyle) : inlineWrapperStyle;
237
+ return "\n import { useEffect } from \"react\";\n\n const App = () => {\n const ".concat(embedFunctionName, " = () => {\n ").concat(embedScript(embedScriptLink), "\n embedScript.onload = () => {\n window.").concat(camelCasedAppName, ".embed({\n type: \"inline\",\n id: \"").concat(id, "\",\n organization: \"").concat(globalProps.organization.subdomain, "\",\n elementSelector: \"#").concat(elementSelector, "\",\n styles: \"").concat(iframeStyle, "\",").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n });\n };\n\n document.body.appendChild(embedScript);\n ").concat(cleanupFunction, "\n };\n\n useEffect(() => ").concat(embedFunctionName, "(), []);\n\n return (\n <div\n id=\"inline-embed-container\"\n style={{ ").concat(parseInlineStyle(processedInlineWrapperStyle), " }}\n />\n );\n };");
238
+ };
239
+ var floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref6) {
240
+ var customization = _ref6.customization,
241
+ id = _ref6.id,
242
+ embedScriptLink = _ref6.embedScriptLink,
243
+ extraArgs = _ref6.extraArgs,
244
+ queryParams = _ref6.queryParams;
245
+ var btnTextColor = customization.btnTextColor,
246
+ showIcon = customization.showIcon,
247
+ btnText = customization.btnText,
248
+ btnPosition = customization.btnPosition,
249
+ btnColor = customization.btnColor,
250
+ icon = customization.icon;
251
+ return "\n import { useEffect } from \"react\";\n\n const App = () => {\n const ".concat(embedFunctionName, " = () => {\n ").concat(embedScript(embedScriptLink), "\n embedScript.onload = () => {\n window.").concat(camelCasedAppName, ".embed({\n type: \"floatingPopup\",\n id: \"").concat(id, "\",\n organization: \"").concat(globalProps.organization.subdomain, "\",\n styles: {\n btnTextColor: \"").concat(btnTextColor, "\",\n btnPosition: \"").concat(btnPosition, "\",\n btnColor: \"").concat(btnColor, "\",\n btnText: \"").concat(btnText, "\",").concat(icon ? "\n".concat(TAB_STRING).concat(TAB_STRING).concat(TAB_STRING, "showIcon: ").concat(showIcon, ",") : "", "\n },").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n });\n };\n\n document.body.appendChild(embedScript);\n ").concat(cleanupFunction, "\n };\n\n useEffect(() => ").concat(embedFunctionName, "(), []);\n\n return <div />;\n };");
252
+ };
253
+ var elementPopupEmbedCode = function elementPopupEmbedCode(_ref7) {
254
+ var customization = _ref7.customization,
255
+ id = _ref7.id,
256
+ embedScriptLink = _ref7.embedScriptLink,
257
+ extraArgs = _ref7.extraArgs,
258
+ queryParams = _ref7.queryParams;
259
+ var elementSelector = customization.elementSelector;
260
+ return "\n import { useEffect } from \"react\";\n\n const App = () => {\n const ".concat(embedFunctionName, " = () => {\n ").concat(embedScript(embedScriptLink), "\n embedScript.onload = () => {\n window.").concat(camelCasedAppName, ".embed({\n type: \"elementClick\",\n id: \"").concat(id, "\",\n organization: \"").concat(globalProps.organization.subdomain, "\",\n elementSelector: \"#").concat(elementSelector, "\",").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n });\n };\n\n document.body.appendChild(embedScript);\n ").concat(cleanupFunction, "\n };\n\n useEffect(() => ").concat(embedFunctionName, "(), []);\n\n return <button id=\"").concat(elementSelector, "\">Click to open popup</button>;\n };");
261
+ };
262
+ var iframeEmbedCode = function iframeEmbedCode(_ref8) {
263
+ var customization = _ref8.customization,
264
+ id = _ref8.id,
265
+ queryParams = _ref8.queryParams;
266
+ var height = customization.height,
267
+ width = customization.width,
268
+ iframeTitle = customization.iframeTitle,
269
+ iframeUrl = customization.iframeUrl,
270
+ dynamicHeight = customization.dynamicHeight,
271
+ iframeAttributes = customization.iframeAttributes;
272
+ var iframeSrc = buildIframeURL$1({
273
+ id: id,
274
+ iframeUrl: iframeUrl,
275
+ queryParams: queryParams
276
+ });
277
+ var heightAttribute = dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value ? "" : "\n".concat(TAB_STRING).concat(TAB_STRING, " height=\"").concat(height, "\"");
278
+ return "\n const App = () => {\n return (\n <>\n {/* ".concat(globalProps.appName, " iframe embed code begins */}\n <iframe\n allowFullScreen").concat(heightAttribute, "\n width=\"").concat(width, "\"\n frameBorder=\"0\"\n title=\"").concat(iframeTitle, "\"\n src=\"").concat(iframeSrc, "\"").concat(formatIframeAttributes(iframeAttributes), "\n ></iframe>\n {/* ").concat(globalProps.appName, " iframe embed code ends */}\n </>\n );\n };\n");
279
+ };
280
+ var reactCodeGenerators = {
281
+ inline: inlineEmbedCode,
282
+ floatingPopup: floatingPopupEmbedCode,
283
+ elementPopup: elementPopupEmbedCode,
284
+ iframe: iframeEmbedCode
285
+ };
286
+
287
+ var _excluded$1 = ["selectedLanguage", "type"];
288
+ function ownKeys$8(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; }
289
+ function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
290
+ var buildQueryParams$1 = function buildQueryParams() {
291
+ var customization = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
292
+ var existingQueryParams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
293
+ var activeOptions = Object.keys(SWITCH_OPTIONS).reduce(function (acc, key) {
294
+ var _customization$key;
295
+ var value = (_customization$key = customization[key]) === null || _customization$key === void 0 ? void 0 : _customization$key.value;
296
+ if (value) acc[key] = value;
297
+ return acc;
298
+ }, {});
299
+ var mergedQueryParams = _objectSpread$8(_objectSpread$8({}, existingQueryParams), activeOptions);
300
+ if (ramda.isEmpty(mergedQueryParams)) return "";
301
+ return JSON.stringify(mergedQueryParams, null, 2).replace(/\n/g, " ").replace(/\s\s+/g, " ");
302
+ };
303
+ var generateCode = function generateCode(options) {
304
+ var _embeddedCodeOptions$, _reactCodeGenerators$, _htmlCodeGenerators$t;
305
+ var selectedLanguage = options.selectedLanguage,
306
+ type = options.type,
307
+ embeddedCodeOptions = _objectWithoutProperties(options, _excluded$1);
308
+ var queryParams = ((_embeddedCodeOptions$ = embeddedCodeOptions.customization) === null || _embeddedCodeOptions$ === void 0 ? void 0 : _embeddedCodeOptions$.queryParams) || {};
309
+ var customization = embeddedCodeOptions.customization || {};
310
+ var codeOptions = _objectSpread$8(_objectSpread$8({}, embeddedCodeOptions), {}, {
311
+ queryParams: buildQueryParams$1(customization, queryParams)
312
+ });
313
+ return selectedLanguage === "react" ? (_reactCodeGenerators$ = reactCodeGenerators[type]) === null || _reactCodeGenerators$ === void 0 ? void 0 : _reactCodeGenerators$.call(reactCodeGenerators, codeOptions) : (_htmlCodeGenerators$t = htmlCodeGenerators[type]) === null || _htmlCodeGenerators$t === void 0 ? void 0 : _htmlCodeGenerators$t.call(htmlCodeGenerators, codeOptions);
314
+ };
315
+ var buildDefaultCustomization = function buildDefaultCustomization(defaultCustomizations) {
316
+ return ramda.mergeDeepLeft(defaultCustomizations, DEFAULT_CUSTOMIZATION);
317
+ };
318
+ var buildQueryParamsFromInputFields = function buildQueryParamsFromInputFields(inputFields) {
319
+ var filteredInputFields = inputFields.filter(function (_ref) {
320
+ var name = _ref.name,
321
+ value = _ref.value;
322
+ return name && value;
323
+ });
324
+ return filteredInputFields.reduce(function (queryParams, _ref2) {
325
+ var name = _ref2.name,
326
+ value = _ref2.value;
327
+ queryParams[name] = value;
328
+ return queryParams;
329
+ }, {});
330
+ };
331
+ var toCamelCasedString = function toCamelCasedString(string) {
332
+ return string === null || string === void 0 ? void 0 : string.replace(/[_-]+(\w)/g, function (_, nextChar) {
333
+ return nextChar.toUpperCase();
334
+ });
335
+ };
336
+ var buildIframeURL$1 = function buildIframeURL(_ref3) {
337
+ var id = _ref3.id,
338
+ iframeUrl = _ref3.iframeUrl,
339
+ queryParams = _ref3.queryParams;
340
+ var url = new URL(iframeUrl || "".concat(location.origin, "/embed/").concat(id));
341
+ if (!queryParams) return url.toString();
342
+ var parsedQueryParams = JSON.parse(queryParams);
343
+ Object.entries(parsedQueryParams).forEach(function (_ref4) {
344
+ var _ref5 = _slicedToArray(_ref4, 2),
345
+ key = _ref5[0],
346
+ value = _ref5[1];
347
+ url.searchParams.append(key, value);
348
+ });
349
+ return url.toString();
350
+ };
351
+ var removeHeightFromStyle = function removeHeightFromStyle(style) {
352
+ return style.replace(/height\s*:\s*[^;]+;?\s*/g, "").trim();
353
+ };
354
+
355
+ function ownKeys$7(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; }
356
+ function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
357
+ var DynamicQueryParams = function DynamicQueryParams(_ref) {
358
+ var updateCustomization = _ref.updateCustomization;
359
+ var _useTranslation = reactI18next.useTranslation(),
360
+ t = _useTranslation.t;
361
+ var _useProductEmbedStore = useProductEmbedStore(shallow.useShallow(function (store) {
362
+ return {
363
+ queryParamsProps: store["queryParamsProps"],
364
+ queryParams: store["queryParams"],
365
+ setQueryParams: store["setQueryParams"]
366
+ };
367
+ })),
368
+ queryParamsProps = _useProductEmbedStore.queryParamsProps,
369
+ queryParams = _useProductEmbedStore.queryParams,
370
+ setQueryParams = _useProductEmbedStore.setQueryParams;
371
+ var handleAddQueryParam = function handleAddQueryParam() {
372
+ setQueryParams([].concat(_toConsumableArray(queryParams), [INITIAL_QUERY_PARAM]));
373
+ };
374
+ var handleRemoveQueryParam = function handleRemoveQueryParam(index) {
375
+ var newQueryParams = queryParams.filter(function (_, i) {
376
+ return i !== index;
377
+ });
378
+ setQueryParams(newQueryParams);
379
+ };
380
+ var handleInputChange = function handleInputChange(index, field, value) {
381
+ var newQueryParams = queryParams.map(function (param, i) {
382
+ return i === index ? _objectSpread$7(_objectSpread$7({}, param), {}, _defineProperty({}, field, value)) : param;
383
+ });
384
+ setQueryParams(newQueryParams);
385
+ };
386
+ React.useEffect(function () {
387
+ updateCustomization({
388
+ queryParams: buildQueryParamsFromInputFields(queryParams)
389
+ });
390
+ }, [queryParams]);
391
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
392
+ children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
393
+ className: "mb-2 flex",
394
+ "data-testid": "dynamic-query-params-label-container",
395
+ children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Label, {
396
+ "data-testid": "dynamic-query-params-label",
397
+ children: queryParamsProps.label || t("neetoMolecules.productEmbed.queryParam.label")
398
+ }), neetoCist.isPresent(queryParamsProps.helpPopoverProps) && /*#__PURE__*/jsxRuntime.jsx(v2_HelpPopover, _objectSpread$7({
399
+ className: "ms-1"
400
+ }, queryParamsProps.helpPopoverProps))]
401
+ }), queryParams.map(function (param, index) {
402
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
403
+ className: "mb-2 flex gap-1",
404
+ children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
405
+ "data-testid": "dynamic-query-key-name-input",
406
+ name: "queryParams.".concat(index, ".name"),
407
+ value: param.name,
408
+ placeholder: queryParamsProps.keyPlaceholder || t("neetoMolecules.productEmbed.queryParam.keyNamePlaceholder"),
409
+ onChange: function onChange(e) {
410
+ return handleInputChange(index, "name", e.target.value);
411
+ }
412
+ }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
413
+ "data-testid": "dynamic-query-key-value-input",
414
+ name: "queryParams.".concat(index, ".value"),
415
+ value: param.value,
416
+ placeholder: queryParamsProps.valuePlaceholder || t("neetoMolecules.productEmbed.queryParam.keyValuePlaceholder"),
417
+ onChange: function onChange(e) {
418
+ return handleInputChange(index, "value", e.target.value);
419
+ }
420
+ }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
421
+ "data-testid": "dynamic-query-delete-button",
422
+ icon: trash2.Trash2,
423
+ variant: "ghost",
424
+ onClick: function onClick() {
425
+ return handleRemoveQueryParam(index);
426
+ }
427
+ })]
428
+ }, index);
429
+ }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
430
+ className: "my-2",
431
+ "data-testid": "dynamic-query-add-new-button",
432
+ icon: plus.Plus,
433
+ iconPosition: "left",
434
+ variant: "link",
435
+ label: queryParamsProps.addButtonLabel || t("neetoMolecules.productEmbed.queryParam.addQueryParam"),
436
+ onClick: handleAddQueryParam
437
+ })]
438
+ });
439
+ };
440
+
441
+ var ElementPopup$1 = function ElementPopup(_ref) {
442
+ var customization = _ref.customization,
443
+ updateCustomization = _ref.updateCustomization,
444
+ otherCustomizations = _ref.otherCustomizations;
445
+ var elementSelector = customization.elementSelector;
446
+ var _useTranslation = reactI18next.useTranslation(),
447
+ t = _useTranslation.t;
448
+ var _useProductEmbedStore = useProductEmbedStore(shallow.useShallow(function (store) {
449
+ return {
450
+ isQueryParamsEnabled: store["isQueryParamsEnabled"]
451
+ };
452
+ })),
453
+ isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
454
+ React.useEffect(function () {
455
+ if (isQueryParamsEnabled) return;
456
+ updateCustomization({
457
+ queryParams: undefined
458
+ });
459
+ }, []);
460
+ return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
461
+ children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
462
+ className: "w-full",
463
+ "data-testid": "element-id-input-field",
464
+ helpText: t("neetoMolecules.productEmbed.elementPopup.callout"),
465
+ label: t("neetoMolecules.productEmbed.elementPopup.elementId"),
466
+ value: elementSelector,
467
+ error: !elementSelector && t("neetoMolecules.productEmbed.elementPopup.elementIdError"),
468
+ onChange: function onChange(e) {
469
+ return updateCustomization({
470
+ elementSelector: e.target.value
471
+ });
472
+ }
473
+ }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsxRuntime.jsx(DynamicQueryParams, {
474
+ updateCustomization: updateCustomization
475
+ })]
476
+ });
477
+ };
478
+
479
+ var FloatingPopup$1 = function FloatingPopup(_ref) {
480
+ var customization = _ref.customization,
481
+ updateCustomization = _ref.updateCustomization,
482
+ otherCustomizations = _ref.otherCustomizations;
483
+ var _useTranslation = reactI18next.useTranslation(),
484
+ t = _useTranslation.t;
485
+ var _useProductEmbedStore = useProductEmbedStore(shallow.useShallow(function (store) {
486
+ return {
487
+ isQueryParamsEnabled: store["isQueryParamsEnabled"]
488
+ };
489
+ })),
490
+ isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
491
+ var btnTextColor = customization.btnTextColor,
492
+ showIcon = customization.showIcon,
493
+ btnText = customization.btnText,
494
+ btnPosition = customization.btnPosition,
495
+ btnColor = customization.btnColor,
496
+ icon = customization.icon;
497
+ React.useEffect(function () {
498
+ if (isQueryParamsEnabled) return;
499
+ updateCustomization({
500
+ queryParams: undefined
501
+ });
502
+ }, []);
503
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
504
+ className: "flex w-full flex-col gap-y-4",
505
+ children: [/*#__PURE__*/jsxRuntime.jsx("div", {
506
+ className: "flex flex-col gap-y-2",
507
+ children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
508
+ "data-testid": "button-text-input-field",
509
+ label: t("neetoMolecules.productEmbed.floatingPopup.button.text"),
510
+ value: btnText,
511
+ error: !btnText && t("neetoMolecules.productEmbed.floatingPopup.button.textError"),
512
+ onChange: function onChange(e) {
513
+ return updateCustomization({
514
+ btnText: e.target.value
515
+ });
516
+ }
517
+ })
518
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
519
+ className: "flex flex-col gap-y-2",
520
+ children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Select, {
521
+ dataTestId: "button-position-select-field",
522
+ label: t("neetoMolecules.productEmbed.floatingPopup.button.pos"),
523
+ options: FLOATING_BUTTON_POSITIONS,
524
+ value: btnPosition,
525
+ onChange: function onChange(value) {
526
+ return updateCustomization({
527
+ btnPosition: value
528
+ });
529
+ }
530
+ })
531
+ }), /*#__PURE__*/jsxRuntime.jsxs("div", {
532
+ className: "flex items-center justify-between gap-2",
533
+ "data-testid": "button-color-label",
534
+ children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Label, {
535
+ children: t("neetoMolecules.productEmbed.floatingPopup.button.color")
536
+ }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.ColorPicker, {
537
+ color: btnColor,
538
+ size: "medium",
539
+ onChange: function onChange(e) {
540
+ return updateCustomization({
541
+ btnColor: e.hex
542
+ });
543
+ }
544
+ })]
545
+ }), /*#__PURE__*/jsxRuntime.jsxs("div", {
546
+ className: "flex items-center justify-between gap-2",
547
+ "data-testid": "button-text-color-label",
548
+ children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Label, {
549
+ children: t("neetoMolecules.productEmbed.floatingPopup.button.textColor")
550
+ }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.ColorPicker, {
551
+ color: btnTextColor,
552
+ size: "medium",
553
+ onChange: function onChange(e) {
554
+ return updateCustomization({
555
+ btnTextColor: e.hex
556
+ });
557
+ }
558
+ })]
559
+ }), icon && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Checkbox, {
560
+ checked: showIcon,
561
+ "data-testid": "show-icon-checkbox",
562
+ label: t("neetoMolecules.productEmbed.floatingPopup.showCalIcon"),
563
+ onCheckedChange: function onCheckedChange(checked) {
564
+ return updateCustomization({
565
+ showIcon: checked
566
+ });
567
+ }
568
+ }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsxRuntime.jsx(DynamicQueryParams, {
569
+ updateCustomization: updateCustomization
570
+ })]
571
+ });
572
+ };
573
+
574
+ var _excluded = ["value", "label", "helpIconProps"];
575
+ function ownKeys$6(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; }
576
+ function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
577
+ var SwitchOptions = function SwitchOptions(_ref) {
578
+ var _ref$customization = _ref.customization,
579
+ customization = _ref$customization === void 0 ? {} : _ref$customization,
580
+ updateCustomization = _ref.updateCustomization;
581
+ var visibleOptions = Object.keys(SWITCH_OPTIONS).filter(function (key) {
582
+ return key in customization;
583
+ }).map(function (key) {
584
+ return [key, customization[key]];
585
+ });
586
+ if (ramda.isEmpty(visibleOptions)) return null;
587
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
588
+ className: "flex flex-col gap-4",
589
+ children: visibleOptions.map(function (_ref2) {
590
+ var _ref3 = _slicedToArray(_ref2, 2),
591
+ option = _ref3[0],
592
+ _ref3$ = _ref3[1],
593
+ value = _ref3$.value,
594
+ label = _ref3$.label,
595
+ helpIconProps = _ref3$.helpIconProps,
596
+ rest = _objectWithoutProperties(_ref3$, _excluded);
597
+ return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Switch, {
598
+ checked: value,
599
+ label: /*#__PURE__*/jsxRuntime.jsxs("span", {
600
+ className: "flex items-center gap-1",
601
+ children: [label || SWITCH_OPTIONS[option].label, helpIconProps && /*#__PURE__*/jsxRuntime.jsx(v2_HelpPopover, _objectSpread$6({}, helpIconProps.popoverProps))]
602
+ }),
603
+ onCheckedChange: function onCheckedChange(checked) {
604
+ return updateCustomization(_defineProperty({}, option, _objectSpread$6(_objectSpread$6({}, rest), {}, {
605
+ label: label,
606
+ helpIconProps: helpIconProps,
607
+ value: checked
608
+ })));
609
+ }
610
+ }, option);
611
+ })
612
+ });
613
+ };
614
+
615
+ var Iframe$1 = function Iframe(_ref) {
616
+ var updateCustomization = _ref.updateCustomization,
617
+ otherCustomizations = _ref.otherCustomizations,
618
+ customization = _ref.customization;
619
+ var _useProductEmbedStore = useProductEmbedStore(shallow.useShallow(function (store) {
620
+ return {
621
+ isQueryParamsEnabled: store["isQueryParamsEnabled"]
622
+ };
623
+ })),
624
+ isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
625
+ React.useEffect(function () {
626
+ if (isQueryParamsEnabled) return;
627
+ updateCustomization({
628
+ queryParams: undefined
629
+ });
630
+ }, []);
631
+ return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
632
+ children: [otherCustomizations(), /*#__PURE__*/jsxRuntime.jsx(SwitchOptions, {
633
+ customization: customization,
634
+ updateCustomization: updateCustomization
635
+ }), isQueryParamsEnabled && /*#__PURE__*/jsxRuntime.jsx(DynamicQueryParams, {
636
+ updateCustomization: updateCustomization
637
+ })]
638
+ });
639
+ };
640
+
641
+ var Inline$1 = function Inline(_ref) {
642
+ var customization = _ref.customization,
643
+ updateCustomization = _ref.updateCustomization,
644
+ otherCustomizations = _ref.otherCustomizations;
645
+ var _useTranslation = reactI18next.useTranslation(),
646
+ t = _useTranslation.t;
647
+ var _useProductEmbedStore = useProductEmbedStore(shallow.useShallow(function (store) {
648
+ return {
649
+ isQueryParamsEnabled: store["isQueryParamsEnabled"]
650
+ };
651
+ })),
652
+ isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
653
+ var elementSelector = customization.elementSelector;
654
+ var handleInputChange = function handleInputChange(_ref2, attribute) {
655
+ var value = _ref2.target.value;
656
+ return updateCustomization(_defineProperty({}, attribute, value));
657
+ };
658
+ React.useEffect(function () {
659
+ if (isQueryParamsEnabled) return;
660
+ updateCustomization({
661
+ queryParams: undefined
662
+ });
663
+ }, []);
664
+ return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
665
+ children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
666
+ "data-testid": "inline-element-id-input-field",
667
+ label: t("neetoMolecules.productEmbed.inline.elementId"),
668
+ value: elementSelector,
669
+ error: !elementSelector && t("neetoMolecules.productEmbed.inline.elementIdError"),
670
+ onChange: function onChange(e) {
671
+ return handleInputChange(e, "elementSelector");
672
+ }
673
+ }), /*#__PURE__*/jsxRuntime.jsx(SwitchOptions, {
674
+ customization: customization,
675
+ updateCustomization: updateCustomization
676
+ }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsxRuntime.jsx(DynamicQueryParams, {
677
+ updateCustomization: updateCustomization
678
+ })]
679
+ });
680
+ };
681
+
682
+ function ownKeys$5(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; }
683
+ function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
684
+ var InlineEmbedIcon = function InlineEmbedIcon(_ref) {
685
+ var other = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
686
+ return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$5(_objectSpread$5({
687
+ fill: "none",
688
+ height: "163",
689
+ viewBox: "0 0 278 163",
690
+ width: "278",
691
+ xmlns: "http://www.w3.org/2000/svg"
692
+ }, other), {}, {
693
+ children: [/*#__PURE__*/jsxRuntime.jsxs("g", {
694
+ clipPath: "url(#clip0_8605_6776)",
695
+ children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
696
+ fill: "rgb(var(--neeto-ui-white))",
697
+ height: "163",
698
+ rx: "6",
699
+ width: "278"
700
+ }), /*#__PURE__*/jsxRuntime.jsx("mask", {
701
+ fill: "rgb(var(--neeto-ui-white))",
702
+ id: "path-3-inside-1_8605_6776",
703
+ children: /*#__PURE__*/jsxRuntime.jsx("path", {
704
+ d: "M0 0h305v20H0z"
705
+ })
706
+ }), /*#__PURE__*/jsxRuntime.jsx("path", {
707
+ d: "M0 0h305v20H0z",
708
+ fill: "rgb(var(--neeto-ui-white))"
709
+ }), /*#__PURE__*/jsxRuntime.jsx("path", {
710
+ d: "M305 19H0v2h305z",
711
+ fill: "currentColor",
712
+ mask: "url(#path-3-inside-1_8605_6776)"
713
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
714
+ cx: "10.596",
715
+ cy: "10.432",
716
+ fill: "#FD5350",
717
+ r: "2.307"
718
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
719
+ cx: "18.143",
720
+ cy: "10.432",
721
+ fill: "#FEB33A",
722
+ r: "2.307"
723
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
724
+ cx: "25.69",
725
+ cy: "10.432",
726
+ fill: "#2CC146",
727
+ r: "2.307"
728
+ }), /*#__PURE__*/jsxRuntime.jsx("path", {
729
+ d: "M36 20h206v10H36zM36 150h206v12H36z",
730
+ fill: "currentColor"
731
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
732
+ height: "103.55",
733
+ rx: "5.217",
734
+ stroke: "rgb(var(--neeto-ui-gray-300))",
735
+ strokeWidth: "0.45",
736
+ width: "205.55",
737
+ x: "36.225",
738
+ y: "38.225"
739
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
740
+ fill: "currentColor",
741
+ height: "2.311",
742
+ rx: "1.156",
743
+ width: "36.079",
744
+ x: "45.32",
745
+ y: "81.914"
746
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
747
+ fill: "currentColor",
748
+ height: "2.311",
749
+ rx: "1.156",
750
+ width: "20.949",
751
+ x: "45.32",
752
+ y: "87.688"
753
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
754
+ fill: "#008068",
755
+ height: "7.988",
756
+ rx: "1",
757
+ width: "23.183",
758
+ x: "203.539",
759
+ y: "61.109"
760
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
761
+ fill: "currentColor",
762
+ height: "7.728",
763
+ rx: "1",
764
+ width: "23.183",
765
+ x: "203.539",
766
+ y: "73.57"
767
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
768
+ fill: "currentColor",
769
+ height: "8.134",
770
+ rx: "1",
771
+ width: "23.183",
772
+ x: "203.539",
773
+ y: "85.773"
774
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
775
+ fill: "currentColor",
776
+ height: "8.134",
777
+ rx: "1",
778
+ width: "23.183",
779
+ x: "203.539",
780
+ y: "98.383"
781
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
782
+ fill: "currentColor",
783
+ height: "8.134",
784
+ rx: "1",
785
+ width: "23.183",
786
+ x: "203.539",
787
+ y: "110.992"
788
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
789
+ cx: "52.077",
790
+ cy: "67.819",
791
+ fill: "currentColor",
792
+ r: "6.733"
793
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
794
+ cx: "120.314",
795
+ cy: "74.322",
796
+ fill: "currentColor",
797
+ r: "2.65"
798
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
799
+ cx: "120.322",
800
+ cy: "84.876",
801
+ fill: "currentColor",
802
+ r: "2.65"
803
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
804
+ cx: "120.322",
805
+ cy: "95.439",
806
+ fill: "currentColor",
807
+ r: "2.65"
808
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
809
+ cx: "130.954",
810
+ cy: "63.767",
811
+ fill: "currentColor",
812
+ r: "2.65"
813
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
814
+ cx: "130.954",
815
+ cy: "74.322",
816
+ fill: "currentColor",
817
+ r: "2.65"
818
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
819
+ cx: "130.954",
820
+ cy: "84.876",
821
+ fill: "currentColor",
822
+ r: "2.65"
823
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
824
+ cx: "130.954",
825
+ cy: "95.439",
826
+ fill: "currentColor",
827
+ r: "2.65"
828
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
829
+ cx: "141.572",
830
+ cy: "63.767",
831
+ fill: "currentColor",
832
+ r: "2.65"
833
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
834
+ cx: "141.572",
835
+ cy: "74.322",
836
+ fill: "currentColor",
837
+ r: "2.65"
838
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
839
+ cx: "141.572",
840
+ cy: "84.876",
841
+ fill: "currentColor",
842
+ r: "2.65"
843
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
844
+ cx: "141.572",
845
+ cy: "95.439",
846
+ fill: "currentColor",
847
+ r: "2.65"
848
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
849
+ cx: "152.181",
850
+ cy: "63.767",
851
+ fill: "currentColor",
852
+ r: "2.65"
853
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
854
+ cx: "152.181",
855
+ cy: "74.322",
856
+ fill: "currentColor",
857
+ r: "2.65"
858
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
859
+ cx: "152.181",
860
+ cy: "84.876",
861
+ fill: "currentColor",
862
+ r: "2.65"
863
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
864
+ cx: "162.806",
865
+ cy: "63.767",
866
+ fill: "currentColor",
867
+ r: "2.65"
868
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
869
+ cx: "162.806",
870
+ cy: "74.322",
871
+ fill: "#008068",
872
+ r: "2.65"
873
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
874
+ cx: "162.806",
875
+ cy: "84.876",
876
+ fill: "currentColor",
877
+ r: "2.65"
878
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
879
+ cx: "173.439",
880
+ cy: "63.767",
881
+ fill: "currentColor",
882
+ r: "2.65"
883
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
884
+ cx: "173.439",
885
+ cy: "74.322",
886
+ fill: "currentColor",
887
+ r: "2.65"
888
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
889
+ cx: "173.439",
890
+ cy: "84.876",
891
+ fill: "currentColor",
892
+ r: "2.65"
893
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
894
+ cx: "184.064",
895
+ cy: "63.767",
896
+ fill: "currentColor",
897
+ r: "2.65"
898
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
899
+ cx: "184.064",
900
+ cy: "74.322",
901
+ fill: "currentColor",
902
+ r: "2.65"
903
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
904
+ cx: "184.075",
905
+ cy: "84.876",
906
+ fill: "currentColor",
907
+ r: "2.65"
908
+ }), /*#__PURE__*/jsxRuntime.jsx("path", {
909
+ d: "M93.023 38v104",
910
+ stroke: "#E7E7E7",
911
+ strokeWidth: "0.454"
912
+ })]
913
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
914
+ height: "162",
915
+ rx: "5.5",
916
+ stroke: "rgb(var(--neeto-ui-gray-300))",
917
+ width: "277",
918
+ x: "0.5",
919
+ y: "0.5"
920
+ }), /*#__PURE__*/jsxRuntime.jsx("defs", {
921
+ children: /*#__PURE__*/jsxRuntime.jsx("clipPath", {
922
+ id: "clip0_8605_6776",
923
+ children: /*#__PURE__*/jsxRuntime.jsx("rect", {
924
+ fill: "rgb(var(--neeto-ui-white))",
925
+ height: "163",
926
+ rx: "6",
927
+ width: "278"
928
+ })
929
+ })
930
+ })]
931
+ }));
932
+ };
933
+ var FloatingPopupIcon = function FloatingPopupIcon(_ref2) {
934
+ var other = Object.assign({}, (_objectDestructuringEmpty(_ref2), _ref2));
935
+ return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$5(_objectSpread$5({
936
+ fill: "none",
937
+ height: "163",
938
+ viewBox: "0 0 278 163",
939
+ width: "278",
940
+ xmlns: "http://www.w3.org/2000/svg"
941
+ }, other), {}, {
942
+ children: [/*#__PURE__*/jsxRuntime.jsxs("g", {
943
+ clipPath: "url(#clip0_9047_10870)",
944
+ children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
945
+ fill: "rgb(var(--neeto-ui-white))",
946
+ height: "163",
947
+ rx: "6",
948
+ width: "278"
949
+ }), /*#__PURE__*/jsxRuntime.jsx("mask", {
950
+ fill: "rgb(var(--neeto-ui-white))",
951
+ id: "path-3-inside-1_9047_10870",
952
+ children: /*#__PURE__*/jsxRuntime.jsx("path", {
953
+ d: "M0 0H305V20H0V0Z"
954
+ })
955
+ }), /*#__PURE__*/jsxRuntime.jsx("path", {
956
+ d: "M0 0H305V20H0V0Z",
957
+ fill: "rgb(var(--neeto-ui-white))"
958
+ }), /*#__PURE__*/jsxRuntime.jsx("path", {
959
+ d: "M305 19H0V21H305V19Z",
960
+ fill: "currentColor",
961
+ mask: "url(#path-3-inside-1_9047_10870)"
962
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
963
+ cx: "10.5963",
964
+ cy: "10.4322",
965
+ fill: "#FD5350",
966
+ r: "2.30723"
967
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
968
+ cx: "18.1432",
969
+ cy: "10.4322",
970
+ fill: "#FEB33A",
971
+ r: "2.30723"
972
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
973
+ cx: "25.69",
974
+ cy: "10.4322",
975
+ fill: "#2CC146",
976
+ r: "2.30723"
977
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
978
+ fill: "currentColor",
979
+ height: "3",
980
+ opacity: "0.78",
981
+ rx: "1.5",
982
+ width: "84.6936",
983
+ x: "145",
984
+ y: "63"
985
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
986
+ fill: "currentColor",
987
+ height: "3",
988
+ opacity: "0.78",
989
+ rx: "1.5",
990
+ width: "89",
991
+ x: "145",
992
+ y: "70"
993
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
994
+ fill: "currentColor",
995
+ height: "3",
996
+ opacity: "0.78",
997
+ rx: "1.5",
998
+ width: "49",
999
+ x: "145",
1000
+ y: "77"
1001
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1002
+ fill: "currentColor",
1003
+ height: "3",
1004
+ opacity: "0.78",
1005
+ rx: "1.5",
1006
+ width: "84.6936",
1007
+ x: "36",
1008
+ y: "111"
1009
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1010
+ fill: "currentColor",
1011
+ height: "3",
1012
+ opacity: "0.78",
1013
+ rx: "1.5",
1014
+ width: "89",
1015
+ x: "36",
1016
+ y: "118"
1017
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1018
+ fill: "currentColor",
1019
+ height: "3",
1020
+ opacity: "0.78",
1021
+ rx: "1.5",
1022
+ width: "25.8387",
1023
+ x: "36",
1024
+ y: "125"
1025
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1026
+ fill: "currentColor",
1027
+ height: "35",
1028
+ width: "96",
1029
+ x: "36",
1030
+ y: "57"
1031
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1032
+ fill: "currentColor",
1033
+ height: "35",
1034
+ width: "95",
1035
+ x: "145",
1036
+ y: "102"
1037
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1038
+ fill: "currentColor",
1039
+ height: "26",
1040
+ width: "204",
1041
+ x: "36",
1042
+ y: "20"
1043
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1044
+ fill: "currentColor",
1045
+ height: "14",
1046
+ width: "204",
1047
+ x: "36",
1048
+ y: "148"
1049
+ })]
1050
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1051
+ height: "162",
1052
+ rx: "5.5",
1053
+ stroke: "rgb(var(--neeto-ui-gray-300))",
1054
+ width: "277",
1055
+ x: "0.5",
1056
+ y: "0.5"
1057
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1058
+ fill: "#008068",
1059
+ height: "18",
1060
+ rx: "9",
1061
+ width: "69",
1062
+ x: "194",
1063
+ y: "134"
1064
+ }), /*#__PURE__*/jsxRuntime.jsx("defs", {
1065
+ children: /*#__PURE__*/jsxRuntime.jsx("clipPath", {
1066
+ id: "clip0_9047_10870",
1067
+ children: /*#__PURE__*/jsxRuntime.jsx("rect", {
1068
+ fill: "rgb(var(--neeto-ui-white))",
1069
+ height: "163",
1070
+ rx: "6",
1071
+ width: "278"
1072
+ })
1073
+ })
1074
+ })]
1075
+ }));
1076
+ };
1077
+ var ElementPopupIcon = function ElementPopupIcon(_ref3) {
1078
+ var other = Object.assign({}, (_objectDestructuringEmpty(_ref3), _ref3));
1079
+ return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$5(_objectSpread$5({
1080
+ fill: "none",
1081
+ height: "163",
1082
+ viewBox: "0 0 278 163",
1083
+ width: "278",
1084
+ xmlns: "http://www.w3.org/2000/svg"
1085
+ }, other), {}, {
1086
+ children: [/*#__PURE__*/jsxRuntime.jsxs("g", {
1087
+ clipPath: "url(#clip0_9047_10869)",
1088
+ children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
1089
+ fill: "rgb(var(--neeto-ui-white))",
1090
+ height: "163",
1091
+ rx: "6",
1092
+ width: "278"
1093
+ }), /*#__PURE__*/jsxRuntime.jsx("mask", {
1094
+ fill: "rgb(var(--neeto-ui-white))",
1095
+ id: "path-3-inside-1_9047_10869",
1096
+ children: /*#__PURE__*/jsxRuntime.jsx("path", {
1097
+ d: "M0 0h305v20H0z"
1098
+ })
1099
+ }), /*#__PURE__*/jsxRuntime.jsx("path", {
1100
+ d: "M0 0h305v20H0z",
1101
+ fill: "rgb(var(--neeto-ui-white))"
1102
+ }), /*#__PURE__*/jsxRuntime.jsx("path", {
1103
+ d: "M305 19H0v2h305z",
1104
+ fill: "currentColor",
1105
+ mask: "url(#path-3-inside-1_9047_10869)"
1106
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
1107
+ cx: "10.596",
1108
+ cy: "10.432",
1109
+ fill: "#FD5350",
1110
+ r: "2.307"
1111
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
1112
+ cx: "18.143",
1113
+ cy: "10.432",
1114
+ fill: "#FEB33A",
1115
+ r: "2.307"
1116
+ }), /*#__PURE__*/jsxRuntime.jsx("circle", {
1117
+ cx: "25.69",
1118
+ cy: "10.432",
1119
+ fill: "#2CC146",
1120
+ r: "2.307"
1121
+ })]
1122
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1123
+ height: "162",
1124
+ rx: "5.5",
1125
+ stroke: "rgb(var(--neeto-ui-gray-300))",
1126
+ width: "277",
1127
+ x: "0.5",
1128
+ y: "0.5"
1129
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1130
+ fill: "currentColor",
1131
+ height: "3.944",
1132
+ opacity: "0.78",
1133
+ rx: "1.972",
1134
+ width: "85",
1135
+ x: "135",
1136
+ y: "58.461"
1137
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1138
+ fill: "currentColor",
1139
+ height: "3.944",
1140
+ opacity: "0.78",
1141
+ rx: "1.972",
1142
+ width: "89",
1143
+ x: "135",
1144
+ y: "66.352"
1145
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1146
+ fill: "#008068",
1147
+ height: "7",
1148
+ rx: "3.5",
1149
+ width: "38",
1150
+ x: "135",
1151
+ y: "74"
1152
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1153
+ fill: "currentColor",
1154
+ height: "3.944",
1155
+ opacity: "0.78",
1156
+ rx: "1.972",
1157
+ width: "85",
1158
+ x: "135",
1159
+ y: "100.859"
1160
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1161
+ fill: "currentColor",
1162
+ height: "3.944",
1163
+ opacity: "0.78",
1164
+ rx: "1.972",
1165
+ width: "89",
1166
+ x: "135",
1167
+ y: "108.75"
1168
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1169
+ fill: "currentColor",
1170
+ height: "3.944",
1171
+ opacity: "0.78",
1172
+ rx: "1.972",
1173
+ width: "26",
1174
+ x: "135",
1175
+ y: "116.641"
1176
+ }), /*#__PURE__*/jsxRuntime.jsx("path", {
1177
+ d: "M36 52h88v34H36zM36 20h204v28H36zM240 162H36v-28h204zM36 90h88v41H36z",
1178
+ fill: "currentColor"
1179
+ }), /*#__PURE__*/jsxRuntime.jsx("defs", {
1180
+ children: /*#__PURE__*/jsxRuntime.jsx("clipPath", {
1181
+ id: "clip0_9047_10869",
1182
+ children: /*#__PURE__*/jsxRuntime.jsx("rect", {
1183
+ fill: "rgb(var(--neeto-ui-white))",
1184
+ height: "163",
1185
+ rx: "6",
1186
+ width: "278"
1187
+ })
1188
+ })
1189
+ })]
1190
+ }));
1191
+ };
1192
+
1193
+ var EMBED_OPTIONS = {
1194
+ INLINE: "inline",
1195
+ FLOATING_POPUP: "floatingPopup",
1196
+ ELEMENT_POPUP: "elementPopup",
1197
+ IFRAME: "iframe"
1198
+ };
1199
+ var EMBED_ICONS = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, InlineEmbedIcon), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopupIcon), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopupIcon), EMBED_OPTIONS.IFRAME, InlineEmbedIcon);
1200
+ var DEFAULT_CUSTOMIZATION = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, {
1201
+ width: 100,
1202
+ height: 100,
1203
+ elementSelector: "inline-embed-container"
1204
+ }), EMBED_OPTIONS.FLOATING_POPUP, {
1205
+ showIcon: false,
1206
+ btnText: "Open",
1207
+ btnColor: "#008068",
1208
+ btnTextColor: "#fff",
1209
+ btnPosition: "bottomRight"
1210
+ }), EMBED_OPTIONS.ELEMENT_POPUP, {
1211
+ elementSelector: "open-popup-button"
1212
+ }), EMBED_OPTIONS.IFRAME, {
1213
+ height: 100,
1214
+ width: 100,
1215
+ iframeTitle: "Iframe embed"
1216
+ });
1217
+ var EMBED_CUSTOMIZATION_COMPONENTS = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, Inline$1), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopup$1), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopup$1), EMBED_OPTIONS.IFRAME, Iframe$1);
1218
+ var EMBED_TITLES = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, i18next.t("neetoMolecules.productEmbed.inline.title")), EMBED_OPTIONS.FLOATING_POPUP, i18next.t("neetoMolecules.productEmbed.floatingPopup.title")), EMBED_OPTIONS.ELEMENT_POPUP, i18next.t("neetoMolecules.productEmbed.elementPopup.title")), EMBED_OPTIONS.IFRAME, i18next.t("neetoMolecules.productEmbed.iframe.title"));
1219
+ var SUPPORTED_LANGUAGES = [{
1220
+ value: "html",
1221
+ label: i18next.t("neetoMolecules.productEmbed.language.html")
1222
+ }, {
1223
+ value: "react",
1224
+ label: i18next.t("neetoMolecules.productEmbed.language.react")
1225
+ }];
1226
+ var SCRIPT_ID = "embed-script";
1227
+ var TAB_STRING = " ";
1228
+ var SWITCH_OPTIONS = {
1229
+ dynamicHeight: {
1230
+ label: i18next.t("neetoMolecules.productEmbed.dynamicHeight")
1231
+ },
1232
+ hideTitle: {
1233
+ label: i18next.t("neetoMolecules.productEmbed.hideTitle")
1234
+ },
1235
+ alignContentLeft: {
1236
+ label: i18next.t("neetoMolecules.productEmbed.alignContentLeft")
1237
+ },
1238
+ transparentBackground: {
1239
+ label: i18next.t("neetoMolecules.productEmbed.transparentBackground")
1240
+ }
1241
+ };
1242
+
1243
+ var Code = function Code(_ref) {
1244
+ var id = _ref.id,
1245
+ selectedEmbed = _ref.selectedEmbed,
1246
+ embedScriptLink = _ref.embedScriptLink,
1247
+ extraArgs = _ref.extraArgs,
1248
+ inlineWrapperStyle = _ref.inlineWrapperStyle,
1249
+ iframeStyle = _ref.iframeStyle,
1250
+ supportedLanguages = _ref.supportedLanguages,
1251
+ customization = _ref.customization;
1252
+ var _useTranslation = reactI18next.useTranslation(),
1253
+ t = _useTranslation.t;
1254
+ var supportedLanguagesOptions = neetoCist.filterBy({
1255
+ value: function value(_value) {
1256
+ return supportedLanguages === null || supportedLanguages === void 0 ? void 0 : supportedLanguages.includes(_value);
1257
+ }
1258
+ }, SUPPORTED_LANGUAGES);
1259
+ var _useState = React.useState(supportedLanguagesOptions[0].value),
1260
+ _useState2 = _slicedToArray(_useState, 2),
1261
+ selectedLanguage = _useState2[0],
1262
+ setSelectedLanguage = _useState2[1];
1263
+ var code = generateCode({
1264
+ id: id,
1265
+ selectedLanguage: selectedLanguage,
1266
+ type: selectedEmbed,
1267
+ customization: customization,
1268
+ embedScriptLink: embedScriptLink,
1269
+ extraArgs: extraArgs,
1270
+ inlineWrapperStyle: inlineWrapperStyle,
1271
+ iframeStyle: iframeStyle
1272
+ });
1273
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
1274
+ className: "flex flex-col gap-3",
1275
+ children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
1276
+ className: "flex items-center justify-between",
1277
+ children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
1278
+ variant: "h4",
1279
+ children: t("neetoMolecules.productEmbed.embedCode")
1280
+ }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Select, {
1281
+ className: "w-28 flex-grow-0",
1282
+ options: supportedLanguagesOptions,
1283
+ size: "small",
1284
+ value: selectedLanguage,
1285
+ onChange: setSelectedLanguage
1286
+ })]
1287
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
1288
+ className: "relative w-full overflow-y-auto [&_.neeto-molecules-code-block]:!mt-0 [&_.neeto-molecules-code-block]:h-[13.4375rem] [&_.neeto-molecules-code-block]:text-sm",
1289
+ "data-testid": "embed-code-block",
1290
+ children: /*#__PURE__*/jsxRuntime.jsx(v2_Codeblock, {
1291
+ code: code,
1292
+ codeblockProps: {
1293
+ "data-testid": "".concat(selectedLanguage, "-code-block")
1294
+ },
1295
+ copyButtonProps: {
1296
+ variant: "default",
1297
+ label: t("neetoMolecules.productEmbed.copyCode")
1298
+ }
1299
+ })
1300
+ })]
1301
+ });
1302
+ };
1303
+
1304
+ function ownKeys$4(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; }
1305
+ function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1306
+ var FloatingPopupPlaceholderImage = function FloatingPopupPlaceholderImage(_ref) {
1307
+ var other = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
1308
+ return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$4(_objectSpread$4({
1309
+ fill: "none",
1310
+ height: "518",
1311
+ viewBox: "0 0 796 518",
1312
+ width: "796",
1313
+ xmlns: "http://www.w3.org/2000/svg"
1314
+ }, other), {}, {
1315
+ children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
1316
+ fill: "currentColor",
1317
+ height: "12.706",
1318
+ opacity: "0.78",
1319
+ rx: "6.353",
1320
+ width: "358.702",
1321
+ x: "406.645",
1322
+ y: "152.109"
1323
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1324
+ fill: "currentColor",
1325
+ height: "12.706",
1326
+ opacity: "0.78",
1327
+ rx: "6.353",
1328
+ width: "376.941",
1329
+ x: "406.645",
1330
+ y: "181.758"
1331
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1332
+ fill: "currentColor",
1333
+ height: "12.706",
1334
+ opacity: "0.78",
1335
+ rx: "6.353",
1336
+ width: "207.529",
1337
+ x: "406.645",
1338
+ y: "211.406"
1339
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1340
+ fill: "currentColor",
1341
+ height: "12.706",
1342
+ opacity: "0.78",
1343
+ rx: "6.353",
1344
+ width: "358.702",
1345
+ y: "333.414"
1346
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1347
+ fill: "currentColor",
1348
+ height: "12.706",
1349
+ opacity: "0.78",
1350
+ rx: "6.353",
1351
+ width: "376.941",
1352
+ y: "363.062"
1353
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1354
+ fill: "currentColor",
1355
+ height: "12.706",
1356
+ opacity: "0.78",
1357
+ rx: "6.353",
1358
+ width: "109.435",
1359
+ y: "392.711"
1360
+ }), /*#__PURE__*/jsxRuntime.jsx("path", {
1361
+ d: "M0 127.203h374v148H0zM407 295h389v149H407zM0 .203h796v110H0zM0 460.203h796v59H0z",
1362
+ fill: "currentColor"
1363
+ })]
1364
+ }));
1365
+ };
1366
+ var ElementPopupPlaceholderImage = function ElementPopupPlaceholderImage(_ref2) {
1367
+ var other = Object.assign({}, (_objectDestructuringEmpty(_ref2), _ref2));
1368
+ return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$4(_objectSpread$4({
1369
+ fill: "none",
1370
+ height: "518",
1371
+ viewBox: "0 0 748 518",
1372
+ width: "748",
1373
+ xmlns: "http://www.w3.org/2000/svg"
1374
+ }, other), {}, {
1375
+ children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
1376
+ fill: "currentColor",
1377
+ height: "14.463",
1378
+ opacity: "0.78",
1379
+ rx: "7.231",
1380
+ width: "311.667",
1381
+ x: "363",
1382
+ y: "142.688"
1383
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1384
+ fill: "currentColor",
1385
+ height: "14.463",
1386
+ opacity: "0.78",
1387
+ rx: "7.231",
1388
+ width: "326.333",
1389
+ x: "363",
1390
+ y: "171.617"
1391
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1392
+ fill: "currentColor",
1393
+ height: "14.463",
1394
+ opacity: "0.78",
1395
+ rx: "7.231",
1396
+ width: "311.667",
1397
+ x: "363",
1398
+ y: "298.141"
1399
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1400
+ fill: "currentColor",
1401
+ height: "14.463",
1402
+ opacity: "0.78",
1403
+ rx: "7.231",
1404
+ width: "326.333",
1405
+ x: "363",
1406
+ y: "327.07"
1407
+ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
1408
+ fill: "currentColor",
1409
+ height: "14.463",
1410
+ opacity: "0.78",
1411
+ rx: "7.231",
1412
+ width: "95.333",
1413
+ x: "363",
1414
+ y: "356"
1415
+ }), /*#__PURE__*/jsxRuntime.jsx("path", {
1416
+ d: "M0 119h322.667v124.667H0zM0 0h748v104H0zM748 522.336H0V419.669h748zM0 258.328h322.667v150.333H0z",
1417
+ fill: "currentColor"
1418
+ })]
1419
+ }));
1420
+ };
1421
+
1422
+ var ElementPopup = function ElementPopup(_ref) {
1423
+ var iframeURL = _ref.iframeURL;
1424
+ var _useTranslation = reactI18next.useTranslation(),
1425
+ t = _useTranslation.t;
1426
+
1427
+ /**
1428
+ * Currently embed() function doesn't have an unembed handler.
1429
+ * When iframe link changes, we don't have an option to reinitiate it.
1430
+ * So we forcefully recreate the element with `key` and call embed() again
1431
+ */
1432
+ var elementSelectorId = React.useMemo(function () {
1433
+ return "popup-button-".concat(Math.random().toString().substring(2, 10));
1434
+ }, [iframeURL]);
1435
+ React.useEffect(function () {
1436
+ var _window$appName;
1437
+ var element = document.getElementById(elementSelectorId);
1438
+ if (!element) return;
1439
+ var appName = initializers.globalProps.appName.replace(/^neeto/i, "neeto");
1440
+ (_window$appName = window[appName]) === null || _window$appName === void 0 || _window$appName.embed(element, iframeURL);
1441
+ }, [iframeURL]);
1442
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
1443
+ className: "relative h-full w-full overflow-hidden",
1444
+ children: [/*#__PURE__*/jsxRuntime.jsx(ElementPopupPlaceholderImage, {
1445
+ className: "text-muted-foreground/20 absolute inset-0 h-auto w-full p-10"
1446
+ }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
1447
+ className: "absolute start-[48.5294117647%] top-[39.0804597701%]",
1448
+ "data-testid": "preview-element-popup-button",
1449
+ id: elementSelectorId,
1450
+ label: t("neetoMolecules.productEmbed.elementPopup.label")
1451
+ }, elementSelectorId)]
1452
+ });
1453
+ };
1454
+
1455
+ var FloatingPopup = function FloatingPopup(_ref) {
1456
+ var iframeURL = _ref.iframeURL,
1457
+ customization = _ref.customization;
1458
+ var btnTextColor = customization.btnTextColor,
1459
+ showIcon = customization.showIcon,
1460
+ btnText = customization.btnText,
1461
+ btnPosition = customization.btnPosition,
1462
+ btnColor = customization.btnColor,
1463
+ icon = customization.icon;
1464
+
1465
+ /**
1466
+ * Currently embed() function doesn't have an unembed handler.
1467
+ * When iframe link changes, we don't have an option to reinitiate it.
1468
+ * So we forcefully recreate the element with `key` and call embed() again
1469
+ */
1470
+ var elementSelectorId = React.useMemo(function () {
1471
+ return "popup-button-".concat(Math.random().toString().substring(2, 10));
1472
+ }, [iframeURL]);
1473
+ React.useEffect(function () {
1474
+ var _window$appName;
1475
+ var element = document.getElementById(elementSelectorId);
1476
+ if (!element) return;
1477
+ var appName = initializers.globalProps.appName.replace(/^neeto/i, "neeto");
1478
+ (_window$appName = window[appName]) === null || _window$appName === void 0 || _window$appName.embed(element, iframeURL);
1479
+ }, [iframeURL]);
1480
+ React.useEffect(function () {
1481
+ var btn = document.getElementById(elementSelectorId);
1482
+ btn.style.backgroundColor = btnColor;
1483
+ btn.style.color = btnTextColor;
1484
+ }, [btnColor, btnTextColor]);
1485
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
1486
+ className: "relative h-full w-full overflow-hidden",
1487
+ children: [/*#__PURE__*/jsxRuntime.jsx(FloatingPopupPlaceholderImage, {
1488
+ className: "text-muted-foreground/20 h-auto w-full p-10"
1489
+ }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
1490
+ "data-testid": "popup-preview-button",
1491
+ icon: icon && showIcon ? icon : null,
1492
+ iconPosition: "left",
1493
+ id: elementSelectorId,
1494
+ label: btnText,
1495
+ className: classnames("absolute bottom-0 m-4", {
1496
+ "start-0": btnPosition === "bottomLeft",
1497
+ "end-0": btnPosition === "bottomRight"
1498
+ })
1499
+ }, elementSelectorId)]
1500
+ });
1501
+ };
1502
+
1503
+ function useIframeHeightReset(iframeRef, dynamicHeight) {
1504
+ React.useEffect(function () {
1505
+ if (!(dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value) && iframeRef !== null && iframeRef !== void 0 && iframeRef.current) {
1506
+ iframeRef.current.style.height = "";
1507
+ }
1508
+ }, [dynamicHeight === null || dynamicHeight === void 0 ? void 0 : dynamicHeight.value, iframeRef]);
1509
+ }
1510
+
1511
+ function ownKeys$3(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; }
1512
+ function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1513
+ var Iframe = function Iframe(_ref) {
1514
+ var iframeURL = _ref.iframeURL,
1515
+ customization = _ref.customization;
1516
+ var height = customization.height,
1517
+ width = customization.width,
1518
+ iframeTitle = customization.iframeTitle,
1519
+ dynamicHeight = customization.dynamicHeight,
1520
+ iframeAttributes = customization.iframeAttributes;
1521
+ var iframeRef = React.useRef(null);
1522
+ useIframeHeightReset(iframeRef, dynamicHeight);
1523
+ return /*#__PURE__*/jsxRuntime.jsx("iframe", _objectSpread$3(_objectSpread$3({}, _objectSpread$3(_objectSpread$3({}, iframeAttributes), {}, {
1524
+ height: height,
1525
+ width: width
1526
+ })), {}, {
1527
+ allowFullScreen: true,
1528
+ className: "m-auto border-0",
1529
+ ref: iframeRef,
1530
+ src: iframeURL,
1531
+ title: iframeTitle
1532
+ }));
1533
+ };
1534
+
1535
+ var Inline = function Inline(_ref) {
1536
+ var iframeURL = _ref.iframeURL,
1537
+ customization = _ref.customization;
1538
+ var dynamicHeight = customization.dynamicHeight;
1539
+ var iframeRef = React.useRef(null);
1540
+ useIframeHeightReset(iframeRef, dynamicHeight);
1541
+ return /*#__PURE__*/jsxRuntime.jsx("iframe", {
1542
+ className: "m-auto border-0",
1543
+ ref: iframeRef,
1544
+ src: iframeURL
1545
+ });
1546
+ };
1547
+
1548
+ function ownKeys$2(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; }
1549
+ function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1550
+ var buildQueryParams = function buildQueryParams() {
1551
+ var customization = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
1552
+ var existingQueryParams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
1553
+ var activeOptions = Object.keys(SWITCH_OPTIONS).reduce(function (acc, key) {
1554
+ var _customization$key;
1555
+ var value = (_customization$key = customization[key]) === null || _customization$key === void 0 ? void 0 : _customization$key.value;
1556
+ if (value) acc[key] = value;
1557
+ return acc;
1558
+ }, {});
1559
+ return _objectSpread$2(_objectSpread$2({}, existingQueryParams), activeOptions);
1560
+ };
1561
+ var buildIframeURL = function buildIframeURL(_ref) {
1562
+ var previewURL = _ref.previewURL,
1563
+ selectedEmbed = _ref.selectedEmbed,
1564
+ queryParams = _ref.queryParams,
1565
+ customization = _ref.customization;
1566
+ var url = new URL(previewURL);
1567
+ var params = buildQueryParams(customization, queryParams);
1568
+ Object.entries(params).forEach(function (_ref2) {
1569
+ var _ref3 = _slicedToArray(_ref2, 2),
1570
+ name = _ref3[0],
1571
+ value = _ref3[1];
1572
+ url.searchParams.append(name, value);
1573
+ });
1574
+ if (selectedEmbed === EMBED_OPTIONS.FLOATING_POPUP || selectedEmbed === EMBED_OPTIONS.ELEMENT_POPUP) {
1575
+ url.searchParams.set("dynamicHeight", "true");
1576
+ }
1577
+ return url.toString();
1578
+ };
1579
+
1580
+ var Preview = function Preview(_ref) {
1581
+ var isScriptLoading = _ref.isScriptLoading,
1582
+ selectedEmbed = _ref.selectedEmbed,
1583
+ id = _ref.id,
1584
+ customization = _ref.customization,
1585
+ _ref$customPreviewIfr = _ref.customPreviewIframeUrl,
1586
+ customPreviewIframeUrl = _ref$customPreviewIfr === void 0 ? "" : _ref$customPreviewIfr;
1587
+ var _useProductEmbedStore = useProductEmbedStore(shallow.useShallow(function (store) {
1588
+ return {
1589
+ queryParams: store["queryParams"]
1590
+ };
1591
+ })),
1592
+ queryParams = _useProductEmbedStore.queryParams;
1593
+ var preview = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, Inline), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopup), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopup), EMBED_OPTIONS.IFRAME, Iframe);
1594
+ var previewURL = customPreviewIframeUrl || "".concat(location.origin, "/embed/").concat(id);
1595
+ var iframeURL = buildIframeURL({
1596
+ previewURL: previewURL,
1597
+ selectedEmbed: selectedEmbed,
1598
+ queryParams: queryParams,
1599
+ customization: customization
1600
+ });
1601
+ var Component = preview[selectedEmbed];
1602
+ if (isScriptLoading) {
1603
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
1604
+ className: "flex min-h-0 flex-grow items-center justify-center overflow-y-auto",
1605
+ children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {})
1606
+ });
1607
+ }
1608
+ return /*#__PURE__*/jsxRuntime.jsx(v2_BrowserPreview, {
1609
+ className: "relative h-full [&>iframe]:absolute [&>iframe]:inset-0 [&>iframe]:h-full [&>iframe]:w-full",
1610
+ wrapperClassName: "pointer-events-auto h-full min-h-[18.75rem]",
1611
+ children: /*#__PURE__*/jsxRuntime.jsx(Component, {
1612
+ customization: customization,
1613
+ iframeURL: iframeURL
1614
+ })
1615
+ });
1616
+ };
1617
+
1618
+ function ownKeys$1(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; }
1619
+ function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1620
+ var EmbedRenderer = function EmbedRenderer(_ref) {
1621
+ var _options$iframe;
1622
+ var className = _ref.className,
1623
+ customEmbedScriptPath = _ref.customEmbedScriptPath,
1624
+ customPreviewIframeUrl = _ref.customPreviewIframeUrl,
1625
+ id = _ref.id,
1626
+ options = _ref.options,
1627
+ extraArgs = _ref.extraArgs,
1628
+ otherCustomizations = _ref.otherCustomizations,
1629
+ inlineWrapperStyle = _ref.inlineWrapperStyle,
1630
+ iframeStyle = _ref.iframeStyle,
1631
+ supportedLanguages = _ref.supportedLanguages,
1632
+ selectedEmbed = _ref.selectedEmbed;
1633
+ var _useTranslation = reactI18next.useTranslation(),
1634
+ t = _useTranslation.t;
1635
+ var location = reactRouterDom.useLocation();
1636
+ var _useState = React.useState(true),
1637
+ _useState2 = _slicedToArray(_useState, 2),
1638
+ isScriptLoading = _useState2[0],
1639
+ setIsScriptLoading = _useState2[1];
1640
+ var _useStateWithDependen = useStateWithDependency(function () {
1641
+ return buildDefaultCustomization(options);
1642
+ }, [options === null || options === void 0 || (_options$iframe = options.iframe) === null || _options$iframe === void 0 ? void 0 : _options$iframe.iframeUrl]),
1643
+ _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
1644
+ customizations = _useStateWithDependen2[0],
1645
+ setCustomizations = _useStateWithDependen2[1];
1646
+ var description = customizations[selectedEmbed].description;
1647
+ var customization = customizations[selectedEmbed];
1648
+ var CustomizationComponent = EMBED_CUSTOMIZATION_COMPONENTS[selectedEmbed];
1649
+ var embedScriptLink = customEmbedScriptPath || "".concat(window.location.protocol, "//").concat(window.location.host, "/javascript/embed.js");
1650
+ var loadScript = function loadScript() {
1651
+ var script = document.createElement("script");
1652
+ script.id = SCRIPT_ID;
1653
+ script.src = embedScriptLink;
1654
+ script.onload = function () {
1655
+ return setIsScriptLoading(false);
1656
+ };
1657
+ document.head.appendChild(script);
1658
+ };
1659
+ var updateCustomization = function updateCustomization(props) {
1660
+ return setCustomizations(function (prevState) {
1661
+ return _objectSpread$1(_objectSpread$1({}, prevState), {}, _defineProperty({}, selectedEmbed, ramda.mergeLeft(props, prevState[selectedEmbed])));
1662
+ });
1663
+ };
1664
+ React.useEffect(function () {
1665
+ var isScriptLoaded = document.getElementById(SCRIPT_ID);
1666
+ if (isScriptLoaded) setIsScriptLoading(false);else loadScript();
1667
+ }, []);
1668
+ return /*#__PURE__*/jsxRuntime.jsxs(v2_Container, {
1669
+ "data-testid": "embed-product",
1670
+ className: classnames("neeto-molecules-embed flex w-full flex-grow flex-col p-0 md:flex-row", className),
1671
+ children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
1672
+ className: "md:border-border flex w-full shrink-0 flex-col items-start overflow-y-auto px-5 py-8 md:h-full md:max-w-[25rem] md:overflow-y-auto md:border-e md:px-10 lg:max-w-[30.3125rem]",
1673
+ children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
1674
+ className: "mb-4",
1675
+ "data-testid": "back-to-embed-selection-button",
1676
+ icon: ArrowLeft,
1677
+ iconPosition: "left",
1678
+ label: t("neetoMolecules.productEmbed.backToEmbedSelection"),
1679
+ size: "sm",
1680
+ to: location.pathname,
1681
+ variant: "link"
1682
+ }), /*#__PURE__*/jsxRuntime.jsx(v2_Header, {
1683
+ className: "py-0",
1684
+ "data-testid": "".concat(neetoCist.hyphenate(selectedEmbed), "-embed-title"),
1685
+ title: EMBED_TITLES[selectedEmbed]
1686
+ }), description && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
1687
+ className: "mt-2",
1688
+ "data-testid": "".concat(neetoCist.hyphenate(selectedEmbed), "-description"),
1689
+ variant: "body2",
1690
+ children: description
1691
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
1692
+ className: "mt-4 flex w-full flex-col gap-y-6",
1693
+ children: /*#__PURE__*/jsxRuntime.jsxs("div", {
1694
+ className: "flex flex-col gap-y-6",
1695
+ children: [/*#__PURE__*/jsxRuntime.jsx(Code, {
1696
+ customization: customization,
1697
+ embedScriptLink: embedScriptLink,
1698
+ extraArgs: extraArgs,
1699
+ id: id,
1700
+ iframeStyle: iframeStyle,
1701
+ inlineWrapperStyle: inlineWrapperStyle,
1702
+ selectedEmbed: selectedEmbed,
1703
+ supportedLanguages: supportedLanguages
1704
+ }), /*#__PURE__*/jsxRuntime.jsx(CustomizationComponent, {
1705
+ customization: customization,
1706
+ otherCustomizations: otherCustomizations,
1707
+ updateCustomization: updateCustomization
1708
+ })]
1709
+ })
1710
+ })]
1711
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
1712
+ className: "bg-muted/40 flex min-h-dvh w-full min-w-0 flex-col gap-3 overflow-y-auto p-6 md:h-full md:min-h-0 md:flex-grow",
1713
+ children: /*#__PURE__*/jsxRuntime.jsx(Preview, {
1714
+ customPreviewIframeUrl: customPreviewIframeUrl,
1715
+ customization: customization,
1716
+ id: id,
1717
+ isScriptLoading: isScriptLoading,
1718
+ selectedEmbed: selectedEmbed
1719
+ })
1720
+ })]
1721
+ });
1722
+ };
1723
+
1724
+ 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; }
1725
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
1726
+ var EmbedSelector = function EmbedSelector(_ref) {
1727
+ var options = _ref.options,
1728
+ goBackLink = _ref.goBackLink,
1729
+ title = _ref.title,
1730
+ titleHelpPopoverProps = _ref.titleHelpPopoverProps,
1731
+ subTitleHelpPopoverProps = _ref.subTitleHelpPopoverProps;
1732
+ var _useTranslation = reactI18next.useTranslation(),
1733
+ t = _useTranslation.t;
1734
+ var history = reactRouterDom.useHistory();
1735
+ var location = reactRouterDom.useLocation();
1736
+ return /*#__PURE__*/jsxRuntime.jsxs(v2_Container, {
1737
+ className: "neeto-molecules-embed-landing-page py-8",
1738
+ children: [goBackLink && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
1739
+ className: "mb-4",
1740
+ "data-testid": "back-button",
1741
+ icon: ArrowLeft,
1742
+ iconPosition: "left",
1743
+ label: t("neetoMolecules.productEmbed.backToShare"),
1744
+ size: "sm",
1745
+ to: goBackLink,
1746
+ variant: "link"
1747
+ }), /*#__PURE__*/jsxRuntime.jsx(v2_Header, {
1748
+ titleHelpPopoverProps: titleHelpPopoverProps,
1749
+ className: "py-0",
1750
+ "data-testid": "embed-selector-header",
1751
+ title: t("neetoMolecules.productEmbed.title")
1752
+ }), /*#__PURE__*/jsxRuntime.jsxs("div", {
1753
+ className: "mx-auto w-full max-w-5xl py-6 md:py-10",
1754
+ children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Typography, {
1755
+ className: "mb-2",
1756
+ variant: "h2",
1757
+ children: [title || t("neetoMolecules.productEmbed.embedSelectionTitle", {
1758
+ productName: initializers.globalProps.appName
1759
+ }), neetoCist.isPresent(subTitleHelpPopoverProps) && /*#__PURE__*/jsxRuntime.jsx(v2_HelpPopover, _objectSpread(_objectSpread({}, subTitleHelpPopoverProps), {}, {
1760
+ className: classnames("ml-2 align-middle", subTitleHelpPopoverProps === null || subTitleHelpPopoverProps === void 0 ? void 0 : subTitleHelpPopoverProps.className)
1761
+ }))]
1762
+ }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
1763
+ className: "mb-8",
1764
+ variant: "body1",
1765
+ children: t("neetoMolecules.productEmbed.embedSelectionDescription")
1766
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
1767
+ className: "grid w-full grid-cols-1 flex-wrap gap-6 md:grid-cols-3",
1768
+ children: Object.entries(options).map(function (_ref2) {
1769
+ var _ref3 = _slicedToArray(_ref2, 2),
1770
+ key = _ref3[0],
1771
+ _ref3$ = _ref3[1],
1772
+ label = _ref3$.label,
1773
+ description = _ref3$.description,
1774
+ embedIcon = _ref3$.embedIcon;
1775
+ var EmbedIcon = embedIcon || EMBED_ICONS[key];
1776
+ return /*#__PURE__*/jsxRuntime.jsxs("button", {
1777
+ className: "border-border bg-background outline-background hover:border-primary hover:outline-primary flex w-full flex-col rounded-xl border p-6 text-start outline outline-1 transition-all motion-reduce:transition-none",
1778
+ "data-testid": "embed-selector-card-".concat(neetoCist.hyphenate(key)),
1779
+ onClick: reactUtils.handleMetaClick(history, "".concat(location.pathname, "?type=").concat(neetoCist.hyphenate(key))),
1780
+ children: [/*#__PURE__*/jsxRuntime.jsx("span", {
1781
+ className: "mb-6 block",
1782
+ children: /*#__PURE__*/jsxRuntime.jsx(EmbedIcon, {
1783
+ className: "text-muted-foreground/30 h-auto w-full max-w-72"
1784
+ })
1785
+ }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
1786
+ className: "mb-2",
1787
+ variant: "h4",
1788
+ children: label
1789
+ }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
1790
+ variant: "body2",
1791
+ children: description
1792
+ })]
1793
+ }, key);
1794
+ })
1795
+ })]
1796
+ })]
1797
+ });
1798
+ };
1799
+
1800
+ var ProductEmbed = function ProductEmbed(_ref) {
1801
+ var title = _ref.title,
1802
+ _ref$titleHelpPopover = _ref.titleHelpPopoverProps,
1803
+ titleHelpPopoverProps = _ref$titleHelpPopover === void 0 ? {} : _ref$titleHelpPopover,
1804
+ _ref$subTitleHelpPopo = _ref.subTitleHelpPopoverProps,
1805
+ subTitleHelpPopoverProps = _ref$subTitleHelpPopo === void 0 ? {} : _ref$subTitleHelpPopo,
1806
+ _ref$className = _ref.className,
1807
+ className = _ref$className === void 0 ? "" : _ref$className,
1808
+ _ref$customEmbedScrip = _ref.customEmbedScriptPath,
1809
+ customEmbedScriptPath = _ref$customEmbedScrip === void 0 ? "" : _ref$customEmbedScrip,
1810
+ _ref$customPreviewIfr = _ref.customPreviewIframeUrl,
1811
+ customPreviewIframeUrl = _ref$customPreviewIfr === void 0 ? "" : _ref$customPreviewIfr,
1812
+ _ref$goBackLink = _ref.goBackLink,
1813
+ goBackLink = _ref$goBackLink === void 0 ? "" : _ref$goBackLink,
1814
+ id = _ref.id,
1815
+ _ref$isQueryParamsEna = _ref.isQueryParamsEnabled,
1816
+ isQueryParamsEnabled = _ref$isQueryParamsEna === void 0 ? false : _ref$isQueryParamsEna,
1817
+ _ref$queryParamsProps = _ref.queryParamsProps,
1818
+ queryParamsProps = _ref$queryParamsProps === void 0 ? {} : _ref$queryParamsProps,
1819
+ _ref$options = _ref.options,
1820
+ options = _ref$options === void 0 ? {} : _ref$options,
1821
+ _ref$extraArgs = _ref.extraArgs,
1822
+ extraArgs = _ref$extraArgs === void 0 ? {} : _ref$extraArgs,
1823
+ _ref$otherCustomizati = _ref.otherCustomizations,
1824
+ otherCustomizations = _ref$otherCustomizati === void 0 ? neetoCist.noop : _ref$otherCustomizati,
1825
+ _ref$inlineWrapperSty = _ref.inlineWrapperStyle,
1826
+ inlineWrapperStyle = _ref$inlineWrapperSty === void 0 ? "height: 90vh; width: 100%;" : _ref$inlineWrapperSty,
1827
+ _ref$iframeStyle = _ref.iframeStyle,
1828
+ iframeStyle = _ref$iframeStyle === void 0 ? "height: 100%; width: 100%;" : _ref$iframeStyle,
1829
+ _ref$supportedLanguag = _ref.supportedLanguages,
1830
+ supportedLanguages = _ref$supportedLanguag === void 0 ? ["html"] : _ref$supportedLanguag;
1831
+ var _useLocation = reactRouterDom.useLocation(),
1832
+ search = _useLocation.search;
1833
+ var queryParams = new URLSearchParams(search);
1834
+ var selectedEmbed = toCamelCasedString(queryParams.get("type"));
1835
+ var _useProductEmbedStore = useProductEmbedStore(shallow.useShallow(function (store) {
1836
+ return {
1837
+ setProductEmbedState: store["setProductEmbedState"]
1838
+ };
1839
+ })),
1840
+ setProductEmbedState = _useProductEmbedStore.setProductEmbedState;
1841
+ React.useEffect(function () {
1842
+ setProductEmbedState({
1843
+ isQueryParamsEnabled: isQueryParamsEnabled,
1844
+ queryParamsProps: queryParamsProps
1845
+ });
1846
+ }, []);
1847
+ return selectedEmbed ? /*#__PURE__*/jsxRuntime.jsx(EmbedRenderer, {
1848
+ className: className,
1849
+ customEmbedScriptPath: customEmbedScriptPath,
1850
+ customPreviewIframeUrl: customPreviewIframeUrl,
1851
+ extraArgs: extraArgs,
1852
+ id: id,
1853
+ iframeStyle: iframeStyle,
1854
+ inlineWrapperStyle: inlineWrapperStyle,
1855
+ options: options,
1856
+ otherCustomizations: otherCustomizations,
1857
+ queryParamsProps: queryParamsProps,
1858
+ selectedEmbed: selectedEmbed,
1859
+ supportedLanguages: supportedLanguages
1860
+ }) : /*#__PURE__*/jsxRuntime.jsx(EmbedSelector, {
1861
+ goBackLink: goBackLink,
1862
+ options: options,
1863
+ subTitleHelpPopoverProps: subTitleHelpPopoverProps,
1864
+ title: title,
1865
+ titleHelpPopoverProps: titleHelpPopoverProps
1866
+ });
1867
+ };
1868
+
1869
+ module.exports = ProductEmbed;
1870
+ //# sourceMappingURL=ProductEmbed.js.map