@bigbinary/neeto-thank-you-frontend 1.2.0-beta1 → 1.2.0-beta2

package/README.md

@@ -108,7 +108,8 @@ application.
 - `thankYouTextAlignment` - Set alignment of the "Thank You" text in "Thank You"
   page
 - `customHeader` - Accepts a React Node & replaces the default Header.
-- `appName` - Accepts `appName`, which will be used for generating the sign up URL in the branding text.
+- `appName` - Accepts `appName`, which will be used for generating the sign up
+  URL in the branding text.
 - `disableSubmitAnotherResponse` - Removes the toggle for submitting another
   response, incase of neetoForm [default: false].
 - `disableRadioSelection` - Removes the radio selector for
@@ -116,15 +117,22 @@ application.
 - `blockNavigation` - Boolean to show the block navigation alert in the thank
   you configuration page when there are unsaved changes [default: false]
 - `editorProps` - Accepts props that needs to be passed to the editor component.
-- `preview` - An optional React component to render a custom preview instead of the default one.
-- `allowEmptyCustomMessage` - A boolean flag that, when set to true, skips the frontend validation for submitting an empty message. [default: false]
+- `preview` - An optional React component to render a custom preview instead of
+  the default one.
+- `allowEmptyCustomMessage` - A boolean flag that, when set to true, skips the
+  frontend validation for submitting an empty message. [default: false]
 - `onConfigUpdateSuccess`: The callback function to be triggered when the
   configuration is updated. The function's first argument corresponds to the
   parameters passed to the `onSuccess` callback of React Query mutations, while
   the second argument represents the previous configuration object.
-- `brandingInfo` - Accepts an object that specifies the branding details. It can have 2 keys:
-  1. `displayText` - Specifies the translation key for the branding text to be displayed. The app name should be wrapped with `<signUpLink>` to set the redirection to neeto-auth properly.
-  2. `additionalComponents` - Accepts an optional object that specifies the additional components for styling the display text. This will be passed to the `components` prop of `Trans` component.
+- `brandingInfo` - Accepts an object that specifies the branding details. It can
+  have 2 keys:
+  1. `displayText` - Specifies the translation key for the branding text to be
+     displayed. The app name should be wrapped with `<signUpLink>` to set the
+     redirection to neeto-auth properly.
+  2. `additionalComponents` - Accepts an optional object that specifies the
+     additional components for styling the display text. This will be passed to
+     the `components` prop of `Trans` component.
 
 ##### Configuration
 
@@ -159,9 +167,7 @@ const App = () => {
     // "Build your own form using <signUpLink><span>neetoForm.</span></signUpLink> It’s free. <Link>Learn more</Link>."
     displayText: "form.settings.thankyou.brandingText",
     additionalComponents: {
-      Link: (
-        <a href={WEBSITE_URL} rel="noreferrer" target="_blank" />
-      ),
+      Link: <a href={WEBSITE_URL} rel="noreferrer" target="_blank" />,
     },
   };
 
@@ -196,6 +202,13 @@ export default App;
 This component displays the "Thank You" page after submission as per the
 configurations set in the host application.
 
+Note: `dompurify` is required in ShowThankYou. Use the below command to install
+`dompurify`.
+
+```bash
+yarn add dompurify
+```
+
 ##### Props
 
 - `entityId` - Set the entity ID associated with the "Thank You" page
@@ -205,10 +218,16 @@ configurations set in the host application.
 - `isThankYouPageLoading` - Boolean value to show the loading state
 - `customPageLoader` - Specify a custom loader component to replace the default
   page loader.
-- `appName` - Accepts `appName`, which will be used for generating the sign up URL in the branding text.
-- `brandingInfo` - Accepts an object that specifies the branding details. It can have 2 keys:
-  1. `displayText` - Specifies the translation key for the branding text to be displayed. The app name should be wrapped with `<signUpLink>` to set the redirection to neeto-auth properly.
-  2. `additionalComponents` - Accepts an optional object that specifies the additional components for styling the display text. This will be passed to the `components` prop of `Trans` component.
+- `appName` - Accepts `appName`, which will be used for generating the sign up
+  URL in the branding text.
+- `brandingInfo` - Accepts an object that specifies the branding details. It can
+  have 2 keys:
+  1. `displayText` - Specifies the translation key for the branding text to be
+     displayed. The app name should be wrapped with `<signUpLink>` to set the
+     redirection to neeto-auth properly.
+  2. `additionalComponents` - Accepts an optional object that specifies the
+     additional components for styling the display text. This will be passed to
+     the `components` prop of `Trans` component.
 
 ##### Usage
 
@@ -229,9 +248,7 @@ const App = () => {
     // "Build your own form using <signUpLink><span>neetoForm.</span></signUpLink> It’s free. <Link>Learn more</Link>."
     displayText: "form.settings.thankyou.brandingText",
     additionalComponents: {
-      Link: (
-        <a href={WEBSITE_URL} rel="noreferrer" target="_blank" />
-      ),
+      Link: <a href={WEBSITE_URL} rel="noreferrer" target="_blank" />,
     },
   };
 

package/dist/BrandingInfo-da0b773a.js

@@ -0,0 +1,32 @@
+import React__default from 'react';
+import { Trans } from 'react-i18next';
+import { buildSignUpUrl } from './utils.js';
+
+const BrandingInfo = _ref => {
+  let {
+    brandingInfo,
+    appName
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-thank-you-configuration__branding-wrap"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-thank-you-configuration__nav"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-thank-you-configuration__nav-footer"
+  }, /*#__PURE__*/React__default.createElement(Trans, {
+    i18nKey: brandingInfo.displayText,
+    components: {
+      signUpLink: /*#__PURE__*/React__default.createElement("a", {
+        className: "neeto-thank-you-configuration__link",
+        href: buildSignUpUrl(appName),
+        rel: "noreferrer",
+        target: "_blank"
+      }),
+      span: /*#__PURE__*/React__default.createElement("span", null),
+      ...(brandingInfo.additionalComponents ?? {})
+    }
+  }))));
+};
+
+export { BrandingInfo as B };
+//# sourceMappingURL=BrandingInfo-da0b773a.js.map

package/dist/BrandingInfo-da0b773a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandingInfo-da0b773a.js","sources":["../app/javascript/src/components/commons/BrandingInfo.jsx"],"sourcesContent":["import React from \"react\";\n\nimport { Trans } from \"react-i18next\";\n\nimport { buildSignUpUrl } from \"components/utils\";\n\nconst BrandingInfo = ({ brandingInfo, appName }) => (\n  <div className=\"neeto-thank-you-configuration__branding-wrap\">\n    <div className=\"neeto-thank-you-configuration__nav\">\n      <div className=\"neeto-thank-you-configuration__nav-footer\">\n        <Trans\n          i18nKey={brandingInfo.displayText}\n          components={{\n            signUpLink: (\n              <a\n                className=\"neeto-thank-you-configuration__link\"\n                href={buildSignUpUrl(appName)}\n                rel=\"noreferrer\"\n                target=\"_blank\"\n              />\n            ),\n            span: <span />,\n            ...(brandingInfo.additionalComponents ?? {}),\n          }}\n        />\n      </div>\n    </div>\n  </div>\n);\n\nexport default BrandingInfo;\n"],"names":["BrandingInfo","_ref","brandingInfo","appName","React","createElement","className","Trans","i18nKey","displayText","components","signUpLink","href","buildSignUpUrl","rel","target","span","additionalComponents"],"mappings":";;;;AAMMA,MAAAA,YAAY,GAAGC,IAAA,IAAA;EAAA,IAAC;IAAEC,YAAY;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAAF,IAAA,CAAA;EAAA,oBAC7CG,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,8CAAA;GACbF,eAAAA,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,oCAAA;GACbF,eAAAA,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,2CAAA;AAA2C,GAAA,eACxDF,cAAA,CAAAC,aAAA,CAACE,KAAK,EAAA;IACJC,OAAO,EAAEN,YAAY,CAACO,WAAY;AAClCC,IAAAA,UAAU,EAAE;MACVC,UAAU,eACRP,cAAA,CAAAC,aAAA,CAAA,GAAA,EAAA;AACEC,QAAAA,SAAS,EAAC,qCAAqC;AAC/CM,QAAAA,IAAI,EAAEC,cAAc,CAACV,OAAO,CAAE;AAC9BW,QAAAA,GAAG,EAAC,YAAY;AAChBC,QAAAA,MAAM,EAAC,QAAA;AAAQ,OAChB,CACF;AACDC,MAAAA,IAAI,eAAEZ,cAAA,CAAAC,aAAA,aAAO,CAAC;AACd,MAAA,IAAIH,YAAY,CAACe,oBAAoB,IAAI,EAAE,CAAA;AAC7C,KAAA;GACD,CACE,CACF,CACF,CAAC,CAAA;AAAA;;;;"}

package/dist/ConfigureThankYou.js

@@ -0,0 +1,534 @@
+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, S as SocialShare } from './SocialShare-d2986d0d.js';
+import { t } from 'i18next';
+import classNames from 'classnames';
+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-e6a0b741.js';
+import { useFormikContext } from 'formik';
+import { FormikEditor, EditorContent, isEditorEmpty } from '@bigbinary/neeto-editor';
+import Label$1 from '@bigbinary/neetoui/Label';
+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 { 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 { B as BrandingInfo } from './BrandingInfo-da0b773a.js';
+import { Link } from '@bigbinary/neeto-icons';
+import * as yup from 'yup';
+import NeetoUIHeader from '@bigbinary/neeto-molecules/Header';
+import '@tanstack/react-query';
+import 'axios';
+import './query-ab526f47.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))}";
+n(css,{});
+
+const FORM_OPTIONS = {
+  customize: {
+    label: t("neetoThankYou.thankYou.customize"),
+    description: t("neetoThankYou.thankYou.customizeDescription"),
+    kind: "custom_message"
+  },
+  externalLink: {
+    label: t("neetoThankYou.thankYou.externalLink"),
+    description: t("neetoThankYou.thankYou.externalLinkDescription"),
+    kind: "redirect_to_url"
+  }
+};
+const DEFAULT_IMAGE_PROPERTIES = {
+  imageSignedId: null,
+  imageUrl: ""
+};
+const EXTERNAL_URL_PREFIX = "https://";
+const THANK_YOU_TEXT_ALIGNMENTS = {
+  left: "left",
+  center: "center"
+};
+
+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];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$1.apply(this, arguments);
+}
+
+const IMAGE_SIZE_LIMIT = 1; // MB
+const IMAGE_UPLOADER_CONFIG = {
+  maxImageSize: IMAGE_SIZE_LIMIT
+};
+
+const Image = () => {
+  const {
+    setFieldValue,
+    values
+  } = useFormikContext();
+  const handleImageChange = image => {
+    if (isEmpty(image.signedId)) {
+      setFieldValue("imageUrl", "");
+      setFieldValue("imageSignedId", null);
+      return;
+    }
+    setFieldValue("imageUrl", image.url);
+    setFieldValue("imageSignedId", image.signedId);
+  };
+  return /*#__PURE__*/React__default.createElement(ImageUploader, {
+    className: "h-60",
+    key: values.imageUrl,
+    src: values.imageUrl,
+    uploadConfig: IMAGE_UPLOADER_CONFIG,
+    onUploadComplete: handleImageChange
+  });
+};
+
+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
+  })));
+});
+
+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(() => {
+    if (isFetching) return;
+    setFieldValue("message", thankYouConfiguration.message);
+    editorRef.current.editor?.commands.setContent(thankYouConfiguration.message);
+  }, [isFetching]);
+  const 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
+  }));
+};
+
+var _ellipse, _ellipse2, _ellipse3;
+function _extends() { _extends = 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]; } } } return target; }; return _extends.apply(this, arguments); }
+const SvgBrowserControls = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 43,
+  height: 13,
+  fill: "none"
+}, props), _ellipse || (_ellipse = /*#__PURE__*/React.createElement("ellipse", {
+  cx: 6.405,
+  cy: 6.644,
+  fill: "#FFEFED",
+  rx: 5.745,
+  ry: 5.859
+})), _ellipse2 || (_ellipse2 = /*#__PURE__*/React.createElement("ellipse", {
+  cx: 37.044,
+  cy: 6.644,
+  fill: "#98F3F4",
+  rx: 5.745,
+  ry: 5.859
+})), _ellipse3 || (_ellipse3 = /*#__PURE__*/React.createElement("ellipse", {
+  cx: 21.725,
+  cy: 6.644,
+  fill: "#FFF2D7",
+  rx: 5.745,
+  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
+  })));
+};
+
+const ExternalLink = () => {
+  const {
+    t
+  } = useTranslation();
+  return /*#__PURE__*/React__default.createElement(Input, {
+    autoFocus: true,
+    required: true,
+    label: t("neetoThankYou.thankYou.link"),
+    name: "redirectUrl",
+    placeholder: EXTERNAL_URL_PREFIX,
+    prefix: /*#__PURE__*/React__default.createElement(Link, null)
+  });
+};
+
+const Label = _ref => {
+  let {
+    label,
+    description,
+    kind
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(Typography, {
+    className: "neeto-ui-text-gray-700",
+    "data-cy": `neeto-thank-you-configuration-${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));
+};
+
+const buildValidationSchema = function () {
+  let 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)),
+    socialSharingEnabled: yup.bool(),
+    showResubmitLink: yup.bool(),
+    resubmitLinkText: yup.string().when("showResubmitLink", {
+      is: true,
+      then: yup.string().required(t("neetoThankYou.thankYou.validations.resubmitLinkTextIsRequired"))
+    }),
+    redirectUrl: yup.string().when("kind", {
+      is: FORM_OPTIONS.externalLink.kind,
+      then: yup.string().url(t("neetoThankYou.thankYou.validations.invalidLink")).required(t("neetoThankYou.thankYou.validations.invalidLink")).when("kind", {
+        is: FORM_OPTIONS.customize.kind,
+        then: yup.string()
+      })
+    })
+  });
+};
+
+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({
+    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));
+  }
+  const resetEditor = () => editorRef.current.editor?.commands.setContent(thankYouConfiguration.message);
+  return /*#__PURE__*/React__default.createElement(NeetoUIForm, {
+    formikProps: {
+      enableReinitialize: true,
+      initialValues: {
+        ...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];
+          }
+          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
+    })));
+  });
+};
+
+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, {
+    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
+  }))));
+};
+
+export { ConfigureThankYou as default };
+//# sourceMappingURL=ConfigureThankYou.js.map