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

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