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

package/README.md

@@ -115,6 +115,9 @@ application.
   `Customize thank you page` & `Redirect to external link` [default: false]
 - `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]
 - `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

package/dist/index.cjs.js

@@ -6,8 +6,6 @@ var React = require('react');
 var neetoCist = require('@bigbinary/neeto-cist');
 var Scrollable = require('@bigbinary/neeto-molecules/Scrollable');
 var i18next = require('i18next');
-var neetoEditor = require('@bigbinary/neeto-editor');
-var yup = require('yup');
 var classNames = require('classnames');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
@@ -15,10 +13,11 @@ var BlockNavigation = require('@bigbinary/neetoui/formik/BlockNavigation');
 var NeetoUIForm = require('@bigbinary/neetoui/formik/Form');
 var Radio = require('@bigbinary/neetoui/formik/Radio');
 var ramda = require('ramda');
+var reactQuery = require('@tanstack/react-query');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var reactQuery = require('react-query');
 var axios = require('axios');
 var formik = require('formik');
+var neetoEditor = require('@bigbinary/neeto-editor');
 var Label$1 = require('@bigbinary/neetoui/Label');
 var Input = require('@bigbinary/neetoui/formik/Input');
 var Switch = require('@bigbinary/neetoui/formik/Switch');
@@ -31,6 +30,7 @@ var Modal = require('@bigbinary/neetoui/Modal');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var neetoIcons = require('@bigbinary/neeto-icons');
+var yup = require('yup');
 var NeetoUIHeader = require('@bigbinary/neeto-molecules/Header');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -56,7 +56,6 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Scrollable__default = /*#__PURE__*/_interopDefaultLegacy(Scrollable);
-var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var ActionBlock__default = /*#__PURE__*/_interopDefaultLegacy(ActionBlock);
@@ -70,6 +69,7 @@ var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var Modal__default = /*#__PURE__*/_interopDefaultLegacy(Modal);
+var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var NeetoUIHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUIHeader);
 
 var FORM_OPTIONS = {
@@ -88,25 +88,6 @@ var DEFAULT_IMAGE_PROPERTIES = {
   imageSignedId: null,
   imageUrl: ""
 };
-var VALIDATION_SCHEMA = yup__namespace.object().shape({
-  kind: yup__namespace.string().required(),
-  message: yup__namespace.string().test("message", i18next.t("neetoThankYou.thankYou.validations.messageRequired"), function (value) {
-    return !neetoEditor.isEditorEmpty(value);
-  }),
-  socialSharingEnabled: yup__namespace.bool(),
-  showResubmitLink: yup__namespace.bool(),
-  resubmitLinkText: yup__namespace.string().when("showResubmitLink", {
-    is: true,
-    then: yup__namespace.string().required(i18next.t("neetoThankYou.thankYou.validations.resubmitLinkTextIsRequired"))
-  }),
-  redirectUrl: yup__namespace.string().when("kind", {
-    is: FORM_OPTIONS.externalLink.kind,
-    then: yup__namespace.string().url(i18next.t("neetoThankYou.thankYou.validations.invalidLink")).required(i18next.t("neetoThankYou.thankYou.validations.invalidLink")).when("kind", {
-      is: FORM_OPTIONS.customize.kind,
-      then: yup__namespace.string()
-    })
-  })
-});
 var EXTERNAL_URL_PREFIX = "https://";
 var THANK_YOU_TEXT_ALIGNMENTS = {
   left: "left",
@@ -182,12 +163,15 @@ var QUERY_KEYS = {
   THANK_YOU_PAGE: "thank-you-page"
 };
 
-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; }
-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), !0).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; }
+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; }
+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), !0).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; }
 var useShowThankYouConfiguration = function useShowThankYouConfiguration(_ref) {
   var entityId = _ref.entityId;
-  return reactQuery.useQuery([QUERY_KEYS.THANK_YOU_CONFIGURATION, entityId], function () {
-    return thankYouConfigurationApi.show(entityId);
+  return reactQuery.useQuery({
+    queryKey: [QUERY_KEYS.THANK_YOU_CONFIGURATION, entityId],
+    queryFn: function queryFn() {
+      return thankYouConfigurationApi.show(entityId);
+    }
   });
 };
 var useUpdateThankYouConfiguration = function useUpdateThankYouConfiguration(options) {
@@ -198,7 +182,7 @@ var useUpdateThankYouConfiguration = function useUpdateThankYouConfiguration(opt
       entityId: entityId,
       payload: payload
     });
-  }, _objectSpread$2({
+  }, _objectSpread$3({
     keysToInvalidate: [QUERY_KEYS.THANK_YOU_CONFIGURATION]
   }, options));
 };
@@ -284,12 +268,11 @@ var Image = function Image() {
   }, values.imageUrl);
 };
 
-var ResubmissionWarningModal = function ResubmissionWarningModal(_ref) {
-  var isOpen = _ref.isOpen,
+var ResubmissionWarningModal = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    isOpen = _ref.isOpen,
     setIsOpen = _ref.setIsOpen,
     uniqueSubmissionLink = _ref.uniqueSubmissionLink;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
   return /*#__PURE__*/jsxRuntime.jsxs(Modal__default["default"], {
     isOpen: isOpen,
     onClose: function onClose() {
@@ -306,19 +289,21 @@ var ResubmissionWarningModal = function ResubmissionWarningModal(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsxs(Modal__default["default"].Footer, {
       className: "space-x-2",
       children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
-        label: t("neetoThankYou.thankYou.uniqueSubmissionLinkText"),
-        to: uniqueSubmissionLink
-      }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
         label: t("neetoThankYou.common.ok"),
-        style: "text",
+        style: "tertiary",
         onClick: function onClick() {
           return setIsOpen(false);
         }
+      }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+        label: t("neetoThankYou.thankYou.uniqueSubmissionLinkText"),
+        to: uniqueSubmissionLink
       })]
     })]
   });
-};
+});
 
+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; }
+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), !0).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; }
 var Customize = function Customize(_ref) {
   var editorRef = _ref.editorRef,
     uniqueSubmissionEnabled = _ref.uniqueSubmissionEnabled,
@@ -326,7 +311,8 @@ var Customize = function Customize(_ref) {
     uniqueSubmissionLink = _ref.uniqueSubmissionLink,
     entityId = _ref.entityId,
     disableSocialShare = _ref.disableSocialShare,
-    disableSubmitAnotherResponse = _ref.disableSubmitAnotherResponse;
+    disableSubmitAnotherResponse = _ref.disableSubmitAnotherResponse,
+    editorProps = _ref.editorProps;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isUniqueSubmissionWarningModalOpen = _useState2[0],
@@ -361,13 +347,13 @@ var Customize = function Customize(_ref) {
       }), /*#__PURE__*/jsxRuntime.jsx(Image, {})]
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex flex-col gap-2",
-      children: /*#__PURE__*/jsxRuntime.jsx(neetoEditor.FormikEditor, {
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoEditor.FormikEditor, _objectSpread$2({
         required: true,
         "data-cy": "thank-you-message-editor",
         label: t("neetoThankYou.thankYou.messageLabel"),
         name: "message",
         ref: editorRef
-      })
+      }, editorProps))
     }), !disableSocialShare && /*#__PURE__*/jsxRuntime.jsx(Switch__default["default"], {
       label: t("neetoThankYou.thankYou.socialShareIcons"),
       name: "socialSharingEnabled"
@@ -595,6 +581,29 @@ var Label = function Label(_ref) {
   });
 };
 
+var buildValidationSchema = function buildValidationSchema() {
+  var allowEmptyCustomMessage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return yup__namespace.object().shape({
+    kind: yup__namespace.string().required(),
+    message: yup__namespace.string().test("message", i18next.t("neetoThankYou.thankYou.validations.messageRequired"), function (value) {
+      return allowEmptyCustomMessage || !neetoEditor.isEditorEmpty(value);
+    }),
+    socialSharingEnabled: yup__namespace.bool(),
+    showResubmitLink: yup__namespace.bool(),
+    resubmitLinkText: yup__namespace.string().when("showResubmitLink", {
+      is: true,
+      then: yup__namespace.string().required(i18next.t("neetoThankYou.thankYou.validations.resubmitLinkTextIsRequired"))
+    }),
+    redirectUrl: yup__namespace.string().when("kind", {
+      is: FORM_OPTIONS.externalLink.kind,
+      then: yup__namespace.string().url(i18next.t("neetoThankYou.thankYou.validations.invalidLink")).required(i18next.t("neetoThankYou.thankYou.validations.invalidLink")).when("kind", {
+        is: FORM_OPTIONS.customize.kind,
+        then: yup__namespace.string()
+      })
+    })
+  });
+};
+
 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) {
@@ -613,7 +622,10 @@ var Form = function Form(_ref) {
     appName = _ref.appName,
     blockNavigation = _ref.blockNavigation,
     onConfigUpdateSuccess = _ref.onConfigUpdateSuccess,
-    brandingInfo = _ref.brandingInfo;
+    brandingInfo = _ref.brandingInfo,
+    editorProps = _ref.editorProps,
+    CustomPreview = _ref.preview,
+    allowEmptyCustomMessage = _ref.allowEmptyCustomMessage;
   var _useShowThankYouConfi = useShowThankYouConfiguration({
       entityId: entityId
     }),
@@ -623,7 +635,7 @@ var Form = function Form(_ref) {
     isLoading = _useShowThankYouConfi.isLoading;
   var _useUpdateThankYouCon = useUpdateThankYouConfiguration(),
     updateThankYouConfiguration = _useUpdateThankYouCon.mutate,
-    isUpdatingForm = _useUpdateThankYouCon.isLoading;
+    isUpdatingForm = _useUpdateThankYouCon.isPending;
   var editorRef = React.useRef({
     editor: {}
   });
@@ -641,7 +653,7 @@ var Form = function Form(_ref) {
     formikProps: {
       enableReinitialize: true,
       initialValues: _objectSpread(_objectSpread({}, DEFAULT_IMAGE_PROPERTIES), thankYouConfiguration),
-      validationSchema: VALIDATION_SCHEMA,
+      validationSchema: buildValidationSchema(allowEmptyCustomMessage),
       onSubmit: function onSubmit(values) {
         return updateThankYouConfiguration({
           entityId: entityId,
@@ -682,6 +694,7 @@ var Form = function Form(_ref) {
             })
           }), values.kind === FORM_OPTIONS.customize.kind ? /*#__PURE__*/jsxRuntime.jsx(Customize, {
             disableSubmitAnotherResponse: disableSubmitAnotherResponse,
+            editorProps: editorProps,
             editorRef: editorRef,
             entityId: entityId,
             hasImageUploader: hasImageUploader,
@@ -704,7 +717,9 @@ var Form = function Form(_ref) {
               "data-cy": "neeto-thank-you-configuration-save-button"
             }
           })]
-        }), values.kind === FORM_OPTIONS.customize.kind && /*#__PURE__*/jsxRuntime.jsx(Preview, {
+        }), values.kind === FORM_OPTIONS.customize.kind && (CustomPreview ? /*#__PURE__*/jsxRuntime.jsx(CustomPreview, {
+          values: values
+        }) : /*#__PURE__*/jsxRuntime.jsx(Preview, {
           appName: appName,
           brandingInfo: brandingInfo,
           isPublished: isPublished,
@@ -712,7 +727,7 @@ var Form = function Form(_ref) {
           resubmitLink: resubmitLink,
           socialHandles: socialHandles,
           thankYouTextAlignment: thankYouTextAlignment
-        })]
+        }))]
       });
     }
   });
@@ -759,7 +774,12 @@ var ConfigureThankYou = function ConfigureThankYou(_ref) {
     blockNavigation = _ref$blockNavigation === void 0 ? false : _ref$blockNavigation,
     _ref$onConfigUpdateSu = _ref.onConfigUpdateSuccess,
     onConfigUpdateSuccess = _ref$onConfigUpdateSu === void 0 ? neetoCist.noop : _ref$onConfigUpdateSu,
-    brandingInfo = _ref.brandingInfo;
+    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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [customHeader || /*#__PURE__*/jsxRuntime.jsx(Header, {
       breadcrumbs: breadcrumbs
@@ -768,15 +788,18 @@ var ConfigureThankYou = function ConfigureThankYou(_ref) {
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "mx-auto h-full max-w-7xl",
         children: /*#__PURE__*/jsxRuntime.jsx(Form, {
+          allowEmptyCustomMessage: allowEmptyCustomMessage,
           appName: appName,
           blockNavigation: blockNavigation,
           brandingInfo: brandingInfo,
           disableRadioSelection: disableRadioSelection,
           disableSubmitAnotherResponse: disableSubmitAnotherResponse,
+          editorProps: editorProps,
           entityId: entityId,
           hasImageUploader: hasImageUploader,
           isPublished: isPublished,
           onConfigUpdateSuccess: onConfigUpdateSuccess,
+          preview: preview,
           publicLinkId: publicLinkId,
           redirectToOnCancel: redirectToOnCancel,
           resubmitLink: resubmitLink,
@@ -808,11 +831,14 @@ var thankYouPageApi = {
 var useShowThankYouPage = function useShowThankYouPage(_ref) {
   var entityId = _ref.entityId,
     isTemplateView = _ref.isTemplateView;
-  return reactQuery.useQuery([QUERY_KEYS.THANK_YOU_PAGE, entityId], function () {
-    return thankYouPageApi.show({
-      entityId: entityId,
-      isTemplateView: isTemplateView
-    });
+  return reactQuery.useQuery({
+    queryKey: [QUERY_KEYS.THANK_YOU_PAGE, entityId],
+    queryFn: function queryFn() {
+      return thankYouPageApi.show({
+        entityId: entityId,
+        isTemplateView: isTemplateView
+      });
+    }
   });
 };