需要电讯-腾讯-nano

这个 neeto-message-templates-nano 管理横跨 neto 的信件模板 产品。 目前,它支持创建短消息,电子邮件和Whatsapp 模板。 纳米出口 页:1 @bigbinary/neeto-message-templates-frontend 国家防范机制一揽子计划 财务报告和审定财务报表 neeto-message-templates-engine 铁路发展引擎.

目录

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

用主机应用程序开发

发动机

该引擎用于管理横跨neto产品的信息模板.

安装

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

   source "NEETO_GEM_SERVER_URL" do
      # ..existing gems
   
      gem 'neeto-message-templates-engine'
   end
   

2. 然后执行:

   bundle install
   

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

   mount NeetoMessageTemplatesEngine::Engine, at: "/neeto_message_templates"
   

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

   bundle exec rails neeto_message_templates_engine:install:migrations
   

5. 添加迁移到数据库 :

   bundle exec rails db:migrate
   

6. 创建文件 neeto-message-templates.rb 下级 config/initializers 改为 提供 owner_class 资料

   NeetoFormEngine.owner_class = "Organization"
   

7. 添加权限 neeto_message_templates_engine.manage_message_templates 给您的 permissions.yml 文档.

8. 在主机应用程序中配置所有者模式 .

   has_many :message_templates, as: :owner, class_name: "NeetoMessageTemplatesEngine::MessageTemplate", dependent: :destroy
   

使用量

您可以在此了解更多关于用法:

1. 模型

前端软件包

安装

1. 安装最新的 neeto-message-templates-nano 使用下列软件包 命令 :

   yarn add @bigbinary/neeto-message-templates-frontend
   

发展指示

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

构成部分

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

此组件用于管理您网络应用程序中的消息模板 。 这个 为查看、添加和编辑模板提供方便用户的界面, 以及过滤和搜索能力.

道具

• shouldIncludeTestTemplate: 显示测试消息的布尔 应包含模板选项.
• handleSubmitTestTemplate: 主机应用程序中负责的函数 提交值以发送电子邮件和短消息的测试模板.
• isTestMessageLoading: 显示测试模板是否处理的布尔 提交处于装入状态.
• type: 代表信件类型, 包含 email, (中文(简体) ), sms,或 whatsapp。 。 。 .

可选道具

• templateVariables: (可选) 以添加动态变量来形成正体字段.
• ownerId: (可选) 提供 ID 如果不是拥有者 组织模式. 如果拥有者是一个组织,这个道具可以留给它 不详.
• breadcrumbs: 指定用于导航的面包屑的一系列物体.
• isTestingTemplateDisabled: 显示测试模板的布尔 按钮应启用与否.
• manageTemplatesPaneCustomFields: 在管理器中添加自定义组件 模板窗格 .
• customFieldsBelowBody: 在管理模板中添加自定义字段组件 将它置于身体之下.
• customFieldsInitialValues: 为自定义字段提供初始值.
• customFieldsValidationSchema: 为定制提供验证计划 字段.
• onMutationSuccess: 成功时触发的回调功能 的变异函数(创建、更新和删除).
• paneSize:确定窗格的大小。 默认为 "large". 接受 值为 "small", (中文(简体) ), "large",或 "extraLarge"。 。 。 .
• helpPopoverProps: 为组件添加帮助 popover 。 参考 帮助Popover 组件 doc。 。 。 . 注: href 从 helpLinkProps 用于显示帮助文件 链接在 NoData 组件。 标题将用作帮助弹出 如果没有提供标题.
• allowAddingImagesToEmailTemplate: 一个布尔表示图像可以是 添加到邮件模板信件正文中 .

使用量

import React from "react";

import { MessageTemplates } from "@bigbinary/neeto-message-templates-frontend";

const App = () => {
  const queryClient = useQueryClient();

  const breadcrumbs = [
    {
      link: "/settings",
      text: "Settings",
    },
  ];
  const handleSubmit = () => {
    //api call
  };

  const TEMPLATE_VARIABLES = [
    {
      key: "name",
      label: "Name",
    },
  ];
  const customFieldsBelowBody = () => (
    <Typography>This will render below body</Typography>
  );

  const manageTemplatesPaneCustomFields = () => (
    <Callout icon={Warning} style="warning">
      Twilio integration is required for sending SMS. Please connect your Twilio
      account.
    </Callout>
  );

  return (
    <MessageTemplates
      allowAddingImagesToEmailTemplate
      shouldIncludeTestTemplate
      breadcrumbs={breadcrumbs}
      handleSubmitTestTemplate={handleSubmit}
      isTestMessageLoading={isTestMessageLoading}
      templateVariables={TEMPLATE_VARIABLES}
      type={type}
      customFieldsBelowBody={customFieldsBelowBody()}
      isTestingTemplateDisabled={isTestingTemplateDisabled}
      manageTemplatesPaneCustomFields={manageTemplatesPaneCustomFields()}
      onMutationSuccess={() =>
        queryClient.invalidateQueries({
          queryKey: ["rules"],
        })
      }
    />
  );
};

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

此组件提供了一个窗格, 用户可以选择模板并添加内容 来撰写和发送消息.

道具

• isOpen: 一个布尔决定边窗帘是否打开.
• onClose: 关闭时执行的函数.
• handleSubmit:主机应用程序内用于发送短消息和电子邮件的功能.
• type: 代表信件类型, 包含 email, (中文(简体) ), sms,或 whatsapp。 。 。 .
• paneSize:确定窗格的大小。 默认为 "large". 接受 值为 "small", (中文(简体) ), "large",或 "extraLarge"。 。 。 .

可选道具

• customFields:将自定义字段组件添加到窗格中.
• customFieldsBelowBody: 将自定义字段组件添加到窗格并制作 它的下方的躯体在 EmailAndSms。 。 。 .
• customFieldsInitialValues: 为自定义字段提供初始值.
• customFieldsValidationSchema: 为定制提供验证计划 字段.
• templateVariables: 要添加动态变量以形成体域.
• ownerId:提供 ID 如果不是组织,则由所有者承担 型号。 如果所有者是一个组织,则此道具可以留作未加说明.
• isSaveAsTemplateEnabled - 允许用户保存当前内容 消息作为新模板.
• canManageTemplates - 当这被设定为虚假, save as template 选项 将不会显示给用户 .
• helpPopoverProps: 要显示的道具 HelpPopover 输入字段旁边 EmailAndSms。 。 。 .
• allowAddingImagesToEmail: 显示是否可以添加图像的布尔 到邮件信件正文.

使用量

import React, { useState } from "react";

import { SendMessagePane } from "@bigbinary/neeto-message-templates-frontend";

import { EMAIL_SUBJECT_HELP_DOC_URL, SMS_TEMPLATE_HELP_DOC_URL }

const App = () => {
  const [isPaneOpen, setIsPaneOpen] = useState(false);

  const handleSubmit = () => {
    //api call
  };

  const customFields = () => (
    <div className="space-y-4">
      <Input required label="To" name="to" />
      <Input required label="From" name="from" />
    </div>
  );

  const customFieldsBelowBody = () => (
    <div className="space-y-4">
      <Input label="CC" name="cc" placeholder="Enter CC email" />
      <Input label="BCC" name="bcc" placeholder="Enter BCC email" />
      <Input label="Reply To" name="replyTo" placeholder="Enter reply-to email" />
    </div>
  );

  const customFieldsInitialValues = {
    to: "",
    from: "",
    cc: "",
    bcc: "",
    replyTo: "",
  };

  const customFieldsSchema = yup.object().shape({
    to: yup.string().trim().required("To address is required").email("invalid"),
    from: yup
      .string()
      .trim()
      .required("From address is required")
      .email("invalid"),
    cc: yup.string().trim().email("Invalid email"),
    bcc: yup.string().trim().email("Invalid email"),
    replyTo: yup.string().trim().email("Invalid email"),
  });

  const helpPopoverProps = {
    email: {
      subject: {
        helpIconProps: {
          popoverProps: {
            title: "subject",
            helpLinkProps: {
              href: EMAIL_SUBJECT_HELP_DOC_URL,
              label: t("View help article"),
            },
          },
        },
      },
    },
    sms: {
      template: {
        helpIconProps: {
          popoverProps: {
            title: "SMS Templates",
            helpLinkProps: {
              href: SMS_TEMPLATE_HELP_DOC_URL,
              label: t("View help article"),
            },
          },
        },
      },
    },
  };

  return (
    <SendMessagePane
      allowAddingImagesToEmail
      handleSubmit={handleSubmit}
      isOpen={isPaneOpen}
      paneSize="extraLarge"
      type={type}
      onClose={() => setIsPaneOpen(false)}
      customFields={customFields()}
      customFieldsBelowBody={customFieldsBelowBody()}
      customFieldsInitialValues={customFieldsInitialValues}
      customFieldsValidationSchema={customFieldsSchema}
      helpPopoverProps={helpPopoverProps}
    />
  );
};

ApiTemplates (英语:源代码(中文(简体) )

此组件用于管理应用程序中的 API 模板 。 这个 提供添加、删除和编辑 API 模板的界面,同时提供 过滤和搜索能力.

道具

• ownerId:提供 ID aPI 模板所属所有者 改为:.

可选道具

• breadcrumbs: 指定用于导航的面包屑的一系列物体.

• onMutationSuccess: 成功时触发的回调功能 的变异函数(创建、更新和删除).

• initialPayload:指定主体作为对象的初始值.

• templateVariables:将动态变量添加到体域.

• paneSize:确定窗格的大小。 默认为 "large". 接受 值为 "small", (中文(简体) ), "large",或 "extraLarge"。 。 。 .

• helpPopoverProps - 给各行各业增加帮助弹出器.

  • 页眉: 在下面定义弹出道具 apiTemplates说明: href 从 helpLinkProps 将用来在 NoData 组件。 如果没有标题, 标题将用作帮助弹出标题 提供.
  • 自定义信头: 在下面定义弹出道具 customHeaders。 。 。 .
  • 体质: 在下面定义弹出道具 body。 。 。 .

  以更详之. 详情请参见: 帮助Popover 组件文档。 。 。 .

使用量

import React from "react";

import { ApiTemplates } from "neetomessagetemplates";

const App = () => {
  const queryClient = useQueryClient();

  const breadcrumbs = [{ link: "/settings", text: "Settings" }];
  const ownerId = "ownerId";

  const HELP_POPOVER_PROPS = {
    apiTemplates: {
      title: "Title for the popover displayed in header",
      description: "Description for the popover displayed in header.",
      helpLinkProps: { href: SEND_TO_API_HELP_DOC_URL },
    },
    customHeaders: {
      title: "Title for custom headers popover",
      description: "Description for custom headers popover.",
      helpLinkProps: { href: CUSTOM_HEADERS_HELP_DOC_URL },
    },
    body: {
      title: "Title for API payload popover",
      description: "Description for API payload popover.",
      helpLinkProps: { href: API_PAYLOAD_HELP_DOC_URL },
    },
  };

  TEMPLATE_VARIABLES = [
    { label: t("form.allAnswers"), key: "all-answers" },
    { label: t("common.formName"), key: "form-name" },
  ];

  return (
    <ApiTemplates
      {...{ breadcrumbs, ownerId }}
      templateVariables={TEMPLATE_VARIABLES}
      onMutationSuccess={() =>
        queryClient.invalidateQueries({ queryKey: ["rules"] })
      }
    />
  );
};

发送 ApiPane (源代码(中文(简体) )

此组件提供了一个窗格,用户可以选择 API 模板并修改 如果需要,则将其发送到指定的HTTP(S)端点.

道具

• ownerId: 一个布尔决定边窗帘是否打开.

• onClose: 关闭窗格时会执行此函数.

• onSubmit: 此函数将在提交窗体时执行.

• isSubmitting: 布尔以了解表单提交状态

• canManageTemplates - 当这被设定为虚假, save as template 选项 将不会显示给用户 .

• templateVariables:将动态变量添加到体域.

• paneSize:确定窗格的大小。 默认为 "large". 接受 值为 "small", (中文(简体) ), "large",或 "extraLarge"。 。 。 .

• helpPopoverProps - 加入帮助弹出器 在窗帘的各个部分.

  • 字段标题: 在下面定义弹出道具 sendToApi。 。 。 .
  • 自定义信头: 在下面定义弹出道具 customHeaders。 。 。 .
  • 体质: 在下面定义弹出道具 body。 。 。 .

  以更详之. 详情请参见: 帮助Popover 组件文档。 。 。 .

使用量

import React, { useState } from "react";

import { SendToApiPane } from "@bigbinary/neeto-message-templates-frontend";

const App = () => {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSendToApiPaneOpen, setIsSendToApiPaneOpen] = useState(false);

  const ownerId = "ownerId";

  const HELP_POPOVER_PROPS = {
    sendToApi: {
      title: "Title for send to API popover",
      description: "Description for send to API popover.",
      helpLinkProps: { href: SEND_TO_API_HELP_DOC_URL },
    },
    customHeaders: {
      title: "Title for custom headers popover",
      description: "Description for custom headers popover.",
      helpLinkProps: { href: CUSTOM_HEADERS_HELP_DOC_URL },
    },
    body: {
      title: "Title for API payload popover",
      description: "Description for API payload popover.",
      helpLinkProps: { href: API_PAYLOAD_HELP_DOC_URL },
    },
  };

  TEMPLATE_VARIABLES = [
    { label: t("form.allAnswers"), key: "all-answers" },
    { label: t("common.formName"), key: "form-name" },
  ];

  const handleSubmit = () => {
    setIsSubmitting(true);
    // API call
    setIsSubmitting(false);
  };

  return (
    <SendToApiPane
      {...{ isSubmitting, ownerId }}
      isOpen={isSendToApiPaneOpen}
      onClose={() => setIsSendToApiPaneOpen(false)}
      onSubmit={handleSubmit}
      helpPopoverProps={HELP_POPOVER_PROPS}
      templateVariables={TEMPLATE_VARIABLES}
    />
  );
};

出版指令

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