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 nano also supports multiple thank you pages per entity, allowing you to configure and display different thank you pages as needed.

Contents

1. Development with Host Application
   • Engine
     • Installation
     • Usage
   • Frontend package
     • Installation
     • Components
     • Hooks
2. Instructions for Publishing

Development with Host Application

Engine

The engine is used to manage "Thank you" page configurations within an organization.

Installation

1. Add this line to your application's Gemfile:

   source "NEETO_GEM_SERVER_URL" do
      # ..existing gems
   
      gem 'neeto-thank-you-engine'
   end
   

2. And then execute:

   bundle install
   

3. Add this line to your application's config/routes.rb file:

   mount NeetoThankYouEngine::Engine, at: "/neeto_thank_you"
   

4. Run the following command to copy the migrations from the engine to the host application:

   bundle exec rails neeto_thank_you_engine:install:migrations
   

5. Add the migrations to the database:

   bundle exec rails db:migrate
   

Usage

You can learn more about the setup and usage here:

1. Models
2. Controllers

Frontend package

The package exports two components: ConfigureThankYou and ShowThankYou.

The package also exports several hooks for managing thank you configurations, including useFetchThankYouConfigurations which can be used to retrieve multiple thank you configurations for an entity.

Installation

Install the latest neeto-thank-you-nano package using the below command:

yarn add @bigbinary/neeto-thank-you-frontend

Instructions for development

Check the Frontend package development guide for step-by-step instructions to develop the frontend package.

Components

ConfigureThankYou (source code)

This component manages the configuration of the "Thank You" page in the host application.

Props

• id - ID of the specific thank you configuration
• 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
• 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 enable the image upload feature in the message editor on your 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
• 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.
• appIcon - Accepts appIcon, which will be used to render custom logo in Neeto MadeWith badge.
• disableSubmitAnotherResponse - Removes the toggle for submitting another response, incase of NeetoForm [default: false].
• disableRadioSelection - Removes the radio selector for Custom message & 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 the second argument represents the previous configuration object.
• isPassEventDetailsEnabled - A boolean flag that, when set to true, displays a switch to pass event details to the redirect url as URL parameters.
• eventDetailsHelpDescription - Description shown inside the help popover next to that switch. Falls back to a generic default when not provided. The popover is only rendered when passEventDetailsHelpDocUrl is also given.
• ctaProps - An object containing properties for the call-to-action button that appears in the thank you page preview. When provided, this button will link to the Neeto product page for the specified app. The button will not be rendered if this prop is not provided. The object can contain:
  • message - The message text displayed to the left of the button
  • buttonLabel - The text displayed on the button

Configuration

Refer to the ConfigureThankYou section for detailed information on the available configurations for the ConfigureThankYou component.

Usage

import React from "react";

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 handleConfigUpdateSuccess = (
    onSuccessCallbackParams,
    previousConfiguration
  ) => {
    // Add your logic here
  };

  return (
    <>
      <ConfigureThankYou
        blockNavigation
        hasImageUploader
        id
        breadcrumbs={breadcrumbs}
        entityId={entityId}
        publicLinkId={publicLinkId}
        isPublished={isPublished}
        resubmitLink={resubmitLink}
        socialHandles={socialHandles}
        uniqueSubmissionEnabled={uniqueSubmissionEnabled}
        uniqueSubmissionLink={uniqueSubmissionLink}
        redirectToOnCancel={redirectToOnCancel}
        thankYouTextAlignment={thankYouTextAlignment}
        appName="NeetoForm"
        appIcon={() => {}}
        ctaProps={{
          message:
            "This form was built with NeetoForm — modern forms made simple.",
          buttonLabel: "Create your NeetoForm",
        }}
        onConfigUpdateSuccess={handleConfigUpdateSuccess}
        helpPopoverProps={HELP_POPOVER_PROPS}
        eventDetailsSwitchLabel={eventDetailsSwitchLabel}
        eventDetailsHelpDescription={eventDetailsHelpDescription}
      />
    </>
  );
};

export default App;

ShowThankYou (source code)

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.

yarn add dompurify

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
• thankYouTextAlignment - Set alignment of contents on "Thank You" page
• 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.
• appIcon - Accepts appIcon, which will be used to render custom logo in Neeto MadeWith badge.
• editorProps - Accepts props that needs to be passed to the editor component.
• enableTopLevelRedirect - Boolean value to control whether the top-level page or only the embedded iframe should be redirected. By default, the top-level page will be redirected. Disabling this option will restrict the redirect to the embedded iframe only.
• eventDetails – An object containing key-value pairs that will be appended as query parameters to the redirect URL if pass_event_details_to_redirect_url is set to true. Defaults to an empty object ({}).
• ctaProps - An object containing properties for the call-to-action button that appears in the thank you page. When provided, this button will link to the Neeto product page for the specified app. The button will not be rendered if this prop is not provided. The object can contain:
  • message - The message text displayed to the left of the button
  • buttonLabel - The text displayed on the button
• resourceId - ID of the resource associated with the thank you configuration (e.g., submissionId in NeetoForm).

Usage

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}`,
    },
  ];

  return (
    <>
      <ShowThankYou
        appName="NeetoForm"
        appIcon={() => {}}
        ctaProps={{
          message:
            "This form was built with NeetoForm — modern forms made simple.",
          buttonLabel: "Create your NeetoForm",
        }}
        entityId={entityId}
        isDraftPreview={isDraftPreview}
        resubmitLink={resubmitLink}
        socialHandles={socialHandles}
        isThankYouPageLoading={isThankYouPageLoading}
        thankYouTextAlignment={thankYouTextAlignment}
        resourceId={submissionId}
      />
    </>
  );
};

export default App;

Hooks

useShowThankYouPage (source code)

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
• resourceId - ID of the resource associated with the thank you configuration (e.g., submissionId in NeetoForm).
• 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.

Usage

import { useShowThankYouPage } from "@bigbinary/neeto-thank-you-frontend";

const { data: { thankYouConfiguration } = {} } = useShowThankYouPage({
  entityId,
  resourceId,
  isTemplateView,
});

useShowThankYouConfiguration (source code)

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
• id - ID of the specific thank you configuration to fetch

Return value

Returns the data object which includes the thankYouConfiguration object containing the thank you configuration for the entity, and an isLoading boolean.

Usage

import { useShowThankYouConfiguration } from "@bigbinary/neeto-thank-you-frontend";

const {
  isLoading: isThankYouActionLoading,
  data: { thankYouConfiguration } = {},
} = useShowThankYouConfiguration({
  entityId,
  id,
});

useFetchThankYouConfigurations (source code)

This hook is used to fetch multiple thank you configurations for an entity.

Props

• entityId - ID of the entity to load the thank you configurations
• filters - Optional filters to apply when fetching configurations
• options - Optional React Query options

Return value

Returns the data object which includes the thankYouConfigurations array containing all thank you configurations for the entity, and an isLoading boolean.

Usage

import { useFetchThankYouConfigurations } from "@bigbinary/neeto-thank-you-frontend";

const { isLoading, data: { thankYouConfigurations } = {} } =
  useFetchThankYouConfigurations(entityId, filters, options);

useCreateThankYouConfiguration (source code)

This hook is used to create a new thank you configuration for an entity.

Props

• entityId - ID of the entity to create the thank you configuration for
• options - Optional React Query mutation options

Return value

Returns a mutation function and mutation state including isPending and error properties.

Usage

import { useCreateThankYouConfiguration } from "@bigbinary/neeto-thank-you-frontend";

const { mutate: createConfiguration, isPending } =
  useCreateThankYouConfiguration(entityId);

useUpdateThankYouConfiguration (source code)

This hook is used to update an existing thank you configuration.

Props

• id - ID of the thank you configuration to update
• options - Optional React Query mutation options

Return value

Returns a mutation function and mutation state including isPending and error properties.

Usage

import { useUpdateThankYouConfiguration } from "@bigbinary/neeto-thank-you-frontend";

const { mutate: updateConfiguration, isPending } =
  useUpdateThankYouConfiguration(configurationId);

useDeleteThankYouConfiguration (source code)

This hook is used to delete a thank you configuration.

Props

• entityId - ID of the entity that owns the thank you configuration
• options - Optional React Query mutation options

Return value

Returns a mutation function and mutation state including isPending and error properties.

Usage

import { useDeleteThankYouConfiguration } from "@bigbinary/neeto-thank-you-frontend";

const { mutate: deleteConfiguration, isPending } =
  useDeleteThankYouConfiguration(entityId);

Instructions for Publishing

Consult the building and releasing packages guide for details on how to publish.