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.

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 => "/neeto_thank_you_engine"

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 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.
• 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]
• 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.
• 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

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

  const THANK_YOU_PAGE_BRANDING_INFO = {
    // "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" />,
    },
  };

  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"
        onConfigUpdateSuccess={handleConfigUpdateSuccess}
        brandingInfo={THANK_YOU_PAGE_BRANDING_INFO}
      />
    </>
  );
};

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.
• 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

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 THANK_YOU_PAGE_BRANDING_INFO = {
    // "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" />,
    },
  };

  return (
    <>
      <ShowThankYou
        appName="neetoForm"
        entityId={entityId}
        isDraftPreview={isDraftPreview}
        resubmitLink={resubmitLink}
        socialHandles={socialHandles}
        isThankYouPageLoading={isThankYouPageLoading}
        thankYouTextAlignment={thankYouTextAlignment}
        brandingInfo={THANK_YOU_PAGE_BRANDING_INFO}
      />
    </>
  );
};

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

Instructions for Publishing

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