npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@bigbinary/neeto-thank-you-frontend

v2.1.11

Published

A repo acts as the source of truth for the new nano's structure, configs, data etc.

Downloads

3,222

Readme

BuildStatus

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