@bigbinary/neeto-thank-you-frontend NPM

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.

Development with Host Application
- Engine
  - Installation
  - Usage
- Frontend package
Instructions for Publishing

Development with Host Application

Engine

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

Installation

Add this line to your application's Gemfile:

source "NEETO_GEM_SERVER_URL" do
   # ..existing gems

   gem 'neeto-thank-you-engine'
end

And then execute:
```
bundle install
```

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

mount NeetoThankYouEngine::Engine => "/neeto_thank_you_engine"

Run the following command to copy the migrations from the engine to the host application:
```
bundle exec rails neeto_thank_you_engine:install:migrations
```
Add the migrations to the database:
```
bundle exec rails db:migrate
```

Usage

You can learn more about the setup and usage here:

Frontend package

The package exports two components: ConfigureThankYou and ShowThankYou.

The package also exports two hooks: useShowThankYouPage and useShowThankYouConfiguration

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

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 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
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 checkbox to pass event details to redirect url as parameters.

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
        breadcrumbs={breadcrumbs}
        entityId={entityId}
        publicLinkId={publicLinkId}
        isPublished={isPublished}
        resubmitLink={resubmitLink}
        socialHandles={socialHandles}
        uniqueSubmissionEnabled={uniqueSubmissionEnabled}
        uniqueSubmissionLink={uniqueSubmissionLink}
        redirectToOnCancel={redirectToOnCancel}
        thankYouTextAlignment={thankYouTextAlignment}
        appName="NeetoForm"
        appIcon={() => {}}
        onConfigUpdateSuccess={handleConfigUpdateSuccess}
        helpPopoverProps={HELP_POPOVER_PROPS}
        eventDetailsSwitchLabel={eventDetailsSwitchLabel}
      />
    </>
  );
};

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 choose redirecting the top level page or embedded iframe. By default, on embedded pages, only the embedded iframe will be redirected. Enabling this option will redirect the top level page on which the component is embedded.
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 ({}).

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={() => {}}
        entityId={entityId}
        isDraftPreview={isDraftPreview}
        resubmitLink={resubmitLink}
        socialHandles={socialHandles}
        isThankYouPageLoading={isThankYouPageLoading}
        thankYouTextAlignment={thankYouTextAlignment}
      />
    </>
  );
};

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
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,
  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

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 });