@bigbinary/neeto-thank-you-frontend 1.0.29 → 1.1.0

package/README.md

@@ -1,59 +1,76 @@
 [![BuildStatus](https://neeto-engineering.neetoci.com/badges/neeto-thank-you-nano/workflows/branch.svg)](https://neeto-engineering.neetoci.com/projects/neeto-thank-you-nano)
 
 # neeto-thank-you-nano
-The `neeto-thank-you-nano` manages the "Thank You" configuration page across neeto applications. The nano exports the `@bigbinary/neeto-thank-you-frontend` NPM package and `neeto-thank-you-engine` Rails engine for development.
+
+The `neeto-thank-you-nano` manages the "Thank You" configuration page across
+neeto applications. The nano exports the `@bigbinary/neeto-thank-you-frontend`
+NPM package and `neeto-thank-you-engine` Rails engine for development.
 
 # Contents
+
 1. [Development with Host Application](#development-with-host-application)
    - [Engine](#engine)
-      - [Installation](#installation)
-      - [Usage](#usage)
+     - [Installation](#installation)
+     - [Usage](#usage)
    - [Frontend package](#frontend-package)
-      - [Installation](#installation-1)
-      - [Components](#components)
-      - [Hooks](#hooks)
+     - [Installation](#installation-1)
+     - [Components](#components)
+     - [Hooks](#hooks)
 2. [Instructions for Publishing](#instructions-for-publishing)
 
 # Development with Host Application
+
 ## Engine
-The engine is used to manage "Thank you" page configurations within an organization.
+
+The engine is used to manage "Thank you" page configurations within an
+organization.
 
 ### Installation
+
 1. Add this line to your application's Gemfile:
-    ```ruby
-    source "NEETO_GEM_SERVER_URL" do
-       # ..existing gems
 
-       gem 'neeto-thank-you-engine'
-    end
-    ```
+   ```ruby
+   source "NEETO_GEM_SERVER_URL" do
+      # ..existing gems
+
+      gem 'neeto-thank-you-engine'
+   end
+   ```
+
 2. And then execute:
-    ```ruby
-    bundle install
-    ```
+   ```ruby
+   bundle install
+   ```
 3. Add this line to your application's `config/routes.rb` file:
-    ```ruby
-    mount NeetoThankYouEngine::Engine => "/neeto_thank_you_engine"
-    ```
-4. Run the following command to copy the migrations from the engine to the host application:
-    ```ruby
-    bundle exec rails neeto_thank_you_engine:install:migrations
-    ```
+   ```ruby
+   mount NeetoThankYouEngine::Engine => "/neeto_thank_you_engine"
+   ```
+4. Run the following command to copy the migrations from the engine to the host
+   application:
+   ```ruby
+   bundle exec rails neeto_thank_you_engine:install:migrations
+   ```
 5. Add the migrations to the database:
-    ```ruby
-    bundle exec rails db:migrate
-    ```
+   ```ruby
+   bundle exec rails db:migrate
+   ```
+
 ### Usage
+
 You can learn more about the setup and usage here:
+
 1. [Models](/docs/engine/models.md)
 2. [Controllers](/docs/engine/controllers.md)
 
 ## Frontend package
+
 The package exports two components: `ConfigureThankYou` and `ShowThankYou`.
 
-The package also exports two hooks: `useShowThankYouPage` and `useShowThankYouConfiguration`
+The package also exports two hooks: `useShowThankYouPage` and
+`useShowThankYouConfiguration`
 
 ### Installation
+
 Install the latest `neeto-thank-you-nano` package using the below command:
 
 ```zsh
@@ -61,35 +78,57 @@ yarn add @bigbinary/neeto-thank-you-frontend
 ```
 
 ### Instructions for development
-Check the [Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) for step-by-step instructions to develop the frontend package.
+
+Check the
+[Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0)
+for step-by-step instructions to develop the frontend package.
 
 ### Components
+
 #### `ConfigureThankYou` ([source code](https://github.com/bigbinary/neeto-thank-you-nano/blob/f7c53e11319268eac4de3bd5642e228063d431fb/app/javascript/src/components/ConfigureThankYou/index.jsx))
-This component manages the configuration of the "Thank You" page in the host application.
+
+This component manages the configuration of the "Thank You" page in the host
+application.
 
 ##### Props
+
 - `breadcrumbs` - Set the header component's breadcrumbs
 - `socialHandles` - Set the URLs for sharing to social media
-- `isPublished` - Boolean to manage pointer events in the "Thank You" page configuration preview
+- `isPublished` - Boolean to manage pointer events in the "Thank You" page
+  configuration preview
 - `entityId` - Set the entity ID associated with the "Thank You" page
-- `publicLinkId` - Set the public link ID of the entity associated with the thank you configuration for social media sharing
-- `hasImageUploader` - Boolean to show the image uploader section in the thank you configuration page
+- `publicLinkId` - Set the public link ID of the entity associated with the
+  thank you configuration for social media sharing
+- `hasImageUploader` - Boolean to show the image uploader section in the thank
+  you configuration page
 - `uniqueSubmissionEnabled` - Boolean to show link for unique submission
 - `uniqueSubmissionLink` - Set link for unique submission
 - `resubmitLink` - Set link for resubmission
 - `redirectToOnCancel` - Set path to redirect to after cancelling submission
-- `thankYouTextAlignment` - Set alignment of the "Thank You" text in "Thank You" page
+- `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 branding `Powered by {{appName}}` [default: "neetoForm"].
-- `disableSubmitAnotherResponse` - Removes the toggle for submitting another response, incase of neetoForm [default: false].
-- `disableRadioSelection` - Removes the radio selector for `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]
-- `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.
+- `appName` - Accepts appName, which will be used for branding
+  `Made with {{appName}}` [default: "neetoForm"].
+- `disableSubmitAnotherResponse` - Removes the toggle for submitting another
+  response, incase of neetoForm [default: false].
+- `disableRadioSelection` - Removes the radio selector for
+  `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]
+- `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.
 
 ##### Configuration
-Refer to the [ConfigureThankYou](/docs/frontend/configure_thank_you.md) section for detailed information on the available configurations for the `ConfigureThankYou` component.
+
+Refer to the [ConfigureThankYou](/docs/frontend/configure_thank_you.md) section
+for detailed information on the available configurations for the
+`ConfigureThankYou` component.
 
 ##### Usage
+
 ```jsx
 import React from "react";
 
@@ -97,14 +136,19 @@ import { ConfigureThankYou } from "@bigbinary/neeto-thank-you-frontend";
 
 const App = () => {
   const breadcrumbs = [{ text: "Configure", link: "/configure" }];
-  const socialHandles = [{ icon: Facebook, generateShareUrl: entityId => `https://www.facebook.com/${entityId}`}];
+  const socialHandles = [
+    {
+      icon: Facebook,
+      generateShareUrl: entityId => `https://www.facebook.com/${entityId}`,
+    },
+  ];
 
   const handleConfigUpdateSuccess = (
     onSuccessCallbackParams,
     previousConfiguration
   ) => {
     // Add your logic here
-  }
+  };
 
   return (
     <>
@@ -123,33 +167,43 @@ const App = () => {
         thankYouTextAlignment={thankYouTextAlignment}
         appName="neetoForm"
         onConfigUpdateSuccess={handleConfigUpdateSuccess}
-       />
+      />
     </>
-  )
+  );
 };
 
 export default App;
 ```
 
 #### `ShowThankYou` ([source code](https://github.com/bigbinary/neeto-thank-you-nano/blob/f7c53e11319268eac4de3bd5642e228063d431fb/app/javascript/src/components/ShowThankYou/index.jsx))
-This component displays the "Thank You" page after submission as per the configurations set in the host application.
+
+This component displays the "Thank You" page after submission as per the
+configurations set in the host application.
 
 ##### Props
+
 - `entityId` - Set the entity ID associated with the "Thank You" page
 - `socialHandles` - Set the URLs for sharing to social media
 - `isDraftPreview` - Boolean to generate the draft resubmission URL
 - `resubmitLink` - Set link for resubmission
 - `isThankYouPageLoading` - Boolean value to show the loading state
-- `customPageLoader` - Specify a custom loader component to replace the default page loader.
+- `customPageLoader` - Specify a custom loader component to replace the default
+  page loader.
 
 ##### Usage
+
 ```jsx
 import React from "react";
 
 import { ShowThankYou } from "@bigbinary/neeto-thank-you-frontend";
 
 const App = () => {
-  const socialHandles = [{ icon: Facebook, generateShareUrl: entityId => `https://www.facebook.com/${entityId}`}];
+  const socialHandles = [
+    {
+      icon: Facebook,
+      generateShareUrl: entityId => `https://www.facebook.com/${entityId}`,
+    },
+  ];
 
   return (
     <>
@@ -161,7 +215,7 @@ const App = () => {
         isThankYouPageLoading={isThankYouPageLoading}
       />
     </>
-  )
+  );
 };
 
 export default App;
@@ -170,16 +224,21 @@ export default App;
 ### Hooks
 
 #### `useShowThankYouPage` ([source code](https://github.com/bigbinary/neeto-thank-you-nano/blob/fd519090a7b0ce63db912bdf795872bbdb6f9194/app/javascript/src/hooks/reactQuery/useThankYouPageApi.js#L6))
+
 This hook is used to fetch the "Thank You" page of the entity.
 
 ##### Props
+
 - `entityId` - ID of the entity to load the thank you configuration
 - `isTemplateView` - Boolean to check if the current page is the template view
 
 ##### Return value
-Returns the `data` object which includes the `thankYouConfiguration` object containing the thank you configuration for the entity.
+
+Returns the `data` object which includes the `thankYouConfiguration` object
+containing the thank you configuration for the entity.
 
 ##### Usage
+
 ```js
 import { useShowThankYouPage } from "@bigbinary/neeto-thank-you-frontend";
 
@@ -190,19 +249,24 @@ const { data: { thankYouConfiguration } = {} } = useShowThankYouPage({
 ```
 
 #### `useShowThankYouConfiguration` ([source code](https://github.com/bigbinary/neeto-thank-you-nano/blob/fd519090a7b0ce63db912bdf795872bbdb6f9194/app/javascript/src/hooks/reactQuery/useThankYouConfigurationApi.js#L6))
+
 This hook is used to fetch the thank you configuration of the entity.
 
 ##### Props
+
 - `entityId` - ID of the entity to load the thank you configuration
 
 ##### Return value
-Returns the `data` object which includes the `thankYouConfiguration` object containing the thank you configuration for the entity, and an `isLoading` boolean.
+
+Returns the `data` object which includes the `thankYouConfiguration` object
+containing the thank you configuration for the entity, and an `isLoading`
+boolean.
 
 ##### Usage
+
 ```js
 import { useShowThankYouConfiguration } from "@bigbinary/neeto-thank-you-frontend";
 
-
 const {
   isLoading: isThankYouActionLoading,
   data: { thankYouConfiguration } = {},
@@ -210,4 +274,7 @@ const {
 ```
 
 # Instructions for Publishing
-Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.
+
+Consult the
+[building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages)
+guide for details on how to publish.

package/app/javascript/src/translations/en.json

@@ -27,7 +27,6 @@
       "socialShareHeading": "Share this neetoForm on social media",
       "resubmissionWarning": "You have enabled unique submission for this form, please disable unique submission before enabling the resubmit link.",
       "uniqueSubmissionLinkText": "Go to Unique submissions settings",
-      "poweredBy": "Powered by <strong>{{appName, anyCase}}</strong>",
       "formBranding": "Build your own form using <a><span>neetoForm.</span></a> It’s free.",
       "draftVersionForm": "You are using the draft version of the form. The data will not be submitted.",
       "preview": "Preview",

package/dist/index.cjs.js

@@ -10,14 +10,16 @@ var neetoEditor = require('@bigbinary/neeto-editor');
 var yup = require('yup');
 var classNames = require('classnames');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
-var neetoui = require('@bigbinary/neetoui');
 var formik$1 = require('@bigbinary/neetoui/formik');
 var ramda = require('ramda');
-var reactI18next = require('react-i18next');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var reactQuery = require('react-query');
 var axios = require('axios');
 var formik = require('formik');
+var neetoui = require('@bigbinary/neetoui');
+var reactI18next = require('react-i18next');
 var neetoImageUploaderFrontend = require('@bigbinary/neeto-image-uploader-frontend');
+var MadeWith = require('@bigbinary/neeto-molecules/MadeWith');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var NeetoUIHeader = require('@bigbinary/neeto-molecules/Header');
 
@@ -48,6 +50,7 @@ var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+var MadeWith__default = /*#__PURE__*/_interopDefaultLegacy(MadeWith);
 var NeetoUIHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUIHeader);
 
 var FORM_OPTIONS = {
@@ -92,21 +95,6 @@ var THANK_YOU_TEXT_ALIGNMENTS = {
 };
 var DEFAULT_APP_NAME = "neetoForm";
 
-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);
-}
-
 function _typeof(o) {
   "@babel/helpers - typeof";
 
@@ -167,15 +155,9 @@ var update = function update(_ref) {
     thankYouConfiguration: payload
   });
 };
-var resetToDefault = function resetToDefault(entityId) {
-  return axios__default["default"].put("".concat(baseUrl$1, "/reset_to_default"), {
-    entityId: entityId
-  });
-};
 var thankYouConfigurationApi = {
   show: show$1,
-  update: update,
-  resetToDefault: resetToDefault
+  update: update
 };
 
 var QUERY_KEYS = {
@@ -192,8 +174,7 @@ var useShowThankYouConfiguration = function useShowThankYouConfiguration(_ref) {
   });
 };
 var useUpdateThankYouConfiguration = function useUpdateThankYouConfiguration(options) {
-  var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (_ref2) {
+  return reactUtils.useMutationWithInvalidation(function (_ref2) {
     var entityId = _ref2.entityId,
       payload = _ref2.payload;
     return thankYouConfigurationApi.update({
@@ -201,21 +182,9 @@ var useUpdateThankYouConfiguration = function useUpdateThankYouConfiguration(opt
       payload: payload
     });
   }, _objectSpread$1({
-    onSuccess: function onSuccess() {
-      queryClient.invalidateQueries(QUERY_KEYS.THANK_YOU_CONFIGURATION);
-    }
+    keysToInvalidate: [QUERY_KEYS.THANK_YOU_CONFIGURATION]
   }, options));
 };
-var useResetThankYouConfigurationToDefault = function useResetThankYouConfigurationToDefault(entityId) {
-  var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function () {
-    return thankYouConfigurationApi.resetToDefault(entityId);
-  }, {
-    onSuccess: function onSuccess() {
-      queryClient.invalidateQueries(QUERY_KEYS.THANK_YOU_CONFIGURATION);
-    }
-  });
-};
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -512,18 +481,9 @@ var Preview = function Preview(_ref) {
     }
   })))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-bg-gray-100 flex w-full items-center justify-center px-4 py-1.5"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-500",
-    style: "body3"
-  }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-    components: {
-      strong: /*#__PURE__*/React__default["default"].createElement("strong", null)
-    },
-    i18nKey: "neetoThankYou.thankYou.poweredBy",
-    values: {
-      appName: appName || DEFAULT_APP_NAME
-    }
-  })))));
+  }, /*#__PURE__*/React__default["default"].createElement(MadeWith__default["default"], {
+    productName: appName || DEFAULT_APP_NAME
+  }))));
 };
 
 var ExternalLink = function ExternalLink() {
@@ -572,8 +532,6 @@ var Form = function Form(_ref) {
     appName = _ref.appName,
     blockNavigation = _ref.blockNavigation,
     onConfigUpdateSuccess = _ref.onConfigUpdateSuccess;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
   var _useShowThankYouConfi = useShowThankYouConfiguration({
       entityId: entityId
     }),
@@ -584,9 +542,6 @@ var Form = function Form(_ref) {
   var _useUpdateThankYouCon = useUpdateThankYouConfiguration(),
     updateThankYouConfiguration = _useUpdateThankYouCon.mutate,
     isUpdatingForm = _useUpdateThankYouCon.isLoading;
-  var _useResetThankYouConf = useResetThankYouConfigurationToDefault(entityId),
-    resetToDefaultMessage = _useResetThankYouConf.mutate,
-    isResetting = _useResetThankYouConf.isLoading;
   var editorRef = React.useRef({
     editor: {}
   });
@@ -621,8 +576,7 @@ var Form = function Form(_ref) {
       }
     }
   }, function (_ref2) {
-    var values = _ref2.values,
-      dirty = _ref2.dirty;
+    var values = _ref2.values;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "grid grid-cols-1 gap-10 pb-6 md:grid-cols-2 md:gap-6"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -650,33 +604,22 @@ var Form = function Form(_ref) {
       uniqueSubmissionEnabled: uniqueSubmissionEnabled,
       uniqueSubmissionLink: uniqueSubmissionLink,
       disableSocialShare: ramda.isEmpty(socialHandles)
-    }) : /*#__PURE__*/React__default["default"].createElement(ExternalLink, null), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "mt-6 flex items-center space-x-2"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      "data-cy": "neeto-thank-you-configuration-save-button",
-      disabled: !dirty,
-      label: t("neetoThankYou.buttons.saveChanges"),
-      loading: isUpdatingForm,
-      type: "submit"
-    }), values.kind === FORM_OPTIONS.customize.kind && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      "data-cy": "neeto-thank-you-configuration-reset-button",
-      disabled: isResetting,
-      label: t("neetoThankYou.buttons.resetChanges"),
-      loading: isResetting,
-      style: "secondary",
-      onClick: resetToDefaultMessage
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends$1({
-      "data-cy": "neeto-thank-you-configuration-cancel-button",
-      label: t("neetoThankYou.buttons.cancel"),
-      size: "small",
-      style: "text"
-    }, redirectToOnCancel ? {
-      to: redirectToOnCancel
-    } : {
-      type: "reset",
-      onClick: resetEditor,
-      disabled: !dirty
-    })))), values.kind === FORM_OPTIONS.customize.kind && /*#__PURE__*/React__default["default"].createElement(Preview, {
+    }) : /*#__PURE__*/React__default["default"].createElement(ExternalLink, null), /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
+      className: "mt-6",
+      isSubmitting: isUpdatingForm,
+      cancelButtonProps: _objectSpread({
+        "data-cy": "neeto-thank-you-configuration-cancel-button"
+      }, redirectToOnCancel ? {
+        to: redirectToOnCancel,
+        onClick: neetoCist.noop
+      } : {
+        type: "reset",
+        onClick: resetEditor
+      }),
+      submitButtonProps: {
+        "data-cy": "neeto-thank-you-configuration-save-button"
+      }
+    })), values.kind === FORM_OPTIONS.customize.kind && /*#__PURE__*/React__default["default"].createElement(Preview, {
       appName: appName,
       isPublished: isPublished,
       publicLinkId: publicLinkId,