{\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}需要谢谢

这个 neeto-thank-you-nano 管理“ 谢谢” 配置页面 需要申请。 纳米出口 @bigbinary/neeto-thank-you-frontend 国家防范机制一揽子计划 neeto-thank-you-engine 铁路发展引擎.

纳米还支持每个实体的多页感谢,允许您 配置和显示不同的感谢页 .

目录

1. 用主机应用程序开发
   • 发动机
     • 安装
     • 使用量
   • 前端软件包
     • 安装
     • 构成部分
     • 钩子
2. 出版指令

用主机应用程序开发

发动机

该引擎用于管理一个内“谢谢”页面配置 组织.

安装

1. 将此行添加到您的应用程序的 Gemfile 中 :

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

2. 然后执行:

   bundle install
   

3. 将此行添加到您的应用程序 config/routes.rb 文件 :

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

4. 运行以下命令以复制从引擎到主机的迁移 应用程序 :

   bundle exec rails neeto_thank_you_engine:install:migrations
   

5. 添加迁移到数据库 :

   bundle exec rails db:migrate
   

使用量

您可以在此了解更多设置和用途:

1. 模型
2. 主计长

前端软件包

软件包输出两个组件: ConfigureThankYou 财务报告和审定财务报表 ShowThankYou。 。 。 .

软件包还输出了多个用于管理感谢配置的钩子, 包括 useFetchThankYouConfigurations 用于检索 多谢您的实体配置 .

安装

安装最新的 neeto-thank-you-nano 使用下列命令的软件包:

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

发展指示

检查 前端软件包开发指南 用于开发前端软件包的分步指令.

构成部分

ConfigureThankYou (单位:千美元)源代码(中文(简体) )

此组件管理主机中“ Thank you” 页的配置 应用.

道具

• id - 特定谢谢配置的标识
• breadcrumbs - 设置头部组件的面包屑
• socialHandles - 设定共享到社交媒体的URL
• isPublished - 布尔以管理“谢谢”页面中的指针事件 配置预览
• entityId - 设置与“谢谢”页面相关的实体ID
• publicLinkId - 设置与该实体有关的实体的公共链接标识 谢谢你的社交媒体共享配置
• hasImageUploader - 布尔以启用信件中的图像上传功能 在配置页面上编辑
• uniqueSubmissionEnabled - 布尔以显示唯一提交文件的链接
• uniqueSubmissionLink - 为独特的提交设定链接
• resubmitLink - 为重新提交设置链接
• redirectToOnCancel - 设定取消提交后重定向的路径
• thankYouTextAlignment - 设置“ 谢谢” 文本的对齐 页 次
• customHeader - 接受反应节点并替换默认标题.
• appName - 接受吗 appName,用于生成符号 品牌文本中的 URL .
• appIcon - 接受吗 appIcon,用于在 (原始内容存档于2018-03-21). Neeto MadeWith徽章.
• disableSubmitAnotherResponse - 删除提交另一个文件的切换 响应,以 NeetoForm [默认:虚假]为例.
• disableRadioSelection - 移除用于 Custom message 打开 Redirect to external link [默认:虚假]
• blockNavigation - 布尔在感谢中显示区块导航警报 当有未保存的更改时, 配置页面 [默认: 假]
• editorProps - 接受需要传递给编辑部分的道具.
• preview - 可选反应组件,用于提供自定义预览,而不是 默认的.
• allowEmptyCustomMessage - 一个布尔的旗帜,当设定为真实,跳过 提交空信件的前端验证 。 [默认:虚假]
• onConfigUpdateSuccess: 当 配置正在更新。 函数的第一个参数对应 参数传递到 onSuccess 调用 React 查询突变, 而 第二个参数代表先前的配置对象.
• isPassEventDetailsEnabled - 一个布尔旗,当设置为真实,显示 切换将事件细节传递到重定向 URL 参数.
• eventDetailsHelpDescription - 描述在帮助中显示 跳过下一个 开关。 在未提供时, 返回为通用默认 。 弹出 仅在 passEventDetailsHelpDocUrl 也给予.
• ctaProps - 包含呼叫对动作按钮属性的对象 页面预览。 提供时,此按钮将 链接到指定应用的 Neeto 产品页面。 按钮不会是 如果不提供这种道具,则提供。 该对象可以包含:
  • message - 显示在按钮左侧的信件文本
  • buttonLabel - 按钮上显示的文字

配置

参见 配置谢谢 节 详细信息,说明现有配置 ConfigureThankYou 组件.

使用量

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 (单位:千美元)源代码(中文(简体) )

此组件在提交后按 主机应用程序中设置的配置 .

说明: dompurify 需要在 Show Thank you 中显示。 使用以下命令安装 dompurify。 。 。 .

yarn add dompurify

道具

• entityId - 设置与“谢谢”页面相关的实体ID
• socialHandles - 设定共享到社交媒体的URL
• isDraftPreview - 布尔生成重提交 URL 草稿
• resubmitLink - 为重新提交设置链接
• isThankYouPageLoading - 显示装入状态的布尔值
• thankYouTextAlignment - 在“谢谢”一页设置内容对齐
• customPageLoader - 指定自定义加载器组件来替换默认 页面加载器.
• appName - 接受吗 appName,用于生成符号 品牌文本中的 URL .
• appIcon - 接受吗 appIcon,用于在 (原始内容存档于2018-03-21). Neeto MadeWith徽章.
• editorProps - 接受需要传递给编辑部分的道具.
• enableTopLevelRedirect - 布尔值以控制顶级页面 或只调整嵌入式iframe。 默认情况下, 顶级 页面将重新定向。 禁用此选项将限制重定向到 只有嵌入式iframe.
• eventDetails - 包含按键值对的对象,将附加为 如果 pass_event_details_to_redirect_url 被设定为真实。 默认为空对象 (QQ) .
• ctaProps - 包含呼叫对动作按钮属性的对象 出现在感谢页。 当提供时,此按钮将链接到 指定应用程序的 Neeto 产品页。 按钮不会被打开 如果不提供此道具。 该对象可以包含:
  • message - 显示在按钮左侧的信件文本
  • buttonLabel - 按钮上显示的文字
• resourceId - 与感谢配置相关的资源标识 (例如, submissionId 在尼托福尔姆.

使用量

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;

钩子

useShowThankYouPage (单位:千美元)源代码(中文(简体) )

此钩用于获取实体的"谢谢"页面.

道具

• entityId - 装入谢谢配置的实体的标识
• resourceId - 与感谢配置相关的资源标识 (例如, submissionId 在尼托福尔姆.
• isTemplateView - 布尔以检查当前页面是否为模板视图

返回值

返回 data 对象,包括 thankYouConfiguration 对象 包含实体的感谢配置.

使用量

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

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

useShowThankYouConfiguration (单位:千美元)源代码(中文(简体) )

此钩用于获取实体的感谢配置 .

道具

• entityId - 装入谢谢配置的实体的标识
• id - 要获取的特定感谢配置的标识

返回值

返回 data 对象,包括 thankYouConfiguration 对象 包含对实体的感谢配置,以及 isLoading 布尔.

使用量

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

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

useFetchThankYouConfigurations (单位:千美元)源代码(中文(简体) )

此钩子用于获取一个实体的多重感谢配置 .

道具

• entityId - 载入感谢配置的实体的ID
• filters - 获取配置时可选的过滤器
• options - 可选反应查询选项

返回值

返回 data 对象,包括 thankYouConfigurations 数组 包含所有实体的感谢配置,以及 isLoading 布尔.

使用量

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

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

useCreateThankYouConfiguration (单位:千美元)源代码(中文(简体) )

此钩用于为实体创建新的感谢配置 .

道具

• entityId - 创建感谢配置的实体的ID
• options - 可选反应查询变异选项

返回值

返回一个突变函数和突变状态,包括 isPending 财务报告和审定财务报表 error 属性.

使用量

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

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

useUpdateThankYouConfiguration (单位:千美元)源代码(中文(简体) )

此钩用于更新已有的感谢配置 .

道具

• id - 用于更新的感谢配置的标识
• options - 可选反应查询变异选项

返回值

返回一个突变函数和突变状态,包括 isPending 财务报告和审定财务报表 error 属性.

使用量

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

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

useDeleteThankYouConfiguration (单位:千美元)源代码(中文(简体) )

此钩用于删除一个谢谢配置 .

道具

• entityId - 拥有感谢配置的实体的身份
• options - 可选反应查询变异选项

返回值

返回一个突变函数和突变状态,包括 isPending 财务报告和审定财务报表 error 属性.

使用量

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

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

出版指令

咨询 构建和释放软件包 关于如何出版的详细指南.