@bigbinary/neeto-thank-you-frontend 2.0.4 → 2.1.1

package/dist/ConfigureThankYou.js

@@ -1,16 +1,16 @@
-import * as React from 'react';
-import React__default, { useState, useEffect, useRef } from 'react';
 import { hyphenate, noop } from '@bigbinary/neeto-cist';
-import Scrollable from '@bigbinary/neeto-molecules/Scrollable';
-import { n, T as THANK_YOU_TEXT_ALIGNMENTS, S as SocialShare } from './SocialShare-e7e5efc6.js';
+import { n, T as THANK_YOU_TEXT_ALIGNMENTS, S as SocialShare } from './SocialShare-4ece80cd.js';
+import { u as useShowThankYouConfiguration, _ as _defineProperty, a as useUpdateThankYouConfiguration } from './useThankYouConfigurationApi-5b45610e.js';
+import * as React from 'react';
+import { useState, useEffect, memo, useRef } from 'react';
 import classNames from 'classnames';
+import MobilePreviewHeader from '@bigbinary/neeto-molecules/MobilePreviewHeader';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import BlockNavigation from '@bigbinary/neetoui/formik/BlockNavigation';
 import NeetoUIForm from '@bigbinary/neetoui/formik/Form';
 import Radio from '@bigbinary/neetoui/formik/Radio';
 import { isEmpty } from 'ramda';
-import { u as useShowThankYouConfiguration, a as useUpdateThankYouConfiguration } from './useThankYouConfigurationApi-ed20746a.js';
 import { t } from 'i18next';
 import { useFormikContext } from 'formik';
 import FormikEditor from '@bigbinary/neeto-editor/FormikEditor';
@@ -19,28 +19,29 @@ import Input from '@bigbinary/neetoui/formik/Input';
 import Switch from '@bigbinary/neetoui/formik/Switch';
 import { useTranslation } from 'react-i18next';
 import { ImageUploader } from '@bigbinary/neeto-image-uploader-frontend';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Button from '@bigbinary/neetoui/Button';
 import Typography from '@bigbinary/neetoui/Typography';
 import Modal from '@bigbinary/neetoui/Modal';
 import EditorContent from '@bigbinary/neeto-editor/EditorContent';
-import { B as BrandingInfo } from './BrandingInfo-da0b773a.js';
+import { B as BrandingInfo } from './BrandingInfo-cb3c7c87.js';
 import Link from '@bigbinary/neeto-icons/Link';
+import NeetoUIHeader from '@bigbinary/neeto-molecules/Header';
 import { isEditorEmpty } from '@bigbinary/neeto-editor/utils';
 import * as yup from 'yup';
-import NeetoUIHeader from '@bigbinary/neeto-molecules/Header';
 import '@tanstack/react-query';
 import 'axios';
-import './query-ab526f47.js';
+import './query-3e439d01.js';
 import './utils.js';
 import '@bigbinary/neeto-commons-frontend/utils';
 import './constants.js';
 import '@bigbinary/neeto-commons-frontend/initializers';
 
-var css = ".neeto-thank-you-configuration-radio__item{align-items:flex-start;background-color:rgb(var(--neeto-ui-white));border:1px solid rgb(var(--neeto-ui-gray-300));border-radius:var(--neeto-ui-rounded);padding:12px 16px}.neeto-thank-you-configuration-radio__item.neeto-ui-radio__item:not(:last-child){margin-right:0!important}.neeto-thank-you-configuration-radio__item.neeto-ui-radio__item{align-items:start!important}.neeto-thank-you-configuration-radio__item.neeto-ui-radio__item .neeto-ui-radio{margin-top:3px}.neeto-thank-you-configuration-radio__item.active{background-color:rgb(var(--neeto-ui-primary-100));border:1.5px solid rgb(var(--neeto-ui-primary-800))}";
+var css = ".neeto-thank-you-configuration-radio__item{align-items:flex-start;background-color:rgb(var(--neeto-ui-white));border:1px solid rgb(var(--neeto-ui-gray-300));border-radius:var(--neeto-ui-rounded);padding:12px 16px}.neeto-thank-you-configuration-radio__item.neeto-ui-radio__item:not(:last-child){margin-right:0!important}.neeto-thank-you-configuration-radio__item.neeto-ui-radio__item{align-items:start!important}.neeto-thank-you-configuration-radio__item.neeto-ui-radio__item .neeto-ui-radio{margin-top:3px}.neeto-thank-you-configuration-radio__item.active{border:1.5px solid rgb(var(--neeto-ui-primary-800))}";
 n(css,{});
 
-const FORM_OPTIONS = {
+var FORM_OPTIONS = {
   customize: {
     label: t("neetoThankYou.thankYou.customize"),
     description: t("neetoThankYou.thankYou.customizeDescription"),
@@ -52,38 +53,77 @@ const FORM_OPTIONS = {
     kind: "redirect_to_url"
   }
 };
-const DEFAULT_IMAGE_PROPERTIES = {
+var DEFAULT_IMAGE_PROPERTIES = {
   imageSignedId: null,
   imageUrl: ""
 };
-const EXTERNAL_URL_PREFIX = "https://";
+var EXTERNAL_URL_PREFIX = "https://";
 
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
       }
     }
-    return target;
-  };
-  return _extends$1.apply(this, arguments);
+    return a;
+  }
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
 
-const IMAGE_SIZE_LIMIT = 1; // MB
-const IMAGE_UPLOADER_CONFIG = {
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+var IMAGE_SIZE_LIMIT = 1; // MB
+var IMAGE_UPLOADER_CONFIG = {
   maxImageSize: IMAGE_SIZE_LIMIT
 };
 
-const Image = () => {
-  const {
-    setFieldValue,
-    values
-  } = useFormikContext();
-  const handleImageChange = image => {
+var Image = function Image() {
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue,
+    values = _useFormikContext.values;
+  var handleImageChange = function handleImageChange(image) {
     if (isEmpty(image.signedId)) {
       setFieldValue("imageUrl", "");
       setFieldValue("imageSignedId", null);
@@ -92,106 +132,122 @@ const Image = () => {
     setFieldValue("imageUrl", image.url);
     setFieldValue("imageSignedId", image.signedId);
   };
-  return /*#__PURE__*/React__default.createElement(ImageUploader, {
+  return /*#__PURE__*/jsx(ImageUploader, {
     className: "h-60",
-    key: values.imageUrl,
     src: values.imageUrl,
     uploadConfig: IMAGE_UPLOADER_CONFIG,
     onUploadComplete: handleImageChange
-  });
+  }, values.imageUrl);
 };
 
-const ResubmissionWarningModal = withT(_ref => {
-  let {
-    t,
-    isOpen,
-    setIsOpen,
-    uniqueSubmissionLink
-  } = _ref;
-  return /*#__PURE__*/React__default.createElement(Modal, {
-    isOpen,
-    onClose: () => setIsOpen(false)
-  }, /*#__PURE__*/React__default.createElement(Modal.Header, null, /*#__PURE__*/React__default.createElement(Typography, {
-    style: "h3",
-    weight: "semibold"
-  }, t("neetoThankYou.common.alert"), "!")), /*#__PURE__*/React__default.createElement(Modal.Body, null, t("neetoThankYou.thankYou.resubmissionWarning")), /*#__PURE__*/React__default.createElement(Modal.Footer, {
-    className: "space-x-2"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    label: t("neetoThankYou.common.ok"),
-    style: "tertiary",
-    onClick: () => setIsOpen(false)
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    label: t("neetoThankYou.thankYou.uniqueSubmissionLinkText"),
-    to: uniqueSubmissionLink
-  })));
+var ResubmissionWarningModal = withT(function (_ref) {
+  var t = _ref.t,
+    isOpen = _ref.isOpen,
+    setIsOpen = _ref.setIsOpen,
+    uniqueSubmissionLink = _ref.uniqueSubmissionLink;
+  return /*#__PURE__*/jsxs(Modal, {
+    isOpen: isOpen,
+    onClose: function onClose() {
+      return setIsOpen(false);
+    },
+    children: [/*#__PURE__*/jsx(Modal.Header, {
+      children: /*#__PURE__*/jsxs(Typography, {
+        style: "h3",
+        weight: "semibold",
+        children: [t("neetoThankYou.common.alert"), "!"]
+      })
+    }), /*#__PURE__*/jsx(Modal.Body, {
+      children: t("neetoThankYou.thankYou.resubmissionWarning")
+    }), /*#__PURE__*/jsxs(Modal.Footer, {
+      className: "space-x-2",
+      children: [/*#__PURE__*/jsx(Button, {
+        label: t("neetoThankYou.common.ok"),
+        style: "tertiary",
+        onClick: function onClick() {
+          return setIsOpen(false);
+        }
+      }), /*#__PURE__*/jsx(Button, {
+        label: t("neetoThankYou.thankYou.uniqueSubmissionLinkText"),
+        to: uniqueSubmissionLink
+      })]
+    })]
+  });
 });
 
-const Customize = _ref => {
-  let {
-    editorRef,
-    uniqueSubmissionEnabled,
-    hasImageUploader,
-    uniqueSubmissionLink,
-    entityId,
-    disableSocialShare,
-    disableSubmitAnotherResponse,
-    editorProps
-  } = _ref;
-  const [isUniqueSubmissionWarningModalOpen, setIsUniqueSubmissionWarningModalOpen] = useState(false);
-  const {
-    t
-  } = useTranslation();
-  const {
-    values,
-    setFieldValue
-  } = useFormikContext();
-  const {
-    data: {
-      thankYouConfiguration
-    } = {},
-    isFetching
-  } = useShowThankYouConfiguration({
-    entityId
-  });
-  useEffect(() => {
+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; }
+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), !0).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; }
+var Customize = function Customize(_ref) {
+  var editorRef = _ref.editorRef,
+    uniqueSubmissionEnabled = _ref.uniqueSubmissionEnabled,
+    hasImageUploader = _ref.hasImageUploader,
+    uniqueSubmissionLink = _ref.uniqueSubmissionLink,
+    entityId = _ref.entityId,
+    disableSocialShare = _ref.disableSocialShare,
+    disableSubmitAnotherResponse = _ref.disableSubmitAnotherResponse,
+    editorProps = _ref.editorProps;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isUniqueSubmissionWarningModalOpen = _useState2[0],
+    setIsUniqueSubmissionWarningModalOpen = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var _useShowThankYouConfi = useShowThankYouConfiguration({
+      entityId: entityId
+    }),
+    _useShowThankYouConfi2 = _useShowThankYouConfi.data,
+    _useShowThankYouConfi3 = _useShowThankYouConfi2 === void 0 ? {} : _useShowThankYouConfi2,
+    thankYouConfiguration = _useShowThankYouConfi3.thankYouConfiguration,
+    isFetching = _useShowThankYouConfi.isFetching;
+  useEffect(function () {
+    var _editorRef$current$ed;
     if (isFetching) return;
     setFieldValue("message", thankYouConfiguration.message);
-    editorRef.current.editor?.commands.setContent(thankYouConfiguration.message);
+    (_editorRef$current$ed = editorRef.current.editor) === null || _editorRef$current$ed === void 0 || _editorRef$current$ed.commands.setContent(thankYouConfiguration.message);
   }, [isFetching]);
-  const handleResubmitLinkChange = event => {
+  var handleResubmitLinkChange = function handleResubmitLinkChange(event) {
     uniqueSubmissionEnabled ? setIsUniqueSubmissionWarningModalOpen(true) : setFieldValue("showResubmitLink", event.target.checked);
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col gap-4"
-  }, hasImageUploader && /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col gap-2"
-  }, /*#__PURE__*/React__default.createElement(Label$1, null, t("neetoThankYou.thankYou.imageLabel")), /*#__PURE__*/React__default.createElement(Image, null)), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col gap-2"
-  }, /*#__PURE__*/React__default.createElement(FormikEditor, _extends$1({
-    required: true,
-    "data-cy": "thank-you-message-editor",
-    label: t("neetoThankYou.thankYou.messageLabel"),
-    name: "message",
-    ref: editorRef
-  }, editorProps))), !disableSocialShare && /*#__PURE__*/React__default.createElement(Switch, {
-    label: t("neetoThankYou.thankYou.socialShareIcons"),
-    name: "socialSharingEnabled"
-  }), !disableSubmitAnotherResponse && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Switch, {
-    label: t("neetoThankYou.thankYou.showResubmitLink"),
-    name: "showResubmitLink",
-    className: classNames({
-      "neeto-ui-switch--disabled": uniqueSubmissionEnabled
-    }),
-    onChange: handleResubmitLinkChange
-  }), values.showResubmitLink && /*#__PURE__*/React__default.createElement(Input, {
-    required: true,
-    label: t("neetoThankYou.thankYou.resubmitLinkText"),
-    name: "resubmitLinkText"
-  })), /*#__PURE__*/React__default.createElement(ResubmissionWarningModal, {
-    uniqueSubmissionLink,
-    isOpen: isUniqueSubmissionWarningModalOpen,
-    setIsOpen: setIsUniqueSubmissionWarningModalOpen
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col gap-4",
+    children: [hasImageUploader && /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col gap-2",
+      children: [/*#__PURE__*/jsx(Label$1, {
+        children: t("neetoThankYou.thankYou.imageLabel")
+      }), /*#__PURE__*/jsx(Image, {})]
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex flex-col gap-2",
+      children: /*#__PURE__*/jsx(FormikEditor, _objectSpread$1({
+        required: true,
+        "data-cy": "thank-you-message-editor",
+        label: t("neetoThankYou.thankYou.messageLabel"),
+        name: "message",
+        ref: editorRef
+      }, editorProps))
+    }), !disableSocialShare && /*#__PURE__*/jsx(Switch, {
+      label: t("neetoThankYou.thankYou.socialShareIcons"),
+      name: "socialSharingEnabled"
+    }), !disableSubmitAnotherResponse && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(Switch, {
+        label: t("neetoThankYou.thankYou.showResubmitLink"),
+        name: "showResubmitLink",
+        className: classNames({
+          "neeto-ui-switch--disabled": uniqueSubmissionEnabled
+        }),
+        onChange: handleResubmitLinkChange
+      }), values.showResubmitLink && /*#__PURE__*/jsx(Input, {
+        required: true,
+        label: t("neetoThankYou.thankYou.resubmitLinkText"),
+        name: "resubmitLinkText"
+      })]
+    }), /*#__PURE__*/jsx(ResubmissionWarningModal, {
+      uniqueSubmissionLink: uniqueSubmissionLink,
+      isOpen: isUniqueSubmissionWarningModalOpen,
+      setIsOpen: setIsUniqueSubmissionWarningModalOpen
+    })]
+  });
 };
 
 var _ellipse, _ellipse2, _ellipse3;
@@ -221,102 +277,123 @@ const SvgBrowserControls = props => /*#__PURE__*/React.createElement("svg", _ext
   ry: 5.859
 })));
 
-const MemoizedEditorContent = /*#__PURE__*/React__default.memo(EditorContent);
-const Preview = _ref => {
-  let {
-    socialHandles,
-    thankYouTextAlignment,
-    resubmitLink,
-    publicLinkId,
-    isPublished,
-    appName,
-    brandingInfo
-  } = _ref;
-  const {
-    values
-  } = useFormikContext();
-  const {
-    t
-  } = useTranslation();
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "mb-3 block md:hidden",
-    lineHeight: "normal",
-    style: "h3",
-    weight: "semibold"
-  }, t("neetoThankYou.thankYou.preview")), /*#__PURE__*/React__default.createElement("div", {
-    className: classNames("neeto-thank-you-configuration-preview", {
-      "neeto-thank-you-configuration-alignment--left": thankYouTextAlignment === THANK_YOU_TEXT_ALIGNMENTS.left,
-      "neeto-thank-you-configuration-alignment--center": thankYouTextAlignment === THANK_YOU_TEXT_ALIGNMENTS.center,
-      "pointer-events-none": !isPublished
-    })
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-thank-you-configuration-preview__browser-header"
-  }, /*#__PURE__*/React__default.createElement(SvgBrowserControls, null)), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-thank-you-configuration"
-  }, /*#__PURE__*/React__default.createElement("main", {
-    className: "neeto-thank-you-configuration__main"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-thank-you-configuration__box"
-  }, !isEmpty(values?.imageUrl) && /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-thank-you-configuration__img"
-  }, /*#__PURE__*/React__default.createElement("img", {
-    alt: "",
-    src: values.imageUrl
-  })), values?.message && /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-thank-you-configuration__description"
-  }, /*#__PURE__*/React__default.createElement(MemoizedEditorContent, {
-    content: values.message,
-    "data-cy": "preview-editor-content"
-  })), values?.showResubmitLink && /*#__PURE__*/React__default.createElement("a", {
-    className: "neeto-thank-you-configuration__resubmit",
-    href: resubmitLink
-  }, values?.resubmitLinkText ?? t("neetoThankYou.thankYou.resubmit")), values?.socialSharingEnabled && /*#__PURE__*/React__default.createElement(SocialShare, {
-    publicLinkId,
-    socialHandles
-  })))), values?.brandingEnabled && /*#__PURE__*/React__default.createElement(BrandingInfo, {
-    appName,
-    brandingInfo
-  })));
+var MemoizedEditorContent = /*#__PURE__*/memo(EditorContent);
+var Preview = function Preview(_ref) {
+  var _values$resubmitLinkT;
+  var socialHandles = _ref.socialHandles,
+    thankYouTextAlignment = _ref.thankYouTextAlignment,
+    resubmitLink = _ref.resubmitLink,
+    publicLinkId = _ref.publicLinkId,
+    isPublished = _ref.isPublished,
+    appName = _ref.appName,
+    brandingInfo = _ref.brandingInfo;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col",
+    children: [/*#__PURE__*/jsx(Typography, {
+      className: "mb-3 block md:hidden",
+      lineHeight: "normal",
+      style: "h3",
+      weight: "semibold",
+      children: t("neetoThankYou.thankYou.preview")
+    }), /*#__PURE__*/jsxs("div", {
+      className: classNames("neeto-thank-you-configuration-preview pointer-events-none", {
+        "neeto-thank-you-configuration-alignment--left": thankYouTextAlignment === THANK_YOU_TEXT_ALIGNMENTS.left,
+        "neeto-thank-you-configuration-alignment--center": thankYouTextAlignment === THANK_YOU_TEXT_ALIGNMENTS.center,
+        "pointer-events-none": !isPublished
+      }),
+      children: [/*#__PURE__*/jsx("div", {
+        className: "neeto-thank-you-configuration-preview__browser-header",
+        children: /*#__PURE__*/jsx(SvgBrowserControls, {})
+      }), /*#__PURE__*/jsx("div", {
+        className: "neeto-thank-you-configuration",
+        children: /*#__PURE__*/jsx("main", {
+          className: "neeto-thank-you-configuration__main",
+          children: /*#__PURE__*/jsxs("div", {
+            className: "neeto-thank-you-configuration__box",
+            children: [!isEmpty(values === null || values === void 0 ? void 0 : values.imageUrl) && /*#__PURE__*/jsx("div", {
+              className: "neeto-thank-you-configuration__img",
+              children: /*#__PURE__*/jsx("img", {
+                alt: "",
+                src: values.imageUrl
+              })
+            }), (values === null || values === void 0 ? void 0 : values.message) && /*#__PURE__*/jsx("div", {
+              className: "neeto-thank-you-configuration__description",
+              children: /*#__PURE__*/jsx(MemoizedEditorContent, {
+                content: values.message,
+                "data-cy": "preview-editor-content"
+              })
+            }), (values === null || values === void 0 ? void 0 : values.showResubmitLink) && /*#__PURE__*/jsx("a", {
+              className: "neeto-thank-you-configuration__resubmit",
+              href: resubmitLink,
+              children: (_values$resubmitLinkT = values === null || values === void 0 ? void 0 : values.resubmitLinkText) !== null && _values$resubmitLinkT !== void 0 ? _values$resubmitLinkT : t("neetoThankYou.thankYou.resubmit")
+            }), (values === null || values === void 0 ? void 0 : values.socialSharingEnabled) && /*#__PURE__*/jsx(SocialShare, {
+              publicLinkId: publicLinkId,
+              socialHandles: socialHandles
+            })]
+          })
+        })
+      }), (values === null || values === void 0 ? void 0 : values.brandingEnabled) && /*#__PURE__*/jsx(BrandingInfo, {
+        appName: appName,
+        brandingInfo: brandingInfo
+      })]
+    })]
+  });
 };
 
-const ExternalLink = () => {
-  const {
-    t
-  } = useTranslation();
-  return /*#__PURE__*/React__default.createElement(Input, {
+var ExternalLink = withT(function (_ref) {
+  var t = _ref.t;
+  return /*#__PURE__*/jsx(Input, {
     autoFocus: true,
     required: true,
+    className: "flex-grow-0",
     label: t("neetoThankYou.thankYou.link"),
     name: "redirectUrl",
     placeholder: EXTERNAL_URL_PREFIX,
-    prefix: /*#__PURE__*/React__default.createElement(Link, null)
+    prefix: /*#__PURE__*/jsx(Link, {})
   });
-};
+});
 
-const Label = _ref => {
-  let {
-    label,
-    description,
-    kind
-  } = _ref;
-  return /*#__PURE__*/React__default.createElement(Typography, {
+var Header = withT(function (_ref) {
+  var t = _ref.t,
+    breadcrumbs = _ref.breadcrumbs;
+  return /*#__PURE__*/jsx("div", {
+    className: "w-full",
+    children: /*#__PURE__*/jsx(NeetoUIHeader, {
+      breadcrumbs: breadcrumbs,
+      size: "small",
+      title: t("neetoThankYou.common.thankYou")
+    })
+  });
+});
+
+var Label = function Label(_ref) {
+  var label = _ref.label,
+    description = _ref.description,
+    kind = _ref.kind;
+  return /*#__PURE__*/jsxs(Typography, {
     className: "neeto-ui-text-gray-700",
-    "data-cy": `neeto-thank-you-configuration-${hyphenate(kind)}-label`,
+    "data-cy": "neeto-thank-you-configuration-".concat(hyphenate(kind), "-label"),
     style: "body2",
-    weight: "semibold"
-  }, label, /*#__PURE__*/React__default.createElement("span", {
-    className: "block text-xs font-normal leading-snug",
-    "data-cy": `neeto-thank-you-configuration-${hyphenate(kind)}-description`
-  }, description));
+    weight: "semibold",
+    children: [label, /*#__PURE__*/jsx("span", {
+      className: "block text-xs font-normal leading-snug",
+      "data-cy": "neeto-thank-you-configuration-".concat(hyphenate(kind), "-description"),
+      children: description
+    })]
+  });
 };
 
-const buildValidationSchema = function () {
-  let allowEmptyCustomMessage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+var buildValidationSchema = function buildValidationSchema() {
+  var allowEmptyCustomMessage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return yup.object().shape({
     kind: yup.string().required(),
-    message: yup.string().test("message", t("neetoThankYou.thankYou.validations.messageRequired"), value => allowEmptyCustomMessage || !isEditorEmpty(value)),
+    message: yup.string().test("message", t("neetoThankYou.thankYou.validations.messageRequired"), function (value) {
+      return allowEmptyCustomMessage || !isEditorEmpty(value);
+    }),
     socialSharingEnabled: yup.bool(),
     showResubmitLink: yup.bool(),
     resubmitLinkText: yup.string().when("showResubmitLink", {
@@ -333,199 +410,210 @@ const buildValidationSchema = function () {
   });
 };
 
-const Form = _ref => {
-  let {
-    socialHandles,
-    entityId,
-    publicLinkId,
-    hasImageUploader,
-    uniqueSubmissionEnabled,
-    uniqueSubmissionLink,
-    redirectToOnCancel,
-    thankYouTextAlignment,
-    resubmitLink,
-    isPublished,
-    disableSubmitAnotherResponse,
-    disableRadioSelection,
-    appName,
-    blockNavigation,
-    onConfigUpdateSuccess,
-    brandingInfo,
-    editorProps,
-    preview: CustomPreview,
-    allowEmptyCustomMessage
-  } = _ref;
-  const {
-    data: {
-      thankYouConfiguration
-    } = {},
-    isLoading
-  } = useShowThankYouConfiguration({
-    entityId
-  });
-  const {
-    mutate: updateThankYouConfiguration,
-    isPending: isUpdatingForm
-  } = useUpdateThankYouConfiguration();
-  const editorRef = useRef({
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Form = function Form(_ref) {
+  var socialHandles = _ref.socialHandles,
+    entityId = _ref.entityId,
+    publicLinkId = _ref.publicLinkId,
+    hasImageUploader = _ref.hasImageUploader,
+    uniqueSubmissionEnabled = _ref.uniqueSubmissionEnabled,
+    uniqueSubmissionLink = _ref.uniqueSubmissionLink,
+    redirectToOnCancel = _ref.redirectToOnCancel,
+    thankYouTextAlignment = _ref.thankYouTextAlignment,
+    resubmitLink = _ref.resubmitLink,
+    isPublished = _ref.isPublished,
+    disableSubmitAnotherResponse = _ref.disableSubmitAnotherResponse,
+    disableRadioSelection = _ref.disableRadioSelection,
+    appName = _ref.appName,
+    blockNavigation = _ref.blockNavigation,
+    onConfigUpdateSuccess = _ref.onConfigUpdateSuccess,
+    brandingInfo = _ref.brandingInfo,
+    editorProps = _ref.editorProps,
+    CustomPreview = _ref.preview,
+    allowEmptyCustomMessage = _ref.allowEmptyCustomMessage,
+    customHeader = _ref.customHeader,
+    breadcrumbs = _ref.breadcrumbs;
+  var _useShowThankYouConfi = useShowThankYouConfiguration({
+      entityId: entityId
+    }),
+    _useShowThankYouConfi2 = _useShowThankYouConfi.data,
+    _useShowThankYouConfi3 = _useShowThankYouConfi2 === void 0 ? {} : _useShowThankYouConfi2,
+    thankYouConfiguration = _useShowThankYouConfi3.thankYouConfiguration,
+    isLoading = _useShowThankYouConfi.isLoading;
+  var _useUpdateThankYouCon = useUpdateThankYouConfiguration(),
+    updateThankYouConfiguration = _useUpdateThankYouCon.mutate,
+    isUpdatingForm = _useUpdateThankYouCon.isPending;
+  var editorRef = useRef({
     editor: {}
   });
   if (isLoading) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React__default.createElement(PageLoader, null));
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(PageLoader, {})
+    });
   }
-  const resetEditor = () => editorRef.current.editor?.commands.setContent(thankYouConfiguration.message);
-  return /*#__PURE__*/React__default.createElement(NeetoUIForm, {
+  var resetEditor = function resetEditor() {
+    var _editorRef$current$ed;
+    return (_editorRef$current$ed = editorRef.current.editor) === null || _editorRef$current$ed === void 0 ? void 0 : _editorRef$current$ed.commands.setContent(thankYouConfiguration.message);
+  };
+  return /*#__PURE__*/jsx(NeetoUIForm, {
+    className: "h-full w-full",
     formikProps: {
       enableReinitialize: true,
-      initialValues: {
-        ...DEFAULT_IMAGE_PROPERTIES,
-        ...thankYouConfiguration
-      },
+      initialValues: _objectSpread(_objectSpread({}, DEFAULT_IMAGE_PROPERTIES), thankYouConfiguration),
       validationSchema: buildValidationSchema(allowEmptyCustomMessage),
-      onSubmit: values => updateThankYouConfiguration({
-        entityId,
-        payload: {
-          ...values,
-          image: values.imageSignedId
-        }
-      }, {
-        onSuccess: function () {
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
+      onSubmit: function onSubmit(values) {
+        return updateThankYouConfiguration({
+          entityId: entityId,
+          payload: _objectSpread(_objectSpread({}, values), {}, {
+            image: values.imageSignedId
+          })
+        }, {
+          onSuccess: function onSuccess() {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+            return onConfigUpdateSuccess(args, thankYouConfiguration);
           }
-          return onConfigUpdateSuccess(args, thankYouConfiguration);
-        }
-      })
-    }
-  }, _ref2 => {
-    let {
-      values
-    } = _ref2;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "grid grid-cols-1 gap-10 pb-6 md:grid-cols-2 md:gap-6"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "flex flex-col"
-    }, blockNavigation && /*#__PURE__*/React__default.createElement(BlockNavigation, null), !disableRadioSelection && /*#__PURE__*/React__default.createElement("div", {
-      className: "mb-6 w-full"
-    }, /*#__PURE__*/React__default.createElement(Radio, {
-      containerClassName: "grid grid-cols-1 sm:grid-cols-2 gap-6 items-stretch w-full",
-      name: "kind"
-    }, Object.values(FORM_OPTIONS).map(option => /*#__PURE__*/React__default.createElement(Radio.Item, {
-      key: option.kind,
-      label: /*#__PURE__*/React__default.createElement(Label, option),
-      name: "kind",
-      value: option.kind,
-      className: classNames("neeto-thank-you-configuration-radio__item", {
-        active: values.kind === option.kind
-      })
-    })))), values.kind === FORM_OPTIONS.customize.kind ? /*#__PURE__*/React__default.createElement(Customize, {
-      disableSubmitAnotherResponse,
-      editorProps,
-      editorRef,
-      entityId,
-      hasImageUploader,
-      uniqueSubmissionEnabled,
-      uniqueSubmissionLink,
-      disableSocialShare: isEmpty(socialHandles)
-    }) : /*#__PURE__*/React__default.createElement(ExternalLink, null), /*#__PURE__*/React__default.createElement(ActionBlock, {
-      className: "mt-6",
-      isSubmitting: isUpdatingForm,
-      cancelButtonProps: {
-        "data-cy": "neeto-thank-you-configuration-cancel-button",
-        ...(redirectToOnCancel ? {
-          to: redirectToOnCancel,
-          onClick: noop
-        } : {
-          type: "reset",
-          onClick: resetEditor
-        })
-      },
-      submitButtonProps: {
-        "data-cy": "neeto-thank-you-configuration-save-button"
+        });
       }
-    })), values.kind === FORM_OPTIONS.customize.kind && (CustomPreview ? /*#__PURE__*/React__default.createElement(CustomPreview, {
-      values
-    }) : /*#__PURE__*/React__default.createElement(Preview, {
-      appName,
-      brandingInfo,
-      isPublished,
-      publicLinkId,
-      resubmitLink,
-      socialHandles,
-      thankYouTextAlignment
-    })));
+    },
+    children: function children(_ref2) {
+      var values = _ref2.values;
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex h-full flex-col overflow-y-auto lg:flex-row",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "flex w-full flex-col px-6 lg:h-full lg:w-1/2 lg:overflow-y-auto",
+          children: [customHeader || /*#__PURE__*/jsx(Header, {
+            breadcrumbs: breadcrumbs
+          }), blockNavigation && /*#__PURE__*/jsx(BlockNavigation, {}), !disableRadioSelection && /*#__PURE__*/jsx("div", {
+            className: "mb-6 w-full",
+            children: /*#__PURE__*/jsx(Radio, {
+              containerClassName: "grid grid-cols-1 sm:grid-cols-2 gap-6 items-stretch w-full",
+              name: "kind",
+              children: Object.values(FORM_OPTIONS).map(function (option) {
+                return /*#__PURE__*/jsx(Radio.Item, {
+                  label: /*#__PURE__*/jsx(Label, _objectSpread({}, option)),
+                  name: "kind",
+                  value: option.kind,
+                  className: classNames("neeto-thank-you-configuration-radio__item", {
+                    active: values.kind === option.kind
+                  })
+                }, option.kind);
+              })
+            })
+          }), values.kind === FORM_OPTIONS.customize.kind ? /*#__PURE__*/jsx(Customize, {
+            disableSubmitAnotherResponse: disableSubmitAnotherResponse,
+            editorProps: editorProps,
+            editorRef: editorRef,
+            entityId: entityId,
+            hasImageUploader: hasImageUploader,
+            uniqueSubmissionEnabled: uniqueSubmissionEnabled,
+            uniqueSubmissionLink: uniqueSubmissionLink,
+            disableSocialShare: isEmpty(socialHandles)
+          }) : /*#__PURE__*/jsx(ExternalLink, {}), /*#__PURE__*/jsx(ActionBlock, {
+            className: "neeto-ui-bg-white sticky bottom-0 py-5",
+            isSubmitting: isUpdatingForm,
+            cancelButtonProps: _objectSpread({
+              "data-cy": "neeto-thank-you-configuration-cancel-button"
+            }, redirectToOnCancel ? {
+              to: redirectToOnCancel,
+              onClick: noop
+            } : {
+              type: "reset",
+              onClick: resetEditor
+            }),
+            submitButtonProps: {
+              "data-cy": "neeto-thank-you-configuration-save-button"
+            }
+          })]
+        }), values.kind === FORM_OPTIONS.customize.kind && (CustomPreview ? /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(MobilePreviewHeader, {
+            className: "block lg:hidden"
+          }), /*#__PURE__*/jsx("div", {
+            className: "neeto-ui-bg-gray-100 w-full px-6 py-10 lg:h-full lg:w-1/2 lg:overflow-y-auto",
+            children: /*#__PURE__*/jsx(CustomPreview, {
+              values: values
+            })
+          })]
+        }) : /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(MobilePreviewHeader, {
+            className: "block lg:hidden"
+          }), /*#__PURE__*/jsx("div", {
+            className: "neeto-ui-bg-gray-100 w-full px-6 py-10 lg:h-full lg:w-1/2 lg:overflow-y-auto",
+            children: /*#__PURE__*/jsx(Preview, {
+              appName: appName,
+              brandingInfo: brandingInfo,
+              isPublished: isPublished,
+              publicLinkId: publicLinkId,
+              resubmitLink: resubmitLink,
+              socialHandles: socialHandles,
+              thankYouTextAlignment: thankYouTextAlignment
+            })
+          })]
+        }))]
+      });
+    }
   });
 };
 
-const Header = _ref => {
-  let {
-    breadcrumbs
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full px-6"
-  }, /*#__PURE__*/React__default.createElement(NeetoUIHeader, {
+var ConfigureThankYou = function ConfigureThankYou(_ref) {
+  var breadcrumbs = _ref.breadcrumbs,
+    isPublished = _ref.isPublished,
+    entityId = _ref.entityId,
+    publicLinkId = _ref.publicLinkId,
+    resubmitLink = _ref.resubmitLink,
+    redirectToOnCancel = _ref.redirectToOnCancel,
+    _ref$socialHandles = _ref.socialHandles,
+    socialHandles = _ref$socialHandles === void 0 ? [] : _ref$socialHandles,
+    _ref$uniqueSubmission = _ref.uniqueSubmissionLink,
+    uniqueSubmissionLink = _ref$uniqueSubmission === void 0 ? "" : _ref$uniqueSubmission,
+    _ref$uniqueSubmission2 = _ref.uniqueSubmissionEnabled,
+    uniqueSubmissionEnabled = _ref$uniqueSubmission2 === void 0 ? false : _ref$uniqueSubmission2,
+    _ref$hasImageUploader = _ref.hasImageUploader,
+    hasImageUploader = _ref$hasImageUploader === void 0 ? false : _ref$hasImageUploader,
+    _ref$disableSubmitAno = _ref.disableSubmitAnotherResponse,
+    disableSubmitAnotherResponse = _ref$disableSubmitAno === void 0 ? false : _ref$disableSubmitAno,
+    _ref$disableRadioSele = _ref.disableRadioSelection,
+    disableRadioSelection = _ref$disableRadioSele === void 0 ? false : _ref$disableRadioSele,
+    _ref$thankYouTextAlig = _ref.thankYouTextAlignment,
+    thankYouTextAlignment = _ref$thankYouTextAlig === void 0 ? THANK_YOU_TEXT_ALIGNMENTS.center : _ref$thankYouTextAlig,
+    customHeader = _ref.customHeader,
+    appName = _ref.appName,
+    _ref$blockNavigation = _ref.blockNavigation,
+    blockNavigation = _ref$blockNavigation === void 0 ? false : _ref$blockNavigation,
+    _ref$onConfigUpdateSu = _ref.onConfigUpdateSuccess,
+    onConfigUpdateSuccess = _ref$onConfigUpdateSu === void 0 ? noop : _ref$onConfigUpdateSu,
+    brandingInfo = _ref.brandingInfo,
+    _ref$editorProps = _ref.editorProps,
+    editorProps = _ref$editorProps === void 0 ? {} : _ref$editorProps,
+    preview = _ref.preview,
+    _ref$allowEmptyCustom = _ref.allowEmptyCustomMessage,
+    allowEmptyCustomMessage = _ref$allowEmptyCustom === void 0 ? false : _ref$allowEmptyCustom;
+  return /*#__PURE__*/jsx(Form, {
+    allowEmptyCustomMessage: allowEmptyCustomMessage,
+    appName: appName,
+    blockNavigation: blockNavigation,
+    brandingInfo: brandingInfo,
     breadcrumbs: breadcrumbs,
-    size: "small",
-    title: t("neetoThankYou.common.thankYou")
-  }));
-};
-
-const ConfigureThankYou = _ref => {
-  let {
-    breadcrumbs,
-    isPublished,
-    entityId,
-    publicLinkId,
-    resubmitLink,
-    redirectToOnCancel,
-    socialHandles = [],
-    uniqueSubmissionLink = "",
-    uniqueSubmissionEnabled = false,
-    hasImageUploader = false,
-    disableSubmitAnotherResponse = false,
-    disableRadioSelection = false,
-    thankYouTextAlignment = THANK_YOU_TEXT_ALIGNMENTS.center,
-    customHeader,
-    appName,
-    blockNavigation = false,
-    onConfigUpdateSuccess = noop,
-    brandingInfo,
-    editorProps = {},
-    preview,
-    allowEmptyCustomMessage = false
-  } = _ref;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, customHeader || /*#__PURE__*/React__default.createElement(Header, {
-    breadcrumbs
-  }), /*#__PURE__*/React__default.createElement(Scrollable, {
-    className: "w-full p-6 pt-0"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "mx-auto h-full max-w-7xl"
-  }, /*#__PURE__*/React__default.createElement(Form, {
-    allowEmptyCustomMessage,
-    appName,
-    blockNavigation,
-    brandingInfo,
-    disableRadioSelection,
-    disableSubmitAnotherResponse,
-    editorProps,
-    entityId,
-    hasImageUploader,
-    isPublished,
-    onConfigUpdateSuccess,
-    preview,
-    publicLinkId,
-    redirectToOnCancel,
-    resubmitLink,
-    socialHandles,
-    thankYouTextAlignment,
-    uniqueSubmissionEnabled,
-    uniqueSubmissionLink
-  }))));
+    customHeader: customHeader,
+    disableRadioSelection: disableRadioSelection,
+    disableSubmitAnotherResponse: disableSubmitAnotherResponse,
+    editorProps: editorProps,
+    entityId: entityId,
+    hasImageUploader: hasImageUploader,
+    isPublished: isPublished,
+    onConfigUpdateSuccess: onConfigUpdateSuccess,
+    preview: preview,
+    publicLinkId: publicLinkId,
+    redirectToOnCancel: redirectToOnCancel,
+    resubmitLink: resubmitLink,
+    socialHandles: socialHandles,
+    thankYouTextAlignment: thankYouTextAlignment,
+    uniqueSubmissionEnabled: uniqueSubmissionEnabled,
+    uniqueSubmissionLink: uniqueSubmissionLink
+  });
 };
 
 export { ConfigureThankYou as default };